/* ==========================================================================
   BanarasBhraman — Base, Layout & Shell
   --------------------------------------------------------------------------
   Mobile-first. Every value below resolves to a token from tokens.css.
   Sections:
     1. Reset            5. Layout primitives
     2. Document         6. Skip link
     3. Typography       7. Header & navigation
     4. Media/forms      8. Footer
                         9. Buttons & utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep anchored headings clear of the sticky header. */
  scroll-padding-top: calc(var(--bb-size-header-height) + var(--bb-space-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. DOCUMENT
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  background-color: var(--bb-color-surface);
  color: var(--bb-color-text);
  font-family: var(--bb-font-body);
  font-size: var(--bb-text-base);
  line-height: var(--bb-leading-normal);
  font-weight: var(--bb-font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Sticky footer without a wrapper element. */
body.bb-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.bb-site-main { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bb-font-heading);
  font-weight: var(--bb-font-weight-bold);
  line-height: var(--bb-leading-tight);
  letter-spacing: var(--bb-tracking-tight);
  color: var(--bb-color-text);
  text-wrap: balance;
}

h1 { font-size: var(--bb-text-3xl); }
h2 { font-size: var(--bb-text-2xl); }
h3 { font-size: var(--bb-text-xl); }
h4 { font-size: var(--bb-text-lg); }
h5 { font-size: var(--bb-text-md); }
h6 {
  font-size: var(--bb-text-base);
  font-weight: var(--bb-font-weight-semibold);
  letter-spacing: var(--bb-tracking-wide);
}

p, li, dd, dt, blockquote, figcaption {
  text-wrap: pretty;
}

a {
  color: var(--bb-color-brand-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: var(--bb-transition-colors);
}

a:hover { color: var(--bb-color-brand-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--bb-border-width-thick) solid var(--bb-color-focus);
  outline-offset: var(--bb-space-1);
  border-radius: var(--bb-radius-sm);
}

strong, b { font-weight: var(--bb-font-weight-semibold); }

small { font-size: var(--bb-text-sm); }

hr {
  height: 0;
  border: 0;
  border-top: var(--bb-border);
  margin-block: var(--bb-space-10);
}

blockquote {
  padding-inline-start: var(--bb-space-5);
  border-inline-start: var(--bb-border-width-thick) solid var(--bb-color-brand);
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-md);
}

code, kbd, pre, samp {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-text-sm);
}

pre {
  overflow-x: auto;
  padding: var(--bb-space-4);
  background-color: var(--bb-color-surface-sunken);
  border-radius: var(--bb-radius-md);
}

/* --------------------------------------------------------------------------
   4. MEDIA & FORMS
   -------------------------------------------------------------------------- */
img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}

/* Paired with the width/height attributes WordPress emits, this reserves
   space and keeps CLS at zero while images decode. Deliberately kept at
   element specificity so layout classes such as .bb-card__image can set an
   explicit height for object-fit without a specificity fight. */
img, video {
  height: auto;
}

svg { fill: currentColor; }

/* WordPress prints an inline `style="width: 600px"` on caption figures, which
   on a phone is wider than the viewport. max-width beats width in the
   cascade, so this caps them without needing !important. */
figure {
  max-width: 100%;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  margin-block-start: var(--bb-space-2);
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-sm);
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* Every interactive control clears the WCAG touch-target minimum. */
button,
[type="button"],
[type="submit"],
[type="reset"] {
  min-height: var(--bb-size-touch-target);
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* Wide tables scroll inside their own container, never the page. */
.bb-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.bb-container {
  width: 100%;
  max-width: var(--bb-size-container);
  margin-inline: auto;
  padding-inline: var(--bb-space-gutter);
}

.bb-container--wide   { max-width: var(--bb-size-container-wide); }
.bb-container--narrow { max-width: var(--bb-size-container-narrow); }

.bb-section {
  padding-block: var(--bb-space-section);
}

/* --------------------------------------------------------------------------
   Brand-tinted surfaces
   --------------------------------------------------------------------------
   Every surface that was a flat #FFF4ED (--bb-color-brand-subtle) now carries
   the uploaded watermark over that colour. Listed together rather than
   repeated per component so there is one place to add or remove a surface.

   The colour stays underneath deliberately: it is what shows while the image
   decodes, and what remains if the upload is ever missing.
   -------------------------------------------------------------------------- */
.bb-row--tint,
.bb-aside-cta,
.bb-card__image--placeholder {
  background-image: var(--bb-image-texture);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Owl stack: consistent vertical rhythm without per-element margins. */
.bb-stack > * + * {
  margin-block-start: var(--bb-space-stack);
}

/* Long-form content: readable measure + rhythm for editor output. */
.bb-prose {
  max-width: var(--bb-measure);
}

.bb-prose > * + *      { margin-block-start: var(--bb-space-5); }
.bb-prose > * + :is(h2, h3, h4) { margin-block-start: var(--bb-space-10); }
.bb-prose :is(h2, h3, h4) + *   { margin-block-start: var(--bb-space-3); }

.bb-prose :is(ul, ol) {
  padding-inline-start: var(--bb-space-6);
}

.bb-prose li + li { margin-block-start: var(--bb-space-2); }

.bb-prose img,
.bb-prose figure {
  border-radius: var(--bb-radius-lg);
}

/* Archive & search result entries */
.bb-entry + .bb-entry {
  margin-block-start: var(--bb-space-8);
  padding-block-start: var(--bb-space-8);
  border-block-start: var(--bb-border);
}

.bb-entry__title {
  margin-block-end: var(--bb-space-2);
  font-size: var(--bb-text-lg);
}

.bb-entry__title a {
  text-decoration: none;
  color: var(--bb-color-text);
}

.bb-entry__title a:hover {
  color: var(--bb-color-brand-text);
  text-decoration: underline;
}

.bb-entry__excerpt {
  max-width: var(--bb-measure);
  color: var(--bb-color-text-muted);
}

.bb-entry__excerpt p { margin: 0; }

/* Breadcrumbs */
.bb-breadcrumbs {
  padding-block: var(--bb-space-4);
  font-size: var(--bb-text-sm);
  color: var(--bb-color-text-muted);
}

.bb-meta {
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-sm);
}

/* --------------------------------------------------------------------------
   5b. CARDS, GRID & BOOKING VIEWS
   -------------------------------------------------------------------------- */
.bb-section-title {
  margin-block-end: var(--bb-space-6);
  font-size: var(--bb-text-xl);
}

/* Auto-fitting grid: one column on a phone, more as space allows, with no
   breakpoint maintenance. */
.bb-grid {
  display: grid;
  gap: var(--bb-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
  .bb-grid {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }
}

.bb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
  overflow: hidden;
  padding: var(--bb-space-3);
  background-color: var(--bb-color-surface-raised);
  border: var(--bb-border);
  border-radius: var(--bb-radius-lg);
  transition: border-color var(--bb-dur-fast) var(--bb-ease-standard),
              box-shadow var(--bb-dur-fast) var(--bb-ease-standard);
}

.bb-card:hover {
  border-color: var(--bb-color-brand-border);
  box-shadow: var(--bb-shadow-md);
}

/* Stretched link: the whole card is clickable while the accessible name
   stays on a single real anchor. Above z-raised so it stays on top even where
   a card variant (the homepage overlay cards) gives its own body a stacking
   context at that same level — same z-index, later in the DOM, would
   otherwise win and silently swallow every click. */
.bb-card__link {
  position: absolute;
  inset: 0;
  z-index: calc(var(--bb-z-raised) + 1);
}

.bb-card__link:focus-visible {
  outline-offset: calc(var(--bb-space-1) * -1);
}

.bb-card__media {
  overflow: hidden;
  border-radius: var(--bb-radius-md);
  background-color: var(--bb-color-skeleton);
}

/* The ratio lives on the image, not the wrapper. A percentage height cannot
   resolve against a parent sized by aspect-ratio, so `height: 100%` would
   silently fall back to auto and let tall images overflow the card. */
.bb-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--bb-dur-slow) var(--bb-ease-standard);
}

.bb-card:hover .bb-card__image {
  transform: scale(1.06);
}

.bb-card__image--placeholder {
  aspect-ratio: 16 / 10;
  background-color: var(--bb-color-brand-subtle);
}

.bb-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bb-space-2);
}

.bb-card__title {
  font-size: var(--bb-text-base);
  line-height: var(--bb-leading-snug);
  /* Titles vary from 3 to 12 words; clamping keeps card heads even without
     truncating so hard that the item becomes unidentifiable. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bb-card__excerpt {
  flex: 1;
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

/* Compact listing grid — denser columns, matching the catalog density of a
   travel marketplace rather than a blog. Same card everywhere: this only
   tightens the grid, not the card's own structure. */
@media (min-width: 30rem) {
  .bb-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: var(--bb-space-5);
  }
}

.bb-card__eyebrow {
  color: var(--bb-color-text-subtle);
  /* Quiet by design: this is metadata, not something to read first. Smaller
     than the xs scale step and dimmed further with opacity (rather than a
     lighter colour token) so it fades the same way in both themes. */
  font-size: 0.6875rem;
  opacity: 0.68;
  font-weight: var(--bb-font-weight-semibold);
  letter-spacing: var(--bb-tracking-wide);
  text-transform: uppercase;
  /* Type names are long SEO titles; keep the card head to one line. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bb-card__rating {
  display: flex;
  align-items: center;
  gap: var(--bb-space-1);
  font-size: var(--bb-text-xs);
}

.bb-card__stars {
  color: var(--bb-color-accent);
  letter-spacing: 0.04em;
}

.bb-card__rating-value { font-weight: var(--bb-font-weight-bold); }

.bb-card__rating-count { color: var(--bb-color-text-subtle); }

.bb-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--bb-space-2);
  margin-block-start: auto;
  padding-block-start: var(--bb-space-3);
  border-block-start: var(--bb-border);
}

.bb-card__price-was {
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-xs);
  text-decoration: line-through;
}

.bb-card__price-label {
  display: block;
  color: var(--bb-color-text-subtle);
  font-size: 0.6875rem;
  opacity: 0.68;
  letter-spacing: var(--bb-tracking-wide);
  text-transform: uppercase;
}

.bb-card__price-value {
  color: var(--bb-color-text);
  font-size: var(--bb-text-md);
  font-weight: var(--bb-font-weight-bold);
}

.bb-card__cta {
  color: var(--bb-color-brand-text);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-semibold);
}

/* Term chips */
.bb-termlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-2);
}

.bb-termlist__item {
  padding: var(--bb-space-1) var(--bb-space-3);
  background-color: var(--bb-color-brand-subtle);
  border: var(--bb-border-width) solid var(--bb-color-brand-border);
  border-radius: var(--bb-radius-pill);
  color: var(--bb-color-brand-text);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-medium);
  text-decoration: none;
}

.bb-termlist__item:hover {
  background-color: var(--bb-color-brand);
  border-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
}

/* Single booking layout — one column on mobile, sidebar from lg up. */
.bb-booking__layout {
  display: grid;
  gap: var(--bb-space-10);
  grid-template-columns: 1fr;
}

/* Grid and flex items default to min-width:auto, which lets an unusually wide
   child (a pasted table, a fixed-width embed) stretch the track past the
   viewport. Zeroing it makes the columns shrink instead. */
