/*
 * BeTended — v2 Design System
 *
 * Fresh rebuild — CAR-126.
 * Do NOT patch this file for one-off fixes; create component overrides
 * in betended-overrides.css if you need to target a specific page.
 *
 * Load order (functions.php):
 *   kadence-parent-style → betended-child-style → betended-overrides → betended-v2
 *
 * Architecture:
 *   1.  Design Tokens        — :root custom properties (v2 palette)
 *   2.  Global Reset         — box model, body baseline
 *   3.  Typography           — editorial type scale
 *   4.  Link Styles          — underline system
 *   5.  Button System        — pill CTAs, ghost, outline
 *   6.  Card System          — 12px radius, shadow, hover
 *   7.  Layout Utilities     — containers, section padding, grid helpers
 *   8.  Section Components   — hero, trust bar, feature grid, CTA band
 *   9.  Blog Components      — post card, badge, meta
 *   10. Single Post          — article header, prose, sidebar
 *   11. Page Templates       — about, resources, newsletter, contact
 *   12. Header & Nav
 *   13. Footer
 *   14. Sidebar
 *   15. Newsletter / Opt-in
 *   16. Animations
 *   17. Responsive
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* ── Core palette ───────────────────────────────────────────────────── */
	--bt2-teal:          #3b8d99;
	--bt2-teal-dark:     #2d7280;
	--bt2-teal-light:    #5caab8;
	--bt2-teal-bg:       #edf7f8;   /* very light teal wash */
	--bt2-teal-muted:    #cce8ed;
	--bt2-teal-tint:     #F0F9FA;   /* fluid: teal tint section bg */

	--bt2-coral:         #e8886f;
	--bt2-coral-dark:    #d4694c;
	--bt2-coral-light:   #f0a28c;
	--bt2-coral-bg:      #fef2ef;   /* blush tint for section bgs */

	--bt2-cream:         #faf8f5;   /* primary page background */
	--bt2-cream-mid:     #f2ede7;   /* slightly darker cream for alternating sections */
	--bt2-cream-dark:    #e8e1d8;

	--bt2-sage:          #CEDEE1;   /* fluid: sage section bg */
	--bt2-peach:         #FFF1EC;   /* fluid: peach/newsletter section bg */
	--bt2-navy:          #18242D;   /* fluid: footer bg */

	/* ── Neutrals ───────────────────────────────────────────────────────── */
	--bt2-text:          #1a1a1a;
	--bt2-text-sub:      #4a4a4a;
	--bt2-text-muted:    #7a7a7a;
	--bt2-white:         #ffffff;
	--bt2-border:        #e5e0d8;
	--bt2-border-light:  #f0ece5;

	/* ── Deprecated aliases — keeps old templates rendering ─────────────── */
	--bt-primary:        var(--bt2-teal);
	--bt-primary-light:  var(--bt2-teal-light);
	--bt-accent:         var(--bt2-coral);
	--bt-accent-dark:    var(--bt2-coral-dark);
	--bt-bg-light:       var(--bt2-cream);
	--bt-text-dark:      var(--bt2-text);
	--bt-text-muted:     var(--bt2-text-muted);
	--bt-border:         var(--bt2-border);
	--bt-sage:           var(--bt2-teal-muted);
	--bt-white:          var(--bt2-white);
	--bt-primary-bg:     var(--bt2-teal-bg);
	--bt-accent-bg:      var(--bt2-coral-bg);

	/* ── Typography ─────────────────────────────────────────────────────── */
	--bt2-font-heading:  'DM Serif Display', Georgia, serif;
	--bt2-font-body:     'Source Sans 3', system-ui, -apple-system, sans-serif;

	/* ── Type scale — editorial, not conservative ───────────────────────── */
	--bt2-h1:     clamp(52px, 7vw, 96px);
	--bt2-h2:     clamp(36px, 5vw, 56px);
	--bt2-h3:     clamp(24px, 3vw, 32px);
	--bt2-h4:     clamp(18px, 2vw, 22px);
	--bt2-body:   17px;
	--bt2-small:  14px;
	--bt2-eyebrow: 13px;

	/* ── Spacing ─────────────────────────────────────────────────────────── */
	--bt2-section-py:      96px;
	--bt2-section-py-sm:   64px;
	--bt2-container:       1200px;
	--bt2-container-narrow: 760px;
	--bt2-container-wide:  1400px;

	/* ── Border radius — fluid design system ────────────────────────────── */
	--bt2-radius-pill:          50px;  /* buttons, tags, filter pills */
	--bt2-radius-card:          16px;  /* blog/resource cards (updated from 12px) */
	--bt2-radius-card-feature:  24px;  /* pillar/feature cards */
	--bt2-radius-sm:            6px;
	--bt2-radius-lg:            20px;
	--bt2-radius-circle:        50%;   /* avatars, sage circle */

	/* Deprecated aliases */
	--bt-radius:     var(--bt2-radius-sm);
	--bt-radius-lg:  var(--bt2-radius-card);

	/* ── Shadows ─────────────────────────────────────────────────────────── */
	--bt2-shadow-card:       0 2px 12px rgba(0, 0, 0, 0.08);
	--bt2-shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.14);
	--bt2-shadow-sm:         0 1px 4px  rgba(0, 0, 0, 0.06);

	/* Deprecated aliases */
	--bt-shadow:       var(--bt2-shadow-card);
	--bt-shadow-hover: var(--bt2-shadow-card-hover);

	/* ── Transitions ─────────────────────────────────────────────────────── */
	--bt2-transition: 0.2s ease;
}

/* ==========================================================================
   2. GLOBAL RESET
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--bt2-cream);
	color: var(--bt2-text);
	font-family: var(--bt2-font-body);
	font-size: var(--bt2-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

/* ==========================================================================
   3. TYPOGRAPHY — Editorial Type Scale
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bt2-font-heading);
	color: var(--bt2-text);
	line-height: 1.1;
	font-weight: 400;        /* DM Serif Display is a display face — let it breathe */
	letter-spacing: -0.02em;
	margin-top: 0;
}

h1 { font-size: var(--bt2-h1); }
h2 { font-size: var(--bt2-h2); }
h3 { font-size: var(--bt2-h3); }
h4 { font-size: var(--bt2-h4); }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
	margin-top: 0;
	margin-bottom: 1.25em;
}

/* Eyebrow / overline — used above section headings */
.bt2-eyebrow {
	display: block;
	font-family: var(--bt2-font-body);
	font-size: var(--bt2-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bt2-teal);
	margin-bottom: 12px;
}

/* Section heading + subhead pair */
.bt2-section-heading {
	font-size: var(--bt2-h2);
	margin-bottom: 16px;
}

.bt2-section-subhead {
	font-family: var(--bt2-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--bt2-text-sub);
	max-width: 580px;
	margin-bottom: 0;
}

/* ==========================================================================
   4. LINK STYLES
   ========================================================================== */

a {
	color: var(--bt2-teal);
	text-decoration: none;
	transition: color var(--bt2-transition);
}

a:hover,
a:focus {
	color: var(--bt2-teal-dark);
	text-decoration: underline;
}

/* Strip underline from UI elements */
.bt2-btn,
.bt2-badge,
.bt2-tag,
.bt2-card,
.bt2-nav-link,
.betended-post-card,
.betended-related-card,
.betended-post-nav__link,
.betended-header__site-name,
.betended-footer__links a,
.betended-filter-pill,
.betended-post-card__badge,
.betended-tag,
.betended-pagination .page-numbers {
	text-decoration: none;
}

/* ==========================================================================
   5. BUTTON SYSTEM — Pill CTAs
   ========================================================================== */

.bt2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--bt2-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 16px 36px;
	border: 2px solid transparent;
	border-radius: var(--bt2-radius-pill);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--bt2-transition),
	            border-color     var(--bt2-transition),
	            color            var(--bt2-transition),
	            transform        var(--bt2-transition),
	            box-shadow       var(--bt2-transition);
	background-image: none;
}

.bt2-btn:hover,
.bt2-btn:focus {
	transform: translateY(-2px);
	text-decoration: none;
}

.bt2-btn:active {
	transform: translateY(0);
}

/* ── Coral (primary CTA) ──────────────────────────────────────────────────── */
.bt2-btn--coral {
	background-color: var(--bt2-coral);
	color: var(--bt2-white);
	border-color: var(--bt2-coral);
}
.bt2-btn--coral:hover,
.bt2-btn--coral:focus {
	background-color: var(--bt2-coral-dark);
	border-color: var(--bt2-coral-dark);
	color: var(--bt2-white);
	box-shadow: 0 6px 20px rgba(232, 136, 111, 0.35);
}

/* ── Teal ─────────────────────────────────────────────────────────────────── */
.bt2-btn--teal {
	background-color: var(--bt2-teal);
	color: var(--bt2-white);
	border-color: var(--bt2-teal);
}
.bt2-btn--teal:hover,
.bt2-btn--teal:focus {
	background-color: var(--bt2-teal-dark);
	border-color: var(--bt2-teal-dark);
	color: var(--bt2-white);
	box-shadow: 0 6px 20px rgba(59, 141, 153, 0.35);
}

