/**
 * Boss & Bubs Taxi — content pages: Services, Our cars, About, Contact, the
 * three legal pages, and the homepage sections below the booking flow (P9,
 * D139; redesigned P18, D146).
 *
 * Authored mobile-first: the base rules ARE the 390 layout; min-width layers
 * add 834 and 1280 (PRODUCT.md §6, spec/11-REBUILD-BRIEF.md R8). The theme's
 * .bb-container owns the side gutter at every width, so a page here pads only
 * top and bottom.
 *
 * P18: every content page is built from the same parts as the booking page
 * (BB_Taxi_Page_Parts) - a full-bleed band with an opaque card overlapping its
 * foot, section heads in the homepage's eyebrow-and-heading voice, white cards,
 * and one harbour-teal closing band - so the seven pages read as one site.
 *
 * No literal hex, font-size, border-radius or box-shadow: every such value is
 * a var(--...) from tokens.css. Type does not rescale (D50).
 */

.bb-content-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 0 40px;
}

.bb-content-h1 {
	margin: 0 0 24px;
	font-size: var(--t-34);
	line-height: 1.2;
	color: var(--harbour);
}

.bb-content-h2 {
	margin: 0 0 16px;
	font-size: var(--t-24);
	line-height: 1.25;
	color: var(--harbour);
}

.bb-content-eyebrow {
	margin: 0 0 8px;
	font-size: var(--t-13);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* D106: --ember passes on --base; --signal (2.93:1) does not. */
	color: var(--signal-deep);
}

.bb-content-row {
	margin-bottom: 32px;
}

.bb-content-body {
	max-width: 68ch;
	font-size: var(--t-15);
	line-height: 1.7;
	color: var(--ink);
}
.bb-content-body p {
	margin: 0 0 14px;
}
.bb-content-body p:last-child {
	margin-bottom: 0;
}

.bb-content-note {
	font-size: var(--t-13);
	line-height: 1.5;
	color: var(--muted);
	font-style: italic;
}

/* ===================================================================
 * ICONS - plain inline SVG through one wrapper (BB_Taxi_Icons).
 * =================================================================== */

.bb-icon {
	display: inline-flex;
	margin-bottom: 12px;
	color: var(--harbour);
}
.bb-icon svg {
	display: block;
	width: 28px;
	height: 28px;
}
.bb-icon--section svg {
	width: 34px;
	height: 34px;
}

/* ===================================================================
 * CONTENT IMAGES - a real photo, or the same visibly-pending placeholder.
 * P18: height: auto, or WordPress's height attribute overrides the aspect
 * ratio (the P14 finding on Our cars, which the content photos shared).
 * =================================================================== */

.bb-content-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-card);
	box-shadow: var(--shadow-soft);
}
.bb-content-image--pending {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: var(--base);
}
.bb-content-image--pending .bb-pending-box {
	border-color: var(--hairline);
}
.bb-content-image--pending .bb-pending-box-text {
	color: var(--muted);
}

/* ===================================================================
 * P18 - THE PAGE HERO (BB_Taxi_Page_Parts::hero)
 * The booking page's own structure: a full-bleed band - the page's photo, or
 * the harbour gradient - and an opaque card over its foot. The photo carries
 * no text; the card does. Grid rows, not offsets: the band spans both rows
 * and the card, a later grid item, paints over it.
 * =================================================================== */

.bb-page-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 96px auto;
	/* Flush under the header: cancels .bb-content-page's top padding. */
	margin-top: -32px;
}
.bb-page-hero-band {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: start;
	width: 100vw;
	height: 200px;
	margin-inline: calc(50% - 50vw);
	/* clip, not hidden: no scroll container (10-PITFALLS.md #9). */
	overflow: clip;
	background: linear-gradient(160deg, var(--harbour) 0%, var(--harbour-deep) 100%);
}
/* Found reading the 834 render: with no photo the band was a tall empty
   gradient. A plain band is a short strip the card still overlaps. */
