/* Book My Houseboat.com — styles v1 */
:root {
  --lake-900: #0B1F2A; --lake-700: #143847; --lake-500: #2E6B7A;
  --mist-100: #EEF3F4; --ivory-50: #FBF8F2;
  --walnut-700: #4A2E1F; --saffron-500: #D9942B; --saffron-300: #EBC27A;
  --ink-900: #14181B; --ink-500: #5C666D; --line-200: #DDD8CF; --wa-green: #25D366;
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", "Inter", system-ui, sans-serif;
  --h1: clamp(48px, 3rem + 2.8vw, 88px); --h2: clamp(36px, 2rem + 1.4vw, 56px); --h3: clamp(24px, 1.3rem + .5vw, 32px);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-cinematic: 1200ms;
  --shadow: 0 12px 40px rgba(11, 31, 42, .10); --shadow-hover: 0 24px 60px rgba(11, 31, 42, .16);
  --glass: rgba(251, 248, 242, .72);
  --r-input: 4px; --r-card: 12px; --r-image: 24px; --r-pill: 999px;
  --pad-section: clamp(72px, 6vw + 40px, 150px); --gutter: clamp(20px, 4vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory-50); color: var(--ink-900); font: 400 16px/1.6 var(--font-body); text-wrap: pretty; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); }
a { color: var(--lake-500); text-decoration: none; }
a:hover { color: var(--lake-700); }
img { display: block; max-inline-size: 100%; block-size: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--lake-500); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: absolute; inset-inline-start: 16px; inset-block-start: -60px; padding: 12px 16px; background: var(--lake-900); color: var(--ivory-50); border-radius: var(--r-input); z-index: 100; }
.skip-link:focus { inset-block-start: 16px; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Layout */
.container { inline-size: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--pad-section); position: relative; }
.section--mist { background: var(--mist-100); }
.section--dark { background: var(--lake-900); color: var(--ivory-50); }
.section--dark a { color: var(--saffron-300); }
.section--dark .text-muted { color: rgba(251, 248, 242, .68); }
.section--lazy { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.section__head { display: grid; gap: 16px; margin-block-end: clamp(40px, 5vw, 72px); max-inline-size: 72ch; }
.section__head--split { max-inline-size: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.section__head--split > div { max-inline-size: 72ch; display: grid; gap: 16px; }
.section__head--center { margin-inline: auto; text-align: center; }
.label { font-size: 13px; color: var(--ink-500); }
.section--dark .label { color: var(--saffron-300); }
.text-muted { color: var(--ink-500); }
.lead { font-size: 18px; max-inline-size: 60ch; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.link svg { inline-size: 18px; block-size: 18px; transition: transform var(--dur-base) var(--ease-out-expo); }
.link:hover svg { transform: translateX(4px); }
.icon { inline-size: 28px; block-size: 28px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { inline-size: 18px; block-size: 18px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 52px; padding: 14px 26px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; line-height: 1; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--saffron-500); color: var(--ink-900); }
.btn--primary:hover { background: var(--saffron-300); color: var(--ink-900); }
.btn--secondary { background: var(--walnut-700); color: var(--ivory-50); }
.btn--secondary:hover { background: #5c3a28; color: var(--ivory-50); }
.btn--ghost { color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost:hover { background: rgba(251, 248, 242, .12); color: inherit; }
.btn--dark { color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--line-200); }
.btn--dark:hover { background: var(--mist-100); color: var(--ink-900); }
.btn--wa { background: var(--wa-green); color: var(--lake-900); }
.btn--wa:hover { background: #3fdc79; color: var(--lake-900); }
.btn--icon { inline-size: 44px; min-block-size: 44px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-200); }
.btn--icon:hover { background: var(--mist-100); }
.btn--sm { min-block-size: 44px; padding: 10px 18px; font-size: 14px; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

/* Header */
.header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; color: var(--ivory-50); transition: background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); }
.header--glass { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--ink-900); box-shadow: 0 1px 0 var(--line-200); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-block-size: 76px; }
.header__logo { font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; color: inherit; white-space: nowrap; }
.header__logo em { font-style: italic; color: var(--saffron-300); }
.header--glass .header__logo em { color: var(--saffron-500); }
.header__nav { display: none; }
.header__nav a { color: inherit; font-size: 15px; font-weight: 500; padding: 8px 2px; position: relative; }
.header__nav a::after { content: ""; position: absolute; inset-inline: 2px; inset-block-end: 2px; block-size: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out-expo); }
.header__nav a:hover::after { transform: scaleX(1); }
.header__nav svg { inline-size: 12px; block-size: 12px; margin-inline-start: 4px; vertical-align: middle; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__actions .btn--icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: inherit; }
.header__actions .btn--icon:hover { background: rgba(255, 255, 255, .12); }
.header--glass .header__actions .btn--icon:hover { background: var(--mist-100); }
.header--glass .header__actions .btn--icon { box-shadow: inset 0 0 0 1px var(--line-200); }
.header__cta { display: none; }
.header__menu { display: inline-flex; }
.header__nav--open { display: flex; flex-direction: column; gap: 4px; position: absolute; inset-block-start: 76px; inset-inline: 0; padding: 16px var(--gutter) 28px; background: var(--ivory-50); color: var(--ink-900); box-shadow: var(--shadow); }
.header__nav--open a { font-size: 20px; font-family: var(--font-display); padding: 10px 0; }
@media (min-width: 1200px) {
  .header__nav { display: flex; gap: 22px; align-items: center; }
  .header__cta { display: inline-flex; }
  .header__menu { display: none; }
}

/* Hero */
.hero { position: relative; min-block-size: 100svh; display: flex; align-items: flex-end; color: var(--ivory-50); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; animation: hero-zoom 20s var(--ease-soft) both; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 31, 42, .25) 0%, rgba(11, 31, 42, 0) 35%, rgba(11, 31, 42, .55) 70%, var(--lake-900) 100%); }
.hero__mist { position: absolute; inset: -20%; z-index: -1; opacity: .14; background: radial-gradient(60% 40% at 30% 60%, #fff 0, transparent 70%), radial-gradient(50% 30% at 70% 50%, #fff 0, transparent 70%); animation: mist-drift 18s ease-in-out infinite alternate; pointer-events: none; }
.hero__content { position: relative; padding-block: 140px 200px; max-inline-size: 760px; }
.hero__title { margin-block: 20px 24px; }
.hero__title .word { display: inline-block; }
.hero__sub { max-inline-size: 60ch; font-size: 17px; color: rgba(251, 248, 242, .88); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 36px; }
.hero__label, .hero__title .word, .hero__sub, .hero__ctas { opacity: 0; transform: translateY(24px); }
.hero--ready .hero__label, .hero--ready .hero__title .word, .hero--ready .hero__sub, .hero--ready .hero__ctas { opacity: 1; transform: none; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes mist-drift { from { transform: translate3d(-4%, 2%, 0); } to { transform: translate3d(4%, -3%, 0); } }

/* Finder */
.finder-wrap { position: relative; z-index: 2; margin-block-start: -120px; }
.finder { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-200); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 24px; display: grid; gap: 20px; color: var(--ink-900); }
.finder--intro { opacity: 0; transform: translateY(32px); }
.hero--ready + .finder-wrap .finder--intro { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out-expo) 1.5s, transform var(--dur-slow) var(--ease-out-expo) 1.5s; }
.finder__title { font-size: 24px; }
.finder__grid { display: grid; gap: 16px; }
.finder__note { font-size: 13px; color: var(--ink-500); }
.field { display: grid; gap: 6px; }
.field__label { font-size: 13px; color: var(--ink-500); }
.input, .select { inline-size: 100%; min-block-size: 48px; padding: 0 14px; border: 1px solid var(--line-200); border-radius: var(--r-input); background: var(--ivory-50); font: inherit; color: var(--ink-900); transition: border-color var(--dur-fast); }
.input:hover, .select:hover { border-color: var(--ink-500); }
.input:focus, .select:focus { outline: 2px solid var(--lake-500); outline-offset: -1px; border-color: var(--lake-500); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235C666D' stroke-width='1.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-inline-end: 36px; }
.counter { display: flex; align-items: center; justify-content: space-between; min-block-size: 48px; border: 1px solid var(--line-200); border-radius: var(--r-input); background: var(--ivory-50); padding-inline: 6px; }
.counter__btn { inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; transition: background var(--dur-fast); }
.counter__btn:hover { background: var(--mist-100); }
.counter__value { font-weight: 600; min-inline-size: 2ch; text-align: center; }
.segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-block-size: 48px; padding: 4px; border: 1px solid var(--line-200); border-radius: var(--r-pill); background: var(--ivory-50); }
.segmented__pill { position: absolute; inset-block: 4px; inset-inline-start: 4px; inline-size: calc(50% - 4px); border-radius: var(--r-pill); background: var(--lake-900); transition: transform var(--dur-base) var(--ease-soft); }
.segmented__btn { position: relative; z-index: 1; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink-500); transition: color var(--dur-base) var(--ease-soft); }
.segmented__btn[aria-checked="true"] { color: var(--ivory-50); }
.finder__submit { align-self: end; }
@media (min-width: 640px) { .finder__grid { grid-template-columns: 1fr 1fr; } .finder__submit { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .finder__grid { grid-template-columns: 1.4fr 1fr 1fr .9fr auto; } .finder__submit { grid-column: auto; } }
.finder--compact { background: var(--lake-700); border-color: rgba(255, 255, 255, .12); color: var(--ivory-50); backdrop-filter: none; }
.finder--compact .finder__grid { grid-template-columns: 1fr; }
.finder--compact .finder__submit { grid-column: auto; }
.finder--compact .field__label, .finder--compact .finder__note { color: rgba(251, 248, 242, .7); }
.finder--compact .input, .finder--compact .counter, .finder--compact .segmented { background: rgba(251, 248, 242, .06); border-color: rgba(255, 255, 255, .18); color: var(--ivory-50); }
.finder--compact .segmented__pill { background: var(--ivory-50); }
.finder--compact .segmented__btn { color: rgba(251, 248, 242, .7); }
.finder--compact .segmented__btn[aria-checked="true"] { color: var(--lake-900); }
.finder--compact .counter__btn:hover { background: rgba(255, 255, 255, .1); }
.finder--compact .input::-webkit-calendar-picker-indicator { filter: invert(1); }

/* 02 Why */
.why { display: grid; gap: 32px; }
.why__item { display: grid; gap: 14px; }
.why__item h3 { font-size: 24px; }
.why .icon--draw path, .why .icon--draw circle, .why .icon--draw line, .why .icon--draw rect { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset var(--dur-cinematic) var(--ease-out-expo); }
.why .is-in .icon--draw path, .why .is-in .icon--draw circle, .why .is-in .icon--draw line, .why .is-in .icon--draw rect { stroke-dashoffset: 0; }
@media (min-width: 640px) { .why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .why { grid-template-columns: repeat(4, 1fr); gap: 0; } .why__item { padding-inline: 32px; border-inline-start: 1px solid var(--line-200); } .why__item:first-child { padding-inline-start: 0; border: 0; } }

/* 03 Categories */
.tiles { display: grid; gap: 24px; }
.tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-image); overflow: hidden; color: var(--ivory-50); isolation: isolate; }
.tile img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 31, 42, 0) 40%, rgba(11, 31, 42, .85) 100%); }
.tile__body { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; padding: 32px; display: grid; gap: 12px; }
.tile__body p { color: rgba(251, 248, 242, .82); font-size: 15px; }
.tile__body .link { color: var(--ivory-50); }
.tile:hover img { transform: scale(1.04); }
.tile:hover .link svg { transform: translateX(6px); }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }

/* 04–05 Lake features */
.feature { display: grid; gap: 40px; align-items: center; }
.feature__media { border-radius: var(--r-image); overflow: hidden; aspect-ratio: 4 / 3; }
.feature__media img { inline-size: 100%; block-size: 116%; object-fit: cover; margin-block-start: -8%; }
.feature__body { display: grid; gap: 20px; max-inline-size: 60ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; min-block-size: 36px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-200); font-size: 13px; color: var(--ink-500); background: var(--ivory-50); }
.clip-reveal { clip-path: inset(0 100% 0 0 round var(--r-image)); transition: clip-path var(--dur-cinematic) var(--ease-out-expo); }
.is-in .clip-reveal, .clip-reveal.is-in { clip-path: inset(0 0 0 0 round var(--r-image)); }
@media (min-width: 900px) { .feature { grid-template-columns: 1.1fr 1fr; gap: 80px; } .feature--reverse .feature__media { order: 2; } }