.bb-booking__main,
.bb-booking__aside {
  min-width: 0;
}

@media (min-width: 64rem) {
  .bb-booking__layout {
    grid-template-columns: minmax(0, 1fr) 24rem;
    column-gap: var(--bb-space-4);
    align-items: start;
  }

  .bb-booking__aside {
    position: sticky;
    inset-block-start: calc(var(--bb-size-header-height) + var(--bb-space-6));
  }
}

.bb-booking__hero {
  margin-block-end: var(--bb-space-8);
}

.bb-booking__hero img {
  width: 100%;
  border-radius: var(--bb-radius-lg);
}

/* Gallery */
.bb-gallery,
.bb-faqs,
.bb-related {
  margin-block-start: var(--bb-space-16);
}

.bb-gallery__grid {
  display: grid;
  gap: var(--bb-space-4);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.bb-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--bb-radius-md);
}

.bb-gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* FAQs — native <details>, so they work with zero JavaScript. */
.bb-faq {
  border-block-end: var(--bb-border);
}

.bb-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  min-height: var(--bb-size-touch-target);
  padding-block: var(--bb-space-4);
  cursor: pointer;
  font-weight: var(--bb-font-weight-semibold);
  list-style: none;
}

.bb-faq__question::-webkit-details-marker { display: none; }

.bb-faq__question::after {
  content: "+";
  flex-shrink: 0;
  color: var(--bb-color-brand-text);
  font-size: var(--bb-text-lg);
  font-weight: var(--bb-font-weight-regular);
}

.bb-faq[open] .bb-faq__question::after { content: "−"; }

.bb-faq__answer {
  padding-block-end: var(--bb-space-5);
  color: var(--bb-color-text-muted);
}

/* --------------------------------------------------------------------------
   5e. HOMEPAGE
   -------------------------------------------------------------------------- */

/* --- Hero slideshow ---
   Stacked crossfade with a slow Ken Burns zoom, not a swipeable carousel:
   there is nothing here for a visitor to navigate, so no arrows and no
   scroll-snap. Height is fixed by viewport rather than by content, so it
   cannot grow or shrink with heading length. */
.bb-hero {
  position: relative;
  height: clamp(26rem, 72vh, 38rem);
  overflow: hidden;
  isolation: isolate;
}

.bb-hero__media {
  position: absolute;
  inset: 0;
}

.bb-hero__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.bb-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.bb-hero__slide.is-active {
  z-index: 1;
  opacity: 1;
}

.bb-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* On a narrow crop the subject usually sits right of centre in these
     slides — anchoring right keeps it in frame instead of cropping in from
     both edges equally. Desktop has room to show the full frame centred. */
  object-position: right;
  /* Continuous, independent of the crossfade — each slide keeps drifting
     while hidden, so whichever one fades in is already mid-motion rather
     than snapping to a fresh zoom every time. */
  animation: bb-kenburns 16s ease-in-out infinite alternate;
}

@media (min-width: 48rem) {
  .bb-hero__image { object-position: center; }
}

.bb-hero__slide:nth-child(even) .bb-hero__image {
  /* Offsetting even slides keeps two consecutive slides from zooming in
     visible lock-step. */
  animation-direction: alternate-reverse;
}

@keyframes bb-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-hero__image { animation: none; }
}

/* Scrim so the heading stays legible over any uploaded photo. */
.bb-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(20 16 14 / 0.86) 0%, rgb(20 16 14 / 0.6) 55%, rgb(20 16 14 / 0.3) 100%);
}

.bb-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-block: var(--bb-space-10);
  color: var(--bb-color-text-inverse);
}

.bb-hero__title {
  max-width: 22ch;
  color: var(--bb-color-text-inverse);
  font-size: var(--bb-text-4xl);
}

.bb-hero__lede {
  max-width: 75ch;
  margin-block-start: var(--bb-space-4);
  color: var(--bb-color-text-inverse);
  font-size: var(--bb-text-sm);
  opacity: 0.92;
  text-align: justify;
}

.bb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-3);
  margin-block-start: var(--bb-space-8);
}

/* --- Section header --- */
.bb-sectionhead {
  margin-block-end: var(--bb-space-10);
  text-align: center;
}

.bb-sectionhead__eyebrow {
  display: inline-block;
  margin-block-end: var(--bb-space-4);
  padding: var(--bb-space-1) var(--bb-space-4);
  background-color: var(--bb-color-brand-subtle);
  border-radius: var(--bb-radius-pill);
  color: var(--bb-color-brand-text);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-semibold);
  letter-spacing: var(--bb-tracking-wide);
}

.bb-sectionhead__title {
  font-size: var(--bb-text-2xl);
}

/* Intro copy is centred and measure-limited: it is real SEO text, so it needs
   to read as prose rather than a caption. */
.bb-sectionhead__intro {
  margin-inline: auto;
  margin-block-start: var(--bb-space-4);
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
  line-height: var(--bb-leading-relaxed);
}

.bb-sectionhead__intro p + p { margin-block-start: var(--bb-space-3); }

/* --- Service tiles ---
   Six across on a wide screen read as a thin strip of thumbnails, so the
   tiles are portrait: the same row height as a card, and enough vertical
   room for a label and a count instead of a label alone. */
.bb-tiles {
  display: grid;
  gap: var(--bb-space-4);
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
}

@media (min-width: 48rem) {
  .bb-tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  .bb-tiles { grid-template-columns: repeat(6, 1fr); }
}

.bb-tile__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-color-grey-900);
  color: var(--bb-color-text-inverse);
  text-decoration: none;
  box-shadow: var(--bb-shadow-sm);
  transition: transform var(--bb-dur-normal) var(--bb-ease-standard),
              box-shadow var(--bb-dur-normal) var(--bb-ease-standard);
}

.bb-tile__link:hover {
  transform: translateY(-6px);
  box-shadow: var(--bb-shadow-lg);
}

/* Deep saffron rather than flat brand orange: this shows through on any tile
   whose catalog items carry no featured image yet, and the white label has to
   stay readable against it. */
.bb-tile__media {
  display: block;
  background-color: var(--bb-color-saffron-800);
  background-image: linear-gradient(
    160deg,
    var(--bb-color-saffron-700) 0%,
    var(--bb-color-saffron-900) 100%
  );
  aspect-ratio: 3 / 4;
}

@media (max-width: 47.999rem) {
  .bb-tile__media { aspect-ratio: 4 / 3; }
}

.bb-tile__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: opacity var(--bb-dur-normal) var(--bb-ease-standard),
              transform var(--bb-dur-slow) var(--bb-ease-standard);
}

/* Landscape on phones, where two portrait tiles side by side would push the
   rest of the page a long way down. */
@media (max-width: 47.999rem) {
  .bb-tile__image { aspect-ratio: 4 / 3; }
}

.bb-tile__link:hover .bb-tile__image { transform: scale(1.06); }

.bb-tile__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-1);
  padding: var(--bb-space-8) var(--bb-space-3) var(--bb-space-4);
  /* A two-stop scrim: nearly opaque under the text, gone by mid-tile, so the
     photograph is not dimmed across its whole height. */
  background-image: linear-gradient(
    to top,
    rgb(20 16 14 / 0.92) 0%,
    rgb(20 16 14 / 0.72) 38%,
    rgb(20 16 14 / 0) 100%
  );
  text-align: center;
}

.bb-tile__label {
  color: var(--bb-color-text-inverse);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-semibold);
  line-height: var(--bb-leading-snug);
}

.bb-tile__count {
  /* Reserved even when empty, so every label in the row sits on one line. */
  min-height: 1.15em;
  color: var(--bb-color-gold-300);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-medium);
}

/* Hover reveals a saffron arrow over the image, matching the live site. */
.bb-tile__link::after {
  content: "\2192";
  position: absolute;
  inset-block-start: 42%;
  inset-inline-start: 50%;
  z-index: var(--bb-z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-space-12);
  height: var(--bb-space-12);
  transform: translate(-50%, -35%) scale(0.6);
  opacity: 0;
  background-color: var(--bb-color-brand);
  border-radius: var(--bb-radius-circle);
  color: var(--bb-color-text-on-brand);
  font-size: var(--bb-text-lg);
  transition: opacity var(--bb-dur-normal) var(--bb-ease-standard),
              transform var(--bb-dur-normal) var(--bb-ease-standard);
}

.bb-tile__link:hover::after,
.bb-tile__link:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.bb-tile__link:focus-visible {
  outline: var(--bb-border-width-thick) solid var(--bb-color-focus);
  outline-offset: 3px;
}

/* --- Category rows --- */
.bb-row {
  padding-block: var(--bb-space-16);
}

.bb-row--tint {
  background-color: var(--bb-color-brand-subtle);
}

.bb-row__carousel {
  position: relative;
}

.bb-row__track {
  display: flex;
  gap: var(--bb-space-4);
  margin: 0;
  padding: var(--bb-space-1) var(--bb-space-1) var(--bb-space-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.bb-row__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bb-row__track,
  .bb-hero__track,
  .bb-carousel__track {
    scroll-behavior: auto;
  }
}

/* Four across at desktop, shrinking gracefully on the way down. */
.bb-row__item {
  flex: 0 0 82%;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}

@media (min-width: 30rem) {
  .bb-row__item { flex-basis: 46%; }
}

@media (min-width: 48rem) {
  .bb-row__item { flex-basis: 31%; }
}

@media (min-width: 64rem) {
  .bb-row__item { flex-basis: calc((100% - (var(--bb-space-4) * 3)) / 4); }
}

.bb-row__item > .bb-card {
  width: 100%;
  min-width: 0;
}

.bb-row__cta {
  margin-block-start: var(--bb-space-8);
  text-align: center;
}

.bb-row__carousel .bb-carousel__nav { display: none; }

/* Arrows sit fully outside the rail. The container leaves ~120px of margin at
   desktop widths, so pulling them out this far never overlaps a card title. */
@media (min-width: 64rem) {
  .bb-row__carousel .bb-carousel__nav { display: inline-flex; }
  .bb-row__carousel .bb-carousel__nav--prev { inset-inline-start: calc(var(--bb-space-16) * -1); }
  .bb-row__carousel .bb-carousel__nav--next { inset-inline-end: calc(var(--bb-space-16) * -1); }
}

/* --- Why choose us / company facts --- */
/* White, because the packages rail above it is a tinted band — two cream
   bands in a row read as one long undifferentiated block. */
.bb-why {
  background-color: var(--bb-color-surface);
}

.bb-why__head {
  position: relative;
  width: 100%;
}

/* Angled ribbon. Sits clear of the heading rather than across it: rotated
   text overlapping a headline hurts legibility and looks like a mistake. */
.bb-sectionhead__ribbon {
  display: inline-block;
  margin-block-end: var(--bb-space-3);
  padding: var(--bb-space-1) var(--bb-space-4);
  transform: rotate(-4deg);
  background-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-semibold);
  letter-spacing: var(--bb-tracking-wide);
}

.bb-why__title {
  font-size: var(--bb-text-3xl);
}

.bb-stats {
  display: grid;
  gap: var(--bb-space-5);
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
}

@media (min-width: 64rem) {
  .bb-stats { grid-template-columns: repeat(4, 1fr); }
}

