/**
 * DadSquad FitFat Neon & Dark Tech Theme Stylesheet
 * 
 * Strict Design System:
 * - 0px border-radius across all elements (sharp corners)
 * - 45-degree top-right single-corner chamfer notches (--n-cut-card, --n-cut-control)
 * - Glowing hairline borders in Gold (#E4B301) and Teal (#1188A0)
 * - Tactical dark backgrounds with paper/grunge texture overlays
 * - Retooled County Hierarchy Graph Tree
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens & Root Variables
 * ------------------------------------------------------------------------ */

:root {
	--n-gold: #E4B301;
	--n-gold-glow: rgba(228, 179, 1, 0.45);
	--n-gold-subtle: rgba(228, 179, 1, 0.12);
	--n-gold-dim: #997800;

	--n-teal: #1188A0;
	--n-teal-glow: rgba(17, 136, 160, 0.45);
	--n-teal-subtle: rgba(17, 136, 160, 0.12);
	--n-teal-dim: #094754;

	--n-ground: #050505;
	--n-surface: #0d0d0f;
	--n-card: #151517;
	--n-card-alt: #0a0a0b;
	--n-elevated: #1d1d21;
	--n-input: #151517;

	--n-text: #ffffff;
	--n-text-muted: #a6a6ac;
	--n-text-dim: #6f6f76;

	--n-line: rgba(17, 136, 160, 0.35);
	--n-line-gold: rgba(228, 179, 1, 0.35);
	--n-line-subtle: rgba(255, 255, 255, 0.08);

	--n-cut-card: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
	--n-cut-control: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
	--n-cut-badge: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);

	--n-font-display: 'Bebas Neue', 'Squada One', -apple-system, BlinkMacSystemFont, sans-serif;
	--n-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------
 * 2. Global Reset & Base Setup
 * ------------------------------------------------------------------------ */

.ds-fitfat-home,
.ds-fitfat-home * {
	box-sizing: border-box;
	border-radius: 0 !important;
}

.ds-fitfat-home {
	background-color: var(--n-ground);
	color: var(--n-text);
	font-family: var(--n-font-sans);
	line-height: 1.5;
	overflow-x: hidden;
}

.ds-ff-container {
	width: 92%;
	max-width: 1240px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------------
 * 3. Section Containers & Textured Backgrounds
 * ------------------------------------------------------------------------ */

.ds-ff-section {
	position: relative;
	padding: 100px 0;
	background-color: var(--n-ground);
	border-bottom: 1px solid var(--n-line-subtle);
}

.ds-ff-section--alt {
	background-color: var(--n-surface);
}

.ds-ff-section-head {
	margin-bottom: 50px;
}

.ds-ff-section-head--center {
	text-align: center;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

.ds-ff-section-head__split {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	flex-wrap: wrap;
}

.ds-ff-kicker-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.ds-ff-kicker-dot {
	width: 8px;
	height: 8px;
	background: var(--n-gold);
	box-shadow: 0 0 8px var(--n-gold);
}

.ds-ff-kicker {
	font-family: var(--n-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.ds-ff-kicker--gold { color: var(--n-gold); }
.ds-ff-kicker--teal { color: var(--n-teal); }

.ds-ff-title {
	font-family: var(--n-font-display);
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: 1px;
	margin: 0 0 14px 0;
	color: #ffffff;
}

.ds-ff-highlight {
	color: var(--n-gold);
	text-shadow: 0 0 16px var(--n-gold-glow);
}

.ds-ff-subtitle,
.ds-ff-lede {
	font-size: 16px;
	color: var(--n-text-muted);
	max-width: 680px;
	line-height: 1.6;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 4. Cards, Notches & Neon Glows
 * ------------------------------------------------------------------------ */

.ds-ff-card {
	position: relative;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
	transition: all 0.25s ease;
}

.ds-ff-card--gold {
	border-color: var(--n-line-gold);
}

.ds-ff-card--gold:hover {
	border-color: var(--n-gold);
	box-shadow: 0 0 20px var(--n-gold-glow);
}

.ds-ff-card--teal:hover {
	border-color: var(--n-teal);
	box-shadow: 0 0 20px var(--n-teal-glow);
}

.ds-ff-nipped {
	clip-path: var(--n-cut-card) !important;
}

.ds-ff-nipped-control {
	clip-path: var(--n-cut-control) !important;
}

.ds-ff-tag {
	display: inline-block;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	clip-path: var(--n-cut-badge);
	margin-bottom: 12px;
}

.ds-ff-tag--gold {
	background: var(--n-gold-subtle);
	color: var(--n-gold);
	border: 1px solid var(--n-line-gold);
}

.ds-ff-tag--teal {
	background: var(--n-teal-subtle);
	color: var(--n-teal);
	border: 1px solid var(--n-line);
}

.ds-ff-tag--muted {
	background: rgba(255, 255, 255, 0.05);
	color: var(--n-text-muted);
	border: 1px solid var(--n-line-subtle);
}

/* ---------------------------------------------------------------------------
 * 5. Buttons & Controls
 * ------------------------------------------------------------------------ */

.ds-ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-family: var(--n-font-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	clip-path: var(--n-cut-control);
	transition: all 0.2s ease;
}

.ds-ff-btn--gold {
	background: var(--n-gold);
	color: #021010 !important;
	box-shadow: 0 0 15px var(--n-gold-glow);
}

.ds-ff-btn--gold:hover {
	background: #ffd333;
	box-shadow: 0 0 25px rgba(228, 179, 1, 0.7);
	transform: translateY(-2px);
}

.ds-ff-btn--teal {
	background: var(--n-teal);
	color: #ffffff !important;
	box-shadow: 0 0 15px var(--n-teal-glow);
}

.ds-ff-btn--teal:hover {
	background: #14a2bf;
	box-shadow: 0 0 25px rgba(17, 136, 160, 0.7);
	transform: translateY(-2px);
}

.ds-ff-btn--teal-outline {
	background: transparent;
	color: var(--n-text) !important;
	border: 1px solid var(--n-teal);
}

.ds-ff-btn--teal-outline:hover {
	background: var(--n-teal-subtle);
	border-color: #14a2bf;
	color: #ffffff !important;
	box-shadow: 0 0 15px var(--n-teal-glow);
}

.ds-ff-btn--block {
	width: 100%;
}

.ds-ff-input {
	width: 100%;
	padding: 12px 16px;
	background: var(--n-input);
	border: 1px solid var(--n-line);
	color: #ffffff;
	font-size: 14px;
	clip-path: var(--n-cut-control);
	outline: none;
	transition: all 0.2s ease;
}

.ds-ff-input:focus {
	border-color: var(--n-gold);
	box-shadow: 0 0 12px var(--n-gold-glow);
}

.ds-ff-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--n-text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 6. Section 0: FitFat Asymmetric Hero
 * ------------------------------------------------------------------------ */

.ds-ff-hero {
	position: relative;
	padding: 140px 0 100px;
	background-color: var(--n-ground);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	border-bottom: 1px solid var(--n-line);
}

.ds-ff-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 60px;
	align-items: center;
}

.ds-ff-hero__title {
	font-family: var(--n-font-display);
	font-size: clamp(48px, 6.5vw, 84px);
	line-height: 0.95;
	letter-spacing: 1px;
	margin: 0 0 20px 0;
	color: #ffffff;
}

.ds-ff-hero__actions {
	display: flex;
	gap: 16px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.ds-ff-hero__media-wrap {
	position: relative;
}

.ds-ff-hero-video {
	height: 380px;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
}

.ds-ff-hero-video__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2,16,16,0.3) 0%, rgba(2,16,16,0.85) 100%);
}

.ds-ff-hero-video__top {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ds-ff-hero-video__duration {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--n-text-muted);
}

.ds-ff-hero-video__play {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
}

.ds-ff-play-btn {
	width: 52px;
	height: 52px;
	background: var(--n-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #021010;
	font-size: 16px;
	box-shadow: 0 0 20px var(--n-gold-glow);
}

.ds-ff-hero-video__play-text {
	font-family: var(--n-font-display);
	font-size: 20px;
	letter-spacing: 1px;
	color: #ffffff;
}

.ds-ff-hero-badge {
	position: absolute;
	bottom: -30px;
	left: -30px;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	z-index: 3;
	box-shadow: 0 14px 35px rgba(0,0,0,0.8);
}

.ds-ff-hero-badge__num {
	display: block;
	font-family: var(--n-font-display);
	font-size: 32px;
	line-height: 1;
	color: var(--n-gold);
}

.ds-ff-hero-badge__lbl {
	font-size: 12px;
	color: var(--n-text-muted);
	font-weight: 600;
}

.ds-ff-avatar-stack {
	display: flex;
}

.ds-ff-avatar {
	width: 38px;
	height: 38px;
	background-size: cover;
	background-position: center;
	border: 2px solid var(--n-ground);
	margin-left: -10px;
}

.ds-ff-avatar:first-child { margin-left: 0; }

.ds-ff-avatar--more {
	background: var(--n-elevated);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--n-gold);
}

/* ---------------------------------------------------------------------------
 * 7. Section 1: Marquee Ticker Ribbon
 * ------------------------------------------------------------------------ */

.ds-ff-ticker-wrap {
	background: #021010;
	border-top: 1px solid var(--n-gold);
	border-bottom: 1px solid var(--n-gold);
	box-shadow: 0 0 15px rgba(228, 179, 1, 0.2);
	overflow: hidden;
	padding: 14px 0;
}

.ds-ff-ticker__track {
	display: flex;
	gap: 40px;
	white-space: nowrap;
	animation: ds-ticker-anim 28s linear infinite;
	font-family: var(--n-font-display);
	font-size: 18px;
	letter-spacing: 2px;
	color: var(--n-gold);
}

@keyframes ds-ticker-anim {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
 * 8. Section 2: Asymmetric 2x2 Mosaic & Story
 * ------------------------------------------------------------------------ */

.ds-ff-about__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 60px;
	align-items: center;
}

.ds-ff-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ds-ff-mosaic__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ds-ff-mosaic__col--offset {
	margin-top: 40px;
}

.ds-ff-mosaic__img {
	background-size: cover;
	background-position: center;
	border: 1px solid var(--n-line);
}

.ds-ff-mosaic__img--tall { height: 280px; }
.ds-ff-mosaic__img--short { height: 160px; }
.ds-ff-mosaic__img--mid { height: 220px; }

.ds-ff-mosaic__badge {
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ds-ff-mosaic__badge-icon {
	color: var(--n-gold);
	font-size: 20px;
}

.ds-ff-mosaic__badge-title {
	font-family: var(--n-font-display);
	font-size: 24px;
	color: #ffffff;
}

.ds-ff-mosaic__badge-text {
	font-size: 12px;
	color: var(--n-text-muted);
}

.ds-ff-about__points {
	margin-top: 30px;
}

.ds-ff-point {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
}

.ds-ff-point__icon {
	width: 32px;
	height: 32px;
	min-width: 32px;
	background: var(--n-teal-subtle);
	border: 1px solid var(--n-teal);
	color: var(--n-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.ds-ff-point__title {
	font-family: var(--n-font-display);
	font-size: 18px;
	letter-spacing: 1px;
	color: #ffffff;
	margin: 0 0 4px 0;
}

.ds-ff-point__text {
	font-size: 14px;
	color: var(--n-text-muted);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 9. Section 3: 4 Pass Pillars
 * ------------------------------------------------------------------------ */

.ds-ff-pillars__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ds-ff-pillar-card {
	display: flex;
	flex-direction: column;
	background: var(--n-card);
}

.ds-ff-pillar-card__media {
	height: 180px;
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--n-line);
}

.ds-ff-pillar-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.ds-ff-pillar-card__num {
	font-family: var(--n-font-display);
	font-size: 42px;
	line-height: 1;
	color: var(--n-gold);
	text-shadow: 0 0 12px var(--n-gold-glow);
	margin-bottom: 12px;
}

.ds-ff-pillar-card__title {
	font-family: var(--n-font-display);
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 1px;
	color: #ffffff;
	margin: 0 0 12px 0;
}

.ds-ff-pillar-card__text {
	font-size: 14px;
	color: var(--n-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 10. Section 4: Stats Counter Bar
 * ------------------------------------------------------------------------ */

.ds-ff-stats-bar {
	padding: 60px 0;
	background: #0a0a0b;
	background-image: url('/wp-content/uploads/2026/08/texture-grunge.png');
	background-size: 350px;
	background-blend-mode: overlay;
	border-top: 1px solid var(--n-line);
	border-bottom: 1px solid var(--n-line);
}

.ds-ff-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ds-ff-stat-box {
	padding: 24px;
	text-align: center;
	background: var(--n-card);
	border: 1px solid var(--n-line);
}

.ds-ff-stat-box__icon {
	font-size: 24px;
	display: block;
	margin-bottom: 8px;
}

.ds-ff-stat-box__num {
	display: block;
	font-family: var(--n-font-display);
	font-size: 46px;
	line-height: 1;
	color: var(--n-gold);
	text-shadow: 0 0 15px var(--n-gold-glow);
	margin-bottom: 6px;
}

.ds-ff-stat-box__lbl {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--n-text-muted);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 11. Section 5: Bento Grid Highlights
 * ------------------------------------------------------------------------ */

.ds-ff-bento__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: auto auto;
	gap: 24px;
}

.ds-ff-bento__card {
	padding: 36px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ds-ff-bento__card--featured {
	grid-row: span 2;
	background: linear-gradient(135deg, rgba(228, 179, 1, 0.12) 0%, rgba(10, 22, 24, 0.95) 60%);
	border-color: var(--n-gold);
	box-shadow: 0 0 25px rgba(228, 179, 1, 0.2);
}

.ds-ff-bento__title {
	font-family: var(--n-font-display);
	font-size: clamp(28px, 3.5vw, 42px);
	line-height: 1.1;
	color: #ffffff;
	margin: 12px 0 16px 0;
}

.ds-ff-bento__title-sm {
	font-family: var(--n-font-display);
	font-size: 24px;
	color: #ffffff;
	margin: 8px 0 10px 0;
}

.ds-ff-bento__text {
	font-size: 15px;
	color: var(--n-text-muted);
	line-height: 1.6;
	margin-bottom: 24px;
}

.ds-ff-bento__text-sm {
	font-size: 13px;
	color: var(--n-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 12. Section 6: Retooled County Hierarchy Graph Tree
 * ------------------------------------------------------------------------ */

.ds-ff-tree {
	position: relative;
	margin-top: 40px;
}

.ds-ff-tree__hub-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 3;
}

.ds-ff-tree__hub {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 16px 32px;
	background: var(--n-surface);
	border: 1px solid var(--n-gold);
	box-shadow: 0 0 25px var(--n-gold-glow);
}

.ds-ff-tree__hub-icon {
	font-size: 24px;
	color: var(--n-gold);
}

.ds-ff-tree__hub-tag {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--n-gold);
	text-transform: uppercase;
}

.ds-ff-tree__hub-title {
	font-family: var(--n-font-display);
	font-size: 28px;
	line-height: 1;
	letter-spacing: 1px;
	color: #ffffff;
	margin: 2px 0 0 0;
}

.ds-ff-tree__hub-badge {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #021010;
	background: var(--n-gold);
	padding: 6px 14px;
	clip-path: var(--n-cut-badge);
}

.ds-ff-tree__trunk {
	width: 2px;
	height: 40px;
	background: linear-gradient(180deg, var(--n-gold) 0%, var(--n-teal) 100%);
	box-shadow: 0 0 10px var(--n-teal-glow);
}

.ds-ff-tree__branch-bar {
	width: 90%;
	max-width: 1040px;
	height: 2px;
	margin: 0 auto;
	background: linear-gradient(90deg, transparent 0%, var(--n-teal) 15%, var(--n-teal) 85%, transparent 100%);
	box-shadow: 0 0 10px var(--n-teal-glow);
}

.ds-ff-tree__counties-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 0;
}

.ds-ff-tree__county-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ds-ff-tree__county-stem {
	width: 2px;
	height: 30px;
	background: var(--n-teal);
	box-shadow: 0 0 8px var(--n-teal-glow);
}

.ds-ff-tree__county-card {
	width: 100%;
	padding: 20px 16px;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	display: flex;
	flex-direction: column;
	min-height: 260px;
}

.ds-ff-tree__county-header {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--n-line-subtle);
}

.ds-ff-tree__county-title {
	font-family: var(--n-font-display);
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: 0.5px;
	color: #ffffff;
	margin: 6px 0 4px 0;
}

.ds-ff-tree__county-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--n-text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ds-ff-tree__cities-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

.ds-ff-tree__city-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: var(--n-input);
	border: 1px solid var(--n-line-subtle);
	color: #ffffff !important;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	clip-path: var(--n-cut-control);
	transition: all 0.2s ease;
}

.ds-ff-tree__city-dot {
	width: 6px;
	height: 6px;
	min-width: 6px;
	background: var(--n-teal);
	margin-right: 8px;
}

.ds-ff-tree__city-name {
	flex-grow: 1;
	text-align: left;
}

.ds-ff-tree__city-arrow {
	font-size: 12px;
	color: var(--n-text-muted);
	transition: transform 0.2s ease, color 0.2s ease;
}

.ds-ff-tree__city-pill:hover {
	background: var(--n-elevated);
	border-color: var(--n-gold);
	box-shadow: 0 0 10px rgba(228, 179, 1, 0.35);
	transform: translateX(3px);
}

.ds-ff-tree__city-pill:hover .ds-ff-tree__city-dot {
	background: var(--n-gold);
	box-shadow: 0 0 6px var(--n-gold);
}

.ds-ff-tree__city-pill:hover .ds-ff-tree__city-arrow {
	color: var(--n-gold);
	transform: translateX(2px);
}

.ds-ff-tree__empty {
	font-size: 12px;
	color: var(--n-text-dim);
	font-style: italic;
	text-align: center;
	padding: 10px 0;
}

/* ---------------------------------------------------------------------------
 * 13. Section 7: Partner Brand Strip
 * ------------------------------------------------------------------------ */

.ds-ff-partners-strip {
	padding: 40px 0;
	background: #0a0a0b;
	border-top: 1px solid var(--n-line-subtle);
	border-bottom: 1px solid var(--n-line-subtle);
}

.ds-ff-partners-grid {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px;
}

.ds-ff-partner-logo img {
	max-height: 48px;
	max-width: 150px;
	filter: grayscale(100%) brightness(0.8) contrast(1.2);
	opacity: 0.65;
	transition: all 0.25s ease;
}

.ds-ff-partner-logo img:hover {
	filter: grayscale(0%) brightness(1);
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 14. Section 8: Pricing Matrix
 * ------------------------------------------------------------------------ */

.ds-ff-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: center;
}

.ds-ff-plan {
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 500px;
}

.ds-ff-plan--featured {
	position: relative;
	background: linear-gradient(180deg, rgba(228, 179, 1, 0.08) 0%, rgba(16, 34, 38, 0.98) 30%);
	border-color: var(--n-gold);
	box-shadow: 0 0 30px rgba(228, 179, 1, 0.25);
	transform: scale(1.03);
	z-index: 2;
}

.ds-ff-plan__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--n-gold);
	color: #021010;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	padding: 4px 16px;
	clip-path: var(--n-cut-badge);
	white-space: nowrap;
}

.ds-ff-plan__title {
	font-family: var(--n-font-display);
	font-size: 28px;
	margin: 6px 0 12px 0;
	color: #ffffff;
}

.ds-ff-text-gold { color: var(--n-gold) !important; }

.ds-ff-plan__amt {
	font-family: var(--n-font-display);
	font-size: 52px;
	line-height: 1;
	color: #ffffff;
}

/* A word in the price slot instead of a figure. 52px was sized for "$5.99";
 * "ALWAYS FREE" at that size crowds the card it sits in. */
.ds-ff-plan__amt--word {
	font-size: 40px;
	letter-spacing: 0.5px;
	color: var(--n-gold);
}

.ds-ff-plan__period {
	font-size: 13px;
	font-weight: 700;
	color: var(--n-text-muted);
}

.ds-ff-plan__desc {
	font-size: 14px;
	color: var(--n-text-muted);
	margin: 12px 0 24px 0;
	min-height: 42px;
}

.ds-ff-plan__features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ds-ff-plan__features li {
	font-size: 14px;
	color: var(--n-text-muted);
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ds-ff-check {
	color: var(--n-teal);
	font-weight: 800;
}

.ds-ff-check--gold {
	color: var(--n-gold);
	text-shadow: 0 0 8px var(--n-gold-glow);
}

/* ---------------------------------------------------------------------------
 * 15. Section 9: Action Banner
 * ------------------------------------------------------------------------ */

.ds-ff-action-box {
	overflow: hidden;
}

.ds-ff-action-box__media {
	height: 380px;
	background-size: cover;
	background-position: center;
	position: relative;
	border-right: 1px solid var(--n-line);
}

.ds-ff-action-box__badge {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: var(--n-gold);
	color: #021010;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	padding: 6px 14px;
	box-shadow: 0 0 15px var(--n-gold-glow);
}

.ds-ff-action-box__content {
	padding: 48px;
}

/* ---------------------------------------------------------------------------
 * 16. Section 10: FAQ Accordion
 * ------------------------------------------------------------------------ */

.ds-ff-faq__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 50px;
	align-items: center;
}

.ds-ff-faq-photo {
	height: 480px;
	background-size: cover;
	background-position: center;
	position: relative;
}

.ds-ff-faq-badge {
	position: absolute;
	bottom: -20px;
	right: -20px;
	padding: 24px;
	background: var(--n-surface);
	border: 1px solid var(--n-gold);
	box-shadow: 0 10px 30px rgba(0,0,0,0.8);
	max-width: 280px;
}

.ds-ff-faq-badge__stars {
	color: var(--n-gold);
	font-size: 18px;
	margin-bottom: 6px;
}

.ds-ff-faq-badge__num {
	display: block;
	font-family: var(--n-font-display);
	font-size: 24px;
	color: #ffffff;
	margin-bottom: 4px;
}

.ds-ff-faq-badge__text {
	font-size: 12px;
	color: var(--n-text-muted);
	font-style: italic;
	line-height: 1.4;
}

.ds-ff-faq-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ds-ff-faq-item {
	background: var(--n-card);
	border: 1px solid var(--n-line);
	padding: 18px 24px;
}

.ds-ff-faq-q {
	font-family: var(--n-font-display);
	font-size: 20px;
	letter-spacing: 0.5px;
	color: #ffffff;
	cursor: pointer;
	outline: none;
	list-style: none;
}

.ds-ff-faq-q::-webkit-details-marker { display: none; }

.ds-ff-faq-a {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--n-line-subtle);
	font-size: 14px;
	color: var(--n-text-muted);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * 17. Section 12: Testimonial Card
 * ------------------------------------------------------------------------ */

.ds-ff-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 60px;
	align-items: center;
}

.ds-ff-testi-card {
	padding: 40px;
	background: linear-gradient(145deg, rgba(228, 179, 1, 0.08) 0%, rgba(16, 34, 38, 0.95) 70%);
	border-color: var(--n-gold);
	box-shadow: 0 0 30px rgba(228, 179, 1, 0.15);
}

.ds-ff-testi-card__stars {
	color: var(--n-gold);
	font-size: 20px;
	margin-bottom: 16px;
}

.ds-ff-testi-card__quote {
	font-size: 18px;
	line-height: 1.6;
	color: #ffffff;
	font-style: italic;
	margin: 0 0 24px 0;
}

.ds-ff-testi-card__author {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ds-ff-testi-card__name {
	display: block;
	font-family: var(--n-font-display);
	font-size: 20px;
	color: var(--n-gold);
}

.ds-ff-testi-card__role {
	font-size: 13px;
	color: var(--n-text-muted);
}

/* ---------------------------------------------------------------------------
 * 18. Section 13: Two Ways In Quick Forms
 * ------------------------------------------------------------------------ */

.ds-ff-twoways__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.ds-ff-form-card {
	padding: 40px;
}

.ds-ff-form-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.ds-ff-form-card__price {
	font-family: var(--n-font-display);
	font-size: 24px;
	color: var(--n-gold);
}

.ds-ff-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}

.ds-ff-form__guarantees {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--n-text-muted);
	margin-top: 10px;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------------------------------------------------------------------------
 * 20. Site Header & Primary Navigation
 * ------------------------------------------------------------------------ */

.ds-site-wrapper {
	box-sizing: border-box;
}

.ds-ff-top-promo,
.ds-ff-top-promo *,
.ds-site-header,
.ds-site-header * {
	box-sizing: border-box;
	border-radius: 0 !important;
}

.ds-ff-top-promo {
	padding: 11px 0;
	background-color: var(--n-ground);
	background-image: linear-gradient(var(--n-teal-subtle), var(--n-teal-subtle));
	border-bottom: 1px solid var(--n-line);
}

.ds-ff-top-promo__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.ds-ff-top-promo__tag {
	padding: 4px 9px;
	background: var(--n-gold);
	color: #021010;
	font-family: var(--n-font-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	clip-path: var(--n-cut-badge);
}

.ds-ff-top-promo__text {
	color: var(--n-text-muted);
	font-family: var(--n-font-sans);
	font-size: 13px;
}

.ds-ff-top-promo__link {
	color: var(--n-gold) !important;
	font-family: var(--n-font-sans);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.ds-ff-top-promo__link:hover,
.ds-ff-top-promo__link:focus {
	color: #ffd333 !important;
	text-decoration: underline;
}

.ds-site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(5, 5, 5, 0.84);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--n-line);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.ds-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 92%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 0;
}

.ds-header-logo-link {
	display: inline-flex;
	align-items: center;
}

.ds-header-logo {
	display: block;
	height: 44px;
	width: auto;
}

.ds-nav-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ds-nav-menu > .menu-item {
	margin: 0;
	padding: 0;
}

.ds-nav-menu > .menu-item > a {
	position: relative;
	display: block;
	padding: 10px 0;
	color: var(--n-text-muted) !important;
	font-family: var(--n-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.ds-nav-menu > .menu-item > a::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--n-gold);
	box-shadow: 0 0 8px var(--n-gold-glow);
	content: '';
	transition: width 0.2s ease;
}

.ds-nav-menu > .menu-item > a:hover,
.ds-nav-menu > .menu-item > a:focus {
	color: var(--n-text) !important;
}

.ds-nav-menu > .menu-item > a:hover::after,
.ds-nav-menu > .menu-item > a:focus::after,
.ds-nav-menu > .current-menu-item > a::after,
.ds-nav-menu > .current_page_item > a::after {
	width: 100%;
}

.ds-nav-menu > .current-menu-item > a,
.ds-nav-menu > .current_page_item > a {
	color: var(--n-gold) !important;
}

.ds-nav-menu > .menu-item-has-children {
	position: relative;
}

.ds-nav-menu > .menu-item-has-children > a {
	padding-right: 14px;
}

.ds-nav-menu > .menu-item-has-children::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 5px;
	height: 5px;
	border-right: 1px solid var(--n-text-dim);
	border-bottom: 1px solid var(--n-text-dim);
	content: '';
	pointer-events: none;
	transform: translateY(-70%) rotate(45deg);
	transition: border-color 0.2s ease;
}