/* ── Ghost / outline ──────────────────────────────────────────────────────── */
.bt2-btn--ghost {
	background-color: transparent;
	color: var(--bt2-teal);
	border-color: var(--bt2-teal);
}
.bt2-btn--ghost:hover,
.bt2-btn--ghost:focus {
	background-color: var(--bt2-teal);
	color: var(--bt2-white);
}

.bt2-btn--ghost-white {
	background-color: transparent;
	color: var(--bt2-white);
	border-color: var(--bt2-white);
}
.bt2-btn--ghost-white:hover,
.bt2-btn--ghost-white:focus {
	background-color: var(--bt2-white);
	color: var(--bt2-teal);
}

/* ── Sizes ────────────────────────────────────────────────────────────────── */
.bt2-btn--lg {
	font-size: 18px;
	padding: 20px 48px;
}
.bt2-btn--sm {
	font-size: 14px;
	padding: 10px 24px;
}

/* ==========================================================================
   6. CARD SYSTEM
   ========================================================================== */

.bt2-feature-card {
	border-radius: var(--bt2-radius-card-feature);
}

.bt2-card {
	background: var(--bt2-white);
	border-radius: var(--bt2-radius-card);
	border: 1px solid var(--bt2-border);
	box-shadow: var(--bt2-shadow-card);
	overflow: hidden;
	transition: box-shadow var(--bt2-transition), transform var(--bt2-transition);
}

.bt2-card:hover {
	box-shadow: var(--bt2-shadow-card-hover);
	transform: translateY(-3px);
}

/* Card on cream bg — no shadow, rely on border */
.bt2-card--flat {
	box-shadow: none;
	border: 1px solid var(--bt2-border);
}
.bt2-card--flat:hover {
	box-shadow: var(--bt2-shadow-card);
	transform: translateY(-2px);
}

/* Feature card — icon + heading + text */
.bt2-feature-card {
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bt2-feature-card__icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.bt2-feature-card__heading {
	font-size: 22px;
	margin-bottom: 8px;
	color: var(--bt2-text);
}

.bt2-feature-card__body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--bt2-text-sub);
	margin: 0;
}

/* ==========================================================================
   7. LAYOUT UTILITIES
   ========================================================================== */

/* Containers */
.bt2-container {
	max-width: var(--bt2-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.bt2-container--narrow {
	max-width: var(--bt2-container-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.bt2-container--wide {
	max-width: var(--bt2-container-wide);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Section padding */
.bt2-section {
	padding-top: var(--bt2-section-py);
	padding-bottom: var(--bt2-section-py);
}

.bt2-section--sm {
	padding-top: var(--bt2-section-py-sm);
	padding-bottom: var(--bt2-section-py-sm);
}

/* Section background variants */
.bt2-bg-cream      { background-color: var(--bt2-cream); }
.bt2-bg-cream-mid  { background-color: var(--bt2-cream-mid); }
.bt2-bg-teal       { background-color: var(--bt2-teal); }
.bt2-bg-teal-light { background-color: var(--bt2-teal-bg); }
.bt2-bg-coral      { background-color: var(--bt2-coral); }
.bt2-bg-coral-light{ background-color: var(--bt2-coral-bg); }
.bt2-bg-white      { background-color: var(--bt2-white); }

/* Grid helpers */
.bt2-grid {
	display: grid;
	gap: 28px;
}

.bt2-grid--2col { grid-template-columns: repeat(2, 1fr); }
.bt2-grid--3col { grid-template-columns: repeat(3, 1fr); }
.bt2-grid--4col { grid-template-columns: repeat(4, 1fr); }

/* Two-column asymmetric split — 60/40 like upwards.com hero */
.bt2-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.bt2-split--60-40 {
	grid-template-columns: 3fr 2fr;
}

.bt2-split--40-60 {
	grid-template-columns: 2fr 3fr;
}

/* Section header block — eyebrow + heading + subhead */
.bt2-section-header {
	margin-bottom: 56px;
}

.bt2-section-header--center {
	text-align: center;
}

.bt2-section-header--center .bt2-section-subhead {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   8. SECTION COMPONENTS — Structural building blocks
   ========================================================================== */

/* ── 8a. Page hero — asymmetric editorial ─────────────────────────────────── */

.bt2-hero {
	padding-top: 120px;
	padding-bottom: 80px;
	background-color: var(--bt2-cream);
	overflow: hidden;
	min-height: 80vh;
	display: flex;
	align-items: center;
}

.bt2-hero__inner {
	display: grid;
	grid-template-columns: 58fr 42fr;
	gap: 80px;
	align-items: center;
}

.bt2-hero__text {
	max-width: 620px;
}

.bt2-hero__eyebrow {
	display: block;
	font-family: var(--bt2-font-body);
	font-size: var(--bt2-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bt2-teal);
	margin-bottom: 20px;
}

.bt2-hero__heading {
	font-size: var(--bt2-h1);
	line-height: 1.0;
	letter-spacing: -0.03em;
	color: var(--bt2-text);
	margin-bottom: 24px;
}

.bt2-hero__subhead {
	font-size: 20px;
	line-height: 1.6;
	color: var(--bt2-text-sub);
	margin-bottom: 40px;
	max-width: 500px;
}

.bt2-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.bt2-hero__social-proof {
	margin-top: 32px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--bt2-small);
	color: var(--bt2-text-muted);
}

.bt2-hero__social-proof-avatars {
	display: flex;
}

.bt2-hero__social-proof-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--bt2-white);
	object-fit: cover;
	margin-left: -8px;
}

.bt2-hero__social-proof-avatar:first-child {
	margin-left: 0;
}

.bt2-hero__image-wrap {
	position: relative;
}

.bt2-hero__image {
	border-radius: var(--bt2-radius-circle);
	width: 100%;
	height: auto;
	display: block;
}

/* Placeholder shown when hero photo is not yet uploaded */
.bt2-hero__image-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--bt2-radius-circle);
	background: var(--bt2-sage);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
}

/* Decorative blob behind image — removed for fluid design */
.bt2-hero__image-wrap::before {
	display: none;
}

/* ── 8b. Trust logo bar ───────────────────────────────────────────────────── */

.bt2-trust-bar {
	background-color: var(--bt2-cream-mid);
	padding: 40px 0;
	border-top: 1px solid var(--bt2-border);
	border-bottom: 1px solid var(--bt2-border);
}

.bt2-trust-bar__label {
	font-size: var(--bt2-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bt2-text-muted);
	text-align: center;
	margin-bottom: 24px;
}

.bt2-trust-bar__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
}

.bt2-trust-bar__logo {
	height: 32px;
	width: auto;
	opacity: 0.5;
	filter: grayscale(100%);
	transition: opacity var(--bt2-transition), filter var(--bt2-transition);
}

.bt2-trust-bar__logo:hover {
	opacity: 0.8;
	filter: grayscale(0%);
}

/* ── 8c. Feature / pillar grid ────────────────────────────────────────────── */

.bt2-features {
	padding-top: var(--bt2-section-py);
	padding-bottom: var(--bt2-section-py);
}

.bt2-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 56px;
}

/* ── 8d. Stats / highlight band (alternating bg) ──────────────────────────── */

.bt2-stats-band {
	padding: 80px 0;
}

.bt2-stats-band__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	text-align: center;
}

.bt2-stat__number {
	font-family: var(--bt2-font-heading);
	font-size: clamp(48px, 5vw, 72px);
	line-height: 1;
	color: var(--bt2-teal);
	margin-bottom: 8px;
}

.bt2-stat__label {
	font-size: 16px;
	color: var(--bt2-text-sub);
	line-height: 1.4;
}

/* ── 8e. CTA band — full-width, coral or teal bg ─────────────────────────── */

.bt2-cta-band {
	padding: 96px 0;
	text-align: center;
}

.bt2-cta-band--coral {
	background-color: var(--bt2-coral);
}

.bt2-cta-band--teal {
	background-color: var(--bt2-teal);
}

.bt2-cta-band--cream {
	background-color: var(--bt2-cream-mid);
}

.bt2-cta-band__heading {
	font-size: var(--bt2-h2);
	color: var(--bt2-white);
	margin-bottom: 16px;
}

.bt2-cta-band--cream .bt2-cta-band__heading {
	color: var(--bt2-text);
}