.bb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bb-space-2);
  padding: var(--bb-space-8) var(--bb-space-4);
  background-color: var(--bb-color-surface);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-sm);
  text-align: center;
}

.bb-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-space-20);
  height: var(--bb-space-20);
  margin-block-end: var(--bb-space-3);
  background-color: var(--bb-color-cream-200);
  border-radius: var(--bb-radius-circle);
  color: var(--bb-color-brand);
}

.bb-stat__value {
  font-size: var(--bb-text-3xl);
  font-weight: var(--bb-font-weight-bold);
  line-height: var(--bb-leading-none);
  letter-spacing: var(--bb-tracking-tight);
}

.bb-stat__label {
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

/* --- Homepage long-form section ---
   Two columns of the page's own copy that stretch to a shared height, over a
   full-width enquiry panel. The lead column is the short one, so it also
   carries the brand plate and three catalog shortcuts. */
/* Full-bleed band: the background runs edge to edge while the copy stays in
   the container. A boxed frame left the texture floating in a white margin. */
.bb-story {
  background-color: var(--bb-color-cream-050);
  background-image: var(--bb-image-texture);
  background-size: cover;
  background-position: center;
  border-block: var(--bb-border-width) solid var(--bb-color-gold-300);
}

.bb-story__grid {
  display: grid;
  gap: var(--bb-space-5);
  grid-template-columns: 1fr;
}

/* The lead column is narrower: it holds one short section plus furniture,
   while the right column carries the bulk of the copy. */
@media (min-width: 64rem) {
  .bb-story__grid { grid-template-columns: 22rem minmax(0, 1fr); }
  .bb-story__grid--single { grid-template-columns: minmax(0, 1fr); }
}

/* Flex columns, not grid: the last card in each takes the leftover space, so
   both columns end on the same line however unequal the copy is.

   min-width is reset because a grid item defaults to min-width:auto, which
   refuses to shrink below its content — one long unbreakable word is then
   enough to push a column out over its neighbour. */
.bb-story__side,
.bb-story__main {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-5);
  min-width: 0;
}

.bb-story__side > .bb-story__card,
.bb-story__main > .bb-story__card:last-child {
  flex: 1;
}

/* --- Brand plate --- */
.bb-story__plate {
  padding: var(--bb-space-6) var(--bb-space-5);
  background-color: var(--bb-color-surface);
  border: var(--bb-border-width) solid var(--bb-color-gold-300);
  border-radius: var(--bb-radius-xl);
  text-align: center;
}

.bb-story__mark {
  display: flex;
  justify-content: center;
  margin-block-end: var(--bb-space-2);
  color: var(--bb-color-gold-500);
}

/* The site name is a single unbreakable token ("banarasbhraman.com"), so it
   is sized to fit the narrow column and allowed to break mid-word rather than
   overflowing it. Tracking is the narrower `wide` for the same reason. */
.bb-story__brand {
  margin: 0;
  color: var(--bb-color-gold-600);
  font-family: var(--bb-font-serif);
  font-size: var(--bb-text-base);
  font-weight: var(--bb-font-weight-bold);
  letter-spacing: var(--bb-tracking-wide);
  text-transform: uppercase;
  line-height: var(--bb-leading-snug);
  overflow-wrap: anywhere;
}

.bb-story__tagline {
  margin-block-start: var(--bb-space-1);
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

/* --- Copy cards --- */
.bb-story__card {
  display: flex;
  flex-direction: column;
  padding: var(--bb-space-6);
  background-color: var(--bb-color-surface);
  border: var(--bb-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-xs);
}

@media (min-width: 48rem) {
  .bb-story__card { padding: var(--bb-space-8); }
}

.bb-story__prose {
  /* The card is the measure here, so the prose cap would only narrow it. */
  max-width: none;
}

.bb-story__prose > :first-child { margin-block-start: 0; }
.bb-story__prose > :last-child  { margin-block-end: 0; }

.bb-story__prose :is(h2, h3) {
  font-size: var(--bb-text-lg);
  line-height: var(--bb-leading-snug);
}

.bb-story__prose p {
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

.bb-story__prose img {
  width: 100%;
  max-height: 15rem;
  object-fit: cover;
  border-radius: var(--bb-radius-lg);
}

.bb-story__prose figure { margin: 0; }

/* --- Three shortcuts under the lead card --- */
.bb-story__picks {
  display: grid;
  gap: var(--bb-space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* auto, so a stretched card keeps these on its bottom edge. */
  margin-block-start: auto;
  padding-block-start: var(--bb-space-6);
  padding-inline: 0;
  border-block-start: var(--bb-border);
  list-style: none;
}

.bb-story__pick {
  display: grid;
  gap: var(--bb-space-2);
  justify-items: center;
  min-width: 0;
  padding: var(--bb-space-4) var(--bb-space-1);
  background-color: var(--bb-color-cream-050);
  border: var(--bb-border-width) solid var(--bb-color-gold-300);
  border-radius: var(--bb-radius-lg);
  color: var(--bb-color-text);
  text-align: center;
  text-decoration: none;
  transition: transform var(--bb-dur-normal) var(--bb-ease-standard),
              var(--bb-transition-colors);
}

.bb-story__pick:hover {
  transform: translateY(-3px);
  background-color: var(--bb-color-gold-100);
  color: var(--bb-color-brand-text);
}

.bb-story__pick-icon {
  display: block;
  color: var(--bb-color-brand);
}

.bb-story__pick-label {
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-semibold);
}

/* --- Enquiry panel --- */
.bb-story__enquire {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-4) var(--bb-space-8);
  padding: var(--bb-space-5) var(--bb-space-6);
  background-color: var(--bb-color-saffron-900);
  background-image: linear-gradient(
    135deg,
    var(--bb-color-saffron-900) 0%,
    var(--bb-color-saffron-800) 100%
  );
  border: var(--bb-border-width) solid var(--bb-color-gold-500);
  border-radius: var(--bb-radius-xl);
  text-align: center;
}

/* Gold on deep saffron, not the standard saffron button: on this background a
   brand-coloured button would all but disappear. */
.bb-story__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bb-size-touch-target);
  padding: var(--bb-space-3) var(--bb-space-5);
  background-image: linear-gradient(
    135deg,
    var(--bb-color-gold-500) 0%,
    var(--bb-color-gold-300) 100%
  );
  border-radius: var(--bb-radius-pill);
  color: var(--bb-color-saffron-900);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-bold);
  letter-spacing: var(--bb-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--bb-dur-normal) var(--bb-ease-standard),
              box-shadow var(--bb-dur-normal) var(--bb-ease-standard);
}

.bb-story__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--bb-shadow-md);
}

.bb-story__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bb-space-2) var(--bb-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-story__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  color: var(--bb-color-cream-100);
  font-size: var(--bb-text-sm);
  text-decoration: none;
}

.bb-story__contact a:hover {
  color: var(--bb-color-white);
  text-decoration: underline;
}

.bb-story__contact .bb-icon { color: var(--bb-color-gold-300); }

/* --- FAQs ---
   Rendered from the footer on every page, so it needs a top edge of its own:
   it can follow white page content, a tinted band, or a card grid. */
.bb-faqs-section {
  background-color: var(--bb-color-surface-sunken);
  border-block-start: var(--bb-border);
}

.bb-faqs-grid {
  display: grid;
  gap: var(--bb-space-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 64rem) {
  .bb-faqs-grid { grid-template-columns: 1fr 1fr; }
}

.bb-faqs-col {
  display: grid;
  gap: var(--bb-space-3);
}

.bb-faqs-grid .bb-faq {
  padding-inline: var(--bb-space-5);
  background-color: var(--bb-color-surface);
  border: var(--bb-border);
  border-radius: var(--bb-radius-lg);
}

/* --- Scroll reveal --- */
.bb-reveal {
  opacity: 0;
  transform: translateY(var(--bb-space-6));
  transition: opacity var(--bb-dur-slow) var(--bb-ease-out),
              transform var(--bb-dur-slow) var(--bb-ease-out);
}

.bb-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/*
 * Without JS nothing would ever add .is-visible, so the content must not be
 * left invisible: this shows everything unless the script announces itself.
 */
html:not(.bb-js) .bb-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bb-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   5d. PAGE BANNER
   --------------------------------------------------------------------------
   One masthead for every template — listings, articles, pages, the catalog,
   search and 404. Identical height, alignment and type in all of them; only
   the background differs, and only because a page with a featured image uses
   it instead of the brand gradient.
   -------------------------------------------------------------------------- */
/* Featured image, shown in the content because the banner is always the brand
   gradient. */
.bb-figure {
  margin: 0 0 var(--bb-space-8);
}

.bb-figure img {
  display: block;
  width: 100%;
  border-radius: var(--bb-radius-lg);
}

.bb-figure__caption {
  margin-block-start: var(--bb-space-2);
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-sm);
}

.bb-banner {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: var(--bb-space-10);
  /* Logo-toned gradient: dark saffron at the leading edge, where the heading
     and chips actually sit, sweeping up to light gold at the trailing edge,
     which stays empty of text — so the fade never has to fight white-text
     contrast. */
  background-color: var(--bb-color-saffron-900);
  background-image: linear-gradient(
    to right,
    var(--bb-color-saffron-900) 0%,
    var(--bb-color-saffron-700) 45%,
    var(--bb-color-gold-500) 78%,
    var(--bb-color-gold-300) 100%
  );
  /* The quickbar below shares this same gradient, so without a seam the two
     would read as one block — this line is the only thing marking where the
     banner ends and the sticky bar begins. */
  border-block-end: var(--bb-border-width) solid var(--bb-color-border-inverse);
  color: var(--bb-color-text-inverse);
}

.bb-banner__inner {
  position: relative;
  z-index: var(--bb-z-raised);
}

.bb-banner__eyebrow {
  display: inline-block;
  margin-block-end: var(--bb-space-3);
  padding: var(--bb-space-1) var(--bb-space-3);
  background-color: rgb(255 255 255 / 0.14);
  border: var(--bb-border-width) solid var(--bb-color-border-inverse);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--bb-tracking-wide);
}

.bb-banner__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.bb-banner__eyebrow a:hover { text-decoration: underline; }

.bb-banner__title {
  max-width: var(--bb-measure);
  color: var(--bb-color-text-inverse);
  font-size: var(--bb-text-2xl);
}

.bb-banner__lede {
  /* max-width: var(--bb-measure); */
  margin-block-start: var(--bb-space-4);
  color: var(--bb-color-text-inverse);
  font-size: var(--bb-text-sm);
  opacity: 0.95;
  text-align: justify;
}

.bb-banner__lede p + p {
  margin-block-start: var(--bb-space-3);
}

.bb-banner__meta {
  margin-block-start: var(--bb-space-4);
}

/* The byline is built for a light background, so its muted greys are lifted
   to inverse here rather than being given a second set of markup. */
.bb-banner__meta .bb-post-meta {
  margin: 0;
  color: var(--bb-color-text-inverse);
  opacity: 0.88;
}

.bb-banner__meta .bb-post-meta__cat,
.bb-banner__meta .bb-post-meta__sep {
  color: inherit;
}

.bb-banner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-2);
  margin-block-start: var(--bb-space-6);
  padding: 0;
  list-style: none;
}