.ds-nav-menu > .menu-item-has-children:hover::after,
.ds-nav-menu > .menu-item-has-children:focus-within::after {
	border-color: var(--n-gold);
}

.ds-site-header .ds-main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all 0.18s ease;
}

.ds-site-header .ds-main-navigation .menu-item:hover > .sub-menu,
.ds-site-header .ds-main-navigation .menu-item:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ds-site-header .ds-main-navigation .sub-menu .menu-item {
	margin: 0;
	padding: 0;
}

.ds-site-header .ds-main-navigation .sub-menu a {
	display: block;
	padding: 10px 18px;
	color: var(--n-text-muted) !important;
	font-family: var(--n-font-sans);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.ds-site-header .ds-main-navigation .sub-menu a:hover,
.ds-site-header .ds-main-navigation .sub-menu a:focus {
	background: var(--n-teal-subtle);
	color: var(--n-text) !important;
	box-shadow: inset 2px 0 0 var(--n-gold);
}

.ds-header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ds-site-header .ds-btn--header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background: var(--n-gold);
	color: #021010 !important;
	border: 0;
	border-radius: 0 !important;
	clip-path: var(--n-cut-control);
	box-shadow: 0 0 15px var(--n-gold-glow);
	font-family: var(--n-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.2s ease;
}

.ds-site-header .ds-btn--header:hover,
.ds-site-header .ds-btn--header:focus {
	background: #ffd333;
	color: #021010 !important;
	box-shadow: 0 0 25px rgba(228, 179, 1, 0.7);
	transform: translateY(-2px);
}

.ds-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-control);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.ds-nav-toggle:hover,
.ds-nav-toggle:focus-visible {
	border-color: var(--n-gold);
	box-shadow: 0 0 12px var(--n-gold-glow);
}

.ds-nav-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--n-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ds-nav-toggle[aria-expanded="true"] .ds-nav-toggle__bar:first-child {
	transform: translateY(7px) rotate(45deg);
}

.ds-nav-toggle[aria-expanded="true"] .ds-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.ds-nav-toggle[aria-expanded="true"] .ds-nav-toggle__bar:last-child {
	transform: translateY(-7px) rotate(-45deg);
}

.ds-mobile-drawer {
	display: none;
}

@media (max-width: 1024px) {
	.ds-main-navigation {
		display: none;
	}

	.ds-header-container {
		gap: 16px;
	}

	.ds-nav-toggle {
		display: flex;
	}

	.ds-mobile-drawer {
		display: block;
		max-height: 0;
		overflow: hidden;
		background: var(--n-surface);
		border-top: 1px solid var(--n-line);
		opacity: 0;
		transition: max-height 0.3s ease, opacity 0.2s ease;
	}

	.ds-mobile-drawer.is-open {
		max-height: 75vh;
		overflow-y: auto;
		opacity: 1;
	}

	.ds-mobile-drawer__inner {
		padding: 18px 4%;
	}

	.ds-mobile-nav-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ds-mobile-nav-list .menu-item {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ds-mobile-nav-list > .menu-item > a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--n-line-subtle);
		color: var(--n-text) !important;
		font-family: var(--n-font-sans);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		transition: color 0.2s ease;
	}

	.ds-mobile-nav-list > .menu-item > a:hover,
	.ds-mobile-nav-list > .menu-item > a:focus,
	.ds-mobile-nav-list > .current-menu-item > a,
	.ds-mobile-nav-list > .current_page_item > a {
		color: var(--n-gold) !important;
	}

	.ds-site-header .ds-mobile-nav-list .sub-menu {
		position: static;
		top: auto;
		left: auto;
		z-index: auto;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 18px;
		list-style: none;
		background: transparent;
		border: 0;
		border-left: 1px solid var(--n-line);
		clip-path: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.ds-site-header .ds-mobile-nav-list .sub-menu a {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--n-line-subtle);
		color: var(--n-text-muted) !important;
		font-family: var(--n-font-sans);
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		transition: color 0.2s ease;
	}

	.ds-site-header .ds-mobile-nav-list .sub-menu a:hover,
	.ds-site-header .ds-mobile-nav-list .sub-menu a:focus,
	.ds-site-header .ds-mobile-nav-list .sub-menu .current-menu-item > a,
	.ds-site-header .ds-mobile-nav-list .sub-menu .current_page_item > a {
		color: var(--n-gold) !important;
	}

	body.ds-nav-open {
		overflow: hidden;
	}
}

@media (max-width: 768px) {
	.ds-ff-top-promo__text {
		display: none;
	}

	.ds-header-logo {
		height: 36px;
	}

	.ds-site-header .ds-btn--header {
		padding: 10px 16px;
		font-size: 11px;
	}

	.ds-header-container {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ---------------------------------------------------------------------------
 * 21. Site Footer
 * ------------------------------------------------------------------------ */

.ds-site-footer,
.ds-site-footer * {
	box-sizing: border-box;
	border-radius: 0 !important;
}

.ds-site-footer {
	padding: 70px 0 0;
	background-color: var(--n-ground);
	background-image:
		radial-gradient(ellipse at 80% 0%, rgba(17, 136, 160, 0.08), transparent 60%),
		radial-gradient(ellipse at 20% 100%, rgba(228, 179, 1, 0.05), transparent 55%);
	border-top: 1px solid var(--n-line);
	color: var(--n-text-muted);
	font-family: var(--n-font-sans);
}

.ds-footer-container {
	width: 92%;
	max-width: 1240px;
	margin: 0 auto;
}

.ds-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 56px;
}

.ds-footer-logo {
	display: block;
	height: 40px;
	width: auto;
	margin-bottom: 18px;
}

.ds-footer-motto {
	margin: 0 0 10px;
	color: var(--n-gold);
	font-family: var(--n-font-display);
	font-size: 26px;
	letter-spacing: 1px;
}

.ds-footer-desc {
	max-width: 340px;
	margin: 0 0 20px;
	color: var(--n-text-muted);
	font-size: 14px;
	line-height: 1.65;
}

.ds-footer-stats-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-badge);
	color: var(--n-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.ds-footer-stats-dot {
	width: 8px;
	height: 8px;
	background: var(--n-gold);
	box-shadow: 0 0 8px var(--n-gold-glow);
	flex-shrink: 0;
}

.ds-footer-heading {
	margin: 0 0 18px;
	color: var(--n-text);
	font-family: var(--n-font-display);
	font-size: 18px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.ds-footer-heading::after {
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 10px;
	background: var(--n-gold);
	box-shadow: 0 0 8px var(--n-gold-glow);
	content: '';
}

.ds-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-footer-links .menu-item,
.ds-footer-links > li {
	margin: 0 0 11px;
	padding: 0;
}

.ds-footer-links a {
	display: inline-block;
	color: var(--n-text-muted) !important;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.ds-footer-links a:hover,
.ds-footer-links a:focus {
	color: var(--n-gold) !important;
	transform: translateX(3px);
}

.ds-site-footer .ds-footer-links .ds-footer-gold-link {
	color: var(--n-gold) !important;
	font-weight: 700;
}

.ds-site-footer .ds-footer-links .ds-footer-gold-link:hover,
.ds-site-footer .ds-footer-links .ds-footer-gold-link:focus {
	color: #ffd333 !important;
}

.ds-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 22px 0 28px;
	border-top: 1px solid var(--n-line-subtle);
}

.ds-footer-copy,
.ds-footer-subcopy {
	margin: 0;
	color: var(--n-text-dim);
	font-size: 13px;
}

.ds-footer-subcopy {
	margin-left: auto;
	text-align: right;
}

@media (max-width: 1024px) {
	.ds-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}

	.ds-footer-col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.ds-site-footer {
		padding-top: 48px;
	}

	.ds-footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ds-footer-desc {
		max-width: none;
	}

	.ds-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.ds-footer-subcopy {
		margin-left: 0;
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
 * 22. Responsive Media Queries
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ds-ff-hero__grid,
	.ds-ff-about__grid,
	.ds-ff-faq__grid,
	.ds-ff-testimonials__grid,
	.ds-ff-bento__grid,
	.ds-ff-twoways__grid {
		grid-template-columns: 1fr;
	}

	.ds-ff-tree__counties-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ds-ff-pillars__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ds-ff-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ds-ff-pricing__grid {
		grid-template-columns: 1fr;
	}

	.ds-ff-plan--featured {
		transform: none;
	}
}

@media (max-width: 768px) {
	.ds-ff-tree__counties-grid {
		grid-template-columns: 1fr;
	}

	.ds-ff-tree__branch-bar {
		display: none;
	}

	.ds-ff-tree__county-stem {
		display: none;
	}

	.ds-ff-pillars__grid,
	.ds-ff-stats-grid {
		grid-template-columns: 1fr;
	}

	.ds-ff-hero {
		padding: 100px 0 60px;
	}

	.ds-ff-hero-badge {
		position: static;
		margin-top: 20px;
	}
}

/* ---------------------------------------------------------------------------
 * 23. Chrome Corrections
 *
 * Three fixes applied after the header/footer chrome went in:
 *   a) The promo bar is a GOLD bar with a TEAL button, not the reverse.
 *   b) The sticky header must clear the WordPress admin bar for logged-in users.
 *   c) The featured plan's "MOST POPULAR" badge must escape the card's chamfer.
 * ------------------------------------------------------------------------ */

/* --- a) Gold promo bar with a teal call to action ----------------------- */

.ds-ff-top-promo {
	position: relative;
	padding: 12px 0;
	background-color: var(--n-gold);
	background-image: linear-gradient(
		90deg,
		#c99b00 0%,
		var(--n-gold) 16%,
		#ffd84d 50%,
		var(--n-gold) 84%,
		#c99b00 100%
	);
	border-bottom: 2px solid var(--n-gold-dim);
	box-shadow: 0 2px 24px rgba(228, 179, 1, 0.40);
}

.ds-ff-top-promo__inner {
	gap: 16px;
}

/* Dark ink badge — a gold badge would vanish on the new gold bar. */
.ds-ff-top-promo__tag {
	padding: 5px 11px;
	background: #021010;
	color: var(--n-gold);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.ds-ff-top-promo__text {
	color: #100c00;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.ds-ff-top-promo__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	background: var(--n-teal);
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none !important;
	clip-path: var(--n-cut-control);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.42);
	transition: all 0.2s ease;
}

.ds-ff-top-promo__link:hover,
.ds-ff-top-promo__link:focus {
	background: #16a8c6;
	color: #ffffff !important;
	text-decoration: none !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* --- b) Clear the WordPress admin bar ----------------------------------- */

/*
 * The admin bar is position:fixed and 32px tall (46px under 782px wide), so a
 * header stuck to top:0 slides underneath it and the nav labels get sheared in
 * half. WordPress publishes its own height as a custom property; the literal is
 * only the fallback. Below 600px core switches the bar to position:absolute, so
 * it scrolls away and the header goes back to the very top.
 */
body.admin-bar .ds-site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .ds-site-header {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .ds-site-header {
		top: 0;
	}
}

/* --- c) Let the "MOST POPULAR" badge overlap the card edge -------------- */

/*
 * clip-path clips an element's descendants as well as the element itself, so
 * the card's 16px corner chamfer was slicing the top off the badge sitting at
 * top:-14px. Painting the chamfered frame on a ::before layer leaves the card
 * itself unclipped, so the badge can hang over the edge the way it was meant to.
 * inset:-1px so the layer covers the border box, not the padding box.
 */
.ds-ff-card.ds-ff-plan--featured {
	clip-path: none !important;
	overflow: visible;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.ds-ff-card.ds-ff-plan--featured::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 0;
	background: linear-gradient(180deg, rgba(228, 179, 1, 0.08) 0%, rgba(16, 34, 38, 0.98) 30%);
	border: 1px solid var(--n-gold);
	clip-path: var(--n-cut-card);
	filter: drop-shadow(0 0 18px rgba(228, 179, 1, 0.30));
	pointer-events: none;
	transition: filter 0.25s ease;
}

.ds-ff-card.ds-ff-plan--featured:hover {
	box-shadow: none;
}

.ds-ff-card.ds-ff-plan--featured:hover::before {
	filter: drop-shadow(0 0 26px rgba(228, 179, 1, 0.52));
}

/* Keep the real content above the painted frame. The badge is excluded: it is
   absolutely positioned above the card edge, and forcing position:relative here
   would drop it back into normal flow. */
.ds-ff-card.ds-ff-plan--featured > *:not(.ds-ff-plan__badge) {
	position: relative;
	z-index: 1;
}

/* The lift is what reads as three-dimensional. */
.ds-ff-card.ds-ff-plan--featured .ds-ff-plan__badge {
	z-index: 3;
	padding: 5px 18px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
 * 24. Section Surfaces, Angled Transitions & Photo Bands
 *
 * Neutral grain separates the dark bands without tinting them teal. Alternating
 * section cuts expose the next surface beneath, while two restrained photo bands
 * give the long page a pair of human, full-bleed moments.
 * ------------------------------------------------------------------------ */

.ds-ff-about,
.ds-ff-pillars,
.ds-ff-stats-bar,
.ds-ff-bento,
.ds-ff-leaders,
.ds-ff-pricing,
.ds-ff-action-banner,
.ds-ff-faq,
.ds-ff-events,
.ds-ff-testimonials {
	position: relative;
	padding: 100px 0 150px;
	border-bottom: 0;
}

.ds-ff-about,
.ds-ff-stats-bar,
.ds-ff-leaders,
.ds-ff-action-banner,
.ds-ff-events {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
}

.ds-ff-pillars,
.ds-ff-bento,
.ds-ff-pricing,
.ds-ff-faq,
.ds-ff-testimonials {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 70px));
}

.ds-ff-pillars,
.ds-ff-stats-bar,
.ds-ff-bento,
.ds-ff-leaders,
.ds-ff-action-banner,
.ds-ff-faq,
.ds-ff-events,
.ds-ff-testimonials,
.ds-ff-twoways {
	margin-top: -70px;
}

.ds-ff-about {
	z-index: 12;
}

.ds-ff-pillars {
	z-index: 11;
}

.ds-ff-stats-bar {
	z-index: 10;
}

.ds-ff-bento {
	z-index: 9;
}

.ds-ff-leaders {
	z-index: 8;
}

.ds-ff-partners-strip {
	position: relative;
	z-index: 7;
	margin-top: -70px;
	padding: 110px 0 40px;
}

.ds-ff-pricing {
	z-index: 6;
}

.ds-ff-action-banner {
	z-index: 5;
}

.ds-ff-faq {
	z-index: 4;
}

.ds-ff-events {
	z-index: 3;
}

.ds-ff-testimonials {
	z-index: 2;
}

.ds-ff-twoways {
	position: relative;
	z-index: 1;
	border-bottom: 0;
}

@media (max-width: 1024px) {
	.ds-ff-about,
	.ds-ff-pillars,
	.ds-ff-stats-bar,
	.ds-ff-bento,
	.ds-ff-leaders,
	.ds-ff-pricing,
	.ds-ff-action-banner,
	.ds-ff-faq,
	.ds-ff-events,
	.ds-ff-testimonials {
		padding: 90px 0 120px;
	}

	.ds-ff-about,
	.ds-ff-stats-bar,
	.ds-ff-leaders,
	.ds-ff-action-banner,
	.ds-ff-events {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
	}

	.ds-ff-pillars,
	.ds-ff-bento,
	.ds-ff-pricing,
	.ds-ff-faq,
	.ds-ff-testimonials {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px));
	}

	.ds-ff-pillars,
	.ds-ff-stats-bar,
	.ds-ff-bento,
	.ds-ff-leaders,
	.ds-ff-action-banner,
	.ds-ff-faq,
	.ds-ff-events,
	.ds-ff-testimonials,
	.ds-ff-twoways {
		margin-top: -40px;
	}

	.ds-ff-partners-strip {
		margin-top: -40px;
		padding-top: 80px;
	}

	.ds-ff-section.ds-ff-action-banner {
		background-attachment: scroll;
	}
}

@media (max-width: 768px) {
	.ds-ff-about,
	.ds-ff-pillars,
	.ds-ff-stats-bar,
	.ds-ff-bento,
	.ds-ff-leaders,
	.ds-ff-pricing,
	.ds-ff-action-banner,
	.ds-ff-faq,
	.ds-ff-events,
	.ds-ff-testimonials {
		padding: 72px 0 92px;
	}

	.ds-ff-about,
	.ds-ff-stats-bar,
	.ds-ff-leaders,
	.ds-ff-action-banner,
	.ds-ff-events {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
	}

	.ds-ff-pillars,
	.ds-ff-bento,
	.ds-ff-pricing,
	.ds-ff-faq,
	.ds-ff-testimonials {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 24px));
	}

	.ds-ff-pillars,
	.ds-ff-stats-bar,
	.ds-ff-bento,
	.ds-ff-leaders,
	.ds-ff-action-banner,
	.ds-ff-faq,
	.ds-ff-events,
	.ds-ff-testimonials,
	.ds-ff-twoways {
		margin-top: -24px;
	}

	.ds-ff-partners-strip {
		margin-top: -24px;
		padding-top: 64px;
	}
}

/* ---------------------------------------------------------------------------
 * 26. Section Surface Map
 * ------------------------------------------------------------------------ */

/* Shared texture surface treatment. */
.ds-fitfat-home .ds-ff-section.ds-ff-about,
.ds-fitfat-home .ds-ff-section.ds-ff-bento,
.ds-fitfat-home .ds-ff-section.ds-ff-faq {
	background-color: var(--n-ground);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto, cover;
	background-blend-mode: normal, normal;
}

/* Shared photo-band treatment. */
.ds-fitfat-home .ds-ff-section.ds-ff-stats-bar,
.ds-fitfat-home .ds-ff-section.ds-ff-testimonials {
	background-color: var(--n-ground);
	background-repeat: no-repeat;
	background-size: cover;
}

/* About — soft structural paper creases. */
.ds-fitfat-home .ds-ff-section.ds-ff-about {
	background-image:
		linear-gradient(rgba(5, 5, 5, 0.82), rgba(5, 5, 5, 0.82)),
		url('/wp-content/uploads/2026/08/ds-paper-crease.jpg');
}

/* Pillars — solid black. */
.ds-fitfat-home .ds-ff-section.ds-ff-pillars {
	background-color: var(--n-ground);
	background-image: none;
}

/* Stats bar — living-room photo band. */
.ds-fitfat-home .ds-ff-section.ds-ff-stats-bar {
	background-image:
		linear-gradient(180deg, rgba(5, 5, 5, 0.84) 0%, rgba(5, 5, 5, 0.62) 50%, rgba(5, 5, 5, 0.88) 100%),
		url('/wp-content/uploads/2026/08/gallery-living-room.jpg');
	background-position: center 30%;
}

/* Bento — heavy neutral grunge. Tiled at 70% rather than `cover`: at full size the
   speckle reads as a close-up, and below about 50% the tile seams start to show. */
.ds-fitfat-home .ds-ff-section.ds-ff-bento {
	background-image:
		linear-gradient(rgba(5, 5, 5, 0.67), rgba(5, 5, 5, 0.67)),
		url('/wp-content/uploads/2026/08/ds-grain-heavy.jpg');
	background-size: auto, 70% auto;
	background-repeat: no-repeat, repeat;
}

/* Leaders — solid black. Deliberately untextured: the bento above it carries the
   grunge, and two patterned bands touching reads as noise rather than variety. */
.ds-fitfat-home .ds-ff-section.ds-ff-leaders {
	background-color: var(--n-ground);
	background-image: none;
}

/* Pricing and action banner — one continuous warm-gold slab. */
.ds-fitfat-home .ds-ff-section.ds-ff-pricing,
.ds-fitfat-home .ds-ff-section.ds-ff-action-banner {
	background-color: var(--n-ground);
	background-image:
		radial-gradient(ellipse 100% 180% at 50% 50%, rgba(228, 179, 1, 0.07), transparent 82%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(228, 179, 1, 0.012) 50%, rgba(255, 255, 255, 0.018));
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Pricing — open the bottom edge into the shared slab. */
.ds-fitfat-home .ds-ff-section.ds-ff-pricing {
	padding-bottom: 40px;
	clip-path: none;
}

/* Action banner — close the seam while retaining its bottom cut. */
.ds-fitfat-home .ds-ff-section.ds-ff-action-banner {
	margin-top: 0;
	padding-top: 40px;
}

/* FAQ — subtle, even crinkled paper. */
.ds-fitfat-home .ds-ff-section.ds-ff-faq {
	background-image:
		linear-gradient(rgba(5, 5, 5, 0.75), rgba(5, 5, 5, 0.75)),
		url('/wp-content/uploads/2026/08/ds-paper-soft.jpg');
}

/* Events — solid black. */
.ds-fitfat-home .ds-ff-section.ds-ff-events {
	background-color: var(--n-ground);
	background-image: none;
}

/* Testimonials — cookout photo band. */
.ds-fitfat-home .ds-ff-section.ds-ff-testimonials {
	background-image:
		linear-gradient(270deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.66) 100%),
		url('/wp-content/uploads/2026/08/gallery-cookout.jpg');
	background-position: center 35%;
}