.bb-page-hero--plain {
	grid-template-rows: 48px auto;
}
.bb-page-hero--plain .bb-page-hero-band {
	height: 120px;
}
.bb-page-hero-img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}
.bb-page-hero-card {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	padding: 22px 20px;
	border: 1px solid var(--card-edge);
	border-radius: var(--r-card);
	background: var(--paper);
	box-shadow: var(--shadow-pop);
}
.bb-page-hero-card .bb-content-h1 {
	margin: 0 0 12px;
}
.bb-page-lede {
	max-width: 60ch;
	margin: 0;
	font-size: var(--t-16);
	line-height: 1.55;
	color: var(--slate);
}
.bb-page-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 18px;
}
.bb-page-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1.5px solid var(--harbour);
	border-radius: var(--r-md);
	background: var(--harbour-tint);
	color: var(--harbour);
	font-family: var(--font);
	font-size: var(--t-14);
	font-weight: 700;
	text-decoration: none;
}

/* ===================================================================
 * P18 - SECTIONS AND CARDS
 * =================================================================== */

.bb-page-section {
	margin-top: 48px;
}
.bb-page-section-head {
	max-width: 720px;
	margin-bottom: 20px;
}
.bb-page-section-head .bb-content-h2 {
	margin: 0;
}
.bb-page-section-lede {
	margin: 10px 0 0;
	font-size: var(--t-16);
	line-height: 1.55;
	color: var(--slate);
}

.bb-service-card {
	/* D107: an elevated card is --paper on the --base page. */
	min-width: 0;
	padding: 20px;
	border-radius: var(--r-md);
	background: var(--paper);
	box-shadow: var(--shadow-soft);
}
.bb-service-card h3 {
	margin: 0 0 8px;
	font-size: var(--t-16);
	color: var(--harbour);
}
.bb-service-card p {
	margin: 0;
	font-size: var(--t-14);
	line-height: 1.5;
	color: var(--slate);
}
.bb-service-card p.bb-card-link {
	margin-top: 12px;
}
/* P21 (D149): THE text link. Every text-style action and every link in running
   text wears one look - teal, bold, underlined - in every stylesheet that has
   one (theme.css, booking.css, content-pages.css, confirmation.css hold the
   same declarations; theme/bossandbubs/tests/text-link-test.php keeps them
   identical). Size follows the text around it. Navigation lists (the header
   nav, the drawer, the footer, the legal page pills) are not text links and
   stay without an underline; the closing band's phone keeps this look in its
   light on-teal colour. Before P21 there were seven looks: underlined or not,
   teal or grey, at weights 400, 600 and 700. */
.bb-card-link a,
a.bb-contact-line-value,
.bb-content-cta-row .bb-content-body a,
.bb-scope p a:not([class]),
.bb-scope li a:not([class]) {
	color: var(--harbour);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bb-card-link a:hover,
a.bb-contact-line-value:hover,
.bb-content-cta-row .bb-content-body a:hover,
.bb-scope p a:not([class]):hover,
.bb-scope li a:not([class]):hover {
	color: var(--signal-deep);
}

.bb-card-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.bb-home-grid-3 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
.bb-page-grid-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}


/* What the fare covers. P37 (D166): what it does not is the charges notice. */
.bb-check-list {
	display: grid;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}
.bb-check-list li {
	position: relative;
	padding-left: 28px;
	font-size: var(--t-15);
	line-height: 1.5;
	color: var(--ink);
}
.bb-check-list li::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	font-weight: 800;
	text-align: center;
	content: '\2713';
	color: var(--harbour);
}

/* P37 (D166, spec/14 #1): the one charges notice. The same rule is in
   booking.css, which the booking and confirmation pages load; this copy is
   for the Services page, which loads only this file. */
.bb-charges-notice {
	display: grid;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	background: var(--fog);
	font-size: var(--t-14);
	line-height: 1.5;
	color: var(--slate);
}
.bb-charges-notice p {
	margin: 0;
}
.bb-charges-notice a {
	color: var(--harbour);
}
.bb-page-section > .bb-content-note {
	margin: 16px 0 0;
}

/* A section of text beside its photo (About's story). */
.bb-page-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: center;
}
.bb-page-split-text {
	min-width: 0;
}

/* Sample content, said plainly (D146): sample testimonials, sample legal text. */
.bb-sample-banner {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--notice-edge);
	border-radius: var(--r-md);
	background: var(--signal-soft);
	color: var(--notice-ink);
	font-size: var(--t-14);
	line-height: 1.5;
}

/* ===================================================================
 * P18 - THE CLOSING BAND (BB_Taxi_Page_Parts::cta_band)
 * =================================================================== */