.bb-chip {
  padding: var(--bb-space-1) var(--bb-space-3);
  background-color: rgb(255 255 255 / 0.1);
  border: var(--bb-border-width) solid var(--bb-color-border-inverse);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-medium);
}

/* Booking banner extras — rating, taxonomy tags and CTAs, all fed in by
   single-booking.php via bb_page_banner()'s rating/terms/actions args. Every
   other template leaves these args empty, so this styling only ever shows on
   a booking page. */
.bb-banner__rating {
  margin-block-start: var(--bb-space-4);
}

.bb-banner__rating .bb-rating {
  color: var(--bb-color-text-inverse);
}

.bb-banner__rating .bb-rating__count {
  color: var(--bb-color-text-inverse);
  opacity: 0.8;
}

.bb-banner__terms {
  margin-block-start: var(--bb-space-3);
}

/* Re-tone the term pills for the dark banner — same shape as everywhere
   else, translucent-white like the chips above instead of the brand-tinted
   look they wear on a light background. */
.bb-banner__terms .bb-termlist__item {
  background-color: rgb(255 255 255 / 0.1);
  border-color: var(--bb-color-border-inverse);
  color: var(--bb-color-text-inverse);
}

.bb-banner__terms .bb-termlist__item:hover {
  background-color: var(--bb-color-white);
  border-color: var(--bb-color-white);
  color: var(--bb-color-brand-text);
}

.bb-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-3);
  margin-block-start: var(--bb-space-6);
}

/* Filter pills — horizontally scrollable on narrow screens rather than
   wrapping into a tall block that pushes the listing off-screen. */
.bb-filters {
  position: sticky;
  inset-block-start: var(--bb-size-header-height);
  z-index: var(--bb-z-sticky);
  padding-block: var(--bb-space-4);
  background-color: var(--bb-color-surface);
  border-block-end: var(--bb-border);
}

.bb-filters__list {
  display: flex;
  gap: var(--bb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.bb-filters__list::-webkit-scrollbar { display: none; }

.bb-filters__pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--bb-size-touch-target);
  padding-inline: var(--bb-space-4);
  white-space: nowrap;
  background-color: var(--bb-color-surface-sunken);
  border: var(--bb-border);
  border-radius: var(--bb-radius-pill);
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-medium);
  text-decoration: none;
}

.bb-filters__pill:hover {
  border-color: var(--bb-color-brand-border);
  color: var(--bb-color-brand-text);
}

.bb-filters__pill.is-current {
  background-color: var(--bb-color-brand);
  border-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
}

/* Pagination */
.pagination {
  margin-block-start: var(--bb-space-12);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bb-space-2);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bb-size-touch-target);
  min-height: var(--bb-size-touch-target);
  padding-inline: var(--bb-space-3);
  background-color: var(--bb-color-surface);
  border: var(--bb-border);
  border-radius: var(--bb-radius-md);
  color: var(--bb-color-text);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-medium);
  text-decoration: none;
}

.pagination .page-numbers:hover {
  border-color: var(--bb-color-brand-border);
  color: var(--bb-color-brand-text);
}

.pagination .page-numbers.current {
  background-color: var(--bb-color-brand);
  border-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
}

.pagination .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   5c. BOOKING PAGE COMPONENTS
   -------------------------------------------------------------------------- */
/* The booking title, rating and tags sit in the shared banner (see 1415
   .bb-banner and its __rating/__terms slots below). The CTAs live only in
   the quickbar just below the banner. */

.bb-search-again {
  max-width: 32rem;
  margin-block-end: var(--bb-space-10);
}

/* Quick-facts bar — group size, price, and the two enquiry actions, sticky
   under the header once scrolled to. Same sticky recipe as .bb-filters.
   Same saffron-to-gold gradient as .bb-banner, so the bar reads as a
   continuation of it now that the banner's own CTA buttons are gone. */
.bb-quickbar {
  position: sticky;
  inset-block-start: var(--bb-size-header-height);
  z-index: var(--bb-z-sticky);
  background-color: var(--bb-color-saffron-900);
  background-image: linear-gradient(
    to right,
    var(--bb-color-saffron-900) 0%,
    var(--bb-color-saffron-700) 45%,
    var(--bb-color-gold-500) 78%,
    var(--bb-color-gold-300) 100%
  );
  border-block-end: var(--bb-border-width) solid var(--bb-color-border-inverse);
}

.bb-quickbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4) var(--bb-space-6);
  padding-block: var(--bb-space-3);
}

.bb-quickbar__facts {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: space-evenly;
  gap: var(--bb-space-6);
  overflow-x: auto;
}

.bb-quickbar__actions {
  display: flex;
  flex: none;
  gap: var(--bb-space-3);
}

/* Below 48rem the facts and actions stay as two grouped clusters (room is
   too tight for five independent columns). From 48rem up, .bb-quickbar__facts
   and .bb-quickbar__actions stop being real boxes — display: contents makes
   their children direct flex items of .bb-quickbar__inner, so every one of
   them, including the two buttons, becomes its own evenly spaced column. */
@media (min-width: 48rem) {
  .bb-quickbar__facts,
  .bb-quickbar__actions {
    display: contents;
  }
}

.bb-quickbar__item {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.125rem;
}

.bb-quickbar__label {
  color: var(--bb-color-text-inverse);
  opacity: 0.85;
  font-size: var(--bb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--bb-tracking-wide);
}

.bb-quickbar__value {
  color: var(--bb-color-text-inverse);
  font-weight: var(--bb-font-weight-bold);
  font-size: var(--bb-text-sm);
}

/* Combined "Guests" column only — min/max stay hidden until desktop has room
   for all three facts side by side without crowding the two action buttons. */
.bb-quickbar__item--split { display: none; }

@media (min-width: 48rem) {
  .bb-quickbar__item--split { display: flex; }
  .bb-quickbar__item--group { display: none; }
}

.bb-quickbar__actions .bb-btn {
  padding-inline: var(--bb-space-4);
}

/* White on the gradient bar reads clearer than brand saffron-on-saffron —
   .bb-btn--whatsapp is already white everywhere (see that rule below), this
   just brings the quickbar's own Enquire Now button in line with it. The
   compound selector (not just .bb-quickbar__enquire) is needed to outrank
   .bb-btn's own background on specificity — that rule comes later in the
   file and would otherwise win on source order alone. */
.bb-btn.bb-quickbar__enquire {
  background-color: var(--bb-color-white);
  border-color: var(--bb-color-border-strong);
  color: var(--bb-color-black);
}

.bb-btn.bb-quickbar__enquire:hover {
  background-color: var(--bb-color-grey-100);
  color: var(--bb-color-black);
}

.bb-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bb-space-2);
  margin-block-end: var(--bb-space-3);
  font-size: var(--bb-text-sm);
}

.bb-rating__stars {
  color: var(--bb-color-accent);
  font-size: var(--bb-text-md);
  letter-spacing: 0.06em;
}

.bb-rating__value { font-weight: var(--bb-font-weight-bold); }

.bb-rating__count { color: var(--bb-color-text-subtle); }

/* Editor-only marker for unset ratings — deliberately loud so it is never
   mistaken for a real rating or shipped by accident. */
.bb-rating--unset {
  padding: var(--bb-space-1) var(--bb-space-3);
  background-color: var(--bb-color-accent-subtle);
  border: var(--bb-border-width) dashed var(--bb-color-accent-text);
  border-radius: var(--bb-radius-sm);
  color: var(--bb-color-accent-text);
  font-size: var(--bb-text-xs);
}

/* Carousel — scroll-snap track; arrows are progressive enhancement. */
.bb-carousel {
  margin-block-end: var(--bb-space-10);
}

.bb-carousel__viewport {
  position: relative;
}

.bb-carousel__track {
  display: flex;
  gap: var(--bb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--bb-radius-lg);
}

.bb-carousel__track::-webkit-scrollbar { display: none; }

.bb-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  overflow: hidden;
  border-radius: var(--bb-radius-lg);
}

.bb-carousel__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .bb-carousel__image { aspect-ratio: 2 / 1; }
}

.bb-carousel__nav {
  position: absolute;
  inset-block-start: 50%;
  z-index: var(--bb-z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-size-touch-target);
  height: var(--bb-size-touch-target);
  padding: 0;
  transform: translateY(-50%);
  background-color: var(--bb-color-surface);
  border: var(--bb-border);
  border-radius: var(--bb-radius-circle);
  box-shadow: var(--bb-shadow-md);
  color: var(--bb-color-text);
  font-size: var(--bb-text-xl);
  line-height: var(--bb-leading-none);
}

.bb-carousel__nav:hover:not(:disabled) {
  background-color: var(--bb-color-brand);
  border-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
}

/* Faded rather than hidden: on a rail the arrows are the only cue that more
   content exists, so they should not vanish at either end. */
.bb-carousel__nav:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.bb-carousel__nav[hidden] { display: none; }

.bb-carousel__nav--prev { inset-inline-start: var(--bb-space-4); }
.bb-carousel__nav--next { inset-inline-end: var(--bb-space-4); }

.bb-carousel__counter {
  position: absolute;
  inset-block-end: var(--bb-space-4);
  inset-inline-end: var(--bb-space-4);
  z-index: var(--bb-z-raised);
  padding: var(--bb-space-1) var(--bb-space-3);
  background-color: rgb(20 16 14 / 0.72);
  border-radius: var(--bb-radius-pill);
  color: var(--bb-color-white);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-medium);
}

/* Highlights */
.bb-highlights {
  display: grid;
  gap: var(--bb-space-3);
  margin-block-end: var(--bb-space-8);
  padding: var(--bb-space-5);
  background-color: var(--bb-color-surface-tint);
  border: var(--bb-border);
  border-radius: var(--bb-radius-lg);
  list-style: none;
}

@media (min-width: 48rem) {
  .bb-highlights { grid-template-columns: 1fr 1fr; }
}

.bb-highlights__item {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-space-3);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-medium);
}

.bb-highlights__item::before {
  content: "";
  flex-shrink: 0;
  width: var(--bb-space-2);
  height: var(--bb-space-2);
  margin-block-start: 0.55em;
  background-color: var(--bb-color-brand);
  border-radius: var(--bb-radius-circle);
}

/* Ticked list */
.bb-ticklist {
  display: grid;
  gap: var(--bb-space-3);
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .bb-ticklist { grid-template-columns: 1fr 1fr; }
}

.bb-ticklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-space-3);
  font-size: var(--bb-text-sm);
}

.bb-ticklist__item::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--bb-color-success-600);
  font-weight: var(--bb-font-weight-bold);
}

/* Spec table */
.bb-spec {
  font-size: var(--bb-text-sm);
}

.bb-spec th,
.bb-spec td {
  padding: var(--bb-space-3) var(--bb-space-4);
  border-block-end: var(--bb-border);
  text-align: start;
  vertical-align: top;
}

.bb-spec th {
  width: 40%;
  color: var(--bb-color-text-muted);
  font-weight: var(--bb-font-weight-medium);
}

.bb-spec td { font-weight: var(--bb-font-weight-semibold); }

.bb-details,
.bb-inclusions {
  margin-block-start: var(--bb-space-12);
}

/* Booking box */
.bb-booking-box {
  overflow: hidden;
  background-color: var(--bb-color-surface-raised);
  border: var(--bb-border);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-md);
}