/* Two ways — scratched paper over a restrained bottom teal glow. */
.ds-fitfat-home .ds-ff-section.ds-ff-twoways {
	background-color: var(--n-ground);
	background-image:
		linear-gradient(rgba(5, 5, 5, 0.89), rgba(5, 5, 5, 0.89)),
		url('/wp-content/uploads/2026/08/ds-paper-scratch.jpg'),
		radial-gradient(ellipse 90% 70% at 20% 100%, rgba(17, 136, 160, 0.10), transparent 72%);
	background-repeat: no-repeat;
	background-position: center, center, 20% 100%;
	background-size: auto, cover, auto;
	background-blend-mode: normal, normal, normal;
}

@media (max-width: 1024px) {
	.ds-fitfat-home .ds-ff-section.ds-ff-pricing {
		padding-bottom: 36px;
	}

	.ds-fitfat-home .ds-ff-section.ds-ff-action-banner {
		margin-top: 0;
		padding-top: 36px;
	}
}

@media (max-width: 768px) {
	.ds-fitfat-home .ds-ff-section.ds-ff-pricing {
		padding-bottom: 32px;
	}

	.ds-fitfat-home .ds-ff-section.ds-ff-action-banner {
		margin-top: 0;
		padding-top: 32px;
	}
}

/* ---------------------------------------------------------------------------
 * 27. Partner Strip Transition
 *
 * The partner logo strip sits between the leaders section and the merged gold
 * slab. It already pulls up under the leaders cut, but it had no cut of its own,
 * so the gold slab began on a hard flat edge and broke the diagonal rhythm.
 * Giving the strip a left-lean cut (leaders leans right) and letting the pricing
 * block slide up underneath restores the alternation.
 *
 * Its background was also still #01090a — the old green-black — so it read as a
 * faint green band between two neutral ones.
 * ------------------------------------------------------------------------ */

.ds-fitfat-home .ds-ff-partners-strip {
	background: #0a0a0b;
	border-top-color: var(--n-line-subtle);
	border-bottom-color: transparent;
	padding: 40px 0 96px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 70px));
}

.ds-fitfat-home .ds-ff-section.ds-ff-pricing {
	margin-top: -70px;
}

@media (max-width: 1024px) {
	.ds-fitfat-home .ds-ff-partners-strip {
		padding: 36px 0 70px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px));
	}

	.ds-fitfat-home .ds-ff-section.ds-ff-pricing {
		margin-top: -40px;
	}
}

@media (max-width: 768px) {
	.ds-fitfat-home .ds-ff-partners-strip {
		padding: 32px 0 52px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 24px));
	}

	.ds-fitfat-home .ds-ff-section.ds-ff-pricing {
		margin-top: -24px;
	}
}

/* =========================================================================
 * SEAMLESS SECTION FLOW & PAPER/GRUNGE OVERLAYS (ORGANIC TRANSITIONS)
 * =========================================================================
 * To revert: run `cp dadsquad-neon.css.bak-pre-transitions-20260823 dadsquad-neon.css`
 * or add class `ds-classic-borders` to the main wrapper.
 */

/* 1. Eliminate hard flat lines & enable continuous canvas flow */
.ds-ff-section {
    position: relative;
    padding: 110px 0;
    background-color: var(--n-ground);
    border-bottom: none !important; /* Replaced flat 1px line with organic fades */
}

/* Ensure container content sits above texture overlays */
.ds-ff-section > .ds-ff-container {
    position: relative;
    z-index: 2;
}

/* 2. Paper & Grunge Texture Overlays per section */
.ds-ff-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.22;
    background-image: url('/wp-content/uploads/2026/08/texture-paper.png');
    background-repeat: repeat;
    background-size: 450px 450px;
    background-blend-mode: overlay;
    /* Soft top & bottom vignette fade so textures bleed seamlessly */
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 40px, rgba(0,0,0,1) calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 40px, rgba(0,0,0,1) calc(100% - 40px), transparent 100%);
}

/* Alt sections (Pillars, Bento, Pricing, FAQ, Testimonials) with Rich Grunge & Atmosphere */
.ds-ff-section--alt {
    background-color: var(--n-surface) !important;
    background-image: 
        radial-gradient(ellipse at 85% 15%, rgba(17, 136, 160, 0.12), transparent 60%),
        radial-gradient(ellipse at 15% 85%, rgba(228, 179, 1, 0.08), transparent 55%) !important;
}

.ds-ff-section--alt::before {
    background-image: url('/wp-content/uploads/2026/08/texture-grunge.png') !important;
    background-size: 380px 380px !important;
    opacity: 0.25 !important;
}

/* Top & Bottom seamless gradient dissolves between ground and surface */
.ds-ff-section--alt::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        180deg,
        var(--n-ground) 0%,
        rgba(5, 5, 5, 0.4) 60px,
        transparent 120px,
        transparent calc(100% - 120px),
        rgba(5, 5, 5, 0.4) calc(100% - 60px),
        var(--n-ground) 100%
    );
}

/* 3. Hero Section Smooth Bottom Bleed */
.ds-ff-hero {
    border-bottom: none !important;
}

.ds-ff-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.65) 50%, var(--n-ground) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 4. Stats Counter Bar: Tactical Band with Feathered Fade */
.ds-ff-stats-bar {
    padding: 70px 0;
    background: #020808 !important;
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
}

.ds-ff-stats-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2026/08/texture-overlay-1.png') !important;
    background-size: 400px !important;
    opacity: 0.28 !important;
    pointer-events: none;
    z-index: 1;
}

.ds-ff-stats-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        var(--n-surface) 0%,
        transparent 50px,
        transparent calc(100% - 50px),
        var(--n-surface) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* 5. Feathered Dash Dividers & Organic Accent Separators */
.ds-ff-dash-divider,
.ds-ff-divider--dash {
    position: relative;
    width: 100%;
    max-width: 1120px;
    height: 1px;
    margin: 40px auto 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(17, 136, 160, 0.2) 15%,
        rgba(17, 136, 160, 0.5) 35%,
        rgba(228, 179, 1, 0.6) 50%,
        rgba(17, 136, 160, 0.5) 65%,
        rgba(17, 136, 160, 0.2) 85%,
        transparent 100%
    );
    mask-image: repeating-linear-gradient(90deg, #000 0, #000 6px, transparent 6px, transparent 14px);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, #000 6px, transparent 6px, transparent 14px);
    z-index: 3;
}

/* Diamond Notch Center Accent for Dash Dividers */
.ds-ff-dash-divider::after,
.ds-ff-divider--dash::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    background: var(--n-gold);
    box-shadow: 0 0 10px var(--n-gold-glow);
}

/* Gold Variant Dash Divider */
.ds-ff-divider--dash-gold {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 1px;
    margin: 30px auto 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(228, 179, 1, 0.2) 20%,
        rgba(228, 179, 1, 0.65) 50%,
        rgba(228, 179, 1, 0.2) 80%,
        transparent 100%
    );
    mask-image: repeating-linear-gradient(90deg, #000 0, #000 8px, transparent 8px, transparent 16px);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, #000 8px, transparent 8px, transparent 16px);
    z-index: 3;
}

/* 6. Specific Section Character Textures */
.ds-ff-about::before {
    background-image: url('/wp-content/uploads/2026/08/texture-paper.png') !important;
    opacity: 0.24 !important;
}

.ds-ff-bento::before {
    background-image: url('/wp-content/uploads/2026/08/texture-overlay-1.png') !important;
    opacity: 0.25 !important;
}

.ds-ff-leaders::before {
    background-image: url('/wp-content/uploads/2026/08/texture-paper.png') !important;
    opacity: 0.20 !important;
}

.ds-ff-pricing::before {
    background-image: url('/wp-content/uploads/2026/08/texture-grunge.png') !important;
    opacity: 0.26 !important;
}

.ds-ff-action-banner {
    padding: 80px 0;
    background: radial-gradient(circle at 50% 50%, rgba(17, 136, 160, 0.14), transparent 70%), var(--n-ground) !important;
}

.ds-ff-faq::before {
    background-image: url('/wp-content/uploads/2026/08/texture-overlay-2.png') !important;
    opacity: 0.22 !important;
}

.ds-ff-events::before {
    background-image: url('/wp-content/uploads/2026/08/texture-paper.png') !important;
    opacity: 0.20 !important;
}

.ds-ff-testimonials::before {
    background-image: url('/wp-content/uploads/2026/08/texture-overlay-1.png') !important;
    opacity: 0.24 !important;
}

.ds-ff-twoways {
    padding: 120px 0 140px;
    background: linear-gradient(180deg, var(--n-ground) 0%, #010808 100%) !important;
}

.ds-ff-twoways::before {
    background-image: url('/wp-content/uploads/2026/08/texture-paper.png') !important;
    opacity: 0.22 !important;
}

/* =========================================================================
 * CLASSIC BORDERS ROLLBACK OVERRIDE (For instant toggle)
 * =========================================================================
 * Add class `ds-classic-borders` to <div class="ds-fitfat-home"> to restore
 * flat 1px lines instantly without file replacement.
 */
.ds-classic-borders .ds-ff-section {
    border-bottom: 1px solid var(--n-line-subtle) !important;
}
.ds-classic-borders .ds-ff-section::before,
.ds-classic-borders .ds-ff-section::after {
    display: none !important;
}
.ds-classic-borders .ds-ff-hero {
    border-bottom: 1px solid var(--n-line) !important;
}
.ds-classic-borders .ds-ff-stats-bar {
    border-top: 1px solid var(--n-line) !important;
    border-bottom: 1px solid var(--n-line) !important;
}

/* =========================================================================
 * PRECISE CONTINUOUS FLOW: SECTION 2 (STORY) -> SECTION 3 (PILLARS) -> SECTION 4 (STATS)
 * =========================================================================
 */

/* 1. Global Section Reset: Zero hard flat borders */
.ds-ff-section {
    border-bottom: none !important;
    position: relative;
}

/* 2. SECTION 2 (About / Movement Built for Dads) & SECTION 3 (Four Pillars)
 * Both share the unified continuous environment: Gold on left, Teal on right.
 */
.ds-ff-about {
    background-color: var(--n-surface, #0c0f12) !important;
    background-image: 
        radial-gradient(ellipse at 88% 20%, rgba(17, 136, 160, 0.14), transparent 60%),
        radial-gradient(ellipse at 12% 70%, rgba(228, 179, 1, 0.09), transparent 55%) !important;
    padding: 100px 0 60px !important;
    border-bottom: none !important;
}

/* Remove paper texture override on about if present */
.ds-ff-about::before {
    display: none !important;
}

.ds-ff-pillars {
    background-color: var(--n-surface, #0c0f12) !important;
    background-image: 
        radial-gradient(ellipse at 85% 30%, rgba(17, 136, 160, 0.12), transparent 60%),
        radial-gradient(ellipse at 15% 40%, rgba(228, 179, 1, 0.08), transparent 55%) !important;
    padding: 60px 0 120px !important;
    border-bottom: none !important;
    position: relative;
}

/* Smooth fade-to-black gradient right at the bottom transition of Section 3 */
.ds-ff-pillars::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.6) 50%, var(--n-ground, #050505) 100%) !important;
    pointer-events: none;
    z-index: 1;
}

.ds-ff-pillars > .ds-ff-container {
    position: relative;
    z-index: 2;
}

/* 3. SECTION 4 (Stats Counter Bar: 7,000 Members Strong, etc.)
 * Sits on pure solid black with zero borders above or below.
 */
.ds-ff-stats-bar {
    background-color: var(--n-ground, #050505) !important;
    background-image: none !important;
    padding: 60px 0 80px !important;
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
}

.ds-ff-stats-bar::before,
.ds-ff-stats-bar::after {
    display: none !important;
}

.ds-ff-stats-bar > .ds-ff-container {
    position: relative;
    z-index: 2;
}

/* =========================================================================
 * 28. Top Band: hero + story fade to black; pillars and stats solid black
 * =========================================================================
 * Cory, 2026-08-26: keep the green / gold / black at the very top, run the
 * hero and the story section together as one unit, and fade that atmosphere
 * out to pure black so everything from "FOUR REASONS THE PASS PAYS FOR
 * ITSELF" down through the "7,000+ MEMBERS STRONG" counters sits on solid
 * black.
 * ------------------------------------------------------------------------ */

/* Ticker ribbon bridges the hero into the story with no colour step. */
.ds-ff-ticker-wrap {
	background: #050505;
}

/* Story section: the glow lives in the top third, then ramps to pure black. */
.ds-ff-about {
	background-color: #050505 !important;
	background-image:
		radial-gradient(ellipse 64% 60% at 84% 16%, rgba(17, 136, 160, 0.23), transparent 68%),
		radial-gradient(ellipse 60% 54% at 8% 28%, rgba(228, 179, 1, 0.13), transparent 64%),
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.024) 24%, rgba(255, 255, 255, 0.013) 46%, rgba(255, 255, 255, 0) 72%) !important;
	padding: 100px 0 140px !important;
}

/* Four Pillars: solid black, no wash, no grain, no bottom vignette. */
.ds-ff-pillars {
	background-color: #050505 !important;
	background-image: none !important;
}

.ds-ff-pillars::before,
.ds-ff-pillars::after {
	display: none !important;
}

/* Stats counter bar: the same solid black, seamless with the pillars above. */
.ds-ff-stats-bar {
	background-color: #050505 !important;
	background-image: none !important;
}

/* =========================================================================
 * 29. Bento (free DadSquad hat) — dark stacked-slate wall
 * =========================================================================
 * Cory, 2026-08-26: supplied a black ledgestone wall photo for the section
 * holding the free first-edition hat offer. It sits between two solid-black
 * bands, so the angled cuts top and bottom now read as slashes of stone
 * against black. Scrim kept light because the stone is already near-black.
 * ------------------------------------------------------------------------ */

.ds-ff-bento {
	background-color: #050505 !important;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.88) 6%,
			rgba(5, 5, 5, 0.56) 17%,
			rgba(5, 5, 5, 0.48) 46%,
			rgba(5, 5, 5, 0.58) 76%,
			rgba(5, 5, 5, 0.90) 93%,
			#050505 100%),
		url('/wp-content/uploads/2026/08/ds-stone-wall.jpg') !important;
	background-size: auto, cover !important;
	background-position: center, center !important;
	background-repeat: no-repeat, no-repeat !important;
}

/* Drop the inherited grain overlay and edge vignette so the wall reads clean. */
.ds-ff-bento::before,
.ds-ff-bento::after {
	display: none !important;
}

/* Featured hat card was 88% transparent at its gold corner, so the wall showed
 * straight through the ribbon. Give it a solid panel with the gold sheen on top
 * so it reads as a lit card sitting on the stone. */
.ds-ff-bento__card--featured {
	background:
		linear-gradient(135deg, rgba(228, 179, 1, 0.15) 0%, rgba(228, 179, 1, 0.03) 38%, rgba(228, 179, 1, 0) 58%),
		linear-gradient(160deg, #15171b 0%, #101216 46%, #0b0c0e 100%) !important;
}

/* =========================================================================
 * 30. Pass slab: pricing + partner ribbon share one background
 * =========================================================================
 * Cory, 2026-08-26: the partner logos moved below the pricing table, and the
 * two now sit inside .ds-ff-pass-slab so a single untiled background runs the
 * whole height and fades out to black at the bottom. Everything below it —
 * the action banner, the FAQ and the gatherings calendar — stays solid black.
 * ------------------------------------------------------------------------ */

.ds-ff-pass-slab {
	position: relative;
	z-index: 7;
	margin-top: -70px;
	background-color: #050505;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.80) 5%,
			rgba(5, 5, 5, 0) 17%,
			rgba(5, 5, 5, 0) 77%,
			rgba(5, 5, 5, 0.86) 93%,
			#050505 100%),
		radial-gradient(ellipse 66% 46% at 82% 14%, rgba(17, 136, 160, 0.18), transparent 66%),
		radial-gradient(ellipse 72% 52% at 14% 76%, rgba(228, 179, 1, 0.11), transparent 64%),
		linear-gradient(180deg, rgba(5, 5, 5, 0.80), rgba(5, 5, 5, 0.80)),
		url('/wp-content/uploads/2026/08/ds-grain-cloud.jpg');
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: center, center, center, center, center;
	background-size: auto, auto, auto, auto, 100% 100%;
}

/* Children ride the slab background instead of painting their own. */
.ds-ff-pass-slab > .ds-ff-pricing,
.ds-ff-pass-slab > .ds-ff-partners-strip {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	margin-top: 0 !important;
	clip-path: none !important;
}

.ds-ff-pass-slab > .ds-ff-pricing::before,
.ds-ff-pass-slab > .ds-ff-pricing::after {
	display: none !important;
}

.ds-ff-pass-slab > .ds-ff-pricing {
	padding: 100px 0 30px !important;
}

.ds-ff-pass-slab > .ds-ff-partners-strip {
	padding: 20px 0 96px !important;
}

/* Everything below the slab stays solid black. */
.ds-ff-action-banner,
.ds-ff-faq,
.ds-ff-events {
	background-color: #050505 !important;
	background-image: none !important;
}

.ds-ff-action-banner::before,
.ds-ff-action-banner::after,
.ds-ff-faq::before,
.ds-ff-faq::after,
.ds-ff-events::before,
.ds-ff-events::after {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * 31. Gatherings calendar: dark event cards
 * -------------------------------------------------------------------------
 * The plugin ships light-mode cards, which on a black section read as white
 * slabs. The plugin drives every card colour from custom properties, so the
 * whole card system is redefined here rather than rule by rule. Scoped to the
 * front page only — the Events and Businesses pages keep their light body.
 * ---------------------------------------------------------------------- */

.ds-fitfat-home .ds-ff-events {
	--ds-ink: #ffffff;
	--ds-ink-soft: #a6a6ac;
	--ds-ink-faint: #6f6f76;
	--ds-line: rgba(255, 255, 255, 0.10);
	--ds-surface: #151517;
	--ds-surface-alt: #0a0a0b;

	--ds-brand: #E4B301;
	--ds-brand-dark: #c99b00;
	--ds-accent: #1188A0;
	--ds-accent-dark: #E4B301;
	--ds-ok: #1188A0;
	--ds-warn: #d8623a;

	--ds-radius: 0;
	--ds-radius-sm: 0;
	--ds-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
	--ds-shadow-lift: 0 10px 28px rgba(0, 0, 0, 0.65);
}

/* Chamfer the cards so they match the rest of the page. */
.ds-fitfat-home .ds-ff-events .ds-card {
	clip-path: var(--n-cut-card);
}

.ds-fitfat-home .ds-ff-events .ds-card a {
	color: var(--n-gold);
}

.ds-fitfat-home .ds-ff-events .ds-card__title a {
	color: #ffffff;
}

.ds-fitfat-home .ds-ff-events .ds-card__title a:hover {
	color: var(--n-gold);
}

/* The featured plan panel was 92% transparent across its top third, so the
 * slab texture bled through the pass name. Solid base, gold sheen on top. */
.ds-ff-card.ds-ff-plan--featured::before {
	background:
		linear-gradient(180deg, rgba(228, 179, 1, 0.16) 0%, rgba(228, 179, 1, 0.04) 22%, rgba(228, 179, 1, 0) 40%),
		linear-gradient(180deg, #16181c 0%, #101519 34%, #0c1114 100%) !important;
}

/* =========================================================================
 * 32. Horizontal edges on every band that fades to black
 * =========================================================================
 * Cory, 2026-08-26: the angled cuts were slicing across the two textured
 * bands, so the fade met the black on a diagonal instead of vanishing into
 * it. The boundaries either side of the stone wall and the pass slab are now
 * straight horizontal butt joints, and the gradients do the blending.
 * ------------------------------------------------------------------------ */

.ds-ff-stats-bar,
.ds-ff-bento,
.ds-ff-leaders,
.ds-ff-pass-slab,
.ds-ff-action-banner {
	clip-path: none !important;
	margin-top: 0 !important;
}

/* The pull-ups were absorbing 70px of the bottom padding on each of these. */
.ds-ff-stats-bar,
.ds-ff-bento,
.ds-ff-leaders {
	padding-bottom: 90px !important;
}

/* Same treatment for the testimonial band and the sign-up section: straight
 * horizontal edges, and the wash fades up out of black and back down into it
 * rather than meeting it on a cut. */
.ds-ff-events,
.ds-ff-testimonials,
.ds-ff-twoways {
	clip-path: none !important;
	margin-top: 0 !important;
}

.ds-ff-testimonials {
	background-color: #050505 !important;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.82) 6%,
			rgba(5, 5, 5, 0) 20%,
			rgba(5, 5, 5, 0) 76%,
			rgba(5, 5, 5, 0.88) 94%,
			#050505 100%),
		radial-gradient(ellipse 64% 52% at 84% 18%, rgba(17, 136, 160, 0.16), transparent 66%),
		radial-gradient(ellipse 66% 54% at 12% 82%, rgba(228, 179, 1, 0.10), transparent 62%) !important;
}

.ds-ff-testimonials::after {
	display: none !important;
}

.ds-ff-twoways {
	background-color: #050505 !important;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.84) 6%,
			rgba(5, 5, 5, 0) 22%,
			rgba(5, 5, 5, 0) 100%),
		radial-gradient(ellipse 80% 60% at 22% 92%, rgba(17, 136, 160, 0.12), transparent 70%) !important;
}

/* =========================================================================
 * 33. "Let's build real community together" — park embrace band
 * =========================================================================
 * Cory, 2026-08-26: picked the two-men-embracing-in-a-park clip from Drive
 * for this section. It is a video, so this is a still lifted from 2.5s in,
 * desaturated hard because the original is a very green park and green is
 * the thing we spent the day taking off this page. Horizontal edges, fading
 * up out of black and back down into it like every other band.
 * ------------------------------------------------------------------------ */

.ds-ff-action-banner {
	background-color: #050505 !important;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.93) 8%,
			rgba(5, 5, 5, 0.82) 22%,
			rgba(5, 5, 5, 0.80) 74%,
			rgba(5, 5, 5, 0.93) 92%,
			#050505 100%),
		url('/wp-content/uploads/2026/08/ds-park-embrace.jpg') !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: center, center 34% !important;
	background-size: auto, cover !important;
	padding: 118px 0 128px !important;
}

/* =========================================================================
 * 34. Community CTA band + tighter gathering cards
 * =========================================================================
 * Cory, 2026-08-26: the join box was 689px of card for four lines of copy,
 * and it was stacking rather than sitting side by side because .ds-ff-grid--2
 * was never written. Replaced with a compact band laid straight on the park
 * photo. Gathering cards tightened at the same time.
 * ------------------------------------------------------------------------ */

.ds-ff-action-cta {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) auto;
	gap: 60px;
	align-items: center;
}

.ds-ff-action-cta__copy .ds-ff-title {
	font-size: clamp(30px, 3.3vw, 46px);
	margin: 12px 0 14px;
}

.ds-ff-action-cta__copy .ds-ff-lede {
	margin: 0;
	max-width: 560px;
}

.ds-ff-action-cta__act {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-left: 44px;
	border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.ds-ff-action-cta__price {
	font-family: var(--n-font-display);
	font-size: 46px;
	line-height: 1;
	color: #ffffff;
	white-space: nowrap;
}

.ds-ff-action-cta__per {
	margin-left: 8px;
	font-family: var(--n-font-body, inherit);
	font-size: 15px;
	letter-spacing: 1px;
	color: var(--n-text-muted);
}

.ds-ff-action-cta__note {
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--n-text-dim);
}

@media (max-width: 900px) {
	.ds-ff-action-cta {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.ds-ff-action-cta__act {
		padding-left: 0;
		padding-top: 26px;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.13);
	}
}

/* Gathering cards: shorter photo, tighter body, smaller type. */
.ds-fitfat-home .ds-ff-events {
	padding: 90px 0 100px !important;
}

.ds-fitfat-home .ds-ff-events .ds-card__media {
	aspect-ratio: 16 / 8;
}

.ds-fitfat-home .ds-ff-events .ds-card__body {
	padding: 16px 18px 18px;
	gap: 7px;
}

.ds-fitfat-home .ds-ff-events .ds-card__eyebrow {
	font-size: .72rem;
	letter-spacing: .06em;
}

.ds-fitfat-home .ds-ff-events .ds-card__title {
	font-size: 1.02rem;
	line-height: 1.25;
}

.ds-fitfat-home .ds-ff-events .ds-meta {
	gap: 3px;
}

.ds-fitfat-home .ds-ff-events .ds-meta__item {
	font-size: .8rem;
	padding-left: 20px;
}

.ds-fitfat-home .ds-ff-events .ds-card__cta {
	padding-top: 4px;
	font-size: .82rem;
}

.ds-fitfat-home .ds-ff-events .ds-datebadge {
	min-width: 46px;
	padding: 5px 4px 7px;
	left: 12px;
	bottom: 12px;
}

.ds-fitfat-home .ds-ff-events .ds-datebadge__day {
	font-size: 1.2rem;
}

/* =========================================================================
 * 35. "Join the movement" — campfire glow
 * =========================================================================
 * Cory, 2026-08-26: asked for the campfire shot behind the sign-up section.
 * It is a video clip too, so this is a still from 3s in where the flame
 * spreads widest. Sat at the bottom at full width rather than cropped, so
 * the fire reads as a glow the forms sit around, with black above it.
 * ------------------------------------------------------------------------ */

.ds-ff-twoways {
	background-color: #050505 !important;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.97) 18%,
			rgba(5, 5, 5, 0.90) 40%,
			rgba(5, 5, 5, 0.82) 66%,
			rgba(5, 5, 5, 0.76) 100%),
		url('/wp-content/uploads/2026/08/ds-campfire.jpg') !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: center, center bottom !important;
	background-size: auto, cover !important;
	padding: 110px 0 110px !important;
}

.ds-ff-twoways::before {
	display: none !important;
}

/* =========================================================================
 * 36. DadSquad+ Pass page (template-dadsquad-plus.php)
 * =========================================================================
 * Cory, 2026-08-26: a standalone page following the order of the DadSquad+
 * PDF, fitted to this template. Same band language as the home page: mostly
 * solid black, three treated bands with horizontal edges that fade in and
 * out, and no two textures touching.
 * ------------------------------------------------------------------------ */

.ds-dsplus .ds-ff-section {
	padding: 100px 0;
	background-color: #050505;
	border-bottom: 0;
	clip-path: none;
	margin-top: 0;
}

/* --- 1. Hero ----------------------------------------------------------- */

.ds-dsplus-hero {
	padding: 130px 0 110px !important;
	background-image:
		radial-gradient(ellipse 62% 60% at 84% 16%, rgba(17, 136, 160, 0.20), transparent 68%),
		radial-gradient(ellipse 58% 54% at 6% 30%, rgba(228, 179, 1, 0.11), transparent 64%);
}

.ds-dsplus-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 60px;
	align-items: center;
}

