/* ==========================================================================
   Design tokens
   Headline font: Montserrat (bold, geometric — HappyNest-influenced)
   Body font: Inter (clean, neutral — stands in for Avenir Next/Satoshi)
   Official Mr. Bundles brand palette: white ground, deep red as the primary
   brand color (buttons, logo, trust bar, step marks), bright teal as the
   accent (numbers, tier labels, promo band, links), warm brown as ink.
   ========================================================================== */

:root {
	--bwf-primary: #9c1b37;
	--bwf-primary-dark: #7d162c;
	--bwf-secondary: #00babb;
	--bwf-secondary-dark: #009596;
	--bwf-ink: #5a4a41;
	--bwf-body: #7a6a5e;
	--bwf-bg: #ffffff;
	--bwf-bg-alt: #f6f5f2;
	--bwf-border: #e5e0d5;
	--bwf-radius: 10px;
	--bwf-radius-sm: 6px;
	--bwf-font-head: 'DM Sans', 'Inter', sans-serif;
	--bwf-font-body: 'DM Sans', 'Inter', sans-serif;

	/* Extended ramp from the Mr. Bundles design system — same brand core
	   (red-500/teal-500/brown-700 match --bwf-primary/secondary/ink above)
	   with the fuller set of tints/shades the new homepage sections use. */
	--red-700: #701226;
	--red-600: #84162e;
	--red-100: #f4e6e9;
	--brown-900: #3f332c;
	--brown-500: #75675f;
	--brown-400: #8e837c;
	--neutral-300: #cfc8c2;
	--neutral-200: #e3dfd9;
	--neutral-100: #f7f6f2;
	--teal-600: #008f91;
	--teal-100: #e0f7f7;

	--radius-xs: 6px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-xl: 24px;
	--radius-2xl: 32px;
	--radius-pill: 999px;

	--shadow-card: 0 2px 10px rgba(63, 51, 44, .06);
	--shadow-raised: 0 8px 24px rgba(63, 51, 44, .10);

	--section-y: clamp(64px, 9vw, 128px);
	--container-max: 1280px;
	--container-pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }

/* The [hidden] attribute must always win over any element's own display
   rule (flex/inline-block/grid/etc.) — otherwise a hidden element with
   such a rule renders anyway, since author CSS at equal specificity beats
   the browser's default `[hidden] { display: none }`. Hit this bug three
   times on different classes (address-check result, buttons, the address-
   review box) before fixing it once here instead of per-selector. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--bwf-font-body);
	color: var(--bwf-body);
	background: var(--bwf-bg);
	line-height: 1.5;
}

h1, h2, h3 {
	font-family: var(--bwf-font-head);
	color: var(--bwf-ink);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

.bwf-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.bwf-center { text-align: center; }

/* Buttons */
.bwf-btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--bwf-radius-sm);
	font-family: var(--bwf-font-head);
	font-weight: 700;
	font-size: 0.95rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bwf-btn--primary {
	background: var(--bwf-primary);
	color: #fff;
}
.bwf-btn--primary:hover {
	background: var(--bwf-primary-dark);
	transform: translateY(-1px);
}

.bwf-btn--light {
	background: #fff;
	color: var(--bwf-primary);
}
.bwf-btn--light:hover { transform: translateY(-1px); }

/* ==========================================================================
   Header — solid sticky by default (every page except the homepage, which
   gets the fixed transparent-over-hero treatment below, scoped to
   body.home so pages without a video hero keep a plain, legible header).
   ========================================================================== */
.bwf-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid var(--border-light, var(--bwf-border));
}

.bwf-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 10px var(--container-pad);
	height: 78px;
	position: relative;
	z-index: 2;
}

.bwf-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	justify-self: start;
}

.bwf-navlink {
	font-size: 16px;
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--bwf-ink);
}
.bwf-navlink:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bwf-navlink:focus-visible {
	outline: 2px solid var(--bwf-primary);
	outline-offset: 2px;
}

