/*
 * SparkleTeam Franchise — main stylesheet.
 *
 * Foundation-owned: tokens, reset/a11y, fluid type, buttons, forms,
 * topbar/header/dropdowns/drawer, shared section components (eyebrow,
 * display, card, check-list, carousel, wave, fade), content templates,
 * and the footer. Homepage section styles are appended below the
 * integration marker at the end of this file, in band order.
 *
 * Enqueued with STFR_VERSION — bump the constant on every edit here.
 */

/* =========================================================================
 * 1. Tokens
 * ====================================================================== */

:root {
	/* Colors */
	--color-navy:      #084675;  /* top bar, dark accents, gradient start */
	--color-blue:      #0F7BCC;  /* secondary buttons, blue bands, links */
	--color-blue-dark: #0D6FB8;  /* blue hover (~8% darker) */
	--color-green:     #009A18;  /* primary buttons, accents, checkmarks */
	--color-green-dark:#008715;  /* green hover (~8% darker) */
	--color-dark:      #1A1A1A;  /* text, copyright bar bg */
	--color-charcoal:  #2E2E2E;  /* dark section bg */
	--color-bg:        #FFFFFF;
	--color-bg-alt:    #F8F8F8;  /* alt section bg, icon circles */
	--color-border:    #DDDDDD;
	--color-muted:     #666666;  /* dates, legal, secondary text */
	--color-red:       #D52B1E;  /* form error text */
	--color-field:     #112337;  /* control text — matches the design's fields */
	--color-placeholder: #112337; /* the design runs placeholders at full opacity */
	--color-grey-100:  #F5F5F5;  /* country-switcher hairline */
	--color-grey-700:  #616161;  /* country-switcher inactive label */

	/* Gradients (measured off the live design's computed CSS) */
	--grad-hero: linear-gradient(135deg, rgba(0,153,23,.10) 5%, #fff 10%, #fff 40%, rgba(15,122,204,.10) 50%, #fff 70%, rgba(0,153,23,.10) 95%);
	--grad-blue: linear-gradient(160deg, #0F7BCC 75%, rgba(15,123,204,.75) 85%, rgba(15,123,204,.5) 92%, #fff);
	--grad-light: linear-gradient(45deg, #fff 50%, #F8F8F8);

	/* Typography */
	--font-display: 'Montserrat', sans-serif;  /* headings, 700 */
	--font-body: 'Open Sans', sans-serif;      /* body 400/600/700 */
	/* Measured off the design: 30px at 360w rising to 50.7px, capped at
	 * 1440w. Paired with the 1.15 leading on .stfr-display--xl. */
	--fs-h1: clamp(1.875rem, 1.44375rem + 1.9167vw, 3.16875rem); /* 30 -> 50.7px */
	--fs-eyebrow: clamp(0.76875rem, 0.69167rem + 0.3426vw, 1rem); /* 12.3 -> 16px */
	--fs-h2: clamp(1.65rem, 1.22rem + 1.6vw, 2.244rem); /* ~35.9px desktop */
	--fs-h3: clamp(1.25rem, 1.09rem + 0.9vw, 1.694rem); /* ~27.1px desktop */

	/* Layout — the design centres a 1300px content column inside a 50px
	 * section gutter, so --max-width carries the gutter on both sides. */
	--content-width: 1300px;
	--section-px: 50px;  /* horizontal rhythm */
	--max-width: calc(var(--content-width) + (2 * var(--section-px)));
	--section-py: 88px;  /* section vertical rhythm — single source of truth */
	--radius-card: 6px;
	--radius-field: 3px;  /* inputs, chips, the quote card */
	--radius-pill: 50px;

	/* Effects */
	--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--shadow-card: 0 6px 24px rgba(26, 26, 26, 0.08);
	--shadow-card-lg: 0 14px 40px rgba(26, 26, 26, 0.14);
}

@media (max-width: 1024px) { :root { --section-py: 72px; --section-px: 32px; } }
@media (max-width: 768px)  { :root { --section-py: 60px; --section-px: 20px; } }
@media (max-width: 420px)  { :root { --section-py: 48px; --section-px: 16px; } }

/* =========================================================================
 * 2. Reset & base
 * ====================================================================== */

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

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-dark);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-dark);
}

p {
	margin: 0 0 1.2em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--color-blue);
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
}

/* Scroll lock companion for the drawer (iOS-proof; JS stores the offset). */
body.scroll-lock {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* =========================================================================
 * 3. Accessibility
 * ====================================================================== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 2000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--color-navy);
	color: #fff;
	border-radius: var(--radius-card);
	font-weight: 700;
}

:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

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

/* =========================================================================
 * 4. Layout
 * ====================================================================== */

.stfr-container {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--section-px);
}

.stfr-container--narrow {
	max-width: 860px;
}

/* =========================================================================
 * 5. Shared text classes — eyebrow / display / section head
 *
 * The eyebrow is the semantic H2 and the display title is a <p> (SEO
 * pattern), so both are styled entirely by class — every property the
 * base heading rules set is overridden here.
 * ====================================================================== */

/* Display-face eyebrow at the design's 1.15 leading and no extra tracking —
 * it reads as a small cap-height line above the H1, not a spaced label. */
.stfr-eyebrow {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--color-dark);
}

.stfr-eyebrow--light {
	color: #fff;
}

.stfr-display {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-dark);
}

.stfr-display--xl {
	font-size: var(--fs-h1);
	line-height: 1.15;
}

.stfr-display--sm {
	font-size: var(--fs-h3);
}

.stfr-display--light {
	color: #fff;
}

.stfr-display .accent {
	color: var(--color-green);
}

/* Centered section intro block (eyebrow + display + optional subline). */
.stfr-section-head {
	max-width: 920px;
	margin: 0 auto 48px;
	text-align: center;
}

.stfr-section-head--left {
	margin-inline: 0;
	text-align: left;
}

.stfr-section-head > * + * {
	margin-top: 14px;
}

.stfr-section-head--light {
	color: #fff;
}

.stfr-section-head--light p {
	color: #fff;
}

/* =========================================================================
 * 6. Buttons — pill system (green primary / blue secondary)
 * ====================================================================== */

.stfr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 20px;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.stfr-btn:hover,
.stfr-btn:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(26, 26, 26, 0.15);
}

/* Variants carry the border colour too, so the 2px edge reads as part of
 * the fill rather than a ring. */
.stfr-btn--primary {
	background: var(--color-green);
	border-color: var(--color-green);
}

.stfr-btn--primary:hover,
.stfr-btn--primary:focus-visible {
	background: var(--color-green-dark);
	border-color: var(--color-green-dark);
}

.stfr-btn--secondary {
	background: var(--color-blue);
	border-color: var(--color-blue);
}

.stfr-btn--secondary:hover,
.stfr-btn--secondary:focus-visible {
	background: var(--color-blue-dark);
	border-color: var(--color-blue-dark);
}

.stfr-btn--small {
	padding: 8px 20px;
	font-size: 0.8rem;
}

/* Top-bar CTA — 40px tall so it lines up with the 40px map button beside it,
 * on a 2px solid edge with the design's wider tracking. */
.stfr-topbar__cta {
	height: 40px;
	padding: 0 16px;
	border: 2px solid var(--color-green);
	gap: 10px;
	letter-spacing: 0.5px;
	line-height: 1.7;
}

.stfr-btn--block {
	display: flex;
	width: 100%;
}

/* =========================================================================
 * 7. Forms — base controls (hero form card + any plugin-rendered form)
 *
 * 16px control font size is deliberate: it prevents iOS zoom-on-focus.
 * ====================================================================== */

.stfr-input,
.stfr-textarea,
.stfr-select,
.stfr-form input[type="text"],
.stfr-form input[type="email"],
.stfr-form input[type="tel"],
.stfr-form input[type="url"],
.stfr-form input[type="number"],
.stfr-form textarea,
.stfr-form select {
	box-sizing: border-box;
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-field);
	background: #fff;
	font-family: var(--font-body);
	font-size: 0.875rem;   /* 14px */
	line-height: 36px;     /* fills the 38px box minus borders */
	color: var(--color-field);
	transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.stfr-input:focus,
.stfr-textarea:focus,
.stfr-select:focus,
.stfr-form input:focus,
.stfr-form textarea:focus,
.stfr-form select:focus {
	outline: none;
	border-color: var(--color-blue);
	box-shadow: 0 0 0 3px rgba(15, 123, 204, 0.15);
}

.stfr-input::placeholder,
.stfr-textarea::placeholder,
.stfr-form input::placeholder,
.stfr-form textarea::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