/* 06 Compare */
.compare { display: grid; border-block-start: 1px solid var(--line-200); }
.compare__row { display: grid; grid-template-columns: 1fr; gap: 6px; padding-block: 22px; border-block-end: 1px solid var(--line-200); }
.compare__row dt { font-size: 13px; color: var(--ink-500); }
.compare__head { display: none; }
.compare__row dd::before { content: attr(data-lake) " · "; color: var(--ink-500); font-size: 13px; }
@media (min-width: 640px) {
  .compare__head, .compare__row { grid-template-columns: 1fr 1.4fr 1.4fr; gap: 24px; }
  .compare__head { display: grid; padding-block-end: 14px; font-family: var(--font-display); font-size: 24px; }
  .compare__row dd::before { content: none; }
}

/* 07 Experiences */
.ripple { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .12; }
.ripple::before, .ripple::after { content: ""; position: absolute; inset-inline: -30%; block-size: 60%; border-radius: 50%; border: 1px solid var(--ivory-50); animation: ripple 16s linear infinite; }
.ripple::after { inset-block-start: 40%; animation-delay: -8s; }
@keyframes ripple { from { transform: translateY(20%) scale(.8); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-20%) scale(1.3); opacity: 0; } }
.cards { display: grid; gap: 24px; }
.card { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--ivory-50); color: var(--ink-900); box-shadow: var(--shadow); transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 24px; display: grid; gap: 10px; }
.card--exp { background: var(--lake-700); color: var(--ivory-50); box-shadow: none; }
.card--exp p { color: rgba(251, 248, 242, .75); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* 08 Banner */
.banner { position: relative; min-block-size: 70vh; display: grid; place-items: center; text-align: center; color: var(--ivory-50); overflow: hidden; isolation: isolate; }
.banner__media { position: absolute; inset: -12% 0; z-index: -1; }
.banner__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.banner__media::after { content: ""; position: absolute; inset: 0; background: rgba(11, 31, 42, .55); }
.banner__body { display: grid; gap: 20px; justify-items: center; max-inline-size: 64ch; padding-block: 80px; }
.banner__body p { color: rgba(251, 248, 242, .85); font-size: 17px; }

/* 09 Rail */
.rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 8px 24px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail__nav { display: flex; gap: 8px; }
.card--houseboat { flex: 0 0 min(340px, 84vw); scroll-snap-align: start; }
.card__tag { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; z-index: 1; padding: 6px 12px; border-radius: var(--r-pill); background: var(--glass); backdrop-filter: blur(16px); font-size: 12px; font-weight: 600; }
.card__meta { font-size: 14px; color: var(--ink-500); }
.card__facilities { display: flex; flex-wrap: wrap; gap: 10px; color: var(--ink-500); }
.card__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--line-200); }
.card__price strong { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -.02em; }
.card__price small { font-size: 13px; color: var(--ink-500); }
.card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card__actions .btn { flex: 1; }
.verified { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lake-500); font-weight: 600; }

/* 10 Rates */
.rates { display: grid; gap: 24px; }
.rate { display: grid; gap: 8px; padding: 32px; border: 1px solid var(--line-200); border-radius: var(--r-card); }
.rate__price { font-family: var(--font-display); font-size: var(--h2); letter-spacing: -.02em; line-height: 1; }
.rate__price small { font-family: var(--font-body); font-size: 14px; color: var(--ink-500); letter-spacing: 0; }
@media (min-width: 640px) { .rates { grid-template-columns: repeat(3, 1fr); } }

/* 11 Steps */
.steps { position: relative; display: grid; gap: 40px; counter-reset: step; }
.steps__line { display: none; }
.step { display: grid; gap: 12px; }
.step__num { font-family: var(--font-display); font-size: 40px; color: var(--saffron-500); line-height: 1; }
.step h3 { font-size: 24px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; padding-block-start: 48px; }
  .steps__line { display: block; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; background: var(--line-200); }
  .steps__line span { display: block; block-size: 100%; background: var(--saffron-500); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out-expo); }
  .steps.is-in .steps__line span { transform: scaleX(1); }
}

/* 12 Points */
.points { display: grid; gap: 32px 64px; }
.point { display: grid; grid-template-columns: 28px 1fr; gap: 18px; align-items: start; }
.point h3 { font-size: 22px; margin-block-end: 6px; }
@media (min-width: 900px) { .points { grid-template-columns: 1fr 1fr; } }

/* 13 About */
.about { display: grid; gap: 40px; align-items: center; }
.about__media { border-radius: var(--r-image); overflow: hidden; aspect-ratio: 1; max-inline-size: 420px; }
@media (min-width: 900px) { .about { grid-template-columns: 420px 1fr; gap: 80px; } }

/* 14 Tradition */
.tradition { position: relative; overflow: hidden; }
.tradition__word { position: absolute; inset-inline-start: 50%; inset-block-start: 40%; transform: translate(-50%, -50%); font-family: var(--font-display); font-style: italic; font-size: clamp(160px, 28vw, 420px); line-height: 1; color: rgba(251, 248, 242, .04); white-space: nowrap; pointer-events: none; user-select: none; }
.tradition__grid { position: relative; display: grid; gap: 40px 48px; }
.tradition__grid h3 { font-size: 24px; margin-block-end: 8px; }
.tradition__grid p { color: rgba(251, 248, 242, .7); }
@media (min-width: 640px) { .tradition__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .tradition__grid { grid-template-columns: repeat(3, 1fr); } }

/* 15 Gallery */
.filter { display: flex; flex-wrap: wrap; gap: 8px; position: relative; margin-block-end: 40px; }
.filter__chip { position: relative; z-index: 1; min-block-size: 40px; padding: 8px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--ink-500); transition: color var(--dur-base) var(--ease-soft); }
.filter__chip[aria-pressed="true"] { color: var(--ivory-50); }
.filter__pill { position: absolute; inset-block-start: 0; inset-inline-start: 0; block-size: 40px; border-radius: var(--r-pill); background: var(--lake-900); transition: transform var(--dur-base) var(--ease-soft), width var(--dur-base) var(--ease-soft); }
.gallery { columns: 1; column-gap: 20px; }
.gallery__item { break-inside: avoid; margin-block-end: 20px; border-radius: var(--r-card); overflow: hidden; transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft); }
.gallery__item img { inline-size: 100%; transition: transform var(--dur-slow) var(--ease-out-expo); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item figcaption { font-size: 13px; color: var(--ink-500); padding-block-start: 8px; }
.gallery__item[hidden] { display: none; }
.gallery--fading .gallery__item { opacity: 0; transform: translateY(12px); }
@media (min-width: 640px) { .gallery { columns: 2; } }
@media (min-width: 900px) { .gallery { columns: 3; } }

/* 16 Reviews */
.reviews { position: relative; overflow: hidden; }
.reviews__track { display: flex; transition: transform var(--dur-slow) var(--ease-soft); }
.review { flex: 0 0 100%; padding: 40px; border: 1px solid var(--line-200); border-radius: var(--r-card); display: grid; gap: 20px; }
.review__stars { color: var(--saffron-500); letter-spacing: 2px; }
.review__text { font-family: var(--font-display); font-size: 26px; line-height: 1.3; letter-spacing: -.01em; }
.review__meta { font-size: 14px; color: var(--ink-500); }
.review__note { font-size: 12px; color: var(--ink-500); border-block-start: 1px dashed var(--line-200); padding-block-start: 14px; }
.reviews__dots { display: flex; justify-content: center; gap: 10px; margin-block-start: 24px; }
.reviews__dot { inline-size: 32px; block-size: 3px; border-radius: 2px; background: var(--line-200); overflow: hidden; position: relative; }
.reviews__dot span { position: absolute; inset: 0; background: var(--lake-900); transform: scaleX(0); transform-origin: left; }
.reviews__dot[aria-current="true"] span { animation: dot-progress 6s linear forwards; }
.reviews--paused .reviews__dot[aria-current="true"] span { animation-play-state: paused; }
@keyframes dot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 17 FAQ */
.faq { max-inline-size: 800px; border-block-start: 1px solid var(--line-200); }
.faq__item { border-block-end: 1px solid var(--line-200); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 22px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { flex: none; transition: transform var(--dur-base) var(--ease-soft); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { overflow: hidden; }
.faq__a p { padding-block-end: 24px; color: var(--ink-500); max-inline-size: 64ch; }

/* 18 Closing */
.closing { display: grid; gap: 48px; align-items: start; }
.closing__info { display: grid; gap: 24px; }
.closing__info address { font-style: normal; display: grid; gap: 6px; color: rgba(251, 248, 242, .75); }
.closing__info address a { color: var(--ivory-50); }
@media (min-width: 900px) { .closing { grid-template-columns: 1fr 460px; gap: 80px; } }

/* Footer */
.footer { background: var(--lake-900); color: rgba(251, 248, 242, .75); padding-block: 72px 40px; border-block-start: 1px solid rgba(255, 255, 255, .08); }
.footer__grid { display: grid; gap: 40px 32px; }
.footer__col h3 { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ivory-50); margin-block-end: 16px; }
.footer__col li { padding-block: 5px; }
.footer__col a { color: inherit; font-size: 15px; }
.footer__col a:hover { color: var(--ivory-50); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; margin-block-start: 64px; padding-block-start: 24px; border-block-start: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.footer__social { display: flex; gap: 8px; }
.footer__social .btn--icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: var(--ivory-50); }
.footer__social .btn--icon:hover { background: rgba(255, 255, 255, .08); }
.footer__made { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--ivory-50); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }

/* Mobile bar */
.mobile-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gutter); padding-block-end: max(12px, env(safe-area-inset-bottom)); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block-start: 1px solid var(--line-200); transform: translateY(100%); transition: transform var(--dur-base) var(--ease-out-expo); }
.mobile-bar--visible { transform: none; }
.mobile-bar__price { font-size: 13px; color: var(--ink-500); }
.mobile-bar__price strong { display: block; font-family: var(--font-display); font-size: 20px; color: var(--ink-900); font-weight: 400; }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-group > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-group--right > * { transform: translateX(48px); }
.reveal-group > :nth-child(2) { transition-delay: 80ms; } .reveal-group > :nth-child(3) { transition-delay: 160ms; } .reveal-group > :nth-child(4) { transition-delay: 240ms; }
.reveal-group > :nth-child(5) { transition-delay: 320ms; } .reveal-group > :nth-child(6) { transition-delay: 400ms; } .reveal-group > :nth-child(7) { transition-delay: 480ms; }
.no-js .reveal, .no-js .reveal-group > *, .no-js .hero__label, .no-js .hero__title .word, .no-js .hero__sub, .no-js .hero__ctas, .no-js .finder--intro { opacity: 1; transform: none; }
.no-js .clip-reveal { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-cinematic: 1ms; }
  .reveal, .reveal-group > *, .hero__label, .hero__title .word, .hero__sub, .hero__ctas, .finder--intro { transform: none; }
  .clip-reveal { clip-path: none; }
  .hero__media img, .hero__mist, .ripple { animation: none; }
}

/* Modal extras (homepage) */
.modal__body { margin-block-start: 20px; }

/* Print / PDF: never hide content */
@media print {
  .reveal, .reveal-group > *, .hero__label, .hero__title .word, .hero__sub, .hero__ctas, .finder--intro, .gallery__item { opacity: 1 !important; transform: none !important; }
  .clip-reveal { clip-path: none !important; }
  .header, .mobile-bar { position: static; }
}

