/**
 * Franchise module.
 *
 * Built to the "Franchise-New" Figma frame, which is 1512px wide with a 66px
 * gutter — a 1380px content column. Type sizes, line-heights, letter-spacing and
 * colours below are the frame's own values.
 *
 * Sizes are expressed against that reference width so the design scales down
 * smoothly instead of snapping at breakpoints: --frx-k is the ratio of the
 * current viewport to 1512, clamped so type never collapses on a phone or grows
 * unbounded on a wide monitor. A value of 72px in Figma becomes
 * calc(72 * var(--frx-k)).
 */

:root {
	/* The frame's own palette, sampled from its section fills. */
	--frx-purple: #664bba;
	--frx-purple-deep: #573da7;
	--frx-ink: #222;
	--frx-panel: #1a1a1f;
	--frx-white: #fff;
	--frx-off: #f5f3f2;
	--frx-warm: #e8e2e0;
	--frx-text: #333;
	--frx-text-soft: #757575;
	--frx-muted: #b9b6c4;
	--frx-line: rgb(255 255 255 / 14%);

	/* 1px of Figma at the current width, floored so phones stay readable. */
	--frx-k: clamp(0.62px, 0.0661vw, 1px);
	--frx-gutter: clamp(20px, 4.497vw, 68px);
}

.frx {
	background: var(--frx-ink);
	color: var(--frx-white);
}

.frx-skip:focus {
	position: fixed;
	z-index: 100;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	clip-path: none;
	border-radius: 8px;
	background: var(--frx-white);
	color: var(--frx-ink);
}

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

.frx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
}

.frx-btn:hover {
	transform: translateY(-2px);
}

/* Figma: 20px / lh 28 / ls 0.8, 24px x 56px padding. */
.frx-btn--primary {
	padding: calc(16 * var(--frx-k)) calc(32 * var(--frx-k));
	background: var(--frx-purple);
	color: var(--frx-white);
	font-size: calc(20 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	letter-spacing: calc(0.8 * var(--frx-k));
}

.frx-btn--primary:hover {
	background: var(--frx-purple-deep);
}

/* Figma: 16px / lh 22.4 / ls 0.64, hairline outline. */
.frx-btn--outline {
	padding: calc(12 * var(--frx-k)) calc(24 * var(--frx-k));
	border: 1px solid var(--frx-white);
	background: transparent;
	color: var(--frx-white);
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	letter-spacing: calc(0.64 * var(--frx-k));
}

.frx-btn--outline:hover {
	background: var(--frx-white);
	color: var(--frx-ink);
}

.frx-btn--ghost {
	padding: calc(11 * var(--frx-k)) calc(28 * var(--frx-k));
	border: 1px solid var(--frx-white);
	background: transparent;
	color: var(--frx-white);
	font-size: calc(18 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	letter-spacing: calc(0.72 * var(--frx-k));
}

.frx-btn--ghost:hover {
	background: var(--frx-white);
	color: var(--frx-ink);
}

/* Dark pill: the enquiry submit and the news “view all” both use it. */
.frx-btn--dark {
	padding: calc(14 * var(--frx-k)) calc(26 * var(--frx-k));
	background: var(--frx-ink);
	color: var(--frx-white);
	font-size: calc(14 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	letter-spacing: calc(0.56 * var(--frx-k));
}

.frx-btn__icon {
	width: 1em;
	height: 1em;
}

/* -------------------------------------------------------------------------- */
/* Header — overlays the hero                                                  */
/* -------------------------------------------------------------------------- */

/*
 * Pinned, not merely overlaid. Over the hero it stays transparent so the artwork
 * runs to the top of the window; once the page moves it takes a solid ground of
 * its own, because past the hero the links would otherwise sit on whatever
 * section happened to scroll underneath.
 */
.frx-head {
	position: fixed;
	z-index: 50;
	inset: 0 0 auto;
	transition: background-color 250ms ease, box-shadow 250ms ease, padding 250ms ease;
}

.frx-head.is-stuck {
	background: rgb(34 34 34 / 96%);
	box-shadow: 0 8px 30px rgb(0 0 0 / 24%);
	backdrop-filter: blur(8px);
}

/* Tightened once pinned, so it takes less of a short screen. */
.frx-head.is-stuck .frx-head__inner {
	padding-block: calc(18 * var(--frx-k));
}

.frx-head.is-open {
	background: var(--frx-ink);
}

.frx-head__inner {
	display: flex;
	align-items: center;
	gap: calc(32 * var(--frx-k));
	max-width: 1512px;
	margin-inline: auto;
	padding: calc(34 * var(--frx-k)) var(--frx-gutter);
}

.frx-head__brand {
	display: block;
	flex-shrink: 0;
	color: var(--frx-white);
}

.frx-head__brand svg,
.frx-head__brand img {
	display: block;
	width: auto;
	height: calc(48 * var(--frx-k));
}

.frx-head__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.frx-head__menu {
	display: flex;
	gap: calc(24 * var(--frx-k));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Figma: General Sans 600 / 16px / lh 22.4 / ls 0.64 / uppercase. */
.frx-head__link {
	color: var(--frx-white);
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	letter-spacing: calc(0.64 * var(--frx-k));
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.92;
}

.frx-head__link:hover {
	opacity: 1;
}

.frx-head__actions {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--frx-k));
	flex-shrink: 0;
}

/* Figma: 500 / 16px / lh 25.6, with the mark at 20px. */
.frx-head__phone {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--frx-k));
	color: var(--frx-white);
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
}

.frx-head__phone-icon {
	width: calc(20 * var(--frx-k));
	height: calc(20 * var(--frx-k));
	color: #25d366;
}

.frx-head__toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.frx-head__bars,
.frx-head__bars::before,
.frx-head__bars::after {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--frx-white);
}

.frx-head__bars {
	position: relative;
	margin-inline: auto;
}

.frx-head__bars::before,
.frx-head__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.frx-head__bars::before {
	top: -8px;
}

.frx-head__bars::after {
	top: 8px;
}

.frx-head__mobile {
	padding: 8px var(--frx-gutter) 28px;
	background: var(--frx-ink);
}

.frx-head__mobile[hidden] {
	display: none;
}