/* Multi-line controls drop the single-line height/leading trick. */
.stfr-textarea,
.stfr-form textarea {
	height: 90px;
	min-height: 90px;
	padding: 12px;
	line-height: 1.5;
	resize: vertical;
}

.stfr-label,
.stfr-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.8rem;   /* 12.8px */
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-dark);
}

/* 20px square with its own hairline + lift, not the UA checkbox. */
.stfr-form input[type="checkbox"],
.stfr-form input[type="radio"] {
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0;   /* drop the UA 3px, which offsets the consent row */
	border: 1px solid #686E77;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(18, 25, 97, 0.08);
	accent-color: var(--color-green);
}

.stfr-form input[type="radio"] {
	border-radius: 50%;
}

/* AJAX submit states — main.js disables the button while sending and
 * renders the server's response copy into the note (role="status"). */
.stfr-form.is-sending button[type="submit"] {
	opacity: 0.65;
	cursor: wait;
}

.stfr-form__note {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-green);
}

.stfr-form__note.is-error {
	color: var(--color-red);
}

/* =========================================================================
 * 8. Icons
 * ====================================================================== */

.stfr-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Solid glyph in a light circle — the design's icon treatment. */
.stfr-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-bg-alt);
	color: var(--color-dark);
}

.stfr-icon-circle--white {
	background: #fff;
}

.stfr-icon-circle--sm {
	width: 48px;
	height: 48px;
}

/* =========================================================================
 * 9. Shared components — card / check-list / carousel / wave / fade
 * ====================================================================== */

/* Card + green/blue accent edges (the design's signature). */
.stfr-card {
	background: #fff;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.stfr-card--top {
	border-top: 4px solid var(--color-green);
}

.stfr-card--top-blue {
	border-top: 4px solid var(--color-blue);
}

.stfr-card--left {
	border-left: 4px solid var(--color-green);
}

.stfr-card--left-blue {
	border-left: 4px solid var(--color-blue);
}

/* 2x2 checklist with green check-circle icons. */
.stfr-check-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stfr-check-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	font-weight: 700;
}

.stfr-check-list .stfr-icon {
	width: 20px;
	height: 20px;
	color: var(--color-green);
}

@media (max-width: 560px) {
	.stfr-check-list {
		grid-template-columns: 1fr;
	}
}

/* Generic carousel — auto-initialized by main.js on [data-stfr-carousel]
 * (data-autoplay="6000" data-dots="true" data-arrows="true"). The track
 * scrolls natively with snap; JS pages it, builds dots, wires arrows.
 * Default: one slide per view. Add --cols-3 for the 3-up insights layout. */
.stfr-carousel {
	position: relative;
}

.stfr-carousel__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

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

.stfr-carousel__track > * {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.stfr-carousel--cols-3 .stfr-carousel__track > * {
	flex-basis: calc((100% - 48px) / 3);
}

@media (max-width: 1024px) {
	.stfr-carousel--cols-3 .stfr-carousel__track > * {
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (max-width: 768px) {
	.stfr-carousel--cols-3 .stfr-carousel__track > * {
		flex-basis: 100%;
	}
}

.stfr-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 32px;
}

.stfr-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-border);
	cursor: pointer;
	transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.stfr-carousel__dot.is-active {
	background: var(--color-blue);
	transform: scale(1.2);
}

.stfr-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: #fff;
	color: var(--color-navy);
	box-shadow: var(--shadow-card);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.stfr-carousel__arrow:hover {
	background: var(--color-navy);
	color: #fff;
}

.stfr-carousel__arrow--prev {
	left: -8px;
}

.stfr-carousel__arrow--next {
	right: -8px;
}

/* CSS-drawn chevron for JS-created arrow buttons (PHP-rendered arrows
 * use stfr_icon('arrow-left'/'arrow-right') instead). */
.stfr-carousel__arrow-glyph {
	display: block;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.stfr-carousel__arrow--prev .stfr-carousel__arrow-glyph {
	transform: rotate(135deg);
	margin-left: 4px;
}

.stfr-carousel__arrow--next .stfr-carousel__arrow-glyph {
	transform: rotate(-45deg);
	margin-right: 4px;
}

/* Soft white wave dividers on the blue bands — markup via stfr_wave().
 * Parent section needs position: relative; the bottom variant is the
 * same asymmetric swell mirrored on both axes. */
.stfr-wave {
	position: absolute;
	left: 0;
	right: 0;
	color: #fff;
	line-height: 0;
	pointer-events: none;
}

.stfr-wave--top {
	top: -1px;
}

.stfr-wave--bottom {
	bottom: -1px;
	transform: scale(-1);
}

.stfr-wave svg {
	display: block;
	width: 100%;
	height: clamp(40px, 10vw, 151px);
}

/* Fade-up reveal — observed by main.js, disabled for reduced motion. */
.stfr-fade {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.stfr-fade.is-visible {
	opacity: 1;
	transform: none;
}

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

/* =========================================================================
 * 10. Top bar
 * ====================================================================== */

.stfr-topbar {
	background: var(--color-navy);
	color: #fff;
	font-size: 0.8rem;   /* 12.8px */
	line-height: 1.7;    /* 21.76px */
}

/* 70px tall: 15px padding + the 40px switcher/CTA row. */
.stfr-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 70px;
	padding-block: 15px;
}

.stfr-topbar__contact {
	display: flex;
	align-items: center;
	gap: 25px;
}

.stfr-topbar__phone,
.stfr-topbar__email {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
}

.stfr-topbar__phone:hover,
.stfr-topbar__email:hover {
	text-decoration: underline;
}

.stfr-topbar__contact .stfr-icon {
	width: 16px;
	height: 16px;
}

.stfr-topbar__actions {
	display: flex;
	align-items: center;
	gap: 25px;
}

/* Top-bar map button — sits beside the CTA at the same 40px height, with the
 * pin icon and label inline. Replaces the former US/CA country switcher. */
.stfr-topbar__map {
	height: 40px;
	padding: 0 16px;
	gap: 8px;
	letter-spacing: 0.5px;
	line-height: 1.7;
}

.stfr-topbar__map .stfr-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.stfr-topbar__email {
		display: none;
	}
}

/* Mobile: keep the map button + CTA and drop the contact links (phone/email
 * remain reachable inside the drawer). */
@media (max-width: 768px) {
	.stfr-topbar__contact {
		display: none;
	}
	.stfr-topbar__inner {
		justify-content: space-between;
		min-height: 0;
	}
	/* The full "View Map of Available Territories" label wraps to three lines
	 * at 375px, so the map button is icon-only on mobile; the anchor's
	 * aria-label carries the full text for screen readers. */
	.stfr-topbar__map {
		width: 40px;
		padding: 0;
		gap: 0;
	}
	.stfr-topbar__map-label {
		display: none;
	}
}

/* =========================================================================
 * 11. Header + primary nav + dropdowns
 * ====================================================================== */

/* The same hairline the dropdown panel uses, carried across the full header
 * width, plus a barely-there shadow so the header reads as a separate plane
 * from the page even before it sticks. */
.stfr-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.03);
	transition: box-shadow 0.3s var(--ease-out);
}

.stfr-header.is-stuck {
	box-shadow: 0 4px 18px rgba(26, 26, 26, 0.1);
}

body.admin-bar .stfr-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .stfr-header {
		top: 46px;
	}
}

/* 105px tall: 20px padding + the 64px logo. Nav sits hard against the
 * content column's right edge, logo against its left. */
.stfr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
	padding-block: 20px;
}

.stfr-logo {
	display: inline-block;
	line-height: 0;
}

.stfr-logo img {
	width: auto;
	height: 64px;
	display: block;
}

.stfr-logo__text {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-navy);
}

/* Desktop nav. Items carry no padding of their own — the 30px track gap is
 * the whole rhythm, and the header's own 20px padding-bottom is the reach
 * down to the dropdown panel (bridged below so hover survives the gap). */
.stfr-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stfr-nav__item {
	position: relative;
}

/* Desktop only: stretch the nav (and each item) to the full height of the
 * header's content box, so a dropdown's `top: 100%` starts from the header's
 * padding edge rather than from the vertically-centred link. */
.stfr-nav {
	align-self: stretch;
}

.stfr-nav .stfr-nav__list {
	height: 100%;
}

.stfr-nav .stfr-nav__item {
	display: flex;
	align-items: center;
	height: 100%;
}

.stfr-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.7;
	color: var(--color-dark);
	transition: color 0.2s var(--ease-out);
}

.stfr-nav__link:hover,
.stfr-nav__item.is-current > .stfr-nav__link {
	color: var(--color-blue);
}

/* Non-link dropdown parent (e.g. "Franchise Opportunities"): a static label
 * that only opens its submenu on hover/focus. */