.bb-cta-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-top: 56px;
	padding: 28px 20px;
	border-radius: var(--r-card);
	background: var(--harbour);
	/* P43 (D172): a navy ring would vanish here - gold on navy. */
	--focus: var(--focus-on-dark);
}
.bb-cta-band-eyebrow {
	margin: 0 0 8px;
	font-size: var(--t-13);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--on-navy-faint);
}
.bb-cta-band-title {
	margin: 0;
	font-size: var(--t-24);
	line-height: 1.25;
	color: var(--on-navy);
}
.bb-cta-band-lede {
	max-width: 56ch;
	margin: 10px 0 0;
	font-size: var(--t-15);
	line-height: 1.55;
	color: var(--on-navy-body);
}
.bb-cta-band-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}
.bb-cta-band-phone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--on-navy-link);
	font-size: var(--t-15);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bb-cta-band-phone:hover {
	color: var(--on-navy);
}
/* P42 (D171): the primary button is navy, which would vanish on this navy
   band, so here Book now is the gold button: --on-signal text on --signal
   (7.2:1), and the gold is 6.1:1 against the band. Hover lightens to
   --signal-soft (12.8:1 against the band). */
.bb-cta-band .bb-header-cta {
	background: var(--signal);
	color: var(--on-signal);
}
.bb-cta-band .bb-header-cta:hover:not(:disabled):not([aria-disabled="true"]) {
	background: var(--signal-soft);
	color: var(--on-signal);
}

/* ===================================================================
 * ABOUT (§2)
 * =================================================================== */

.bb-testimonial-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bb-testimonial-quote {
	margin: 0;
}
.bb-testimonial-quote::before {
	content: '\201C';
	display: block;
	height: 22px;
	font-size: var(--t-34);
	font-weight: 800;
	line-height: 1;
	color: var(--signal-deep);
}
.bb-service-card .bb-testimonial-quote p {
	font-size: var(--t-16);
	line-height: 1.55;
	color: var(--ink);
}
.bb-service-card p.bb-testimonial-attribution {
	margin-top: 12px;
	font-size: var(--t-13);
	font-weight: 700;
	color: var(--muted);
}

.bb-details-card {
	max-width: 640px;
}
.bb-operator-details {
	display: grid;
	margin: 0;
}
.bb-operator-detail {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--hairline);
}
.bb-operator-detail:first-child {
	padding-top: 0;
}
.bb-operator-detail:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.bb-operator-details dt {
	font-size: var(--t-14);
	color: var(--muted);
}
.bb-operator-details dd {
	min-width: 0;
	margin: 0;
	font-size: var(--t-15);
	font-weight: 600;
	color: var(--ink);
	overflow-wrap: anywhere;
}

/* A section kept for the homepage's "Get in touch" (§1.4). */
.bb-content-cta-row {
	text-align: center;
}
.bb-content-cta-row .bb-content-body {
	margin-left: auto;
	margin-right: auto;
}
/* Found reading the 390 render: the phone and email were 18px-tall targets. */
.bb-content-cta-row .bb-content-body a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
/* Phone and email lines sit together under the heading. */
.bb-content-cta-row p.bb-content-body {
	margin-top: 0;
	margin-bottom: 4px;
}

/* ===================================================================
 * OUR CARS (§4) - P13: cards only, at every width. The capacity table is
 * gone, and with it §4's permitted duplicate DOM: there is now exactly one
 * fleet block in the markup, so nothing here may hide it at any width.
 * =================================================================== */

.bb-fleet-fitnote {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 24px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--notice-edge);
	border-radius: var(--r-card);
	background: var(--signal-soft);
	color: var(--notice-ink);
	font-size: var(--t-14);
	line-height: 1.5;
}
.bb-icon--inline {
	flex-shrink: 0;
	margin: 0;
	color: var(--notice-ink);
}
.bb-icon--inline svg {
	width: 22px;
	height: 22px;
}

.bb-fleet-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
.bb-fleet-card {
	/* D107, as .bb-service-card. The photo runs to the card's edges. */
	min-width: 0;
	/* clip, not hidden: no scroll container (10-PITFALLS.md #9). */
	overflow: clip;
	border-radius: var(--r-card);
	background: var(--paper);
	box-shadow: var(--shadow-soft);
}
/* ===================================================================
 * THE CAR PHOTO - P40 (D169, spec/14-CORRECTIONS-BRIEF.md #3): every car
 * card's, drawn by BB_Taxi_Vehicle_Card::photo() on Pick your car, the Our
 * cars page and the homepage's Our vehicles - one block, one rule set, the
 * same at every width. The photo runs full width across the top of the
 * card, 16:10, cropped to fill, with the card's own top corners; the name,
 * sub-badge, total and badges follow below it. The booking page loads this
 * file too (class-bb-taxi-plugin.php).
 * =================================================================== */