/* ── Batch 0: nav dropdowns, breadcrumbs, band, booking flow, modal ── */
.header__item { position: relative; }
.header__link { color: inherit; font-size: 15px; font-weight: 500; padding: 8px 2px; position: relative; display: inline-flex; align-items: center; }
.header__link::after { content: ""; position: absolute; inset-inline: 2px; inset-block-end: 2px; block-size: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out-expo); }
.header__link:hover::after, .header__item.is-open > .header__link::after { transform: scaleX(1); }
.header__link svg { inline-size: 12px; block-size: 12px; margin-inline-start: 4px; transition: transform var(--dur-base) var(--ease-soft); }
.header__item.is-open > .header__link svg { transform: rotate(180deg); }
.header__dropdown { display: none; }
.header__item.is-open > .header__dropdown { display: grid; }
.header__dropdown a { display: block; color: var(--ink-900); font-size: 15px; font-weight: 500; padding: 9px 12px; border-radius: 6px; }
.header__dropdown a:hover { background: var(--mist-100); color: var(--ink-900); }
.header__dropdown a::after { content: none; }
.header__nav--open { max-block-size: calc(100vh - 76px); overflow: auto; }
.header__nav--open .header__link { font-size: 20px; font-family: var(--font-display); padding: 10px 0; inline-size: 100%; justify-content: space-between; }
.header__nav--open .header__dropdown { padding: 0 0 8px 16px; }
.header__nav--open .header__dropdown a { font-size: 16px; padding: 8px 0; }
@media (min-width: 1200px) {
  .header__dropdown { position: absolute; inset-block-start: 100%; inset-inline-start: -12px; min-inline-size: 260px; padding: 10px; background: var(--ivory-50); border: 1px solid var(--line-200); border-radius: var(--r-card); box-shadow: var(--shadow); color: var(--ink-900); }
  .header__item.is-open > .header__dropdown { animation: dropdown-in var(--dur-base) var(--ease-out-expo) both; }
}
@keyframes dropdown-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: rgba(251, 248, 242, .7); }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: .5; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--ivory-50); }
.band { background: var(--lake-900); color: var(--ivory-50); padding-block: 132px 64px; }
.band__inner { display: grid; gap: 16px; max-inline-size: 72ch; }
.band .label { color: var(--saffron-300); }
.band__sub { color: rgba(251, 248, 242, .78); font-size: 17px; }
.input--area { min-block-size: 96px; padding-block: 12px; resize: vertical; }
.booking { display: grid; gap: 32px; align-items: start; }
.booking__flow { display: grid; gap: 24px; }
.booking__progress { block-size: 2px; background: var(--line-200); border-radius: 2px; overflow: hidden; }
.booking__bar { display: block; block-size: 100%; inline-size: 25%; background: var(--saffron-500); transition: inline-size var(--dur-slow) var(--ease-out-expo); }
.booking__step { display: grid; gap: 20px; }
.booking__step[hidden] { display: none; }
.booking__h { font-size: var(--h3); }
.booking__fields { display: grid; gap: 16px; }
.booking__review { display: grid; gap: 0; border-block-start: 1px solid var(--line-200); }
.booking__review div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding-block: 12px; border-block-end: 1px solid var(--line-200); font-size: 15px; }
.booking__review dt { color: var(--ink-500); }
.booking__error { font-size: 14px; color: #8A3B12; }
.booking__error[hidden] { display: none; }
.booking__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.booking__nav [hidden] { display: none; }
.booking__or { font-size: 14px; }
.booking__success { justify-items: start; }
.booking__tick { inline-size: 64px; block-size: 64px; fill: none; stroke: var(--lake-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.booking__tick circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: tick-draw var(--dur-cinematic) var(--ease-out-expo) forwards; }
.booking__tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick-draw var(--dur-slow) var(--ease-out-expo) .5s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.booking__links { display: flex; flex-wrap: wrap; gap: 20px; }
.booking__summary { display: grid; gap: 10px; padding: 24px; border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--mist-100); }
.booking__sumline { font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.booking__from { font-size: 14px; color: var(--ink-500); }
.booking__from strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ink-900); letter-spacing: -.02em; }
@media (min-width: 640px) { .booking__fields { grid-template-columns: 1fr 1fr; } .booking__fields .field:has(.input--area), .booking__fields .field:has([data-field="boat"]) { grid-column: 1 / -1; } }
@media (min-width: 900px) { .booking { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; } .booking__summary { position: sticky; inset-block-start: 100px; } }
.booking--modal { gap: 24px; }
@media (min-width: 900px) { .booking--modal { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; } .booking--modal .booking__summary { position: static; } }
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(11, 31, 42, .6); backdrop-filter: blur(6px); animation: fade-in var(--dur-base) var(--ease-soft) both; }
.modal__panel { position: relative; inline-size: min(880px, 100%); max-block-size: calc(100vh - 32px); overflow: auto; background: var(--ivory-50); border-radius: var(--r-card); box-shadow: var(--shadow-hover); padding: 24px; display: grid; gap: 20px; animation: modal-in var(--dur-slow) var(--ease-out-expo) both; }
.modal__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.modal__title { font-size: 28px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) { .modal__panel { padding: 32px; } }
body.has-modal { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .booking__tick circle, .booking__tick path { animation: none; stroke-dashoffset: 0; } }

/* Modal extras (homepage) */
.modal__body { margin-block-start: 20px; }

/* Print / PDF: never hide content */
@media print {
  .reveal, .reveal-group > *, .hero__label, .hero__title .word, .hero__sub, .hero__ctas, .finder--intro, .gallery__item { opacity: 1 !important; transform: none !important; }
  .clip-reveal { clip-path: none !important; }
  .header, .mobile-bar { position: static; }
}

/* Rates on request / contact routes */
.card__ask { font-family: var(--font-display); font-size: 18px; color: var(--ink-900); }
.rate__ask { color: var(--ink-500); font-size: 15px; margin-block: 8px 16px; }
.card__actions { flex-wrap: wrap; gap: 8px; }
/* ============================================================
   BATCH 1A — houseboat pages (appended; keep after styles v1)
   ============================================================ */

/* Inner-page hero band */
.hero--band { min-block-size: 45vh; }
.hero--band .hero__content { padding-block: 132px 56px; max-inline-size: 860px; }
.hero--band .hero__media img { animation: none; }
.hero--band .hero__media::after { background: linear-gradient(180deg, rgba(11,31,42,.62) 0%, rgba(11,31,42,.34) 42%, rgba(11,31,42,.78) 100%); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: rgba(251,248,242,.7); margin-block-end: 18px; }
.crumbs li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.crumbs li + li::before { content: "/"; color: rgba(251,248,242,.4); }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--ivory-50); }
.crumbs [aria-current] { color: var(--saffron-300); }
.finder-wrap--band { margin-block-start: -52px; }
.finder--band .finder__grid { align-items: end; }
@media (min-width: 1200px) { .finder--band .finder__grid { grid-template-columns: 1.3fr 1fr 1fr .8fr auto; } }

/* Inner pages with a light top: header must be legible immediately */
.header--onlight,
body.bmh-boatpage .header:not(.header--glass) { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--ink-900); box-shadow: 0 1px 0 var(--line-200); }
.header--onlight .header__logo em,
body.bmh-boatpage .header:not(.header--glass) .header__logo em { color: var(--saffron-500); }
.header--onlight .header__actions .btn--icon,
body.bmh-boatpage .header:not(.header--glass) .header__actions .btn--icon { box-shadow: inset 0 0 0 1px var(--line-200); }

/* Filter bar */
.filterbar { display: grid; gap: 14px; margin-block-end: 32px; }
.filterbar__row { display: grid; gap: 8px; align-items: center; }
.filterbar__label { font-size: 13px; color: var(--ink-500); }
.filterbar .filter { margin-block-end: 0; }
/* The sliding pill is a decoration, not the source of legibility: the active
   chip carries its own ground so it stays readable before the pill is measured. */
.filter__chip[aria-pressed="true"] { background: var(--lake-900); border-radius: var(--r-pill); }
.filter__pill { z-index: 0; }
@media (min-width: 700px) { .filterbar__row { grid-template-columns: 96px 1fr; gap: 20px; } }
.results { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: baseline; padding-block-end: 28px; border-block-end: 1px solid var(--line-200); margin-block-end: clamp(32px, 4vw, 56px); }
.results__count { font-family: var(--font-display); font-size: 20px; }
.results__reset { font-size: 14px; font-weight: 600; color: var(--lake-500); }

/* Editorial boat cards */
.boats { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 940px) { .boats { grid-template-columns: 1fr 1fr; } }
.boats .card { transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo); }
.boats--fading .card { opacity: 0; transform: translateY(12px); }
.card[hidden] { display: none; }
.card--boat .card__media { aspect-ratio: 4 / 3; }
.card--boat .card__body { padding: clamp(24px, 2.4vw, 34px); gap: 14px; }
.card--boat h3 { font-size: clamp(28px, 1.6rem + .6vw, 34px); }
.card--boat .card__actions { margin-block-start: 6px; }
.card--boat .card__actions .btn { flex: 1 1 130px; }
.facil-line { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--ink-500); font-size: 14px; padding-block: 4px; }
.facil-line li { display: flex; align-items: center; gap: 8px; }
.price-note { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block-start: 14px; border-block-start: 1px solid var(--line-200); }
.price-note strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -.02em; }
.price-note small { font-size: 13px; color: var(--ink-500); }
.empty { padding: clamp(48px, 6vw, 80px) 24px; text-align: center; border: 1px dashed var(--line-200); border-radius: var(--r-card); display: grid; gap: 16px; justify-items: center; }
.empty[hidden] { display: none; }

/* Concierge / name-search band */
.concierge { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 940px) { .concierge { grid-template-columns: 1fr 1fr; gap: 80px; } }
.concierge__body { display: grid; gap: 20px; max-inline-size: 46ch; }
.concierge__count { font-family: var(--font-display); font-size: clamp(56px, 6vw, 96px); line-height: .9; color: var(--saffron-300); }
.searchbox { position: relative; }
.searchbox .input { min-block-size: 62px; font-size: 17px; border-radius: var(--r-pill); padding-inline: 22px 54px; }
.searchbox__icon { position: absolute; inset-inline-end: 20px; inset-block-start: 50%; transform: translateY(-50%); color: var(--ink-500); pointer-events: none; }
.section--dark .searchbox .input { background: rgba(251,248,242,.06); border-color: rgba(255,255,255,.2); color: var(--ivory-50); }
.section--dark .searchbox .input::placeholder { color: rgba(251,248,242,.5); }
.section--dark .searchbox__icon { color: rgba(251,248,242,.6); }
.search__status { font-size: 13px; color: rgba(251,248,242,.6); margin-block-start: 14px; }
.search__results { display: grid; max-block-size: 340px; overflow-y: auto; margin-block-start: 8px; }
.search__results li a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 14px; border-block-end: 1px solid rgba(255,255,255,.1); color: var(--ivory-50); }
.search__results li a span { font-size: 12px; font-weight: 600; color: var(--saffron-300); }
.search__results li a:hover { color: var(--saffron-300); }
.search__results li[hidden] { display: none; }

/* Directory page */
.dir__bar { position: sticky; inset-block-start: 0; z-index: 30; background: var(--ivory-50); border-block-end: 1px solid var(--line-200); padding-block: 22px 18px; }
.dir__bar--stuck { box-shadow: 0 8px 24px rgba(11,31,42,.07); }
.dir__searchwrap { max-inline-size: 720px; margin-inline: auto; }
.dir__searchwrap .input { min-block-size: 66px; font-size: 19px; text-align: center; border-radius: var(--r-pill); }
.dir__count { text-align: center; font-size: 14px; color: var(--ink-500); margin-block-start: 12px; }
.az { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-block-start: 16px; }
.az__chip { inline-size: 36px; min-block-size: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink-500); transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
.az__chip:hover { background: var(--mist-100); color: var(--ink-900); }
.az__chip[aria-current="true"] { background: var(--lake-900); color: var(--ivory-50); }
.az__chip:disabled { opacity: .28; cursor: default; }
.dir__group { display: grid; gap: 20px; padding-block: clamp(32px, 4vw, 52px); border-block-start: 1px solid var(--line-200); scroll-margin-block-start: 210px; }
.dir__group[hidden] { display: none; }
@media (min-width: 900px) { .dir__group { grid-template-columns: 120px minmax(0, 1fr); gap: 48px; } }
.dir__letter { font-family: var(--font-display); font-size: clamp(44px, 4vw, 64px); line-height: .9; color: var(--saffron-500); }
.dir__list { columns: 1; column-gap: 56px; }
@media (min-width: 640px) { .dir__list { columns: 2; } }
@media (min-width: 1200px) { .dir__list { columns: 3; } }
.dir__item { break-inside: avoid; border-block-end: 1px solid var(--line-200); }
.dir__item[hidden] { display: none; }
.dir__item a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-block-size: 44px; padding-block: 11px; color: var(--ink-900); }
.dir__item a:hover { color: var(--lake-500); }
.dir__enq { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--lake-500); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
.dir__item a:hover .dir__enq, .dir__item a:focus-visible .dir__enq { opacity: 1; transform: none; }
.dir__more { padding-block: 32px; font-size: 14px; color: var(--ink-500); text-align: center; border-block-start: 1px solid var(--line-200); }