.frx-head__mobile-menu {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.frx-head__mobile-menu a {
	color: var(--frx-white);
	font-size: 18px;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* 1. Hero — Figma frame 1512 x 834                                            */
/* -------------------------------------------------------------------------- */

.frx-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: calc(834 * var(--frx-k));
	padding-block: calc(295 * var(--frx-k)) calc(74 * var(--frx-k));
	background: var(--frx-ink);
	isolation: isolate;
	overflow: hidden;
}

.frx-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.frx-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * The purple wash. In the frame it climbs from a solid base to nothing about
 * two thirds up, which is what keeps the headline legible over a busy kitchen
 * photograph without flattening the image behind it.
 */
.frx-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(16 16 20 / 55%) 0%, rgb(16 16 20 / 10%) 32%, rgb(76 47 191 / 55%) 78%, rgb(106 76 224 / 85%) 100%);
	pointer-events: none;
}

.frx-hero__inner {
	display: grid;
	grid-template-columns: calc(600 * var(--frx-k)) 1fr;
	align-items: end;
	gap: calc(40 * var(--frx-k));
	width: 100%;
	max-width: 1512px;
	margin-inline: auto;
	padding-inline: var(--frx-gutter);
}

/* Figma: 600 / 24px / lh 28.8, italic. */
.frx-hero__eyebrow {
	margin: 0 0 calc(16 * var(--frx-k));
	font-size: calc(24 * var(--frx-k));
	font-style: italic;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

/* Figma: 700 / 72px / lh 72 (1.0) / uppercase, wrapping to three lines. */
.frx-hero__title {
	margin: 0 0 calc(16 * var(--frx-k));
	max-width: calc(620 * var(--frx-k));
	font-size: calc(72 * var(--frx-k));
	font-weight: var(--fw-bold);
	line-height: 1;
	letter-spacing: calc(-1 * var(--frx-k));
	text-transform: uppercase;
}

/* Figma: 500 / 20px / lh 32, on the off-white rather than pure white. */
.frx-hero__text {
	margin: 0 0 calc(12 * var(--frx-k));
	max-width: calc(600 * var(--frx-k));
	color: var(--frx-off);
	font-size: calc(20 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.frx-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(6 * var(--frx-k));
}

/* --- The pillar card --- */

/*
 * The card is not aligned to the copy column: in the frame it sits 9px lower and
 * 4px further from the right edge than the text does. Kept, rather than
 * regularised, because that is what the design does.
 */
.frx-pillars {
	justify-self: end;
	width: calc(366 * var(--frx-k));
	margin: 0 calc(-4 * var(--frx-k)) calc(9 * var(--frx-k)) 0;
	padding: 0 calc(24 * var(--frx-k));
	list-style: none;
	border-radius: calc(12 * var(--frx-k));
	background: rgb(26 26 31 / 82%);
	backdrop-filter: blur(6px);
}

.frx-pillar {
	display: flex;
	align-items: center;
	gap: calc(16 * var(--frx-k));
	padding-block: calc(19.5 * var(--frx-k));
}

.frx-pillar + .frx-pillar {
	border-top: 1px solid var(--frx-line);
}

.frx-pillar__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(32 * var(--frx-k));
	height: calc(32 * var(--frx-k));
	color: var(--frx-white);
}

.frx-pillar__icon svg,
.frx-pillar__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.frx-pillar__body {
	display: block;
}

/* Figma: 600 / 18px / lh 21.6 / ls 0.72. */
.frx-pillar__title {
	display: block;
	font-size: calc(18 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	letter-spacing: calc(0.72 * var(--frx-k));
	text-transform: uppercase;
}

/* Figma: 500 / 12px / lh 19.2. */
.frx-pillar__note {
	display: block;
	margin-top: calc(4 * var(--frx-k));
	color: var(--frx-muted);
	font-size: calc(12 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------- */
/* Shared section furniture                                                    */
/* -------------------------------------------------------------------------- */

.frx-sec {
	padding-block: calc(96 * var(--frx-k));
}

.frx-sec__inner {
	max-width: 1512px;
	margin-inline: auto;
	padding-inline: var(--frx-gutter);
}

.frx-sec--white {
	background: var(--frx-white);
	color: var(--frx-text);
}

.frx-sec--off {
	background: var(--frx-off);
	color: var(--frx-text);
}

.frx-sec--dark {
	background: var(--frx-ink);
	color: var(--frx-white);
}

/* Figma: 700 / 48px / lh 57.6 / uppercase. */
.frx-h2 {
	margin: 0 0 calc(24 * var(--frx-k));
	font-size: calc(48 * var(--frx-k));
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-transform: uppercase;
}

.frx-h2 em {
	color: var(--frx-purple);
	font-style: normal;
}

/* -------------------------------------------------------------------------- */
/* 2. Stats — Figma 1512 x 264, four 345px columns on white                    */
/* -------------------------------------------------------------------------- */

/*
 * 89 rather than the frame's 96: Figma measures the numeral's ink box (34px of a
 * 48px line), where CSS lays out the full line box. Trimming the padding by the
 * difference lands the band on its 264px height.
 */
.frx-stats {
	background: var(--frx-white);
	padding-block: calc(89 * var(--frx-k));
}

.frx-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 1512px;
	margin-inline: auto;
	padding-inline: var(--frx-gutter);
}

.frx-stat {
	text-align: center;
}

/* Figma: 400 / 48px / lh 48 / ls -0.96, in purple. */
.frx-stat__value {
	display: block;
	color: var(--frx-purple);
	font-size: calc(48 * var(--frx-k));
	font-weight: 400;
	line-height: 1;
	letter-spacing: calc(-0.96 * var(--frx-k));
}

/* The "+" rides smaller and higher than the numeral it follows. */
.frx-stat__plus {
	font-size: calc(32 * var(--frx-k));
	vertical-align: calc(6 * var(--frx-k));
}

/* Figma: 600 / 18px / lh 21.6 / ls 0.72 / uppercase, on the darker grey. */
.frx-stat__label {
	display: block;
	margin-top: calc(16 * var(--frx-k));
	color: var(--frx-text);
	font-size: calc(18 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	letter-spacing: calc(0.72 * var(--frx-k));
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* 3. Revolution — copy left, artwork right                                    */
/* -------------------------------------------------------------------------- */

.frx-rev__inner {
	display: grid;
	/* 610px of copy against a 670px image, the frame's own split. */
	grid-template-columns: calc(660 * var(--frx-k)) calc(670 * var(--frx-k));
	justify-content: space-between;
	align-items: start;
	gap: calc(44 * var(--frx-k));
}

.frx-rev__title {
	max-width: calc(640 * var(--frx-k));
	color: var(--frx-text);
}

/* Figma: 500 / 18px / lh 28.8, in the soft grey. */
.frx-rev__body p {
	margin: 0 0 calc(28 * var(--frx-k));
	max-width: calc(660 * var(--frx-k));
	color: var(--frx-text-soft);
	font-size: calc(18 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.frx-rev__body p:last-child {
	margin-bottom: 0;
}

.frx-rev__media img {
	display: block;
	width: 100%;
	height: calc(570 * var(--frx-k));
	object-fit: cover;
	border-radius: calc(16 * var(--frx-k));
}

/* Figma: 500 / 18px / lh 28.8 — the standfirst under a section heading. */
.frx-lede {
	margin: 0;
	max-width: calc(760 * var(--frx-k));
	font-size: calc(18 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
	opacity: 0.82;
}

/* -------------------------------------------------------------------------- */
/* 4. Franchise formats — three cards on the dark ground                       */
/* -------------------------------------------------------------------------- */

.frx-formats__head {
	max-width: calc(900 * var(--frx-k));
	margin-bottom: calc(48 * var(--frx-k));
	text-align: center;
	margin-inline: auto;
}

.frx-formats__head .frx-lede {
	margin-inline: auto;
}

.frx-formats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(16 * var(--frx-k));
	margin: 0;
	padding: 0;
	list-style: none;
}

.frx-format {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 260ms ease, border-color 260ms ease;
	border: 1px solid rgb(102 75 186 / 55%);
	border-radius: calc(16 * var(--frx-k));
	background: #191919;
}

/* The middle card is the one the design pushes; it carries the accent border. */
/*
 * The centre card is not tinted. In the frame it is distinguished only by its
 * solid button and a slightly brighter edge — the three grounds are identical.
 */
.frx-format--lead {
	border-color: var(--frx-purple);
}

/*
 * The photo occupies the top of the card and fades out under the title rather
 * than ending on a hard edge, which is how the frame joins image to copy.
 */
/*
 * One image box for all three. The frame places every card’s title at y=208 of a
 * 570px card, so the photographs share a band and the titles land on one line —
 * letting each keep its natural height staggered them, which the design does not.
 */
.frx-format__media {
	position: relative;
	height: calc(232 * var(--frx-k));
}

.frx-format__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.frx-format__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(25 25 25 / 0%) 0%, rgb(25 25 25 / 45%) 55%, rgb(25 25 25 / 98%) 100%);
}

.frx-format__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Pulled up so the title sits over the foot of the photo, as in the frame. */
	margin-top: calc(-46 * var(--frx-k));
	padding: 0 calc(28 * var(--frx-k)) calc(28 * var(--frx-k));
	position: relative;
	z-index: 1;
}

/* Figma sets the format names in italic. */
.frx-format__title {
	margin: 0 0 calc(14 * var(--frx-k));
	font-size: calc(28 * var(--frx-k));
	font-style: italic;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-transform: uppercase;
}

/* Outlined in the accent for the two supporting cards. */
.frx-btn--outline-purple {
	padding: calc(15 * var(--frx-k)) calc(24 * var(--frx-k));
	border: 1.5px solid var(--frx-purple);
	background: transparent;
	color: var(--frx-white);
	font-size: calc(15 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	letter-spacing: calc(0.6 * var(--frx-k));
}

.frx-btn--outline-purple:hover {
	background: var(--frx-purple);
}

.frx-format__text {
	margin: 0 0 calc(28 * var(--frx-k));
	color: #cfcfd4;
	font-size: calc(15 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

/*
 * Pushed to the foot of the card rather than following the copy. The three
 * descriptions differ in length, and left to flow the figures would sit at three
 * different heights; anchored, "Investment" lines up across all three cards.
 */
.frx-format__specs {
	margin: auto 0 calc(24 * var(--frx-k));
}

.frx-format__row {
	display: flex;
	justify-content: space-between;
	gap: calc(16 * var(--frx-k));
	padding-block: calc(12 * var(--frx-k));
	border-top: 1px solid rgb(255 255 255 / 12%);
	font-size: calc(14 * var(--frx-k));
}

.frx-format__row dt {
	color: #cfcfd4;
}

.frx-format__row dd {
	margin: 0;
	font-weight: var(--fw-semibold);
}

/*
 * One box for both button variants. The filled and outlined styles carry
 * different padding and border widths, which left the featured card's figures
 * sitting a few pixels off its neighbours'.
 */
.frx-format__cta {
	padding: calc(15 * var(--frx-k)) calc(24 * var(--frx-k));
	border: 1.5px solid transparent;
	font-size: calc(15 * var(--frx-k));
}

.frx-format__cta.frx-btn--outline-purple {
	border-color: var(--frx-purple);
}

/* -------------------------------------------------------------------------- */
/* 5. Cost table — purple ground                                               */
/* -------------------------------------------------------------------------- */

.frx-cost {
	background: var(--frx-purple);
	color: var(--frx-white);
	text-align: center;
}

/*
 * This heading carries its own type rather than the section default: the frame
 * sets it 46px semibold on a 50.6px line, which is what lets the whole question
 * sit on one line across the 1381px column. At the generic 48px bold it wraps.
 */
.frx-cost__title {
	margin-inline: auto;
	max-width: none;
	font-size: calc(46 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.1;
}

.frx-cost__lede {
	margin-inline: auto;
	max-width: calc(1000 * var(--frx-k));
}

/* A pill, not a line of text — the frame gives this figure its own badge. */
.frx-cost__note {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--frx-k));
	margin: calc(20 * var(--frx-k)) 0 calc(36 * var(--frx-k));
	padding: calc(10 * var(--frx-k)) calc(20 * var(--frx-k));
	border-radius: 999px;
	background: rgb(255 255 255 / 16%);
	font-size: calc(13 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
}

.frx-cost__note-icon {
	width: calc(16 * var(--frx-k));
	height: calc(16 * var(--frx-k));
}

.frx-cost__scroll {
	overflow-x: auto;
	border-radius: calc(12 * var(--frx-k));
}

.frx-cost__table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	background: var(--frx-white);
	color: var(--frx-text);
	text-align: left;
}

.frx-cost__table th,
.frx-cost__table td {
	padding: calc(18 * var(--frx-k)) calc(24 * var(--frx-k));
	font-size: calc(15 * var(--frx-k));
	border-bottom: 1px solid rgb(0 0 0 / 8%);
}

.frx-cost__table thead th {
	background: #c9bee4;
	font-size: calc(12 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.52 * var(--frx-k));
	text-transform: uppercase;
}

.frx-cost__table tbody th {
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

/* The flagged format inverts its whole row rather than wearing a chip. */
.frx-cost__table tbody tr.is-flagged {
	background: #1c1c1c;
	color: var(--frx-white);
}

.frx-cost__table tbody tr.is-flagged th,
.frx-cost__table tbody tr.is-flagged td {
	border-bottom-color: rgb(255 255 255 / 12%);
}

.frx-cost__tag {
	display: block;
	margin-top: calc(2 * var(--frx-k));
	color: var(--frx-purple);
	font-size: calc(10 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
}

/* Rows lift a touch under the pointer so the table feels answerable. */
.frx-cost__table tbody tr {
	transition: background-color 220ms ease, transform 220ms ease;
}

.frx-cost__table tbody tr:hover {
	background: #efeaf8;
}

.frx-cost__table tbody tr.is-flagged:hover {
	background: #2a2440;
}

.frx-cost__small {
	margin: calc(20 * var(--frx-k)) 0 calc(32 * var(--frx-k));
	font-size: calc(12 * var(--frx-k));
	line-height: 1.6;
	opacity: 0.8;
}

.frx-cost__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(16 * var(--frx-k));
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-semibold);
}

.frx-btn--light {
	padding: calc(14 * var(--frx-k)) calc(28 * var(--frx-k));
	background: var(--frx-white);
	color: var(--frx-purple);
	font-size: calc(15 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.6 * var(--frx-k));
}

/* -------------------------------------------------------------------------- */
/* 6. Why choose — six cards on white                                          */
/* -------------------------------------------------------------------------- */

.frx-why__title,
.frx-stories__title,
.frx-steps__title {
	margin-bottom: calc(48 * var(--frx-k));
	text-align: center;
}

.frx-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(24 * var(--frx-k));
	margin: 0;
	padding: 0;
	list-style: none;
}

.frx-why__card {
	padding: calc(28 * var(--frx-k));
	border-radius: calc(12 * var(--frx-k));
	background: #f4f2f5;
	transition: transform 240ms ease, background-color 240ms ease;
}

.frx-why__card:hover {
	transform: translateY(calc(-4 * var(--frx-k)));
	background: #efecf4;
}

/* A solid purple tile with the mark reversed out of it, as the frame has it. */
.frx-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(48 * var(--frx-k));
	height: calc(48 * var(--frx-k));
	margin-bottom: calc(22 * var(--frx-k));
	border-radius: calc(12 * var(--frx-k));
	background: var(--frx-purple);
	color: var(--frx-white);
}

.frx-why__icon svg {
	width: calc(22 * var(--frx-k));
	height: calc(22 * var(--frx-k));
}

/* The exported artwork is drawn in strokes; force them to the tile’s white. */
.frx-why__icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.frx-why__icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.frx-why__card-title {
	margin: 0 0 calc(12 * var(--frx-k));
	color: var(--frx-purple);
	font-size: calc(18 * var(--frx-k));
	font-weight: var(--fw-bold);
	line-height: 1.3;
	text-transform: uppercase;
}

.frx-why__card-text {
	margin: 0;
	color: var(--frx-text-soft);
	font-size: calc(14 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------- */
/* 7. Franchisee stories                                                       */
/* -------------------------------------------------------------------------- */

.frx-stories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(24 * var(--frx-k));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* White cards, not translucent panels — the frame lifts them off the dark. */
.frx-story {
	display: flex;
	flex-direction: column;
	padding: calc(28 * var(--frx-k));
	border-radius: calc(12 * var(--frx-k));
	background: var(--frx-white);
	transition: transform 240ms ease;
}

.frx-story:hover {
	transform: translateY(calc(-4 * var(--frx-k)));
}

.frx-story__mark {
	display: block;
	margin-bottom: calc(18 * var(--frx-k));
	color: var(--frx-purple);
	font-size: calc(64 * var(--frx-k));
	font-weight: var(--fw-bold);
	line-height: 0.55;
}

.frx-story__quote {
	margin: 0 0 calc(24 * var(--frx-k));
	flex: 1;
}

.frx-story__quote p {
	margin: 0;
	color: var(--frx-text);
	font-size: calc(14 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.7;
}

.frx-story__who {
	margin: 0;
	padding-top: calc(22 * var(--frx-k));
}

.frx-story__name {
	display: block;
	color: var(--frx-purple);
	font-size: calc(15 * var(--frx-k));
	font-weight: var(--fw-bold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
}

.frx-story__place {
	display: block;
	margin-top: calc(4 * var(--frx-k));
	color: var(--frx-text-soft);
	font-size: calc(12 * var(--frx-k));
}

/* -------------------------------------------------------------------------- */
/* 8. The process — five steps on the warm ground                              */
/* -------------------------------------------------------------------------- */

.frx-steps {
	background: var(--frx-warm);
	color: var(--frx-text);
}

/* One outlined panel holding the whole sequence. */
.frx-steps__panel {
	padding: calc(36 * var(--frx-k)) calc(32 * var(--frx-k)) calc(40 * var(--frx-k));
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: calc(14 * var(--frx-k));
}

.frx-steps__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: calc(24 * var(--frx-k));
	margin: 0;
	padding: 0;
	list-style: none;
}

.frx-step {
	position: relative;
}

.frx-step__head {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--frx-k));
	margin: 0 0 calc(18 * var(--frx-k));
}

.frx-step__num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(6 * var(--frx-k)) calc(12 * var(--frx-k));
	border-radius: calc(6 * var(--frx-k));
	background: #222;
	color: var(--frx-white);
	font-size: calc(12 * var(--frx-k));
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

/* The rule carries the eye to the next step; the last one still gets it. */
.frx-step__rule {
	flex: 1;
	height: 1px;
	background: #222;
}

.frx-step__when {
	display: block;
	margin-bottom: calc(10 * var(--frx-k));
	color: var(--frx-purple);
	font-size: calc(11 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
}

.frx-step__title {
	margin: 0 0 calc(12 * var(--frx-k));
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-bold);
	line-height: 1.25;
	text-transform: uppercase;
}

.frx-step__text {
	margin: 0;
	color: var(--frx-text-soft);
	font-size: calc(13 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.frx-steps__cta {
	text-align: center;
}

.frx-eyebrow {
	margin: 0 0 calc(12 * var(--frx-k));
	color: var(--frx-purple);
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.64 * var(--frx-k));
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* 9. What we're looking for                                                   */
/* -------------------------------------------------------------------------- */

.frx-looking__inner {
	display: grid;
	grid-template-columns: calc(520 * var(--frx-k)) 1fr;
	gap: calc(64 * var(--frx-k));
	align-items: start;
}

.frx-looking__cta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(18 * var(--frx-k));
	margin-top: calc(32 * var(--frx-k));
	padding: calc(14 * var(--frx-k)) calc(16 * var(--frx-k)) calc(14 * var(--frx-k)) calc(24 * var(--frx-k));
	border-radius: calc(10 * var(--frx-k));
	background: var(--frx-warm);
}

.frx-looking__ask {
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-semibold);
}

.frx-looking__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: calc(12 * var(--frx-k));
	background: var(--frx-white);
	overflow: hidden;
}

.frx-criterion {
	display: flex;
	gap: calc(20 * var(--frx-k));
	padding: calc(24 * var(--frx-k));
}

.frx-criterion + .frx-criterion {
	border-top: 1px solid rgb(0 0 0 / 10%);
}

.frx-criterion__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(42 * var(--frx-k));
	height: calc(42 * var(--frx-k));
	border-radius: calc(10 * var(--frx-k));
	background: var(--frx-purple);
	color: var(--frx-white);
}

.frx-criterion__icon svg {
	width: calc(20 * var(--frx-k));
	height: calc(20 * var(--frx-k));
}

.frx-criterion__icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.frx-criterion__icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.frx-criterion__title {
	margin: 0 0 calc(6 * var(--frx-k));
	color: var(--frx-purple);
	font-size: calc(15 * var(--frx-k));
	font-weight: var(--fw-bold);
	letter-spacing: calc(0.4 * var(--frx-k));
	text-transform: uppercase;
}

.frx-criterion__text {
	margin: 0;
	color: var(--frx-text-soft);
	font-size: calc(13 * var(--frx-k));
	line-height: 1.6;
}

/* -------------------------------------------------------------------------- */
/* 10. Enquiry form                                                            */
/* -------------------------------------------------------------------------- */

.frx-enquiry {
	background: var(--frx-purple-deep);
	color: var(--frx-white);
}

.frx-enquiry__inner {
	max-width: calc(880 * var(--frx-k) + 2 * var(--frx-gutter));
	text-align: center;
}

.frx-enquiry__title {
	margin-bottom: calc(8 * var(--frx-k));
}

.frx-enquiry__lede {
	margin: 0 auto calc(24 * var(--frx-k));
}

/* Figma: a 570px stack of 50px fields, 12px apart, centred in the section. */
.frx-form {
	display: grid;
	gap: calc(12 * var(--frx-k));
	max-width: calc(570 * var(--frx-k));
	margin-inline: auto;
	text-align: left;
}

/* Stacked, not paired: the frame runs one field per line. */
.frx-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(12 * var(--frx-k));
}

.frx-field {
	position: relative;
	display: block;
}

.frx-field input,
.frx-field select,
.frx-field textarea {
	width: 100%;
	min-height: calc(50 * var(--frx-k));
	padding: calc(12 * var(--frx-k)) calc(18 * var(--frx-k));
	border: 0;
	border-radius: calc(10 * var(--frx-k));
	background: var(--frx-white);
	color: var(--frx-text);
	font-family: inherit;
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-medium);
}

.frx-field textarea {
	min-height: calc(120 * var(--frx-k));
	resize: vertical;
}

.frx-field--phone {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border-radius: calc(10 * var(--frx-k));
	background: var(--frx-white);
}

.frx-field__prefix {
	display: inline-flex;
	align-items: center;
	padding-inline: calc(16 * var(--frx-k));
	background: rgb(0 0 0 / 6%);
	color: var(--frx-text);
	font-size: calc(15 * var(--frx-k));
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.frx-field--phone input {
	border-radius: 0;
}

.frx-form__actions {
	display: flex;
	justify-content: center;
	margin-top: calc(8 * var(--frx-k));
}

/* Off-screen rather than display:none — bots skip what is hidden outright. */
.frx-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.frx-notice {
	max-width: calc(640 * var(--frx-k));
	margin: 0 auto calc(28 * var(--frx-k));
	padding: calc(16 * var(--frx-k)) calc(20 * var(--frx-k));
	border-radius: calc(10 * var(--frx-k));
	border-left: 4px solid currentcolor;
	font-size: calc(15 * var(--frx-k));
	font-weight: var(--fw-medium);
	text-align: left;
}

.frx-notice--ok {
	background: rgb(255 255 255 / 14%);
	color: var(--frx-white);
}

.frx-notice--error {
	background: rgb(255 214 214 / 95%);
	color: #8a1c1c;
}

.frx-form .frform__error,
.frx-form .frx-form__error {
	margin: calc(6 * var(--frx-k)) 0 0;
	color: #ffd6d6;
	font-size: calc(13 * var(--frx-k));
}

/* Two lines of reassurance, each item led by its mark. */
.frx-enquiry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(16 * var(--frx-k)) calc(32 * var(--frx-k));
	max-width: calc(442 * var(--frx-k));
	margin: calc(24 * var(--frx-k)) auto 0;
	padding: 0;
	list-style: none;
	font-size: calc(13 * var(--frx-k));
	opacity: 0.92;
}

.frx-enquiry__meta li {
	display: inline-flex;
	align-items: center;
	gap: calc(8 * var(--frx-k));
}

.frx-enquiry__meta-icon {
	flex-shrink: 0;
	width: calc(16 * var(--frx-k));
	height: calc(16 * var(--frx-k));
}

.frx-enquiry__meta a {
	color: inherit;
	text-decoration: none;
	font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------------------- */
/* 11. FAQ                                                                     */
/* -------------------------------------------------------------------------- */

/* Full content width — the questions span the column like every other section. */
.frx-faq__inner {
	max-width: 1512px;
}

/* Two columns of separate cards, filled row by row. */
.frx-faq__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(12 * var(--frx-k)) calc(16 * var(--frx-k));
	align-items: start;
}

.frx-faq__title {
	text-align: center;
}

.frx-faq__item {
	border-radius: calc(8 * var(--frx-k));
	background: var(--frx-white);
	transition: background-color 200ms ease;
}

.frx-faq__item:hover {
	background: #fbfbfc;
}

.frx-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--frx-k));
	padding: calc(13 * var(--frx-k)) calc(20 * var(--frx-k));
	color: var(--frx-text);
	font-size: calc(14 * var(--frx-k));
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

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