.bt2-cta-band__sub {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 40px;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.bt2-cta-band--cream .bt2-cta-band__sub {
	color: var(--bt2-text-sub);
}

.bt2-cta-band__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* ── 8f. Testimonial / pull quote ─────────────────────────────────────────── */

.bt2-quote-band {
	background-color: var(--bt2-teal-bg);
	padding: 80px 0;
	text-align: center;
}

.bt2-quote {
	max-width: 760px;
	margin: 0 auto;
}

.bt2-quote__mark {
	font-family: var(--bt2-font-heading);
	font-size: 80px;
	line-height: 0.5;
	color: var(--bt2-teal);
	margin-bottom: 24px;
	display: block;
}

.bt2-quote__text {
	font-family: var(--bt2-font-heading);
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.4;
	color: var(--bt2-text);
	margin-bottom: 24px;
}

.bt2-quote__attribution {
	font-size: 15px;
	color: var(--bt2-text-muted);
}

/* ==========================================================================
   9. BLOG COMPONENTS
   ========================================================================== */

/* ── Post card ─────────────────────────────────────────────────────────────── */

.bt2-post-card {
	display: flex;
	flex-direction: column;
	background: var(--bt2-white);
	border-radius: var(--bt2-radius-card);
	border: 1px solid var(--bt2-border);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--bt2-transition), transform var(--bt2-transition);
}

.bt2-post-card:hover {
	box-shadow: var(--bt2-shadow-card-hover);
	transform: translateY(-4px);
	text-decoration: none;
	color: inherit;
}

.bt2-post-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bt2-post-card__image-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--bt2-teal-bg);
}

.bt2-post-card__body {
	padding: 28px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.bt2-post-card__badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bt2-teal);
	background-color: var(--bt2-teal-bg);
	padding: 4px 12px;
	border-radius: var(--bt2-radius-pill);
	margin-bottom: 14px;
	text-decoration: none;
}

.bt2-post-card__badge:hover {
	background-color: var(--bt2-teal-muted);
	text-decoration: none;
	color: var(--bt2-teal-dark);
}

.bt2-post-card__title {
	font-family: var(--bt2-font-heading);
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.25;
	color: var(--bt2-text);
	margin-bottom: 12px;
}

.bt2-post-card__excerpt {
	font-size: 15px;
	line-height: 1.65;
	color: var(--bt2-text-sub);
	flex: 1;
	margin-bottom: 20px;
}

.bt2-post-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--bt2-text-muted);
	margin-top: auto;
}

.bt2-post-card__meta-sep {
	opacity: 0.4;
}

/* ── Blog index grid ───────────────────────────────────────────────────────── */

.bt2-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

/* Featured post — full width in grid */
.bt2-blog-grid .bt2-post-card--featured {
	grid-column: 1 / -1;
	flex-direction: row;
}

.bt2-blog-grid .bt2-post-card--featured .bt2-post-card__image {
	width: 50%;
	flex-shrink: 0;
	aspect-ratio: auto;
	height: 100%;
}

/* ── Category filter pills ─────────────────────────────────────────────────── */

.bt2-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 48px;
}

.bt2-filter-pill {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--bt2-text-sub);
	background-color: var(--bt2-white);
	border: 1.5px solid var(--bt2-border);
	padding: 8px 20px;
	border-radius: var(--bt2-radius-pill);
	cursor: pointer;
	transition: background-color var(--bt2-transition),
	            border-color     var(--bt2-transition),
	            color            var(--bt2-transition);
	text-decoration: none;
}

.bt2-filter-pill:hover,
.bt2-filter-pill.is-active {
	background-color: var(--bt2-teal);
	border-color: var(--bt2-teal);
	color: var(--bt2-white);
	text-decoration: none;
}

/* ── Pagination ─────────────────────────────────────────────────────────────── */

.bt2-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 64px;
}

.bt2-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 600;
	color: var(--bt2-text-sub);
	border: 1.5px solid var(--bt2-border);
	background: var(--bt2-white);
	transition: background-color var(--bt2-transition), color var(--bt2-transition);
	text-decoration: none;
}

.bt2-pagination .page-numbers.current,
.bt2-pagination .page-numbers:hover {
	background-color: var(--bt2-teal);
	border-color: var(--bt2-teal);
	color: var(--bt2-white);
	text-decoration: none;
}

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

/* ==========================================================================
   10. SINGLE POST — Article layout
   ========================================================================== */

/* Post header */
.bt2-post-header {
	padding: 72px 0 56px;
	background-color: var(--bt2-cream);
}

.bt2-post-header__badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bt2-teal);
	background-color: var(--bt2-teal-bg);
	padding: 4px 12px;
	border-radius: var(--bt2-radius-pill);
	margin-bottom: 20px;
	text-decoration: none;
}

.bt2-post-header__title {
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--bt2-text);
	margin-bottom: 24px;
}

.bt2-post-header__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--bt2-text-muted);
}

.bt2-post-header__meta-sep {
	opacity: 0.4;
}

/* Post layout: content + sidebar */
.bt2-post-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	align-items: flex-start;
	padding: 64px 0 80px;
}

/* Article prose */
.bt2-prose {
	max-width: 100%;
	font-size: 18px;
	line-height: 1.75;
	color: var(--bt2-text);
}

.bt2-prose h2 {
	font-size: clamp(24px, 3vw, 34px);
	margin-top: 2.5em;
	margin-bottom: 0.75em;
}

.bt2-prose h3 {
	font-size: clamp(20px, 2.5vw, 26px);
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.bt2-prose p {
	margin-bottom: 1.5em;
}

.bt2-prose ul,
.bt2-prose ol {
	padding-left: 1.5em;
	margin-bottom: 1.5em;
}

.bt2-prose li {
	margin-bottom: 0.5em;
}

.bt2-prose blockquote {
	margin: 2em 0;
	padding: 24px 32px;
	background-color: var(--bt2-teal-bg);
	border-left: 4px solid var(--bt2-teal);
	border-radius: 0 var(--bt2-radius-sm) var(--bt2-radius-sm) 0;
	font-style: italic;
}

.bt2-prose img {
	border-radius: var(--bt2-radius-card);
	margin: 2em auto;
}

.bt2-prose a {
	color: var(--bt2-teal);
	text-decoration: underline;
}

.bt2-prose a:hover {
	color: var(--bt2-teal-dark);
}

/* Post footer: tags, nav, related */
.bt2-post-footer {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--bt2-border);
}

.bt2-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 48px;
}

.bt2-post-tags__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--bt2-text-muted);
	align-self: center;
}

.bt2-tag {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--bt2-text-sub);
	background-color: var(--bt2-cream-mid);
	border: 1px solid var(--bt2-border);
	padding: 4px 14px;
	border-radius: var(--bt2-radius-pill);
	text-decoration: none;
	transition: background-color var(--bt2-transition), color var(--bt2-transition);
}

.bt2-tag:hover {
	background-color: var(--bt2-teal-bg);
	color: var(--bt2-teal);
	text-decoration: none;
}

/* Prev/next navigation */
.bt2-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 64px;
}

.bt2-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	border: 1px solid var(--bt2-border);
	border-radius: var(--bt2-radius-card);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--bt2-transition), box-shadow var(--bt2-transition);
}

.bt2-post-nav__link:hover {
	border-color: var(--bt2-teal);
	box-shadow: var(--bt2-shadow-card);
	text-decoration: none;
	color: inherit;
}

.bt2-post-nav__link--next {
	text-align: right;
}

.bt2-post-nav__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bt2-text-muted);
}

.bt2-post-nav__title {
	font-family: var(--bt2-font-heading);
	font-size: 17px;
	color: var(--bt2-text);
	line-height: 1.3;
}

/* Related posts */
.bt2-related__heading {
	font-size: clamp(22px, 2.5vw, 28px);
	margin-bottom: 28px;
}

.bt2-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Sidebar */
.bt2-sidebar {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.bt2-sidebar-widget {
	background: var(--bt2-white);
	border: 1px solid var(--bt2-border);
	border-radius: var(--bt2-radius-card);
	padding: 28px;
}

.bt2-sidebar-widget__title {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bt2-text-muted);
	margin-bottom: 20px;
}

/* ==========================================================================
   10b. ARTICLE TEMPLATE — Phase 5c (single.php rebuild)
   ========================================================================== */

/* ── Article header: teal background ──────────────────────────────────────── */

.bt2-article-header {
	background-color: var(--bt2-teal);
	padding: 80px 0 64px;
}

.bt2-article-header__badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bt2-teal);
	background-color: rgba(255, 255, 255, 0.92);
	padding: 4px 14px;
	border-radius: var(--bt2-radius-pill);
	margin-bottom: 24px;
	text-decoration: none;
	transition: background-color var(--bt2-transition);
}

.bt2-article-header__badge:hover {
	background-color: var(--bt2-white);
	text-decoration: none;
}

.bt2-article-header__title {
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--bt2-white);
	margin-bottom: 24px;
	max-width: 720px;
}

.bt2-article-header__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
}

/* ── Wave modifiers for article template transitions ─────────────────────── */

.bt2-wave-divider--teal-to-cream {
	background-color: var(--bt2-teal);
}

.bt2-wave-divider--sage-to-teal {
	background-color: var(--bt2-sage);
}

/* ── Article featured image (cream section) ─────────────────────────────── */

.bt2-article-image {
	background-color: var(--bt2-cream);
	padding: 48px 0 0;
}