.bwf-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	justify-self: center;
	height: 58px;
}
.bwf-logo__img {
	height: 92px;
	width: auto;
	display: block;
}

.bwf-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	justify-self: end;
}

.bwf-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bwf-primary);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	border-radius: var(--radius-md, 12px);
	height: 44px;
	padding: 0 20px;
	text-decoration: none;
	transition: background .22s cubic-bezier(.22,.61,.36,1), transform .15s ease;
}
.bwf-cta:hover { background: var(--bwf-primary-dark); }
.bwf-cta:active { background: #701226; transform: translateY(1px); }

.bwf-hamburger {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
}
.bwf-hamburger span {
	width: 22px;
	height: 2px;
	background: var(--bwf-ink);
	display: block;
	transition: background .22s cubic-bezier(.22,.61,.36,1);
}
.home .bwf-hamburger span { background: #fff; }
.home .bwf-header.is-scrolled .bwf-hamburger span { background: var(--bwf-ink); }

/* The concave arc the logo sits in — two absolutely positioned layers in
   one clipping container. Desktop-only decoration, hidden until scrolled. */
.bwf-arc {
	position: relative;
	height: 100px;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity .22s cubic-bezier(.22,.61,.36,1);
}
.bwf-arc__line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--border-light, var(--bwf-border));
}
.bwf-arc__circle {
	position: absolute;
	left: 50%;
	top: -109px;
	width: 170px;
	height: 170px;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid var(--border-light, var(--bwf-border));
	border-radius: 50%;
}

/* Full-screen mobile nav overlay */
.bwf-mobilenav {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 60;
	background: #fff;
}
.bwf-mobilenav.is-open { display: block; }
.bwf-mobilenav__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	font-size: 1.8rem;
	line-height: 1;
	background: none;
	border: 0;
	color: var(--bwf-ink);
	cursor: pointer;
}
.bwf-mobilenav nav {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
}
.bwf-mobilenav nav a {
	font-family: var(--bwf-font-head);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--bwf-ink);
	text-decoration: none;
}
.bwf-mobilenav nav a.bwf-mobilenav__cta {
	/* Higher specificity than ".bwf-mobilenav nav a" above, which was
	   overriding .bwf-cta's white text with the plain-link ink color. */
	color: #fff;
	font-family: var(--bwf-font-body);
	font-size: .95rem;
}
.bwf-mobilenav__cta {
	margin-top: 8px;
	height: 52px;
	padding: 0 32px;
	font-size: 1.05rem;
}

/* Homepage only: fixed, transparent-over-hero header that solidifies on
   scroll (toggled by main.js adding .is-scrolled to #bwf-header). */
.home .bwf-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 0;
	transition: background .22s cubic-bezier(.22,.61,.36,1);
}
.home .bwf-header.is-scrolled {
	background: #fff;
	height: 79px;
}
.home .bwf-navlink {
	color: #fff;
	text-shadow: 0 1px 2px rgba(63, 51, 44, .35);
	transition: color .22s cubic-bezier(.22,.61,.36,1), text-shadow .22s cubic-bezier(.22,.61,.36,1);
}
.home .bwf-header.is-scrolled .bwf-navlink {
	color: var(--bwf-ink);
	text-shadow: none;
}
.home .bwf-navlink:focus-visible {
	outline-color: rgba(255, 255, 255, .55);
}
.home .bwf-header.is-scrolled .bwf-navlink:focus-visible {
	outline-color: var(--bwf-primary);
}