.bb-car-photo {
	min-width: 0;
	/* clip, not hidden: no scroll container (10-PITFALLS.md #9). */
	overflow: clip;
	border-radius: var(--r-card) var(--r-card) 0 0;
	background: var(--base);
}
/* P14: height: auto is what lets aspect-ratio hold. WordPress writes the
   image's width and height attributes, and the height attribute is a CSS
   height: at the 1024px "large" copy the srcset needs, it made each photo
   several hundred pixels tall. object-fit keeps an operator's own upload
   from stretching whatever shape it arrives in. */
.bb-car-photo-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	margin: 0;
	object-fit: cover;
	border-radius: var(--r-card) var(--r-card) 0 0;
}
/* A class with no photo yet shows the shared pending box (D109), holding
   the same 16:10 well, so the card does not change height when a photo lands. */
.bb-car-photo-img--pending {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: var(--base);
}
.bb-car-photo-img--pending .bb-pending-box {
	border-color: var(--hairline);
}
.bb-car-photo-img--pending .bb-pending-box-text {
	color: var(--muted);
	text-align: center;
	overflow-wrap: anywhere;
}
.bb-fleet-card-body {
	padding: 18px 20px 20px;
}
.bb-fleet-card-name {
	margin: 0 0 12px;
	font-size: var(--t-18);
	color: var(--harbour);
}
.bb-fleet-card-name + .bb-car-sub-badge {
	margin: -6px 0 12px;
}

/* ===================================================================
 * CAR BADGES - P28 (D156): every car card's, drawn by
 * BB_Taxi_Vehicle_Card on the Our cars page, the homepage and the booking
 * flow's Pick your car. The client's three, as pills with a drawn icon, so
 * they scan in one pass: "4 Pax", "2 Check-in bags", "2 Cabin bags"
 * (P40, D169: the booking form's words).
 *
 * P29 (D157): one line on a card, sized for the narrowest body a card has,
 * Pick your car at 390 (about 290px): 12px text, 14px icons, tight pill
 * padding. P40 (D169): the new words are three characters longer at worst
 * ("12 Pax · 10 Check-in bags · 10 Cabin bags"), so a line too long for its
 * card wraps between the pills rather than running past the card's edge,
 * where the card would clip it. Not measured in a browser (brief 14: no
 * renders).
 * =================================================================== */
.bb-car-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bb-car-badges li {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
	padding: 4px 8px 4px 6px;
	border-radius: var(--r-pill);
	background: var(--base);
	font-size: var(--t-12);
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	white-space: nowrap;
}
.bb-car-badge-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--harbour);
}
.bb-car-badge-icon svg {
	display: block;
	width: 14px;
	height: 14px;
}
.bb-car-sub-badge .bb-car-badge-icon svg {
	width: 16px;
	height: 16px;
}
/* A van's "Fewer passengers?" tip, after a bulb. */
.bb-car-sub-badge {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	margin: 0;
	font-size: var(--t-12);
	font-weight: 700;
	line-height: 1.4;
	color: var(--signal-deep);
}
.bb-car-sub-badge .bb-car-badge-icon {
	color: inherit;
}
.bb-fleet-card-description {
	margin: 14px 0 0;
	font-size: var(--t-14);
	line-height: 1.5;
	color: var(--slate);
}
.bb-fleet-card-cta {
	margin: 16px 0 0;
}

/* ===================================================================
 * CONTACT (§5) - stacked, form first, at 390 and 834; `1fr 380px` at 1280.
 * =================================================================== */