.ds-dsplus-hero__tagline {
	margin: 0 0 18px;
	font-family: var(--n-font-display);
	font-size: clamp(20px, 2.3vw, 28px);
	letter-spacing: 1px;
	color: #ffffff;
}

.ds-dsplus-hero__photo {
	height: 420px;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--n-line);
}

.ds-dsplus-hero__aside {
	margin-top: 22px;
	padding-left: 16px;
	border-left: 2px solid var(--n-teal);
}

.ds-dsplus-hero__aside p {
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--n-text-muted);
}

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

.ds-dsplus-price-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 28px 0 30px;
}

.ds-dsplus-price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid var(--n-gold);
	font-family: var(--n-font-display);
	font-size: 34px;
	line-height: 1;
	color: var(--n-gold);
	white-space: nowrap;
}

.ds-dsplus-price__per {
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--n-text-muted);
}

.ds-dsplus-price__note {
	max-width: 280px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--n-text-muted);
}

/* --- 2 + 8. Numbered reason cards -------------------------------------- */

.ds-dsplus-reasons__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ds-dsplus-reasons__grid > :nth-child(2),
.ds-dsplus-reasons__grid > :nth-child(4) {
	margin-top: 44px;
}

.ds-dsplus-reason {
	padding: 32px 30px;
}

.ds-dsplus-reason__num {
	display: block;
	margin-bottom: 14px;
	font-family: var(--n-font-display);
	font-size: 46px;
	line-height: 1;
	color: var(--n-teal);
}

.ds-dsplus-reason__title {
	margin: 0 0 10px;
	font-family: var(--n-font-display);
	font-size: 19px;
	letter-spacing: 0.5px;
	color: #ffffff;
}

.ds-dsplus-reason__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--n-text-muted);
}

/* --- 3. Split bands ----------------------------------------------------- */

.ds-dsplus-split {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) auto;
	gap: 52px;
	align-items: center;
}

.ds-dsplus-split__copy .ds-ff-title {
	margin: 0 0 12px;
	font-size: clamp(26px, 3vw, 40px);
}

.ds-dsplus-split__copy .ds-ff-subtitle {
	margin: 0;
}

.ds-dsplus-split__title {
	margin: 0 !important;
	font-size: clamp(22px, 2.4vw, 32px) !important;
}

.ds-dsplus-coffee {
	padding: 76px 0 !important;
}

.ds-dsplus-merchants .ds-dsplus-split {
	margin-top: 60px;
	padding-top: 44px;
	border-top: 1px solid var(--n-line-subtle, rgba(255, 255, 255, 0.08));
}

/* --- 4 + 11. Copy beside a photo --------------------------------------- */

.ds-dsplus-more__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}

.ds-dsplus-more__photo {
	min-height: 460px;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--n-line);
}

.ds-dsplus-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 26px 0 32px;
}

.ds-dsplus-stat__num {
	display: block;
	font-family: var(--n-font-display);
	font-size: 24px;
	line-height: 1.15;
	color: var(--n-gold);
}

.ds-dsplus-stat__lbl {
	display: block;
	margin-top: 7px;
	font-size: 10px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--n-text-dim);
}

/* --- 5. Free hat -------------------------------------------------------- */

.ds-dsplus-hat {
	background-color: #050505;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.88) 7%,
			rgba(5, 5, 5, 0.62) 20%,
			rgba(5, 5, 5, 0.56) 76%,
			rgba(5, 5, 5, 0.90) 93%,
			#050505 100%),
		url('/wp-content/uploads/2026/08/ds-stone-wall.jpg');
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: auto, cover;
}

.ds-dsplus-hat__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
	align-items: center;
}

.ds-dsplus-hat__card {
	padding: 18px;
	background: linear-gradient(180deg, #16181c 0%, #0d0f12 100%);
}

.ds-dsplus-hat__photo {
	height: 300px;
	background-color: #f4f4f4;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.ds-dsplus-hat__meta {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 6px 4px;
}

.ds-dsplus-hat__meta-lbl {
	display: block;
	font-size: 10px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--n-text-dim);
}

.ds-dsplus-hat__meta-val {
	display: block;
	margin-top: 6px;
	font-family: var(--n-font-display);
	font-size: 15px;
	color: #ffffff;
}

.ds-dsplus-hat__meta--right {
	text-align: right;
}

.ds-dsplus-hat__meta--right .ds-dsplus-hat__meta-val {
	font-size: 22px;
	color: var(--n-gold);
}

.ds-dsplus-hat__alt {
	margin: 18px 0 0;
}

.ds-dsplus-hat__alt a {
	font-size: 14px;
	color: var(--n-teal);
	text-decoration: none;
}

.ds-dsplus-hat__alt a:hover {
	color: var(--n-gold);
}

.ds-dsplus-hat__limit {
	margin: 0;
	font-size: 11px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--n-text-dim);
}

/* --- 6. Testimonials ---------------------------------------------------- */

.ds-dsplus-proof__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ds-dsplus-quote {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 30px;
}

.ds-dsplus-quote__stars {
	font-size: 14px;
	letter-spacing: 3px;
	color: var(--n-gold);
}

.ds-dsplus-quote__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.68;
	font-style: italic;
	color: #d8d8dd;
}

.ds-dsplus-quote__who {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--n-line);
}

.ds-dsplus-quote__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: var(--n-teal);
	font-family: var(--n-font-display);
	font-size: 14px;
	color: #ffffff;
}

.ds-dsplus-quote__name {
	display: block;
	font-family: var(--n-font-display);
	font-size: 14px;
	letter-spacing: 0.6px;
	color: var(--n-gold);
}

.ds-dsplus-quote__role {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--n-text-dim);
}

/* --- 7. Two coloured lanes ---------------------------------------------- */

.ds-dsplus-lanes {
	padding: 60px 0 !important;
}

.ds-dsplus-lanes .ds-dsplus-lanes,
.ds-dsplus-lanes > .ds-ff-container > .ds-dsplus-lanes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ds-dsplus-lane {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	row-gap: 6px;
	padding: 26px 30px;
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.ds-dsplus-lane:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
}

.ds-dsplus-lane__lbl {
	grid-column: 1;
	font-size: 10.5px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.ds-dsplus-lane__title {
	grid-column: 1;
	font-family: var(--n-font-display);
	font-size: 20px;
	letter-spacing: 0.6px;
}

.ds-dsplus-lane__arrow {
	grid-column: 2;
	grid-row: 1 / 3;
	font-size: 24px;
	line-height: 1;
}

.ds-dsplus-lane--teal {
	background: var(--n-teal);
}

.ds-dsplus-lane--teal .ds-dsplus-lane__lbl {
	color: rgba(255, 255, 255, 0.75);
}

.ds-dsplus-lane--teal .ds-dsplus-lane__title,
.ds-dsplus-lane--teal .ds-dsplus-lane__arrow {
	color: #ffffff;
}

.ds-dsplus-lane--gold {
	background: var(--n-gold);
}

.ds-dsplus-lane--gold .ds-dsplus-lane__lbl {
	color: rgba(5, 5, 5, 0.62);
}

.ds-dsplus-lane--gold .ds-dsplus-lane__title,
.ds-dsplus-lane--gold .ds-dsplus-lane__arrow {
	color: #050505;
}

/* --- 9. Stop doing life alone ------------------------------------------ */

.ds-dsplus-stop {
	padding: 130px 0 !important;
	background-color: #050505;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.55) 12%,
			rgba(5, 5, 5, 0) 30%,
			rgba(5, 5, 5, 0) 72%,
			rgba(5, 5, 5, 0.62) 90%,
			#050505 100%),
		radial-gradient(ellipse 70% 90% at 96% 78%, rgba(17, 136, 160, 0.30), transparent 66%),
		radial-gradient(ellipse 60% 80% at 4% 24%, rgba(228, 179, 1, 0.09), transparent 62%),
		linear-gradient(180deg, rgba(5, 5, 5, 0.80), rgba(5, 5, 5, 0.80)),
		url('/wp-content/uploads/2026/08/ds-grain-cloud.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto, auto, auto, auto, 100% 100%;
}

.ds-dsplus-stop .ds-ff-section-head {
	margin-bottom: 34px;
}

.ds-dsplus-stop__act {
	text-align: center;
}

.ds-dsplus-fineprint {
	margin: 16px 0 0;
	text-align: center;
	font-size: 11.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--n-text-dim);
}

.ds-dsplus-fineprint--gold {
	color: var(--n-gold);
}

/* --- 10. Founding vendor perks ------------------------------------------ */

.ds-dsplus-perks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	max-width: 900px;
	margin: 0 auto;
}

.ds-dsplus-perk {
	padding: 26px 28px;
}

.ds-dsplus-perk__title {
	margin: 0 0 9px;
	font-family: var(--n-font-display);
	font-size: 16px;
	letter-spacing: 0.6px;
	color: var(--n-gold);
}

.ds-dsplus-perk__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--n-text-muted);
}

.ds-dsplus-founding__note {
	max-width: 720px;
	margin: 36px auto 28px;
	text-align: center;
	font-size: 14.5px;
	line-height: 1.65;
	font-style: italic;
	color: var(--n-text-muted);
}

.ds-dsplus-founding__act {
	text-align: center;
}

/* --- 12. Join forms ----------------------------------------------------- */

.ds-dsplus-join {
	background-color: #050505;
	background-image:
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.97) 18%,
			rgba(5, 5, 5, 0.90) 42%,
			rgba(5, 5, 5, 0.82) 70%,
			rgba(5, 5, 5, 0.78) 100%),
		url('/wp-content/uploads/2026/08/ds-campfire.jpg');
	background-repeat: no-repeat, no-repeat;
	background-position: center, center bottom;
	background-size: auto, cover;
}

.ds-dsplus-join__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
}

.ds-dsplus-join__card {
	padding: 36px 32px;
}

/* --- 13. FAQ ------------------------------------------------------------ */

.ds-dsplus-faq__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 860px;
	margin: 0 auto;
}

.ds-dsplus-faq__q {
	padding: 20px 26px;
	cursor: pointer;
	font-family: var(--n-font-display);
	font-size: 15px;
	letter-spacing: 0.5px;
	color: #ffffff;
	list-style: none;
}

.ds-dsplus-faq__q::-webkit-details-marker {
	display: none;
}

.ds-dsplus-faq__item[open] .ds-dsplus-faq__q {
	color: var(--n-gold);
}

.ds-dsplus-faq__a {
	padding: 0 26px 22px;
}

.ds-dsplus-faq__a p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--n-text-muted);
}

.ds-dsplus-faq__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 44px;
	text-align: center;
}

.ds-dsplus-faq__email {
	font-family: var(--n-font-display);
	font-size: 20px;
	color: var(--n-gold);
	text-decoration: none;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
	.ds-dsplus-hero__grid,
	.ds-dsplus-more__grid,
	.ds-dsplus-hat__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.ds-dsplus-more__photo {
		min-height: 320px;
	}

	.ds-dsplus-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.ds-dsplus .ds-ff-section {
		padding: 70px 0;
	}

	.ds-dsplus-reasons__grid,
	.ds-dsplus-proof__grid,
	.ds-dsplus-perks,
	.ds-dsplus-join__grid {
		grid-template-columns: 1fr;
	}

	.ds-dsplus-reasons__grid > :nth-child(2),
	.ds-dsplus-reasons__grid > :nth-child(4) {
		margin-top: 0;
	}

	.ds-dsplus-split {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* Two classes the theme uses in markup but never defined. `.ds-ff-tag` is
 * inline-block, but every card that holds one is a column flexbox, so the tag
 * was being stretched to the full card width. `.ds-ff-divider` had no rule at
 * all, so it collapsed and the lines either side of it ran together. */
.ds-ff-tag {
	align-self: flex-start;
}

.ds-ff-divider {
	width: 100%;
	max-width: 260px;
	height: 1px;
	margin: 22px 0;
	background: linear-gradient(90deg, var(--n-gold) 0%, rgba(228, 179, 1, 0.16) 62%, transparent 100%);
}

.ds-dsplus-hat__copy .ds-ff-divider {
	margin: 24px 0 16px;
}

/* These two sections are centred, but their CTA sits outside the section head
 * so it kept the container's left alignment. */
.ds-dsplus-stop > .ds-ff-container > .ds-ff-btn,
.ds-dsplus-founding > .ds-ff-container > .ds-ff-btn {
	display: flex;
	width: fit-content;
	margin: 10px auto 0;
}

/* =====================================================================
 * 37. DADSQUAD+ HERO — PHOTO BAND WITH A SIDE FADE
 * ---------------------------------------------------------------------
 * The heading sat on flat black. A dim patio photo now runs behind it,
 * dissolving into black at the left and right edges as well as the top
 * and bottom, so the band has no hard boundary on any side. The teal
 * and gold glows stay, layered over the photo but under the fades so
 * they dim toward the edges with everything else.
 * ===================================================================== */

.ds-dsplus-hero {
	position: relative;
	background-color: #050505 !important;
	background-image:
		linear-gradient(90deg,
			#050505 0%,
			rgba(5, 5, 5, 0.94) 8%,
			rgba(5, 5, 5, 0.60) 22%,
			rgba(5, 5, 5, 0.50) 40%,
			rgba(5, 5, 5, 0.50) 60%,
			rgba(5, 5, 5, 0.60) 78%,
			rgba(5, 5, 5, 0.94) 92%,
			#050505 100%),
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.90) 5%,
			rgba(5, 5, 5, 0.44) 24%,
			rgba(5, 5, 5, 0.40) 62%,
			rgba(5, 5, 5, 0.88) 90%,
			#050505 100%),
		radial-gradient(ellipse 62% 60% at 84% 16%, rgba(17, 136, 160, 0.20), transparent 68%),
		radial-gradient(ellipse 58% 54% at 6% 30%, rgba(228, 179, 1, 0.11), transparent 64%),
		url('/wp-content/uploads/2026/08/dsplus-patio.jpg') !important;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
	background-position: center, center, center, center, center 38% !important;
	background-size: auto, auto, auto, auto, cover !important;
}

/* On a narrow screen the photo crops in hard and the string lights read as
 * big blobs, so the scrim goes heavier and the side fade starts sooner. */
@media (max-width: 900px) {

	.ds-dsplus-hero {
		background-image:
			linear-gradient(90deg,
				#050505 0%,
				rgba(5, 5, 5, 0.88) 14%,
				rgba(5, 5, 5, 0.72) 34%,
				rgba(5, 5, 5, 0.72) 66%,
				rgba(5, 5, 5, 0.88) 86%,
				#050505 100%),
			linear-gradient(180deg,
				#050505 0%,
				rgba(5, 5, 5, 0.92) 4%,
				rgba(5, 5, 5, 0.62) 18%,
				rgba(5, 5, 5, 0.60) 66%,
				rgba(5, 5, 5, 0.90) 92%,
				#050505 100%),
			radial-gradient(ellipse 62% 60% at 84% 16%, rgba(17, 136, 160, 0.20), transparent 68%),
			radial-gradient(ellipse 58% 54% at 6% 30%, rgba(228, 179, 1, 0.11), transparent 64%),
			url('/wp-content/uploads/2026/08/dsplus-patio.jpg') !important;
	}
}

/* ===========================================================================
 * DADSQUAD FITFAT NEON - SUBPAGES & EVENTS RESTYLING
 * =========================================================================== */

/* Global body & wrapper reset for all subpages */
body {
    background-color: var(--n-ground) !important;
    color: var(--n-text) !important;
    font-family: var(--n-font-sans) !important;
    -webkit-font-smoothing: antialiased;
}

.ds-subpage-wrap {
    background-color: var(--n-ground);
    color: var(--n-text);
    min-height: 80vh;
    padding-bottom: 80px;
}

/* Subpage Hero Banner */
.ds-subpage-hero {
    position: relative;
    padding: 70px 0 50px 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--n-line);
    margin-bottom: 40px;
}

.ds-subpage-hero--compact {
    padding: 50px 0 40px 0;
    background-color: var(--n-surface);
}

.ds-subpage-hero__title {
    font-family: var(--n-font-display);
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 12px 0 16px 0;
    text-transform: uppercase;
}

.ds-subpage-hero__lede {
    font-size: 1.1rem;
    color: var(--n-text-muted);
    max-width: 680px;
    line-height: 1.6;
    margin: 0;
}

/* Archive Controls & Toggle */
.ds-archive__header {
    margin-bottom: 30px;
}

.ds-archive__title {
    display: none; /* Replaced by subpage hero */
}

.ds-archive__intro {
    display: none; /* Replaced by subpage hero */
}

/* Toggle Tabs: Upcoming vs Past */
.ds-toggle {
    display: inline-flex;
    background: var(--n-surface);
    border: 1px solid var(--n-line);
    padding: 4px;
    margin-bottom: 24px;
    clip-path: var(--n-cut-control);
}

.ds-toggle__item {
    font-family: var(--n-font-display);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--n-text-muted);
    padding: 8px 24px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ds-toggle__item:hover {
    color: #ffffff;
}

.ds-toggle__item.is-active {
    background: var(--n-gold);
    color: #050505;
    font-weight: 600;
}

/* Filter Bar */
.ds-eventbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: var(--n-surface);
    border: 1px solid var(--n-line);
    padding: 16px 20px;
    margin-bottom: 35px;
    clip-path: var(--n-cut-card);
}

.ds-eventbar__field {
    margin: 0;
}

.ds-eventbar select {
    background: var(--n-card);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 16px;
    font-family: var(--n-font-sans);
    font-size: 0.92rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.ds-eventbar select:focus {
    border-color: var(--n-gold);
}

.ds-eventbar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--n-text);
    cursor: pointer;
    user-select: none;
    padding: 6px 12px;
    background: var(--n-card-alt);
    border: 1px solid var(--n-line-subtle);
}

.ds-eventbar__toggle input[type="checkbox"] {
    accent-color: var(--n-gold);
    width: 16px;
    height: 16px;
}

.ds-eventbar__submit {
    background: var(--n-teal);
    color: #ffffff;
    border: none;
    font-family: var(--n-font-display);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    padding: 9px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    clip-path: var(--n-cut-control);
}

.ds-eventbar__submit:hover {
    background: #14a0bc;
}

.ds-eventbar__reset {
    color: var(--n-text-dim);
    font-size: 0.88rem;
    text-decoration: none;
    margin-left: 8px;
}

.ds-eventbar__reset:hover {
    color: var(--n-gold);
}

/* Event Grid & Event Cards */
.ds-grid,
.ds-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.ds-card,
.ds-card--event {
    background: var(--n-surface);
    border: 1px solid var(--n-line-gold);
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    clip-path: var(--n-cut-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

.ds-card:hover {
    transform: translateY(-4px);
    border-color: var(--n-gold);
    box-shadow: 0 8px 24px rgba(228, 179, 1, 0.15);
}

.ds-card__media {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #111;
}

.ds-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ds-card:hover .ds-card__media img {
    transform: scale(1.04);
}

.ds-card__placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #111 0%, #1a1a1d 100%);
    color: var(--n-text-dim);
}

.ds-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ds-card__eyebrow {
    font-family: var(--n-font-display);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--n-teal);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ds-card__eyebrow a {
    color: var(--n-teal);
    text-decoration: none;
}

.ds-card__title {
    font-family: var(--n-font-display);
    font-size: 1.8rem;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin: 0 0 12px 0;
    text-transform: uppercase;
}

.ds-card__title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ds-card__title a:hover {
    color: var(--n-gold);
}

.ds-card__excerpt {
    font-size: 0.95rem;
    color: var(--n-text-muted);
    line-height: 1.5;
    margin-bottom: 18px;
    flex-grow: 1;
}

/* Date Badge Overlay */
.ds-datebadge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #050505;
    border: 1px solid var(--n-gold);
    color: #ffffff;
    text-align: center;
    padding: 6px 12px;
    clip-path: var(--n-cut-badge);
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    z-index: 2;
}

.ds-datebadge__month {
    display: block;
    font-family: var(--n-font-display);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--n-gold);
    text-transform: uppercase;
}

.ds-datebadge__day {
    display: block;
    font-family: var(--n-font-display);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 600;
}

/* Event Metadata (When, Where, Cost) */
.ds-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
    border-top: 1px solid var(--n-line-subtle);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--n-text-muted);
}

.ds-meta__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-card__cta {
    display: inline-block;
    background: var(--n-gold);
    color: #050505;
    font-family: var(--n-font-display);
    font-size: 1.15rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    clip-path: var(--n-cut-control);
    transition: background 0.2s ease, transform 0.2s ease;
    margin-top: auto;
}

.ds-card__cta:hover {
    background: #ffc700;
    transform: translateY(-2px);
}