.home .bwf-logo {
	margin-block: -21px;
}
.home .bwf-header.is-scrolled .bwf-logo {
	margin-block: -17px;
	/* Measured/tuned so the logo's bottom edge lands at y≈116px per spec
	   (the row's own explicit height means the negative margin-block
	   above doesn't itself shift a centered item — this transform is
	   what actually produces the asymmetric overflow into the arc). */
	transform: translateY(31px);
}
.home .bwf-logo__img {
	height: 120px;
	margin-top: 60px;
}
.home .bwf-header.is-scrolled .bwf-logo__img {
	height: 92px;
	/* Don't let the unscrolled-state margin-top:60px leak through here. */
	margin-top: 0;
}

/* Every other page has no hero to be transparent over, so it should just
   always look like the homepage's compact "scrolled" header state above —
   same values, since the bar's own height/centering math (78px, grid
   align-items:center) is identical regardless of position:fixed vs sticky.
   Without this, the logo (92px) overflows its 58px/78px container enough
   to poke above the header and get cut by the border-bottom line. */
body:not(.home) .bwf-logo {
	margin-block: -17px;
	transform: translateY(31px);
}
body:not(.home) .bwf-logo__img {
	margin-top: 0;
}

.home .bwf-arc {
	opacity: 0;
}
.home .bwf-header.is-scrolled .bwf-arc {
	opacity: 1;
}

/* Every other page shows the arc permanently (no scroll trigger needed —
   there's no transparent hero to scroll past). The arc's own reveal
   window is 100px tall, which combined with the 78px bar would push the
   header back out to ~178px — fine on the homepage since that header is
   position:fixed (removed from flow entirely), but on these
   position:sticky headers it would reserve that full height as real
   page space. Clipping the header itself to 118px (bar + a partial
   slice of the arc, still tall enough to clear the logo's own bottom
   edge at y≈116px so the logo itself isn't clipped) keeps the header
   compact while still showing enough of the arc for its divider line to
   route around the logo instead of cutting through it. */
body:not(.home) .bwf-arc {
	opacity: 1;
}
/* Desktop only — mobile's header is already a compact 64px bar with no
   logo/arc (.bwf-arc is display:none there via the existing breakpoint
   below), so this must not apply at mobile widths or it would force
   139px of header height there too. */
@media (min-width: 901px) {
	body:not(.home) .bwf-header {
		overflow: hidden;
		/* 78px bar + 61px — the full height of the circle's actual visible
		   curve (170px circle, top:-109px within the arc, so 170-109=61px
		   of it falls inside the arc's own reveal window). Anything less
		   clips the circle's border before its curve completes; anything
		   more just adds blank space, since the circle doesn't extend
		   past that point. Also clears the logo's own bottom edge
		   (y≈116px), so the logo itself isn't clipped either. */
		height: 139px;
		/* The arc's own line takes over the divider-line job on these
		   pages (it routes around the logo; this one would just cut
		   straight across it) — mobile keeps this border, since mobile
		   has no arc to substitute for it. */
		border-bottom: 0;
	}
}

/* Hero — full-bleed autoplay background video, Rinse-style */
.bwf-hero--video {
	position: relative;
	height: 85vh;
	min-height: 560px;
	max-height: 820px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--bwf-ink);
}

.bwf-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.bwf-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(37, 28, 22, 0.45) 0%, rgba(37, 28, 22, 0.55) 55%, rgba(37, 28, 22, 0.75) 100%);
}

.bwf-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}
.home .bwf-hero__inner {
	/* Clears the fixed transparent header so it never overlaps the
	   headline, since the header is taken out of document flow. */
	padding-top: 170px;
}

.bwf-hero__copy {
	max-width: 620px;
}
.home .bwf-hero__copy {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.home .bwf-hero__copy .bwf-booking { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* Mobile only: the logo moves out of the fixed header (hamburger/CTA-only
   there) and appears as part of the scrolling hero content instead. */
.bwf-hero__logo {
	display: none;
}

.bwf-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.bwf-hero__cta-icon {
	flex-shrink: 0;
}

/* $15-off conversion offer — deliberately its own pill (white on the dark
   hero) rather than the same red as the CTA button below it, so the two
   don't blur into one visual block. */
.bwf-hero__offer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--bwf-primary);
	font-family: var(--bwf-font-head);
	font-weight: 800;
	font-size: 0.95rem;
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	margin: 0 0 18px;
}
.bwf-hero__offer-icon {
	flex-shrink: 0;
}