.bb-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin-top: 32px;
}
.bb-contact-form-card .bb-content-h2 {
	margin: 0 0 8px;
}
.bb-contact-form-card > .bb-page-section-lede {
	margin: 0 0 20px;
}
.bb-contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bb-contact-form-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
.bb-contact-form .bb-content-note {
	margin: 0;
}
.bb-contact-form .bb-header-cta {
	align-self: flex-start;
	min-width: 120px;
}
.bb-contact-panel .bb-content-h2 {
	margin: 0 0 16px;
}
.bb-contact-lines {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bb-contact-line {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}
.bb-icon--line {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: var(--r-pill);
	background: var(--harbour-tint);
}
.bb-icon--line svg {
	width: 20px;
	height: 20px;
}
.bb-contact-line-text {
	display: grid;
	min-width: 0;
}
.bb-contact-line-label {
	font-size: var(--t-12);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}
.bb-contact-line-value {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--ink);
	font-size: var(--t-16);
	font-weight: 600;
	flex-wrap: wrap;
	overflow-wrap: anywhere;
}
a.bb-contact-line-value {
	min-height: 44px;
}
.bb-contact-faq {
	margin: 0;
}
.bb-contact-faq dt {
	font-size: var(--t-16);
	font-weight: 700;
	color: var(--harbour);
}
.bb-contact-faq dd {
	margin: 8px 0 0;
	font-size: var(--t-14);
	line-height: 1.5;
	color: var(--slate);
}

/* ===================================================================
 * LEGAL (§6) - prose at a reading measure, the three pages as a small
 * navigation above the body (390, 834) or beside it (1280).
 * =================================================================== */

.bb-legal-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	margin-top: 32px;
}
.bb-legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bb-legal-nav a,
.bb-legal-nav span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	border: 1.5px solid var(--hairline);
	border-radius: var(--r-pill);
	background: var(--paper);
	color: var(--harbour);
	font-size: var(--t-14);
	font-weight: 600;
	text-decoration: none;
}
.bb-legal-nav a[aria-current="page"],
.bb-legal-nav span[aria-current="page"] {
	border-color: var(--harbour);
	background: var(--harbour);
	color: var(--on-navy);
}
.bb-legal-card {
	padding: 24px 20px;
}
/* Found reading the 390 render: the banner sat tight on the first heading. */
.bb-legal-card .bb-sample-banner {
	margin-bottom: 28px;
}
.bb-legal-body {
	max-width: 68ch;
	font-size: var(--t-15);
	line-height: 1.7;
	color: var(--ink);
}
.bb-legal-body h2 {
	margin: 28px 0 8px;
	font-size: var(--t-18);
	line-height: 1.3;
	color: var(--harbour);
}
.bb-legal-body h2:first-child {
	margin-top: 0;
}
.bb-legal-body p {
	margin: 0 0 12px;
}
.bb-legal-body .bb-content-note {
	margin: 0 0 4px;
}

/* ===================================================================
 * HOME SECTIONS — below the booking flow (§1.4). Card rows 1 / 2 / 3
 * columns; "Where we drive" stacks at 390 and sets its image beside the text
 * from 834.
 * =================================================================== */

.bb-content-row--with-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: center;
}
.bb-content-row--with-image .bb-content-image,
.bb-content-row--with-image .bb-content-image--pending {
	margin: 0;
}

/* ===================================================================
 * 834 - TABLET
 * =================================================================== */