/* A plus that becomes a minus, drawn rather than shipped as an icon. */
.frx-faq__sign {
	position: relative;
	flex-shrink: 0;
	width: calc(22 * var(--frx-k));
	height: calc(22 * var(--frx-k));
	border: 1.5px solid var(--frx-text);
	border-radius: 50%;
}

.frx-faq__sign::before,
.frx-faq__sign::after {
	content: "";
	position: absolute;
	inset: 50% 25% auto;
	height: 1.5px;
	background: var(--frx-text);
	transform: translateY(-50%);
	transition: transform 200ms ease, opacity 200ms ease;
}

.frx-faq__sign::after {
	transform: translateY(-50%) rotate(90deg);
}

.frx-faq__item[open] .frx-faq__sign::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.frx-faq__a {
	padding: 0 calc(20 * var(--frx-k)) calc(18 * var(--frx-k));
}

.frx-faq__a p {
	margin: 0;
	color: var(--frx-text-soft);
	font-size: calc(13 * var(--frx-k));
	line-height: 1.7;
}

/* -------------------------------------------------------------------------- */
/* 12. Territory — copy left, dark map right                                   */
/* -------------------------------------------------------------------------- */

.frx-territory__inner {
	display: grid;
	/* Figma: a 460px copy column against an 890px map. */
	grid-template-columns: calc(460 * var(--frx-k)) calc(890 * var(--frx-k));
	justify-content: space-between;
	gap: calc(40 * var(--frx-k));
	/*
	 * The copy column runs taller than the map. Centred, the map sits against the
	 * middle of the text rather than leaving a gap under it.
	 */
	align-items: center;
}