/* Same saffron-to-gold gradient as .bb-banner, scaled to a card-width strip
   rather than a full page — one brand gradient recipe, two sizes. */
.bb-booking-box__head {
  padding: var(--bb-space-5) var(--bb-space-6);
  background-color: var(--bb-color-saffron-900);
  background-image: linear-gradient(
    135deg,
    var(--bb-color-saffron-900) 0%,
    var(--bb-color-saffron-700) 50%,
    var(--bb-color-gold-500) 100%
  );
  color: var(--bb-color-text-inverse);
}

.bb-booking-box__heading {
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-semibold);
  letter-spacing: var(--bb-tracking-caps);
  text-transform: uppercase;
  opacity: 0.75;
}

.bb-booking-box__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--bb-space-2);
  margin-block-start: var(--bb-space-2);
}

.bb-booking-box__price-was {
  color: var(--bb-color-text-inverse);
  font-size: var(--bb-text-sm);
  text-decoration: line-through;
  opacity: 0.6;
}

.bb-booking-box__price-value {
  font-size: var(--bb-text-2xl);
  font-weight: var(--bb-font-weight-bold);
  line-height: var(--bb-leading-none);
}

.bb-booking-box__price-note {
  font-size: var(--bb-text-xs);
  opacity: 0.75;
}

.bb-booking-box__body {
  display: grid;
  gap: var(--bb-space-3);
  padding: var(--bb-space-6);
}

.bb-booking-box__note {
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

.bb-booking-box__trust {
  display: grid;
  gap: var(--bb-space-2);
  margin-block-start: var(--bb-space-2);
  padding-block-start: var(--bb-space-4);
  border-block-start: var(--bb-border);
  list-style: none;
  font-size: var(--bb-text-xs);
  color: var(--bb-color-text-muted);
}

.bb-booking-box__trust li {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-space-2);
}

.bb-booking-box__trust li::before {
  content: "✓";
  color: var(--bb-color-success-600);
  font-weight: var(--bb-font-weight-bold);
}

/* CTA band */
.bb-cta-band {
  padding-block: var(--bb-space-10);
  background-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
}

.bb-cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-6);
}

.bb-cta-band__title {
  font-size: var(--bb-text-lg);
  font-weight: var(--bb-font-weight-bold);
}

.bb-cta-band__note {
  margin-block-start: var(--bb-space-1);
  font-size: var(--bb-text-sm);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   5d. BOOKING ENQUIRY MODAL
   -------------------------------------------------------------------------- */
/* Native <dialog>, opened by the "Enquire Now" buttons in the banner and the
   quick-facts bar (data-bb-modal-open, handled in navigation.js). It renders
   in the browser's top layer, so nothing here needs a z-index token to sit
   above the rest of the page. */
.bb-modal {
  /* width: min(30rem, 100% - var(--bb-space-8)); */
  max-height: min(38rem, 100% - var(--bb-space-8));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--bb-radius-lg);
  background-color: var(--bb-color-surface);
  box-shadow: var(--bb-shadow-lg);
}

.bb-modal::backdrop {
  background-color: rgb(20 16 14 / 0.6);
}

.bb-modal__panel {
  position: relative;
  max-height: inherit;
  padding: var(--bb-space-5);
  overflow-y: auto;
}

.bb-modal__close {
  position: absolute;
  inset-block-start: var(--bb-space-4);
  inset-inline-end: var(--bb-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: var(--bb-radius-md);
  color: var(--bb-color-text-subtle);
  cursor: pointer;
}

.bb-modal__close:hover {
  background-color: var(--bb-color-brand-subtle);
  color: var(--bb-color-brand-text);
}

.bb-modal__title {
  margin-inline-end: var(--bb-space-8);
  margin-block-end: var(--bb-space-3);
  font-size: var(--bb-text-md);
  line-height: var(--bb-leading-snug);
}

/* The booking form's fields render as one .bb-form__row <p> per field, in
   registry order (name, phone, email, date, guests, message) — see
   BB_Form_Registry::all(). Everything defaults to full width so the
   honeypot, captcha and submit button are unaffected; only the phone+email
   and date+guests pairs opt into sitting side by side, which is what turns
   six stacked rows into four and keeps the form clear of a scrollbar. */
.bb-modal .bb-form {
  gap: var(--bb-space-2) var(--bb-space-3);
}

.bb-modal .bb-form__row {
  gap: 0.125rem;
}

@media (min-width: 26rem) {
  .bb-modal .bb-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bb-modal .bb-form > * {
    grid-column: 1 / -1;
  }

  .bb-modal .bb-form__row:nth-of-type(2),
  .bb-modal .bb-form__row:nth-of-type(3),
  .bb-modal .bb-form__row:nth-of-type(4),
  .bb-modal .bb-form__row:nth-of-type(5) {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   6. SKIP LINK & SCREEN-READER TEXT
   -------------------------------------------------------------------------- */
.bb-skip-link {
  position: absolute;
  inset-inline-start: var(--bb-space-4);
  inset-block-start: var(--bb-space-4);
  z-index: var(--bb-z-skip-link);
  padding: var(--bb-space-3) var(--bb-space-5);
  background-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
  border-radius: var(--bb-radius-md);
  box-shadow: var(--bb-shadow-md);
  text-decoration: none;
  font-weight: var(--bb-font-weight-semibold);
  transform: translateY(-200%);
}

.bb-skip-link:focus {
  transform: translateY(0);
  color: var(--bb-color-text-on-brand);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  clip-path: none;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   7. HEADER & NAVIGATION  (mobile-first: drawer below lg, bar at lg and up)
   -------------------------------------------------------------------------- */
.bb-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--bb-z-header);
  background-color: var(--bb-color-surface);
  border-block-end: var(--bb-border);
}

.bb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  min-height: var(--bb-size-header-height);
}

/*
 * Mobile: logo left, then search and the hamburger grouped hard right with
 * the hamburger outermost. Done with `order` rather than by reordering the
 * markup, because the source order (nav before search) is what desktop
 * depends on — changing the HTML to fix mobile previously broke the desktop
 * bar. The drawer itself is position:fixed, so its order value is irrelevant.
 */
@media (max-width: 63.99rem) {
  .bb-header__search {
    order: 1;
    margin-inline-start: auto;
  }

  .bb-nav-toggle {
    order: 2;
  }
}

.bb-brand {
  align-items: center;
  gap: var(--bb-space-3);
  text-decoration: none;
  color: var(--bb-color-text);
  font-weight: var(--bb-font-weight-bold);
  font-size: var(--bb-text-md);
  letter-spacing: var(--bb-tracking-tight);
}

.bb-brand img {
  width: auto;
  /* The logo is a detailed lockup with a wordmark — it needs to fill the bar
     to stay legible, so it only clears the row by a hair. */
  max-height: calc(var(--bb-size-header-height) - var(--bb-space-2));
}

/* Dropdown caret */
.bb-nav__caret {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  opacity: 0.7;
  transition: transform var(--bb-dur-fast) var(--bb-ease-standard);
}

/* Mobile accordion toggle. A separate button from the link it sits beside —
   nesting an interactive caret inside the link itself is invalid HTML and an
   ambiguous tap target; this keeps "go to page" and "expand submenu" as two
   unambiguous controls. */
.bb-nav__toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--bb-size-touch-target);
  height: 3.75rem;
  background: none;
  border: 0;
  border-block-end: var(--bb-border);
  color: var(--bb-color-text-muted);
}

.bb-nav__toggle[aria-expanded="true"] .bb-nav__caret {
  transform: rotate(180deg);
}

/* --- Toggle (mobile only) --- */
.bb-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-2);
  min-width: var(--bb-size-touch-target);
  min-height: var(--bb-size-touch-target);
  padding-inline: var(--bb-space-3);
  background-color: transparent;
  border: var(--bb-border);
  border-radius: var(--bb-radius-md);
  color: var(--bb-color-text);
}

.bb-nav-toggle__bars,
.bb-nav-toggle__bars::before,
.bb-nav-toggle__bars::after {
  display: block;
  width: var(--bb-size-icon-md);
  height: var(--bb-border-width-thick);
  background-color: currentColor;
  border-radius: var(--bb-radius-pill);
  transition: transform var(--bb-dur-fast) var(--bb-ease-standard),
              opacity var(--bb-dur-instant) var(--bb-ease-standard);
}

.bb-nav-toggle__bars {
  position: relative;
}

.bb-nav-toggle__bars::before,
.bb-nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.bb-nav-toggle__bars::before { inset-block-start: calc(var(--bb-space-2) * -1); }
.bb-nav-toggle__bars::after  { inset-block-start: var(--bb-space-2); }

.bb-nav-toggle[aria-expanded="true"] .bb-nav-toggle__bars {
  background-color: transparent;
}

.bb-nav-toggle[aria-expanded="true"] .bb-nav-toggle__bars::before {
  transform: translateY(var(--bb-space-2)) rotate(45deg);
}

.bb-nav-toggle[aria-expanded="true"] .bb-nav-toggle__bars::after {
  transform: translateY(calc(var(--bb-space-2) * -1)) rotate(-45deg);
}

/* --- Primary navigation --- */
.bb-nav {
  position: fixed;
  /* Baseline for no-JS: correct once the page is scrolled past the topbar,
     since the sticky header then sits flush at the viewport top and this
     token IS the header's full height. When the topbar is still visible
     (page unscrolled) the header's true bottom edge sits ~44px lower than
     this — navigation.js corrects `top` at open-time by reading the header's
     actual boundingClientRect, which this static value cannot know. */
  inset-block-start: var(--bb-size-header-height);
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: var(--bb-z-drawer);
  width: min(88vw, 22rem);
  padding: var(--bb-space-4) var(--bb-space-gutter) var(--bb-space-12);
  background-color: var(--bb-color-surface);
  border-inline-start: var(--bb-border);
  box-shadow: var(--bb-shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--bb-dur-normal) var(--bb-ease-standard),
              visibility var(--bb-dur-normal) var(--bb-ease-standard);
}

.bb-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

.bb-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--bb-size-touch-target);
  padding-block: var(--bb-space-3);
  color: var(--bb-color-text);
  text-decoration: none;
  font-weight: var(--bb-font-weight-medium);
  border-block-end: var(--bb-border);
}

/*
 * Mobile drawer layout, scoped so none of it can reach the desktop bar.
 * Everything here assumes a vertical stacked list; on desktop the same
 * markup becomes a horizontal row with hover dropdowns instead.
 */