@media (min-width: 834px) {
	.bb-content-page {
		padding: 40px 0 56px;
	}
	.bb-content-h1 {
		margin-bottom: 32px;
	}
	.bb-content-row {
		margin-bottom: 40px;
	}

	.bb-page-hero {
		grid-template-rows: 150px auto;
		margin-top: -40px;
	}
	.bb-page-hero-band {
		height: 320px;
	}
	.bb-page-hero--plain {
		grid-template-rows: 64px auto;
	}
	.bb-page-hero--plain .bb-page-hero-band {
		height: 150px;
	}
	.bb-page-hero-card {
		max-width: 720px;
		padding: 32px;
	}

	.bb-page-section {
		margin-top: 64px;
	}
	.bb-home-grid-3,
	.bb-page-grid-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	/* Found reading the 834 renders: three or five cards in two columns left
	   one alone on its row. The odd last card takes the row. */
	.bb-home-grid-3 > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	/* P38 (D167): not the Services page's eleven service cards - the last
	   keeps its card width, left-aligned. */
	.bb-home-grid-3.bb-services-cards > :last-child:nth-child(odd) {
		grid-column: auto;
	}
	.bb-page-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
	}

	.bb-cta-band {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 32px;
		margin-top: 72px;
		padding: 36px 40px;
	}
	.bb-cta-band-actions {
		justify-content: flex-end;
	}

	/* P13: two across from 834. The cards are the only fleet block now —
	   nothing hides them at any width. */
	.bb-fleet-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.bb-contact-form-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bb-contact-panel {
		padding: 28px;
	}

	.bb-legal-card {
		padding: 36px 40px;
	}

	.bb-content-row--with-image {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

/* ===================================================================
 * 1280 - DESKTOP
 * =================================================================== */

@media (min-width: 1280px) {
	.bb-content-page {
		padding: 48px 0 64px;
	}

	.bb-page-hero {
		grid-template-rows: 190px auto;
		margin-top: -48px;
	}
	.bb-page-hero-band {
		height: 400px;
	}
	.bb-page-hero--plain {
		grid-template-rows: 72px auto;
	}
	.bb-page-hero--plain .bb-page-hero-band {
		height: 170px;
	}
	.bb-page-hero-card {
		max-width: 780px;
		padding: 40px 44px;
	}

	.bb-page-section {
		margin-top: 80px;
	}
	.bb-home-grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.bb-home-grid-3 > :last-child:nth-child(odd) {
		grid-column: auto;
	}
	.bb-page-split {
		gap: 56px;
	}

	.bb-cta-band {
		margin-top: 88px;
		padding: 44px 48px;
	}

	/* Three across at desktop: five cards read as a fleet, not a list. */
	.bb-fleet-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bb-contact-grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 32px;
		margin-top: 40px;
	}

	.bb-legal-layout {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 32px;
		margin-top: 40px;
	}
	.bb-legal-nav {
		flex-direction: column;
	}
	.bb-legal-nav a,
	.bb-legal-nav span {
		border-radius: var(--r-md);
	}

	.bb-content-row--with-image {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: 32px;
	}
}

/* ===================================================================
 * P33 (D162, spec/12-CORRECTIONS-BRIEF.md #11): "Our services" photo cards
 * on the homepage, directly under the booking card. The photo is 4:3 at 390
 * and 3:2 from 834; a --harbour-deep gradient covers its lower half, full
 * strength over its bottom two thirds, and the white title sits only there
 * (measured in D162: at least 9:1 over a white photo pixel). The whole card
 * is one link. 1, 2 and 3 columns. P38 (D167): eleven cards; the last row's
 * keep their width, left-aligned - nothing spans. No motion unless the
 * visitor allows it.
 * =================================================================== */

.bb-service-photos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bb-service-photo-item {
	display: flex;
	min-width: 0;
}
.bb-service-photo {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	/* clip, not hidden: no scroll container (10-PITFALLS.md #9). */
	overflow: clip;
	border-radius: var(--r-md);
	background: var(--paper);
	box-shadow: var(--shadow-soft);
	color: var(--ink);
	text-decoration: none;
}
.bb-service-photo-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: clip;
	background: var(--harbour-deep);
}
/* Out of flow, so the frame is always its aspect ratio: found on real
   WordPress, a portrait photo in flow stretched its 3:2 frame to 2:3. The
   pending placeholder (no photo yet) fills the frame the same way. */
.bb-service-photo-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bb-service-photo-scrim {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50%;
	background: linear-gradient(to top, var(--photo-scrim-strong) 0%, var(--photo-scrim-strong) 66%, var(--photo-scrim-clear) 100%);
}
.bb-service-photo-title {
	position: absolute;
	right: 16px;
	bottom: 14px;
	left: 16px;
	margin: 0;
	color: var(--paper);
	font-size: var(--t-18);
	font-weight: 700;
	line-height: 1.25;
}
.bb-service-photo-line {
	margin: 0;
	padding: 14px 16px 16px;
	color: var(--slate);
	font-size: var(--t-14);
	line-height: 1.5;
}
a.bb-service-photo:hover .bb-service-photo-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
	a.bb-service-photo {
		transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
	}
	a.bb-service-photo:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-pop);
	}
}

@media (min-width: 834px) {
	.bb-service-photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	.bb-service-photo-media {
		aspect-ratio: 3 / 2;
	}
}