/* Detail page */
.detail__head { display: grid; gap: 16px; padding-block: 124px 40px; }
.detail__head .crumbs { color: var(--ink-500); }
.detail__head .crumbs li + li::before { color: var(--line-200); }
.detail__head .crumbs a:hover { color: var(--ink-900); }
.detail__head .crumbs [aria-current] { color: var(--ink-900); }
.detail__tag { display: inline-flex; align-items: center; min-block-size: 32px; padding: 4px 14px; border-radius: var(--r-pill); background: var(--lake-900); color: var(--ivory-50); font-size: 12px; font-weight: 600; justify-self: start; }
.detail__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-500); font-size: 15px; }
.detail__meta li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.shots-wrap { position: relative; }
.shots { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .shots { grid-template-columns: 1.7fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .shots__lead { grid-row: 1 / 3; } }
.shot { position: relative; display: block; inline-size: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--mist-100); }
.shots__lead { aspect-ratio: 4 / 3; grid-column: 1 / -1; }
@media (min-width: 900px) { .shots__lead { grid-column: auto; aspect-ratio: auto; } }
.shot[hidden] { display: none; }
.shot img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.shot:hover img { transform: scale(1.04); }
.shots__more { position: absolute; inset-block-end: 18px; inset-inline-end: 18px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.shots__more:hover { background: var(--ivory-50); color: var(--ink-900); }
.detail__grid { display: grid; gap: 48px; }
@media (min-width: 1000px) { .detail__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; } }
.prose { display: grid; gap: clamp(40px, 4vw, 64px); }
.prose section { display: grid; gap: 18px; }
.prose h2 { font-size: clamp(26px, 1.6rem + .5vw, 34px); }
.prose p { max-inline-size: 66ch; }
.dl { border-block-start: 1px solid var(--line-200); }
.dl__row { display: grid; grid-template-columns: 1fr; gap: 4px; padding-block: 14px; border-block-end: 1px solid var(--line-200); }
.dl__row dt { font-size: 13px; color: var(--ink-500); }
@media (min-width: 640px) { .dl__row { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: baseline; } }
.facil { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px 24px; }
.facil li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.facil li svg { color: var(--lake-500); }
.rules { display: grid; gap: 10px; }
.rules li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--ink-500); }
.rules li svg { color: var(--lake-500); margin-block-start: 3px; }
.enq { display: grid; gap: 16px; padding: clamp(24px, 2vw, 30px); border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--ivory-50); box-shadow: var(--shadow); }
@media (min-width: 1000px) { .enq { position: sticky; inset-block-start: 100px; } }
.enq__price { display: grid; gap: 4px; padding-block-end: 14px; border-block-end: 1px solid var(--line-200); }
.enq__price strong { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: -.02em; }
.enq__row { display: grid; gap: 14px; }
@media (min-width: 480px) { .enq__row { grid-template-columns: 1fr 1fr; } }
.enq__actions { display: grid; gap: 10px; }
.enq__note { font-size: 13px; color: var(--ink-500); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 72px 24px; background: rgba(11,31,42,.96); }
.lightbox--open { display: grid; }
.lightbox img { max-inline-size: min(1180px, 92vw); max-block-size: 78vh; object-fit: contain; border-radius: var(--r-card); }
.lightbox__bar { position: absolute; inset-block-start: 0; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(16px, 3vw, 32px); color: var(--ivory-50); font-size: 14px; }
.lightbox__nav { position: absolute; inset-block: 0; inline-size: clamp(56px, 8vw, 96px); display: grid; place-items: center; color: var(--ivory-50); }
.lightbox__nav--prev { inset-inline-start: 0; }
.lightbox__nav--next { inset-inline-end: 0; }
.lightbox__nav svg { inline-size: 32px; block-size: 32px; }
.lightbox__nav--prev svg { transform: rotate(180deg); }
.lightbox .btn--icon { color: var(--ivory-50); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.lightbox .btn--icon:hover { background: rgba(255,255,255,.1); }

/* State B — name-only listing */
.stub { position: relative; overflow: hidden; display: grid; gap: 26px; padding: clamp(30px, 4.4vw, 68px); border-radius: var(--r-image); background: var(--lake-900); color: var(--ivory-50); }
.stub__mark { position: absolute; inset-block-start: -12%; inset-inline-end: -2%; font-family: var(--font-display); font-style: italic; font-size: clamp(120px, 17vw, 250px); line-height: 1; color: rgba(251,248,242,.05); pointer-events: none; user-select: none; }
.stub__lead { position: relative; font-family: var(--font-display); font-size: clamp(25px, 1.4rem + 1vw, 36px); line-height: 1.25; letter-spacing: -.02em; max-inline-size: 34ch; }
.stub__list { position: relative; display: grid; gap: 14px; }
.stub__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; color: rgba(251,248,242,.78); }
.stub__list li svg { color: var(--saffron-300); margin-block-start: 3px; }
.stub__owner { position: relative; padding-block-start: 22px; border-block-start: 1px solid rgba(255,255,255,.14); font-size: 14px; color: rgba(251,248,242,.62); max-inline-size: 60ch; }
.stub__owner a { color: var(--saffron-300); }
.state-marker { display: grid; gap: 4px; margin-block: 0 24px; padding: 14px 20px; border: 1px dashed var(--saffron-500); border-radius: var(--r-input); background: #FFF7EA; font-size: 13px; color: var(--walnut-700); }
.state-marker strong { font-weight: 700; }

/* Nearby rail */
.card--nearby { flex: 0 0 min(320px, 82vw); scroll-snap-align: start; }

@media print {
  .header, .mobile-bar, .dir__bar, .lightbox, .filterbar, .shots__more, .search__results, .az { display: none !important; }
  .hero, .hero--band { min-block-size: auto; color: var(--ink-900); }
  .hero__media, .hero__mist { display: none; }
  .hero--band .hero__content { padding-block: 0 24px; }
  .section--dark, .stub { background: none !important; color: var(--ink-900) !important; }
  .stub__list li, .stub__owner, .section--dark .text-muted { color: var(--ink-900) !important; }
  .dir__list { columns: 3; }
  .enq { position: static; }
}


/* Full register on /houseboats/ */
.regbar { margin-block: clamp(56px, 6vw, 88px) 28px; max-inline-size: 72ch; }
.regbar__title { font-size: clamp(28px, 1.6rem + .6vw, 36px); margin-block: 6px 12px; }
.regbar .field--search { max-inline-size: 420px; margin-block-start: 22px; }
.regbar__count { margin-block-start: 12px; color: var(--ink-500); font-size: 14px; }
.reg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 40px; }
@media (min-width: 640px) { .reg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .reg { grid-template-columns: repeat(3, 1fr); } }
.reg__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 11px; border-block-end: 1px solid var(--line-200); }
.reg__item.is-hidden { display: none; }
.reg__link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.reg__name { font-size: 15px; }
.reg__lake { font-size: 12px; color: var(--ink-500); }
.reg__link:hover .reg__name { color: var(--lake-500); }
.reg__item .btn--xs { padding: 4px 10px; font-size: 12px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-soft); }
.reg__item:hover .btn--xs, .reg__item:focus-within .btn--xs { opacity: 1; }
@media (hover: none) { .reg__item .btn--xs { opacity: 1; } }
.reg__empty { margin-block-start: 24px; color: var(--ink-500); }
.reg__more { margin-block-start: 36px; text-align: center; }
.card__desc { color: var(--ink-500); }
.card__ask { display: flex; flex-direction: column; gap: 2px; }
.card__ask span { font-size: 13px; color: var(--ink-500); }

.boats__all { margin-block-start: clamp(40px, 4vw, 64px); text-align: center; }


/* ============================================================
   BATCH 1B — Dal, Nigeen, Shikara, Tours, About, Contact
   ============================================================ */

/* Closing band, single column */
.closing--single { grid-template-columns: minmax(0, 1fr); }
.closing--single .closing__info { max-inline-size: 62ch; }
.closing--single .hero__ctas { opacity: 1; transform: none; }

/* Moorings (Dal Lake) */
.moorings { display: grid; gap: 28px 40px; }
.moor { display: grid; gap: 6px; padding-block-start: 18px; border-block-start: 1px solid rgba(255, 255, 255, .16); }
.moor h3 { font-size: 22px; }
.moor p { color: rgba(251, 248, 242, .7); font-size: 15px; }
@media (min-width: 700px) { .moorings { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .moorings { grid-template-columns: repeat(4, 1fr); } }

/* Marked image / map slots (no photography yet) */
.imgslot, .mapslot { position: relative; display: grid; align-content: center; justify-items: start; gap: 8px; padding: clamp(20px, 3vw, 34px); background: var(--mist-100); border: 1px dashed var(--line-200); color: var(--ink-500); block-size: 100%; }
.imgslot { border-radius: 0; }
.mapslot { border-radius: var(--r-image); min-block-size: clamp(240px, 34vw, 420px); background: repeating-linear-gradient(135deg, var(--mist-100) 0 22px, #E6EDEF 22px 44px); }
.imgslot__tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--walnut-700); background: #FFF7EA; border: 1px solid var(--saffron-500); border-radius: var(--r-pill); padding: 3px 10px; }
.imgslot__txt { font-family: var(--font-display); font-size: clamp(17px, 1rem + .4vw, 21px); line-height: 1.25; color: var(--ink-900); max-inline-size: 30ch; }
.imgslot__id { font-size: 11px; letter-spacing: .06em; color: var(--ink-500); }
.card--ride .card__media { aspect-ratio: 4 / 3; }

/* Template package cards */
.cards--pkgs { grid-template-columns: 1fr; }
@media (min-width: 900px) { .cards--pkgs { grid-template-columns: 1fr 1fr; } }
.card--pkg .card__body { padding: clamp(24px, 2.4vw, 34px); gap: 14px; align-content: start; }
.card--pkg h3 { font-size: clamp(26px, 1.5rem + .5vw, 32px); }
.flag { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--walnut-700); background: #FFF7EA; border: 1px dashed var(--saffron-500); border-radius: var(--r-pill); padding: 5px 12px; }
.dl--pkg { margin-block: 2px; }
.dl--pkg .dl__row { padding-block: 10px; }
@media (min-width: 640px) { .dl--pkg .dl__row { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; } }

/* Day-trip strip */
.trips { display: grid; gap: 28px 40px; }
.trip { display: grid; gap: 6px; padding-block-start: 18px; border-block-start: 1px solid rgba(255, 255, 255, .16); }
.trip h3 { font-size: 24px; }
.trip p { color: rgba(251, 248, 242, .7); }
.trip__meta { font-size: 13px; color: var(--saffron-300); }
@media (min-width: 700px) { .trips { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .trips { grid-template-columns: repeat(4, 1fr); } }

/* Honesty panel (About) */
.honesty { display: grid; gap: 24px; }
.honesty__item { position: relative; display: grid; gap: 12px; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-image); background: var(--lake-900); color: var(--ivory-50); overflow: hidden; }
.honesty__item h3 { font-size: clamp(24px, 1.3rem + .6vw, 30px); max-inline-size: 22ch; }
.honesty__item p { color: rgba(251, 248, 242, .74); max-inline-size: 44ch; }
.honesty__item em { color: var(--saffron-300); font-style: italic; }
.honesty__no { font-family: var(--font-display); font-style: italic; font-size: clamp(56px, 6vw, 86px); line-height: .9; color: rgba(251, 248, 242, .16); }
@media (min-width: 1000px) { .honesty { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Contact */
.contact { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 1fr) 460px; gap: 80px; } }
.contactcard { display: grid; gap: 18px; }
.contactcard__list { display: grid; gap: 26px; margin-block-start: 12px; }
.contactcard__list li { display: grid; gap: 4px; padding-block-start: 18px; border-block-start: 1px solid var(--line-200); }
.contactcard__big { font-family: var(--font-display); font-size: clamp(26px, 1.5rem + .6vw, 34px); letter-spacing: -.02em; color: var(--ink-900); }
a.contactcard__big:hover { color: var(--lake-500); }
.contactcard__big--sm { font-size: clamp(20px, 1.1rem + .4vw, 24px); }
.contactcard__note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; margin-block-start: 8px; font-size: 14px; color: var(--ink-500); }
.contactcard__note svg { color: var(--lake-500); margin-block-start: 3px; }
[data-contact-enq] .booking__h { margin-block-end: 2px; }
[data-sent][hidden] { display: none; }

@media print {
  .imgslot, .mapslot { border: 1px solid #999; background: none; }
  .honesty__item, .moor, .trip { background: none !important; color: var(--ink-900) !important; }
  .honesty__item p, .moor p, .trip p, .trip__meta { color: var(--ink-900) !important; }
  .honesty__no { color: #999 !important; }
}

/* ===== BATCH 2 (policies, FAQ, booking info) ===== */
   Book My Houseboat — styles.css
   BASE (tokens, type, layout, header, footer, cards, chips, enquiry, motion)
   ========================================================================== */
:focus-visible{outline:2px solid var(--chinar);outline-offset:3px;border-radius:2px}
.b2-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-4)}
.b2-wrap--narrow{max-width:860px}
.b2-section{padding-block:var(--s-7)}
.b2-section--tint{background:var(--paper-2);border-block:1px solid var(--line)}
.b2-section__head{max-width:var(--measure);margin-bottom:var(--s-5)}
.b2-eyebrow{font:600 var(--step--1)/1.2 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--walnut);margin:0 0 var(--s-2)}
.b2-lede{font-size:var(--step-1);color:var(--ink-2);max-width:var(--measure)}
.b2-prose{max-width:var(--measure)}
.b2-prose h2{margin-top:var(--s-5)}
.grid{display:grid;gap:var(--s-4)}
@media (min-width:640px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){
  .nav{display:flex;align-items:center;gap:var(--s-4)}
  .nav a{font-size:var(--step--1);letter-spacing:.03em;text-transform:uppercase;
    text-decoration:none;color:var(--ink-2);padding-block:.4rem;
    border-bottom:1px solid transparent}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-color:var(--gold)}
  .nav-toggle{display:none}
}
@media (min-width:1000px){.nav-drawer{display:none!important}}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 var(--s-3);padding:0}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;
  border:1px solid var(--line-2);border-radius:999px;background:var(--white);
  font-size:var(--step--1);color:var(--ink-2)}