.stfr-nav__link--static {
	cursor: default;
	user-select: none;
}

.stfr-nav__link--static:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 4px;
}

/* Butt caps + miter joins, not the icon set's default round stroke — the
 * design's caret is a plain two-segment polyline. */
.stfr-icon--chevron {
	stroke-width: 3;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

.stfr-nav__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.3s var(--ease-out);
}

.stfr-nav__item:hover > .stfr-nav__link .stfr-nav__chevron,
.stfr-nav__item:focus-within > .stfr-nav__link .stfr-nav__chevron {
	transform: rotate(180deg);
}

/* Dropdown panel (desktop nav context only — the drawer restyles it).
 * Square-cornered white card on a 1px hairline, no shadow, 25px inset,
 * centred on its trigger. The offset is exactly the header's 20px
 * padding-bottom, so the panel's own top hairline lands on the header's
 * bottom border — the two collapse into one line and the panel reads as
 * hanging off the header rather than floating below it. */
.stfr-nav .stfr-dropdown {
	position: absolute;
	top: calc(100% + 20px);
	left: 50%;
	z-index: 50;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	margin: 0;
	padding: 25px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 0;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Hover bridge across the header's padding-bottom, so travelling from the
 * link down to the panel doesn't close it mid-gap. */
.stfr-nav .stfr-nav__item:has(.stfr-dropdown)::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 20px;
}

.stfr-nav .stfr-nav__item:hover > .stfr-dropdown,
.stfr-nav .stfr-nav__item:focus-within > .stfr-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%);
}

.stfr-dropdown__link {
	display: block;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
	color: var(--color-dark);
	transition: color 0.2s var(--ease-out);
}

.stfr-dropdown__link:hover {
	color: var(--color-blue);
}

/* The per-parent accordion toggle only exists for the drawer. */
.stfr-nav .stfr-submenu-toggle {
	display: none;
}

/* Hamburger. */
.stfr-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-navy);
	cursor: pointer;
}

@media (max-width: 1023px) {
	.stfr-nav {
		display: none;
	}
	.stfr-menu-toggle {
		display: inline-flex;
	}
	/* Width-led, height auto — the base .stfr-logo img rule pins a 64px
	 * height that would squash the 1024x349 mark into a 160x64 box. */
	.stfr-logo img {
		width: 160px;
		height: auto;
	}
}

/* =========================================================================
 * 12. Off-canvas drawer (mobile menu)
 * ====================================================================== */

.stfr-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(8, 70, 117, 0.55);
	opacity: 0;
	transition: opacity 0.35s var(--ease-out);
}

.stfr-drawer-overlay.is-visible {
	opacity: 1;
}

.stfr-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	width: min(360px, 86vw);
	background: #fff;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.35s var(--ease-out), visibility 0s 0.35s;
}

.stfr-drawer.is-open {
	transform: none;
	visibility: visible;
	transition: transform 0.35s var(--ease-out);
}

.stfr-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-border);
}

/* Width-led, height auto — the global .stfr-logo img rule pins a 64px height
 * that would otherwise squash the drawer logo out of proportion. */
.stfr-drawer__logo img {
	width: 150px;
	height: auto;
}

.stfr-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-dark);
	cursor: pointer;
}

.stfr-drawer__nav {
	padding: 8px 20px;
}

.stfr-drawer__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stfr-drawer .stfr-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--color-border);
}

.stfr-drawer .stfr-nav__link {
	flex: 1;
	padding: 14px 0;
}

/* The link chevron duplicates the toggle button's — hide it here. */
.stfr-drawer .stfr-nav__chevron {
	display: none;
}

.stfr-drawer .stfr-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-dark);
	cursor: pointer;
}

.stfr-drawer .stfr-submenu-toggle .stfr-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.3s var(--ease-out);
}

.stfr-drawer .stfr-nav__item.is-open .stfr-submenu-toggle .stfr-icon {
	transform: rotate(180deg);
}

/* Accordion submenu — one open at a time (enforced by main.js). */
.stfr-drawer .stfr-dropdown {
	flex-basis: 100%;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s var(--ease-out);
}

.stfr-drawer .stfr-nav__item.is-open > .stfr-dropdown {
	max-height: 320px;
}

.stfr-drawer .stfr-dropdown__link {
	padding: 10px 16px;
}

.stfr-drawer__foot {
	display: grid;
	gap: 14px;
	margin-top: auto;
	padding: 20px;
	border-top: 1px solid var(--color-border);
}

.stfr-drawer__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-dark);
}

.stfr-drawer__contact .stfr-icon {
	width: 18px;
	height: 18px;
	color: var(--color-navy);
}

/* =========================================================================
 * 13. Content templates — page / single / archive / 404
 * ====================================================================== */

.stfr-content {
	padding-block: var(--section-py);
}

/* Inner-page layout — content column + right-third quote-form sidebar, in
 * the same split the homepage hero uses. Single column below 1025px (the
 * hero's breakpoint too), form stacking under the content. */
.stfr-page-layout {
	display: grid;
	gap: 40px;
}

/* min-width:0 lets the content column shrink instead of forcing overflow
 * when it holds wide children (tables, the territories map, code). */
.stfr-page-layout__main {
	min-width: 0;
}

.stfr-page-layout__aside {
	min-width: 0;
}

@media (min-width: 1025px) {
	/* Same 748.242 / 501.758 ratio + 50px gutter as .stfr-hero__grid, so the
	 * card lands in the identical right-third position it holds on the hero. */
	.stfr-page-layout {
		grid-template-columns: minmax(0, 748.242fr) minmax(0, 501.758fr);
		gap: 50px;
		align-items: start;
	}

	/* Follow the reader down the page, clearing the ~104px sticky header. */
	.stfr-page-layout__aside {
		position: sticky;
		top: 128px;
	}
}

.stfr-page-head {
	margin-bottom: 40px;
}

.stfr-page-title {
	font-size: var(--fs-h1);
	line-height: 1.15;
}

.stfr-page-thumb {
	margin: 0 0 32px;
}

/* Interior-page title banner — compact image band + centered page title, on
 * the design's blue overlay with the signature 3px green bottom rule. Used by
 * pages without the big form hero (About, FAQs, Territories map). */
.stfr-banner {
	position: relative;
	padding-block: 72px;
	background-color: var(--color-navy);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom: 3px solid var(--color-green);
	text-align: center;
	color: #fff;
}

.stfr-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(8, 70, 117, 0.88), rgba(15, 123, 204, 0.72));
}

.stfr-banner__inner {
	position: relative; /* lift above the overlay */
}

.stfr-banner__eyebrow {
	margin: 0 0 12px;
}

.stfr-banner__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-h1);
	line-height: 1.15;
	color: #fff;
}

@media (max-width: 640px) {
	.stfr-banner {
		padding-block: 48px;
	}
}

.stfr-page-thumb img {
	width: 100%;
	border-radius: 4px;
	border-top: 4px solid var(--color-green);
}

/* =========================================================================
 * Franchise-opportunity pages (Unit / Master) — content-column sections
 * that live inside .stfr-page-layout__main. Kept out of .stfr-entry-content
 * so the check-lists aren't out-specified by .stfr-entry-content ul.
 * ====================================================================== */

.stfr-fpage__lead {
	margin: 0 0 8px;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--color-dark);
}

.stfr-fpage__section {
	margin-top: 48px;
}

.stfr-fpage__section > h2 {
	margin: 0 0 18px;
	font-size: var(--fs-h2);
	line-height: 1.2;
}

.stfr-fpage__section > p {
	margin: 0 0 1em;
}

/* Feature blocks — icon medallion + heading + copy. */
.stfr-fpage__features {
	display: grid;
	gap: 26px;
}

.stfr-fpage__feature {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 16px;
	align-items: start;
}

.stfr-fpage__feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-bg-alt);
}

.stfr-fpage__feature-icon .stfr-icon {
	width: 24px;
	height: 24px;
	color: var(--color-green);
}

.stfr-fpage__feature h3 {
	margin: 0 0 6px;
	font-size: var(--fs-h3);
	line-height: 1.2;
}

.stfr-fpage__feature p {
	margin: 0;
}

/* Give the check-lists a little more row breathing room on these pages. */
.stfr-fpage__checks {
	gap: 14px 24px;
}

/* Property / client-type pill tags. */
.stfr-fpage__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stfr-fpage__tags li {
	padding: 8px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: #fff;
	font-size: 0.9rem;
	font-weight: 600;
}

/* Accent callout card (industry stat / available territories). */
.stfr-fpage__callout {
	padding: 30px 32px;
}