.bwf-hero--video h1,
.bwf-hero--video .bwf-hero__sub {
	color: #fff;
}

.bwf-hero__sub {
	font-size: 1.15rem;
	max-width: 560px;
}
.home .bwf-hero__sub {
	/* Match the width of the headline/button column instead of being
	   artificially narrower than everything else in the hero. */
	max-width: none;
}

.bwf-hero__trust {
	font-size: 0.9rem;
	color: #fff;
	font-weight: 600;
}


.bwf-hero__video-toggle {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: rgba(37, 28, 22, 0.35);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bwf-hero__video-toggle-icon,
.bwf-hero__video-toggle-icon::before,
.bwf-hero__video-toggle-icon::after {
	display: block;
}
.bwf-hero__video-toggle-icon {
	position: relative;
	width: 10px;
	height: 12px;
}
/* Pause icon (two bars) by default; swaps to a play triangle via .is-paused */
.bwf-hero__video-toggle-icon::before,
.bwf-hero__video-toggle-icon::after {
	content: '';
	position: absolute;
	top: 0;
	width: 3px;
	height: 12px;
	background: #fff;
}
.bwf-hero__video-toggle-icon::before { left: 0; }
.bwf-hero__video-toggle-icon::after { right: 0; }
.bwf-hero__video-toggle.is-paused .bwf-hero__video-toggle-icon {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #fff;
}
.bwf-hero__video-toggle.is-paused .bwf-hero__video-toggle-icon::before,
.bwf-hero__video-toggle.is-paused .bwf-hero__video-toggle-icon::after {
	display: none;
}

@media (max-width: 640px) {
	.bwf-hero--video { height: 92vh; min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
	.bwf-hero__video { display: none; }
	.bwf-hero--video {
		background-image: var(--bwf-hero-poster-url);
		background-size: cover;
		background-position: center;
	}
	.bwf-hero__video-toggle { display: none; }

	/* State swap (transparent -> solid, cream logo -> red, etc.) stays
	   instant rather than animated. */
	.bwf-header,
	.bwf-navlink,
	.bwf-cta,
	.bwf-arc {
		transition-duration: 1ms !important;
	}
}

.bwf-booking {
	margin: 28px 0 20px;
}

/* Sections */
.bwf-section {
	padding: var(--section-y) 0;
}
.bwf-section--alt {
	background: var(--bwf-bg-alt);
}
.bwf-section__tagline {
	font-size: 1.1rem;
	max-width: 520px;
}
.bwf-section__heading {
	max-width: 680px;
	margin: 0 auto 40px;
	text-align: center;
}
.bwf-section__heading--left { text-align: left; margin: 0 0 40px; }
.bwf-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bwf-primary);
	margin-bottom: 10px;
}

/* Social proof strip */
.bwf-socialproof {
	border-bottom: 1px solid var(--bwf-border);
}
.bwf-socialproof__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 48px;
	padding: 28px 0;
}
.bwf-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--bwf-body);
}
.bwf-rating__stars { color: var(--bwf-primary); letter-spacing: 2px; }
.bwf-socialproof__line {
	font-size: 16px;
	font-weight: 600;
	color: var(--bwf-body);
}

/* Step cards (How It Works) */
.bwf-stepcards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.bwf-stepcard__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-xl);
	display: block;
	margin-bottom: 20px;
}
.bwf-stepcard__num {
	font-family: var(--bwf-font-head);
	font-weight: 700;
	font-size: .85rem;
	color: var(--bwf-primary);
	margin-bottom: 6px;
}
.bwf-stepcard h3 { margin-bottom: 6px; }
.bwf-stepcard p { margin-bottom: 0; color: var(--bwf-body); }