@media (max-width: 63.99rem) {
  /* Pairs each top-level link with its accordion button on one row. Items
     without children simply have the link as their only flex child. */
  .bb-nav__list > li {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .bb-nav__list > li > a {
    flex: 1;
    min-width: 0;
  }

  /* The submenu is the third flex child of the row, so it has to be forced
     onto its own line beneath the link + button pair. */
  .bb-nav__list > li > .sub-menu {
    flex: 0 0 100%;
  }
}

.bb-nav__list a:hover,
.bb-nav__list .current-menu-item > a {
  color: var(--bb-color-brand-text);
}

.bb-nav__list .sub-menu {
  list-style: none;
  margin: 0;
  padding-inline-start: var(--bb-space-4);
}

.bb-nav__list .sub-menu a {
  font-weight: var(--bb-font-weight-regular);
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

/*
 * Mobile accordion. Collapsed by default, expanding on tap via the toggle
 * button's aria-expanded state (flipped by navigation.js). max-height is
 * animated rather than height/display: it's the one property that can go
 * from 0 to "however tall this turns out to be" without JS measuring
 * anything. The cap only needs to exceed the tallest real submenu.
 *
 * Scoped to mobile so it cannot touch the desktop hover dropdown, which
 * reveals via opacity/visibility and would be clipped to nothing by a
 * leaked max-height: 0.
 */
@media (max-width: 63.99rem) {
  .bb-nav__list > li > .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--bb-dur-normal) var(--bb-ease-standard);
  }

  /* State lives on the <li> rather than being read off the button via a
     sibling combinator: same specificity either way, but this keeps the
     open/closed state on the element that actually owns both the trigger
     and the panel, so it can't be defeated by source-order surprises. */
  .bb-nav__list > li.is-expanded > .sub-menu {
    max-height: 60rem;
  }
}

/* Backdrop behind the drawer. */
.bb-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--bb-z-overlay);
  background-color: var(--bb-color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bb-dur-normal) var(--bb-ease-standard),
              visibility var(--bb-dur-normal) var(--bb-ease-standard);
}

.bb-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Lock scroll while the drawer is open. */
body.bb-nav-open { overflow: hidden; }

/* --- Desktop navigation (lg / 64rem / 1024px and up) --- */
@media (min-width: 64rem) {
  .bb-nav-toggle,
  .bb-nav-backdrop,
  .bb-nav__toggle { display: none; }

  .bb-nav {
    position: static;
    width: auto;
    padding: 0;
    /* Consumes all the row's leftover space, pinning itself (and the search
       toggle that follows it) flush right while the logo stays flush left —
       .bb-header__inner's space-between alone would spread all three items
       evenly instead. */
    margin-inline-start: auto;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .bb-nav__list {
    display: flex;
    align-items: center;
    gap: var(--bb-space-1);
  }

  .bb-nav__list > li { position: relative; }

  .bb-nav__list > li > a {
    padding-inline: var(--bb-space-3);
    border: 0;
    font-size: var(--bb-text-sm);
  }

  /* Dropdowns */
  .bb-nav__list .sub-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: var(--bb-z-raised);
    min-width: 15rem;
    padding: var(--bb-space-2);
    background-color: var(--bb-color-surface-raised);
    border: var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--bb-space-2));
    transition: opacity var(--bb-dur-fast) var(--bb-ease-standard),
                transform var(--bb-dur-fast) var(--bb-ease-standard),
                visibility var(--bb-dur-fast) var(--bb-ease-standard);
  }

  .bb-nav__list > li:hover > .sub-menu,
  .bb-nav__list > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .bb-nav__list .sub-menu a {
    min-height: auto;
    padding: var(--bb-space-2) var(--bb-space-3);
    border: 0;
    border-radius: var(--bb-radius-md);
  }

  .bb-nav__list .sub-menu a:hover {
    background-color: var(--bb-color-brand-subtle);
  }
}

/* --------------------------------------------------------------------------
   8. TOP BAR, HEADER SEARCH, FOOTER
   -------------------------------------------------------------------------- */
.bb-topbar {
  background-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
  font-size: var(--bb-text-xs);
}

.bb-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bb-space-3) var(--bb-space-6);
  min-height: var(--bb-size-touch-target);
  padding-block: var(--bb-space-1);
}

.bb-topbar__contact,
.bb-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3) var(--bb-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-topbar a {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  color: var(--bb-color-text-on-brand);
  text-decoration: none;
}

.bb-topbar a:hover {
  color: var(--bb-color-text-on-brand);
  text-decoration: underline;
}

.bb-topbar__callback {
  font-weight: var(--bb-font-weight-semibold);
}

/* The contact strip is the first thing to drop on a phone — the same details
   sit in the footer and in the sticky booking box. The callback link keeps
   its icon but drops its label, same as it always did here.
   X and LinkedIn make way for Facebook, Instagram and YouTube, the three
   the business actually posts to.
   Beyond dropping content, .bb-topbar__inner also stops wrapping and lets
   the email address itself shrink with an ellipsis — belt and suspenders,
   so the bar never breaks to a second line even on a narrower phone than
   this was tuned against. */
@media (max-width: 47.99rem) {
  .bb-topbar__inner { flex-wrap: nowrap; }

  .bb-topbar__contact {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .bb-topbar__contact a { min-width: 0; }

  .bb-topbar__contact span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bb-topbar__contact li:nth-child(2) { display: none; }

  .bb-topbar__actions { flex: none; }

  .bb-topbar__callback span { display: none; }

  .bb-social--topbar li:has(.bb-icon--x),
  .bb-social--topbar li:has(.bb-icon--linkedin) { display: none; }
}

/* Social icon rows */
.bb-social {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-space-8);
  height: var(--bb-space-8);
  border-radius: var(--bb-radius-circle);
  text-decoration: none;
}

.bb-social--topbar .bb-social__link {
  color: var(--bb-color-text-on-brand);
}

.bb-social--topbar .bb-social__link:hover {
  background-color: rgb(255 255 255 / 0.18);
}

/* Sits in .bb-footer__bottom now — that flex container's own gap spaces it
   from the copyright line, so no margin of its own — and wraps rather than
   overflowing a narrow mobile viewport. */
.bb-social--footer {
  flex-wrap: wrap;
  justify-content: center;
}

.bb-social--footer .bb-social__link {
  width: var(--bb-space-10);
  height: var(--bb-space-10);
  background-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
}

.bb-social--footer .bb-social__link:hover {
  background-color: var(--bb-color-brand-hover);
  color: var(--bb-color-text-on-brand);
}

/* Header search */
.bb-header__search {
  display: flex;
  align-items: center;
}

.bb-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-size-touch-target);
  height: var(--bb-size-touch-target);
  padding: 0;
  background: none;
  border: 0;
  color: var(--bb-color-text);
}

.bb-search-toggle:hover { color: var(--bb-color-brand-text); }

@media (min-width: 64rem) {
  .bb-header__search {
    padding-inline-start: var(--bb-space-4);
    border-inline-start: var(--bb-border);
  }
}

.bb-header__searchpanel {
  padding-block: var(--bb-space-4);
  background-color: var(--bb-color-surface-sunken);
  border-block-start: var(--bb-border);
}

.bb-search {
  display: flex;
  gap: var(--bb-space-2);
}

.bb-search__field {
  flex: 1;
  min-height: var(--bb-size-touch-target);
  padding-inline: var(--bb-space-4);
  background-color: var(--bb-color-surface);
  border: var(--bb-border-width) solid var(--bb-color-border-strong);
  border-radius: var(--bb-radius-md);
}

/* Footer */
.bb-footer {
  /* margin-block-start: var(--bb-space-section); */
  background-color: var(--bb-color-surface);
  color: var(--bb-color-text);
  font-size: var(--bb-text-sm);
  border-block-start: var(--bb-border);
}

.bb-footer > .bb-container {
  padding-block: var(--bb-space-16);
}

.bb-footer__grid {
  display: grid;
  gap: var(--bb-space-10) var(--bb-space-6);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 64rem) {
  /* Equal tracks. Uneven fr values (brand/contact wider than the two link
     columns) looked like misaligned gutters: those wider tracks left unused
     space after their shorter content, while the fixed `gap` stayed
     constant — so the brand-to-links gap read bigger than the gap between
     the two link columns even though nothing was actually off. minmax(0, …)
     stops a long unbroken string (an email address, a phone number) from
     pushing its own track wider than its neighbours. */
  .bb-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bb-footer__brand {
  text-align: center;
}

@media (min-width: 64rem) {
  .bb-footer__brand { text-align: start; }
}

.bb-footer__logo img {
  width: auto;
  max-height: 9rem;
  /* margin-inline: auto; */
}

.bb-footer__reg {
  text-align: left;
  font-size: 0.9em;
  margin-block-start: var(--bb-space-3);
  color: var(--bb-color-brand-text);
  font-weight: var(--bb-font-weight-semibold);
}

.bb-footer__heading {
  margin-block-end: var(--bb-space-5);
  font-size: var(--bb-text-md);
  font-weight: var(--bb-font-weight-bold);
  letter-spacing: var(--bb-tracking-wide);
  text-transform: uppercase;
}

/* Short rule under each footer heading, matching the established design.
   Rendered in brand saffron rather than the previous green, which the brief
   rules out. */
.bb-footer__heading::after {
  content: "";
  display: block;
  width: var(--bb-space-8);
  height: 3px;
  margin-block-start: var(--bb-space-2);
  background-color: var(--bb-color-brand);
  border-radius: var(--bb-radius-pill);
}

.bb-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-footer__list li + li { margin-block-start: 0; }

/* Below 48rem the touch-target min-height is what was reading as a big gap
   between links, not the margin — shrunk here, then restored to the full
   WCAG 2.5.5 target size once tablet width gives the list room to breathe. */
.bb-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--bb-color-brand-text);
  font-weight: var(--bb-font-weight-medium);
  text-decoration: none;
}

@media (min-width: 48rem) {
  .bb-footer__list li + li { margin-block-start: var(--bb-space-1); }

  .bb-footer__list a { min-height: var(--bb-size-touch-target); }
}

.bb-footer__list a:hover { text-decoration: underline; }

.bb-footer__contact {
  display: grid;
  gap: var(--bb-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-space-3);
}

.bb-footer__contact .bb-icon {
  flex-shrink: 0;
  margin-block-start: 0.15em;
  color: var(--bb-color-brand);
}

.bb-footer__contact-label {
  display: block;
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-xs);
}

.bb-footer__contact a {
  color: var(--bb-color-brand-text);
  font-weight: var(--bb-font-weight-semibold);
  text-decoration: none;
}

.bb-footer__contact a:hover { text-decoration: underline; }

.bb-footer__address {
  display: block;
  font-weight: var(--bb-font-weight-semibold);
}

.bb-footer__callback {
  margin-block-end: var(--bb-space-3);
  color: var(--bb-color-brand-text);
  font-size: var(--bb-text-md);
  font-weight: var(--bb-font-weight-bold);
}

.bb-footer__bottom {
  padding-block: var(--bb-space-5);
  background-color: var(--bb-color-black);
  color: var(--bb-color-white);
  text-align: center;
  font-size: var(--bb-text-xs);
}

.bb-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bb-space-4);
}

@media (min-width: 48rem) {
  .bb-footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Floating WhatsApp button */
.bb-whatsapp-float {
  position: fixed;
  inset-block-end: var(--bb-space-5);
  inset-inline-end: var(--bb-space-5);
  z-index: var(--bb-z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-3);
  text-decoration: none;
}

.bb-whatsapp-float__label {
  display: none;
  padding: var(--bb-space-2) var(--bb-space-4);
  background-color: var(--bb-color-surface);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-md);
  color: var(--bb-color-text);
  font-size: var(--bb-text-xs);
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .bb-whatsapp-float__label { display: inline-block; }
}

.bb-whatsapp-float__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-space-16);
  height: var(--bb-space-16);
  background-color: var(--bb-color-whatsapp);
  border-radius: var(--bb-radius-circle);
  box-shadow: var(--bb-shadow-lg);
  color: var(--bb-color-white);
}

