/*
 * Franchise Hub — loaded only on the eight Franchise pages, on top of
 * main.css. It adds; it never edits the shared sheet, so no other page
 * changes.
 *
 * It uses the approved identity: the existing tokens, Barlow, the existing
 * container, spacing, radii, controls and focus ring. Orange is kept for the
 * primary action, the kickers and the current-page marker. The legacy
 * display font, its Elementor layout and its mobile hiding are not carried
 * over.
 *
 * Nothing here hides content at any width. `text-transform` is the only way
 * uppercase is produced, and only on the strings the capture itself renders
 * uppercase (.aoh-fr-caps), the kickers, the brand, the navigation and the
 * buttons.
 */

:root {
	/* The two rows of the Franchise header, and their sum. The sum is what
	   positions the page under the fixed header, what anchored headings clear,
	   and what the hero subtracts from the viewport. assets/js/franchise.js
	   replaces it with the real rendered height; these values are the exact
	   designed heights, so there is nothing to correct and nothing to jump. */
	--aoh-fr-bar-h: 60px;
	--aoh-fr-navbar-h: 56px;
	--aoh-fr-header-h: calc(var(--aoh-fr-bar-h) + var(--aoh-fr-navbar-h) + 1px);
	--aoh-fr-read: 68ch;
}

/*
 * Surface-aware text colours.
 *
 * The Franchise Hub is part of the Abu Omar Halal website, so it uses the
 * website's own surfaces: the approved Dark (--aoh-bg-dark) and Light
 * (--aoh-bg-light) section backgrounds and the approved component scale
 * (deep / raised / card-hi), exactly as the homepage and the approved About,
 * Contact, Catering, Private Events, Careers, Locations and Deals pages do.
 * There is no separate Franchise palette and no new colour is declared here.
 *
 * Dark is therefore the default, and every block resolves its colour through
 * these four tokens. The one cream section on the landing page — the single
 * deliberate light break, the same device the Our App page uses once —
 * redeclares them for a light surface, so a card, table or list keeps its
 * contrast wherever it is placed.
 */
body.aoh-franchise {
	background: var(--aoh-bg-dark);
	color: var(--aoh-text);
	--aoh-fr-heading: var(--aoh-white);
	--aoh-fr-accent: var(--aoh-orange);
	--aoh-fr-body: rgba(247, 242, 234, .82);
	--aoh-fr-muted: rgba(247, 242, 234, .66);
}

/*
 * The one light break. Its kicker is the approved dark ink rather than
 * --aoh-orange-dark, which reaches only 3.4:1 on cream: the accent stays
 * visible as the orange rule beside it, which is a graphical object and
 * passes at that ratio. The global consumer token is not touched.
 */
body.aoh-franchise .aoh-fr-section--break {
	--aoh-fr-heading: var(--aoh-near-black);
	--aoh-fr-accent: var(--aoh-near-black);
	--aoh-fr-rule: var(--aoh-orange-dark);
	--aoh-fr-body: rgba(20, 20, 20, .78);
	--aoh-fr-muted: rgba(20, 20, 20, .68);
}

/* ---------------------------------------------------------------- Shell. */

/*
 * The complete header — both rows — is fixed to the top of the viewport, the
 * same mechanism the consumer header uses: the element leaves the flow and
 * .aoh-main is padded by exactly its height, so nothing moves when the page
 * starts scrolling. Both rows share the one .aoh-container, so the brand, the
 * back link, the navigation and the application CTA all stop at the same left
 * and right boundaries and nothing reaches the viewport edge.
 */
body.aoh-franchise .aoh-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: auto;
	color: var(--aoh-text);
	background: var(--aoh-header-bg);
	border-bottom: 1px solid var(--aoh-hairline);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

body.aoh-franchise .aoh-main {
	padding-top: var(--aoh-fr-header-h);
}

/* Anchored headings clear the complete fixed header. */
body.aoh-franchise {
	scroll-padding-top: calc(var(--aoh-fr-header-h) + 1rem);
}

body.aoh-franchise [id] {
	scroll-margin-top: calc(var(--aoh-fr-header-h) + 1rem);
}

/* The upper row reads as a slightly deeper shelf above the navigation. */
.aoh-fr-bar {
	background: rgba(0, 0, 0, .35);
	border-bottom: 1px solid var(--aoh-hairline);
}

.aoh-fr-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--aoh-fr-bar-h);
}

.aoh-fr-back {
	color: var(--aoh-text-muted);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
}

.aoh-fr-back:hover,
.aoh-fr-back:focus-visible {
	color: var(--aoh-orange);
}

/*
 * The consumer brand is an absolutely positioned lockup inside a fixed-width
 * box, because its wordmark fades in over the hero. In this two-row header the
 * name is always visible, so the lockup is returned to the flow: the emblem and
 * the name become ordinary flex children that start at the container's left
 * edge instead of being painted inside an empty, zero-height box.
 */
.aoh-fr-brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	width: auto;
	height: auto;
	text-decoration: none;
}

body.aoh-franchise .aoh-fr-brand .aoh-brand__emblem {
	position: static;
	display: block;
	width: auto;
	height: 34px;
	transform: none;
}

body.aoh-franchise .aoh-fr-brand .aoh-brand__emblem img {
	display: block;
	width: auto;
	height: 100%;
}

body.aoh-franchise .aoh-fr-brand .aoh-brand__name {
	position: static;
	left: auto;
	top: auto;
	transform: none;
	opacity: 1;
	visibility: visible;
	color: var(--aoh-orange);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: .06em;
	white-space: nowrap;
}

/* The header above is what is fixed; this row simply sits inside it. */
.aoh-fr-navbar {
	position: relative;
	z-index: 90;
	background: transparent;
}

.aoh-fr-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: var(--aoh-fr-navbar-h);
}

/* Below 1280px the navigation itself is the off-canvas panel, so margin-left
   keeps Submit Request and the menu button at the container's right boundary
   exactly as they sit beside the desktop navigation. */
.aoh-fr-navbar__actions {
	position: relative;
	z-index: 95;
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
	margin-left: auto;
}