@media (min-width: 1280px) {
	.bb-service-photos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* P35 (D164, spec/13-CORRECTIONS-BRIEF.md): the homepage showcase, above the
   booking card. A heading, one line and "Book your ride", then a scroll-snap
   strip of 4:3 photo cards, each captioned in white over a dark gradient on
   its lower third: 1.15 cards across at 390 (the next one peeks), 2.5 at 834,
   4 at 1280. Previous and Next from 834 up; the strip is swiped below that. */
.bb-showcase {
	--showcase-gap: 12px;
	display: grid;
	gap: 20px;
	width: 100%;
	max-width: 1248px;
	margin: 0 auto;
	padding: 24px 16px 8px;
	box-sizing: border-box;
	font-family: var(--font);
}
.bb-showcase-intro {
	display: grid;
	justify-items: start;
	gap: 12px;
}
.bb-showcase-title {
	margin: 0;
	color: var(--harbour);
	font-size: var(--t-24);
	font-weight: 800;
	line-height: 1.2;
}
.bb-showcase-line {
	margin: 0;
	color: var(--slate);
	font-size: var(--t-16);
	line-height: 1.5;
}
.bb-showcase-carousel {
	position: relative;
	min-width: 0;
}
.bb-showcase-strip {
	display: flex;
	gap: var(--showcase-gap);
	margin: 0;
	padding: 0 0 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
	overscroll-behavior-x: contain;
}
.bb-showcase-strip::-webkit-scrollbar {
	display: none;
}
.bb-showcase-strip:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}
.bb-showcase-slide {
	/* 1.15 across: one card, one gap, and 0.15 of the next. */
	flex: 0 0 calc((100% - var(--showcase-gap)) / 1.15);
	min-width: 0;
	scroll-snap-align: start;
}
.bb-showcase-card {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: clip;
	border-radius: var(--r-md);
	background: var(--harbour-deep);
	box-shadow: var(--shadow-soft);
}
/* Out of flow, so the card is always 4:3 whatever the photo's shape. */
.bb-showcase-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bb-showcase-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	min-height: 33.4%;
	display: flex;
	align-items: flex-end;
	padding: 24px 16px 14px;
	box-sizing: border-box;
	background: linear-gradient(to top, var(--photo-scrim-strong) 0%, var(--photo-scrim-strong) 55%, var(--photo-scrim-clear) 100%);
	color: var(--paper);
	font-size: var(--t-16);
	font-weight: 700;
	line-height: 1.3;
}
.bb-showcase-nav {
	display: none;
}

@media (min-width: 834px) {
	.bb-showcase {
		--showcase-gap: 16px;
		padding: 32px 24px 8px;
	}
	/* 2.5 across: two cards, two gaps, and half the next. */
	.bb-showcase-slide {
		flex-basis: calc((100% - var(--showcase-gap) * 2) / 2.5);
	}
	.bb-showcase-title {
		font-size: var(--t-34);
	}
	.bb-showcase-nav {
		position: absolute;
		top: 50%;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--r-pill);
		background: var(--paper);
		box-shadow: var(--shadow-chip);
		color: var(--harbour);
		cursor: pointer;
		transform: translateY(-50%);
	}
	.bb-showcase-nav:focus-visible {
		outline: 2px solid var(--focus);
		outline-offset: 2px;
	}
	.bb-showcase-nav--prev {
		left: -10px;
	}
	.bb-showcase-nav--next {
		right: -10px;
	}
}

@media (min-width: 1280px) {
	.bb-showcase {
		padding: 40px 16px 8px;
	}
	/* 4 across. */
	.bb-showcase-slide {
		flex-basis: calc((100% - var(--showcase-gap) * 3) / 4);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.bb-showcase-strip {
		scroll-behavior: smooth;
	}
}

/* 1.3.0: the child seat ages under their FAQ answer. */
.bb-faq-list {
	margin: 8px 0 0;
	padding: 0 0 0 18px;
	font-size: var(--t-14);
	line-height: 1.5;
	color: var(--slate);
}
.bb-faq-list li + li {
	margin-top: 4px;
}

/* 1.3.8: (kept last, so it wins over the one-column rules above) small tablets (600-833) - two cards a row, so a service or car is
   not a full-width photo and the page is not twice as long. */
@media (min-width: 600px) and (max-width: 833px) {
	.bb-home-grid-3,
	.bb-page-grid-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bb-home-grid-3 > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.bb-home-grid-3.bb-services-cards > :last-child:nth-child(odd) {
		grid-column: auto;
	}
	/* The homepage's service photos and the car cards, the same way. */
	.bb-service-photos,
	.bb-fleet-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bb-service-photo-media {
		aspect-ratio: 3 / 2;
	}
}