.chip--accent{background:var(--teal-lt);border-color:#bcd8d3;color:var(--teal-dk)}
.b2-breadcrumb{border-bottom:1px solid var(--line);background:var(--paper-2)}
.b2-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;
  padding:.7rem 0;font-size:var(--step--1);color:var(--ink-3)}
.b2-breadcrumb li+li::before{content:"›";margin-right:.45rem;color:var(--line-2)}
.b2-breadcrumb a{color:var(--ink-2)}
.b2-hero{position:relative;overflow:hidden;background:var(--paper-2);
  border-bottom:1px solid var(--line);padding-block:var(--s-7)}
.hero__inner{position:relative;z-index:2;max-width:780px}
.b2-hero__rule{width:64px;height:2px;background:var(--gold);margin:var(--s-4) 0}
.b2-hero--media{min-height:52vh;display:flex;align-items:flex-end;color:var(--white);
  background:var(--ink)}
.b2-hero--media .hero__bg{position:absolute;inset:-8% 0;z-index:0;object-fit:cover;
  width:100%;height:116%}
.b2-hero--media::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,17,15,.25),rgba(18,17,15,.82))}
.b2-hero--media .b2-lede{color:#efe9dd}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);
  overflow:hidden;box-shadow:var(--shadow-1);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.card__media{background:var(--paper-3);aspect-ratio:4/3;position:relative}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:var(--s-4)}
.card__title{font-size:var(--step-2);margin-bottom:.35rem}
.card__title a{text-decoration:none;color:var(--ink)}
.card__title a:hover{color:var(--teal)}
.card__meta{font-size:var(--step--1);color:var(--ink-3);margin-bottom:var(--s-2)}
.card--boat .price{display:flex;align-items:baseline;gap:.4rem;margin:var(--s-3) 0;
  padding-top:var(--s-3);border-top:1px solid var(--line)}
.card--boat .price__value{font-family:var(--serif);font-size:var(--step-1);
  color:var(--walnut)}
.card--boat .price__note{font-size:var(--step--1);color:var(--ink-3)}
.badge{position:absolute;left:var(--s-3);top:var(--s-3);z-index:2;
  background:rgba(18,60,59,.92);color:var(--white);font:600 var(--step--1)/1 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;padding:.4rem .65rem;border-radius:var(--r-1)}
.b2-enquiry-card{background:var(--white);border:1px solid var(--line-2);
  border-radius:var(--r-3);padding:var(--s-5);box-shadow:var(--shadow-1)}
.b2-enquiry-card h2,.b2-enquiry-card h3{margin-bottom:var(--s-2)}
.b2-enquiry-card p{color:var(--ink-2)}
.b2-field{display:block;margin-bottom:var(--s-3)}
.b2-field > span{display:block;font-size:var(--step--1);font-weight:600;
  letter-spacing:.04em;margin-bottom:.3rem}
.b2-field input,.b2-field select,.b2-field textarea{width:100%;padding:.7rem .8rem;
  border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--paper);
  font:var(--step-0)/1.4 var(--sans);color:var(--ink)}
.b2-field textarea{min-height:110px;resize:vertical}
.b2-enquiry-card__status{font-size:var(--step--1);color:var(--teal-dk);min-height:1.4em}
.b2-cta-band{background:var(--teal-dk);color:#f2ece0;padding-block:var(--s-6)}
.b2-cta-band h2{color:var(--white)}
.b2-cta-band p{color:#dbe7e4;max-width:var(--measure)}
.b2-cta-band a.btn--ghost{color:var(--white);border-color:rgba(255,255,255,.5)}
.b2-cta-band a.btn--ghost:hover{background:rgba(255,255,255,.12);color:var(--white)}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.parallax{will-change:transform}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .parallax{transform:none!important}
  .card:hover,.btn:hover{transform:none}
}
   BATCH 2 — category pages, FAQ, booking information, policy pages
   ========================================================================== */
.b2-split{display:grid;gap:var(--s-5)}
@media (min-width:900px){.b2-split{grid-template-columns:1.15fr .85fr;
  align-items:start;gap:var(--s-6)}}
.b2-split__aside{border-left:2px solid var(--gold);padding-left:var(--s-4)}
.b2-split__aside dt{font:600 var(--step--1)/1.3 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--walnut);margin-top:var(--s-3)}
.b2-split__aside dd{margin:.2rem 0 0;color:var(--ink-2)}
.b2-compare{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-3);background:var(--white)}
.b2-compare table{width:100%;min-width:640px;border-collapse:collapse;margin:0;
  font-size:var(--step--1)}
.b2-compare caption{text-align:left;padding:var(--s-3) var(--s-4);color:var(--ink-3);
  font-size:var(--step--1);border-bottom:1px solid var(--line)}
.b2-compare th,.b2-compare td{padding:.85rem var(--s-3);text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.b2-compare thead th{font:600 var(--step--1)/1.2 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--walnut);background:var(--paper-2)}
.b2-compare tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.b2-compare tr:last-child th,.b2-compare tr:last-child td{border-bottom:0}
.b2-compare td[data-current="true"]{background:var(--teal-lt)}
.b2-crosslinks{display:grid;gap:var(--s-3)}
@media (min-width:760px){.b2-crosslinks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.b2-crosslink{display:block;padding:var(--s-4);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-3);text-decoration:none;
  color:var(--ink);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.b2-crosslink:hover{border-color:var(--gold);transform:translateY(-2px);color:var(--ink)}
.b2-crosslink strong{display:block;font-family:var(--serif);font-size:var(--step-1);
  font-weight:600;margin-bottom:.3rem}
.b2-crosslink span{font-size:var(--step--1);color:var(--ink-3)}
.b2-acc{border-top:1px solid var(--line)}
.b2-acc__item{border-bottom:1px solid var(--line)}
.b2-acc__btn{display:flex;width:100%;gap:var(--s-3);align-items:flex-start;
  justify-content:space-between;padding:1.05rem 0;background:none;border:0;
  text-align:left;cursor:pointer;font:600 var(--step-1)/1.35 var(--serif);color:var(--ink)}
.b2-acc__btn:hover{color:var(--teal)}
.b2-acc__icon{flex:0 0 auto;width:1.4rem;height:1.4rem;margin-top:.25rem;
  position:relative;border:1px solid var(--line-2);border-radius:50%}
.b2-acc__icon::before,.b2-acc__icon::after{content:"";position:absolute;
  background:var(--walnut);left:50%;top:50%;transform:translate(-50%,-50%);
  transition:opacity .2s var(--ease)}
.b2-acc__icon::before{width:.6rem;height:1px}
.b2-acc__icon::after{width:1px;height:.6rem}
.b2-acc__btn[aria-expanded="true"] .b2-acc__icon::after{opacity:0}
.b2-acc__panel{display:none;padding-bottom:var(--s-4)}
.b2-acc__panel[data-open="true"]{display:block}
.b2-acc__panel p{max-width:var(--measure);color:var(--ink-2);margin-bottom:var(--s-2)}
.b2-faq{display:grid;gap:var(--s-5)}
@media (min-width:1000px){.b2-faq{grid-template-columns:250px minmax(0,1fr);
  gap:var(--s-6);align-items:start}}
.b2-faq__index{display:none}
@media (min-width:1000px){
  .b2-faq__index{display:block;position:sticky;top:96px}
  .b2-faq__index ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
  .b2-faq__index a{display:block;padding:.4rem var(--s-3);font-size:var(--step--1);
    text-decoration:none;color:var(--ink-2);border-left:2px solid transparent;
    margin-left:-1px}
  .b2-faq__index a:hover,.b2-faq__index a[aria-current="true"]{color:var(--ink);
    border-left-color:var(--gold)}
}
.b2-search{margin-bottom:var(--s-5);max-width:520px}
.b2-search label{display:block;font-size:var(--step--1);font-weight:600;
  letter-spacing:.04em;margin-bottom:.35rem}
.b2-search input{width:100%;padding:.8rem 1rem;border:1px solid var(--line-2);
  border-radius:999px;background:var(--white);font:var(--step-0)/1.4 var(--sans)}
.b2-search__count{margin:.5rem 0 0;font-size:var(--step--1);color:var(--ink-3)}
.b2-faq__group{margin-bottom:var(--s-6);scroll-margin-top:96px}
.b2-faq__group h2{font-size:var(--step-2)}
.b2-acc__item[hidden]{display:none}
.b2-faq__group[hidden]{display:none}
.b2-empty{padding:var(--s-4);border:1px dashed var(--line-2);border-radius:var(--r-3);
  color:var(--ink-3)}
.b2-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;
  gap:var(--s-4)}
@media (min-width:900px){.b2-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.b2-steps li{counter-increment:step;position:relative;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-5) var(--s-4) var(--s-4)}
.b2-steps li::before{content:counter(step,decimal-leading-zero);
  font-family:var(--serif);font-size:var(--step-2);color:var(--gold);display:block;
  margin-bottom:var(--s-2);line-height:1}
.b2-steps h3{font-size:var(--step-1)}
.b2-steps p{color:var(--ink-2);margin-bottom:0}
.b2-io{display:grid;gap:var(--s-4)}
@media (min-width:760px){.b2-io{grid-template-columns:repeat(2,minmax(0,1fr))}}
.b2-io__col{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-3);padding:var(--s-4)}
.b2-io__col ul{list-style:none;margin:0;padding:0}
.b2-io__col li{padding-left:1.4rem;position:relative;margin-bottom:.5rem;color:var(--ink-2)}
.b2-io__col li::before{position:absolute;left:0;top:0;font-weight:700}
.b2-io__col--in li::before{content:"+";color:var(--teal)}
.b2-io__col--out li::before{content:"–";color:var(--chinar)}
.b2-legal{display:grid;gap:var(--s-5)}
@media (min-width:1000px){.b2-legal{grid-template-columns:260px minmax(0,1fr);
  gap:var(--s-6);align-items:start}}
.b2-toc{display:none}
@media (min-width:1000px){
  .b2-toc{display:block;position:sticky;top:96px;font-size:var(--step--1)}
  .b2-toc h2{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;
    font-family:var(--sans);color:var(--walnut);margin-bottom:var(--s-2)}
  .b2-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
  .b2-toc a{display:block;padding:.35rem var(--s-3);text-decoration:none;
    color:var(--ink-2);border-left:2px solid transparent;margin-left:-1px}
  .b2-toc a:hover,.b2-toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--gold)}
}
.b2-doc{max-width:var(--measure)}
.b2-doc__meta{font-size:var(--step--1);color:var(--ink-3);padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line);margin-bottom:var(--s-5)}
.b2-doc section{margin-bottom:var(--s-6);scroll-margin-top:96px}
.b2-doc h2{font-size:var(--step-2);display:flex;gap:.6rem}
.b2-doc h2 .b2-num{color:var(--gold);font-variant-numeric:tabular-nums}
.b2-doc h3{font-size:var(--step-1);margin-top:var(--s-4)}
.b2-doc ul,.b2-doc ol{padding-left:1.25rem;color:var(--ink-2)}
.b2-doc li{margin-bottom:.4rem}
.b2-note{background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-2);padding:var(--s-3) var(--s-4);color:var(--ink-2)}
.b2-table{width:100%;border-collapse:collapse;font-size:var(--step--1);
  background:var(--white);border:1px solid var(--line)}