/* Split section (image + copy), reused for the "Your laundry. Our
   problem." section — bordered/photo pairing similar to the old
   howitworks/guarantee layouts but on the new token scale. */
.bwf-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}
.bwf-split__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-xl);
	display: block;
	background: var(--neutral-100);
}
.bwf-split__body { font-size: 17px; line-height: 27px; max-width: 520px; color: var(--bwf-body); }

.bwf-trustitems {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 32px;
	margin-top: 20px;
}
.bwf-trustitem__icon {
	display: block;
	margin-bottom: 10px;
	width: 24px;
	height: 24px;
}
.bwf-trustitem h4 {
	font-family: var(--bwf-font-head);
	color: var(--bwf-ink);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 4px;
}
.bwf-trustitem p { margin: 0; font-size: .9rem; color: var(--bwf-body); }

/* Pricing cards */
.bwf-pricing {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	max-width: 920px;
	margin: 0 auto;
}
.bwf-pricingcard {
	border: 1px solid var(--bwf-border);
	border-radius: var(--radius-lg);
	padding: 40px;
	background: #fff;
	display: flex;
	flex-direction: column;
}
.bwf-pricingcard--featured {
	background: var(--bwf-primary);
	border-color: var(--bwf-primary);
}
.bwf-pricingcard--featured h3,
.bwf-pricingcard--featured .bwf-pricingcard__price,
.bwf-pricingcard--featured .bwf-pricingcard__unit,
.bwf-pricingcard--featured .bwf-pricingcard__blurb,
.bwf-pricingcard--featured .bwf-pricingcard__features li,
.bwf-pricingcard--featured .bwf-pricingcard__meta-label,
.bwf-pricingcard--featured .bwf-pricingcard__meta-value {
	color: #fff;
}

.bwf-pricingcard__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
.bwf-pricingcard__header h3 { margin: 0; }
.bwf-pricingcard__eyebrow {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bwf-secondary);
	margin-bottom: 4px;
}
.bwf-pricingcard--featured .bwf-pricingcard__eyebrow {
	color: rgba(255, 255, 255, .85);
}