/*
 * Submit Request stays inside the consumer header's Order Now button system —
 * the same --aoh-radius-control corner, the same orange fill, hover and focus
 * — at the size this header asks for: .90625rem type at weight 800, so the
 * label reads at a glance without the control becoming a large pill.
 *
 * The 2.75rem floor is the only place this differs from Order Now's compact
 * 2.6rem, and it is deliberate: 44px is the minimum accessible touch target,
 * so the control is allowed to be lighter but never smaller than that. The
 * padding does the work and min-height is the floor, so the button keeps real
 * air above and below it inside the 56px navigation row and never reaches the
 * header's edges.
 *
 * One treatment at every width, so the control never reads heavier on a wide
 * screen than it does on a phone.
 *
 * line-height: 1 is what centres the label. The line box then measures exactly
 * the font size instead of inheriting the body's 1.6 leading, so the flex
 * centring leaves the same distance above the label as below it.
 *
 * The white foreground is the owner's explicit instruction for this one
 * control, and it is the one thing in this header that does not reach AA:
 * white on --aoh-orange measures 2.61:1, where the near-black it replaces
 * measures 7.53:1. It is scoped to this class alone — .aoh-button--primary is
 * untouched, so every other primary button on the site, including the Submit
 * Request controls inside page content, keeps the accessible pairing.
 */
.aoh-fr-navcta {
	min-height: 2.75rem;
	padding: .6rem 1.1rem;
	justify-content: center;
	border-radius: var(--aoh-radius-control);
	color: var(--aoh-white);
	font-size: .90625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .08em;
	white-space: nowrap;
}

.aoh-fr-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aoh-fr-nav__list a {
	color: var(--aoh-text);
	text-decoration: none;
	font-weight: 600;
}

.aoh-fr-nav__list a:hover,
.aoh-fr-nav__list a:focus-visible {
	color: var(--aoh-orange);
}

/* Tablet and phone: the full-screen panel, driven by the shared
   navigation.js. Every captured label stays reachable — the legacy site hid
   this navigation entirely below the desktop breakpoint. */
@media (max-width: 1279px) {
	body.aoh-franchise .aoh-nav {
		padding-top: calc(var(--aoh-fr-header-h) + 1.5rem);
		background: var(--aoh-black);
	}

	.aoh-fr-nav__list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 3.2rem;
		font-size: clamp(1.25rem, 4.4vw, 1.75rem);
		border-bottom: 1px solid var(--aoh-hairline);
	}

	.aoh-fr-nav__item.is-current a {
		color: var(--aoh-orange);
	}

	.aoh-fr-nav__extras {
		margin-top: 1.75rem;
	}

	.aoh-fr-back--panel {
		display: inline-block;
		font-size: 1rem;
	}
}

@media (max-width: 699px) {
	/* One row still, so the fixed header stays shallow on a phone: the back
	   link wraps to the right of the lockup instead of stacking beneath it.
	   The branding grows here too, but by less than it does on a desktop —
	   a phone gives up far more of its screen to a 60px shelf. */
	body.aoh-franchise {
		--aoh-fr-bar-h: 52px;
	}

	.aoh-fr-bar__inner {
		gap: .75rem;
		padding-block: .4rem;
	}

	body.aoh-franchise .aoh-fr-brand .aoh-brand__emblem {
		height: 29px;
	}

	body.aoh-franchise .aoh-fr-brand .aoh-brand__name {
		font-size: .9375rem;
	}

	.aoh-fr-back {
		white-space: normal;
		text-align: right;
		font-size: .8125rem;
		line-height: 1.35;
	}
}

@media (min-width: 1280px) {
	.aoh-fr-back--panel {
		display: none;
	}

	/* Tighter than the 1.6vw this row used to carry, so the six labels
	   read as one balanced group near the centre of the row instead of
	   being spread towards the container's edges. The ramp is what keeps
	   1280px — the width where this navigation first appears — clear of
	   the button without taking a pixel off the type. */
	.aoh-fr-nav__list {
		display: flex;
		align-items: center;
		gap: clamp(.5rem, 3.75vw - 2.375rem, 1rem);
	}

	/* The block padding comes down by the same 1.6px the larger line box
	   gains, so the navigation row stays exactly 56px tall. */
	.aoh-fr-nav__list a {
		position: relative;
		display: inline-block;
		padding-block: 1rem;
		font-size: .875rem;
		letter-spacing: .02em;
		text-transform: uppercase;
	}

	.aoh-fr-nav__list a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: .55rem;
		height: 2px;
		background: var(--aoh-orange);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--aoh-dur) var(--aoh-ease);
	}

	.aoh-fr-nav__list a:hover::after,
	.aoh-fr-nav__list a:focus-visible::after,
	.aoh-fr-nav__item.is-current a::after {
		transform: scaleX(1);
	}

	.aoh-fr-nav__item.is-current a {
		color: var(--aoh-orange);
	}
}

/* --------------------------------------------------------- Typography. */

/*
 * The shared sheet uppercases every h1 and h2. Franchise pages carry long
 * legal, financial and process headings, which are markedly harder to read in
 * capitals, so headings here render in the capitalisation the source
 * actually authored. Where the capture itself renders a string uppercase the
 * class below reproduces that with CSS — the stored string is never re-cased.
 */
body.aoh-franchise h1,
body.aoh-franchise h2,
body.aoh-franchise h3 {
	text-transform: none;
	line-height: 1.12;
	letter-spacing: -.005em;
}

/*
 * The slight negative tracking above was set for the heavy Barlow these
 * headings used to be. The display titles are PEPPERMINT now, which needs the
 * opposite, so they take the shared positive tracking back.
 *
 * Line height too. The 1.12 above was chosen for sentence-case headings whose
 * descenders have to clear the next line, and it still governs every ordinary
 * heading on these pages — the chapter and step titles that were deliberately
 * left in Barlow. A display title is a different animal: larger, heavier and
 * rarely more than two lines, so it takes the display leading. 1.08 rather
 * than the 1.06 the consumer pages use, because these titles are sentence
 * case and do carry descenders.
 *
 * Sentence case itself is untouched; nothing here re-cases a heading.
 */