.b2-table caption{caption-side:top;text-align:left;padding-bottom:var(--s-2);
  color:var(--ink-3)}
.b2-table th,.b2-table td{border:1px solid var(--line);padding:.7rem var(--s-3);
  text-align:left;vertical-align:top}
.b2-table thead th{background:var(--paper-2);font-size:var(--step--1);
  letter-spacing:.08em;text-transform:uppercase;color:var(--walnut)}
.b2-table td:empty::after{content:"To be confirmed";color:var(--line-2);font-style:italic}
.b2-table tbody th{font-weight:600;white-space:normal}
@media print{
  .site-header,.nav-drawer,.b2-cta-band,.b2-toc,.b2-faq__index,.b2-search,
  .skip-link,.site-footer .footer-grid{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .reveal{opacity:1;transform:none}
  .b2-acc__panel{display:block!important}
  .b2-acc__icon{display:none}
  a{text-decoration:none;color:#000}
  .b2-doc,.b2-prose,.b2-doc section{max-width:none;page-break-inside:avoid}
  .b2-section{padding-block:1rem}
}

/* ============================================================
   BATCH 3 — travel guide template (appended; keep after Batch 1A)
   ============================================================ */

/* Guide hero band */
.band--guide { padding-block: 132px 56px; }
.band--guide .band__inner { max-inline-size: 60ch; gap: 18px; }
.guide__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: rgba(251,248,242,.72); }
.guide__meta li { display: flex; align-items: center; gap: 8px; }
.guide__meta li + li::before { content: "·"; color: rgba(251,248,242,.4); }
.band--guide p.lead { color: rgba(251,248,242,.86); max-inline-size: 62ch; }

/* Guide layout: body + sticky table of contents */
.guide { display: grid; gap: clamp(40px, 4vw, 64px); align-items: start; padding-block: clamp(48px, 5vw, 88px) clamp(56px, 6vw, 104px); }
@media (min-width: 1000px) { .guide { grid-template-columns: 260px minmax(0, 1fr); } }
.toc { display: grid; gap: 14px; }
.toc__title { font-size: 13px; color: var(--ink-500); }
.toc__list { display: grid; gap: 2px; border-inline-start: 1px solid var(--line-200); }
.toc__list a { display: block; padding: 8px 0 8px 16px; margin-inline-start: -1px; border-inline-start: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink-500); transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft); }
.toc__list a:hover { color: var(--ink-900); border-inline-start-color: var(--line-200); }
.toc__list a[aria-current="true"] { color: var(--ink-900); border-inline-start-color: var(--saffron-500); font-weight: 600; }
@media (min-width: 1000px) { .toc { position: sticky; inset-block-start: 104px; max-block-size: calc(100svh - 140px); overflow-y: auto; } }

/* Article body — 68ch measure */
.gbody { max-inline-size: 68ch; display: grid; gap: 22px; }
.gbody > h2 { font-size: clamp(28px, 1.6rem + .9vw, 40px); margin-block-start: clamp(24px, 2vw, 40px); scroll-margin-block-start: 108px; }
.gbody > h3 { font-size: clamp(21px, 1.2rem + .3vw, 26px); margin-block-start: 8px; }
.gbody p, .gbody li { font-size: 17px; line-height: 1.68; color: var(--ink-900); }
.gbody p.lead { font-size: 19px; }
.gbody ul.glist, .gbody ol.glist { display: grid; gap: 10px; padding-inline-start: 4px; }
.gbody ul.glist li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 14px; }
.gbody ul.glist li::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--saffron-500); margin-block-start: 11px; }
.gbody ol.glist { counter-reset: g; }
.gbody ol.glist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; counter-increment: g; }
.gbody ol.glist li::before { content: counter(g) "."; font-family: var(--font-display); font-size: 19px; color: var(--lake-500); }
.gbody strong { font-weight: 700; }
.gbody hr { inline-size: 100%; block-size: 1px; border: 0; background: var(--line-200); margin-block: 10px; }

/* Practical tip — a marked-up aside, not a decorative box */
.tip { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px 14px; padding-block: 20px; border-block: 1px solid var(--line-200); }
.tip svg { color: var(--lake-500); margin-block-start: 2px; }
.tip__label { grid-column: 2; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.tip p { grid-column: 2; font-size: 16px; color: var(--ink-900); }

/* In-article figures */
.gfig { display: grid; gap: 10px; margin-block: 8px; }
.gfig img { inline-size: 100%; border-radius: var(--r-image); object-fit: cover; aspect-ratio: 4 / 3; }
.gfig figcaption { font-size: 13px; color: var(--ink-500); }

/* Month / comparison table inside an article */
.gtable { inline-size: 100%; border-collapse: collapse; font-size: 15px; }
.gtable caption { text-align: left; font-size: 13px; color: var(--ink-500); padding-block-end: 12px; }
.gtable th, .gtable td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-block-end: 1px solid var(--line-200); }
.gtable thead th { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); border-block-end-color: var(--ink-900); }
.gtable tbody th { font-family: var(--font-display); font-size: 19px; font-weight: 400; white-space: nowrap; padding-inline-end: 24px; }
.gtable--scroll { overflow-x: auto; }
.gtable--scroll table { min-inline-size: 640px; }

/* Mid-article link to the commercial page */
.actband { display: grid; gap: 18px; padding: clamp(24px, 2.5vw, 34px); border-radius: var(--r-card); background: var(--lake-700); color: var(--ivory-50); }
.actband h2 { font-size: clamp(24px, 1.4rem + .6vw, 32px); }
.actband p { color: rgba(251,248,242,.82); font-size: 16px; max-inline-size: 52ch; }
.actband .label { color: var(--saffron-300); }
.actband__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actband a { color: var(--saffron-300); }
.actband .btn { color: var(--ink-900); }
.actband .btn--ghost { color: var(--ivory-50); }

/* Related guides */
.related { display: grid; gap: 20px; }
@media (min-width: 720px) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .related--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gcard { display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--ivory-50); color: var(--ink-900); transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo); }
.gcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--saffron-300); color: var(--ink-900); }
.gcard h3 { font-size: 22px; }
.gcard p { font-size: 15px; color: var(--ink-500); }
.gcard .link { font-size: 14px; }
.gcard:hover .link svg { transform: translateX(4px); }