.bwf-pricingcard__badge {
	display: inline-block;
	background: var(--red-100);
	color: var(--bwf-primary);
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
}
.bwf-pricingcard--featured .bwf-pricingcard__badge {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

.bwf-pricingcard__price {
	font-family: var(--bwf-font-head);
	font-weight: 700;
	font-size: 2.4rem;
	color: var(--bwf-ink);
	margin: 0;
}
.bwf-pricingcard__unit {
	font-size: .9rem;
	font-weight: 600;
	color: var(--bwf-body);
}
.bwf-pricingcard--featured .bwf-pricingcard__unit {
	color: rgba(255, 255, 255, .75);
}
.bwf-pricingcard__delivery {
	font-size: .95rem;
	font-weight: 600;
	color: var(--bwf-ink);
	margin: 8px 0 0;
}
.bwf-pricingcard__delivery-was {
	text-decoration: line-through;
	color: var(--bwf-body);
	font-weight: 500;
	margin-right: 6px;
}
.bwf-pricingcard__delivery-now {
	color: var(--bwf-secondary);
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.bwf-pricingcard--featured .bwf-pricingcard__delivery {
	color: #fff;
}
.bwf-pricingcard--featured .bwf-pricingcard__delivery-was {
	color: rgba(255, 255, 255, .6);
}
.bwf-pricingcard--featured .bwf-pricingcard__delivery-now {
	color: #fff;
}
.bwf-pricingcard__blurb {
	color: var(--bwf-body);
	margin: 10px 0 20px;
}
.bwf-pricingcard--featured .bwf-pricingcard__blurb {
	color: rgba(255, 255, 255, .85);
}
.bwf-pricingcard__frequency {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--bwf-primary);
	background: var(--red-100);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	margin: -10px 0 20px;
}
.bwf-pricingcard--featured .bwf-pricingcard__frequency {
	color: #fff;
	background: rgba(255, 255, 255, .18);
}
.bwf-pricingcard__features {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 12px;
	flex-grow: 1;
}
.bwf-pricingcard__features li {
	padding-left: 26px;
	position: relative;
	font-size: .92rem;
	color: var(--bwf-ink);
}
.bwf-pricingcard__features li::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 3px;
	width: 6px;
	height: 10px;
	border-right: 2px solid var(--bwf-secondary);
	border-bottom: 2px solid var(--bwf-secondary);
	transform: rotate(45deg);
}
.bwf-pricingcard--featured .bwf-pricingcard__features li::before {
	border-color: #fff;
}
.bwf-pricingcard__meta {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--bwf-border);
	padding-top: 16px;
	margin-bottom: 24px;
}
.bwf-pricingcard--featured .bwf-pricingcard__meta {
	border-top-color: rgba(255, 255, 255, .25);
}
.bwf-pricingcard__meta-label {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bwf-body);
	margin-bottom: 4px;
}
.bwf-pricingcard--featured .bwf-pricingcard__meta-label {
	color: rgba(255, 255, 255, .7);
}
.bwf-pricingcard__meta-value {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--bwf-ink);
}
.bwf-pricingcard__cta {
	background: var(--bwf-primary);
	color: #fff;
	text-align: center;
}
.bwf-pricingcard__cta:hover { background: var(--bwf-primary-dark); }
.bwf-pricingcard--featured .bwf-pricingcard__cta {
	background: #fff;
	color: var(--bwf-primary);
}
.bwf-pricingcard--featured .bwf-pricingcard__cta:hover {
	background: var(--red-100, #f4e6e9);
}

.bwf-pricing__footnote {
	font-size: 17px;
	line-height: 27px;
	color: var(--bwf-body);
	text-align: center;
	max-width: 680px;
	margin: 32px auto 0;
}

.bwf-pricing__addon {
	font-size: 15px;
	line-height: 24px;
	color: var(--bwf-primary);
	font-weight: 600;
	text-align: center;
	max-width: 680px;
	margin: 12px auto 0;
}

/* Testimonial cards */
.bwf-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin-top: 40px;
	text-align: left;
}
.bwf-testimonial {
	margin: 0;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--bwf-border);
	border-radius: var(--radius-lg);
}
.bwf-testimonial .bwf-rating__stars {
	display: block;
	font-size: 1.1rem;
	letter-spacing: 3px;
	margin-bottom: 16px;
}
.bwf-testimonial__headline {
	font-family: var(--bwf-font-head);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--bwf-ink);
	line-height: 1.25;
	margin: 0 0 12px;
}
.bwf-testimonial__body {
	color: var(--bwf-body);
	margin: 0;
}
.bwf-testimonial cite {
	font-style: normal;
	display: block;
	margin-top: 24px;
}
.bwf-testimonial__name {
	display: block;
	font-weight: 700;
	color: var(--bwf-ink);
}
.bwf-testimonial__location {
	display: block;
	font-size: .9rem;
	color: var(--bwf-body);
}

.bwf-testimonials__cta {
	margin-top: 40px;
	color: var(--bwf-body);
}
.bwf-testimonials__cta a {
	color: var(--bwf-primary);
	font-weight: 700;
	text-decoration: underline;
}

/* Service area CTA band */
.bwf-areacta {
	background: var(--bwf-primary);
	color: #fff;
}
.bwf-areacta .bwf-eyebrow { color: rgba(255,255,255,.85); }
.bwf-areacta h2 { color: #fff; }
.bwf-areacta p { color: rgba(255,255,255,.92); }
.bwf-areacta__towns { font-weight: 600; color: #fff !important; }
.bwf-areacta__map {
	margin-top: 20px;
	max-width: 300px;
}
.bwf-areacta__map img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-raised);
}