.bt2-article-image__img {
	width: 100%;
	height: auto;
	border-radius: var(--bt2-radius-card);
	display: block;
}

/* ── Article body: content + sidebar grid ───────────────────────────────── */

.bt2-article-body {
	background-color: var(--bt2-cream);
	padding: 64px 0 80px;
}

.bt2-article-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	align-items: flex-start;
}

/* ── Article sidebar ─────────────────────────────────────────────────────── */

.bt2-article-sidebar {
	display: flex;
	flex-direction: column;
	gap: 32px;
	position: sticky;
	top: 32px;
}

/* Sidebar newsletter widget */
.bt2-sidebar-nl {
	background: var(--bt2-teal);
	border-radius: var(--bt2-radius-card);
	padding: 32px;
}

.bt2-sidebar-nl__eyebrow {
	font-size: var(--bt2-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 10px;
}

.bt2-sidebar-nl__heading {
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.3;
	color: var(--bt2-white);
	margin-bottom: 10px;
}

.bt2-sidebar-nl__body {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 20px;
}

.bt2-sidebar-nl__row {
	margin-bottom: 10px;
}

.bt2-sidebar-nl__input {
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--bt2-radius-pill);
	background: rgba(255, 255, 255, 0.12);
	color: var(--bt2-white);
	outline: none;
	transition: border-color var(--bt2-transition), background-color var(--bt2-transition);
}

.bt2-sidebar-nl__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.bt2-sidebar-nl__input:focus {
	border-color: var(--bt2-white);
	background: rgba(255, 255, 255, 0.18);
}

.bt2-sidebar-nl__msg {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	min-height: 18px;
	margin-top: 10px;
}

/* Sidebar popular guides */
.bt2-sidebar-popular {
	background: var(--bt2-white);
	border: 1px solid var(--bt2-border);
	border-radius: var(--bt2-radius-card);
	padding: 28px;
}

.bt2-sidebar-popular__heading {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bt2-text-muted);
	margin-bottom: 20px;
}

.bt2-mini-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--bt2-border-light);
	text-decoration: none;
	color: inherit;
	transition: color var(--bt2-transition);
}

.bt2-mini-card:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bt2-mini-card:hover {
	color: var(--bt2-teal);
	text-decoration: none;
}

.bt2-mini-card__image {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--bt2-radius-sm);
	flex-shrink: 0;
}

.bt2-mini-card__placeholder {
	width: 64px;
	height: 64px;
	background-color: var(--bt2-teal-bg);
	border-radius: var(--bt2-radius-sm);
	flex-shrink: 0;
}

.bt2-mini-card__body {
	flex: 1;
	min-width: 0;
}

.bt2-mini-card__title {
	display: block;
	font-family: var(--bt2-font-heading);
	font-size: 15px;
	line-height: 1.35;
	color: var(--bt2-text);
	margin-bottom: 4px;
	transition: color var(--bt2-transition);
}

.bt2-mini-card:hover .bt2-mini-card__title {
	color: var(--bt2-teal);
}

.bt2-mini-card__meta {
	display: block;
	font-size: 12px;
	color: var(--bt2-text-muted);
}

/* ── Related articles: sage background, 3-col open grid ─────────────────── */

.bt2-related-section {
	background-color: var(--bt2-sage);
	padding: 80px 0;
}

.bt2-related-section__heading {
	font-size: clamp(24px, 3vw, 36px);
	margin-bottom: 40px;
	text-align: center;
	color: var(--bt2-text);
}

/* "Read guide →" CTA in related cards */
.bt2-post-card__link {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--bt2-teal);
	text-decoration: none;
	margin-top: auto;
	padding-top: 14px;
	transition: color var(--bt2-transition);
}

.bt2-post-card:hover .bt2-post-card__link {
	color: var(--bt2-teal-dark);
}

/* ==========================================================================
   11. PAGE TEMPLATES
   ========================================================================== */

/* ── Interior page hero (non-homepage) ─────────────────────────────────────── */

.bt2-page-hero {
	background-color: var(--bt2-teal-bg);
	padding: 80px 0 72px;
	text-align: center;
}

.bt2-page-hero__eyebrow {
	display: block;
	font-size: var(--bt2-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bt2-teal);
	margin-bottom: 16px;
}

.bt2-page-hero__title {
	font-size: var(--bt2-h2);
	line-height: 1.1;
	color: var(--bt2-text);
	margin-bottom: 16px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.bt2-page-hero__subtitle {
	font-size: 18px;
	line-height: 1.6;
	color: var(--bt2-text-sub);
	max-width: 560px;
	margin: 0 auto;
}

/* ── Resources page ────────────────────────────────────────────────────────── */

.bt2-resources-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.bt2-resource-card {
	display: flex;
	flex-direction: column;
}

.bt2-resource-card__body {
	flex: 1;
	padding: 28px 28px 16px;
}

.bt2-resource-card__icon {
	width: 32px;
	height: 32px;
	margin-bottom: 14px;
	color: var(--bt2-teal);
}

.bt2-resource-card__title {
	font-size: 18px;
	margin-bottom: 8px;
}

.bt2-resource-card__desc {
	font-size: 15px;
	line-height: 1.65;
	color: var(--bt2-text-sub);
	margin: 0;
}

.bt2-resource-card__link {
	display: block;
	padding: 16px 28px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bt2-teal);
	border-top: 1px solid var(--bt2-border);
	text-decoration: none;
	transition: color var(--bt2-transition), background-color var(--bt2-transition);
}

.bt2-resource-card__link:hover {
	color: var(--bt2-teal-dark);
	background-color: var(--bt2-teal-bg);
	text-decoration: none;
}

.bt2-resources-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 40px;
}

.bt2-resources-section-header__icon {
	color: var(--bt2-teal);
	margin-bottom: 16px;
}

/* ── About page ────────────────────────────────────────────────────────────── */

.bt2-about-story {
	padding: var(--bt2-section-py) 0;
}

.bt2-founder-block {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: flex-start;
}

.bt2-founder-block__image {
	border-radius: var(--bt2-radius-lg);
	width: 100%;
	height: auto;
}

.bt2-founder-block__name {
	font-size: var(--bt2-h3);
	margin-bottom: 4px;
}

.bt2-founder-block__role {
	font-size: 16px;
	color: var(--bt2-teal);
	font-weight: 600;
	margin-bottom: 24px;
}

/* ── Newsletter landing page ───────────────────────────────────────────────── */

.bt2-nl-hero {
	padding: 96px 0;
	background-color: var(--bt2-teal-bg);
	text-align: center;
}

.bt2-nl-hero__heading {
	font-size: var(--bt2-h2);
	margin-bottom: 16px;
}

.bt2-nl-hero__sub {
	font-size: 18px;
	color: var(--bt2-text-sub);
	max-width: 560px;
	margin: 0 auto 40px;
}

/* Newsletter inline form */
.bt2-nl-form {
	display: flex;
	gap: 12px;
	max-width: 480px;
	margin: 0 auto;
}

.bt2-nl-form__input {
	flex: 1;
	padding: 14px 20px;
	font-size: 16px;
	border: 1.5px solid var(--bt2-border);
	border-radius: var(--bt2-radius-pill);
	background: var(--bt2-white);
	color: var(--bt2-text);
	outline: none;
	transition: border-color var(--bt2-transition), box-shadow var(--bt2-transition);
}

.bt2-nl-form__input:focus {
	border-color: var(--bt2-teal);
	box-shadow: 0 0 0 3px rgba(59, 141, 153, 0.2);
}

.bt2-nl-form__input::placeholder {
	color: var(--bt2-text-muted);
}

.bt2-nl-form__submit {
	flex-shrink: 0;
}

.bt2-nl-form__disclaimer {
	font-size: 13px;
	color: var(--bt2-text-muted);
	margin-top: 12px;
	text-align: center;
}

.bt2-nl-form__msg {
	font-size: 14px;
	margin-top: 8px;
	min-height: 20px;
	text-align: center;
}

.bt2-nl-form__msg--success { color: #2d8a5c; }
.bt2-nl-form__msg--error   { color: #c0392b; }

/* Benefits list */
.bt2-nl-benefits {
	padding: var(--bt2-section-py) 0;
}

.bt2-nl-benefits__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 600px;
	margin: 0 auto;
}

.bt2-nl-benefits__item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.bt2-nl-benefits__icon {
	font-size: 28px;
	flex-shrink: 0;
	margin-top: 2px;
}

.bt2-nl-benefits__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--bt2-text);
	margin-bottom: 4px;
}

.bt2-nl-benefits__desc {
	font-size: 16px;
	color: var(--bt2-text-sub);
	margin: 0;
}

/* ── Contact page ─────────────────────────────────────────────────────────── */

.bt2-contact-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 64px;
	align-items: flex-start;
	padding: var(--bt2-section-py) 0;
}

.bt2-contact-form__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
}

.bt2-contact-form__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--bt2-text);
}