.stfr-fpage__callout > h2 {
	margin: 0 0 12px;
	font-size: var(--fs-h3);
	line-height: 1.2;
}

.stfr-fpage__callout > p {
	margin: 0 0 12px;
}

.stfr-fpage__callout > p:last-child {
	margin-bottom: 0;
}

.stfr-fpage__stat {
	color: var(--color-blue);
	white-space: nowrap;
}

.stfr-fpage__markets {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.stfr-fpage__markets li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

.stfr-fpage__markets .stfr-icon {
	width: 18px;
	height: 18px;
	color: var(--color-green);
	flex-shrink: 0;
}

.stfr-fpage__callout-link {
	margin: 4px 0 0;
}

.stfr-fpage__cta-note {
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--color-navy);
}

/* Quote-form band — beneath the Territories map, where the form can't sit in
 * the right-third sidebar. Supporting copy sits beside the form on wide
 * screens; below 1025px the copy stacks above it. */
.stfr-quote-band {
	padding-block: var(--section-py);
	background: var(--color-bg-alt);
}

.stfr-quote-band__grid {
	display: grid;
	gap: 40px;
}

@media (min-width: 1025px) {
	.stfr-quote-band__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
		gap: 64px;
		align-items: center;
	}
}

.stfr-quote-band__intro {
	min-width: 0;
}

.stfr-quote-band__title {
	margin: 0 0 16px;
	font-size: var(--fs-h2);
	line-height: 1.15;
}

.stfr-quote-band__lead {
	margin: 0 0 24px;
	max-width: 46ch;
	font-size: 1.0625rem;
}

.stfr-quote-band__points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.stfr-quote-band__points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 600;
}

.stfr-quote-band__points .stfr-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--color-green);
}

.stfr-quote-band__card {
	min-width: 0;
}

/* Available-markets highlight — sits in the detail column beside the map. */
.stfr-territories__markets-card {
	margin: 0;
}

/* FAQ accordion — native <details>, no JS. */
.stfr-faq {
	border-top: 1px solid var(--color-border);
}

.stfr-faq__item {
	border-bottom: 1px solid var(--color-border);
}

.stfr-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 2px;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--color-dark);
}

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

/* Chevron that flips when the item is open. */
.stfr-faq__q::after {
	content: '';
	width: 11px;
	height: 11px;
	margin-right: 6px;
	border-right: 2px solid var(--color-green);
	border-bottom: 2px solid var(--color-green);
	transform: rotate(45deg);
	transition: transform 0.2s var(--ease-out);
	flex-shrink: 0;
}

.stfr-faq__item[open] .stfr-faq__q::after {
	transform: rotate(-135deg);
}

.stfr-faq__q:hover {
	color: var(--color-blue);
}

/*
 * The question heading that now sits inside each <summary>. Fully neutralized
 * so the heading LEVEL can change (Customizer > Heading Levels) without
 * changing a pixel: font: inherit takes family, size, weight and line-height
 * from .stfr-faq__q above, and margin: 0 drops the heading's own spacing.
 */
.stfr-faq__q-text {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.stfr-faq__a {
	padding: 0 2px 22px;
}

.stfr-faq__a p {
	margin: 0;
}

/* Contact details list. */
.stfr-contact-list {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stfr-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.stfr-contact-list .stfr-icon {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--color-blue);
	flex-shrink: 0;
}

.stfr-contact__label {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-dark);
}

.stfr-contact-list a {
	color: var(--color-blue);
}

.stfr-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.stfr-post-meta a {
	color: var(--color-blue);
}

/* Post/page body typography. */
.stfr-entry-content h2 {
	margin: 1.6em 0 0.6em;
	font-size: var(--fs-h2);
}

.stfr-entry-content h3 {
	margin: 1.4em 0 0.5em;
	font-size: var(--fs-h3);
}

.stfr-entry-content h4 {
	margin: 1.4em 0 0.5em;
	font-size: 1.25rem;
}

.stfr-entry-content ul,
.stfr-entry-content ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.stfr-entry-content a {
	text-decoration: underline;
}

.stfr-entry-content img {
	border-radius: 4px;
}

.stfr-entry-content blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--color-green);
	font-style: italic;
}

/* Prev/next post navigation. */
.stfr-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}

.stfr-post-nav a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--color-dark);
}

.stfr-post-nav a:hover {
	color: var(--color-blue);
}

.stfr-post-nav__next {
	margin-left: auto;
	text-align: right;
}

/* Archive grid — mirrors the insights blog cards. */
.stfr-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.stfr-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.stfr-post-grid {
		grid-template-columns: 1fr;
	}
}

.stfr-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.stfr-post-card__media {
	display: block;
	line-height: 0;
}

.stfr-post-card__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.stfr-post-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex: 1;
	padding: 24px;
}

.stfr-post-card__date {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.stfr-post-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

.stfr-post-card__title a {
	color: var(--color-dark);
}

.stfr-post-card__title a:hover {
	color: var(--color-blue);
}

.stfr-post-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
}

.stfr-post-card .stfr-btn {
	margin-top: auto;
}