body.aoh-franchise .aoh-display-title {
	letter-spacing: .01em;
	line-height: 1.08;
}

.aoh-fr-caps {
	text-transform: uppercase;
}

/* Captured paragraphs that contain their own line breaks keep them, so what
   is on screen is character for character what was captured. */
.aoh-fr-multiline {
	white-space: pre-line;
}

.aoh-fr-kicker {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .65rem;
	color: var(--aoh-fr-accent);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.aoh-fr-kicker::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	/* The rule carries the orange on a light surface, where the accent text
	   itself has to be the darker ink to reach AA. */
	background: var(--aoh-fr-rule, currentColor);
}

.aoh-fr-head {
	margin-bottom: 1.5rem;
	max-width: var(--aoh-head-max);
}

.aoh-fr-head__title {
	margin: 0;
	font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.85rem);
}

.aoh-fr-p {
	max-width: var(--aoh-fr-read);
	color: var(--aoh-fr-body);
}

.aoh-fr-lead {
	font-size: 1.0625rem;
}

/*
 * Section rhythm.
 *
 * The Franchise Hub is predominantly dark, like the rest of the site: the
 * approved Dark and Light section backgrounds alternate behind a hairline, and
 * the interest comes from the card, image and border treatments on top of them
 * rather than from swapping the page between cream and sand. These two rules
 * are what convert the shared .aoh-section / .aoh-section--alt pair to the
 * approved surfaces inside the Franchise body only; the consumer pages keep
 * their own declarations untouched.
 */
.aoh-fr-section {
	overflow-x: clip;
}

body.aoh-franchise .aoh-fr-section {
	background: var(--aoh-bg-dark);
	color: var(--aoh-text);
	border-top: 1px solid var(--aoh-hairline);
}

body.aoh-franchise .aoh-fr-section.aoh-section--alt {
	background: var(--aoh-bg-light);
}

/*
 * The single light break, which carries the approved light-card treatment —
 * the same one the Our App page uses for its steps.
 */
body.aoh-franchise .aoh-fr-section--break {
	background: var(--aoh-cream);
	color: var(--aoh-near-black);
}

body.aoh-franchise .aoh-fr-section--break .aoh-fr-card,
body.aoh-franchise .aoh-fr-section--break .aoh-fr-terms,
body.aoh-franchise .aoh-fr-section--break .aoh-fr-resource {
	background: var(--aoh-white);
	border: 1px solid var(--aoh-line-light);
	box-shadow: var(--aoh-shadow-soft);
	color: var(--aoh-near-black);
	--aoh-fr-heading: var(--aoh-near-black);
	--aoh-fr-accent: var(--aoh-near-black);
	--aoh-fr-rule: var(--aoh-orange-dark);
	--aoh-fr-body: rgba(20, 20, 20, .78);
	--aoh-fr-muted: rgba(20, 20, 20, .68);
}

.aoh-fr-list {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	max-width: var(--aoh-fr-read);
	display: grid;
	gap: .6rem;
}

.aoh-fr-list li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--aoh-fr-body);
}

.aoh-fr-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--aoh-orange);
}

.aoh-fr-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 1.5rem 0 0;
}

/* ---------------------------------------------------------- Main hero. */

/*
 * The hero is the site's centred landing composition: one vertical axis for the
 * kicker, the heading, the description, the three statistics, the two calls to
 * action and the franchise note beneath them.
 *
 * It fills the viewport that is left below the fixed header — 100svh minus the
 * complete header height, never 100vh plus it — so the first screen is exactly
 * one screen. min-height is what does it, so a phone whose content needs more
 * room simply grows instead of clipping.
 */
.aoh-fr-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--aoh-fr-header-h));
	min-height: calc(100svh - var(--aoh-fr-header-h));
	padding-block: clamp(3rem, 7vw, 5rem);
	background: var(--aoh-black);
	overflow: hidden;
}

/* The media layer is structural: the photograph, and above it the shared
   `.aoh-video-bg` layer when an approved Vimeo hero video is configured. The
   overlay below is a pseudo-element of this layer, so it always paints over
   both of them and the copy is readable against either.

   The cover rule deliberately does not name `iframe`: object-fit does nothing
   to one, so matching it here would only stretch the player to the hero's
   exact shape. `.aoh-video-bg` crops its own frame instead. */
.aoh-fr-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.aoh-fr-hero__media picture,
.aoh-fr-hero__media img,
.aoh-fr-hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Contrast for the copy, and a stable dark hero when no image is present. */
.aoh-fr-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 95% at 50% 50%, rgba(8, 8, 8, .62) 0%, rgba(8, 8, 8, .8) 55%, rgba(8, 8, 8, .93) 100%),
		linear-gradient(180deg, rgba(8, 8, 8, .74) 0%, rgba(8, 8, 8, .42) 42%, rgba(8, 8, 8, .88) 100%);
}

/*
 * The same hero with the Vimeo film actually playing is a different problem.
 * The moving layer carries its own scrim as well, so the overlay above and
 * that scrim together leave roughly six per cent of the frame visible behind
 * the copy: the film reads as a dark texture rather than as a video.
 *
 * The playing state therefore gets its own curve rather than a uniformly
 * lighter copy of the one above. The top and the bottom stay as heavy as they
 * were, because that is where the small orange kicker and the muted legal note
 * sit and those are the two lines with the least contrast to spare; the
 * lightening is spent on the band between them, where the title, lead, stats
 * and buttons are all either large or white. Measured against the real opening
 * frame of the real video at 1440, 1024, 768 and 390: the frame behind the
 * copy is 2.1 times brighter, and every line still clears WCAG AA against the
 * brightest single pixel behind it (lowest 4.6:1, lowest mean 4.9:1).
 *
 * `.is-playing` is set by vimeo-bg.js only once the player reports it is
 * genuinely playing, so every fallback state — no video configured, player
 * still loading, autoplay refused, reduced motion — keeps the approved
 * photograph hero exactly as it was signed off, and a browser without `:has()`
 * simply keeps the approved overlay too.
 */