.frx-territory__text {
	margin: 0 0 calc(28 * var(--frx-k));
	color: var(--frx-text-soft);
	font-size: calc(17 * var(--frx-k));
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

/* The urgency bar: a full-width purple pill with the arrow pushed to the end. */
.frx-territory__flag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--frx-k));
	margin-bottom: calc(24 * var(--frx-k));
	padding: calc(18 * var(--frx-k)) calc(24 * var(--frx-k));
	border-radius: calc(10 * var(--frx-k));
	background: var(--frx-purple);
	color: var(--frx-white);
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
	text-decoration: none;
}

.frx-territory__flag-icon {
	flex-shrink: 0;
	width: calc(20 * var(--frx-k));
	height: calc(20 * var(--frx-k));
}

.frx-territory__key {
	display: grid;
	gap: calc(16 * var(--frx-k));
	margin: 0 0 calc(24 * var(--frx-k));
	padding: 0;
	list-style: none;
}

/* Each group is a card listing the towns, not a legend dot. */
.frx-terr {
	padding: calc(20 * var(--frx-k)) calc(24 * var(--frx-k));
	border-radius: calc(10 * var(--frx-k));
	background: var(--frx-off);
}

.frx-terr__head {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--frx-k));
	margin: 0 0 calc(10 * var(--frx-k));
}