/* Numbered pagination. */
.stfr-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.stfr-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-weight: 700;
	color: var(--color-dark);
	transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.stfr-pagination .page-numbers:hover {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.stfr-pagination .page-numbers.current {
	background: var(--color-green);
	border-color: var(--color-green);
	color: #fff;
}

/* 404. */
.stfr-404 {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.stfr-404__code {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(5rem, 14vw, 8.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--color-green);
}

.stfr-404__title {
	margin: 8px 0 0;
	font-size: var(--fs-h2);
}

.stfr-404__body {
	margin: 18px 0 0;
}

.stfr-404__actions {
	margin-top: 28px;
}

.stfr-404 .search-form {
	display: flex;
	gap: 10px;
	margin-top: 36px;
}

.stfr-404 .search-form input[type="search"] {
	flex: 1;
	padding: 13px 16px;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 1rem;
}

/* =========================================================================
 * 14. Footer
 * ====================================================================== */

.stfr-footer {
	background: linear-gradient(135deg, var(--color-navy), var(--color-blue));
	border-top: 4px solid var(--color-green);
	color: #fff;
}

.stfr-footer > .stfr-container {
	padding-block: 75px;
}

/* Four equal columns on the 1300px content column with a 50px gutter —
 * 4 x 287.5 + 3 x 50 = 1300, matching the design exactly. */
.stfr-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 50px;
}

@media (max-width: 1024px) {
	.stfr-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.stfr-footer__cols {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* Brand column stacks logo over socials on the same 25px rhythm the link
 * columns use between heading and list. */
.stfr-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
}

/* Width-led, height auto — the global .stfr-logo img rule pins a 64px
 * header height, which would squash this one if left to apply. */
.stfr-footer__logo img {
	width: 200px;
	height: auto;
	/* Knock the full-colour mark out to solid white for the dark band. */
	filter: brightness(0) invert(1);
}

.stfr-footer__social {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stfr-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: opacity 0.25s var(--ease-out);
}

.stfr-footer__social a:hover,
.stfr-footer__social a:focus-visible {
	color: #fff;
	opacity: 0.75;
}

.stfr-footer__social .stfr-icon {
	width: 25px;
	height: 25px;
}

/* Column heading is a semantic H2 — styled fully by class. */
.stfr-footer__heading {
	margin: 0 0 25px;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
}

/* No track gap: the 1.7 leading is what spaces the links in the design. */
.stfr-footer__links {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stfr-footer__links a {
	font-size: 1rem;
	line-height: 1.7;
	color: #fff;
	transition: opacity 0.2s var(--ease-out);
}

.stfr-footer__links a:hover {
	color: #fff;
	opacity: 0.75;
}

/* Memberships block — takes the two grid slots the design spent on its
 * service and quick-link columns. */
.stfr-footer__col--assoc {
	grid-column: span 2;
}

/* Panel colour is the exact #444 field baked into the bundled logo JPEGs,
 * so their edges vanish into it and the row reads as one dark card. */
.stfr-footer__assoc {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	justify-items: center;
	gap: 20px;
	padding: 20px;
	background: #444444;
	border-radius: var(--radius-field);
}

.stfr-footer__assoc-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Height-led so the logos lock up on a common baseline; 72px stays under
 * the 104px source height, so nothing upscales. */
.stfr-footer__assoc img {
	display: block;
	height: 72px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* IFA / CFA ship tightly cropped on transparency (the first four carry
 * their own #444 padding), so they sit shorter to match visual weight. */
.stfr-footer__assoc-item--ifa img {
	height: 46px;
}

.stfr-footer__assoc-item--cfa img {
	height: 44px;
}

.stfr-footer__assoc a {
	display: block;
	transition: opacity 0.2s ease;
}

.stfr-footer__assoc a:hover,
.stfr-footer__assoc a:focus-visible {
	opacity: 0.8;
}

.stfr-footer__assoc-name {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: #fff;
}

@media (max-width: 640px) {
	.stfr-footer__col--assoc {
		grid-column: auto;
	}
	.stfr-footer__assoc {
		grid-template-columns: 1fr 1fr;
	}
}

/* Legal / FDD line — required for a franchise offering, so it stays even
 * though the reference footer carries no equivalent. */
.stfr-footer__legal {
	margin: 32px 0 0;
	font-size: 0.8rem;
	line-height: 1.7;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

/* Dark copyright bar — 51.8px tall on the design's 15px padding. */
.stfr-footer__copyright {
	background: var(--color-dark);
	color: #fff;
	text-align: center;
}

.stfr-footer__copyright-text {
	margin: 0;
	padding: 15px 0;
	font-size: 0.8rem;
	line-height: 1.7;
}

.stfr-footer__copyright a {
	color: #fff;
	text-decoration: underline;
}

/* Mobile: strip the footer down to the logo + socials (the .stfr-footer__brand
 * block) over the copyright bar, everything centered. The link columns and the
 * memberships block both carry .stfr-footer__col, so one rule hides them; the
 * FDD/legal line hides too. Copyright bar stays (it's already centered). */
@media (max-width: 640px) {
	.stfr-footer > .stfr-container {
		padding-block: 40px;
	}
	.stfr-footer__col,
	.stfr-footer__legal {
		display: none;
	}
	.stfr-footer__cols {
		justify-items: center;
	}
	.stfr-footer__brand {
		align-items: center;
		text-align: center;
	}
}

/* =========================================================================
 * == Homepage section styles ==
 * Integration appends _build/css/<section>.css below, in band order:
 * hero, band-intro, two-doors, support-story, services-grid,
 * facilities-grid, franchise-paths, testimonials, insights,
 * smarter-approach. Do not hand-edit below this line.
 * ====================================================================== */

/* =========================================================================
 * Band 3 — Hero (2-col: copy + team-photo strip / quote form card)
 * ====================================================================== */

/* The hero band opens on 100px. Desktop closes flush (see the min-width:1025px
 * override below) because the photo strip sits on the green rule; stacked, the
 * form card is last in the column and needs the band rhythm beneath it. */
.stfr-hero {
	position: relative;
	padding-block: 100px var(--section-py);
	background: var(--grad-hero);
	border-bottom: 3px solid var(--color-green);
}

/* Interior-page hero: no photo strip pins the bottom to the green rule, so
 * restore symmetric bottom padding. The title's 50px lead is dropped to the
 * 40px band rhythm without a media block to space toward. */
.stfr-hero--page {
	padding-block: 90px;
}

.stfr-hero--page .stfr-hero__title {
	margin-bottom: 24px;
}

/* Top-align the copy against the form card.
 *
 * This was previously `center`, to "balance the void above and below" — but
 * the quote card is a 12-field form and runs far taller than the copy, so
 * centering pushed the eyebrow and H1 hundreds of pixels down the page and
 * read as a broken layout. The homepage hero does not do this: it uses
 * .stfr-hero (no --page) and its contact photo fills the column.
 *
 * Aligning to the start puts the H1 level with the top of the form card, as on
 * the homepage, and lets the leftover space fall to the bottom where it reads
 * as deliberate. */
@media (min-width: 1025px) {
	.stfr-hero--page .stfr-hero__copy {
		justify-content: flex-start;
	}
}

/* Mobile-first: single centered column — copy, photo strip, then the card
 * (design mobile order). */
.stfr-hero__grid {
	display: grid;
	gap: 40px;
}

.stfr-hero__copy {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.stfr-hero__eyebrow {
	margin: 0 0 10px;
}

.stfr-hero__title {
	margin: 0 0 50px;
}

.stfr-hero__ctas {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

/* Team photo + flag motif strip. */
.stfr-hero__media {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 32px;
	text-align: left;
}

.stfr-hero__media-photo {
	width: 42%;
	max-width: 320px;
	flex-shrink: 0;
}

.stfr-hero__media-img {
	display: block;
	width: 100%;
	height: auto;
}

/* The bundled cutout is a wide composite with the motif baked into its
 * right half — crop the display to the people (left ~465px of the 576px-
 * tall source); the live motif markup renders beside it instead. */
.stfr-hero__media-photo--bundled {
	aspect-ratio: 465 / 576;
	overflow: hidden;
}

.stfr-hero__media-photo--bundled .stfr-hero__media-img {
	height: 100%;
	object-fit: cover;
	object-position: left bottom;
}

.stfr-hero__flag {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Circle-crop the shared rounded-rect flag glyph: the oversized SVG's
 * stripes fill the circle, matching the design's round flag badge. */
.stfr-hero__flag-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: #fff;
	box-shadow: var(--shadow-card);
}

.stfr-hero__flag-icon .stfr-icon {
	width: 76px;
	height: 76px;
	max-width: none;
	flex-shrink: 0;
}

.stfr-hero__flag-lines {
	display: grid;
	gap: 2px;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(0.8125rem, 0.55rem + 1.1vw, 1.125rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-green);
}

/* Quote form card. Square-ish 3px corners on a hairline box, 4px green cap,
 * and the design's offset drop shadow — not the soft ambient card shadow. */
.stfr-hero__card {
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding: 35px;
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-green);
	border-radius: var(--radius-field);
	box-shadow: 2px 2px 5px rgba(26, 26, 26, 0.25);
}

.stfr-hero__form-title {
	margin: 0;
	font-size: 28.5px;
	line-height: 1.15;
	text-align: center;
}

.stfr-hero__form {
	display: grid;
	gap: 12px;
}

.stfr-hero__field {
	display: grid;
	gap: 0;
}

/* Honeypot — offscreen, never display:none (bots skip that). */
.stfr-hero__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

/* Inquiry chips — radios styled as selectable boxes. */
.stfr-hero__chips-group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.stfr-hero__chips-group legend {
	padding: 0;
	margin: 0 0 8px;
}

/* Four equal tracks on desktop — the design keeps all inquiry types on one
 * row and lets the labels wrap to two lines inside the 58px box. */
.stfr-hero__chips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 480px) {
	.stfr-hero__chips {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The .stfr-form label rule out-specifies a bare .stfr-hero__chip, so the
 * chip's label reset needs the form qualifier to land. */
.stfr-hero__form .stfr-hero__chip {
	display: block;
	margin-bottom: 0;
}

.stfr-hero__chip-box {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 58px;
	padding: 10px 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-field);
	background: #fff;
	font-size: 0.8rem;   /* 12.8px */
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.stfr-hero__chip-box:hover {
	border-color: var(--color-green);
}

/* Selected = green border (doubled via inset shadow, no layout shift) + tint. */
.stfr-hero__chip input:checked + .stfr-hero__chip-box {
	border-color: var(--color-green);
	box-shadow: inset 0 0 0 1px var(--color-green);
	background: rgba(0, 154, 24, 0.07);
}

.stfr-hero__chip input:focus-visible + .stfr-hero__chip-box {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

/* Consent — checkbox in the alt-bg rounded box. The extra .stfr-hero__form
 * qualifier out-specifies the base .stfr-form label rules (block, bold). */
.stfr-hero__consent-group {
	display: grid;
	gap: 0;
	margin-top: 8px;
}

.stfr-hero__form .stfr-hero__consent {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 0;
	padding: 16px 18px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	font-size: 0.8rem;   /* 12.8px */
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-field);
	cursor: pointer;
}

/* 3px top offset — the design nudges the box down off the text baseline,
 * which is also what gives the consent row its 57px height. Needs the form
 * qualifier to out-rank the .stfr-form input[type="checkbox"] margin reset. */
.stfr-hero__form .stfr-hero__consent input {
	flex-shrink: 0;
	margin-top: 3px;
}

/* 12px flex gap + 12px lead = the design's 24px checkbox-to-text run. */
.stfr-hero__consent-text {
	margin-left: 12px;
}

.stfr-hero__submit {
	height: 38px;
	margin-top: 2px;   /* + the form's 12px track gap = the design's 14px lead */
	padding: 0 16px;
	border-width: 1px;   /* the in-card submit sits on a hairline, not the 2px edge */
	font-size: 1rem;
	line-height: 1;
}

@media (min-width: 1025px) {
	/* 748.242 / 501.758 across the 1300px column with a 50px gutter — the
	 * design's split, which puts the card's right edge flush with the
	 * content column and its left edge on the copy's measure. */
	.stfr-hero__grid {
		grid-template-columns: minmax(0, 748.242fr) minmax(0, 501.758fr);
		gap: 50px;
	}

	.stfr-hero__copy {
		text-align: left;
	}

	.stfr-hero__ctas {
		flex-direction: row;
		margin-bottom: 40px;
	}

	/* Flush bottom: the photo strip lands on the green rule, so the stacked
	 * bottom padding would float the rule away from it. Interior heroes
	 * (.stfr-hero--page) have no strip and keep their symmetric padding. */
	.stfr-hero:not(.stfr-hero--page) {
		padding-bottom: 0;
	}

	/* Pin the strip to the band's bottom edge. The band now closes flush
	 * (padding-block: 100px 0), so the bottom of the stretched copy column
	 * already sits on the green rule — margin-top:auto is the whole job.
	 * Do NOT re-add a negative bottom margin: it would push the photo down
	 * through the rule and into the blue band below. */
	.stfr-hero__media {
		justify-content: flex-start;
		gap: 40px;
		margin-top: auto;
		padding-top: 40px;
		margin-bottom: 0;
	}

	.stfr-hero__flag-icon {
		width: 48px;
		height: 48px;
	}
}

/* =========================================================================
 * Territories page — interactive availability map
 * (page-templates/territories.php + template-parts/territories-map.php)
 * ====================================================================== */

.stfr-page--territories .stfr-territories__intro {
	max-width: 720px;
	margin-bottom: 40px;
}

.stfr-territories {
	--territory-available: var(--color-blue);
	--territory-limited:   #A6DFAF;  /* light tint of brand green */
	--territory-soldout:   #C6CCD2;
	padding-bottom: var(--section-py);
}

/* --- Legend / filter --- */

.stfr-territories__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 0 0 24px;
	padding: 0;
	font-weight: 600;
	font-size: 0.9375rem;
}

/* Each legend entry is a filter toggle. */
.stfr-territories__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.stfr-territories__filter {
	margin: 0;
	padding: 7px 14px 7px 11px;
	font: inherit;
	color: var(--color-dark);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out), opacity 0.15s var(--ease-out);
}

.stfr-territories__filter:hover {
	border-color: var(--color-muted);
}

.stfr-territories__filter:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

/* Toggled off — recede, hollow the swatch, strike the label. */
.stfr-territories__filter.is-off {
	color: var(--color-muted);
	background: var(--color-bg-alt);
	opacity: 0.7;
	text-decoration: line-through;
	text-decoration-color: var(--color-muted);
}

.stfr-territories__swatch {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.stfr-territories__swatch--available { background: var(--territory-available); }
.stfr-territories__swatch--limited   { background: var(--territory-limited); }
.stfr-territories__swatch--soldout   { background: var(--territory-soldout); }

/* Hollow the swatch when its filter is off. */
.stfr-territories__filter.is-off .stfr-territories__swatch {
	background: transparent;
	box-shadow: inset 0 0 0 2px currentColor;
}

/* --- Two-column layout: map + detail column --- */

/* Map at ~two-thirds width, detail column (markets card + state panel) beside
 * it. Single column below 1025px — map first, detail column stacked under. */
.stfr-territories__layout {
	display: grid;
	gap: 40px;
}

@media (min-width: 1025px) {
	.stfr-territories__layout {
		grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}
}

.stfr-territories__side {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --- Map --- */

.stfr-territories__map-wrap {
	position: relative;
	min-width: 0;
}

.stfr-territories__map {
	display: block;
	width: 100%;
	height: auto;
}

.stfr-territories__state {
	stroke: #fff;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: filter 0.15s var(--ease-out), opacity 0.2s var(--ease-out);
}

.stfr-territories__state.is-available { fill: var(--territory-available); }
.stfr-territories__state.is-limited   { fill: var(--territory-limited); }
.stfr-territories__state.is-soldout   { fill: var(--territory-soldout); }

.stfr-territories__state:hover,
.stfr-territories__state:focus-visible {
	filter: brightness(0.88);
}

/* UA focus ring off in both focus states — keyboard users get the navy
   stroke below; tap focus already fills the panel. */
.stfr-territories__state:focus {
	outline: none;
}

.stfr-territories__state:focus-visible {
	stroke: var(--color-navy);
	stroke-width: 2.5;
}

.stfr-territories__state.is-selected {
	stroke: var(--color-navy);
	stroke-width: 2.5;
}

.stfr-territories__dc-leader {
	stroke: var(--color-muted);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.stfr-territories__dc-label {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	fill: var(--color-dark);
}

/* --- State abbreviation labels --- */

/* Interior labels: white glyphs with a navy halo (paint-order stroke) so they
   read on every fill — blue, light green, or grey. Non-interactive; the path
   underneath stays the click/hover target. */
.stfr-territories__label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	fill: #fff;
	stroke: var(--color-navy);
	stroke-width: 2.6px;
	paint-order: stroke fill;
	stroke-linejoin: round;
	pointer-events: none;
	user-select: none;
	transition: opacity 0.2s var(--ease-out);
}

/* External labels (small NE states) sit on the page background, so they drop
   the halo for a solid dark glyph. */
.stfr-territories__label--out {
	font-size: 12px;
	fill: var(--color-dark);
	stroke: none;
}

.stfr-territories__label-leader {
	stroke: var(--color-muted);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* --- Filter dimming — a toggled-off status recedes so active ones pop --- */
.stfr-territories.is-filtered-available .stfr-territories__state.is-available,
.stfr-territories.is-filtered-available .stfr-territories__label.is-available,
.stfr-territories.is-filtered-available .stfr-territories__dc-label.is-available,
.stfr-territories.is-filtered-limited .stfr-territories__state.is-limited,
.stfr-territories.is-filtered-limited .stfr-territories__label.is-limited,
.stfr-territories.is-filtered-limited .stfr-territories__dc-label.is-limited,
.stfr-territories.is-filtered-soldout .stfr-territories__state.is-soldout,
.stfr-territories.is-filtered-soldout .stfr-territories__label.is-soldout,
.stfr-territories.is-filtered-soldout .stfr-territories__dc-label.is-soldout {
	opacity: 0.15;
}

/* Dimmed states drop out of interaction so only visible ones respond. */
.stfr-territories.is-filtered-available .stfr-territories__state.is-available,
.stfr-territories.is-filtered-limited .stfr-territories__state.is-limited,
.stfr-territories.is-filtered-soldout .stfr-territories__state.is-soldout {
	pointer-events: none;
}

/* --- Tooltip --- */

.stfr-territories__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	padding: 8px 14px;
	max-width: 280px;
	background: var(--color-navy);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s var(--ease-out);
	z-index: 2;
}

.stfr-territories__tooltip-title {
	white-space: nowrap;
}

/* Territory details line — shown on hover when the state has a note. */
.stfr-territories__tooltip-note {
	margin-top: 3px;
	font-weight: 400;
	font-size: 0.8125rem;
	opacity: 0.9;
}

.stfr-territories__tooltip.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Touch devices get no hover — tap fills the panel instead. */
@media (hover: none) {
	.stfr-territories__tooltip { display: none; }
}

/* --- Detail panel --- */

.stfr-territories__panel {
	padding: 24px 28px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
}

.stfr-territories__panel-hint {
	margin: 0;
	color: var(--color-muted);
}

/*
 * Heading for the map itself. The Territories page passes one; the Regional
 * Franchise page does not, because its band already carries an H2.
 */
.stfr-territories__heading {
	margin: 0 0 18px;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	color: var(--color-navy);
}

.stfr-territories__panel-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
}

.stfr-territories__panel-body {
	margin: 0;
}

/* Contact CTA appended by territories.js on selection. */
.stfr-territories__panel-cta {
	margin-top: 18px;
}

.stfr-territories__badge {
	padding: 4px 14px;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	border-radius: var(--radius-pill);
}

.stfr-territories__badge--available { background: var(--territory-available); }
.stfr-territories__badge--soldout   { background: var(--color-muted); }

/* Light green needs dark text for contrast. */
.stfr-territories__badge--limited {
	background: var(--territory-limited);
	color: var(--color-dark);
}

/* =========================================================================
 * Homepage — Regional Franchise sections (front-page.php)
 *
 * Faithful reproduction of sparkleteam.com/regional-franchises/: alternating
 * white / alt-grey / blue-gradient bands (blue bands carry green rules top and
 * bottom), centered heads on the full-width sections, and the site's overlap
 * image-pair on the two split sections. Hero extensions come first, then the
 * .stfr-rf-* bands in page order.
 * ====================================================================== */

/* ---- Hero extensions: stat row + contact photo ----------------------- */

.stfr-hero__title { margin: 0 0 24px; }

.stfr-hero__stats {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 12px 28px; margin: 28px 0 0; padding: 0; list-style: none;
}
.stfr-hero__stat {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--color-dark);
}
.stfr-hero__stat-icon { display: inline-flex; flex-shrink: 0; }
.stfr-hero__stat-icon .stfr-icon { width: 20px; height: 20px; color: var(--color-green); }

.stfr-hero__media-photo {
	width: 82%; max-width: 600px; border-radius: var(--radius-card);
	overflow: hidden;
}
.stfr-hero__contact { display: grid; gap: 2px; margin: 0; }
.stfr-hero__contact-name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--color-green); }
.stfr-hero__contact-title { font-size: 0.9rem; color: var(--color-muted); }

@media (min-width: 1025px) {
	.stfr-hero__stats, .stfr-hero__media { justify-content: flex-start; }
}

/* ---- Band scaffold --------------------------------------------------- */

.stfr-rf { padding-block: var(--section-py); background: var(--color-bg); }
.stfr-rf--alt { background: var(--color-bg-alt); }

/* Regional Franchise page — the Territories map embedded as a band. The
 * partial carries its own bottom padding for the map page; the band already
 * pads, so drop it here. */
.stfr-rf--map .stfr-territories {
	padding-bottom: 0;
}

/* Closing CTA band — the note's divider/top-margin were for sitting under a
 * card; standalone in a slim band it needs neither. */
.stfr-rf--cta-note {
	padding-block: 40px;
}
.stfr-rf--cta-note .stfr-fpage__cta-note {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.stfr-rf--band {
	background: var(--grad-blue);
	border-top: 3px solid var(--color-green);
	border-bottom: 3px solid var(--color-green);
}
.stfr-rf .stfr-section-head { margin-bottom: 44px; }

/* Local / Regional FAQ band: reuses the .stfr-faq accordion. Capped to a
 * readable measure, and the alt-grey closing band that follows drops its top
 * padding so the two read as one continuous grey band. */
.stfr-rf--faq .stfr-faq { max-width: 920px; }
.stfr-rf--faq + .stfr-rf--alt { padding-top: 0; }

/* Green-rule disclaimer / note. */
.stfr-rf-note {
	max-width: 980px; margin: 30px 0 0; padding-left: 18px;
	border-left: 3px solid #A6DFAF; font-style: italic;
	font-size: 0.95rem; line-height: 1.65; color: var(--color-muted);
}
.stfr-rf-note strong { font-style: normal; color: var(--color-dark); }

/* ---- Path: four white "fit" cards on the blue band ------------------- */

.stfr-rf-fit {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	margin: 0; padding: 0; list-style: none;
}
.stfr-rf-fit__card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 14px; padding: 32px 24px; background: #fff;
	border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.stfr-rf-fit__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%; background: var(--color-bg-alt);
}
.stfr-rf-fit__icon .stfr-icon { width: 24px; height: 24px; color: var(--color-blue); }
.stfr-rf-fit__title { margin: 0; font-size: 1.125rem; line-height: 1.25; }
.stfr-rf-fit__body { margin: 0; font-size: 0.95rem; color: var(--color-dark); }

/* ---- Role: left copy + single-column responsibilities ---------------- */

.stfr-rf-role__body { max-width: 980px; }
.stfr-rf-role__label { margin: 22px 0 12px; }

/* Regional check-lists: single column, regular weight, top-aligned icons. */
.stfr-rf-checks--single { grid-template-columns: 1fr; }
.stfr-rf-checks li { align-items: flex-start; font-weight: 400; }
.stfr-rf-checks .stfr-icon { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }

/* ---- How: four numbered white cards on the blue band ----------------- */

.stfr-rf-steps {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	margin: 0; padding: 0; list-style: none;
}
.stfr-rf-step {
	display: flex; flex-direction: column; gap: 14px; padding: 28px 24px;
	background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.stfr-rf-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg-alt);
	font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--color-dark);
}
.stfr-rf-step__title { margin: 0; font-size: 1.125rem; line-height: 1.25; }
.stfr-rf-step__body { margin: 0; font-size: 0.95rem; color: var(--color-dark); }

/* ---- Investment: navy-header table ----------------------------------- */

.stfr-rf-table__wrap {
	overflow-x: auto; border-radius: var(--radius-card);
	box-shadow: var(--shadow-card); border-top: 3px solid var(--color-green);
}
.stfr-rf-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.95rem; }
.stfr-rf-table thead th {
	background: var(--color-navy); color: #fff; text-align: left;
	font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
	letter-spacing: 0.04em; text-transform: uppercase; padding: 16px 24px;
}
.stfr-rf-table tbody th, .stfr-rf-table tbody td {
	padding: 16px 24px; border-bottom: 1px solid var(--color-border);
	text-align: left; vertical-align: top;
}
.stfr-rf-table tbody tr:last-child th, .stfr-rf-table tbody tr:last-child td { border-bottom: 0; }
.stfr-rf-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.stfr-rf-table tbody th { font-family: var(--font-display); font-weight: 700; color: var(--color-navy); }
.stfr-rf-table__amount { font-family: var(--font-display); font-weight: 700; color: var(--color-blue); }

@media (max-width: 640px) {
	.stfr-rf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.stfr-rf-table, .stfr-rf-table tbody, .stfr-rf-table tr, .stfr-rf-table th, .stfr-rf-table td { display: block; width: 100%; }
	.stfr-rf-table tr { border-bottom: 2px solid var(--color-border); }
	.stfr-rf-table tr:last-child { border-bottom: 0; }
	.stfr-rf-table tbody th, .stfr-rf-table tbody td { border: 0; padding: 6px 20px; }
	.stfr-rf-table tbody th { padding-top: 16px; }
	.stfr-rf-table tbody td[data-label]::before {
		content: attr(data-label) ": "; font-family: var(--font-display);
		font-weight: 700; color: var(--color-navy);
	}
}

/* ---- Revenue: six green-edged icon cards on alt-grey ----------------- */

.stfr-rf-streams {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	margin: 0; padding: 0; list-style: none;
}
.stfr-rf-stream { padding: 26px 24px 24px; }
.stfr-rf-stream__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg-alt); margin-bottom: 14px;
}
.stfr-rf-stream__icon .stfr-icon { width: 22px; height: 22px; color: var(--color-dark); }
.stfr-rf-stream__title { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.25; }
.stfr-rf-stream__body { margin: 0; font-size: 0.95rem; color: var(--color-dark); }