.aoh-fr-hero__media:has(.aoh-video-bg.is-playing)::after {
	background:
		radial-gradient(118% 80% at 50% 50%, rgba(8, 8, 8, .26) 0%, rgba(8, 8, 8, .5) 55%, rgba(8, 8, 8, .8) 100%),
		linear-gradient(180deg, rgba(8, 8, 8, .86) 0%, rgba(8, 8, 8, .62) 24%, rgba(8, 8, 8, .34) 44%, rgba(8, 8, 8, .32) 56%, rgba(8, 8, 8, .7) 74%, rgba(8, 8, 8, .88) 100%);
}

.aoh-fr-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 54rem;
	text-align: center;
}

.aoh-fr-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2.45rem, 1.4rem + 4.2vw, 4.6rem);
	color: var(--aoh-white);
	text-wrap: balance;
}

.aoh-fr-hero__lead {
	margin: 0 auto;
	max-width: 42rem;
	font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
	color: rgba(247, 242, 234, .88);
}

.aoh-fr-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.aoh-fr-hero__actions {
	justify-content: center;
}

.aoh-fr-stat {
	padding: .5rem 1rem;
	border: 1px solid var(--aoh-hairline-strong);
	border-radius: var(--aoh-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--aoh-white);
	font-size: .9375rem;
	font-weight: 700;
}

.aoh-fr-hero__note {
	margin: 1.5rem auto 0;
	max-width: 40rem;
	color: var(--aoh-text-muted);
	font-size: .8125rem;
	line-height: 1.6;
}

/* ------------------------------------------------------ Subpage heroes. */

/*
 * One contract for all seven internal Franchise heroes.
 *
 * The height is not declared here. The element also carries .aoh-pagehero,
 * so it inherits min(--aoh-pagehero-min, 78vh) — the same 24rem floor and
 * the same short-landscape cap every other internal page on the site uses.
 * Nothing about a Franchise page may override it, which is what keeps the
 * seven bands measuring identically however long a captured title is.
 *
 * The padding is deliberately smaller than the band, so a two-line title and
 * its lead still finish inside 24rem and the floor, not the copy, decides the
 * height. A hero with more copy than that would still grow rather than clip,
 * exactly as the shared system intends.
 */
.aoh-fr-pagehero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
	background: var(--aoh-near-black);
	overflow: hidden;
}

/*
 * Content is centred on both axes: .aoh-pagehero centres the block in the
 * band, this centres everything inside it. Same anatomy and the same .7rem
 * rhythm as the About, Careers, Catering, Contact, Our App, Private Events
 * and News heroes.
 */
.aoh-fr-pagehero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .7rem;
}

.aoh-fr-pagehero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.aoh-fr-pagehero__media picture,
.aoh-fr-pagehero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aoh-fr-pagehero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 8, 8, .72) 0%, rgba(8, 8, 8, .86) 100%);
}

/*
 * The main Abu Omar Halal internal-page title scale: the same family, the
 * same display weight and the same clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem) the
 * About, Careers, Catering, Contact, Our App, Private Events and News heroes
 * use. There is no separate Franchise scale and no per-page size, so a long
 * captured title wraps inside the reading width and the band does not change
 * shape around it.
 *
 * Casing is the one deliberate exception, and it is not set here: the
 * Franchise heading rule near the top of this sheet renders every h1, h2 and
 * h3 in the capitalisation the source authored. That decision was taken
 * because these pages carry long legal, financial and process headings that
 * are markedly harder to read in capitals. It applies identically to all
 * seven internal heroes and to the Hub hero, so the Franchise Hub is
 * internally consistent; it is the only respect in which these titles differ
 * from the consumer pages. Overriding it here would recase seven approved
 * headings, which is outside this pass.
 */
.aoh-fr-pagehero__title {
	margin: 0;
	max-width: 24ch;
	font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem);
	color: var(--aoh-text);
	text-wrap: balance;
}

.aoh-fr-pagehero__lead {
	margin: 0;
	max-width: 46rem;
	color: rgba(245, 239, 230, .9);
	font-size: clamp(.96rem, .93rem + .18vw, 1.04rem);
	line-height: 1.6;
}

/* ------------------------------------------------------------- Layout. */

.aoh-fr-split {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 62rem) {
	.aoh-fr-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	}

	.aoh-fr-split--reverse .aoh-fr-split__main {
		order: 2;
	}
}

/*
 * One captured CTA label — the ideal-partner link — is longer on a single
 * line than a narrow viewport can hold, and the wording is locked. Below the
 * two-column breakpoint the section buttons are therefore allowed to break,
 * so the whole label stays readable and nothing is pushed past the gutter.
 * The pill, its padding, its size and its hover treatment are untouched, and
 * the header and hero buttons are not in scope here.
 */