/* Calendar Subscribe Block */
.ds-calendar-subscribe {
    background: var(--n-surface);
    border: 1px solid var(--n-line);
    padding: 30px;
    clip-path: var(--n-cut-card);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}

.ds-calendar-subscribe__title {
    font-family: var(--n-font-display);
    font-size: 1.6rem;
    letter-spacing: 0.03em;
    margin: 0 0 6px 0;
    color: #ffffff;
    text-transform: uppercase;
}

.ds-calendar-subscribe__desc {
    color: var(--n-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Single Event Page Details & Factbox */
.ds-single--event {
    padding-top: 20px;
}

.ds-single__header {
    border-bottom: 1px solid var(--n-line-subtle);
    padding-bottom: 24px;
    margin-bottom: 35px;
}

.ds-single__title {
    font-family: var(--n-font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
    margin: 8px 0 16px 0;
}

.ds-single__lede {
    font-size: 1.15rem;
    color: var(--n-text-muted);
    line-height: 1.6;
    max-width: 800px;
}

.ds-single__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 900px) {
    .ds-single__grid {
        grid-template-columns: 2fr 1.2fr;
    }
}

.ds-single__prose {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--n-text-muted);
}

.ds-single__prose p {
    margin-bottom: 1.4em;
}

.ds-single__prose strong {
    color: #ffffff;
}

.ds-factbox {
    background: var(--n-surface);
    border: 1px solid var(--n-line-gold);
    padding: 30px;
    clip-path: var(--n-cut-card);
    margin-bottom: 30px;
}

.ds-factbox__title {
    font-family: var(--n-font-display);
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--n-gold);
    margin: 0 0 20px 0;
    border-bottom: 1px solid var(--n-line-gold);
    padding-bottom: 10px;
}

.ds-factlist dt {
    font-family: var(--n-font-display);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--n-teal);
    text-transform: uppercase;
    margin-top: 14px;
}

.ds-factlist dd {
    margin: 4px 0 0 0;
    font-size: 1rem;
    color: #ffffff;
}

/* RSVP Box */
.ds-rsvp-box {
    background: var(--n-card);
    border: 1px solid var(--n-teal);
    padding: 30px;
    clip-path: var(--n-cut-card);
}

.ds-rsvp-box__title {
    font-family: var(--n-font-display);
    font-size: 1.8rem;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.ds-rsvp-box input[type="text"],
.ds-rsvp-box input[type="email"] {
    width: 100%;
    background: var(--n-surface);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 12px 16px;
    font-family: var(--n-font-sans);
    margin-bottom: 14px;
    outline: none;
}

.ds-rsvp-box input:focus {
    border-color: var(--n-gold);
}

.ds-rsvp-box button[type="submit"] {
    width: 100%;
    background: var(--n-gold);
    color: #050505;
    font-family: var(--n-font-display);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    clip-path: var(--n-cut-control);
    transition: background 0.2s ease;
}

.ds-rsvp-box button[type="submit"]:hover {
    background: #ffc700;
}

/* Article & General Page Styling */
.ds-article-content {
    background: var(--n-surface);
    border: 1px solid var(--n-line);
    padding: 40px;
    clip-path: var(--n-cut-card);
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--n-text-muted);
}

.ds-article-content h2,
.ds-article-content h3 {
    font-family: var(--n-font-display);
    color: #ffffff;
    text-transform: uppercase;
    margin: 1.5em 0 0.5em 0;
}

.ds-article-content p {
    margin-bottom: 1.3em;
}

.ds-article-content a {
    color: var(--n-gold);
    text-decoration: underline;
}

/* Business & Discount Cards */
.ds-card--business,
.ds-card--discount {
    background: var(--n-surface);
    border: 1px solid var(--n-line);
    clip-path: var(--n-cut-card);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ds-card--business:hover,
.ds-card--discount:hover {
    transform: translateY(-4px);
    border-color: var(--n-teal);
    box-shadow: 0 8px 24px rgba(17, 136, 160, 0.2);
}

.ds-card--discount .ds-card__title a:hover {
    color: var(--n-teal);
}

.ds-offer-tag {
    display: inline-block;
    background: var(--n-gold);
    color: #050505;
    font-family: var(--n-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 4px 10px;
    clip-path: var(--n-cut-badge);
    margin-bottom: 12px;
}

.ds-squad-badge {
    display: inline-block;
    background: var(--n-card-alt);
    border: 1px solid var(--n-line-subtle);
    color: var(--n-text-muted);
    font-size: 0.85rem;
    padding: 4px 8px;
    margin-bottom: 10px;
}

/* Squad Chapter Hub Styling */
.ds-squad-leaders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.ds-leader-card {
    background: var(--n-surface);
    border: 1px solid var(--n-line-gold);
    padding: 24px;
    clip-path: var(--n-cut-card);
}

.ds-leader-card__name {
    font-family: var(--n-font-display);
    font-size: 1.6rem;
    color: #ffffff;
    margin: 0 0 6px 0;
}

.ds-leader-card__role {
    font-size: 0.9rem;
    color: var(--n-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Buttons in core markup overrides */




.ds-single__disclaimer {
    font-size: 0.88rem;
    color: var(--n-text-dim);
    line-height: 1.6;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--n-line-subtle);
}

/* =====================================================================
 * 38. SUBPAGE RESKIN — EVENTS, SQUADS, FIRST TIME, NEED HELP
 * ---------------------------------------------------------------------
 * These pages render markup from the dadsquad-core plugin, which ships a
 * LIGHT theme through its own --ds-* custom properties: white surfaces,
 * an orange accent, navy links and 12px rounded corners. The home page
 * never showed it because the home template overrides those variables
 * inside .ds-fitfat-home. Every other page got the light defaults raw,
 * which is where the white cards, the orange buttons and the pill
 * corners came from.
 *
 * The plugin was explicitly built to be rethemed this way ("redefining a
 * handful of variables rather than overriding rules"), so 38.1 does that
 * once at the subpage wrapper and the whole component set follows. The
 * sections after it fix genuine structural breaks and write the missing
 * CSS for component classes the page markup uses but nobody ever styled.
 * ===================================================================== */

/* --- 38.1 Retheme the plugin's variables for every subpage ------------- */

.ds-subpage-wrap {
	--ds-ink: #ffffff;
	--ds-ink-soft: #a6a6ac;
	--ds-ink-faint: #6f6f76;
	--ds-line: rgba(255, 255, 255, 0.10);
	--ds-surface: #151517;
	--ds-surface-alt: #0a0a0b;

	--ds-brand: #E4B301;
	--ds-brand-dark: #c99b00;
	--ds-accent: #E4B301;
	--ds-accent-dark: #c99b00;
	--ds-ok: #1188A0;
	--ds-warn: #d8623a;

	--ds-radius: 0;
	--ds-radius-sm: 0;
	--ds-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
	--ds-shadow-lift: 0 10px 28px rgba(0, 0, 0, 0.65);

	background-color: var(--n-ground);
	color: var(--n-text);
	font-family: var(--n-font-sans);
}

/* The home page kills every radius with a blanket rule scoped to
 * .ds-fitfat-home. Subpages need the same, or the plugin's 999px pill
 * buttons and 12px cards survive the variable swap. */
.ds-subpage-wrap,
.ds-subpage-wrap * {
	box-sizing: border-box;
	border-radius: 0 !important;
}

/* --- 38.2 Subpage hero band ------------------------------------------- */

/* The templates set the photo inline as a hard left-to-right wipe, which
 * cut the picture off mid-face at the right edge. This overrides it with
 * the same treatment the home and DadSquad+ heroes use: the photo dims
 * and dissolves into black on all four sides, so there is no hard edge
 * anywhere and the type sits on near-solid black. */
.ds-subpage-wrap .ds-subpage-hero {
	position: relative;
	padding: 104px 0 92px !important;
	background-color: #050505 !important;
	background-image:
		linear-gradient(90deg,
			#050505 0%,
			rgba(5, 5, 5, 0.96) 10%,
			rgba(5, 5, 5, 0.72) 30%,
			rgba(5, 5, 5, 0.64) 52%,
			rgba(5, 5, 5, 0.76) 74%,
			rgba(5, 5, 5, 0.96) 92%,
			#050505 100%),
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.90) 6%,
			rgba(5, 5, 5, 0.52) 26%,
			rgba(5, 5, 5, 0.52) 64%,
			rgba(5, 5, 5, 0.90) 90%,
			#050505 100%),
		radial-gradient(ellipse 60% 58% at 82% 18%, rgba(17, 136, 160, 0.20), transparent 68%),
		radial-gradient(ellipse 56% 52% at 8% 30%, rgba(228, 179, 1, 0.11), transparent 64%),
		url('/wp-content/uploads/2026/08/gallery-cookout.jpg') !important;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
	background-position: center, center, center, center, center 34% !important;
	background-size: auto, auto, auto, auto, cover !important;
	border-bottom: 0 !important;
}

.ds-subpage-wrap .ds-subpage-hero--compact {
	padding: 88px 0 76px !important;
}

.ds-subpage-hero__title {
	font-family: var(--n-font-display);
	font-size: clamp(38px, 5.4vw, 62px);
	line-height: 1.02;
	letter-spacing: 1px;
	margin: 0 0 16px;
	color: #ffffff;
}

.ds-subpage-hero__lede {
	font-size: 16px;
	line-height: 1.6;
	color: var(--n-text-muted);
	max-width: 620px;
	margin: 0;
}

/* --- 38.3 Body rhythm -------------------------------------------------- */

.ds-subpage-body {
	padding: 76px 0 96px;
}

/* The First Time page content nests .ds-ff-section on inner content
 * boxes. That class carries the home page's 100px band padding, so every
 * box was adding 200px of dead vertical space and a stray hairline. */
.ds-subpage-body .ds-ff-section {
	padding: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	clip-path: none !important;
	margin-top: 0 !important;
}

.ds-subpage-body .ds-ff-section::before,
.ds-subpage-body .ds-ff-section::after {
	display: none !important;
}

/* wpautop leaves empty paragraphs and stray <br> between block-level
 * children, which is the rest of the dead space on that page. */
.ds-subpage-body p:empty {
	display: none !important;
}

.ds-subpage-body .ds-step-card > br,
.ds-subpage-body .ds-vibe-card > br,
.ds-subpage-body .ds-faq-item > br,
.ds-subpage-body .ds-ff-faq-trigger > br,
.ds-subpage-body .ds-cta-banner__actions > br {
	display: none !important;
}

/* --- 38.4 Buttons ------------------------------------------------------ */

.ds-subpage-wrap .ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	font-family: var(--n-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	clip-path: var(--n-cut-control);
	transition: all 0.2s ease;
}

.ds-subpage-wrap .ds-btn--primary {
	background: var(--n-gold);
	color: #021010 !important;
	box-shadow: 0 0 15px var(--n-gold-glow);
}

.ds-subpage-wrap .ds-btn--primary:hover {
	background: #ffd333;
	box-shadow: 0 0 25px rgba(228, 179, 1, 0.7);
	transform: translateY(-2px);
	color: #021010 !important;
}

.ds-subpage-wrap .ds-btn--ghost,
.ds-subpage-wrap .ds-btn--onDark {
	background: transparent;
	color: #ffffff !important;
	border: 1px solid var(--n-teal);
}

.ds-subpage-wrap .ds-btn--ghost:hover,
.ds-subpage-wrap .ds-btn--onDark:hover {
	background: var(--n-teal-subtle);
	border-color: #14a2bf;
	color: #ffffff !important;
	box-shadow: 0 0 15px var(--n-teal-glow);
}

.ds-subpage-wrap .ds-btn--small {
	padding: 10px 18px;
	font-size: 12px;
}

.ds-subpage-wrap .ds-btn--big {
	padding: 16px 34px;
	font-size: 14px;
}

.ds-subpage-wrap .ds-btn--link {
	padding: 6px 0;
	background: none;
	border: 0;
	clip-path: none;
	color: var(--n-gold) !important;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	text-decoration: underline !important;
}

/* --- 38.5 Cards -------------------------------------------------------- */

.ds-subpage-wrap .ds-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
	box-shadow: none;
	overflow: visible;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ds-subpage-wrap .ds-card:hover {
	border-color: var(--n-gold);
	box-shadow: 0 0 22px var(--n-gold-glow);
	transform: translateY(-3px);
}

.ds-subpage-wrap .ds-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--n-card-alt);
}

.ds-subpage-wrap .ds-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ds-subpage-wrap .ds-card:hover .ds-card__media img {
	transform: scale(1.04);
}

.ds-subpage-wrap .ds-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	opacity: 0.18;
}

.ds-subpage-wrap .ds-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.ds-subpage-wrap .ds-card__eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-card__eyebrow a {
	color: var(--n-teal);
	text-decoration: none;
}

.ds-subpage-wrap .ds-card__title {
	margin: 0;
	font-family: var(--n-font-display);
	font-size: 1.28rem;
	line-height: 1.15;
	letter-spacing: 0.5px;
	color: #ffffff;
}

.ds-subpage-wrap .ds-card__title a {
	color: #ffffff;
	text-decoration: none !important;
}

.ds-subpage-wrap .ds-card__title a:hover {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-card__excerpt,
.ds-subpage-wrap .ds-card__turnout,
.ds-subpage-wrap .ds-card__going,
.ds-subpage-wrap .ds-card__tagline {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-card__tier {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-card__cta {
	margin: 6px 0 0;
}

/* The plugin's CTA is a full-width gold slab, which is far too much gold
 * for a grid of nine cards. On the home page gold is reserved for one
 * action per section, so this steps down to a quiet gold rule that fills
 * in on hover. */
.ds-subpage-wrap .ds-card__cta .ds-btn {
	width: 100%;
	background: transparent;
	color: var(--n-gold) !important;
	border: 1px solid var(--n-line-gold);
	box-shadow: none;
}

.ds-subpage-wrap .ds-card__cta .ds-btn:hover {
	background: var(--n-gold);
	color: #021010 !important;
	box-shadow: 0 0 18px var(--n-gold-glow);
	transform: none;
}

/* --- 38.6 Date badge --------------------------------------------------- */

/* AGY set top:14px but the plugin still sets bottom:14px. With both edges
 * pinned the badge stretched the full height of the photo, which is the
 * tall black block down the left of every card. */
.ds-subpage-wrap .ds-datebadge,
.ds-fitfat-home .ds-datebadge {
	top: auto !important;
	bottom: 12px !important;
	left: 12px !important;
	right: auto !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	width: auto;
	height: auto;
	padding: 6px 10px 7px !important;
	background: rgba(5, 5, 5, 0.92) !important;
	border: 1px solid var(--n-line-gold);
	clip-path: var(--n-cut-badge);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
	line-height: 1;
	z-index: 2;
}

.ds-subpage-wrap .ds-datebadge__month,
.ds-fitfat-home .ds-datebadge__month {
	display: block;
	font-family: var(--n-font-sans);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-datebadge__day,
.ds-fitfat-home .ds-datebadge__day {
	display: block;
	margin-top: 3px;
	font-family: var(--n-font-display);
	font-size: 1.45rem;
	line-height: 1;
	color: #ffffff;
}

/* --- 38.7 Ribbon ------------------------------------------------------- */

.ds-subpage-wrap .ds-ribbon {
	top: 12px !important;
	right: 0 !important;
	padding: 5px 12px;
	background: var(--n-teal);
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
	box-shadow: 0 0 14px var(--n-teal-glow);
}

/* --- 38.8 Meta lines --------------------------------------------------- */

/* The plugin marks these with red and green emoji, which fight the gold
 * and teal palette. A single gold square reads as one system and lets the
 * text carry the meaning. Applied on the home page too so the event cards
 * there match. */
.ds-subpage-wrap .ds-meta,
.ds-fitfat-home .ds-meta {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ds-subpage-wrap .ds-meta__item,
.ds-fitfat-home .ds-meta__item {
	position: relative;
	padding-left: 18px;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-meta__item::before,
.ds-fitfat-home .ds-meta__item::before {
	content: "" !important;
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	background: var(--n-gold);
	box-shadow: 0 0 6px var(--n-gold-glow);
}

.ds-subpage-wrap .ds-meta__item--where::before,
.ds-fitfat-home .ds-meta__item--where::before {
	background: var(--n-teal);
	box-shadow: 0 0 6px var(--n-teal-glow);
}

.ds-subpage-wrap .ds-meta__item--cost::before,
.ds-fitfat-home .ds-meta__item--cost::before {
	background: transparent;
	border: 1px solid var(--n-line-gold);
	box-shadow: none;
}

/* --- 38.9 Archive header ----------------------------------------------- */

.ds-subpage-wrap .ds-archive__header {
	margin: 0 0 38px;
	text-align: center;
}

.ds-subpage-wrap .ds-archive__title {
	margin: 0 0 12px;
	font-family: var(--n-font-display);
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.08;
	color: #ffffff;
}

.ds-subpage-wrap .ds-archive__intro,
.ds-subpage-wrap .ds-archive__meta,
.ds-subpage-wrap .ds-archive__where {
	margin: 0 auto;
	max-width: 660px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-archive__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--n-gold);
}

/* --- 38.10 Upcoming / Past toggle -------------------------------------- */

.ds-subpage-wrap .ds-toggle {
	display: inline-flex;
	gap: 0;
	margin: 0 auto 30px;
	padding: 4px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-control);
}

.ds-subpage-wrap .ds-toggle__item {
	padding: 10px 26px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--n-text-muted);
	text-decoration: none !important;
	background: transparent;
	border: 0;
	transition: all 0.2s ease;
}

.ds-subpage-wrap .ds-toggle__item:hover {
	color: #ffffff;
}

.ds-subpage-wrap .ds-toggle__item.is-active {
	background: var(--n-gold);
	color: #021010;
	clip-path: var(--n-cut-badge);
}

/* --- 38.11 Event filter bar -------------------------------------------- */

.ds-subpage-wrap .ds-eventbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 34px;
	padding: 16px 18px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
}

.ds-subpage-wrap .ds-eventbar__spacer {
	flex: 1 1 auto;
}

.ds-subpage-wrap .ds-eventbar select,
.ds-subpage-wrap .ds-eventbar input[type="search"],
.ds-subpage-wrap .ds-eventbar input[type="text"] {
	padding: 10px 14px;
	background: var(--n-input);
	border: 1px solid var(--n-line);
	color: #ffffff;
	font-family: var(--n-font-sans);
	font-size: 13px;
	clip-path: var(--n-cut-control);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--n-gold) 50%),
		linear-gradient(135deg, var(--n-gold) 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
	transition: border-color 0.2s ease;
}

.ds-subpage-wrap .ds-eventbar select:focus {
	border-color: var(--n-gold);
	box-shadow: 0 0 12px var(--n-gold-glow);
}

.ds-subpage-wrap .ds-eventbar select option {
	background: #151517;
	color: #ffffff;
}

.ds-subpage-wrap .ds-eventbar__toggle,
.ds-subpage-wrap .ds-eventbar__field {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-eventbar__toggle input[type="checkbox"] {
	width: 15px;
	height: 15px;
	accent-color: var(--n-gold);
	cursor: pointer;
}

.ds-subpage-wrap .ds-eventbar__views {
	display: inline-flex;
	gap: 4px;
}

.ds-subpage-wrap .ds-eventbar__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--n-input);
	border: 1px solid var(--n-line);
	color: var(--n-text-muted);
	clip-path: var(--n-cut-badge);
	text-decoration: none !important;
}

.ds-subpage-wrap .ds-eventbar__view.is-active {
	background: var(--n-gold);
	border-color: var(--n-gold);
	color: #021010;
}

.ds-subpage-wrap .ds-eventbar__clear {
	font-size: 13px;
	color: var(--n-gold);
	text-decoration: underline;
}

/* --- 38.12 Grids ------------------------------------------------------- */

.ds-subpage-wrap .ds-grid {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (min-width: 900px) {
	.ds-subpage-wrap .ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ds-subpage-wrap .ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.ds-subpage-wrap .ds-grid--1 { grid-template-columns: 1fr; }
}

/* A lone card in a three-column grid was being centred on its own, which
 * read as a mistake. Left-align it against the section above instead. */
.ds-subpage-wrap .ds-grid {
	justify-content: start;
}

/* --- 38.13 Block headings (squads page) -------------------------------- */

/* These rendered as dark grey serif on black — effectively invisible.
 * They now use the home page's section-head language. */
.ds-subpage-wrap .ds-block {
	margin: 0 0 62px;
}

.ds-subpage-wrap .ds-block__title {
	position: relative;
	margin: 0 0 10px;
	padding-bottom: 14px;
	font-family: var(--n-font-display);
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.08;
	letter-spacing: 0.5px;
	color: #ffffff;
}

.ds-subpage-wrap .ds-block__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 2px;
	background: linear-gradient(90deg, var(--n-gold) 0%, rgba(228, 179, 1, 0.15) 100%);
}

.ds-subpage-wrap .ds-block__lede {
	margin: 0 0 26px;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-block__more {
	margin: 30px 0 0;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.ds-subpage-wrap .ds-block__quiet {
	margin: 0;
	font-size: 13px;
	color: var(--n-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ds-subpage-wrap .ds-block__quiet:hover {
	color: var(--n-gold);
}

/* --- 38.14 Squad link row ---------------------------------------------- */

/* These were raw blue underlined anchors with no separator, so the city
 * names ran together into one unreadable string. */
.ds-subpage-wrap .ds-squadlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.ds-subpage-wrap .ds-squadlink {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 9px 14px;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-badge);
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.ds-subpage-wrap .ds-squadlink:hover {
	border-color: var(--n-gold);
	box-shadow: 0 0 14px var(--n-gold-glow);
	transform: translateY(-2px);
}

.ds-subpage-wrap .ds-squadlink__name {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: #ffffff;
}

.ds-subpage-wrap .ds-squadlink__lead {
	font-size: 12px;
	color: var(--n-text-dim);
}

/* --- 38.15 Next-event hero (squads page) ------------------------------- */

.ds-subpage-wrap .ds-hero {
	position: relative;
	margin: 0 0 62px;
	padding: 60px 44px;
	background-color: var(--n-card-alt);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
	overflow: hidden;
}

.ds-subpage-wrap .ds-hero--image {
	background-position: center;
	background-size: cover;
}

.ds-subpage-wrap .ds-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.72) 45%, rgba(5, 5, 5, 0.92) 100%),
		linear-gradient(180deg, rgba(5, 5, 5, 0.70) 0%, rgba(5, 5, 5, 0.55) 50%, rgba(5, 5, 5, 0.88) 100%);
}

.ds-subpage-wrap .ds-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	text-align: left;
}