/* ---- Support: two white check-list cards ----------------------------- */

.stfr-rf-support__grid { display: grid; gap: 24px; }
.stfr-rf-support__card { padding: 32px 30px; }
.stfr-rf-support__heading { margin: 0 0 20px; font-size: 1.25rem; line-height: 1.25; }
@media (min-width: 768px) { .stfr-rf-support__grid { grid-template-columns: 1fr 1fr; } }

/* ---- Territory / Brands: copy + overlap image pair ------------------- */

.stfr-rf-split { display: grid; gap: 40px; align-items: center; }
.stfr-rf-split__copy .stfr-section-head { margin-bottom: 20px; }

.stfr-rf-pair { position: relative; }
.stfr-rf-pair__img {
	display: block; width: 83%; aspect-ratio: 16 / 9; object-fit: cover;
	border-top: 4px solid var(--color-green); border-radius: 4px; box-shadow: var(--shadow-card);
}
.stfr-rf-pair__img--2 { position: relative; z-index: 1; margin: -14% 0 0 auto; }
.stfr-rf-pair__img--contain { object-fit: contain; background: #fff; }

/* Media-first split (brands): copy first on mobile, media left on desktop. */
.stfr-rf-split--media-first .stfr-rf-pair { order: 2; }

@media (min-width: 1025px) {
	.stfr-rf-split { grid-template-columns: 1fr 1fr; gap: 64px; }
	.stfr-rf-split--media-first .stfr-rf-pair { order: 0; }
}

/* ---- Responsive card grids ------------------------------------------- */

@media (max-width: 1024px) {
	.stfr-rf-fit, .stfr-rf-steps, .stfr-rf-streams { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.stfr-rf-fit, .stfr-rf-steps, .stfr-rf-streams { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Request Franchise Information form — 2-col fallback + Gravity Forms skin
 *
 * The shared card (.stfr-hero__card) renders either the code-defined Gravity
 * Form or the styled HTML fallback (template-parts/quote-form.php). Both use
 * the same 2-column field grid, top labels, and red required asterisk.
 * ====================================================================== */

/* ---- HTML fallback layout -------------------------------------------- */

.stfr-qform__row { display: grid; gap: 0 16px; }
.stfr-qform__field { margin: 0 0 14px; }
.stfr-qform__field label { margin-bottom: 5px; }
.stfr-qform__field--full { grid-column: 1 / -1; }
.stfr-req { color: var(--color-red); margin-left: 2px; }

/* Consent checkbox — small-print copy beside the box. */
.stfr-qform__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 2px 0 16px;
}
.stfr-qform__consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--color-green);
}
.stfr-qform__consent label {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-dark);
}