.frx-terr__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--frx-purple);
}

.frx-terr__icon svg {
	display: block;
	width: calc(22 * var(--frx-k));
	height: calc(22 * var(--frx-k));
}

.frx-terr__title {
	font-size: calc(18 * var(--frx-k));
	font-weight: var(--fw-bold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
}

.frx-terr__list {
	margin: 0;
	color: var(--frx-text-soft);
	font-size: calc(14 * var(--frx-k));
	line-height: 1.6;
}

.frx-territory__urgent {
	margin: 0 0 calc(24 * var(--frx-k));
	color: var(--frx-purple);
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-medium);
}

.frx-territory__map img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(12 * var(--frx-k));
}

/* -------------------------------------------------------------------------- */
/* 13. Latest openings — a purple band of cards                                */
/* -------------------------------------------------------------------------- */

.frx-news {
	background: var(--frx-purple);
	color: var(--frx-white);
}

.frx-news__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(24 * var(--frx-k));
	margin-bottom: calc(32 * var(--frx-k));
}

.frx-news__head .frx-h2 {
	margin: 0;
}

.frx-news__nav {
	display: flex;
	gap: calc(12 * var(--frx-k));
}

.frx-news__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--frx-k));
	height: calc(44 * var(--frx-k));
	padding: 0;
	border: 1.5px solid var(--frx-white);
	border-radius: 50%;
	background: transparent;
	color: var(--frx-white);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.frx-news__arrow:hover {
	background: var(--frx-white);
	color: var(--frx-purple);
}