.bwf-addresscheck h3 { color: #fff; margin-bottom: 16px; }
.bwf-addresscheck__reassurance { font-size: .85rem; color: rgba(255,255,255,.8); margin: 14px 0 0; }
.bwf-addresscheck__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.bwf-addresscheck__field {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	align-items: center;
}
.bwf-addresscheck__icon {
	position: absolute;
	left: 18px;
	width: 18px;
	height: 18px;
	opacity: .5;
	pointer-events: none;
}
.bwf-addresscheck__row input {
	width: 100%;
	padding: 13px 16px 13px 46px;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font-family: var(--bwf-font-body);
	font-size: 1rem;
	color: var(--bwf-ink);
}
.bwf-addresscheck__row input:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.bwf-addresscheck__row .bwf-btn {
	border-radius: var(--radius-md);
}
/* Readable regardless of the red band behind it — a white card instead of
   small colored text sitting directly on the background. */
.bwf-addresscheck__result {
	margin: 14px 0 0;
	padding: 16px 18px;
	border-radius: var(--bwf-radius-sm);
	background: #fff;
}
.bwf-addresscheck__result-text {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--bwf-ink);
}
.bwf-addresscheck__result--success .bwf-addresscheck__result-text {
	margin-bottom: 12px;
	color: var(--bwf-secondary-dark);
}
.bwf-addresscheck__result-link {
	display: inline-block;
}

/* FAQ accordion */
.bwf-faq {
	max-width: 880px;
	margin: 0 auto;
}
.bwf-faq__more {
	max-width: 880px;
	margin: 20px auto 0;
	font-size: .95rem;
	font-weight: 600;
}
.bwf-faq__more a {
	color: var(--bwf-primary);
	text-decoration: underline;
}
.bwf-faq__item {
	border-bottom: 1px solid var(--bwf-border);
}
.bwf-faq__question {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 20px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--bwf-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bwf-ink);
	cursor: pointer;
}
.bwf-faq__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
}
.bwf-faq__icon::before,
.bwf-faq__icon::after {
	content: '';
	position: absolute;
	background: var(--bwf-primary);
	border-radius: 2px;
}
.bwf-faq__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.bwf-faq__icon::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); transition: transform .2s ease; }
.bwf-faq__item.is-open .bwf-faq__icon::after { transform: translateX(-50%) scaleY(0); }
.bwf-faq__answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height .3s cubic-bezier(.22,.61,.36,1);
}
.bwf-faq__answer p {
	margin: 0 0 20px;
	color: var(--bwf-body);
	max-width: 680px;
}
.bwf-faq__item.is-open .bwf-faq__answer {
	max-height: 300px;
}