@media (min-width: 480px) {
	.stfr-qform__row { grid-template-columns: 1fr 1fr; }
}

/* ---- Gravity Forms skin (Orbital theme, GF 2.7+) ----------------------
 * GF renders this form with its Orbital theme (pinned per form in
 * inc/gravity-forms.php). Orbital is driven by --gf-* custom properties, so
 * the skin maps those to the theme tokens rather than restyling each
 * control, then adds direct rules only where no variable exists. Scoped to
 * the shared card so it only reskins our instances. */

.stfr-hero__card .gform_wrapper.gform-theme {
	/* GF prints each form's palette in an inline <style> keyed on
	 * #gform_wrapper_N[data-form-index], an ID selector no theme rule can
	 * outrank — so the variables it sets there need !important. */
	--gf-color-primary: var(--color-green) !important;
	--gf-color-primary-rgb: 0, 154, 24 !important;
	--gf-color-primary-darker: var(--color-green-dark) !important;
	--gf-color-primary-lighter: var(--color-green) !important;
	--gf-color-in-ctrl-primary: var(--color-green) !important;
	--gf-color-in-ctrl-primary-rgb: 0, 154, 24 !important;
	--gf-color-in-ctrl-primary-darker: var(--color-green-dark) !important;
	--gf-color-in-ctrl-primary-lighter: var(--color-green) !important;
	--gf-color-in-ctrl-contrast: var(--color-field) !important;
	--gf-ctrl-border-color: var(--color-border) !important;
	--gf-ctrl-label-color-primary: var(--color-dark) !important;
	--gf-ctrl-label-color-secondary: var(--color-dark) !important;
	--gf-radius: var(--radius-field) !important;

	/* Rhythm — 14px between rows, 16px between columns, 5px under labels. */
	--gf-form-gap-y: 14px;
	--gf-form-gap-x: 16px;
	--gf-label-space-primary: 5px;
	--gf-form-footer-margin-y-start: 8px;

	/* Labels and required marker */
	--gf-ctrl-label-font-family-primary: var(--font-body);
	--gf-ctrl-label-font-size-primary: 0.8rem;
	--gf-ctrl-label-font-weight-primary: 700;
	--gf-ctrl-label-color-req: var(--color-red);

	/* Controls — 38px, hairline border, no lift, blue focus ring. */
	--gf-ctrl-size: 38px;
	--gf-ctrl-font-family: var(--font-body);
	--gf-ctrl-font-size: 0.875rem;
	--gf-ctrl-color: var(--color-field);
	--gf-ctrl-padding-x: 12px;
	--gf-ctrl-shadow: none;
	--gf-ctrl-textarea-height: 90px;
	--gf-ctrl-border-color-focus: var(--color-blue);
	--gf-ctrl-outline-color-focus: rgba(15, 123, 204, 0.15);
	--gf-ctrl-outline-width-focus: 3px;
	--gf-ctrl-outline-offset: 0;

	/* Submit — the theme's green pill button. */
	--gf-ctrl-btn-font-family: var(--font-display);
	--gf-ctrl-btn-font-size: 0.875rem;
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-letter-spacing: 0.02em;
	--gf-ctrl-btn-radius: var(--radius-pill);
	--gf-ctrl-btn-padding-x: 20px;
	--gf-ctrl-btn-border-width-primary: 2px;
	--gf-ctrl-btn-border-color-primary: var(--color-green);
	--gf-ctrl-btn-shadow: none;
}