.bb-whatsapp-float:hover .bb-whatsapp-float__icon {
  background-color: var(--bb-color-whatsapp-hover);
}

/* --------------------------------------------------------------------------
   9. BUTTONS & UTILITIES
   -------------------------------------------------------------------------- */
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-2);
  min-height: var(--bb-size-touch-target);
  padding: var(--bb-space-3) var(--bb-space-6);
  border: var(--bb-border-width) solid transparent;
  border-radius: var(--bb-radius-md);
  background-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-semibold);
  line-height: var(--bb-leading-none);
  text-align: center;
  text-decoration: none;
  transition: var(--bb-transition-colors);
}

.bb-btn:hover {
  background-color: var(--bb-color-brand-hover);
  color: var(--bb-color-text-on-brand);
}

.bb-btn:active { background-color: var(--bb-color-brand-active); }

.bb-btn--secondary {
  background-color: transparent;
  border-color: var(--bb-color-border-strong);
  color: var(--bb-color-text);
}

.bb-btn--secondary:hover {
  background-color: var(--bb-color-brand-subtle);
  border-color: var(--bb-color-brand-border);
  color: var(--bb-color-brand-text);
}

/* White, not WhatsApp green — the floating launcher (.bb-whatsapp-float,
   see below) is the one place that keeps the green convention; every
   .bb-btn--whatsapp is a CTA sitting next to other buttons, where white
   keeps it on the white/black/saffron palette. Declared after .bb-btn so
   it actually wins — same specificity, later in the file. */
.bb-btn--whatsapp {
  background-color: var(--bb-color-white);
  border-color: var(--bb-color-border-strong);
  color: var(--bb-color-black);
}

.bb-btn--whatsapp:hover {
  background-color: var(--bb-color-grey-100);
  color: var(--bb-color-black);
}

.bb-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   CONTACT PAGE
   -------------------------------------------------------------------------- */

/* --- Three info cards --- */
.bb-contact-cards {
  padding-top: 50px;
  padding-block-end: var(--bb-space-section);
}

.bb-contact-cards__grid {
  display: grid;
  gap: var(--bb-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .bb-contact-cards__grid { grid-template-columns: repeat(3, 1fr); }
}

.bb-contact-card {
  padding: var(--bb-space-8) var(--bb-space-6);
  background-color: var(--bb-color-surface-sunken);
  border-radius: var(--bb-radius-lg);
  text-align: center;
}

.bb-contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-space-16);
  height: var(--bb-space-16);
  margin-block-end: var(--bb-space-4);
  background-color: var(--bb-color-brand-subtle);
  border-radius: var(--bb-radius-circle);
  color: var(--bb-color-brand);
}

.bb-contact-card__title {
  margin-block-end: var(--bb-space-3);
  font-size: var(--bb-text-md);
}

.bb-contact-card p,
.bb-contact-card a {
  color: var(--bb-color-text-muted);
  text-decoration: none;
}

.bb-contact-card p + p { margin-block-start: var(--bb-space-1); }

.bb-contact-card a:hover { color: var(--bb-color-brand-text); }

/* --- Connect + form --- */
.bb-contact-connect {
  padding-block-end: var(--bb-space-section);
}

.bb-contact-connect__grid {
  display: grid;
  gap: var(--bb-space-10);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 64rem) {
  .bb-contact-connect__grid { grid-template-columns: 22rem 1fr; }
}

.bb-contact-connect__intro .bb-sectionhead {
  text-align: start;
}

.bb-contact-connect__intro .bb-sectionhead__title {
  max-width: 16ch;
}

/* Muted, secondary treatment — deliberately quieter than the saffron social
   icons in the header/footer, since this section already leads with a bold
   heading and shouldn't compete with it. */
.bb-contact-connect .bb-social {
  margin-block-start: var(--bb-space-6);
}

.bb-contact-connect .bb-social__link {
  width: var(--bb-space-10);
  height: var(--bb-space-10);
  background-color: var(--bb-color-surface-sunken);
  color: var(--bb-color-text);
}

.bb-contact-connect .bb-social__link:hover {
  background-color: var(--bb-color-brand-subtle);
  color: var(--bb-color-brand-text);
}

.bb-contact__form {
  padding: var(--bb-space-8);
  background-color: var(--bb-color-surface);
  border: var(--bb-border);
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
}

.bb-contact__form .bb-form {
  max-width: none;
}

/* --- Full-width map --- */
.bb-contact__map-section {
  width: 100%;
  height: 26rem;
}

.bb-contact__map-section iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   ABOUT PAGE
   -------------------------------------------------------------------------- */

/* --- Who We Are / What We Do, beside the mark --- */
.bb-about__intro {
  padding-block: var(--bb-space-section);
}

.bb-about__intro-grid {
  display: grid;
  gap: var(--bb-space-10);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 64rem) {
  .bb-about__intro-grid { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.bb-about__copy > :first-child { margin-block-start: 0; }

/* The content's own H2 opens the section, so it carries the section-title
   weight rather than the inline prose weight. */
.bb-about__copy > h2:first-child {
  font-size: var(--bb-text-2xl);
}

.bb-about__copy h3 {
  font-size: var(--bb-text-lg);
}

/* "What We Do" is a plain bullet list in the content. Ticks and tighter
   leading make it read as a capability list rather than prose. */
.bb-about__copy > ul {
  padding: 0;
  list-style: none;
}

.bb-about__copy > ul > li {
  position: relative;
  padding-inline-start: var(--bb-space-6);
}

.bb-about__copy > ul > li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--bb-color-brand);
  font-weight: var(--bb-font-weight-bold);
}

.bb-about__mark {
  display: grid;
  place-items: center;
  padding: var(--bb-space-8);
  background-color: var(--bb-color-cream-050);
  border: var(--bb-border-width) solid var(--bb-color-brand-border);
  border-radius: var(--bb-radius-2xl);
}

.bb-about__mark img {
  width: 100%;
  max-width: 16rem;
  height: auto;
}

/* --- Full-width bands (services, closing) --- */
.bb-aboutband {
  position: relative;
  padding-block: var(--bb-space-section);
  background-color: var(--bb-color-saffron-900);
  background-image: linear-gradient(
    135deg,
    var(--bb-color-saffron-900) 0%,
    var(--bb-color-saffron-700) 60%,
    var(--bb-color-gold-600) 100%
  );
  color: var(--bb-color-text-inverse);
  text-align: center;
}

.bb-aboutband__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bb-aboutband__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-aboutband--media .bb-aboutband__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(20 16 14 / 0.72);
}

.bb-aboutband__inner {
  position: relative;
  z-index: var(--bb-z-raised);
}

.bb-aboutband__title {
  color: var(--bb-color-text-inverse);
  font-size: var(--bb-text-2xl);
}

.bb-aboutband__intro {
  max-width: var(--bb-measure);
  margin-block-start: var(--bb-space-3);
  margin-inline: auto;
  opacity: 0.88;
}

.bb-aboutband--closing {
  padding-block: var(--bb-space-16);
}

/* .bb-reason itself never sets text-align — on the about page it sits in a
   plain section and just inherits the page default (left). Here it's inside
   .bb-aboutband, which centers everything for its own title/intro, so the
   card text needs its own reset back to left. */
.bb-aboutband__reasons {
  text-align: left;
}

/* --- Service cards over the band --- */
.bb-servicecards {
  display: grid;
  gap: var(--bb-space-5);
  grid-template-columns: 1fr;
  margin-block-start: var(--bb-space-10);
  text-align: start;
}

/* Three per row at desktop, two at tablet — a fixed count rather than auto-fit
   so the row never reflows to four narrow cards on a wide screen. */
@media (min-width: 40rem) {
  .bb-servicecards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .bb-servicecards { grid-template-columns: repeat(3, 1fr); }
}

.bb-servicecard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bb-color-surface);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-md);
  color: var(--bb-color-text);
  transition: transform var(--bb-dur-normal) var(--bb-ease-standard),
              box-shadow var(--bb-dur-normal) var(--bb-ease-standard);
}

.bb-servicecard:hover {
  transform: translateY(-3px);
  box-shadow: var(--bb-shadow-lg);
}

.bb-servicecard__link {
  position: absolute;
  inset: 0;
  z-index: var(--bb-z-raised);
  border-radius: var(--bb-radius-lg);
}

.bb-servicecard__link:focus-visible {
  outline: var(--bb-border-width-thick) solid var(--bb-color-white);
  outline-offset: 3px;
}

.bb-servicecard__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--bb-color-skeleton);
}

.bb-servicecard__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bb-dur-slow) var(--bb-ease-standard);
}

.bb-servicecard:hover .bb-servicecard__image { transform: scale(1.05); }

.bb-servicecard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bb-space-2);
  padding: var(--bb-space-5);
}

.bb-servicecard__title {
  margin: 0;
  font-size: var(--bb-text-md);
}

.bb-servicecard__text {
  margin: 0;
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

.bb-servicecard__more {
  margin-block-start: auto;
  padding-block-start: var(--bb-space-2);
  color: var(--bb-color-brand-text);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-semibold);
}

.bb-servicecard__more::after { content: " →"; }

/* --- Click-to-play video --- */
.bb-video {
  position: relative;
  overflow: hidden;
  max-width: 56rem;
  margin: var(--bb-space-10) auto 0;
  aspect-ratio: 16 / 9;
  background-color: var(--bb-color-black);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-lg);
}

.bb-video__trigger,
.bb-video__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.bb-video__trigger {
  position: relative;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* The poster is a 16:9 crop of YouTube's 4:3 thumbnail, so it is scaled to
   cover rather than letterboxed into bars. */
.bb-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity var(--bb-dur-normal) var(--bb-ease-standard);
}

.bb-video__trigger:hover .bb-video__poster { opacity: 1; }

.bb-video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  transform: translate(-50%, -50%);
  background-color: var(--bb-color-brand);
  border-radius: var(--bb-radius-circle);
  box-shadow: var(--bb-shadow-lg);
  color: var(--bb-color-text-on-brand);
  transition: transform var(--bb-dur-normal) var(--bb-ease-standard),
              background-color var(--bb-dur-fast) var(--bb-ease-standard);
}

.bb-video__trigger:hover .bb-video__play {
  transform: translate(-50%, -50%) scale(1.08);
  background-color: var(--bb-color-brand-hover);
}