@media (max-width: 61.999rem) {
	.aoh-fr-section .aoh-fr-actions .aoh-button {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
}

.aoh-fr-figure {
	margin: 0;
	border-radius: var(--aoh-radius-card);
	overflow: hidden;
	background: var(--aoh-surface-raised);
}

.aoh-fr-figure img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Our Story, once the founder tells it himself.
 *
 * The player is the column. There is no figure, no card, no panel, no border
 * and no shadow around it, because the video was shot vertically and the
 * section's job is to show it: a 4:5 box around a 9:16 picture could only
 * letterbox it and shrink it to a widget, which is what the earlier card did.
 * The one box left is .aoh-video-embed's own black backdrop — the player's,
 * not decoration — and its 9:16 comes from the ratio the template passes, so
 * the picture is never cropped or stretched.
 *
 * Beside the copy it fills the 24rem aside column: 384px wide and 683px tall,
 * the scale the old Franchise page showed it at. Stacked it keeps that same
 * cap and centres, so a narrow desktop or a tablet gets a portrait video and
 * not a 1,100px-tall column, and at 390px the container's own 16px gutters
 * leave it 358px wide with no horizontal overflow.
 */
.aoh-fr-story-video {
	width: 100%;
	max-width: 24rem;
	margin-inline: auto;
}

/*
 * Side by side, the portrait video is the taller of the two columns, so the
 * copy is centred against it rather than pinned to the top: that is what stops
 * the section reading as a tall video next to a short block of text with a
 * pool of empty space underneath. Only this one section opts in.
 */
@media (min-width: 62rem) {
	.aoh-fr-split--media {
		align-items: center;
	}
}

/*
 * The partner portrait. The attachment is square, so the stacked layout uses
 * a 1:1 frame and shows the whole photograph: the subject is never cropped
 * out, never stretched and never letterboxed. The width is capped there so a
 * tablet does not get a single square taller than the text beside it.
 *
 * Side by side the frame goes back to the 3:2 the section was approved with,
 * so this column keeps exactly the height it had before the photograph was
 * changed. object-position holds the crop high enough that the face and the
 * chef whites are both fully in frame, and high enough to stay that way if a
 * future replacement image is not square.
 */
.aoh-fr-figure--portrait {
	max-width: 30rem;
	margin-inline: auto;
	border: 1px solid rgba(255, 122, 0, .32);
	box-shadow: var(--aoh-shadow-panel);
}

.aoh-fr-figure--portrait img {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	object-position: 55% 28%;
}

@media (min-width: 62rem) {
	.aoh-fr-figure--portrait {
		max-width: none;
	}

	.aoh-fr-figure--portrait img {
		aspect-ratio: 3 / 2;
	}
}

.aoh-fr-cards {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

@media (min-width: 48rem) {
	.aoh-fr-cards--2,
	.aoh-fr-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62rem) {
	.aoh-fr-cards--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.aoh-fr-cards--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.aoh-fr-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--aoh-hairline);
	border-radius: var(--aoh-radius-card);
	background: var(--aoh-surface-raised);
	overflow: hidden;
}

.aoh-fr-card__media {
	aspect-ratio: 16 / 10;
	background: var(--aoh-surface-deep);
}

.aoh-fr-card__media picture,
.aoh-fr-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aoh-fr-card__body {
	padding: 1.25rem;
}

.aoh-fr-card__title {
	margin: 0 0 .5rem;
	font-size: 1.0625rem;
}

.aoh-fr-card .aoh-fr-p,
.aoh-fr-card .aoh-fr-list {
	margin-bottom: 0;
	font-size: .9375rem;
}

/* ------------------------------------------------- Cards with an icon. */

/*
 * Two sections state a benefit per card, and a card that is only a short
 * title and a sentence reads as empty. Each one gets the theme's own inline
 * SVG for the thing it describes, in a soft orange badge: the accent is the
 * icon, not the card, so the surface stays the approved one.
 */
.aoh-fr-card--icon {
	transition:
		transform var(--aoh-dur) var(--aoh-ease),
		border-color var(--aoh-dur) var(--aoh-ease),
		background-color var(--aoh-dur) var(--aoh-ease);
}

.aoh-fr-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	margin: 1.35rem 1.25rem 0;
	border: 1px solid rgba(255, 122, 0, .3);
	border-radius: 14px;
	background: rgba(255, 122, 0, .1);
	color: var(--aoh-orange);
	transition:
		border-color var(--aoh-dur) var(--aoh-ease),
		background-color var(--aoh-dur) var(--aoh-ease);
}

.aoh-fr-card__icon .aoh-icon {
	width: 1.55rem;
	height: 1.55rem;
	vertical-align: 0;
}

.aoh-fr-card--icon .aoh-fr-card__body {
	padding-top: .9rem;
}

/*
 * The four short benefits sit on one centred axis, which is what carries a
 * four-across row. The three longer support cards keep the reading edge of
 * the rest of the page; the two compositions are deliberately not identical.
 */
.aoh-fr-cards--icon.aoh-fr-cards--4 .aoh-fr-card {
	align-items: center;
	text-align: center;
}

.aoh-fr-cards--icon.aoh-fr-cards--4 .aoh-fr-card__icon {
	border-radius: var(--aoh-pill);
	margin-inline: auto;
}

.aoh-fr-cards--icon.aoh-fr-cards--4 .aoh-fr-card__body {
	width: 100%;
}

.aoh-fr-cards--icon.aoh-fr-cards--3 .aoh-fr-card__icon {
	width: 3.25rem;
	height: 3.25rem;
}

.aoh-fr-cards--icon.aoh-fr-cards--3 .aoh-fr-card__title {
	font-size: 1.125rem;
}

/* A small lift and a brighter icon on pointer and on keyboard alike. */
.aoh-fr-card--icon:hover,
.aoh-fr-card--icon:focus-within {
	transform: translateY(-2px);
	border-color: var(--aoh-hairline-strong);
	background: var(--aoh-surface-card-hi);
}

.aoh-fr-card--icon:hover .aoh-fr-card__icon,
.aoh-fr-card--icon:focus-within .aoh-fr-card__icon {
	border-color: rgba(255, 122, 0, .55);
	background: rgba(255, 122, 0, .17);
}

/* ------------------------------------------------ The process steps. */

/*
 * Each captured step title already begins with its own number. The number is
 * simply set much larger than the name it belongs to, so four equal boxes
 * read as a sequence. --aoh-fr-orange-ink is a darker orange chosen for text
 * on the light surface: 4.77:1 on the cream section and 5.32:1 on the white
 * card, so it passes AA at any size. The lighter brand orange is never used
 * for actual words here.
 */
.aoh-fr-section--steps {
	--aoh-fr-orange-ink: #b34c00;
}

.aoh-fr-section--steps .aoh-fr-cards {
	margin-top: 2rem;
}

.aoh-fr-card--step .aoh-fr-card__body {
	padding: 1.5rem 1.4rem 1.7rem;
}

.aoh-fr-step__title {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin: 0 0 .7rem;
}

.aoh-fr-step__n {
	display: block;
	font-size: clamp(2.25rem, 1.7rem + 1.6vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--aoh-fr-orange-ink);
}

.aoh-fr-step__t {
	display: block;
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--aoh-fr-orange-ink);
}