/* Print + no-motion fallbacks */
@media (prefers-reduced-motion: reduce) {
  .gcard:hover { transform: none; }
}
@media print {
  .toc, .actband__actions, .band--guide .guide__meta { display: none !important; }
  .band--guide { background: none !important; color: var(--ink-900) !important; padding-block: 0 24px !important; }
  .band--guide p.lead, .band--guide .crumbs { color: var(--ink-900) !important; }
  .guide { display: block; padding-block: 0; }
  .gbody { max-inline-size: none; }
  .gbody > h2 { break-after: avoid; }
  .gfig, .tip, .gtable tr { break-inside: avoid; }
  .actband { background: none !important; color: var(--ink-900) !important; border: 1px solid #999; }
  .actband p, .actband .label { color: var(--ink-900) !important; }
  .gcard { break-inside: avoid; }
}


/* ===== BATCH 4 (category pages) ===== */


/* ============================================================
   BATCH 4 — category pages (luxury / deluxe / standard)
   New classes only. Nothing above this line is modified.
   ============================================================ */

.page--category{--cat-max:1120px}

.cat-hero,.cat-intro,.cat-grid,.cat-compare,.cat-all,.cat-cross,.cat-faq,.cat-cta{padding:clamp(2.5rem,6vw,4.5rem) 1.25rem}
.cat-hero__inner,.cat-intro__inner,.cat-grid__inner,.cat-compare__inner,.cat-all__inner,.cat-cross__inner,.cat-faq__inner,.cat-cta__inner{max-width:var(--cat-max,1120px);margin-inline:auto}

.cat-hero{background:var(--surface-2,#f4f1ea);border-bottom:1px solid var(--line,rgba(0,0,0,.1))}
.cat-crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1.25rem;padding:0;font-size:.8125rem;letter-spacing:.02em}
.cat-crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.45}
.cat-crumbs a{text-decoration:none}
.cat-crumbs a:hover{text-decoration:underline}
.cat-crumbs [aria-current="page"]{opacity:.65}
.cat-hero__label{margin:0 0 .75rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.cat-hero__title{margin:0 0 .75rem;font-size:clamp(2rem,5vw,3.25rem);line-height:1.08;text-wrap:balance}
.cat-hero__sub{margin:0;max-width:46ch;font-size:clamp(1rem,1.6vw,1.1875rem);opacity:.85;text-wrap:pretty}
.cat-hero__chips{margin-top:1.5rem}

.cat-intro__inner{display:grid;gap:1.1rem;max-width:70ch}
.cat-intro__h,.cat-grid__h,.cat-compare__h,.cat-all__h,.cat-cross__h,.cat-faq__h{margin:0;font-size:clamp(1.375rem,2.6vw,1.875rem);line-height:1.2}
.cat-intro p{margin:0;line-height:1.72;text-wrap:pretty}

.cat-grid__note,.cat-compare__note{margin:.5rem 0 1.75rem;font-size:.9375rem;opacity:.72}

.cat-compare{background:var(--surface-2,#f4f1ea)}
.cat-compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cat-table{width:100%;min-width:640px;border-collapse:collapse;text-align:left;font-size:.9375rem}
.cat-table__caption{text-align:left;padding-bottom:.75rem;font-size:.8125rem;opacity:.6}
.cat-table th,.cat-table td{padding:.9rem 1rem;border-bottom:1px solid var(--line,rgba(0,0,0,.12));vertical-align:top;line-height:1.55}
.cat-table thead th{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;border-bottom-width:2px}
.cat-table tbody th{width:8.5rem;white-space:nowrap;font-weight:600}
.cat-table tbody tr:last-child th,.cat-table tbody tr:last-child td{border-bottom:0}

.cat-all__inner{max-width:70ch;display:grid;gap:1rem}
.cat-all p{margin:0;line-height:1.72;text-wrap:pretty}

.cat-cross__row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin-top:1.5rem}
.cat-cross__card{display:grid;gap:.35rem;padding:1.4rem 1.5rem;border:1px solid var(--line,rgba(0,0,0,.14));border-radius:var(--radius,10px);text-decoration:none;background:var(--surface,#fff);transition:transform .25s ease,box-shadow .25s ease}
.cat-cross__card:hover,.cat-cross__card:focus-visible{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.cat-cross__label{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.cat-cross__title{font-size:1.0625rem;line-height:1.35}
.cat-cross__go{opacity:.55}

.cat-faq .accordion{margin-top:1.5rem;max-width:70ch}
.cat-faq .accordion__item{border-bottom:1px solid var(--line,rgba(0,0,0,.12))}
.cat-faq .accordion__summary{cursor:pointer;list-style:none;padding:1.05rem 2rem 1.05rem 0;position:relative;font-size:1.0625rem;line-height:1.4}
.cat-faq .accordion__summary::-webkit-details-marker{display:none}
.cat-faq .accordion__summary::after{content:"+";position:absolute;right:.25rem;top:1rem;font-size:1.25rem;opacity:.55;transition:transform .25s ease}
.cat-faq .accordion__item[open] .accordion__summary::after{transform:rotate(45deg)}
.cat-faq .accordion__summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.cat-faq .accordion__panel{padding:0 2rem 1.25rem 0;line-height:1.7;opacity:.85}
.cat-faq .accordion__panel p{margin:0;text-wrap:pretty}

.cat-cta__inner{display:grid;gap:.85rem;padding:clamp(1.75rem,4vw,2.75rem);text-align:center;justify-items:center}
.cat-cta__h{margin:0;font-size:clamp(1.5rem,3vw,2.125rem)}
.cat-cta__sub{margin:0;max-width:52ch;line-height:1.65;opacity:.85}
.cat-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.5rem}
.cat-cta__fine{margin:.75rem 0 0;font-size:.8125rem;opacity:.65;max-width:56ch}

.cat-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.7rem 1.35rem;border-radius:var(--radius-pill,999px);text-decoration:none;font-size:.9375rem;line-height:1;border:1px solid currentColor;transition:transform .2s ease,opacity .2s ease}
.cat-btn--solid{background:var(--accent,#1f4d46);color:var(--on-accent,#fff);border-color:var(--accent,#1f4d46)}
.cat-btn--line{background:transparent}
.cat-btn:hover{transform:translateY(-1px)}
.cat-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .cat-cross__card,.cat-btn,.cat-faq .accordion__summary::after{transition:none}
  .cat-cross__card:hover,.cat-btn:hover{transform:none}
}

@media print{
  .cat-hero,.cat-compare{background:none}
  .cat-cross,.cat-cta__actions,.header__nav{display:none}
  .cat-faq .accordion__panel{display:block!important}
  .cat-table{min-width:0;font-size:10pt}
  .cat-hero,.cat-intro,.cat-grid,.cat-compare,.cat-all,.cat-faq,.cat-cta{padding:0 0 18pt;break-inside:avoid}
  .cat-btn{border:0;padding:0}
}

.cat-empty { border: 1px solid var(--line-200); border-radius: 12px; padding: 32px; max-inline-size: 72ch; }
.cat-empty p { margin-block: 0 12px; }

.cat-grade { margin-block-start: clamp(48px,5vw,72px); border: 1px solid var(--line-200); border-radius: 12px; padding: clamp(28px,3vw,44px); background: var(--ivory-50); max-inline-size: 78ch; }
.cat-grade__h { font-size: clamp(24px,1.4rem + .6vw,32px); margin-block: 6px 14px; }
.cat-grade p { color: var(--ink-500); }
.cat-grade__list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; }
.cat-grade__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.cat-grade__list .icon { flex: none; margin-block-start: 3px; color: var(--saffron-500); }

/* cat-fix: category pages use the site container width */
body.page--category { --cat-max: 1280px; }
.cat-hero__inner, .cat-intro__inner, .cat-grid__inner, .cat-compare__inner,
.cat-all__inner, .cat-cross__inner, .cat-faq__inner, .cat-cta__inner {
  inline-size: min(1280px, 100% - 2 * var(--gutter));
  max-inline-size: none;
  margin-inline: auto;
}
.cat-grade { margin-inline: auto; }

/* ============================================================
   BATCH 5 — audience pages (honeymoon, family), rates guide,
   online booking, airport transfers, cabs.
   New classes only. Nothing above this line is modified.
   ============================================================ */

/* Icon + text list used for "what we arrange" blocks */
.b5-list { display: grid; gap: clamp(24px, 2.6vw, 38px); }
@media (min-width: 720px) { .b5-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .b5-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b5-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px 16px; align-items: start; padding-block-start: 20px; border-block-start: 1px solid var(--line-200); }
.b5-list li svg { color: var(--saffron-500); margin-block-start: 2px; }
.b5-list h3 { font-size: clamp(20px, 1.1rem + .4vw, 24px); margin-block-end: 6px; }
.b5-list p { font-size: 15px; }
.section--dark .b5-list li { border-block-start-color: rgba(255, 255, 255, .16); }

/* Two-column band: prose beside a standing enquiry card */
.b5-cols { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .b5-cols { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (min-width: 1000px) { .b5-cols .enq { position: sticky; inset-block-start: 104px; } }

/* Vehicle options — generic, always rates on request */
.b5-vehicles { display: grid; gap: 20px; }
@media (min-width: 760px) { .b5-vehicles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b5-vehicle { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 2.4vw, 32px); border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--ivory-50); }
.b5-vehicle svg { color: var(--lake-500); }
.b5-vehicle h3 { font-size: clamp(22px, 1.2rem + .4vw, 26px); }
.b5-vehicle p { font-size: 15px; }
.b5-vehicle__ask { font-family: var(--font-display); font-size: 18px; color: var(--ink-900); padding-block-start: 12px; margin-block-start: 2px; border-block-start: 1px solid var(--line-200); }

/* Day-trip strip */
.b5-days { display: grid; gap: 20px; }
@media (min-width: 720px) { .b5-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .b5-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b5-day { display: grid; gap: 10px; align-content: start; padding-block-start: 20px; border-block-start: 2px solid var(--saffron-500); }
.b5-day h3 { font-size: clamp(22px, 1.2rem + .5vw, 28px); }
.b5-day p { font-size: 15px; color: var(--ink-500); }

@media (prefers-reduced-motion: reduce) {
  .b5-vehicle, .b5-day { transition: none; }
}
@media print {
  .b5-cols { display: block; }
  .b5-cols .enq { position: static; border: 1px solid #999; box-shadow: none; }
  .b5-list, .b5-vehicles, .b5-days { display: block; }
  .b5-list li, .b5-vehicle, .b5-day { break-inside: avoid; margin-block-end: 14pt; }
  .b5-vehicle { border: 1px solid #999; background: none; }
  .b5-list p, .b5-day p, .b5-vehicle p { color: var(--ink-900) !important; }
}


/* ============================================================
   BATCH 6 — conversion layer (lead forms, WhatsApp routes,
   sticky bar, side rail, reassurance blocks, service pages).
   New classes only. Nothing above this line is modified.
   ============================================================ */

/* --- Lead form: full version (sits inside the hero band) --- */
.b6-lead { display: grid; gap: 20px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-card); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-200); box-shadow: var(--shadow); color: var(--ink-900); }
.b6-lead__h { font-size: clamp(24px, 1.3rem + .6vw, 30px); }
.b6-lead__sub { font-size: 15px; color: var(--ink-500); max-inline-size: 60ch; }
.b6-lead__grid { display: grid; gap: 14px; }
@media (min-width: 620px) { .b6-lead__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .b6-lead__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b6-lead__grid .b6-span { grid-column: 1 / -1; }
.b6-lead__foot { display: grid; gap: 10px; justify-items: start; }
.b6-lead__note { font-size: 13px; color: var(--ink-500); }
.b6-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lead form on a dark ground (closing bands, dark sections) */
.b6-lead--dark { background: var(--lake-700); border-color: rgba(255,255,255,.14); color: var(--ivory-50); backdrop-filter: none; }
.b6-lead--dark .b6-lead__sub, .b6-lead--dark .b6-lead__note, .b6-lead--dark .field__label { color: rgba(251,248,242,.74); }
.b6-lead--dark .input, .b6-lead--dark .select, .b6-lead--dark .counter { background: rgba(251,248,242,.06); border-color: rgba(255,255,255,.2); color: var(--ivory-50); }
.b6-lead--dark .input::placeholder { color: rgba(251,248,242,.5); }
.b6-lead--dark .input::-webkit-calendar-picker-indicator { filter: invert(1); }
.b6-lead--dark .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23FBF8F2' stroke-width='1.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); }

/* --- Quick form: three fields, expands to the full set --- */
.b6-quick { display: grid; gap: 14px; padding: clamp(20px, 2vw, 26px); border-radius: var(--r-card); border: 1px solid var(--line-200); background: var(--ivory-50); box-shadow: var(--shadow); }
.b6-quick__h { font-size: 22px; }
.b6-quick__grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .b6-quick__grid { grid-template-columns: 1fr 1fr; } .b6-quick__grid .b6-span { grid-column: 1 / -1; } }
.b6-quick__more { font-size: 14px; font-weight: 600; color: var(--lake-500); justify-self: start; }
.b6-quick__extra { display: grid; gap: 12px; }
.b6-quick__extra[hidden] { display: none; }
@media (min-width: 560px) { .b6-quick__extra { grid-template-columns: 1fr 1fr; } .b6-quick__extra .b6-span { grid-column: 1 / -1; } }

/* --- Four-step version (mobile-first) --- */
.b6-wizard { display: grid; gap: 18px; }
.b6-wizard__track { block-size: 2px; background: var(--line-200); border-radius: 2px; overflow: hidden; }
.b6-wizard__bar { display: block; block-size: 100%; inline-size: 25%; background: var(--saffron-500); transition: inline-size var(--dur-slow) var(--ease-out-expo); }
.b6-wizard__step { display: grid; gap: 14px; }
.b6-wizard__step[hidden] { display: none; }
.b6-wizard__nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.b6-wizard__nav [hidden] { display: none; }

/* --- Errors --- */
.b6-err { font-size: 14px; color: #8A3B12; }
.b6-err[hidden] { display: none; }
.b6-lead--dark .b6-err { color: var(--saffron-300); }

/* --- Success state --- */
.b6-done { display: grid; gap: 16px; justify-items: start; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-card); border: 1px solid var(--line-200); background: var(--ivory-50); box-shadow: var(--shadow); }
.b6-done[hidden] { display: none; }
.b6-done__h { font-size: clamp(24px, 1.3rem + .6vw, 30px); }
.b6-done__p { color: var(--ink-500); max-inline-size: 56ch; }
.b6-done__tick { inline-size: 52px; block-size: 52px; fill: none; stroke: var(--lake-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b6-done__tick circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: tick-draw var(--dur-cinematic) var(--ease-out-expo) forwards; }
.b6-done__tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick-draw var(--dur-slow) var(--ease-out-expo) .5s forwards; }
.b6-sent { inline-size: 100%; border-block-start: 1px solid var(--line-200); }
.b6-sent div { display: grid; grid-template-columns: 1fr; gap: 2px; padding-block: 10px; border-block-end: 1px solid var(--line-200); font-size: 15px; }
.b6-sent dt { font-size: 13px; color: var(--ink-500); }
@media (min-width: 560px) { .b6-sent div { grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: baseline; } }
@media (prefers-reduced-motion: reduce) { .b6-done__tick circle, .b6-done__tick path { animation: none; stroke-dashoffset: 0; } }

/* --- Sticky mobile action bar --- */
.b6-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter); padding-block-end: max(10px, env(safe-area-inset-bottom)); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block-start: 1px solid var(--line-200); }
.b6-bar .btn--primary { flex: 1; }
@media (min-width: 900px) { .b6-bar { display: none; } }
body.has-b6-bar { padding-block-end: 76px; }
@media (min-width: 900px) { body.has-b6-bar { padding-block-end: 0; } }

/* --- Desktop side rail --- */
.b6-rail { position: fixed; inset-inline-end: clamp(16px, 2vw, 32px); inset-block-start: 104px; z-index: 35; inline-size: 300px; display: none; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo); }
.b6-rail--vis { opacity: 1; transform: none; }
@media (min-width: 1400px) { .b6-rail { display: block; } }
.b6-rail__card { display: grid; gap: 12px; padding: 22px; border-radius: var(--r-card); border: 1px solid var(--line-200); background: var(--ivory-50); box-shadow: var(--shadow-hover); }
.b6-rail__h { font-size: 20px; }
.b6-rail__p { font-size: 14px; color: var(--ink-500); }

/* --- "Not sure which houseboat to choose?" --- */
.b6-unsure { display: grid; gap: 16px; justify-items: start; padding: clamp(28px, 3.4vw, 56px); border-radius: var(--r-image); background: var(--lake-900); color: var(--ivory-50); overflow: hidden; position: relative; }
.b6-unsure h2 { font-size: clamp(28px, 1.6rem + 1vw, 42px); max-inline-size: 26ch; }
.b6-unsure p { color: rgba(251,248,242,.76); max-inline-size: 58ch; }
.b6-unsure__mark { position: absolute; inset-block-start: -18%; inset-inline-end: -1%; font-family: var(--font-display); font-style: italic; font-size: clamp(130px, 18vw, 260px); line-height: 1; color: rgba(251,248,242,.05); pointer-events: none; user-select: none; }

/* --- Empty state where listings would sit --- */
.b6-empty { display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 3vw, 48px); border: 1px dashed var(--line-200); border-radius: var(--r-card); max-inline-size: 72ch; }
.b6-empty p { color: var(--ink-500); }

/* --- Quiet closing reminder strip --- */
.b6-remind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 26px; border-block: 1px solid var(--line-200); }
.b6-remind p { font-family: var(--font-display); font-size: clamp(20px, 1.1rem + .5vw, 26px); letter-spacing: -.01em; max-inline-size: 44ch; }
.section--dark .b6-remind { border-color: rgba(255,255,255,.16); }

/* --- Trust microcopy strip under the hero CTAs --- */
.b6-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-block-start: 26px; font-size: 14px; color: rgba(251,248,242,.82); }
.b6-trust li { display: flex; align-items: center; gap: 8px; }
.b6-trust li + li::before { content: "·"; color: rgba(251,248,242,.45); }

/* --- Three-step "how it works" cards --- */
.b6-flow { display: grid; gap: 24px; }
@media (min-width: 860px) { .b6-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b6-flow__card { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 2.4vw, 34px); border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--ivory-50); }
.b6-flow__num { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--saffron-500); }
.b6-flow__card h3 { font-size: clamp(22px, 1.2rem + .4vw, 26px); }
.b6-flow__card p { color: var(--ink-500); font-size: 15px; }
.section--dark .b6-flow__card { background: transparent; border-color: rgba(255,255,255,.16); }
.section--dark .b6-flow__card p { color: rgba(251,248,242,.74); }