.frx-news__arrow svg {
	width: calc(20 * var(--frx-k));
	height: calc(20 * var(--frx-k));
}

.frx-news__arrow[data-frx-prev] svg {
	transform: scaleX(-1);
}

/*
 * Five across on the frame's width, and a swipeable rail below it — the arrows
 * scroll this track rather than paging a carousel library.
 */
.frx-news__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * calc(16 * var(--frx-k))) / 5);
	gap: calc(16 * var(--frx-k));
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.frx-news__track::-webkit-scrollbar {
	display: none;
}

.frx-news__card {
	display: flex;
	flex-direction: column;
	min-height: calc(178 * var(--frx-k));
	padding: calc(22 * var(--frx-k));
	border-radius: calc(8 * var(--frx-k));
	background: var(--frx-off);
	scroll-snap-align: start;
}

.frx-news__date {
	margin: 0 0 calc(12 * var(--frx-k));
	color: var(--frx-text-soft);
	font-size: calc(13 * var(--frx-k));
	font-weight: var(--fw-medium);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
}

.frx-news__title {
	margin: 0 0 calc(24 * var(--frx-k));
	font-size: calc(18 * var(--frx-k));
	font-weight: var(--fw-bold);
	line-height: 1.25;
	text-transform: uppercase;
}

.frx-news__title a {
	color: var(--frx-text);
	text-decoration: none;
}