.ds-subpage-wrap .ds-hero__kicker {
	display: inline-block;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-hero__title {
	margin: 0 0 14px;
	font-family: var(--n-font-display);
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.05;
	color: #ffffff;
}

.ds-subpage-wrap .ds-hero__title a {
	color: #ffffff;
	text-decoration: none !important;
}

.ds-subpage-wrap .ds-hero__title a:hover {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-hero__when {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-hero__sep {
	margin: 0 8px;
	color: var(--n-text-dim);
}

.ds-subpage-wrap .ds-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- 38.16 Calendar subscribe band ------------------------------------- */

/* This was a white slab across the bottom of both archive pages. AGY
 * styled ".ds-calendar-subscribe"; the markup actually renders
 * ".ds-subscribe", so none of it applied. */
.ds-subpage-wrap .ds-subscribe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	margin: 70px 0 0;
	padding: 34px 38px;
	background-color: var(--n-card-alt) !important;
	background-image:
		radial-gradient(ellipse 70% 130% at 8% 50%, rgba(228, 179, 1, 0.10), transparent 62%),
		radial-gradient(ellipse 60% 120% at 92% 50%, rgba(17, 136, 160, 0.12), transparent 62%);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-subscribe__words {
	flex: 1 1 380px;
}

.ds-subpage-wrap .ds-subscribe__title {
	margin: 0 0 8px;
	font-family: var(--n-font-display);
	font-size: 1.5rem;
	letter-spacing: 0.5px;
	color: #ffffff;
}

.ds-subpage-wrap .ds-subscribe__lede {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--n-text-muted);
	max-width: 560px;
}

.ds-subpage-wrap .ds-subscribe__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ds-subpage-wrap .ds-subscribe__alt {
	font-size: 13px;
	color: var(--n-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 38.17 Article shell ----------------------------------------------- */

.ds-subpage-wrap .ds-article-content {
	background: transparent !important;
	border: 0 !important;
	clip-path: none !important;
	padding: 0;
}

.ds-article-inner {
	max-width: 100%;
}

.ds-subpage-wrap .ds-article-content > .ds-article-inner > p,
.ds-subpage-wrap .ds-lead-text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--n-text-muted);
	max-width: 760px;
}

.ds-subpage-wrap .ds-lead-text {
	font-size: 18px;
	color: #cfcfd4;
}

.ds-subpage-wrap .ds-section-intro {
	margin: 0 0 30px;
	max-width: 740px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-article-content a {
	color: var(--n-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ds-subpage-wrap .ds-article-content a:hover {
	color: #ffd333;
}

/* --- 38.18 Content boxes (First Time) ---------------------------------- */

.ds-subpage-wrap .ds-content-box {
	margin: 0 0 72px;
}

.ds-subpage-wrap .ds-content-box > h2 {
	position: relative;
	margin: 0 0 10px;
	padding-bottom: 14px;
	font-family: var(--n-font-display);
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.08;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.ds-subpage-wrap .ds-content-box > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 2px;
	background: linear-gradient(90deg, var(--n-gold) 0%, rgba(228, 179, 1, 0.15) 100%);
}

.ds-subpage-wrap .ds-content-box > p {
	margin: 0 0 26px;
	max-width: 760px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--n-text-muted);
}

/* --- 38.19 Numbered steps ---------------------------------------------- */

.ds-subpage-wrap .ds-steps-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin: 30px 0 0;
}

.ds-subpage-wrap .ds-step-card {
	position: relative;
	padding: 28px 26px 26px;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
	transition: all 0.25s ease;
}

.ds-subpage-wrap .ds-step-card:hover {
	border-color: var(--n-gold);
	box-shadow: 0 0 20px var(--n-gold-glow);
	transform: translateY(-3px);
}

.ds-subpage-wrap .ds-step-num {
	display: block;
	margin-bottom: 10px;
	font-family: var(--n-font-display);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--n-gold);
	text-shadow: 0 0 18px var(--n-gold-glow);
}

.ds-subpage-wrap .ds-step-card h3 {
	margin: 0 0 10px;
	font-family: var(--n-font-display);
	font-size: 1.32rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.ds-subpage-wrap .ds-step-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

/* --- 38.20 Vibe cards -------------------------------------------------- */

.ds-subpage-wrap .ds-vibe-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 30px 0 0;
}

.ds-subpage-wrap .ds-vibe-card {
	padding: 26px 24px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line-subtle);
	border-left: 2px solid var(--n-teal);
	clip-path: var(--n-cut-card);
	transition: all 0.25s ease;
}

.ds-subpage-wrap .ds-vibe-card:hover {
	border-left-color: var(--n-gold);
	box-shadow: 0 0 18px rgba(17, 136, 160, 0.28);
}

.ds-subpage-wrap .ds-vibe-card h3 {
	margin: 0 0 10px;
	font-family: var(--n-font-display);
	font-size: 1.18rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-vibe-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

/* --- 38.21 County / city tree ------------------------------------------ */

/* A hierarchy drawn as a list tells you the parts exist without showing how
 * they hang together. This draws the real shape — hub, counties, cities and
 * who runs each — with rules connecting the levels, so the nesting does the
 * explaining. Built from the live taxonomy, so a new city squad joins the
 * diagram the moment somebody adds it.
 *
 * Gold is the hub and the openings; teal carries the structure and the city
 * links, which keeps the connectors readable without competing with the one
 * colour on this site that means "do something". */

.ds-subpage-wrap .ds-tree {
	--ds-tree-line: rgba(17, 136, 160, 0.55);
	margin: 26px 0 0;
	padding: 34px 28px 30px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
	text-align: center;
}

.ds-subpage-wrap .ds-tree__hub {
	display: inline-block;
	padding: 14px 30px 15px;
	background: var(--n-gold-subtle);
	border: 1px solid var(--n-gold);
	clip-path: var(--n-cut-control);
}

.ds-subpage-wrap .ds-tree__hubname {
	display: block;
	font-family: var(--n-font-display);
	font-size: 1.7rem;
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--n-gold);
	text-decoration: none !important;
}

.ds-subpage-wrap .ds-tree__hubname:hover {
	color: #ffd333;
}

.ds-subpage-wrap .ds-tree__hubnote {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	letter-spacing: 0.2px;
	color: var(--n-text-dim);
}

/* The counties hang off the hub. The stem is drawn once, from the hub down to
 * the horizontal rule that spans them. */
.ds-subpage-wrap .ds-tree__counties {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0 18px;
	margin: 0;
	padding: 54px 0 0;
	list-style: none;
}

.ds-subpage-wrap .ds-tree__counties::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 28px;
	background: var(--ds-tree-line);
}

/* Counties share the row evenly however many there are, rather than each
 * taking a fixed width and the last one dropping to a line of its own.
 * min-width: 0 lets a long squad name wrap inside its column instead of
 * forcing the whole row wider. */
.ds-subpage-wrap .ds-tree__county {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 28px 0 0;
	list-style: none;
	text-align: center;
}

/* Each county's own drop from the rule, plus the rule itself. Drawing the
 * horizontal as two half-width pieces on the end children keeps it from
 * overhanging the outermost columns. */
.ds-subpage-wrap .ds-tree__county::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 28px;
	background: var(--ds-tree-line);
}

.ds-subpage-wrap .ds-tree__county::after {
	content: "";
	position: absolute;
	top: 0;
	left: -9px;
	right: -9px;
	height: 2px;
	background: var(--ds-tree-line);
}

.ds-subpage-wrap .ds-tree__county:first-child::after {
	left: 50%;
}

.ds-subpage-wrap .ds-tree__county:last-child::after {
	right: 50%;
}

.ds-subpage-wrap .ds-tree__county:only-child::after {
	display: none;
}

.ds-subpage-wrap .ds-tree__countyname {
	display: block;
	padding: 8px 10px 9px;
	font-family: var(--n-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--n-card);
	border: 1px solid var(--n-line-subtle);
	clip-path: var(--n-cut-badge);
}

/* The county's own leader, under the county name and above its cities, so the
 * diagram answers "who runs this level" at every level, not only the bottom. */
.ds-subpage-wrap .ds-tree__countylead {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--n-text-dim);
}

.ds-subpage-wrap .ds-tree__cities {
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
	text-align: left;
}

/* The cities run down the left edge of their county, each elbowed off a single
 * vertical rule — the shape a file tree makes, which is a shape people already
 * know how to read. */
.ds-subpage-wrap .ds-tree__city {
	position: relative;
	margin: 0 0 0 14px;
	padding: 8px 0 8px 20px;
	list-style: none;
	border-left: 2px solid var(--ds-tree-line);
}

.ds-subpage-wrap .ds-tree__city::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 0;
	width: 13px;
	height: 2px;
	background: var(--ds-tree-line);
}

/* The last city stops the vertical rule at its own elbow rather than letting
 * it hang past the end of the list. */
.ds-subpage-wrap .ds-tree__city:last-child {
	border-left-color: transparent;
	background-image: linear-gradient(var(--ds-tree-line), var(--ds-tree-line));
	background-size: 2px 20px;
	background-repeat: no-repeat;
	background-position: -2px 0;
}

.ds-subpage-wrap .ds-tree__cityname {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--n-teal);
	text-decoration: none !important;
}

.ds-subpage-wrap .ds-tree__cityname:hover {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-tree__lead {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--n-text-dim);
}

/* An unrun city is the one row on this diagram somebody can act on, so it gets
 * the colour that means "do something" everywhere else on the site. */
.ds-subpage-wrap .ds-tree__lead--open {
	color: var(--n-gold);
	font-style: italic;
}

/* A county with no city squad under it yet still belongs on the diagram — it
 * is where somebody could start one — so it says so rather than sitting
 * blank. */
.ds-subpage-wrap .ds-tree__empty {
	margin: 14px 0 0 14px;
	padding: 0 0 0 20px;
	font-size: 12px;
	font-style: italic;
	line-height: 1.4;
	text-align: left;
	color: var(--n-text-dim);
}

/* Five counties across stops being a diagram and starts being five cramped
 * columns somewhere under 1080px, so the branches stack and the horizontal
 * spine is dropped — the vertical stems alone still read as a tree. */
@media (max-width: 1080px) {

	.ds-subpage-wrap .ds-tree__counties {
		flex-wrap: wrap;
		gap: 8px 24px;
	}

	/* 0 on the grow so a county left alone on the last row keeps a column's
	 * width instead of stretching across the whole diagram. */
	.ds-subpage-wrap .ds-tree__county {
		flex: 0 1 44%;
		min-width: 240px;
		padding-top: 34px;
	}

	.ds-subpage-wrap .ds-tree__county::after {
		display: none;
	}

	.ds-subpage-wrap .ds-tree__county::before {
		height: 22px;
		top: 6px;
	}
}

@media (max-width: 720px) {

	.ds-subpage-wrap .ds-tree {
		padding: 28px 18px 24px;
	}

	.ds-subpage-wrap .ds-tree__county {
		flex: 0 1 100%;
		min-width: 0;
	}
}

/* --- 38.22 FAQ accordion ----------------------------------------------- */

.ds-subpage-wrap .ds-faq-item {
	border-bottom: 1px solid var(--n-line-subtle);
}

.ds-subpage-wrap .ds-faq-item .ds-ff-faq-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 4px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--n-font-sans);
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	transition: color 0.2s ease;
}

.ds-subpage-wrap .ds-faq-item .ds-ff-faq-trigger:hover {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-faq-item .ds-ff-faq-toggle-icon {
	flex: 0 0 auto;
	font-family: var(--n-font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--n-gold);
	transition: transform 0.2s ease;
}

.ds-subpage-wrap .ds-faq-item .ds-ff-faq-trigger[aria-expanded="true"] .ds-ff-faq-toggle-icon {
	transform: rotate(45deg);
}

.ds-subpage-wrap .ds-faq-item .ds-ff-faq-content {
	padding: 0 4px 22px;
}

.ds-subpage-wrap .ds-faq-item .ds-ff-faq-content p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--n-text-muted);
	max-width: 760px;
}

/* --- 38.23 Closing CTA band -------------------------------------------- */

.ds-subpage-wrap .ds-cta-banner {
	margin: 20px 0 0;
	padding: 46px 44px;
	text-align: center;
	background-color: var(--n-card-alt);
	background-image:
		radial-gradient(ellipse 60% 120% at 12% 50%, rgba(228, 179, 1, 0.12), transparent 60%),
		radial-gradient(ellipse 60% 120% at 88% 50%, rgba(17, 136, 160, 0.14), transparent 60%);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
}

.ds-subpage-wrap .ds-cta-banner h2 {
	margin: 0 0 12px;
	font-family: var(--n-font-display);
	font-size: clamp(26px, 3vw, 38px);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.ds-subpage-wrap .ds-cta-banner p {
	margin: 0 auto 26px;
	max-width: 620px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-cta-banner__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}

/* --- 38.24 Ask the squad (Need Help) ----------------------------------- */

.ds-subpage-wrap .ds-formband {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

.ds-subpage-wrap .ds-ask {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.ds-subpage-wrap .ds-form--ask {
	order: -1;
	padding: 36px 36px 34px;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	clip-path: var(--n-cut-card);
}

.ds-subpage-wrap .ds-ask__title {
	margin: 0 0 14px;
	font-family: var(--n-font-display);
	font-size: 1.9rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.ds-subpage-wrap .ds-form__intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-form__row {
	margin: 0 0 18px;
}

.ds-subpage-wrap .ds-form__label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-form__input {
	width: 100%;
	padding: 12px 16px;
	background: var(--n-input);
	border: 1px solid var(--n-line);
	color: #ffffff;
	font-family: var(--n-font-sans);
	font-size: 14px;
	clip-path: var(--n-cut-control);
	outline: none;
	transition: all 0.2s ease;
}

.ds-subpage-wrap .ds-form__input:focus {
	border-color: var(--n-gold);
	box-shadow: 0 0 14px var(--n-gold-glow);
}

.ds-subpage-wrap .ds-form__input::placeholder {
	color: var(--n-text-dim);
}

.ds-subpage-wrap .ds-form__input--tall {
	min-height: 170px;
	resize: vertical;
}

.ds-subpage-wrap .ds-ask__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 20px;
	padding: 16px 18px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line-subtle);
	clip-path: var(--n-cut-card);
	cursor: pointer;
}

.ds-subpage-wrap .ds-ask__check input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--n-gold);
	cursor: pointer;
}

.ds-subpage-wrap .ds-ask__check strong {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	color: #ffffff;
}

.ds-subpage-wrap .ds-ask__check em {
	display: block;
	font-style: normal;
	font-size: 13px;
	line-height: 1.55;
	color: var(--n-text-dim);
}

.ds-subpage-wrap .ds-ask__check--urgent {
	border-color: var(--n-line-gold);
	background: rgba(228, 179, 1, 0.05);
}

.ds-subpage-wrap .ds-ask__pref {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-right: 18px;
	font-size: 14px;
	color: var(--n-text-muted);
	cursor: pointer;
}

.ds-subpage-wrap .ds-ask__pref input[type="radio"] {
	accent-color: var(--n-gold);
	cursor: pointer;
}

.ds-subpage-wrap .ds-form__actions {
	margin: 26px 0 14px;
}

.ds-subpage-wrap .ds-form__foot {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--n-text-dim);
}

/* The crisis-line panel. Teal rather than gold: it is important, but it
 * is not the action we are pushing, and gold is the action colour. */
.ds-subpage-wrap .ds-helpnow {
	padding: 28px 28px 26px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line);
	border-top: 2px solid var(--n-teal);
	clip-path: var(--n-cut-card);
}