.bt2-contact-form__input,
.bt2-contact-form__textarea,
.bt2-contact-form__select {
	padding: 12px 16px;
	font-size: 16px;
	font-family: var(--bt2-font-body);
	border: 1.5px solid var(--bt2-border);
	border-radius: var(--bt2-radius-sm);
	background: var(--bt2-white);
	color: var(--bt2-text);
	outline: none;
	width: 100%;
	transition: border-color var(--bt2-transition), box-shadow var(--bt2-transition);
}

.bt2-contact-form__input:focus,
.bt2-contact-form__textarea:focus,
.bt2-contact-form__select:focus {
	border-color: var(--bt2-teal);
	box-shadow: 0 0 0 3px rgba(59, 141, 153, 0.18);
}

.bt2-contact-form__textarea {
	resize: vertical;
	min-height: 140px;
}

.bt2-contact-info-card {
	border-left: 4px solid var(--bt2-teal);
	padding: 28px;
	background: var(--bt2-teal-bg);
	border-radius: 0 var(--bt2-radius-card) var(--bt2-radius-card) 0;
	margin-bottom: 24px;
}

/* ==========================================================================
   12. HEADER & NAVIGATION
   ========================================================================== */

.bt2-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(250, 248, 245, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--bt2-border);
	transition: box-shadow var(--bt2-transition);
}

.bt2-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.bt2-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	gap: 32px;
}

.bt2-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.bt2-header__site-name {
	font-family: var(--bt2-font-heading);
	font-size: 22px;
	color: var(--bt2-text);
	line-height: 1;
}

.bt2-header__site-name:hover {
	color: var(--bt2-teal);
	text-decoration: none;
}

.bt2-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.bt2-nav__item {
	position: relative;
}

.bt2-nav__link {
	display: inline-block;
	padding: 8px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bt2-text-sub);
	border-radius: var(--bt2-radius-sm);
	text-decoration: none;
	transition: color var(--bt2-transition), background-color var(--bt2-transition);
}

.bt2-nav__link:hover,
.bt2-nav__link.is-active {
	color: var(--bt2-teal);
	background-color: var(--bt2-teal-bg);
	text-decoration: none;
}

.bt2-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Mobile toggle */
.bt2-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 4px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.bt2-footer {
	background-color: var(--bt2-text);
	color: rgba(255, 255, 255, 0.7);
}

.bt2-footer__main {
	padding: 72px 0 48px;
}

.bt2-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
}

.bt2-footer__brand-name {
	font-family: var(--bt2-font-heading);
	font-size: 22px;
	color: var(--bt2-white);
	margin-bottom: 12px;
}

.bt2-footer__brand-desc {
	font-size: 15px;
	line-height: 1.65;
	margin-bottom: 24px;
	color: rgba(255,255,255,0.6);
}

.bt2-footer__col-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.4);
	margin-bottom: 16px;
}

.bt2-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bt2-footer__link {
	font-size: 14px;
	color: rgba(255,255,255,0.65);
	text-decoration: none;
	transition: color var(--bt2-transition);
}

.bt2-footer__link:hover {
	color: var(--bt2-white);
	text-decoration: none;
}

.bt2-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.bt2-footer__copyright {
	font-size: 13px;
	color: rgba(255,255,255,0.4);
}

.bt2-footer__bottom-links {
	display: flex;
	gap: 20px;
}

.bt2-footer__bottom-link {
	font-size: 13px;
	color: rgba(255,255,255,0.4);
	text-decoration: none;
	transition: color var(--bt2-transition);
}

.bt2-footer__bottom-link:hover {
	color: rgba(255,255,255,0.8);
	text-decoration: none;
}

/* ==========================================================================
   14. NEWSLETTER INLINE CTA (sitewide footer band)
   ========================================================================== */

.bt2-nl-cta {
	background-color: var(--bt2-teal);
	padding: 72px 0;
}

.bt2-nl-cta__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.bt2-nl-cta__eyebrow {
	font-size: var(--bt2-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	margin-bottom: 12px;
}

.bt2-nl-cta__heading {
	font-size: clamp(28px, 3vw, 40px);
	color: var(--bt2-white);
	margin-bottom: 8px;
}

.bt2-nl-cta__sub {
	font-size: 16px;
	color: rgba(255,255,255,0.75);
}

.bt2-nl-cta__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bt2-nl-cta__input-row {
	display: flex;
	gap: 10px;
}

.bt2-nl-cta__input {
	flex: 1;
	padding: 14px 20px;
	font-size: 16px;
	border: 1.5px solid rgba(255,255,255,0.3);
	border-radius: var(--bt2-radius-pill);
	background: rgba(255,255,255,0.12);
	color: var(--bt2-white);
	outline: none;
	transition: border-color var(--bt2-transition), background-color var(--bt2-transition);
}

.bt2-nl-cta__input::placeholder {
	color: rgba(255,255,255,0.5);
}

.bt2-nl-cta__input:focus {
	border-color: var(--bt2-white);
	background: rgba(255,255,255,0.18);
}

.bt2-nl-cta__disclaimer {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
}

.bt2-nl-cta__msg {
	font-size: 14px;
	min-height: 20px;
	color: rgba(255,255,255,0.85);
}

/* ==========================================================================
   15. ANIMATIONS
   ========================================================================== */

@keyframes bt2FadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Progressive enhancement: only hide elements when JS is confirmed active.
   Without .js on <html>, elements are always visible (no JS = no hiding).
   CAR-148 fix: was using bare .bt2-animate which caused permanent opacity:0
   when the IntersectionObserver script wasn't loaded (caching, wrong selector). */
.js .bt2-animate {
	opacity: 0;
	transform: translateY(20px);
}

.js .bt2-animate.is-visible {
	animation: bt2FadeUp 0.5s ease forwards;
}

/* Stagger siblings */
.js .bt2-animate:nth-child(1) { animation-delay: 0ms; }
.js .bt2-animate:nth-child(2) { animation-delay: 80ms; }
.js .bt2-animate:nth-child(3) { animation-delay: 160ms; }
.js .bt2-animate:nth-child(4) { animation-delay: 240ms; }
.js .bt2-animate:nth-child(5) { animation-delay: 320ms; }
.js .bt2-animate:nth-child(6) { animation-delay: 400ms; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.js .bt2-animate,
	.js .bt2-animate.is-visible {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* ── Tablet (≤1024px) ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {

	:root {
		--bt2-section-py: 72px;
	}

	.bt2-hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.bt2-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.bt2-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bt2-blog-grid .bt2-post-card--featured {
		grid-column: 1 / -1;
	}

	.bt2-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bt2-post-layout {
		grid-template-columns: 1fr 280px;
		gap: 40px;
	}

	.bt2-article-layout {
		grid-template-columns: 1fr 280px;
		gap: 40px;
	}

	.bt2-resources-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bt2-nl-cta__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.bt2-contact-layout {
		grid-template-columns: 1fr;
	}

	.bt2-founder-block {
		grid-template-columns: 260px 1fr;
		gap: 40px;
	}

	.bt2-stats-band__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

/* ── Mobile (≤768px) ────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	:root {
		--bt2-section-py: 56px;
		--bt2-section-py-sm: 40px;
	}

	.bt2-hero__inner {
		grid-template-columns: 1fr;
	}

	.bt2-hero__image-wrap {
		display: none; /* hide image on mobile — prioritize text */
	}

	.bt2-blog-grid {
		grid-template-columns: 1fr;
	}

	.bt2-blog-grid .bt2-post-card--featured {
		flex-direction: column;
	}

	.bt2-blog-grid .bt2-post-card--featured .bt2-post-card__image {
		width: 100%;
		height: auto;
	}

	.bt2-features__grid {
		grid-template-columns: 1fr;
	}

	.bt2-post-layout {
		grid-template-columns: 1fr;
	}

	.bt2-post-nav {
		grid-template-columns: 1fr;
	}

	.bt2-related-grid {
		grid-template-columns: 1fr;
	}

	/* Article template mobile */
	.bt2-article-header {
		padding: 56px 0 48px;
	}

	.bt2-article-header__title {
		font-size: clamp(28px, 6vw, 42px);
	}

	.bt2-article-body {
		padding: 48px 0 56px;
	}

	.bt2-article-layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.bt2-article-sidebar {
		position: static;
	}

	.bt2-related-section {
		padding: 60px 0;
	}

	.bt2-resources-grid {
		grid-template-columns: 1fr;
	}

	.bt2-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.bt2-footer__bottom {
		flex-direction: column;
		text-align: center;
	}

	.bt2-nl-form {
		flex-direction: column;
	}

	.bt2-nl-cta__input-row {
		flex-direction: column;
	}

	.bt2-stats-band__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.bt2-founder-block {
		grid-template-columns: 1fr;
	}

	.bt2-founder-block__image {
		max-width: 280px;
	}

	.bt2-header__toggle {
		display: flex;
	}

	.bt2-nav {
		display: none;
		position: absolute;
		top: 68px;
		left: 0;
		right: 0;
		background: var(--bt2-cream);
		border-bottom: 1px solid var(--bt2-border);
		flex-direction: column;
		padding: 16px 0;
		gap: 0;
		z-index: 199;
	}

	.bt2-nav.is-open {
		display: flex;
	}

	.bt2-nav__link {
		padding: 12px 24px;
		border-radius: 0;
		font-size: 16px;
	}

	.bt2-cta-band {
		padding: 64px 0;
	}

	.bt2-split {
		grid-template-columns: 1fr;
	}

	.bt2-split--60-40,
	.bt2-split--40-60 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   18. HOMEPAGE — Components added in CAR-127 revision 2
   ========================================================================== */

/* ── Hero background fix ─────────────────────────────────────────────────── */
/* Hero is cream-colored; ensure decorative accents don't bleed. */
.bt2-hero {
	position: relative;
	overflow: hidden;
}

/* ── Value band (legacy — superseded by bt2-value-props in fluid design) ─── */

.bt2-value-band {
	background-color: var(--bt2-teal);
	padding: 40px 0;
}

.bt2-value-band__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.bt2-value-band__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: var(--bt2-white);
}

.bt2-value-band__icon {
	font-size: 24px;
	flex-shrink: 0;
	margin-top: 2px;
}

.bt2-value-band__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--bt2-white);
	margin-bottom: 4px;
}