.frx-news__more {
	display: inline-flex;
	align-items: center;
	gap: calc(8 * var(--frx-k));
	margin-top: auto;
	color: var(--frx-purple);
	font-size: calc(13 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
	text-decoration: none;
}

.frx-news__more-icon {
	width: calc(16 * var(--frx-k));
	height: calc(16 * var(--frx-k));
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */

.frx-foot {
	background: var(--frx-ink);
	color: var(--frx-white);
}

.frx-foot__inner {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: calc(40 * var(--frx-k));
	max-width: 1512px;
	margin-inline: auto;
	padding: calc(72 * var(--frx-k)) var(--frx-gutter) calc(40 * var(--frx-k));
}

.frx-foot__brand svg,
.frx-foot__brand img {
	display: block;
	width: auto;
	height: calc(56 * var(--frx-k));
}

.frx-foot__social {
	display: flex;
	gap: calc(12 * var(--frx-k));
	margin: calc(24 * var(--frx-k)) 0 0;
	padding: 0;
	list-style: none;
}

.frx-foot__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(38 * var(--frx-k));
	height: calc(38 * var(--frx-k));
	border: 1.5px solid var(--frx-line);
	border-radius: 50%;
	color: var(--frx-white);
}

.frx-foot__social a:hover {
	border-color: var(--frx-white);
}

.frx-foot__social svg {
	width: calc(18 * var(--frx-k));
	height: calc(18 * var(--frx-k));
}

.frx-foot__col-title {
	margin: 0 0 calc(20 * var(--frx-k));
	font-size: calc(16 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.64 * var(--frx-k));
	text-transform: uppercase;
}

.frx-foot__links {
	display: grid;
	gap: calc(12 * var(--frx-k));
	margin: 0;
	padding: 0;
	list-style: none;
}

.frx-foot__links a {
	color: var(--frx-muted);
	font-size: calc(15 * var(--frx-k));
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.frx-foot__links a:hover {
	color: var(--frx-white);
}

.frx-foot__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	max-width: 1512px;
	margin-inline: auto;
	padding: calc(24 * var(--frx-k)) var(--frx-gutter) calc(40 * var(--frx-k));
	/* The frame rules this line in the accent, not a neutral hairline. */
	border-top: 1px solid var(--frx-purple);
}

.frx-foot__partner {
	margin-left: calc(28 * var(--frx-k));
}

.frx-foot__partner a {
	color: var(--frx-purple);
	text-decoration: none;
}

.frx-foot__copy,
.frx-foot__legal {
	margin: 0;
	color: var(--frx-muted);
	font-size: calc(14 * var(--frx-k));
}

.frx-foot__legal {
	display: flex;
	gap: calc(24 * var(--frx-k));
}

.frx-foot__legal a {
	color: inherit;
	text-decoration: none;
}

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

@media (max-width: 1000px) {
	.frx-head__nav,
	.frx-head__phone {
		display: none;
	}

	.frx-head__toggle {
		display: block;
		margin-left: auto;
	}

	.frx-hero__inner {
		grid-template-columns: 1fr;
		align-items: start;
		gap: calc(40 * var(--frx-k));
	}

	/*
	 * Every fixed two- and three-column grid collapses here. The frame's column
	 * widths are absolute, so without this they keep their desktop size and push
	 * the page wider than the screen.
	 */
	.frx-rev__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.frx-rev__title,
	.frx-rev__body p {
		max-width: none;
	}

	.frx-rev__media img {
		height: auto;
		aspect-ratio: 670 / 570;
	}

	.frx-formats__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.frx-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 32px;
	}

	.frx-why__grid,
	.frx-stories__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* Five abreast is unreadable here; two columns keeps the numbers legible. */
	.frx-steps__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 20px;
	}

	.frx-looking__inner,
	.frx-territory__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.frx-news__track {
		grid-auto-columns: 60%;
	}

	.frx-pillars {
		justify-self: stretch;
		width: 100%;
		max-width: 520px;
	}

	.frx-foot__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	:root {
		/* Below this the ratio would shrink type past readability, so it holds. */
		--frx-k: 0.62px;
	}

	.frx-hero {
		min-height: 0;
		padding-block: 140px 56px;
	}

	.frx-hero__title {
		font-size: 40px;
		max-width: none;
	}

	.frx-hero__eyebrow {
		font-size: 16px;
	}

	.frx-hero__text {
		font-size: 16px;
		max-width: none;
	}

	.frx-btn--primary,
	.frx-btn--outline {
		width: 100%;
		font-size: 15px;
		padding-block: 14px;
	}

	.frx-hero__actions {
		align-self: stretch;
		width: 100%;
	}

	.frx-pillars {
		padding-inline: 18px;
	}

	.frx-pillar__title {
		font-size: 15px;
	}

	.frx-pillar__note {
		font-size: 12px;
	}

	.frx-foot__inner {
		grid-template-columns: 1fr;
	}

	/* Everything that was still two-up goes single column on a phone. */
	.frx-faq__list,
	.frx-why__grid,
	.frx-stories__grid,
	.frx-steps__list,
	.frx-stats__grid,
	.frx-form__row {
		grid-template-columns: 1fr;
	}

	.frx-sec {
		padding-block: 56px;
	}

	.frx-h2 {
		font-size: 28px;
	}

	.frx-lede,
	.frx-rev__body p {
		font-size: 15px;
	}

	.frx-stat__value {
		font-size: 36px;
	}

	.frx-format,
	.frx-why__card,
	.frx-story,
	.frx-criterion,
	.frx-news__card {
		padding: 22px;
	}

	.frx-faq__q {
		font-size: 16px;
	}

	.frx-territory__map {
		aspect-ratio: 3 / 4;
	}
}

/*
 * The card answers the pointer; its photograph does not.
 *
 * The artwork used to ease in on hover as well. With three formats side by side
 * that read as one comparison, a photograph quietly changing scale under the
 * pointer pulled attention to the picture rather than the card being chosen.
 */
.frx-format:hover {
	transform: translateY(calc(-6 * var(--frx-k)));
	border-color: var(--frx-purple);
}