/*
 * A desktop-only progression mark. The cards are opaque and sit above it, so
 * it is visible only in the gutters between them: it never touches a word, it
 * runs in reading order, and below 62rem — where the steps become one column —
 * it is not drawn at all.
 */
@media (min-width: 62rem) {
	.aoh-fr-section--steps .aoh-fr-cards {
		position: relative;
		isolation: isolate;
	}

	.aoh-fr-section--steps .aoh-fr-cards::before {
		content: "";
		position: absolute;
		top: 3.05rem;
		left: 6%;
		right: 6%;
		height: 2px;
		background: repeating-linear-gradient(90deg, rgba(179, 76, 0, .5) 0 9px, transparent 9px 17px);
		z-index: -1;
	}
}

/* --------------------------------------------------- Investment figures. */

.aoh-fr-terms {
	margin: 1.75rem 0 0;
	border: 1px solid var(--aoh-hairline);
	border-radius: var(--aoh-radius-card);
	overflow: hidden;
	background: var(--aoh-surface-raised);
}

.aoh-fr-terms__row {
	display: grid;
	gap: .15rem .75rem;
	padding: .9rem 1.1rem;
	border-top: 1px solid var(--aoh-hairline);
}

.aoh-fr-terms__row:first-child {
	border-top: 0;
}

@media (min-width: 48rem) {
	.aoh-fr-terms__row {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		align-items: baseline;
	}
}

.aoh-fr-terms__key {
	margin: 0;
	font-weight: 700;
	color: var(--aoh-fr-heading);
}

.aoh-fr-terms__val {
	margin: 0;
	color: var(--aoh-fr-body);
}

.aoh-fr-footnote {
	margin: 1rem 0 0;
	max-width: var(--aoh-fr-read);
	color: var(--aoh-fr-muted);
	font-size: .875rem;
	line-height: 1.6;
}

/* ---------------------------------------------------- Supporting pages. */

.aoh-fr-chapters {
	display: grid;
	gap: clamp(2rem, 5vw, 3.25rem);
}

.aoh-fr-chapter__title {
	margin: 0 0 .85rem;
	font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2rem);
}

.aoh-fr-chapter__body > :last-child {
	margin-bottom: 0;
}

/* Reading column: legal, financial and process prose. */
.aoh-fr-chapters--stack .aoh-fr-chapter {
	max-width: var(--aoh-fr-read);
}

/* Heading beside its prose from the wide breakpoint. */
@media (min-width: 62rem) {
	.aoh-fr-chapters--split .aoh-fr-chapter {
		display: grid;
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
		gap: 2.5rem;
		align-items: start;
	}

	.aoh-fr-chapters--split .aoh-fr-chapter__head {
		position: sticky;
		top: calc(var(--aoh-fr-header-h) + 1.5rem);
	}
}

/*
 * Each chapter on its own surface.
 *
 * One card treatment, two names. --panels is Models & Formats and Who We're
 * Looking For, whose chapters are short and already fill their card; --cards
 * is the financial overview, which is long prose and lists and needs the one
 * thing the others do not: a wider reading measure inside the same card, set
 * just below. Sharing the declarations here is what keeps the surface, the
 * border, the radius, the padding and the spacing identical across all three,
 * so the financial page reads as the same component and not a copy of it.
 */
.aoh-fr-chapters--panels .aoh-fr-chapter,
.aoh-fr-chapters--cards .aoh-fr-chapter {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--aoh-hairline);
	border-radius: var(--aoh-radius-panel);
	background: var(--aoh-surface-raised);
}

.aoh-fr-chapters--panels .aoh-fr-chapter:nth-child(even),
.aoh-fr-chapters--cards .aoh-fr-chapter:nth-child(even) {
	background: var(--aoh-surface-deep);
}

/*
 * The card is as wide as the page's content; the sentences inside it are not.
 *
 * A financial page is paragraphs, bullet lists and disclaimers rather than
 * short blocks beside each other, so a card that let every line run the full
 * 1,240px would be harder to read than the narrow column it replaced. 48rem
 * is the measure the copy is set to instead: wide enough that the card no
 * longer looks like it is holding a thin strip of text with a pool of empty
 * surface beside it, and still short enough to read a disclaimer in. It is
 * declared as the shared reading token so the paragraphs, the lists and the
 * footnotes all pick it up, and only within this variant, which leaves the
 * other franchise pages on their 68ch column untouched.
 */
.aoh-fr-chapters--cards {
	--aoh-fr-read: 48rem;
}

/* A rail down the process steps. The intro chapter stays off the rail. */
.aoh-fr-chapters--timeline .aoh-fr-chapter {
	position: relative;
	padding-left: 2.25rem;
}

.aoh-fr-chapters--timeline .aoh-fr-chapter::before {
	content: "";
	position: absolute;
	left: .4rem;
	top: .45em;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--aoh-orange);
}

.aoh-fr-chapters--timeline .aoh-fr-chapter::after {
	content: "";
	position: absolute;
	left: calc(.4rem + .3rem);
	top: 1.4em;
	bottom: calc(clamp(2rem, 5vw, 3.25rem) * -1);
	width: 1px;
	background: var(--aoh-hairline-strong);
}

.aoh-fr-chapters--timeline .aoh-fr-chapter:last-child::after,
.aoh-fr-chapters--timeline .aoh-fr-chapter--intro::after {
	display: none;
}

.aoh-fr-chapters--timeline .aoh-fr-chapter--intro {
	padding-left: 0;
}

.aoh-fr-chapters--timeline .aoh-fr-chapter--intro::before {
	display: none;
}

/* ------------------------------------------- Resources and FAQ together. */

/*
 * One section, one background: the brochure on the left and the questions on
 * the right above 62rem, the brochure first and the questions beneath it
 * below that. The download column is a raised panel with an orange edge so it
 * holds its own beside five questions instead of reading as leftover space.
 */
.aoh-fr-kb {
	display: grid;
	gap: clamp(2rem, 5vw, 2.75rem);
	align-items: start;
}