.bt2-value-band__desc {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
	margin: 0;
}

/* ── Feature card icon wrapper ───────────────────────────────────────────── */

.bt2-feature-card__icon-wrap {
	font-size: 32px;
	margin-bottom: 4px;
}

/* ── Post card body — explicit padding/layout ────────────────────────────── */

.bt2-post-card__body {
	padding: 24px 24px 28px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bt2-post-card__title a {
	color: var(--bt2-text);
	text-decoration: none;
	background-image: none;
}

.bt2-post-card__title a:hover {
	color: var(--bt2-teal);
	text-decoration: none;
	background-image: none;
}

/* ── "Browse all guides" CTA below article grid ──────────────────────────── */

.bt2-articles-more {
	text-align: center;
	margin-top: 48px;
}

/* ── Newsletter CTA — copy + form 2-column layout ────────────────────────── */

.bt2-nl-cta__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bt2-nl-cta__form-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Founder strip ───────────────────────────────────────────────────────── */

.bt2-founder-strip {
	padding-top: 72px;
	padding-bottom: 72px;
}

.bt2-founder-strip__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 760px;
	margin: 0 auto;
}

.bt2-founder-strip__photo-wrap {
	flex-shrink: 0;
}

.bt2-founder-strip__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--bt2-teal-muted);
}

.bt2-founder-strip__quote {
	flex: 1;
	font-family: var(--bt2-font-heading);
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.5;
	color: var(--bt2-text);
	margin: 0 0 12px;
	border: none;
	padding: 0;
	background: none;
}

.bt2-founder-strip__byline {
	display: block;
	font-family: var(--bt2-font-body);
	font-size: 14px;
	color: var(--bt2-text-muted);
	font-style: normal;
	margin-top: 8px;
}

/* ── Responsive — homepage extras ───────────────────────────────────────── */

@media (max-width: 1024px) {
	.bt2-value-band__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 768px) {
	.bt2-value-band {
		padding: 32px 0;
	}

	.bt2-founder-strip__inner {
		flex-direction: column;
		text-align: center;
		gap: 24px;
	}

	.bt2-nl-cta__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
   FLUID DESIGN SYSTEM — CAR-145
   Curves, organic section transitions, sage circle image, wave dividers.
   ========================================================================== */

/* ── Global: remove all hard horizontal lines ────────────────────────────── */

hr {
	display: none;
}

.section,
.bt2-section,
.wp-block-group,
[class*="section"] {
	border-top: none !important;
	border-bottom: none !important;
}

/* ── Section background utilities ────────────────────────────────────────── */

.bt2-bg-sage      { background-color: var(--bt2-sage); }
.bt2-bg-peach     { background-color: var(--bt2-peach); }
.bt2-bg-navy      { background-color: var(--bt2-navy); color: var(--bt2-white); }
.bt2-bg-teal-tint { background-color: var(--bt2-teal-tint); }

/* ── Wave dividers ────────────────────────────────────────────────────────── */

.bt2-wave-divider {
	display: block;
	line-height: 0;
	background-color: var(--bt2-cream); /* upper section color */
}

.bt2-wave-divider--sage-to-cream {
	background-color: var(--bt2-sage); /* upper section color */
}

.bt2-wave-divider--to-footer {
	background-color: var(--bt2-cream); /* section above footer */
}

/* ── Hero: 58/42 asymmetric grid ─────────────────────────────────────────── */

.bt2-hero {
	padding-top: 120px;
	padding-bottom: 80px;
	min-height: 80vh;
	display: flex;
	align-items: center;
}

.bt2-hero__inner {
	grid-template-columns: 58fr 42fr;
	gap: 80px;
}

/* ── Hero: Circular sage image with floating accents ─────────────────────── */

.bt2-hero__image-col {
	display: flex;
	justify-content: center;
	align-items: center;
}

.bt2-image-float-wrap {
	position: relative;
	width: 460px;
	height: 460px;
	flex-shrink: 0;
}

.bt2-sage-circle {
	position: absolute;
	inset: 0;
	background: var(--bt2-sage);
	border-radius: 50%;
}

.bt2-hero-cutout {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	height: auto;
	max-height: 110%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.bt2-hero__image-placeholder {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bt2-sage) 0%, var(--bt2-teal-muted) 100%);
	opacity: 0.7;
}

/* Decorative floating accents */
.bt2-accent-heart {
	position: absolute;
	top: 20px;
	right: -10px;
	font-size: 28px;
	color: var(--bt2-coral);
	line-height: 1;
	pointer-events: none;
}

.bt2-accent-sparkle {
	position: absolute;
	bottom: 30px;
	left: -15px;
	font-size: 22px;
	color: var(--bt2-teal);
	line-height: 1;
	pointer-events: none;
}

.bt2-accent-dot {
	position: absolute;
	top: 50%;
	right: -20px;
	width: 14px;
	height: 14px;
	background: var(--bt2-coral);
	border-radius: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* ── Value props section (replaces teal band) ────────────────────────────── */

.bt2-value-props {
	padding: 96px 0;
}

.bt2-value-props__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.bt2-value-prop-card {
	background: rgba(255, 255, 255, 0.55);
	border-radius: var(--bt2-radius-card-feature);
	padding: 40px 32px;
}

.bt2-value-prop-card__heading {
	font-family: var(--bt2-font-heading);
	font-size: clamp(20px, 2.5vw, 26px);
	color: var(--bt2-text);
	margin-bottom: 16px;
	line-height: 1.2;
}

.bt2-value-prop-card__body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--bt2-text-sub);
	margin: 0;
}

/* ── Start reading section — slight bottom overlap into newsletter ────────── */