.stfr-hero__card .gform_wrapper.gform-theme .gform_fields { row-gap: 14px; }

/* Required marker: whether GF prints "(Required)" or "*", show a red
 * asterisk only. Zeroing the font keeps the text for screen readers. */
.stfr-hero__card .gform_wrapper.gform-theme .gfield_required_text { font-size: 0; }
.stfr-hero__card .gform_wrapper.gform-theme .gfield_required_text::after {
	content: "*";
	font-size: 0.8rem;
}
.stfr-hero__card .gform_wrapper.gform-theme .gfield_required { margin-left: 2px; padding: 0; }

.stfr-hero__card .gform_wrapper.gform-theme .gfield_label { line-height: 1.4; }

.stfr-hero__card .gform_wrapper.gform-theme textarea {
	min-block-size: 90px;
	block-size: 90px;
	resize: vertical;
}

.stfr-hero__card .gform_wrapper.gform-theme .gform_footer { justify-content: stretch; }
.stfr-hero__card .gform_wrapper.gform-theme .gform_footer .gform_button {
	/* Orbital sizes the button from a local var declared on the button itself. */
	--gf-local-width: 100%;
	flex: 1 1 100%;
	transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.stfr-hero__card .gform_wrapper.gform-theme .gform_footer .gform_button:hover {
	border-color: var(--color-green-dark);
}

/* Consent: small-print copy beside the checkbox, matching the fallback. */
.stfr-hero__card .gform_wrapper.gform-theme .stfr-consent .gfield_consent_label {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-dark);
}

/* reCAPTCHA v2 is a fixed 304px iframe; shrink it on very narrow cards
 * rather than let it overflow. */
@media (max-width: 360px) {
	.stfr-hero__card .gform_wrapper.gform-theme .stfr-captcha .ginput_recaptcha {
		transform: scale(0.88);
		transform-origin: 0 0;
	}
}

.stfr-hero__card .gform_confirmation_message {
	padding: 16px 0;
	font-weight: 600;
	color: var(--color-navy);
}

/* ======================================================================
 * Homepage router (v1.16.0) — Local-vs-Regional chooser + closing CTA.
 * The chooser sits on the blue band like the fit/step cards; the CTA is a
 * green-edged callout card on alt-grey.
 * ====================================================================== */

/* ---- Choose Your Path: two white cards on the blue band -------------- */

.stfr-rf--paths .stfr-section-head { max-width: 860px; margin-inline: auto; }

.stfr-paths {
	display: grid; gap: 24px;
	margin: 0; padding: 0; list-style: none;
}
.stfr-paths__card {
	display: flex; flex-direction: column; gap: 16px;
	padding: 36px 32px 32px;
}
.stfr-paths__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%; background: var(--color-bg-alt);
}
.stfr-paths__icon .stfr-icon { width: 28px; height: 28px; color: var(--color-blue); }
.stfr-paths__card-title { margin: 0; font-size: 1.625rem; line-height: 1.2; }
.stfr-paths__tagline {
	margin: -6px 0 0; font-family: var(--font-display); font-weight: 700;
	font-size: 1.0625rem; color: var(--color-green-dark, var(--color-green));
}
.stfr-paths__body { margin: 0; color: var(--color-dark); }
.stfr-paths__points { margin-top: 4px; }
.stfr-paths__cta { margin-top: auto; align-self: flex-start; padding-top: 10px; padding-bottom: 10px; }
.stfr-paths__cta .stfr-icon { width: 18px; height: 18px; }
.stfr-paths__card .stfr-paths__cta { margin-top: 12px; }

/* The band gradient runs pale by its bottom edge, so the note under the
 * cards is navy (not white like the head) to keep contrast at every width. */
/* Sits below the cards, outside .stfr-section-head--light, so it has to
 * claim the band's white text colour for itself. */
.stfr-paths__note {
	max-width: 720px; margin: 36px auto 0; text-align: center;
	font-size: 1rem; line-height: 1.6; font-weight: 600; color: #fff;
}
@media (max-width: 480px) {
	.stfr-paths__card .stfr-paths__cta { align-self: stretch; }
}

@media (min-width: 768px) {
	.stfr-paths { grid-template-columns: 1fr 1fr; }
	.stfr-paths__card .stfr-paths__cta { margin-top: auto; }
}
@media (min-width: 1025px) {
	.stfr-paths { gap: 32px; }
	.stfr-paths__card { padding: 44px 40px 40px; }
}

/* ---- Closing CTA: callout card with two path buttons ----------------- */

.stfr-rf--home-cta { padding-block: 64px; }
.stfr-home-cta__title { margin-top: 0; }
.stfr-home-cta__body { max-width: 760px; }
.stfr-home-cta__actions {
	display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px;
}
@media (max-width: 480px) {
	.stfr-home-cta__actions .stfr-btn { width: 100%; }
}