.ds-subpage-wrap .ds-helpnow__title {
	margin: 0 0 12px;
	font-family: var(--n-font-display);
	font-size: 1.3rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-helpnow__intro,
.ds-subpage-wrap .ds-helpnow__foot {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-helpnow__foot {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--n-line-subtle);
	color: var(--n-text-dim);
}

.ds-subpage-wrap .ds-helpnow__lines p {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-helpnow__lines strong {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-hp {
	position: absolute !important;
	left: -9999px !important;
}

/* --- 38.25 Responsive -------------------------------------------------- */

@media (max-width: 1024px) {

	.ds-subpage-wrap .ds-ask {
		grid-template-columns: 1fr;
	}

	.ds-subpage-wrap .ds-vibe-grid {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 900px) {

	.ds-subpage-wrap .ds-subpage-hero {
		padding: 76px 0 64px !important;
	}

	.ds-subpage-body {
		padding: 54px 0 72px;
	}

	.ds-subpage-wrap .ds-steps-grid {
		grid-template-columns: 1fr;
	}

	.ds-subpage-wrap .ds-hero {
		padding: 40px 26px;
	}

	.ds-subpage-wrap .ds-subscribe,
	.ds-subpage-wrap .ds-cta-banner {
		padding: 28px 24px;
	}

	.ds-subpage-wrap .ds-form--ask,
	.ds-subpage-wrap .ds-helpnow {
		padding: 26px 22px;
	}

	.ds-subpage-wrap .ds-content-box {
		margin-bottom: 54px;
	}
}

/* --- 38.26 Corrections found in review --------------------------------- */

/* AGY styled .ds-card__cta as though it were the button, but that class is
 * on the <p> wrapper — the actual <a class="ds-btn"> lives inside it. The
 * result was a solid gold slab with the link's gold text invisible on top
 * of it. The wrapper goes back to being a wrapper; the button inside is
 * what carries the styling. */
.ds-subpage-wrap .ds-card__cta,
.ds-fitfat-home .ds-card__cta {
	display: block !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	clip-path: none !important;
	text-align: left !important;
	transform: none !important;
}

.ds-subpage-wrap .ds-card__cta:hover,
.ds-fitfat-home .ds-card__cta:hover {
	background: none !important;
	transform: none !important;
}

/* The cookout photo puts a face dead centre behind the headline. Shifting
 * the crop right and dropping the mid-band opacity keeps it as texture
 * rather than a portrait competing with the type. */
.ds-subpage-wrap .ds-subpage-hero {
	background-position: center, center, center, center, 68% 30% !important;
}

.ds-subpage-wrap .ds-subpage-hero {
	background-image:
		linear-gradient(90deg,
			#050505 0%,
			rgba(5, 5, 5, 0.97) 12%,
			rgba(5, 5, 5, 0.86) 32%,
			rgba(5, 5, 5, 0.78) 54%,
			rgba(5, 5, 5, 0.86) 76%,
			rgba(5, 5, 5, 0.97) 92%,
			#050505 100%),
		linear-gradient(180deg,
			#050505 0%,
			rgba(5, 5, 5, 0.92) 6%,
			rgba(5, 5, 5, 0.62) 26%,
			rgba(5, 5, 5, 0.62) 64%,
			rgba(5, 5, 5, 0.92) 90%,
			#050505 100%),
		radial-gradient(ellipse 60% 58% at 82% 18%, rgba(17, 136, 160, 0.20), transparent 68%),
		radial-gradient(ellipse 56% 52% at 8% 30%, rgba(228, 179, 1, 0.11), transparent 64%),
		url('/wp-content/uploads/2026/08/gallery-cookout.jpg') !important;
}

/* --- 38.27 Alignment corrections --------------------------------------- */

/* The plugin centres a handful of things that were designed for its own
 * centred light layout. Against these left-aligned dark sections they read
 * as accidents, so they line up with the headings above them. */

.ds-subpage-wrap .ds-archive__header {
	text-align: left;
}

.ds-subpage-wrap .ds-archive__intro,
.ds-subpage-wrap .ds-archive__meta,
.ds-subpage-wrap .ds-archive__where {
	margin-left: 0;
	margin-right: 0;
}

.ds-subpage-wrap .ds-archive--squad .ds-block__lede,
.ds-subpage-wrap .ds-block--centred .ds-block__lede,
.ds-subpage-wrap .ds-archive--businesses .ds-block__title,
.ds-subpage-wrap .ds-archive--businesses .ds-block__lede {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

/* An under-filled row is centred by the plugin, so a single card floated
 * into the middle of the page away from its own heading. */
.ds-subpage-wrap .ds-grid--2:has(> :last-child:nth-child(1)),
.ds-subpage-wrap .ds-grid--3:has(> :last-child:nth-child(-n+2)),
.ds-subpage-wrap .ds-grid--4:has(> :last-child:nth-child(-n+3)) {
	justify-content: start;
	grid-template-columns: repeat(auto-fill, minmax(280px, 380px));
}

.ds-subpage-wrap .ds-hero__actions {
	justify-content: flex-start;
}

/* The ask form is capped at 1000px by the plugin, which left it floating
 * narrower than the hero and the note underneath it. */
.ds-subpage-wrap .ds-ask {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* City links lost to the blanket article-content link colour, so the whole
 * tree came out gold. Teal separates the cities from the gold hub above. */
.ds-subpage-wrap .ds-article-content .ds-tree__cityname,
.ds-subpage-wrap .ds-tree .ds-tree__cityname {
	color: var(--n-teal);
	text-decoration: none !important;
}

.ds-subpage-wrap .ds-article-content .ds-tree__cityname:hover,
.ds-subpage-wrap .ds-tree .ds-tree__cityname:hover {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-article-content .ds-tree__hubname {
	text-decoration: none !important;
}

/* The next-event band centred its own copy inside a left-aligned page,
 * which pushed the headline 300px off the column everything else sits on. */
.ds-subpage-wrap .ds-hero__inner {
	margin-left: 0;
	margin-right: 0;
}

/* --- 38.28 Plugin buttons on the home page ----------------------------- */

/* The home page renders the same plugin card and button markup in its
 * events section, so it needs the same button language the subpages just
 * got. Without this the card CTA falls back to a bare link and the
 * "See all events" button keeps the plugin's light pill. */
.ds-fitfat-home .ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	font-family: var(--n-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	clip-path: var(--n-cut-control);
	transition: all 0.2s ease;
}

.ds-fitfat-home .ds-btn--primary {
	background: var(--n-gold);
	color: #021010 !important;
	box-shadow: 0 0 15px var(--n-gold-glow);
}

.ds-fitfat-home .ds-btn--primary:hover {
	background: #ffd333;
	box-shadow: 0 0 25px rgba(228, 179, 1, 0.7);
	transform: translateY(-2px);
}

.ds-fitfat-home .ds-btn--ghost,
.ds-fitfat-home .ds-btn--onDark {
	background: transparent;
	color: #ffffff !important;
	border: 1px solid var(--n-teal);
}

.ds-fitfat-home .ds-btn--ghost:hover,
.ds-fitfat-home .ds-btn--onDark:hover {
	background: var(--n-teal-subtle);
	border-color: #14a2bf;
	color: #ffffff !important;
	box-shadow: 0 0 15px var(--n-teal-glow);
}

.ds-fitfat-home .ds-btn--small {
	padding: 10px 18px;
	font-size: 12px;
}

.ds-fitfat-home .ds-btn--big {
	padding: 16px 34px;
	font-size: 14px;
}

.ds-fitfat-home .ds-card__cta .ds-btn {
	width: 100%;
	background: transparent;
	color: var(--n-gold) !important;
	border: 1px solid var(--n-line-gold);
	box-shadow: none;
}

.ds-fitfat-home .ds-card__cta .ds-btn:hover {
	background: var(--n-gold);
	color: #021010 !important;
	box-shadow: 0 0 18px var(--n-gold-glow);
	transform: none;
}

/* The block-level "See all events" link under the grid. */
.ds-fitfat-home .ds-block__more,
.ds-fitfat-home .ds-ff-events .ds-block__more {
	margin: 34px 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

/* --- 39. What it costs -------------------------------------------------- */

/* The site now sells two things, so the page that explains Dad Squad has to
 * say plainly what is free and what is not. The risk this block exists to head
 * off is a man reading the pass as the price of admission and closing the tab.
 *
 * So the free card leads, carries the gold, and is the only one with a filled
 * price. The two paid cards are deliberately quieter: teal, outlined, secondary.
 * Ranking them by cost would have put the paid tiers first and said the
 * opposite of what the section is for. */

.ds-subpage-wrap .ds-cost-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 30px 0 0;
}

.ds-subpage-wrap .ds-cost-card {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 24px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line-subtle);
	border-left: 2px solid var(--n-teal);
	clip-path: var(--n-cut-card);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ds-subpage-wrap .ds-cost-card:hover {
	box-shadow: 0 0 18px rgba(17, 136, 160, 0.28);
}

.ds-subpage-wrap .ds-cost-card--free {
	background: var(--n-card);
	border-left-color: var(--n-gold);
}

.ds-subpage-wrap .ds-cost-card--free:hover {
	box-shadow: 0 0 18px rgba(228, 179, 1, 0.26);
}

.ds-subpage-wrap .ds-cost-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--n-text-dim);
}

.ds-subpage-wrap .ds-cost-price {
	display: block;
	margin: 8px 0 12px;
	font-family: var(--n-font-display);
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: 0.5px;
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-cost-card--free .ds-cost-price {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-cost-per {
	font-family: var(--n-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--n-text-dim);
}

/* The paid business tier is two things bought together, so the card names both
 * under the price rather than leaving the reader to find it in the paragraph. */
.ds-subpage-wrap .ds-cost-sub {
	display: block;
	margin: -6px 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-cost-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

/* Pushed to the bottom so the three cards line their links up however unevenly
 * the copy above them runs. */
.ds-subpage-wrap .ds-cost-more {
	margin-top: auto !important;
	padding-top: 14px;
}

.ds-subpage-wrap .ds-cost-more a {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: var(--n-teal);
	text-decoration: none !important;
	border-bottom: 1px solid rgba(17, 136, 160, 0.45);
	padding-bottom: 2px;
}

.ds-subpage-wrap .ds-cost-more a:hover {
	color: var(--n-gold);
	border-bottom-color: var(--n-line-gold);
}

@media (max-width: 900px) {

	.ds-subpage-wrap .ds-cost-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * 40. Forms and bands
 * ------------------------------------------------------------------------ */

/* --- 40.1 Form shells -------------------------------------------------- */

.ds-subpage-wrap .ds-form-wrap {
	width: 100%;
	max-width: 820px;
	margin: 0;
	font-family: var(--n-font-sans);
	color: var(--n-text);
}

.ds-subpage-wrap .ds-form {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 34px;
	background: var(--n-card);
	border: 1px solid var(--n-line);
	border-radius: 0;
	clip-path: var(--n-cut-card);
	box-shadow: none;
}

/* --- 40.2 Form copy and rows ------------------------------------------ */

.ds-subpage-wrap .ds-form__title {
	margin: 0 0 14px;
	font-family: var(--n-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--n-text);
}

.ds-subpage-wrap .ds-form__lede,
.ds-subpage-wrap .ds-form__intro {
	max-width: 680px;
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-form__row {
	margin: 0 0 18px;
}

.ds-subpage-wrap .ds-form__row--pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
}

.ds-subpage-wrap .ds-form__row--other {
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid var(--n-line);
}

.ds-subpage-wrap .ds-form__label {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-req {
	color: var(--n-gold);
}

/* --- 40.3 Controls ----------------------------------------------------- */

.ds-subpage-wrap .ds-form__input,
.ds-subpage-wrap .ds-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.ds-subpage-wrap .ds-form select,
.ds-subpage-wrap .ds-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	background: var(--n-input);
	border: 1px solid var(--n-line-subtle);
	border-radius: 0;
	color: var(--n-text);
	font-family: var(--n-font-sans);
	font-size: 15px;
	line-height: 1.4;
	clip-path: var(--n-cut-control);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ds-subpage-wrap .ds-form__input::placeholder,
.ds-subpage-wrap .ds-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"])::placeholder,
.ds-subpage-wrap .ds-form textarea::placeholder {
	color: var(--n-text-dim);
	opacity: 1;
}

.ds-subpage-wrap .ds-form__input:focus,
.ds-subpage-wrap .ds-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus,
.ds-subpage-wrap .ds-form select:focus,
.ds-subpage-wrap .ds-form textarea:focus {
	border-color: var(--n-teal);
	outline: 1px solid var(--n-teal);
	outline-offset: 1px;
	box-shadow: 0 0 14px var(--n-teal-glow);
}

.ds-subpage-wrap .ds-form__input--tall {
	min-height: 150px;
	line-height: 1.6;
	resize: vertical;
}

.ds-subpage-wrap .ds-form__hint {
	display: block;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--n-text-dim);
}

/* --- 40.4 Groups and checks ------------------------------------------- */

.ds-subpage-wrap .ds-form__group {
	min-width: 0;
	margin: 0 0 22px;
	padding: 20px 0 4px;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--n-line-subtle);
	border-radius: 0;
}

.ds-subpage-wrap .ds-form__group > legend {
	padding: 0 10px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-form__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--n-text-muted);
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.ds-subpage-wrap .ds-form__check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--n-teal);
	cursor: pointer;
}

/* --- 40.5 Actions and supporting copy --------------------------------- */

.ds-subpage-wrap .ds-form__actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}

.ds-subpage-wrap .ds-form__actions .ds-btn {
	margin: 0;
}

.ds-subpage-wrap .ds-form__foot {
	margin: 18px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--n-text-dim);
}

.ds-subpage-wrap .ds-form__sidestep {
	margin: -4px 0 22px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-form__sidestep a,
.ds-subpage-wrap .ds-form__foot a {
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-form__sidestep a:hover,
.ds-subpage-wrap .ds-form__foot a:hover {
	color: var(--n-text);
}

/* --- 40.6 Notices and confirmations ----------------------------------- */

.ds-subpage-wrap .ds-form__notice,
.ds-subpage-wrap .ds-notice {
	margin: 0 0 22px;
	padding: 15px 18px;
	background: var(--n-teal-subtle);
	border: 0;
	border-left: 2px solid var(--n-teal);
	border-radius: 0;
	color: var(--n-text);
	clip-path: var(--n-cut-control);
}

.ds-subpage-wrap .ds-form__notice--ok,
.ds-subpage-wrap .ds-notice--ok {
	background: var(--n-teal-subtle);
	border-left-color: var(--n-teal);
}

.ds-subpage-wrap .ds-form__notice--error,
.ds-subpage-wrap .ds-notice--error {
	background: rgba(216, 98, 58, 0.12);
	border-left-color: rgb(216, 98, 58);
}

.ds-subpage-wrap .ds-form__notice h3,
.ds-subpage-wrap .ds-notice h3 {
	margin: 0 0 6px;
	font-family: var(--n-font-display);
	font-size: 1.25rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--n-text);
}

.ds-subpage-wrap .ds-form__notice p,
.ds-subpage-wrap .ds-notice p {
	margin: 0;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-nominated {
	margin: 0 0 26px;
	padding: 20px 22px;
	background: var(--n-teal-subtle);
	border: 1px solid var(--n-line);
	border-left: 2px solid var(--n-teal);
	border-radius: 0;
	color: var(--n-text);
	clip-path: var(--n-cut-card);
}

.ds-subpage-wrap .ds-nominated span {
	display: block;
	margin-top: 6px;
	font-weight: 400;
	color: var(--n-text-muted);
}

/* --- 40.7 Check grids and custom tags --------------------------------- */

.ds-subpage-wrap .ds-checkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

.ds-subpage-wrap .ds-checkgrid__group {
	width: 100%;
}

.ds-subpage-wrap .ds-checkgrid__label {
	margin: 18px 0 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-checkgrid__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 9px 12px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line-subtle);
	border-radius: 0;
	color: var(--n-text-muted);
	font-size: 13px;
	line-height: 1.35;
	clip-path: var(--n-cut-badge);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* The native box stays in the accessibility tree while the whole chip becomes
 * the visible hit target. */
.ds-subpage-wrap .ds-checkgrid__item input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ds-subpage-wrap .ds-checkgrid__item:focus-within {
	border-color: var(--n-teal);
	box-shadow: 0 0 12px var(--n-teal-glow);
}

.ds-subpage-wrap .ds-checkgrid__item:has(input:checked),
.ds-subpage-wrap .ds-checkgrid__item.is-checked {
	background: var(--n-gold-subtle);
	border-color: var(--n-gold);
	color: var(--n-text);
}

.ds-subpage-wrap .ds-checkgrid__item.is-own {
	background: var(--n-teal-subtle);
	border-color: var(--n-teal);
	color: var(--n-text);
}

.ds-subpage-wrap .ds-tagadd {
	margin-top: 10px;
}

.ds-subpage-wrap .ds-tagadd__chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.ds-subpage-wrap .ds-tagadd__input {
	margin-top: 2px;
}

.ds-subpage-wrap .ds-tagadd__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--n-text-dim);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
}

.ds-subpage-wrap .ds-tagadd__remove:hover,
.ds-subpage-wrap .ds-tagadd__remove:focus-visible {
	color: var(--n-gold);
}

/* Off-screen rather than display:none so the trap still catches simple bots. */
.ds-subpage-wrap .ds-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- 40.8 Form bands --------------------------------------------------- */

/* Just a width cap, not a panel. The form inside already renders as a card,
 * and wrapping a card in a card gave every form a visible box inside a visible
 * box. Line length is still capped here, because a 1240px text input is not a
 * text input anybody wants to type into. */
.ds-subpage-wrap .ds-formband {
	max-width: 820px;
	margin: 26px 0 0;
}

.ds-subpage-wrap .ds-formband--own {
	margin-top: 22px;
}

.ds-subpage-wrap .ds-formband > *:first-child {
	margin-top: 0;
}

.ds-subpage-wrap .ds-formband > *:last-child {
	margin-bottom: 0;
}

/* --- 40.9 Host page bands --------------------------------------------- */

.ds-subpage-wrap .ds-band {
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 72px 0;
	background-color: var(--n-surface);
	border-radius: 0;
}

.ds-subpage-wrap .ds-band--photo {
	isolation: isolate;
	overflow: hidden;
	background-color: var(--n-ground);
	background-position: center;
	background-size: cover;
}

/* The inline photo stays visible at the right while copy on the left keeps a
 * reliably dark reading surface. */
.ds-subpage-wrap .ds-band--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to right, rgba(5, 5, 5, 0.94), rgba(5, 5, 5, 0.55));
	pointer-events: none;
}

.ds-subpage-wrap .ds-band__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

.ds-subpage-wrap .ds-band__kicker {
	display: block;
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-band__title {
	margin: 0 0 16px;
	font-family: var(--n-font-display);
	font-size: clamp(2.5rem, 7vw, 5rem);
	line-height: 0.95;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--n-text);
}

.ds-subpage-wrap .ds-band__lede {
	max-width: 720px;
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

/* --- 40.10 Responsive -------------------------------------------------- */

@media (max-width: 720px) {

	.ds-subpage-wrap .ds-form {
		padding: 26px 20px;
	}

	.ds-subpage-wrap .ds-form__row--pair,
	.ds-subpage-wrap .ds-checkgrid {
		grid-template-columns: 1fr;
	}

	.ds-subpage-wrap .ds-form__row--other {
		margin-left: 8px;
		padding-left: 10px;
	}

	.ds-subpage-wrap .ds-formband {
		margin-top: 48px;
		margin-bottom: 48px;
	}

	.ds-subpage-wrap .ds-formband::before,
	.ds-subpage-wrap .ds-formband--own::before {
		top: -48px;
		bottom: -48px;
	}

	.ds-subpage-wrap .ds-band {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.ds-subpage-wrap .ds-band__lede {
		font-size: 15px;
	}
}

/* =========================================================================
 * 41. Host page components and the photo gallery
 * ========================================================================= */

/* --- 41.1 Band variants ------------------------------------------------ */

/* The Host page was written for the old light Divi design and still asks for
 * gold, teal, light and white bands by name. On a black site "white" cannot
 * mean white, so the two light variants are remapped to the two dark surfaces
 * this theme already alternates between. Renaming them in the page content
 * would have been the tidier fix, but the class names are what the page ships
 * with and remapping keeps the page working if it is ever edited back. */

.ds-subpage-wrap .ds-band--white {
	background: var(--n-ground);
}

.ds-subpage-wrap .ds-band--light {
	background: var(--n-surface);
	border-top: 1px solid var(--n-line-subtle);
	border-bottom: 1px solid var(--n-line-subtle);
}

.ds-subpage-wrap .ds-band--gold {
	background: var(--n-gold-subtle);
	border-top: 1px solid var(--n-line-gold);
	border-bottom: 1px solid var(--n-line-gold);
}

.ds-subpage-wrap .ds-band--gold .ds-band__title {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-band--teal {
	background: var(--n-teal-subtle);
	border-top: 1px solid var(--n-line);
	border-bottom: 1px solid var(--n-line);
}

.ds-subpage-wrap .ds-band--teal .ds-band__title {
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-band__inner--narrow {
	max-width: 860px;
}

.ds-subpage-wrap .ds-band__title--sm {
	font-size: 1.35rem;
	letter-spacing: 0.6px;
}

.ds-subpage-wrap .ds-band__note {
	max-width: 720px;
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--n-text-muted);
}

/* --- 41.2 Formats list -------------------------------------------------- */

/* Six ways to run a night, written as a heading, a line of explanation and a
 * real example each. As a flat run of headings it read as one long article; as
 * a grid it reads as a menu somebody can pick from, which is what it is. */

.ds-subpage-wrap .ds-formats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin: 28px 0 0;
}

.ds-subpage-wrap .ds-format {
	display: flex;
	flex-direction: column;
	padding: 24px 22px 22px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line-subtle);
	border-left: 2px solid var(--n-teal);
	clip-path: var(--n-cut-card);
	transition: border-left-color 0.25s ease, box-shadow 0.25s ease;
}

.ds-subpage-wrap .ds-format:hover {
	border-left-color: var(--n-gold);
	box-shadow: 0 0 18px rgba(17, 136, 160, 0.24);
}

.ds-subpage-wrap .ds-format__name {
	margin: 0 0 10px;
	font-family: var(--n-font-display);
	font-size: 1.15rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.ds-subpage-wrap .ds-format__body {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

/* The worked example is the most useful line in the card, so it is pushed to
 * the bottom and set apart rather than left to trail the paragraph. */
.ds-subpage-wrap .ds-format__eg {
	margin: 14px 0 0 !important;
	padding-top: 12px;
	border-top: 1px solid var(--n-line-subtle);
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
	color: var(--n-text-dim);
}

/* --- 41.3 Callouts, checklists, two-up --------------------------------- */

.ds-subpage-wrap .ds-callout {
	margin: 26px 0 0;
	padding: 20px 22px;
	background: var(--n-card);
	border-left: 2px solid var(--n-gold);
	clip-path: var(--n-cut-card);
	font-size: 14px;
	line-height: 1.7;
	color: var(--n-text-muted);
}

/* The quiet variant carries the liability wording. It has to be readable and
 * it must not shout, so it drops to teal and loses the fill. */
/* Quiet, but it is the liability wording and it still has to be read, so it
 * loses the fill rather than the contrast. */
.ds-subpage-wrap .ds-callout--quiet {
	max-width: 860px;
	background: transparent;
	border-left-color: var(--n-line);
	color: var(--n-text-muted);
	font-size: 13px;
}

.ds-subpage-wrap .ds-checklist {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.ds-subpage-wrap .ds-checklist li {
	position: relative;
	margin: 0;
	padding: 0 0 0 26px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-checklist li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--n-gold);
	clip-path: var(--n-cut-badge);
}

.ds-subpage-wrap .ds-checklist--onteal li::before {
	background: var(--n-teal);
}

.ds-subpage-wrap .ds-twoup {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 40px;
	margin: 26px 0 0;
}

/* --- 41.4 Photo gallery ------------------------------------------------- */

/* The gallery page is the one place on this site where the pictures are the
 * content, so the grid is dense and the chrome is almost nothing: a hairline,
 * the house chamfer, and a lift on hover. */

.ds-subpage-wrap .ds-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin: 28px 0 0;
}

.ds-subpage-wrap .ds-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line-subtle);
	clip-path: var(--n-cut-card);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ds-subpage-wrap .ds-photo:hover {
	border-color: var(--n-line);
	box-shadow: 0 0 20px rgba(17, 136, 160, 0.3);
}

.ds-subpage-wrap .ds-photo img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
	/* Held slightly back so the grid reads as one surface rather than a wall of
	 * competing exposures, and brought up on hover. */
	filter: saturate(0.92) brightness(0.92);
	transition: transform 0.4s ease, filter 0.25s ease;
}

.ds-subpage-wrap .ds-photo:hover img {
	transform: scale(1.04);
	filter: none;
}

.ds-subpage-wrap .ds-gallery-cta {
	text-align: center;
}

/* The last block on a page already has the body's own bottom padding beneath
 * it, so its section margin was stacking into a screen of nothing. */
.ds-subpage-body .ds-ff-section:last-child,
.ds-subpage-body .ds-content-box:last-child {
	margin-bottom: 0;
}

.ds-subpage-wrap .ds-gallery-cta p:last-child {
	margin-top: 22px;
}

/* --- 41.5 Responsive ---------------------------------------------------- */

@media (max-width: 900px) {

	.ds-subpage-wrap .ds-twoup {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.ds-subpage-wrap .ds-photo img {
		height: 220px;
	}
}

/* --- 41.6 Centred blocks ------------------------------------------------ */

/* The plugin's centred block variant centres the heading but leaves the lede
 * and the button on the left, so the section reads as two alignments arguing.
 * Everything on this site is left-aligned to one column, so the variant is
 * flattened rather than completed. */
.ds-subpage-wrap .ds-block--centred,
.ds-subpage-wrap .ds-block--centred .ds-block__title,
.ds-subpage-wrap .ds-block--centred .ds-block__lede {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

/* --- 41.7 Member gates, small print, business tiers --------------------- */

/* Half the forms on this site are members only, and a man who is not logged in
 * sees this panel where the form would be. It was three bare paragraphs and a
 * link, which read as an error rather than a door. */
.ds-subpage-wrap .ds-note {
	max-width: 820px;
	margin: 24px 0 0;
	padding: 24px 26px 22px;
	background: var(--n-teal-subtle);
	border: 1px solid var(--n-line);
	border-left: 2px solid var(--n-teal);
	clip-path: var(--n-cut-card);
}

.ds-subpage-wrap .ds-note p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-note p:last-child {
	margin-bottom: 0;
	font-size: 13px;
	color: var(--n-text-dim);
}

/* The log in link is the only thing to do in the panel, so it carries the gold
 * rather than arriving as an unmarked .ds-btn with no modifier on it. */
.ds-subpage-wrap .ds-note .ds-btn {
	margin: 6px 0 14px;
	background: var(--n-gold);
	border-color: var(--n-gold);
	color: #0a0a0b;
}

.ds-subpage-wrap .ds-note .ds-btn:hover {
	background: #ffd333;
	border-color: #ffd333;
	color: #0a0a0b;
}

.ds-subpage-wrap .ds-form__note {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--n-text-dim);
}

/* Three kinds of listing in the directory: the ones paying to be there, the
 * ones owned by members, and everybody else. The tier is a quiet label, not a
 * ranking badge, so only the paid one gets any colour. */
.ds-subpage-wrap .ds-business-tier {
	display: inline-block;
	padding: 4px 9px 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--n-text-dim);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--n-line-subtle);
	clip-path: var(--n-cut-badge);
}

.ds-subpage-wrap .ds-business-tier--preferred {
	color: var(--n-gold);
	background: var(--n-gold-subtle);
	border-color: var(--n-line-gold);
}

.ds-subpage-wrap .ds-business-tier--owned {
	color: var(--n-teal);
	background: var(--n-teal-subtle);
	border-color: var(--n-line);
}

/* =========================================================================
 * 42. Section rhythm — bringing the subpages up to the reference design
 * ========================================================================= */

/* The DadSquad+ reference is built from full-width near-black bands separated
 * by hairlines, with the content held in a generous inset column. It uses no
 * coloured section fills at all: gold and teal appear in headlines, rules and
 * buttons, never as a wash behind a whole section. Section 41 had a gold band
 * and a teal band on the Host page, and the teal one in particular read as an
 * unrelated green slab with a pinstripe around it. Both are pulled back here. */

/* --- 42.1 Band variants, de-tinted ------------------------------------- */

.ds-subpage-wrap .ds-band--gold,
.ds-subpage-wrap .ds-band--light {
	background: var(--n-surface);
	border-top: 1px solid var(--n-line-subtle);
	border-bottom: 0;
}

.ds-subpage-wrap .ds-band--teal,
.ds-subpage-wrap .ds-band--white {
	background: var(--n-ground);
	border-top: 1px solid var(--n-line-subtle);
	border-bottom: 0;
}

/* The colour moves off the background and onto the headline, which is where
 * the reference puts it. */
.ds-subpage-wrap .ds-band--gold .ds-band__title {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-band--teal .ds-band__title {
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-band {
	padding: 84px 0;
}

/* --- 42.2 Content boxes as sections ------------------------------------ */

/* A run of headings and paragraphs down a page reads as one long document. The
 * businesses directory already solves this: each section is a panel with its
 * own ground, so the eye can see where one subject stops and the next starts.
 * Every general page now gets the same, alternating tone by position so the
 * page has a rhythm rather than a stack of identical boxes. */

/* The !important is not decoration. 38.3 zeroes padding on every .ds-ff-section
 * inside the body with !important, to stop the home page's 100px band rule
 * applying to nested content boxes, and these boxes carry both classes. */
.ds-subpage-body .ds-content-box {
	padding: 44px 44px 40px !important;
	background: var(--n-card);
	border: 1px solid var(--n-line-subtle);
	border-top: 2px solid var(--n-line-gold);
	clip-path: var(--n-cut-card);
}

.ds-subpage-body .ds-content-box:nth-of-type(even) {
	background: var(--n-card-alt);
	border-top-color: var(--n-line);
}

/* The intro paragraph sits above the first section and stays out of the
 * panels, the way the reference opens under its headline. */
.ds-subpage-body .ds-section-intro {
	max-width: 900px;
	margin: 0 0 40px;
}

.ds-subpage-body .ds-content-box > p {
	max-width: 900px;
}

/* --- 42.3 Split layouts ------------------------------------------------ */

/* The reference never leaves a third of the page empty: text on one side,
 * something to look at on the other. Forms were sitting in an 820px column
 * with dead space beside them, which is what made these pages read narrow. */

.ds-subpage-wrap .ds-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 30px 44px;
	align-items: start;
	margin: 30px 0 0;
}

.ds-subpage-wrap .ds-split__aside p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-split__aside p:last-child {
	margin-bottom: 0;
}

.ds-subpage-wrap .ds-split__aside .ds-split__lead {
	font-size: 16px;
	line-height: 1.7;
	color: var(--n-text);
}

/* A form inside a split fills its own column rather than keeping the width cap
 * it needs when it is the only thing on the row. */
.ds-subpage-wrap .ds-split .ds-formband {
	max-width: none;
	margin-top: 0;
}

/* --- 42.4 Width caps that were fighting the page ----------------------- */

/* 40.1 capped every form wrapper at 820px. On the Ask page that wrapper holds
 * the whole two-column layout, so the crisis panel and the form together were
 * squeezed into two thirds of the page with a dead strip beside them. The cap
 * belongs on the form, not on whatever happens to contain it. */
.ds-subpage-wrap .ds-form-wrap {
	max-width: none;
}

.ds-subpage-wrap .ds-ask {
	gap: 40px;
}

/* --- 42.5 Responsive ---------------------------------------------------- */

@media (max-width: 900px) {

	.ds-subpage-wrap .ds-split {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.ds-subpage-body .ds-content-box {
		padding: 30px 22px 28px;
	}

	.ds-subpage-wrap .ds-band {
		padding: 56px 0;
	}
}

/* --- 42.6 Where the width cap actually belongs ------------------------- */

/* The cap was on the band, but the band is whatever a page happens to wrap a
 * shortcode in, and on the Ask page it wraps the entire two-column layout. So
 * the crisis panel and the form together were squeezed into 820px with a third
 * of the page empty beside them. The cap moves onto the form itself, which is
 * the only thing that actually needs one. */
.ds-subpage-wrap .ds-formband {
	max-width: none;
}

.ds-subpage-wrap .ds-formband > .ds-form,
.ds-subpage-wrap .ds-formband > .ds-form-wrap {
	max-width: 820px;
}

/* Inside a split it fills its own column, which is already narrow enough. */
.ds-subpage-wrap .ds-split .ds-formband > .ds-form,
.ds-subpage-wrap .ds-split .ds-formband > .ds-form-wrap {
	max-width: none;
}

/* =========================================================================
 * 43. Reference language — eyebrows, two-tone headlines, numbered cards
 * =========================================================================
 * Lifted from the DadSquad+ reference at /opt/dadsquad-design/. Three things
 * carry that design and none of them existed on the subpages: a short gold
 * rule with a tiny label above every headline, headlines that change colour
 * mid-sentence, and cards outlined in gold with a big teal numeral. Built as
 * generic pieces so the remaining pages can use them one at a time.
 */

/* --- 43.1 Section eyebrow ----------------------------------------------- */

.ds-subpage-wrap .ds-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-family: var(--n-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--n-text-dim);
}

.ds-subpage-wrap .ds-eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	flex: none;
	background: var(--n-gold);
}

.ds-subpage-wrap .ds-eyebrow--teal::before {
	background: var(--n-teal);
}

/* --- 43.2 Two-tone headlines -------------------------------------------- */

/* The reference never runs a headline in one colour. A word or two goes gold
 * and a word or two goes teal, which is what stops a wall of uppercase display
 * type reading as a shout. */

.ds-subpage-wrap .ds-hl {
	color: var(--n-gold);
}

.ds-subpage-wrap .ds-hl--teal {
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-band__title {
	max-width: 900px;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.04;
}

.ds-subpage-wrap .ds-band__title--sm {
	font-size: clamp(24px, 2.6vw, 34px);
}

/* --- 43.3 Numbered cards ------------------------------------------------ */

/* Gold outline, dark fill, and the number carried big and teal in the corner.
 * The number is the thing the eye lands on first in the reference, so it is
 * larger than the card's own name. */

.ds-subpage-wrap .ds-format {
	position: relative;
	padding: 26px 24px 24px;
	background: var(--n-card-alt);
	border: 1px solid var(--n-line-gold);
	border-left: 1px solid var(--n-line-gold);
	clip-path: var(--n-cut-card);
	counter-increment: ds-format;
}

.ds-subpage-wrap .ds-formats {
	counter-reset: ds-format;
}

.ds-subpage-wrap .ds-format::before {
	content: "0" counter(ds-format);
	display: block;
	margin: 0 0 14px;
	font-family: var(--n-font-display);
	font-size: 2.2rem;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--n-teal);
}

.ds-subpage-wrap .ds-format:hover {
	border-color: var(--n-gold);
	box-shadow: 0 0 22px rgba(228, 179, 1, 0.16);
}

/* --- 43.4 Alternating text and picture ---------------------------------- */

/* The reference never runs more than two blocks of prose before putting
 * something to look at beside them. */

.ds-subpage-wrap .ds-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 30px 56px;
	align-items: center;
}

.ds-subpage-wrap .ds-showcase--flip .ds-showcase__media {
	order: -1;
}

.ds-subpage-wrap .ds-showcase__copy p {
	max-width: 560px;
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--n-text-muted);
}

.ds-subpage-wrap .ds-showcase__copy p:last-child {
	margin-bottom: 0;
}

/* The photo sits inside its own offset gold rule, the way the reference frames
 * every image rather than dropping it flush on the page. */
.ds-subpage-wrap .ds-showcase__media {
	position: relative;
	padding: 14px 0 0 14px;
}

.ds-subpage-wrap .ds-showcase__media::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 62%;
	height: 62%;
	border-top: 2px solid var(--n-line-gold);
	border-left: 2px solid var(--n-line-gold);
}