/* Footer */
.bwf-footer {
	background: var(--bwf-ink);
	color: #cfd8db;
	padding-top: 56px;
}
.bwf-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 40px;
}
.bwf-footer__col:first-child {
	text-align: center;
}
.bwf-logo__img--footer {
	height: 144px;
	margin-bottom: 12px;
	/* .bwf-logo__img sets display:block, so the ancestor's text-align:center
	   (which only affects inline content) has no effect here — needs its
	   own centering. */
	margin-left: auto;
	margin-right: auto;
}
.bwf-footer__phone {
	margin-top: 6px;
	font-weight: 700;
}
.bwf-footer__phone a {
	color: #fff;
}
.bwf-footer__phone a:hover {
	color: var(--bwf-secondary);
}
.bwf-footer h4 {
	color: #fff;
	font-family: var(--bwf-font-head);
	font-size: 0.9rem;
	margin-bottom: 14px;
}
.bwf-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 0.9rem;
}
.bwf-footer__towns {
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px;
}
.bwf-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px 24px;
	font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 900px) {
	.bwf-stepcards { grid-template-columns: 1fr; gap: 40px; }
	.bwf-split { grid-template-columns: 1fr; }
	.bwf-split__img { order: -1; max-width: 420px; margin: 0 auto; aspect-ratio: 4 / 3; }
	.bwf-pricing { grid-template-columns: 1fr; }
	.bwf-footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	/* Header: nav + "Sign in" move into a full-screen overlay behind the
	   hamburger; the arc, negative-margin logo trick, and the logo itself
	   are all desktop-only details — the bar becomes a plain 64px row
	   (transparent/white on scroll, same as desktop) with just the
	   hamburger (left) and CTA (right). */
	.bwf-nav,
	.bwf-actions__signin,
	.bwf-logo {
		display: none;
	}
	.bwf-hamburger { display: flex; }
	.bwf-arc { display: none; }

	.bwf-bar {
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.home .bwf-header.is-scrolled {
		height: 63px;
	}

	.home .bwf-navlink {
		color: var(--bwf-ink);
		text-shadow: none;
	}
	.home .bwf-hero__inner { padding-top: 90px; }
	.bwf-hero__logo {
		display: block;
		height: 165px;
		width: auto;
		margin: -60px auto 40px;
	}

	.bwf-trustitems { grid-template-columns: 1fr; }
	.bwf-footer__inner { grid-template-columns: 1fr; }
}

/* Standard content pages (legal, etc.) */
.bwf-page__inner {
	max-width: 720px;
}
.bwf-page__content h2 {
	font-size: 1.3rem;
	margin-top: 2em;
}
.bwf-page__content h3 {
	font-size: 1.05rem;
	margin-top: 1.5em;
}
.bwf-page__content p,
.bwf-page__content li {
	font-size: 1rem;
	line-height: 1.7;
}
.bwf-page__content ul,
.bwf-page__content ol {
	padding-left: 1.4em;
	margin: 0 0 1em;
}
.bwf-page__content li {
	margin-bottom: 0.5em;
}
.bwf-page__content a {
	color: var(--bwf-secondary);
	text-decoration: underline;
}
.bwf-page__content strong {
	color: var(--bwf-ink);
}

/* Booking page */
.bwf-book__inner {
	max-width: 900px;
}
.bwf-book__sub {
	font-size: 1.05rem;
	max-width: 560px;
	margin-bottom: 28px;
}
.bwf-book__routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}
.bwf-book__route {
	border: 1px solid var(--bwf-border);
	border-radius: var(--bwf-radius);
	padding: 24px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.bwf-book__route h3 { margin: 0; }
.bwf-book__route-schedule {
	font-size: 0.9rem;
	color: var(--bwf-body);
	margin: 0;
}
.bwf-book__route .bwf-btn { margin-top: auto; }

/* ==========================================================================
   Mobile sticky booking CTA — hidden entirely at desktop widths; on mobile
   it's always present in the DOM (so no layout-shift on first appearance)
   but slid fully off-screen via transform until JS reveals it after the
   visitor scrolls. Space for it is reserved with body padding rather than
   toggled, so nothing ever jumps when it shows/hides.
   ========================================================================== */
.bwf-stickycta {
	display: none;
}
@media (max-width: 899px) {
	body.bwf-has-stickycta {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}
	.bwf-stickycta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 35;
		background: var(--bwf-primary);
		color: #fff;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
		transform: translateY(100%);
		transition: transform .25s ease;
	}
	.bwf-stickycta.is-visible {
		transform: translateY(0);
	}
	.bwf-stickycta__text {
		font-size: 0.85rem;
		font-weight: 700;
	}
	.bwf-stickycta__btn {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 20px;
		border-radius: var(--radius-pill);
		background: #fff;
		color: var(--bwf-primary);
		font-family: var(--bwf-font-head);
		font-weight: 800;
		font-size: 0.9rem;
	}
	.bwf-stickycta:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}
}