/* --- Six reason cards --- */
.b6-reasons { display: grid; gap: 28px 40px; }
@media (min-width: 700px) { .b6-reasons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .b6-reasons { grid-template-columns: repeat(3, 1fr); } }
.b6-reason { display: grid; gap: 8px; padding-block-start: 20px; border-block-start: 1px solid var(--line-200); }
.b6-reason svg { color: var(--saffron-500); }
.b6-reason h3 { font-size: 22px; }
.b6-reason p { color: var(--ink-500); font-size: 15px; }

/* --- Route cards: trip types, categories, locations --- */
.b6-routes { display: grid; gap: 20px; }
@media (min-width: 680px) { .b6-routes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .b6-routes--4 { grid-template-columns: repeat(4, 1fr); } .b6-routes--3 { grid-template-columns: repeat(3, 1fr); } }
.b6-route { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.2vw, 30px); border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--ivory-50); transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo); }
.b6-route:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--saffron-300); }
.b6-route h3 { font-size: clamp(22px, 1.2rem + .4vw, 26px); }
.b6-route p { color: var(--ink-500); font-size: 15px; }
.b6-route .btn { justify-self: start; margin-block-start: 4px; }
.b6-route__media { margin: calc(-1 * clamp(22px, 2.2vw, 30px)); margin-block-end: 4px; aspect-ratio: 16 / 10; overflow: hidden; border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); }
.b6-route__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.b6-route:hover .b6-route__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .b6-route:hover { transform: none; } }

/* --- Service-page body: prose beside a standing quick form --- */
.b6-page { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 1020px) { .b6-page { grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 4vw, 72px); } }
@media (min-width: 1020px) { .b6-page__aside { position: sticky; inset-block-start: 104px; display: grid; gap: 16px; } }
.b6-prose { display: grid; gap: clamp(32px, 3.4vw, 52px); max-inline-size: 70ch; }
.b6-prose section { display: grid; gap: 16px; }
.b6-prose h2 { font-size: clamp(26px, 1.5rem + .6vw, 36px); }
.b6-prose h3 { font-size: clamp(20px, 1.1rem + .3vw, 24px); }
.b6-prose p { font-size: 17px; line-height: 1.68; }
.b6-ticks { display: grid; gap: 10px; }
.b6-ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 16px; }
.b6-ticks li svg { color: var(--lake-500); margin-block-start: 3px; }
.b6-numbers { display: grid; gap: 20px; counter-reset: b6; }
@media (min-width: 720px) { .b6-numbers { grid-template-columns: 1fr 1fr; } }
.b6-numbers li { counter-increment: b6; display: grid; gap: 6px; padding-block-start: 18px; border-block-start: 2px solid var(--saffron-500); }
.b6-numbers li::before { content: "Step " counter(b6, decimal-leading-zero); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.b6-numbers h3 { font-size: 21px; }
.b6-numbers p { font-size: 15px; color: var(--ink-500); }

/* --- Related pages --- */
.b6-cross { display: grid; gap: 16px; }
@media (min-width: 760px) { .b6-cross { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b6-crosslink { display: grid; gap: 6px; align-content: start; padding: 24px; border: 1px solid var(--line-200); border-radius: var(--r-card); color: var(--ink-900); background: var(--ivory-50); transition: border-color var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-out-expo); }
.b6-crosslink:hover { border-color: var(--saffron-300); transform: translateY(-3px); color: var(--ink-900); }
.b6-crosslink strong { font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: -.01em; }
.b6-crosslink span { font-size: 14px; color: var(--ink-500); }

/* --- Visual flow (how-it-works page) --- */
.b6-chain { display: grid; gap: 0; }
.b6-chain li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding-block: 26px; border-block-end: 1px solid var(--line-200); }
.b6-chain li:first-child { border-block-start: 1px solid var(--line-200); }
.b6-chain__n { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--saffron-500); }
.b6-chain h3 { font-size: clamp(22px, 1.2rem + .5vw, 28px); margin-block-end: 8px; }
.b6-chain p { color: var(--ink-500); max-inline-size: 62ch; }
.b6-chain dl { display: grid; gap: 4px; margin-block-start: 14px; font-size: 15px; }
.b6-chain dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); margin-block-start: 8px; }

/* --- Boat-page lead block + example options card --- */
.b6-boat { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; padding-block: 124px clamp(32px, 4vw, 48px); }
@media (min-width: 1000px) { .b6-boat { grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(40px, 4vw, 64px); } }
.b6-boat__body { display: grid; gap: 14px; }
.b6-boat__name { font-size: clamp(34px, 2rem + 1.6vw, 56px); }
.b6-boat__line { font-size: 17px; color: var(--ink-500); max-inline-size: 56ch; }
.b6-boat__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.b6-option { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 2.4vw, 32px); border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--ivory-50); box-shadow: var(--shadow); }
.b6-option__cat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--walnut-700); }
.b6-option h3 { font-size: 26px; }
.b6-option dl { display: grid; gap: 0; border-block-start: 1px solid var(--line-200); }
.b6-option dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding-block: 10px; border-block-end: 1px solid var(--line-200); font-size: 15px; }
.b6-option dt { color: var(--ink-500); font-size: 13px; }
.b6-option .btn { justify-self: start; margin-block-start: 4px; }

/* --- Substitution markers for the handover copy --- */
.b6-sub { background: #FFF7EA; box-shadow: inset 0 0 0 1px var(--saffron-500); border-radius: 3px; padding: 0 4px; font-style: normal; }

@media print {
  .b6-bar, .b6-rail, .b6-lead, .b6-quick, .b6-wizard { display: none !important; }
  .b6-unsure { background: none !important; color: var(--ink-900) !important; border: 1px solid #999; }
  .b6-unsure p { color: var(--ink-900) !important; }
  .b6-page { display: block; }
  .b6-prose { max-inline-size: none; }
  .b6-flow__card, .b6-route, .b6-crosslink, .b6-chain li { break-inside: avoid; }
}


/* ============================================================
   BATCH 7 — availability page + travel-guide children.
   New classes only. Nothing above this line is modified.
   ============================================================ */

/* Guide article: the enquiry band sits inside the 68ch measure */
.b7-band { display: grid; gap: 16px; justify-items: start; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card); background: var(--lake-700); color: var(--ivory-50); margin-block: 8px; }
.b7-band .label { color: var(--saffron-300); }
.b7-band h2 { font-size: clamp(23px, 1.3rem + .6vw, 30px); max-inline-size: 30ch; margin-block-start: 0; }
.b7-band p { color: rgba(251, 248, 242, .84); font-size: 16px; max-inline-size: 54ch; }
.b7-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.b7-band a { color: var(--saffron-300); }
.b7-band .btn--primary { color: var(--ink-900); }
.b7-band .btn--ghost { color: var(--ivory-50); }

/* Guide key-points box, for the "in short" summary under the intro */
.b7-short { display: grid; gap: 10px; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--mist-100); }
.b7-short p.label { color: var(--ink-500); }
.b7-short ul { display: grid; gap: 8px; }
.b7-short li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.6; }
.b7-short li svg { color: var(--lake-500); margin-block-start: 4px; }

/* Two-column compare inside a guide article */
.b7-two { display: grid; gap: 18px; }
@media (min-width: 620px) { .b7-two { grid-template-columns: 1fr 1fr; } }
.b7-two__col { display: grid; gap: 8px; align-content: start; padding-block-start: 16px; border-block-start: 2px solid var(--line-200); }
.b7-two__col h3 { font-size: 20px; margin-block-start: 0; }
.b7-two__col p, .b7-two__col li { font-size: 15px; color: var(--ink-500); }
.b7-two__col--warn { border-block-start-color: var(--saffron-500); }

/* Guide FAQ, tighter than the commercial-page accordion */
.b7-faq { border-block-start: 1px solid var(--line-200); }
.b7-faq__item { border-block-end: 1px solid var(--line-200); }
.b7-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 18px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 20px; letter-spacing: -.01em; }
.b7-faq__q::-webkit-details-marker { display: none; }
.b7-faq__q svg { flex: none; transition: transform var(--dur-base) var(--ease-soft); }
.b7-faq__item[open] .b7-faq__q svg { transform: rotate(45deg); }
.b7-faq__a p { padding-block-end: 20px; color: var(--ink-500); max-inline-size: 64ch; font-size: 16px; }

@media print {
  .b7-band { background: none !important; color: var(--ink-900) !important; border: 1px solid #999; }
  .b7-band p, .b7-band .label { color: var(--ink-900) !important; }
  .b7-band__actions { display: none !important; }
  .b7-short { background: none; border: 1px solid #999; break-inside: avoid; }
  .b7-two { display: block; }
  .b7-two__col { break-inside: avoid; margin-block-end: 12pt; }
  .b7-faq__a { display: block !important; }
  .b7-faq__item { break-inside: avoid; }
}


/* b2-vars: scoped to the Batch 2 pages only (FAQ, booking info, policies) */
.b2-wrap, .b2-page, .b2-doc, .b2-toc, .b2-hero, .b2-prose, .b2-section, .b2-cta-band {
  --wrap: 1280px;
  --measure: 72ch;
  --sans: var(--font-body);
  --serif: var(--font-display);
  --ink: var(--ink-900);
  --ink-2: var(--ink-500);
  --ink-3: var(--ink-500);
  --line: var(--line-200);
  --line-2: var(--line-200);
  --white: #fff;
  --paper: var(--ivory-50);
  --paper-2: var(--mist-100);
  --gold: var(--saffron-500);
  --walnut: var(--walnut-700);
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px;
  --r-1: 4px;  --r-2: 8px;  --r-3: 12px; --r-4: 24px;
  --step--1: 14px;
  --step-0: 16px;
  --step-1: clamp(18px, 1rem + .3vw, 20px);
  --step-2: clamp(24px, 1.3rem + .6vw, 32px);
  --step-3: clamp(30px, 1.6rem + 1vw, 42px);
  --step-4: clamp(36px, 2rem + 1.4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
.b2-page { display: grid; gap: 40px; }
@media (min-width: 1000px) { .b2-page { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.b2-doc { max-width: 72ch; }
.b2-doc p, .b2-doc li { margin-block-end: 12px; }
.b2-doc h2 { margin-block: 32px 12px; }
.b2-doc h3 { margin-block: 24px 8px; }
/* related links block */
.rel-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-inline-size: 60ch; }
.rel-links li { font-size: 16px; }
.rel-links a { color: var(--lake-500); }

/* glist-fix: guide lists were a 2-column grid, so a third child collapsed into the 28px column */
.gbody ol.glist { counter-reset: g; display: block; padding-inline-start: 0; }
.gbody ol.glist li {
  display: list-item;
  list-style: none;
  position: relative;
  padding-inline-start: 42px;
  margin-block-end: 14px;
  counter-increment: g;
}
.gbody ol.glist li::before {
  content: counter(g) ".";
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--font-display);
  color: var(--saffron-500);
}
.gbody ul.glist { display: block; padding-inline-start: 0; }
.gbody ul.glist li {
  display: list-item;
  list-style: none;
  position: relative;
  padding-inline-start: 22px;
  margin-block-end: 12px;
}
.gbody ul.glist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 10px;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--saffron-500);
}
/* Light header on pages without a dark hero */
body.bmh-lightpage .header {
  background: var(--glass, rgba(251, 248, 242, .82));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink-900);
  box-shadow: 0 1px 0 var(--line-200);
}
body.bmh-lightpage .header__logo em { color: var(--saffron-500); }
body.bmh-lightpage .header__actions .btn--icon { box-shadow: inset 0 0 0 1px var(--line-200); color: inherit; }
body.bmh-lightpage .header__actions .btn--icon:hover { background: var(--mist-100); }
body.bmh-lightpage .header__nav a { color: inherit; }
/* header-solid: same solid bar on every page */
.header,
.header--glass,
body.bmh-lightpage .header,
body.page--category .header,
body.bmh-boatpage .header {
  background: var(--ivory-50);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink-900);
  border-block-end: 1px solid var(--line-200);
  box-shadow: none;
}
.header__logo, .header__nav a, .header__actions .btn--icon { color: var(--ink-900); }
.header__logo em { color: var(--saffron-500); }
.header__actions .btn--icon { box-shadow: inset 0 0 0 1px var(--line-200); }
.header__actions .btn--icon:hover { background: var(--mist-100); }
.header__nav a:hover { color: var(--lake-500); }
/* hero ab header ke neeche na chhupe */
.hero { padding-block-start: 0; }