.ds-subpage-wrap .ds-showcase__media img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	clip-path: var(--n-cut-card);
}

/* --- 43.5 Responsive ---------------------------------------------------- */

@media (max-width: 900px) {

	.ds-subpage-wrap .ds-showcase {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.ds-subpage-wrap .ds-showcase--flip .ds-showcase__media {
		order: 0;
	}
}

/* --- 43.6 A photo band doing duty as the page header -------------------- */

/* When a page opens with its own photo band, the theme's generic hero is not
 * rendered (see page.php) and the band takes its place. It needs the height a
 * header has, and the body's own top padding has to come off or the band
 * arrives 76px down the page with a black strip above it. */

.ds-general-page--ownhero .ds-subpage-body {
	padding-top: 0;
}

.ds-general-page--ownhero .ds-article-inner > .ds-band--photo:first-child {
	padding: 108px 0 96px;
}

.ds-general-page--ownhero .ds-article-inner > .ds-band--photo:first-child .ds-band__title {
	font-size: clamp(34px, 5vw, 62px);
}

/* The eyebrow is standing in for the site kicker here, so it takes the kicker's
 * gold rather than the muted grey it uses further down a page. */
.ds-general-page--ownhero .ds-article-inner > .ds-band--photo:first-child .ds-eyebrow {
	color: var(--n-gold);
}

@media (max-width: 900px) {

	.ds-general-page--ownhero .ds-article-inner > .ds-band--photo:first-child {
		padding: 72px 0 60px;
	}
}

/* =========================================================================
 * 44. The reference eyebrow on every subpage header
 * =========================================================================
 * The theme's hero kicker is a glowing dot plus a label; the reference uses a
 * short gold rule plus a label, which is the same idea drawn the way the rest
 * of the design draws it. Scoped to .ds-subpage-wrap so the home page keeps
 * the dot until Cory decides on that separately.
 */

.ds-subpage-wrap .ds-ff-kicker-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
}

.ds-subpage-wrap .ds-ff-kicker-dot {
	width: 34px;
	height: 2px;
	flex: none;
	background: var(--n-gold);
	box-shadow: none;
	border-radius: 0;
}

.ds-subpage-wrap .ds-ff-kicker {
	font-size: 11px;
	letter-spacing: 2.2px;
	color: var(--n-gold);
}

/* The glow behind highlighted words in a headline blurs the letterforms at
 * display sizes. The reference has no glow on type anywhere. */
.ds-subpage-wrap .ds-ff-highlight {
	text-shadow: none;
}

/* --- 44.2 Section headings get the eyebrow rule too --------------------- */

/* Headings were carrying a gold gradient underline. The reference puts a short
 * solid gold rule ABOVE the heading instead, and nothing under it. Moving the
 * rule brings every plugin-rendered block, on Events, Squads, Service and the
 * directory, into the same language as the pages built by hand, without
 * forking a single plugin template. */

.ds-subpage-wrap .ds-content-box > h2::after,
.ds-subpage-wrap .ds-block__title::after {
	content: none;
}

.ds-subpage-wrap .ds-content-box > h2,
.ds-subpage-wrap .ds-block__title {
	padding-bottom: 0;
	padding-top: 18px;
}

.ds-subpage-wrap .ds-content-box > h2::before,
.ds-subpage-wrap .ds-block__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 2px;
	background: var(--n-gold);
}

.ds-subpage-wrap .ds-block__title {
	position: relative;
}

/* A heading that already has a hand-written eyebrow above it does not need a
 * second rule of its own. */
.ds-subpage-wrap .ds-eyebrow + .ds-band__title::before,
.ds-subpage-wrap .ds-eyebrow + h2::before {
	content: none;
}

/* --- 44.3 The narrow band inner ---------------------------------------- */

/* --narrow was capping the container itself, and because the container is
 * centred that pushed its whole block 190px to the right of every other
 * section on the page. The column has to stay put; it is the line length that
 * wants shortening, so the cap moves onto the children. */
.ds-subpage-wrap .ds-band__inner--narrow {
	max-width: 1240px;
}

.ds-subpage-wrap .ds-band__inner--narrow > * {
	max-width: 880px;
}

/* --- 44.4 Forms that should use the page ------------------------------- */

/* An 820px cap is right for a column of text inputs and wrong for a form that
 * is mostly tick boxes: the skills form has forty-odd options and was stacking
 * them four across inside a narrow panel with half the page empty beside it.
 * A form containing a check grid takes the full column, and the cap moves onto
 * the things that actually need a line length, the text fields. */

.ds-subpage-wrap .ds-formband > .ds-form:has(.ds-checkgrid),
.ds-subpage-wrap .ds-formband > .ds-form-wrap:has(.ds-checkgrid) {
	max-width: none;
}

.ds-subpage-wrap .ds-form:has(.ds-checkgrid) .ds-form__row > .ds-form__input,
.ds-subpage-wrap .ds-form:has(.ds-checkgrid) .ds-form__row > .ds-form__hint,
.ds-subpage-wrap .ds-form:has(.ds-checkgrid) > .ds-form__lede,
.ds-subpage-wrap .ds-form:has(.ds-checkgrid) > .ds-form__intro {
	max-width: 900px;
}

/* With the room to do it, the options spread rather than stacking. */
.ds-subpage-wrap .ds-form:has(.ds-checkgrid) .ds-checkgrid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* The tag input is a single field, not a paragraph, so it does not need the
 * full width either. */
.ds-subpage-wrap .ds-tagadd__input {
	max-width: 520px;
}

/* --- 44.5 One heading per section -------------------------------------- */

/* Every plugin form ships with its own <h2>. Where the page has already given
 * the section a heading, that is the third headline in a row saying much the
 * same thing: "What you are good at" in the header, "Trades, tools and gear"
 * on the section, then "What are you good at?" on the form itself. The form
 * keeps its title only when nothing above it has introduced it. */
.ds-subpage-wrap .ds-band__inner:has(> h2) .ds-formband .ds-form__title {
	display: none;
}

.ds-subpage-wrap .ds-band__inner:has(> h2) .ds-formband .ds-form__lede {
	margin-top: 0;
}

/* --- 44.6 Menu parents that are labels, not links ---------------------- */

/* "Get involved" now renders as a span (see functions.php). It has to sit on
 * the same baseline and carry the same type as the real links either side of
 * it, but it deliberately does not get the pointer cursor or the gold underline
 * that say "this goes somewhere". */

.ds-nav-menu > .menu-item > .ds-nav-parent {
	position: relative;
	display: block;
	padding: 10px 14px 10px 0;
	color: var(--n-text-muted);
	font-family: var(--n-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: default;
	transition: color 0.2s ease;
}

.ds-nav-menu > .menu-item-has-children:hover > .ds-nav-parent,
.ds-nav-menu > .menu-item-has-children:focus-within > .ds-nav-parent {
	color: var(--n-text);
}

.ds-nav-parent:focus-visible {
	outline: 2px solid var(--n-gold);
	outline-offset: 2px;
}

/* In the drawer the children are already listed underneath it, so the parent is
 * doing the job of a group heading and is styled as one. */
.ds-mobile-nav-list > .menu-item > .ds-nav-parent {
	display: block;
	padding: 18px 0 8px;
	font-family: var(--n-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--n-text-dim);
	cursor: default;
}

/* =========================================================================
 * 45. No gutters — sections run to the edge of the page
 * =========================================================================
 * Sections were panels sitting inside the 1240px column, which left a black
 * bar down each side: 100px at 1440, and 340px at 1920, where it reads as the
 * page being pinched into an island. Host does not have that problem because
 * its bands are full-bleed and only the words are inset. Every section now
 * works the same way: the surface reaches both edges, the content stays on the
 * same column as the logo and the nav above it.
 */

.ds-subpage-body .ds-content-box,
.ds-subpage-body .ds-archive > .ds-block {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* 620px is half the 1240 column, so the inner edge lands exactly where the
	 * header's container starts. Below that width it falls back to a plain
	 * gutter rather than going negative. */
	padding-left: max(20px, calc(50vw - 620px)) !important;
	padding-right: max(20px, calc(50vw - 620px)) !important;
	border-left: 0;
	border-right: 0;
	clip-path: none;
}

.ds-subpage-body .ds-content-box {
	padding-top: 60px !important;
	padding-bottom: 56px !important;
}

.ds-subpage-body .ds-archive > .ds-block {
	padding-top: 56px;
	padding-bottom: 52px;
	background: var(--n-surface);
	border-top: 1px solid var(--n-line-subtle);
}

.ds-subpage-body .ds-archive > .ds-block:nth-of-type(even) {
	background: var(--n-card-alt);
}

/* The page's opening paragraph is not a section, so it keeps the column. */
.ds-subpage-body > .ds-section-intro,
.ds-subpage-body .ds-article-inner > .ds-section-intro {
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* The body's own vertical padding was spacing the old islands apart. With the
 * sections carrying their own padding it only needs to clear the header. */
.ds-subpage-body {
	padding-bottom: 0;
}

@media (max-width: 900px) {

	.ds-subpage-body .ds-content-box {
		padding-top: 40px !important;
		padding-bottom: 36px !important;
	}
}

/* --- 45.1 The events archive ------------------------------------------- */

/* The events page has no .ds-block sections; it is a filter bar and a results
 * grid. Same treatment: the surface runs edge to edge, the cards stay on the
 * column. */

.ds-subpage-body .ds-eventbar,
.ds-subpage-body .ds-events-results {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(20px, calc(50vw - 620px));
	padding-right: max(20px, calc(50vw - 620px));
	border-left: 0;
	border-right: 0;
	clip-path: none;
}

.ds-subpage-body .ds-eventbar {
	padding-top: 22px;
	padding-bottom: 22px;
	background: var(--n-card-alt);
	border-top: 1px solid var(--n-line-subtle);
	border-bottom: 1px solid var(--n-line-subtle);
}

.ds-subpage-body .ds-events-results {
	padding-top: 48px;
	padding-bottom: 56px;
	background: var(--n-surface);
}

/* On a wide screen a three-across grid inside a 1240 column leaves 340px of
 * nothing either side. Given the room, it shows four. */
@media (min-width: 1600px) {

	.ds-subpage-body .ds-events-results .ds-grid--3,
	.ds-subpage-body .ds-archive > .ds-block .ds-grid--3 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ds-subpage-body .ds-eventbar,
	.ds-subpage-body .ds-events-results,
	.ds-subpage-body .ds-content-box,
	.ds-subpage-body .ds-archive > .ds-block {
		padding-left: max(20px, calc(50vw - 800px)) !important;
		padding-right: max(20px, calc(50vw - 800px)) !important;
	}
}

/* --- 45.2 The column follows on wide screens --------------------------- */

/* Widening the sections without widening the container left the logo and the
 * nav sitting 180px inside the content beneath them. The whole column moves
 * together, and only past 1600px, so nothing below that width changes. */
@media (min-width: 1600px) {

	.ds-ff-container {
		max-width: 1600px;
	}
}

/* --- 45.3 Correcting the full-bleed maths ------------------------------ */

/* The first pass hard-coded half the column (620px) into the padding, so the
 * moment the column changed width on a big screen the sections stopped lining
 * up with the logo above them. Percentages inside a full-bleed child resolve
 * against the parent, which IS the column, so `50vw - 50%` is exactly the
 * container's own left offset at any width. It tracks the column instead of
 * guessing at it. */

.ds-subpage-body .ds-content-box,
.ds-subpage-body .ds-archive > .ds-block,
.ds-subpage-body .ds-eventbar,
.ds-subpage-body .ds-events-results {
	padding-left: max(20px, calc(50vw - 50%)) !important;
	padding-right: max(20px, calc(50vw - 50%)) !important;
}

/* The header column has to grow with the rest of it, or the logo sits inside
 * the content beneath it. */
@media (min-width: 1500px) {

	.ds-ff-container,
	.ds-header-container {
		max-width: 1480px;
	}
}

/* Superseded by the rule above; the fixed 800px is no longer used. */
@media (min-width: 1600px) {

	.ds-subpage-body .ds-eventbar,
	.ds-subpage-body .ds-events-results,
	.ds-subpage-body .ds-content-box,
	.ds-subpage-body .ds-archive > .ds-block {
		padding-left: max(20px, calc(50vw - 50%)) !important;
		padding-right: max(20px, calc(50vw - 50%)) !important;
	}
}

/* --- 45.4 Bands sit on the same column -------------------------------- */

/* The band inner had its own geometry: a 1240 cap plus 20px of padding, which
 * put every band's copy 20px inside the column at 1440 and 140px inside it at
 * 1920. It now uses the container's own rule, so a band-built page and a
 * container-built page start their text at the same place. */
.ds-subpage-wrap .ds-band__inner {
	width: 92%;
	max-width: 1240px;
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 1500px) {

	.ds-subpage-wrap .ds-band__inner {
		max-width: 1480px;
	}
}

/* ==========================================================================
   46. THE PASS NOTE (replaces the three-card pricing block on the home page)
   --------------------------------------------------------------------------
   Joe's note, 2026-09-07: the home page was selling the pass before it ever
   explained the community. The pricing grid, the $5.99 action banner and the
   two-form "join the movement" block are gone; what is left is one quiet band
   that says membership is free and points at the DadSquad+ page for the rest.
   It still rides the same .ds-ff-pass-slab background the pricing grid did,
   so the partner logo ribbon underneath keeps its continuous backdrop.
   ========================================================================== */

.ds-ff-pass-slab > .ds-ff-passnote {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	margin-top: 0 !important;
	clip-path: none !important;
	padding: 96px 0 34px !important;
}

.ds-ff-pass-slab > .ds-ff-passnote::before,
.ds-ff-pass-slab > .ds-ff-passnote::after {
	display: none !important;
}

.ds-ff-passnote__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px 64px;
	padding: 40px 44px;
	background: rgba(13, 13, 15, 0.72);
	border: 1px solid var(--n-line-subtle);
	border-left: 3px solid var(--n-gold);
	clip-path: var(--n-cut-card);
}

.ds-ff-passnote__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-ff-passnote__copy .ds-ff-title {
	font-size: clamp(26px, 3vw, 38px);
	margin: 0 0 14px;
}

.ds-ff-passnote__copy .ds-ff-lede {
	margin: 0;
	max-width: 62ch;
	color: var(--n-text-muted);
}

.ds-ff-passnote__act {
	flex: 0 0 auto;
}

@media (max-width: 900px) {
	.ds-ff-passnote__inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 32px 26px;
	}
	.ds-ff-pass-slab > .ds-ff-passnote {
		padding: 72px 0 26px !important;
	}
}

/* --------------------------------------------------------------------------
   46.1 Home-page gatherings grid, underfilled
   The rule at 6429 already left-aligns a short row of cards, but it is scoped
   to .ds-subpage-wrap and the home page is not a subpage. With the fake test
   event deleted (2026-09-07) the calendar dropped to two cards, which the
   plugin's default grid centred in the middle of the column while the heading
   above stayed left — it read as a rendering fault. Same treatment here.
   -------------------------------------------------------------------------- */

.ds-ff-events-stream .ds-grid--3:has(> :last-child:nth-child(-n+2)),
.ds-ff-events-stream .ds-grid--4:has(> :last-child:nth-child(-n+3)) {
	justify-content: start;
	grid-template-columns: repeat(auto-fill, minmax(280px, 380px));
}

/* ==========================================================================
   47. THE THREE LANES ON THE DADSQUAD+ PAGE
   --------------------------------------------------------------------------
   The affiliate form arrived as its own full-width section, which read as a
   giant box for what is really the third of three equal choices: take the
   pass, list your business, or make an introduction. It now sits in the same
   row as the other two — three across on a laptop, two on a narrow laptop,
   stacked on a phone.

   align-items: start matters. The affiliate lane carries a real form and is
   naturally taller than the two short ones; without this, grid stretches all
   three to the tallest and the first two end in a field of empty card.
   ========================================================================== */

.ds-dsplus-join__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 22px;
}

@media (max-width: 1180px) {
	.ds-dsplus-join__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* On two columns the odd lane out sits alone on the second row; full width
	   there beats a half-width card next to a hole. */
	.ds-dsplus-join__card--affiliate {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.ds-dsplus-join__grid {
		grid-template-columns: 1fr;
	}
	.ds-dsplus-join__card--affiliate {
		grid-column: auto;
	}
}

/* --- 47.1 The affiliate lane's form, narrowed ---------------------------- */

/* The plugin form is built for a full-width page. In a third of a row its
   fieldset legends repeat what the card heading already says, so they go
   visually while staying readable to a screen reader. */
.ds-dsplus-join__card--affiliate .ds-form__group > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The card supplies its own heading, so the form's duplicate title and lede
   would say the same thing twice in a narrow column. */
.ds-dsplus-join__card--affiliate .ds-form__title,
.ds-dsplus-join__card--affiliate .ds-form__lede {
	display: none;
}

.ds-dsplus-join__card--affiliate .ds-form {
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	clip-path: none !important;
}

.ds-dsplus-join__card--affiliate .ds-form__group {
	padding: 0;
	border: 0;
	margin: 0 0 4px;
}

.ds-dsplus-join__card--affiliate .ds-form__row {
	margin-bottom: 14px;
}

.ds-dsplus-join__card--affiliate .ds-form__input--tall {
	min-height: 92px;
}

/* ==========================================================================
   48. THE PITCH-AN-EVENT FORM FILLS ITS COLUMN
   --------------------------------------------------------------------------
   This form inherited the 820px cap inside an 880px band, which left it
   sitting in the left two thirds of a 1240px column with a third of the page
   empty beside it — the narrow left-justified island Cory has objected to
   twice now. It fills the column instead, and the short single-line answers
   pair up two to a row so a name field is not a ribbon stretched across the
   whole page. The idea, the description and the controls stay full width.
   ========================================================================== */

.ds-subpage-wrap .ds-formband--own,
.ds-subpage-wrap .ds-formband--own > .ds-form {
	max-width: 100%;
	width: 100%;
}

@media (min-width: 860px) {
	.ds-subpage-wrap .ds-form--propose-event {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 26px;
		align-items: start;
	}

	/* Everything spans both columns by default, so only the short answers
	   below have to opt into pairing. Safer than the reverse when the plugin
	   adds a field later. */
	.ds-subpage-wrap .ds-form--propose-event > * {
		grid-column: 1 / -1;
	}

	/* Name + email, then when + where. The city select keeps a full row: its
	   option labels are long enough to clip at half width. */
	.ds-subpage-wrap .ds-form--propose-event > .ds-form__row:nth-of-type(1),
	.ds-subpage-wrap .ds-form--propose-event > .ds-form__row:nth-of-type(2),
	.ds-subpage-wrap .ds-form--propose-event > .ds-form__row:nth-of-type(5),
	.ds-subpage-wrap .ds-form--propose-event > .ds-form__row:nth-of-type(6) {
		grid-column: span 1;
	}
}

/* Logged-in members do not get the name and email fields, so the pairing
   would land on the wrong rows. Without those two, "when" and "where" are
   rows 3 and 4 rather than 5 and 6. */
@media (min-width: 860px) {
	.ds-subpage-wrap .ds-form--propose-event:not(:has(#ds_event_name)) > .ds-form__row {
		grid-column: 1 / -1;
	}

	.ds-subpage-wrap .ds-form--propose-event:not(:has(#ds_event_name)) > .ds-form__row:nth-of-type(3),
	.ds-subpage-wrap .ds-form--propose-event:not(:has(#ds_event_name)) > .ds-form__row:nth-of-type(4) {
		grid-column: span 1;
	}
}

/* ==========================================================================
   49. THE SERVICE SECTION ON THE HOME PAGE
   --------------------------------------------------------------------------
   Added 2026-09-10. The page described a calendar of gatherings and said
   almost nothing about the half of the squad's work that never appears on
   one. The photo carries the weight here, so it takes the larger share of the
   row and the copy sits in a gold card beside it.
   ========================================================================== */

.ds-ff-service {
	background-color: var(--n-ground);
}

.ds-ff-service__feature {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 30px;
	align-items: stretch;
	margin-bottom: 42px;
}

.ds-ff-service__media {
	min-height: 420px;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--n-line-subtle);
}

.ds-ff-service__copy {
	padding: 38px 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}

.ds-ff-service__title {
	font-family: var(--n-font-display);
	font-size: clamp(30px, 3.4vw, 44px);
	letter-spacing: 1px;
	line-height: 1;
	margin: 4px 0 2px;
	color: var(--n-text);
}

.ds-ff-service__text {
	margin: 0;
	color: var(--n-text-muted);
	line-height: 1.65;
}

/* The one line a man scans for: it answers "so how do I get one" without
   inviting a queue of requests, which the group specifically does not want. */
.ds-ff-service__note {
	margin: 6px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--n-line-gold);
	color: var(--n-text);
}

/* .ds-ff-grid--2 has never existed in this stylesheet (see the note in
   section 34), so these needed their own grid rather than inheriting one. */
.ds-ff-service__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 44px;
	margin-bottom: 34px;
}

@media (max-width: 760px) {
	.ds-ff-service__points {
		grid-template-columns: 1fr;
	}
}

.ds-ff-service__foot {
	margin: 0;
	max-width: 90ch;
	color: var(--n-text-muted);
	line-height: 1.7;
}

.ds-ff-service__foot a {
	color: var(--n-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.ds-ff-service__feature {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.ds-ff-service__media {
		min-height: 240px;
	}
	.ds-ff-service__copy {
		padding: 28px 24px;
	}
}