/* --- Why Travelers Choose Us --- */
.bb-reasons {
  display: grid;
  gap: var(--bb-space-5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .bb-reasons { grid-template-columns: 1fr 1fr; }
}

.bb-reason {
  position: relative;
  padding: var(--bb-space-8) var(--bb-space-6);
  background-color: var(--bb-color-brand);
  background-image: linear-gradient(
    135deg,
    var(--bb-color-saffron-500) 0%,
    var(--bb-color-saffron-400) 100%
  );
  border-radius: var(--bb-radius-lg);
  color: var(--bb-color-text-on-brand);
}

/* The icon is a watermark in the trailing corner, so the text starts at the
   same place in every card regardless of icon size. */
.bb-reason__icon {
  position: absolute;
  inset-block-start: var(--bb-space-5);
  inset-inline-end: var(--bb-space-5);
  opacity: 0.75;
}

.bb-reason__title {
  margin: 0;
  padding-inline-end: var(--bb-space-12);
  color: var(--bb-color-text-inverse);
  font-size: var(--bb-text-md);
}

.bb-reason__text {
  margin-block-start: var(--bb-space-2);
  font-size: var(--bb-text-sm);
  opacity: 0.94;
}

/* Whole-card link — only present when a caller (the homepage extras band)
   passes a URL, so the plain about-page reasons are unaffected. Same
   full-cover overlay recipe as .bb-servicecard__link. */
.bb-reason__link {
  position: absolute;
  inset: 0;
  z-index: var(--bb-z-raised);
  border-radius: var(--bb-radius-lg);
}

.bb-reason__link:focus-visible {
  outline: var(--bb-border-width-thick) solid var(--bb-color-white);
  outline-offset: 3px;
}

/* The contact cards ride up over the band above them, the way the original
   page overlapped them into the photograph. */
.bb-about__contact {
  position: relative;
  z-index: var(--bb-z-raised);
  margin-block-start: calc(var(--bb-space-16) * -1);
  padding-block-end: var(--bb-space-section);
}

/* --------------------------------------------------------------------------
   BLOG — listing, post cards, sidebar and the single article
   -------------------------------------------------------------------------- */

/* The listing hero is shared with the catalog; the eyebrow sits on the same
   saffron band, so it needs inverse colours the catalog version never asked
   for. */
/* --- Two-column shell (content + sidebar) --- */
.bb-blog-layout {
  display: grid;
  gap: var(--bb-space-10);
  grid-template-columns: 1fr;
}

/* minmax(0, …) on the content column stops a wide code block or table inside
   an article from forcing the whole grid past the viewport. */
@media (min-width: 64rem) {
  .bb-blog-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--bb-space-12);
  }
}

/* --- Post grid --- */
.bb-postgrid {
  display: grid;
  gap: var(--bb-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
  .bb-postgrid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}

/* --- Post card --- */
.bb-postcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bb-color-surface-raised);
  border: var(--bb-border);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow-xs);
  transition: box-shadow var(--bb-dur-normal) var(--bb-ease-standard),
              border-color var(--bb-dur-normal) var(--bb-ease-standard),
              transform var(--bb-dur-normal) var(--bb-ease-standard);
}

.bb-postcard:hover {
  transform: translateY(-2px);
  border-color: var(--bb-color-brand-border);
  box-shadow: var(--bb-shadow-md);
}

/* One overlay link covers the card so the whole thing is clickable, while the
   only anchor in the markup keeps the accessible name of the title. */
.bb-postcard__link {
  position: absolute;
  inset: 0;
  z-index: var(--bb-z-raised);
  border-radius: var(--bb-radius-lg);
}

.bb-postcard__link:focus-visible {
  outline: var(--bb-border-width-thick) solid var(--bb-color-focus);
  outline-offset: 2px;
}

.bb-postcard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--bb-color-skeleton);
}

.bb-postcard__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bb-dur-slow) var(--bb-ease-standard);
}

.bb-postcard:hover .bb-postcard__image { transform: scale(1.04); }

.bb-postcard__image--placeholder {
  background-image: linear-gradient(
    135deg,
    var(--bb-color-saffron-100),
    var(--bb-color-cream-100)
  );
}

.bb-postcard__badge {
  position: absolute;
  inset-block-end: var(--bb-space-3);
  inset-inline-start: var(--bb-space-3);
  padding: var(--bb-space-1) var(--bb-space-3);
  background-color: var(--bb-color-surface);
  border-radius: var(--bb-radius-pill);
  box-shadow: var(--bb-shadow-sm);
  color: var(--bb-color-brand-text);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-font-weight-semibold);
}

.bb-postcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bb-space-2);
  padding: var(--bb-space-5);
}

.bb-postcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-2);
  margin: 0;
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-xs);
}

.bb-postcard__title {
  margin: 0;
  font-size: var(--bb-text-md);
  line-height: var(--bb-leading-snug);
}

.bb-postcard__excerpt {
  margin: 0;
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

/* Pushed to the bottom so cards of differing text length still line their
   "Read article" cues up along one row. */
.bb-postcard__more {
  margin-block-start: auto;
  padding-block-start: var(--bb-space-2);
  color: var(--bb-color-brand-text);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-semibold);
}

.bb-postcard__more::after { content: " →"; }

/* --- Empty state --- */
.bb-empty {
  padding: var(--bb-space-10) var(--bb-space-6);
  background-color: var(--bb-color-surface-sunken);
  border: var(--bb-border);
  border-radius: var(--bb-radius-lg);
  text-align: center;
}

.bb-empty__title {
  margin: 0;
  font-size: var(--bb-text-lg);
  font-weight: var(--bb-font-weight-semibold);
}

.bb-empty__note {
  margin-block: var(--bb-space-2) var(--bb-space-6);
  color: var(--bb-color-text-muted);
}

.bb-empty .bb-search {
  max-width: 24rem;
  margin-inline: auto;
}

/* --- Sidebar --- */
.bb-blog-aside {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-6);
}

/* Sticks only where there is room to scroll past it — below 64rem the sidebar
   is stacked under the content, where sticking would trap it on screen. */
@media (min-width: 64rem) {
  .bb-blog-aside {
    position: sticky;
    inset-block-start: calc(var(--bb-size-header-height) + var(--bb-space-6));
  }
}

.bb-widget {
  padding: var(--bb-space-5);
  background-color: var(--bb-color-surface-raised);
  border: var(--bb-border);
  border-radius: var(--bb-radius-lg);
}

.bb-widget__title {
  margin-block-end: var(--bb-space-4);
  font-size: var(--bb-text-base);
  font-weight: var(--bb-font-weight-semibold);
}

.bb-widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* An input's default intrinsic width is wider than this column, and flex
   items refuse to shrink below it without this. */
.bb-widget .bb-search__field { min-width: 0; }

.bb-catlist li + li { margin-block-start: var(--bb-space-1); }

.bb-catlist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-3);
  min-height: var(--bb-size-touch-target);
  padding-inline: var(--bb-space-3);
  border-radius: var(--bb-radius-md);
  color: var(--bb-color-text);
  font-size: var(--bb-text-sm);
  text-decoration: none;
  transition: var(--bb-transition-colors);
}

.bb-catlist__link:hover {
  background-color: var(--bb-color-brand-subtle);
  color: var(--bb-color-brand-text);
}

.bb-catlist__count {
  min-width: 1.75rem;
  padding: var(--bb-space-px) var(--bb-space-2);
  background-color: var(--bb-color-surface-sunken);
  border-radius: var(--bb-radius-pill);
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-xs);
  text-align: center;
}

.bb-minilist__item + .bb-minilist__item {
  margin-block-start: var(--bb-space-3);
  padding-block-start: var(--bb-space-3);
  border-block-start: var(--bb-border);
}

.bb-minilist__link {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--bb-space-3);
  align-items: center;
  color: var(--bb-color-text);
  text-decoration: none;
}

.bb-minilist__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--bb-radius-md);
  background-color: var(--bb-color-skeleton);
}

.bb-minilist__thumb img,
.bb-minilist__thumb--placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-minilist__thumb--placeholder {
  background-image: linear-gradient(
    135deg,
    var(--bb-color-saffron-100),
    var(--bb-color-cream-100)
  );
}

.bb-minilist__title {
  display: block;
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-font-weight-medium);
  line-height: var(--bb-leading-snug);
}

.bb-minilist__link:hover .bb-minilist__title { color: var(--bb-color-brand-text); }

.bb-minilist__date {
  display: block;
  margin-block-start: var(--bb-space-1);
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-xs);
}

.bb-aside-cta {
  background-color: var(--bb-color-brand-subtle);
  border-color: var(--bb-color-brand-border);
}

.bb-aside-cta__title {
  margin: 0;
  font-size: var(--bb-text-base);
}

.bb-aside-cta__note {
  margin-block: var(--bb-space-2) var(--bb-space-4);
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

.bb-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bb-space-2);
  margin-block-start: var(--bb-space-4);
  color: var(--bb-color-text-muted);
  font-size: var(--bb-text-sm);
}

.bb-post-meta__sep { color: var(--bb-color-border-strong); }

.bb-post-meta__cat {
  color: var(--bb-color-brand-text);
  font-weight: var(--bb-font-weight-medium);
  text-decoration: none;
}

.bb-post-meta__cat:hover { text-decoration: underline; }

/* The article already sits in a column narrower than the full container, so
   the prose measure would double-narrow it. */
.bb-post__content {
  max-width: none;
}

.bb-post__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  margin-block-start: var(--bb-space-10);
  padding-block-start: var(--bb-space-6);
  border-block-start: var(--bb-border);
}

.bb-post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bb-space-2);
}

.bb-post-tags__label,
.bb-share__label {
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-sm);
}

.bb-post-tags .bb-termlist { margin: 0; }

.bb-share {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
}

.bb-share__list {
  display: flex;
  gap: var(--bb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-size-touch-target);
  height: var(--bb-size-touch-target);
  background-color: var(--bb-color-surface-sunken);
  border: var(--bb-border);
  border-radius: var(--bb-radius-circle);
  color: var(--bb-color-text-muted);
  transition: var(--bb-transition-colors);
}

.bb-share__link:hover {
  background-color: var(--bb-color-brand);
  border-color: var(--bb-color-brand);
  color: var(--bb-color-text-on-brand);
}

.bb-share__link--whatsapp:hover {
  background-color: var(--bb-color-whatsapp);
  border-color: var(--bb-color-whatsapp);
}

/* --- Previous / next --- */
.bb-post-nav {
  margin-block-start: var(--bb-space-10);
}

.bb-post-nav .nav-links {
  display: grid;
  gap: var(--bb-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .bb-post-nav .nav-links { grid-template-columns: 1fr 1fr; }
}

.bb-post-nav a {
  display: block;
  height: 100%;
  padding: var(--bb-space-4) var(--bb-space-5);
  background-color: var(--bb-color-surface-raised);
  border: var(--bb-border);
  border-radius: var(--bb-radius-lg);
  color: var(--bb-color-text);
  text-decoration: none;
  transition: var(--bb-transition-colors);
}

.bb-post-nav a:hover { border-color: var(--bb-color-brand-border); }

/* The next link is right-aligned so the pair reads as a spread, and stays in
   the second column even when there is no previous post. */
.bb-post-nav .nav-next {
  grid-column: -2;
  text-align: end;
}

.bb-post-nav__label {
  display: block;
  margin-block-end: var(--bb-space-1);
  color: var(--bb-color-text-subtle);
  font-size: var(--bb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--bb-tracking-caps);
}

.bb-post-nav__title {
  display: block;
  font-weight: var(--bb-font-weight-medium);
  line-height: var(--bb-leading-snug);
}

.bb-post-nav a:hover .bb-post-nav__title { color: var(--bb-color-brand-text); }

/* --- Keep reading --- */
.bb-related-posts {
  margin-block-start: var(--bb-space-12);
  padding-block-start: var(--bb-space-10);
  border-block-start: var(--bb-border);
}

/* Utilities — deliberately few. */
.bb-text-muted  { color: var(--bb-color-text-muted); }
.bb-text-center { text-align: center; }
.bb-mt-0 { margin-block-start: var(--bb-space-0); }
.bb-mb-0 { margin-block-end: var(--bb-space-0); }