@media (min-width: 62rem) {
	.aoh-fr-kb {
		grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
		gap: clamp(2.5rem, 5vw, 4rem);
	}
}

.aoh-fr-kb__downloads {
	position: relative;
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--aoh-hairline);
	border-radius: var(--aoh-radius-card);
	background: var(--aoh-surface-raised);
	overflow: hidden;
}

.aoh-fr-kb__downloads::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--aoh-orange);
}

.aoh-fr-kb__faq {
	min-width: 0;
}

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

.aoh-fr-faqwrap {
	max-width: 52rem;
}

.aoh-fr-faqs {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--aoh-hairline);
}

.aoh-fr-faq {
	border-bottom: 1px solid var(--aoh-hairline);
}

/* The question wrapper is a heading for structure only; it carries no size. */
.aoh-fr-faq__h {
	margin: 0;
	font-size: 1rem;
	font-weight: inherit;
	line-height: inherit;
}

.aoh-fr-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 1rem .25rem;
	border: 0;
	border-radius: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--aoh-fr-heading);
	text-align: left;
	cursor: pointer;
}

.aoh-fr-faq__mark {
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border-right: 2px solid var(--aoh-orange);
	border-bottom: 2px solid var(--aoh-orange);
	transform: rotate(45deg);
	transition: transform var(--aoh-dur) var(--aoh-ease);
}

.aoh-fr-faq__q[aria-expanded="true"] .aoh-fr-faq__mark {
	transform: rotate(-135deg);
}

.aoh-fr-faq__q:focus-visible {
	outline: var(--aoh-focus);
	outline-offset: 2px;
}

.aoh-fr-faq__a {
	padding: 0 .25rem 1.1rem;
}

.aoh-fr-faq__a:not([hidden]) {
	animation: aoh-fr-faq-in var(--aoh-dur) var(--aoh-ease) both;
}

@keyframes aoh-fr-faq-in {
	from {
		opacity: 0;
		transform: translateY(-.25rem);
	}

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

.aoh-fr-faq__a p {
	margin: 0;
	max-width: var(--aoh-fr-read);
	color: var(--aoh-fr-body);
}

/* ----------------------------------------------------- Closing CTA. */

/*
 * The base rule is the fallback the section falls back to if the bundled
 * photograph is ever unavailable. In practice every Franchise page renders
 * the .has-media treatment below, which is the approved landing-page design
 * and the only one any visitor sees. Type, spacing, the button and the
 * centred composition are declared once here and inherited by it, so there
 * is a single implementation rather than one per page.
 */
.aoh-fr-cta {
	padding-block: clamp(3rem, 7vw, 5rem);
	background: linear-gradient(135deg, var(--aoh-charcoal) 0%, var(--aoh-black) 100%);
	border-top: 1px solid var(--aoh-hairline);
}

.aoh-fr-cta__inner {
	text-align: center;
}

.aoh-fr-cta__title {
	margin: 0 0 .65rem;
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
}

.aoh-fr-cta__lead {
	margin: 0 auto;
	max-width: 42rem;
	color: var(--aoh-fr-body);
}

.aoh-fr-cta__actions {
	justify-content: center;
}

/*
 * The approved closing band, now on every Franchise page: the invitation
 * runs full width over an Abu Omar Halal photograph under a dark overlay, so
 * it breaks the run of dark sections instead of repeating them.
 *
 * The overlay, not the image, is what keeps the text readable — it is opaque
 * enough at the centre, where the copy sits, that contrast does not depend on
 * which part of the photograph happens to be in frame at a given width.
 *
 * There is no fixed height. The band is sized by its own padding and its
 * content, and the photograph is an ordinary responsive <picture> stretched
 * to fill it with object-fit: cover, so it is cropped rather than scaled and
 * it cannot clip the copy or force overflow on a small screen.
 */
.aoh-fr-cta.has-media {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 9vw, 6.5rem);
	background: var(--aoh-black);
	border-bottom: 1px solid var(--aoh-hairline);
	overflow: hidden;
}

.aoh-fr-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/*
 * object-fit: cover with the default centred object-position is the crop the
 * landing page was approved with, and it is left exactly as it is: the
 * photograph is a wide plate of food whose subject sits centre-frame, so the
 * narrower the band gets the more the crop closes in on it rather than
 * drifting off it. The copy sits over the middle of the overlay, which is
 * opaque enough there that legibility does not depend on the crop.
 */
.aoh-fr-cta__media picture,
.aoh-fr-cta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aoh-fr-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(110% 90% at 50% 50%, rgba(8, 8, 8, .62) 0%, rgba(8, 8, 8, .8) 60%, rgba(8, 8, 8, .9) 100%),
		linear-gradient(180deg, rgba(8, 8, 8, .7) 0%, rgba(8, 8, 8, .5) 45%, rgba(8, 8, 8, .82) 100%);
}

.aoh-fr-cta.has-media .aoh-fr-cta__title {
	color: var(--aoh-white);
}

.aoh-fr-cta.has-media .aoh-fr-cta__lead {
	color: rgba(247, 242, 234, .92);
}

/* ------------------------------------------------------- Application. */

.aoh-fr-applywrap {
	max-width: 54rem;
}

.aoh-fr-applyback {
	justify-content: flex-start;
}

/*
 * The application controls are dark — the same treatment the contact form
 * uses — so they need the dark raised panel under them. Without it the
 * cream labels, the consent sentence and the hint would sit on the cream
 * section and be unreadable.
 */
.aoh-fr-applypanel {
	color-scheme: dark;
	margin-bottom: 1.75rem;
	padding: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
	background: var(--aoh-surface-raised);
	border: 1px solid var(--aoh-hairline-strong);
	border-radius: var(--aoh-radius-panel);
	box-shadow: var(--aoh-shadow-panel);
}

/*
 * The application form is the shared inquiry component; nothing here
 * changes its markup. It is laid out as a two-column grid, and the hidden
 * inputs the plugin prints must not take grid cells.
 *
 * The captured labels are authored in title case and were presented in
 * uppercase. The stored strings stay exactly as authored and the uppercase
 * presentation is reproduced here, in CSS, the way COPY-LOCK.md requires.
 * The consent sentence is a paragraph, so it keeps its authored case.
 */