.bt2-start-reading {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* ── Newsletter CTA — peach bg ────────────────────────────────────────────── */

.bt2-nl-cta.bt2-bg-peach {
	background-color: var(--bt2-peach);
	padding-top: 80px;
	padding-bottom: 80px;
}

.bt2-nl-cta.bt2-bg-peach .bt2-nl-cta__heading {
	color: var(--bt2-text);
}

.bt2-nl-cta.bt2-bg-peach .bt2-nl-cta__eyebrow {
	color: var(--bt2-coral-dark);
}

/* ── Founder quote — coral left border ───────────────────────────────────── */

.bt2-founder-strip__quote {
	border-left: 4px solid var(--bt2-coral);
	padding-left: 24px;
}

/* ── Images globally: no hard borders ───────────────────────────────────── */

img {
	border: none;
}

.wp-block-image figure,
.wp-block-image img {
	border: none !important;
	box-shadow: none !important;
}

/* ── Article/post card images: 16px radius ───────────────────────────────── */

.bt2-post-card__image,
.bt2-post-card img {
	border-radius: var(--bt2-radius-card);
	overflow: hidden;
}

.bt2-post-card {
	border-radius: var(--bt2-radius-card);
}

/* ── Feature cards: 24px radius ─────────────────────────────────────────── */

.bt2-feature-card.bt2-card {
	border-radius: var(--bt2-radius-card-feature);
}

/* ── Blog/archive filter pills: 50px ────────────────────────────────────── */

.betended-filter-pill {
	border-radius: 50px;
}

/* ── Article featured image: full-bleed ─────────────────────────────────── */

.betended-single-image img,
.betended-single-image .wp-post-image {
	border-radius: 0;
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	display: block;
}

/* ── Section padding scale ───────────────────────────────────────────────── */

.bt2-hero-section      { padding: 120px 0 80px; min-height: 80vh; }
.bt2-section-standard  { padding: 96px 0; }
.bt2-section-compact   { padding: 64px 0; }
.bt2-nl-cta            { padding: 80px 0; }

/* ── Responsive: fluid layout breakpoints ─────────────────────────────────── */

@media (max-width: 1024px) {
	.bt2-value-props__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		max-width: 640px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.bt2-hero {
		padding-top: 80px;
		padding-bottom: 64px;
		min-height: auto;
	}

	.bt2-hero__inner {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 0 20px;
	}

	.bt2-hero__image-col {
		order: -1;
	}

	.bt2-image-float-wrap {
		width: 280px;
		height: 280px;
		margin: 0 auto;
	}

	.bt2-hero__actions {
		flex-direction: column;
	}

	.bt2-hero__actions .bt2-btn {
		width: 100%;
		text-align: center;
	}

	.bt2-value-props {
		padding: 64px 0;
	}

	.bt2-value-props__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.bt2-nl-cta__input-row {
		flex-direction: column;
	}

	.bt2-nl-cta__input-row .bt2-btn {
		width: 100%;
	}
}

/* ==========================================================================
   BLOG INDEX PAGE — Phase 5b
   ========================================================================== */

/* ── Blog hero (teal background, replaces cream hero on archive pages) ────── */

.bt2-blog-hero {
	background-color: var(--bt2-teal);
	padding: var(--bt2-section-py) 0 var(--bt2-section-py-sm);
	text-align: center;
}

.bt2-blog-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.bt2-blog-hero__eyebrow {
	font-size: var(--bt2-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 16px;
}

.bt2-blog-hero__heading {
	font-family: var(--bt2-font-heading);
	font-size: clamp(36px, 5vw, 60px);
	line-height: 1.15;
	color: var(--bt2-white);
	margin-bottom: 20px;
}

.bt2-blog-hero__sub {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 40px;
}

.bt2-blog-hero__filters {
	justify-content: center;
}

/* Override pill colours inside the teal hero */
.bt2-blog-hero .bt2-filter-pill {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--bt2-white);
}

.bt2-blog-hero .bt2-filter-pill:hover,
.bt2-blog-hero .bt2-filter-pill.is-active {
	background-color: var(--bt2-white);
	border-color: var(--bt2-white);
	color: var(--bt2-teal);
}

/* ── Featured article ─────────────────────────────────────────────────────── */

.bt2-featured-post {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	background: var(--bt2-white);
	border: 1px solid var(--bt2-border);
	border-radius: var(--bt2-radius-card);
	overflow: hidden;
}

.bt2-featured-post__img-link {
	display: block;
	overflow: hidden;
}

.bt2-featured-post__img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.bt2-featured-post:hover .bt2-featured-post__img {
	transform: scale(1.03);
}

.bt2-featured-post__img-placeholder {
	width: 100%;
	min-height: 340px;
	background-color: var(--bt2-teal-bg);
}

.bt2-featured-post__body {
	padding: 40px 48px 40px 0;
	display: flex;
	flex-direction: column;
}

.bt2-featured-post__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

/* Coral variant for secondary badge */
.bt2-post-card__badge--coral {
	color: var(--bt2-coral-dark);
	background-color: var(--bt2-coral-bg);
}

.bt2-post-card__badge--coral:hover {
	background-color: var(--bt2-coral-light);
	color: var(--bt2-white);
}

.bt2-featured-post__title {
	font-family: var(--bt2-font-heading);
	font-size: clamp(24px, 2.5vw, 34px);
	line-height: 1.2;
	margin-bottom: 16px;
	color: var(--bt2-text);
}

.bt2-featured-post__title a {
	color: inherit;
	text-decoration: none;
}

.bt2-featured-post__title a:hover {
	color: var(--bt2-teal);
}

.bt2-featured-post__excerpt {
	font-size: 16px;
	line-height: 1.65;
	color: var(--bt2-text-sub);
	margin-bottom: 28px;
	flex: 1;
}

.bt2-featured-post__footer {
	display: flex;
	align-items: center;
	gap: 20px;
}

.bt2-featured-post__meta {
	font-size: 13px;
	color: var(--bt2-text-muted);
}

/* ── "Keep reading" section header ───────────────────────────────────────── */

.bt2-keep-reading {
	background-color: var(--bt2-cream);
}

.bt2-keep-reading__eyebrow {
	font-family: var(--bt2-font-heading);
	font-size: clamp(28px, 3vw, 40px);
	color: var(--bt2-text);
	margin-bottom: 36px;
}

/* ── Blog empty state ─────────────────────────────────────────────────────── */

.bt2-blog-empty {
	text-align: center;
	padding: 48px 0;
}

/* ── Compact newsletter CTA (blog page variant) ───────────────────────────── */

.bt2-nl-cta--compact .bt2-nl-cta--compact__inner {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.bt2-nl-cta--compact__heading {
	font-family: var(--bt2-font-heading);
	font-size: clamp(28px, 3.5vw, 44px);
	line-height: 1.2;
	color: var(--bt2-text);
	margin-bottom: 12px;
}

.bt2-nl-cta--compact__sub {
	font-size: 16px;
	color: var(--bt2-text-sub);
	margin-bottom: 28px;
}

.bt2-nl-cta--compact__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.bt2-nl-cta--compact__input-row {
	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 480px;
}

.bt2-nl-cta--compact__input-row .bt2-nl-cta__input {
	flex: 1;
}

/* ── Responsive adjustments ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.bt2-featured-post {
		grid-template-columns: 1fr;
	}

	.bt2-featured-post__img {
		min-height: 240px;
	}

	.bt2-featured-post__img-placeholder {
		min-height: 240px;
	}

	.bt2-featured-post__body {
		padding: 32px;
	}
}

@media (max-width: 768px) {
	.bt2-blog-hero {
		padding: 56px 0 40px;
	}

	.bt2-blog-hero__heading {
		font-size: clamp(28px, 7vw, 40px);
	}

	.bt2-featured-post__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.bt2-nl-cta--compact__input-row {
		flex-direction: column;
	}

	.bt2-nl-cta--compact__input-row .bt2-btn {
		width: 100%;
	}
}


/* ============================================================
   BFT — BeTended Figma Template Design System
   CAR-128/CAR-159 — Homepage + About page rebuild
   Matches Figma file YNR5BVAatpK8ILvxv4ONp5 (frame 96:2 + About)
   ============================================================ */

/* === 1. LAYOUT === */
.bft-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 80px;
	box-sizing: border-box;
}

.bft-br-desktop { display: block; }
@media (max-width: 768px) {
	.bft-br-desktop { display: none; }
}

/* === 2. WAVE DIVIDERS === */
.bft-wave {
	display: block;
	line-height: 0;
	overflow: hidden;
}
.bft-wave svg { display: block; width: 100%; }

/* === 3. TYPOGRAPHY === */
.bft-eyebrow {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 16px;
	display: block;
}
.bft-eyebrow--sage     { color: #CEDEE1; }
.bft-eyebrow--coral    { color: #E8886F; }
.bft-eyebrow--teal-dark { color: #29606A; }
.bft-eyebrow--white    { color: rgba(255,255,255,0.75); }

.bft-section-header     { margin-bottom: 56px; }
.bft-section-header--center { text-align: center; }

.bft-section-h2 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.15;
	font-weight: 400;
	margin: 0;
}
.bft-section-h2--teal      { color: #3B8D99; }
.bft-section-h2--dark-teal { color: #29606A; }
.bft-section-h2--white     { color: #FFFFFF; }
.bft-section-h2--cream     { color: #FAF8F5; }

/* === 4. BUTTONS === */
.bft-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 50px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}
.bft-btn--coral { background:#E8886F; color:#fff; border-color:#E8886F; }
.bft-btn--coral:hover { background:#D4705A; border-color:#D4705A; color:#fff; text-decoration:none; }
.bft-btn--teal  { background:#3B8D99; color:#fff; border-color:#3B8D99; }
.bft-btn--teal:hover  { background:#29606A; border-color:#29606A; color:#fff; text-decoration:none; }
.bft-btn--text-white { background:transparent; color:#fff; border-color:transparent; padding-left:8px; }
.bft-btn--text-white:hover { color:#CEDEE1; text-decoration:none; }

/* === 5. HERO (HOMEPAGE) === */
.bft-hero {
	background-color: #3B8D99;
	padding: 64px 0 0;
	overflow: hidden;
}
.bft-hero__inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	align-items: center;
	gap: 48px;
	padding-bottom: 64px;
}
.bft-hero__h1 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: clamp(42px, 5.5vw, 80px);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 24px;
}
.bft-hero__subhead {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.65;
	color: rgba(255,255,255,0.88);
	margin: 0 0 40px;
}
.bft-hero__actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.bft-hero__right {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.bft-hero-circle {
	width: 400px; height: 400px;
	background: #CEDEE1;
	border-radius: 50%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}
.bft-hero-photo {
	width: 220px; height: 360px;
	background: rgba(255,255,255,0.25);
	border-radius: 12px 12px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3B8D99;
	font-size: 12px;
	text-align: center;
	line-height: 1.4;
	padding: 16px;
}
.bft-acc {
	position: absolute;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bft-acc--heart  { width:44px; height:44px; background:#E8886F; top:8%; right:8%; color:#fff; font-size:20px; }
.bft-acc--heart::after { content:'♥'; }
.bft-acc--sparkle { width:34px; height:34px; background:#3B8D99; bottom:25%; left:-4%; color:#fff; font-size:14px; line-height:34px; text-align:center; }
.bft-acc--dot    { width:18px; height:18px; background:#E8886F; top:50%; right:-3%; }

/* === 6. PILLARS === */
.bft-pillars { background:#FAF8F5; padding:80px 0; }
.bft-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.bft-pillar-card {
	background: #EEF7F8;
	border-radius: 16px;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bft-pillar-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(59,141,153,0.12); }
.bft-pillar-card__icon {
	width:48px; height:48px;
	border-radius:50%;
	background:#3B8D99;
	color:#fff;
	display:flex; align-items:center; justify-content:center;
	font-size:20px;
	margin-bottom:20px;
	flex-shrink:0;
}
.bft-pillar-card__title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	color: #333231;
	margin: 0 0 12px;
	line-height: 1.2;
}
.bft-pillar-card__body {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #4A4A48;
	margin: 0 0 auto;
	flex: 1;
}
.bft-pillar-card__link {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size: 15px; font-weight:600;
	color: #3B8D99;
	text-decoration: none;
	margin-top: 24px;
	display: inline-block;
}
.bft-pillar-card__link:hover { color:#29606A; text-decoration:underline; }

/* === 7. STATS === */
.bft-stats { background:#CEDEE1; padding:80px 0; }
.bft-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
}
.bft-stats__grid::before,
.bft-stats__grid::after {
	content:'';
	position:absolute;
	top:10%; height:80%;
	width:1px;
	background:rgba(41,96,106,0.2);
}
.bft-stats__grid::before { left:33.333%; }
.bft-stats__grid::after  { left:66.666%; }
.bft-stat-col { padding:24px 40px; text-align:center; }
.bft-stat-col__value {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 400;
	color: #29606A;
	line-height: 1.15;
	margin: 0 0 16px;
}
.bft-stat-col__rule { width:48px; height:2px; background:#3B8D99; margin:0 auto 16px; }
.bft-stat-col__label {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:16px; font-weight:600;
	color:#333231; margin:0 0 8px;
}
.bft-stat-col__sub {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:14px; line-height:1.5;
	color:#5A6B6D; margin:0;
}

/* === 8. ARTICLE LIST === */
.bft-guides-latest { background:#FAF8F5; padding:80px 0; }
.bft-articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 48px;
}
.bft-article-item { padding:20px 0; }
.bft-article-item__rule { height:1px; background:#D8D4CE; margin-bottom:16px; }
.bft-article-item__cat {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:11px; font-weight:700;
	letter-spacing:0.12em; text-transform:uppercase;
	color:#E8886F; margin:0 0 8px;
}
.bft-article-item__title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size:20px; font-weight:400;
	line-height:1.25; margin:0 0 8px;
}
.bft-article-item__title a { color:#333231; text-decoration:none; }
.bft-article-item__title a:hover { color:#3B8D99; }
.bft-article-item__meta { font-size:13px; color:#72716F; margin:0 0 8px; }
.bft-article-item__link {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:14px; font-weight:600;
	color:#3B8D99; text-decoration:none;
}
.bft-article-item__link:hover { color:#29606A; text-decoration:underline; }

/* === 9. NEWSLETTER === */
.bft-newsletter { background:#3B8D99; padding:96px 0; }
.bft-newsletter__inner { text-align:center; }
.bft-newsletter__h2 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight:400; line-height:1.2;
	color:#fff; margin:0 0 16px;
}
.bft-newsletter__sub {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:17px; line-height:1.6;
	color:rgba(255,255,255,0.85);
	margin:0 0 40px;
}
.bft-newsletter__form { max-width:560px; margin:0 auto; }
.bft-newsletter__input-row { display:flex; gap:12px; margin-bottom:16px; }
.bft-newsletter__input {
	flex:1;
	padding:14px 20px;
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:16px;
	background:#fff; color:#1A1A1A;
	border:2px solid transparent;
	border-radius:50px;
	outline:none;
	transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.bft-newsletter__input:focus { border-color:#CEDEE1; box-shadow:0 0 0 3px rgba(255,255,255,0.2); }
.bft-newsletter__input::placeholder { color:#72716F; }
.bft-newsletter__submit { flex-shrink:0; }
.bft-newsletter__msg { font-size:14px; color:rgba(255,255,255,0.85); min-height:20px; margin:0; }
.bft-newsletter__disclaimer {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:13px; color:rgba(255,255,255,0.6);
	margin:20px 0 0;
}

/* === 10. FOOTER === */
.bft-footer { background:#18242D; padding:64px 0 32px; }
.bft-footer__grid {
	display:grid;
	grid-template-columns:2fr 1fr 1fr;
	gap:48px;
	margin-bottom:48px;
}
.bft-footer__brand-name {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size:24px; font-weight:400;
	color:#fff; margin:0 0 8px; display:block;
}
.bft-footer__tagline {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:14px; color:rgba(255,255,255,0.5); margin:0;
}
.bft-footer__col-heading {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:13px; font-weight:700;
	letter-spacing:0.08em; text-transform:uppercase;
	color:rgba(255,255,255,0.45);
	margin:0 0 16px; display:block;
}
.bft-footer__links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.bft-footer__links a {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:15px; color:rgba(255,255,255,0.7);
	text-decoration:none; transition:color 0.2s ease;
}
.bft-footer__links a:hover { color:#fff; }
.bft-footer__bottom {
	border-top:1px solid rgba(255,255,255,0.1);
	padding-top:24px;
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:13px; color:rgba(255,255,255,0.35);
}

/* === 11. ABOUT PAGE SPECIFIC === */
.bft-about-hero {
	background:#3B8D99;
	padding:80px 0 0;
}
.bft-about-hero__inner {
	text-align:center;
	max-width:800px;
	margin:0 auto;
	padding-bottom:64px;
}
.bft-about-hero__h1 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: clamp(38px, 5vw, 64px);
	font-weight:400; line-height:1.15;
	color:#fff; margin:0 0 24px;
}
.bft-about-hero__subhead {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height:1.65;
	color:rgba(255,255,255,0.88);
	margin:0 auto;
	max-width:580px;
}

/* About belief cards */
.bft-about-mission { background:#FAF8F5; padding:80px 0; }
.bft-belief-cards {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:24px;
}
.bft-belief-card {
	background:#fff;
	border-radius:16px;
	padding:36px 32px;
	border:1px solid rgba(59,141,153,0.12);
}
.bft-belief-card__title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size:21px; font-weight:400;
	color:#3B8D99; margin:0 0 12px; line-height:1.2;
}
.bft-belief-card__body {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:16px; line-height:1.65;
	color:#4A4A48; margin:0;
}

/* About offerings (what we are / aren't) */
.bft-about-offerings { background:#CEDEE1; padding:80px 0; }
.bft-offerings-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:64px;
	align-items:start;
}
.bft-offerings-col__heading {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size:28px; font-weight:400;
	color:#29606A; margin:0 0 24px; line-height:1.2;
}
.bft-offerings-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.bft-offerings-list li {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:16px; line-height:1.5;
	color:#333231;
	padding-left:28px;
	position:relative;
}
.bft-offerings-list li::before {
	position:absolute; left:0;
	font-weight:700;
}
.bft-offerings-list--is li::before { content:'✓'; color:#3B8D99; }
.bft-offerings-list--not li::before { content:'✕'; color:#E8886F; }

/* About start-here CTA block */
.bft-about-start { background:#FAF8F5; padding:80px 0; text-align:center; }
.bft-about-start__heading {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size:clamp(28px, 3vw, 40px);
	font-weight:400; color:#333231;
	margin:0 0 16px;
}
.bft-about-start__body {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-size:17px; line-height:1.65;
	color:#4A4A48;
	margin:0 auto 32px;
	max-width:520px;
}

/* === 12. RESPONSIVE === */
@media (max-width:1024px) {
	.bft-container { padding:0 48px; }
}
@media (max-width:768px) {
	.bft-container { padding:0 24px; }
	.bft-hero__inner { grid-template-columns:1fr; }
	.bft-hero__right { display:none; }
	.bft-pillars__grid { grid-template-columns:1fr; }
	.bft-stats__grid { grid-template-columns:1fr; }
	.bft-stats__grid::before, .bft-stats__grid::after { display:none; }
	.bft-stat-col { padding:24px 16px; }
	.bft-articles-grid { grid-template-columns:1fr; gap:0; }
	.bft-belief-cards { grid-template-columns:1fr; }
	.bft-offerings-grid { grid-template-columns:1fr; gap:48px; }
	.bft-footer__grid { grid-template-columns:1fr; gap:32px; }
	.bft-newsletter__input-row { flex-direction:column; }
}