/* The story link and the pager beneath the row. */
.frx-story__more {
	display: inline-flex;
	align-items: center;
	gap: calc(8 * var(--frx-k));
	margin-top: calc(10 * var(--frx-k));
	color: var(--frx-purple);
	font-size: calc(12 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
	text-decoration: none;
}

.frx-story__more-icon {
	width: calc(14 * var(--frx-k));
	height: calc(14 * var(--frx-k));
	transition: transform 200ms ease;
}

.frx-story__more:hover .frx-story__more-icon {
	transform: translateX(calc(4 * var(--frx-k)));
}

.frx-story__dots {
	display: flex;
	justify-content: center;
	gap: calc(10 * var(--frx-k));
	margin-top: calc(36 * var(--frx-k));
}

.frx-story__dot {
	width: calc(9 * var(--frx-k));
	height: calc(9 * var(--frx-k));
	border-radius: 50%;
	background: rgb(255 255 255 / 28%);
}

.frx-story__dot.is-active {
	background: var(--frx-purple);
}

/* The promise under the panel, then the call to action. */
.frx-steps__summary {
	margin: calc(32 * var(--frx-k)) 0 calc(22 * var(--frx-k));
	color: var(--frx-text-soft);
	font-size: calc(13 * var(--frx-k));
	font-weight: var(--fw-semibold);
	letter-spacing: calc(0.5 * var(--frx-k));
	text-align: center;
	text-transform: uppercase;
}

/* The enquiry submit is dark, and sized to its label rather than the column. */
.frx-form__submit {
	min-width: calc(181 * var(--frx-k));
	min-height: calc(46 * var(--frx-k));
	padding: calc(12 * var(--frx-k)) calc(24 * var(--frx-k));
	font-size: calc(14 * var(--frx-k));
	letter-spacing: calc(0.6 * var(--frx-k));
}

.frx-btn--dark:hover {
	background: #000;
}

/* -------------------------------------------------------------------------- */
/* Motion                                                                      */
/* -------------------------------------------------------------------------- */

/*
 * The header is fixed, so an anchor jump would otherwise park its heading
 * underneath it. Every in-page target keeps the header's height clear.
 */
.frx [id] {
	scroll-margin-top: calc(110 * var(--frx-k));
}

/* An opened answer fades in rather than snapping into place. */
.frx-faq__item[open] .frx-faq__a {
	animation: frx-faq-open 260ms var(--ease, ease) both;
}

@keyframes frx-faq-open {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The pillar rows settle in one after another once the card has arrived. */
.js [data-reveal].frx-pillars .frx-pillar {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 500ms var(--ease, ease),
		transform 500ms var(--ease, ease);
}

.js [data-reveal].frx-pillars.is-visible .frx-pillar {
	opacity: 1;
	transform: none;
}

.js [data-reveal].frx-pillars.is-visible .frx-pillar:nth-child(1) { transition-delay: 120ms; }
.js [data-reveal].frx-pillars.is-visible .frx-pillar:nth-child(2) { transition-delay: 220ms; }
.js [data-reveal].frx-pillars.is-visible .frx-pillar:nth-child(3) { transition-delay: 320ms; }
.js [data-reveal].frx-pillars.is-visible .frx-pillar:nth-child(4) { transition-delay: 420ms; }

/* Links and marks answer the pointer. */
.frx-head__link,
.frx-foot__links a,
.frx-enquiry__meta a {
	transition: opacity 200ms ease, color 200ms ease;
}

.frx-terr,
.frx-territory__flag {
	transition: transform 220ms ease, background-color 220ms ease;
}

.frx-territory__flag:hover {
	background: var(--frx-purple-deep);
	transform: translateY(-2px);
}

.frx-stat__value {
	transition: transform 300ms var(--ease, ease);
}

.frx-stat:hover .frx-stat__value {
	transform: translateY(-3px);
}

/*
 * Everything above is decoration. A visitor who has asked for less motion gets
 * the page with none of it — the reveal system already respects the same
 * preference in main.css.
 */
@media (prefers-reduced-motion: reduce) {
	.frx-faq__item[open] .frx-faq__a {
		animation: none;
	}

	.js [data-reveal].frx-pillars .frx-pillar {
		opacity: 1;
		transform: none;
	}

	.frx-format:hover,
	.frx-why__card:hover,
	.frx-story:hover,
	.frx-territory__flag:hover,
	.frx-btn:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Franchise formats — the card the design asks for                            */
/* -------------------------------------------------------------------------- */

/*
 * Three cards of pure information: name, what it is, the figures, and the way
 * to enquire. The photographs are gone — side by side they made three cards of
 * different heights and pushed the figures, which are the reason anyone reads
 * this section, below the fold.
 */
.frx-formats__grid {
	align-items: stretch;
}

.frx-format {
	display: flex;
	flex-direction: column;
	padding: calc(28 * var(--frx-k));
	border: 1px solid var(--frx-purple);
	border-radius: calc(14 * var(--frx-k));
	background: #0d0d10;
}

.frx-format__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
	/*
	 * The body used to be pulled up to sit over the photograph. With no
	 * photograph it was pulling the title off the top of the card, which clips.
	 */
	margin-top: 0;
}

.frx-format__title {
	margin: 0 0 calc(16 * var(--frx-k));
	color: #fff;
	font-size: calc(30 * var(--frx-k));
	font-style: italic;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: calc(0.5 * var(--frx-k));
	text-transform: uppercase;
}

.frx-format__text {
	margin: 0 0 calc(24 * var(--frx-k));
	color: rgb(255 255 255 / 62%);
	font-size: calc(14 * var(--frx-k));
	font-weight: 500;
	line-height: 1.65;
}

/* The figures sit at the foot of the card so the three line up across the row. */
.frx-format__specs {
	margin: auto 0 calc(24 * var(--frx-k));
	padding: 0;
}

.frx-format__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(16 * var(--frx-k));
	padding: calc(12 * var(--frx-k)) 0;
	border-top: 1px solid rgb(255 255 255 / 10%);
}

.frx-format__row:first-child {
	border-top: 0;
}

.frx-format__row dt {
	color: rgb(255 255 255 / 55%);
	font-size: calc(13 * var(--frx-k));
	font-weight: 500;
}

.frx-format__row dd {
	margin: 0;
	color: #fff;
	font-size: calc(13 * var(--frx-k));
	font-weight: 600;
	text-align: right;
}

.frx-format__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: calc(14 * var(--frx-k)) calc(20 * var(--frx-k));
	border: 1px solid var(--frx-purple);
	border-radius: 1000px;
	background: transparent;
	color: #fff;
	font-size: calc(13 * var(--frx-k));
	font-weight: 600;
	letter-spacing: calc(0.6 * var(--frx-k));
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.frx-format__cta:hover {
	background: var(--frx-purple);
	border-color: var(--frx-purple);
}

/* The lead format's button is filled, as the design has it. */
.frx-format--lead .frx-format__cta {
	background: #7c5cd6;
	border-color: #7c5cd6;
}

.frx-format--lead .frx-format__cta:hover {
	background: var(--frx-purple-dark, #573da7);
	border-color: var(--frx-purple-dark, #573da7);
}

@media (max-width: 900px) {
	.frx-format__title {
		font-size: clamp(22px, 6vw, 30px);
	}
}