.aoh-fr-applysection .aoh-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.05rem 1rem;
	max-width: none;
}

.aoh-fr-applysection .aoh-form > * {
	grid-column: 1 / -1;
}

.aoh-fr-applysection .aoh-form > input[type="hidden"] {
	display: none;
}

.aoh-fr-applysection .aoh-field {
	margin-bottom: 0;
	min-width: 0;
}

@media (min-width: 560px) {
	.aoh-fr-applysection .aoh-field--half {
		grid-column: span 1;
	}
}

.aoh-fr-applysection .aoh-field label,
.aoh-fr-applysection .aoh-field__group-label {
	display: block;
	margin: 0 0 .45rem;
	font-size: clamp(.85rem, .82rem + .14vw, .92rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(214, 208, 199, .95);
}

.aoh-fr-applysection .aoh-required {
	color: var(--aoh-orange);
}

.aoh-fr-applysection .aoh-field__consent label {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin: 0;
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(247, 242, 234, .86);
}

.aoh-fr-applysection .aoh-field__note {
	letter-spacing: .07em;
	font-weight: 600;
	color: var(--aoh-text-muted);
}

.aoh-fr-applysection .aoh-form__hint {
	color: var(--aoh-text-muted);
	font-size: .86rem;
}

.aoh-fr-applysection .aoh-form input[type="text"],
.aoh-fr-applysection .aoh-form input[type="email"],
.aoh-fr-applysection .aoh-form input[type="tel"],
.aoh-fr-applysection .aoh-form select {
	width: 100%;
	min-height: 3.1rem;
	padding: .8rem .95rem;
	background: var(--aoh-surface-deep);
	color: var(--aoh-text);
	border: 1px solid var(--aoh-hairline-strong);
	border-radius: var(--aoh-radius-control);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--aoh-transition), box-shadow var(--aoh-transition);
}

.aoh-fr-applysection .aoh-form ::placeholder {
	color: var(--aoh-text-muted);
	opacity: 1;
}

.aoh-fr-applysection .aoh-form option {
	font-weight: 400;
	color: var(--aoh-text);
	background: var(--aoh-surface-deep);
}

.aoh-fr-applysection .aoh-form input:focus-visible,
.aoh-fr-applysection .aoh-form select:focus-visible {
	outline: none;
	border-color: var(--aoh-orange);
	box-shadow: 0 0 0 3px rgba(255, 122, 0, .28);
}

.aoh-fr-applysection .aoh-form .aoh-button {
	justify-self: start;
	margin-top: .35rem;
}
/* ------------------------------------------------- Legal disclaimer. */

/*
 * One shared component, on every Franchise page, immediately above the
 * global footer. It is plain, always-visible text at every width: never
 * shortened, never collapsed into a disclosure, and never hidden by a
 * responsive rule.
 */
/*
 * A full-bleed brand-orange note, the width of the viewport, immediately
 * above the global footer on every Franchise route. Near-black on the brand
 * orange is 7.05:1, so the legal text passes AA comfortably at this size.
 *
 * It is a band, not a card, and it is deliberately wide: the sentence is
 * allowed to spread across the full approved container rather than being
 * held to a book measure, which is what turned it into a tall narrow
 * six-line column. The paragraph sets no measure of its own — the shared
 * .aoh-container governs it at min(100% - 2 * --aoh-gutter, --aoh-max),
 * i.e. 1240px with safe gutters on either side — so at a 1440px desktop the
 * complete 658-character disclaimer lands in four lines.
 *
 * The type steps down to 15px with a comfortable 1.65 line height, and the
 * band keeps roughly 54px of air above and below on desktop instead of the
 * previous excess. There is no fixed height anywhere: the band is sized by
 * its own padding and the number of lines the text actually takes, so on a
 * tablet or a phone it simply grows and the wording wraps naturally. Nothing
 * is clamped, truncated, collapsed into a disclosure or hidden at any width,
 * and not one word was titled, shortened or added.
 */
.aoh-fr-disclaimer {
	display: block;
	padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
	background: var(--aoh-orange);
	color: var(--aoh-near-black);
}

.aoh-fr-disclaimer__text {
	margin: 0;
	color: var(--aoh-near-black);
	font-size: .9375rem;
	line-height: 1.65;
	text-align: center;
	text-wrap: pretty;
}

/* --------------------------------------------------------- Resources. */

.aoh-fr-resource {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--aoh-hairline);
	border-radius: var(--aoh-radius-card);
	background: var(--aoh-surface-raised);
}

/* Inside the download panel the control needs no second surface. */
.aoh-fr-kb__downloads .aoh-fr-resource {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	margin-top: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.aoh-fr-resource__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid rgba(255, 122, 0, .3);
	border-radius: 14px;
	background: rgba(255, 122, 0, .1);
	color: var(--aoh-orange);
}

.aoh-fr-resource__icon .aoh-icon {
	width: 1.65rem;
	height: 1.65rem;
	vertical-align: 0;
}

/*
 * The brochure control while no approved public PDF has been selected. It is
 * a real disabled button in the place the capture puts it, carrying its exact
 * captured label: present, plainly not available, and leading nowhere.
 */
body.aoh-franchise .aoh-button[disabled],
body.aoh-franchise .aoh-button.is-inactive {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
}

body.aoh-franchise .aoh-button[disabled]:hover,
body.aoh-franchise .aoh-button.is-inactive:hover {
	transform: none;
	filter: none;
}

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

@media (prefers-reduced-motion: reduce) {
	.aoh-fr-nav__list a::after,
	.aoh-fr-faq__mark,
	.aoh-fr-card--icon,
	.aoh-fr-card__icon {
		transition: none;
	}

	/* The lift and the panel reveal are decoration; the states they signal
	   are still shown by colour alone. */
	.aoh-fr-card--icon:hover,
	.aoh-fr-card--icon:focus-within {
		transform: none;
	}

	.aoh-fr-faq__a:not([hidden]) {
		animation: none;
	}
}