/* ==========================================================================
   Abu Omar Halal theme — main stylesheet (Phase 4A).
   Sources of truth: docs/design-system/AOH-VISUAL-SYSTEM.md (internal pages)
   and docs/design-system/HOMEPAGE-APPROVED-BLUEPRINT.md (homepage, header,
   footer, floating CTA: dark Deep/Raised surfaces, no cream).
   Warm cinematic dark media surfaces, cream editorial surfaces, charcoal
   functional surfaces; orange as a controlled accent; Barlow 700 grotesk
   headings with Anton reserved for heritage moments. Mobile-first, no
   external assets, no libraries.
   ========================================================================== */

/* ---- Self-hosted fonts (no runtime requests to third parties) ---- */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/barlow-800.woff2") format("woff2"); }
@font-face { font-family: "PEPPERMINT"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/peppermint-400.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root {
	--aoh-black: var(--wp--preset--color--black, #0b0b0b);
	--aoh-near-black: var(--wp--preset--color--near-black, #141414);
	--aoh-charcoal: var(--wp--preset--color--charcoal, #1f1f1f);
	--aoh-graphite: var(--wp--preset--color--graphite, #2e2e2e);
	--aoh-orange: var(--wp--preset--color--orange, #ff7a00);
	--aoh-orange-dark: var(--wp--preset--color--orange-dark, #d95d00);
	--aoh-off-white: var(--wp--preset--color--off-white, #f7f2ea);
	--aoh-light-grey: var(--wp--preset--color--light-grey, #e9e0d1);
	--aoh-mid-grey: var(--wp--preset--color--mid-grey, #6f6a63);
	--aoh-white: var(--wp--preset--color--white, #fff);
	/* Reserved: only for a verified Halal statement supplied by the owner. */
	--aoh-halal-green: #2fa866;
	/* Semantic aliases */
	--aoh-ink: var(--aoh-black);
	--aoh-cream: var(--aoh-off-white);
	--aoh-sand: var(--aoh-light-grey);
	--aoh-stone: var(--aoh-mid-grey);
	--aoh-line-dark: rgba(255, 255, 255, 0.12);
	--aoh-line-light: rgba(11, 11, 11, 0.12);
	--aoh-orange-glow: rgba(255, 122, 0, 0.35);
	--aoh-warm-wash:
		radial-gradient(60% 50% at 70% 60%, rgba(255, 122, 0, 0.22), transparent 70%),
		linear-gradient(180deg, rgba(11, 11, 11, 0.55) 0%, rgba(11, 11, 11, 0.35) 45%, rgba(11, 11, 11, 0.85) 100%);

	--aoh-font-body: var(--wp--preset--font-family--body, "Barlow", system-ui, sans-serif);
	--aoh-font-display: var(--wp--preset--font-family--display, "Anton", "Arial Narrow", Impact, sans-serif);
	/* The display face, for major titles only; see "Display titles" below. */
	--aoh-font-title: "PEPPERMINT", var(--aoh-font-body);

	--aoh-max: 1240px;
	--aoh-gutter: clamp(1rem, 4vw, 2.5rem);
	--aoh-head-max: 44rem;
	--aoh-header-h: 72px;        /* compact / solid header */
	--aoh-header-h-open: 150px;  /* overlay header over the homepage hero */
	--aoh-menu-nav-h: 64px;      /* sticky category navigation */
	--aoh-admin-bar-h: 0px;      /* WordPress admin bar, logged in only */
	--aoh-radius: 6px;
	--aoh-radius-lg: 18px;
	--aoh-pill: 999px;
	--aoh-focus: 3px solid var(--aoh-orange);
	--aoh-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--aoh-dur-fast: 160ms;
	--aoh-dur: 220ms;
	--aoh-dur-slow: 640ms;
	--aoh-transition: var(--aoh-dur) var(--aoh-ease);
	--aoh-shadow-soft: 0 10px 30px rgba(11, 11, 11, 0.12);
	--aoh-section-pad: clamp(4rem, 8vw, 7rem);
	--aoh-section-pad-compact: clamp(2.25rem, 4vw, 3.5rem);
}
@media (max-width: 1099px) {
	:root { --aoh-header-h: 64px; --aoh-header-h-open: 96px; --aoh-menu-nav-h: 60px; }
}
/* The WordPress admin bar occupies the top of the viewport for a logged-in
   visitor, and the site header is fixed, so without this the header slides
   underneath it and everything measured from the header — the sticky category
   navigator, the sticky locations map, every anchor offset — is wrong by the
   same amount. The class is on <html> and only for a logged-in visitor: the
   public page keeps 0px and is untouched.

   These are Core's own two heights. Below 601px Core makes #wpadminbar
   absolute so it scrolls away with the page, and the header should sit at the
   very top once it has; 0px is that resting state. assets/js/admin-bar.js
   replaces all three with the height actually on screen, which is what covers
   the first screenful on a phone and anything Core changes later. */
.aoh-admin-bar { --aoh-admin-bar-h: 32px; }
@media (max-width: 782px) { .aoh-admin-bar { --aoh-admin-bar-h: 46px; } }
@media (max-width: 600px) { .aoh-admin-bar { --aoh-admin-bar-h: 0px; } }
@media (prefers-reduced-motion: reduce) {
	:root { --aoh-transition: 0ms; --aoh-dur: 0ms; --aoh-dur-fast: 0ms; --aoh-dur-slow: 0ms; }
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	html { scroll-behavior: auto; }
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--aoh-admin-bar-h) + var(--aoh-header-h) + 1rem); scroll-behavior: smooth; }
html.aoh-scroll-locked, html.aoh-scroll-locked body { overflow: hidden; }
body {
	margin: 0;
	font-family: var(--aoh-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--aoh-near-black);
	background: var(--aoh-cream);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4 { font-family: var(--aoh-font-body); font-weight: 700; margin: 0 0 0.5em; text-wrap: balance; }
h1, h2 { text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.9rem, 1.4rem + 6.4vw, 7rem); }
h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
h3 { font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.005em; }
h4 { font-size: 1.1rem; line-height: 1.2; }
p { margin: 0 0 1em; }
a { color: var(--aoh-orange-dark); text-underline-offset: 0.15em; }
a:hover { color: var(--aoh-near-black); }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; }
:focus-visible { outline: var(--aoh-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	clip: auto; clip-path: none; width: auto; height: auto; margin: 0;
	padding: 0.75rem 1rem; background: var(--aoh-white); color: var(--aoh-near-black);
	left: 0.5rem; top: 0.5rem; z-index: 1000; text-decoration: none;
}
.aoh-skip-link {
	position: fixed; left: -999px; top: 0.75rem; z-index: 1000;
	padding: 0.85rem 1.25rem; background: var(--aoh-orange); color: var(--aoh-black);
	font-weight: 700; text-decoration: none; border-radius: var(--aoh-pill);
}
.aoh-skip-link:focus { left: 0.75rem; }
.aoh-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -0.3em; }

/* ---- Layout ---- */
.aoh-container { width: min(100% - 2 * var(--aoh-gutter), var(--aoh-max)); margin-inline: auto; }
.aoh-main { padding-top: var(--aoh-header-h); }
body.aoh-overlay-header .aoh-main { padding-top: 0; }
.aoh-section { padding-block: var(--aoh-section-pad); position: relative; }
.aoh-section--compact { padding-block: var(--aoh-section-pad-compact); }
.aoh-section--alt { background: var(--aoh-sand); }
.aoh-section--cream { background: var(--aoh-cream); color: var(--aoh-near-black); }
.aoh-section--ink, .aoh-section--dark { background: var(--aoh-ink); color: var(--aoh-off-white); }
.aoh-section--dark { background: var(--aoh-near-black); }
.aoh-section--charcoal { background: var(--aoh-charcoal); color: var(--aoh-off-white); }
.aoh-section--graphite { background: var(--aoh-graphite); color: var(--aoh-off-white); }
.aoh-section--media { background: var(--aoh-ink); color: var(--aoh-off-white); overflow: hidden; }
.aoh-section--ink a, .aoh-section--dark a, .aoh-section--charcoal a, .aoh-section--graphite a, .aoh-section--media a { color: var(--aoh-orange); }
.aoh-section--ink p, .aoh-section--dark p, .aoh-section--charcoal p, .aoh-section--graphite p, .aoh-section--media p { color: rgba(247, 242, 234, 0.82); }
.aoh-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.aoh-section__head > div { max-width: var(--aoh-head-max); }
.aoh-section__head h2 { margin: 0; }
.aoh-section__head .aoh-lead { margin: 0.9rem 0 0; }
.aoh-section__head--center { justify-content: center; text-align: center; }
.aoh-section__head--center .aoh-kicker { justify-content: center; }
.aoh-section__head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem 2rem; }
.aoh-section__head--row .aoh-heading { margin-bottom: 0; }
.aoh-app__more { margin: 1.25rem 0 0; }
.aoh-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .aoh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .aoh-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .aoh-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.aoh-prose { max-width: 720px; }
.aoh-prose img { border-radius: var(--aoh-radius); }
.aoh-two-col { display: grid; gap: 2rem; }
@media (min-width: 800px) { .aoh-two-col { grid-template-columns: 1fr 1fr; } }

/* Section-head anatomy: eyebrow → heading → lead → actions */
.aoh-kicker {
	display: inline-flex; align-items: center; gap: 0.65rem; margin: 0 0 0.9rem;
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aoh-orange);
}
.aoh-kicker::before { content: ""; width: 2.25rem; height: 2px; background: currentColor; border-radius: 2px; flex: 0 0 auto; }
.aoh-kicker--plain::before { display: none; }
.aoh-section--cream .aoh-kicker, .aoh-section--alt .aoh-kicker { color: var(--aoh-orange-dark); }
.aoh-heading { font-family: var(--aoh-font-body); font-weight: 700; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; margin: 0 0 1rem; text-wrap: balance; }
.aoh-heading--xl { font-size: clamp(2.9rem, 1.4rem + 6.4vw, 7rem); }
.aoh-heading--lg { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.aoh-heading--md { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); }
.aoh-heading em, .aoh-display--heritage em { font-style: normal; color: var(--aoh-orange); }
.aoh-display--heritage { font-family: var(--aoh-font-display); font-weight: 400; letter-spacing: 0.01em; line-height: 0.98; }

/* Display titles — the PEPPERMINT face.
   PEPPERMINT is the display face of the Abu Omar Halal brand — the same face
   the existing official site sets its headings in — and it carries major
   titles only: the homepage hero, every internal-page hero H1, the titles
   that introduce a full page section, the large closing CTA headings, and the
   article headline (which reads the same --aoh-font-title token from its own
   rules further down). Everything else stays Barlow — navigation, buttons,
   body copy, card and item titles, product, menu-item and location names,
   coupon codes, form text, metadata, dates and kickers.

   Two hooks, deliberately no more. `.aoh-title` is the project's existing
   section-title token and already marks exactly the headings that introduce a
   section, so it takes the face as it stands. `.aoh-display-title` is the
   hook for the page-level titles that have their own class, and is what a
   future page adds to its main title; nothing else is needed. Never widen
   this to bare h1/h2/h3: a title earns PEPPERMINT by introducing a page or a
   full section, not by its heading level.

   Weight. PEPPERMINT ships one authentic face, Regular 400, and 400 is what
   these rules ask for. Nothing fakes a heavier one: no weight above 400, no
   synthesis, no text-shadow, no stroke, no layered duplicate text. The face
   is drawn heavy — its stems are far thicker than the face it replaces at
   the same size — so the synthetic 600 the previous face needed is gone, and
   font-synthesis-weight is pinned to none so no stylesheet or browser
   default can quietly embolden a title back.

   Two levels. `.aoh-display-title` is level A, the page's own title, and is
   the largest and tightest; `.aoh-title` is level B, the titles that open a
   section, and stays deliberately smaller with a little more air between its
   lines, because a section title is usually a sentence and runs to three
   lines where a hero title runs to two. Each component keeps its own
   font-size, which is why the size below is only the floor a title falls
   back to when it has no rule of its own. */
.aoh-display-title,
.aoh-title {
	font-family: var(--aoh-font-title);
	font-weight: 400;
	font-synthesis-weight: none;
	letter-spacing: 0.01em;
}
/* Level A. The size is the shared internal-hero scale and is overridden by
   every component that states its own, further down this sheet. */
.aoh-display-title {
	font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem);
	line-height: 1.06;
}
/* Level B. */
.aoh-title { line-height: 1.14; }
/* The hero's accent line is a change of colour, not of weight: it inherits
   the title's own weight so the orange line never reads lighter than the
   white line above it. */
.aoh-display-title .aoh-hero__line--accent { font-weight: inherit; }
.aoh-lead { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); line-height: 1.55; max-width: 40ch; }
.aoh-on-dark { color: var(--aoh-off-white); }
.aoh-on-dark .aoh-lead, .aoh-on-dark p { color: rgba(247, 242, 234, 0.82); }
.aoh-rule { display: block; width: 2.25rem; height: 2px; background: var(--aoh-orange); border-radius: 2px; }
.aoh-label {
	display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 0.4rem 0.7rem; border-radius: var(--aoh-radius); background: rgba(11, 11, 11, 0.86); color: var(--aoh-off-white);
}
.aoh-label::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--aoh-orange); }
.aoh-flag { display: inline-block; margin-left: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aoh-orange); vertical-align: 0.2em; white-space: nowrap; }
.aoh-section--cream .aoh-flag, .aoh-section--alt .aoh-flag { color: var(--aoh-orange-dark); }
.aoh-flag + .aoh-flag { margin-left: 0.35rem; }

/* Warm cinematic wash + grain, used over hero / menu hero / catering photography */
.aoh-wash { position: absolute; inset: 0; pointer-events: none; background: var(--aoh-warm-wash); }
.aoh-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
	background: repeating-radial-gradient(circle at 17% 31%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 63% 71%, rgba(0, 0, 0, 0.6) 0 1px, transparent 1px 4px); }

/* Reveals (JS present only; nothing hidden without it) */
.aoh-js [data-aoh-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--aoh-dur-slow) var(--aoh-ease), transform var(--aoh-dur-slow) var(--aoh-ease); }
.aoh-js [data-aoh-reveal="2"] { transition-delay: 90ms; }
.aoh-js [data-aoh-reveal="3"] { transition-delay: 180ms; }
.aoh-js [data-aoh-reveal="4"] { transition-delay: 270ms; }
.aoh-js [data-aoh-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aoh-js [data-aoh-reveal] { opacity: 1; transform: none; } }

/* ---- Buttons ---- */
.aoh-button {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
	padding: 0.9rem 1.6rem; border-radius: var(--aoh-pill); min-height: 3rem;
	font-family: var(--aoh-font-body); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1;
	text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
	transition: background-color var(--aoh-transition), color var(--aoh-transition), border-color var(--aoh-transition), transform var(--aoh-dur-fast) var(--aoh-ease), box-shadow var(--aoh-transition);
}
.aoh-button:active { transform: scale(0.985); }
.aoh-button .aoh-icon { width: 1.1em; height: 1.1em; transition: transform var(--aoh-transition); }
.aoh-button:hover .aoh-icon--arrow-right { transform: translateX(3px); }
.aoh-button--primary { background: var(--aoh-orange); color: var(--aoh-black); border-color: var(--aoh-orange); }
.aoh-button--primary:hover { background: var(--aoh-orange-dark); border-color: var(--aoh-orange-dark); color: var(--aoh-white); transform: translateY(-1px); box-shadow: 0 10px 24px var(--aoh-orange-glow); }
.aoh-button--secondary { background: transparent; color: inherit; border-color: currentColor; }
.aoh-button--secondary:hover { background: var(--aoh-near-black); color: var(--aoh-white); border-color: var(--aoh-near-black); transform: translateY(-1px); }
.aoh-section--ink .aoh-button--secondary:hover, .aoh-section--dark .aoh-button--secondary:hover, .aoh-section--charcoal .aoh-button--secondary:hover, .aoh-section--graphite .aoh-button--secondary:hover, .aoh-section--media .aoh-button--secondary:hover, .aoh-hero .aoh-button--secondary:hover, .aoh-on-dark .aoh-button--secondary:hover, .aoh-header .aoh-button--secondary:hover { background: var(--aoh-off-white); color: var(--aoh-black); border-color: var(--aoh-off-white); }
.aoh-button--ghost { background: transparent; color: inherit; border-color: transparent; padding-inline: 0.6rem; text-decoration: none; }
.aoh-button--ghost:hover { color: var(--aoh-orange); }
.aoh-button--ghost span { border-bottom: 2px solid transparent; transition: border-color var(--aoh-transition); }
.aoh-button--ghost:hover span { border-color: currentColor; }
.aoh-button--small { padding: 0.6rem 1.1rem; min-height: 2.4rem; font-size: 0.76rem; }
.aoh-button--large { padding: 1.1rem 2.1rem; min-height: 3.5rem; font-size: 0.92rem; }
.aoh-button--block { width: 100%; }
.aoh-actions { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; }
.aoh-text-link {
	display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: inherit; text-decoration: none; border-bottom: 2px solid var(--aoh-orange); padding-bottom: 0.15rem;
	transition: color var(--aoh-transition), border-color var(--aoh-transition);
}
.aoh-text-link:hover { color: var(--aoh-orange); }
.aoh-text-link .aoh-icon { width: 1em; height: 1em; transition: transform var(--aoh-transition); }
.aoh-text-link:hover .aoh-icon { transform: translateX(3px); }

/* Store badges: white pills grouped as one secondary action */
.aoh-store-group { display: inline-flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.aoh-store {
	display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem 0.5rem 0.8rem; min-height: 3rem;
	background: var(--aoh-white); color: var(--aoh-black); border: 1.5px solid var(--aoh-white); border-radius: var(--aoh-pill);
	text-decoration: none; line-height: 1.05; transition: transform var(--aoh-dur-fast) var(--aoh-ease), box-shadow var(--aoh-transition), border-color var(--aoh-transition);
}
.aoh-store:hover { transform: translateY(-1px); box-shadow: var(--aoh-shadow-soft); border-color: var(--aoh-orange); color: var(--aoh-black); }
.aoh-store .aoh-icon { width: 1.5rem; height: 1.5rem; }
.aoh-store__text { display: flex; flex-direction: column; gap: 0.1rem; }
.aoh-store__small { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aoh-stone); }
.aoh-store__name { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.aoh-store--dark { background: var(--aoh-near-black); color: var(--aoh-off-white); border-color: var(--aoh-line-dark); }
.aoh-store--dark:hover { color: var(--aoh-off-white); }

/* ---- Text logo fallback (internal/editor contexts) ---- */
.aoh-logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.aoh-logo__image { width: auto; }
.aoh-logo--stacked .aoh-logo__image { max-height: 160px; }
.aoh-logo__text { font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; text-transform: uppercase; }

/* ---- Tabs (panels) ---- */
.aoh-tabs__panel { display: none; }
.aoh-tabs__panel.is-active { display: block; animation: aoh-panel-in var(--aoh-dur) var(--aoh-ease); }
.aoh-tabs__panel.is-leaving { animation: aoh-panel-out 120ms var(--aoh-ease) forwards; }
@keyframes aoh-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aoh-panel-out { to { opacity: 0; } }

/* ---- Deals strip (cream, compact) ---- */
.aoh-deal-strip__head { margin-bottom: 1.5rem; }
.aoh-deal-strip__row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.aoh-deal-strip__card { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.25rem 1.3rem 1.3rem; background: var(--aoh-white); border: 1px solid var(--aoh-line-light); border-radius: var(--aoh-radius-lg); min-height: 100%; }
.aoh-deal-strip__eyebrow { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aoh-orange-dark); }
.aoh-deal-strip__title { margin: 0; font-size: 1.2rem; text-transform: none; }
.aoh-deal-strip__text { margin: 0; font-size: 0.92rem; color: var(--aoh-graphite); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aoh-deal-strip__meta { margin: 0; font-size: 0.8rem; color: var(--aoh-stone); }
.aoh-deal-strip__footer { margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.aoh-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.aoh-promo__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aoh-stone); }
.aoh-promo__code { font-weight: 700; letter-spacing: 0.12em; padding: 0.35rem 0.7rem; border: 2px dashed var(--aoh-orange); border-radius: var(--aoh-radius); color: var(--aoh-near-black); background: rgba(255, 122, 0, 0.06); }
.aoh-promo__copy .aoh-icon--check { display: none; }
.aoh-promo__copy.is-copied .aoh-icon--copy { display: none; }
.aoh-promo__copy.is-copied .aoh-icon--check { display: inline-block; }
.aoh-promo__status { margin: 0; flex-basis: 100%; font-size: 0.8rem; color: var(--aoh-stone); min-height: 0; }
.aoh-promo__status:empty { display: none; }
@media (min-width: 600px) { .aoh-deal-strip__row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .aoh-deal-strip__row { grid-template-columns: repeat(var(--aoh-deal-cols, 3), 1fr); } }
@media (max-width: 599px) {
	.aoh-deal-strip__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.85rem; margin-inline: calc(-1 * var(--aoh-gutter)); padding: 0 var(--aoh-gutter) 0.5rem; scrollbar-width: none; }
	.aoh-deal-strip__row::-webkit-scrollbar { display: none; }
	.aoh-deal-strip__row > * { flex: 0 0 min(84%, 20rem); scroll-snap-align: start; }
}

/* ---- Location search (locations archive) ---- */
.aoh-loc-search { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.5rem; }
.aoh-loc-search__field { flex: 1 1 14rem; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem 0 1rem; min-height: 3rem; background: var(--aoh-white); border: 1.5px solid var(--aoh-line-light); border-radius: var(--aoh-pill); transition: border-color var(--aoh-transition); }
.aoh-loc-search__field:focus-within { border-color: var(--aoh-orange); }
.aoh-loc-search__field .aoh-icon { color: var(--aoh-orange-dark); }
.aoh-loc-search__field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--aoh-near-black); outline: none; }

/* ---- Compact newsletter (graphite, joined to footer) ---- */
.aoh-newsletter { background: var(--aoh-graphite); color: var(--aoh-off-white); padding-block: var(--aoh-section-pad-compact); border-bottom: 1px solid var(--aoh-line-dark); }
.aoh-newsletter__grid { display: grid; gap: 1.25rem; align-items: center; }
.aoh-newsletter__text h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 0.35rem; }
.aoh-newsletter__text p { margin: 0; color: rgba(247, 242, 234, 0.78); font-size: 0.98rem; }
.aoh-newsletter__form { display: grid; gap: 0.7rem; }
.aoh-newsletter__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.aoh-newsletter__input { flex: 1 1 14rem; min-width: 0; min-height: 3rem; padding: 0 1.1rem; border-radius: var(--aoh-pill); border: 1.5px solid var(--aoh-line-dark); background: var(--aoh-near-black); color: var(--aoh-off-white); font: inherit; }
.aoh-newsletter__input::placeholder { color: rgba(247, 242, 234, 0.5); }
.aoh-newsletter__input:focus { border-color: var(--aoh-orange); outline: none; }
.aoh-newsletter__consent { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.82rem; color: rgba(247, 242, 234, 0.72); }
.aoh-newsletter__consent input { margin-top: 0.25rem; accent-color: var(--aoh-orange); }
.aoh-newsletter__consent a { color: var(--aoh-orange); }
.aoh-newsletter__status { margin: 0; font-size: 0.85rem; color: var(--aoh-off-white); }
.aoh-newsletter__status:empty { display: none; }
.aoh-newsletter__status.is-error { color: #ffb4a8; }
.aoh-newsletter__status.is-success { color: #bfe8c9; }
.aoh-newsletter--disabled p { color: rgba(247, 242, 234, 0.7); }
@media (min-width: 960px) { .aoh-newsletter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; } }

/* ---- Social icon list ---- */
.aoh-social { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.aoh-social a { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--aoh-line-dark); border-radius: 50%; color: inherit; transition: border-color var(--aoh-transition), color var(--aoh-transition), background-color var(--aoh-transition); }
.aoh-social a:hover { border-color: var(--aoh-orange); color: var(--aoh-orange); }
.aoh-social .aoh-icon { width: 1.1rem; height: 1.1rem; }

/* ==========================================================================
   Phase 4A — approved homepage (docs/design-system/HOMEPAGE-APPROVED-BLUEPRINT.md)
   Global header, homepage sections, footer and floating CTA. Page and section
   backgrounds alternate Dark (#0E0E10) ↔ Light (#131315); the header and footer
   stay at #0E0E10. Component surfaces keep their own scale (deep #131315,
   raised #1B1B1D, card-hi #232326) so cards always contrast with their section.
   ========================================================================== */
:root {
	/* Page and section backgrounds */
	--aoh-bg-dark: #0e0e10;
	--aoh-bg-light: #131315;
	--aoh-header-bg: #0e0e10;
	--aoh-footer-bg: #0e0e10;
	/* Component surfaces (cards, pills, inputs, menus, floating CTA) */
	--aoh-surface-deep: #131315;
	--aoh-surface-raised: #1b1b1d;
	--aoh-surface-card-hi: #232326;
	/* The one neutral plate every Our Menu item photo sits on. Single source of
	   truth: nothing on that page may set a media background any other way. */
	--aoh-menu-media-bg: #dadada;
	--aoh-text: #f5efe6;
	--aoh-text-muted: #a39c92;
	--aoh-hairline: rgba(255, 255, 255, 0.07);
	--aoh-hairline-strong: rgba(255, 255, 255, 0.12);
	--aoh-amber: #ffb23f;
	--aoh-orange-tint: rgba(255, 122, 0, 0.14);
	--aoh-radius-card: 16px;
	--aoh-radius-panel: 24px;
	--aoh-radius-tile: 12px;
	--aoh-radius-control: 10px;
	--aoh-shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.35);
	--aoh-home-pad: clamp(4rem, 3rem + 4vw, 6.5rem);
	--aoh-brand-w: 5rem;
	--aoh-logo-ratio: 0.8133; /* Logo.svg width / height */
}
body.home { background: var(--aoh-bg-dark); color: var(--aoh-text); }

/* ---- Header (transparent over the home hero → compact sticky) ---- */
.aoh-header {
	position: fixed; top: var(--aoh-admin-bar-h); right: 0; left: 0; z-index: 100;
	height: var(--aoh-header-h); 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, 0.3);
	transition: height var(--aoh-dur) var(--aoh-ease), background-color var(--aoh-dur) var(--aoh-ease), box-shadow var(--aoh-dur) var(--aoh-ease), border-color var(--aoh-dur) var(--aoh-ease);
}
.aoh-header--overlay { height: var(--aoh-header-h-open); background: transparent; border-bottom-color: transparent; box-shadow: none; }
.aoh-header--overlay::before {
	content: ""; position: absolute; inset: 0 0 -45% 0; pointer-events: none; z-index: -1;
	background: linear-gradient(180deg, rgba(19, 19, 21, 0.78) 0%, rgba(19, 19, 21, 0.4) 55%, rgba(19, 19, 21, 0) 100%);
	transition: opacity var(--aoh-dur) var(--aoh-ease);
}
.aoh-header--overlay.is-compact, .aoh-header.is-nav-open {
	height: var(--aoh-header-h); background: var(--aoh-header-bg);
	border-bottom-color: var(--aoh-hairline); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.aoh-header.is-nav-open { box-shadow: none; }
.aoh-header--overlay.is-compact::before, .aoh-header.is-nav-open::before { opacity: 0; }
.aoh-header__inner { display: flex; align-items: center; gap: 0.75rem 1.5rem; height: 100%; }

/* Brand: constant box; the emblem scales and the live name fades in when compact */
.aoh-brand { position: relative; display: block; flex: 0 0 var(--aoh-brand-w); width: var(--aoh-brand-w); height: 100%; color: var(--aoh-text); text-decoration: none; }
.aoh-brand:hover { color: var(--aoh-text); }
.aoh-brand__emblem { position: absolute; left: 0; top: 50%; height: 72px; transform: translateY(-50%); transition: height var(--aoh-dur) var(--aoh-ease); }
.aoh-brand__emblem-img, .aoh-brand__emblem img { display: block; height: 100%; width: auto; }
.aoh-brand__name {
	position: absolute; top: 50%; left: calc(40px * var(--aoh-logo-ratio) + 0.7rem); transform: translateY(-50%);
	font-weight: 800; font-size: 1rem; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
	/* Brand orange at the real Barlow ExtraBold 800 face (assets/fonts/barlow-800.woff2).
	   The brand box is sized to hold the whole name, so there is no clipping
	   and no ellipsis. */
	color: var(--aoh-orange);
	opacity: 0; visibility: hidden; transition: opacity var(--aoh-dur) var(--aoh-ease), visibility 0s linear var(--aoh-dur);
}
.aoh-header--solid .aoh-brand__emblem, .aoh-header.is-compact .aoh-brand__emblem, .aoh-header.is-nav-open .aoh-brand__emblem { height: 40px; }

.aoh-header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.aoh-header__order { border-radius: var(--aoh-radius-control); padding: 0.6rem 0.95rem; min-height: 2.6rem; font-size: 0.74rem; letter-spacing: 0.07em; gap: 0.5em; }
.aoh-header__order, .aoh-header__order:hover { color: var(--aoh-white); }
.aoh-header__order .aoh-icon { width: 1.4em; height: 1.4em; margin-top: -0.12em; }
.aoh-header__hint { margin: 0; max-width: 12rem; font-size: 0.75rem; line-height: 1.3; }

.aoh-nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0; flex: none;
	background: rgba(19, 19, 21, 0.35); color: inherit; border: 1px solid rgba(245, 239, 230, 0.28); border-radius: var(--aoh-radius-control);
	cursor: pointer; transition: border-color var(--aoh-transition), background-color var(--aoh-transition);
}
.aoh-nav-toggle:hover { border-color: var(--aoh-orange); }
.aoh-nav-toggle .aoh-icon { width: 1.4rem; height: 1.4rem; }
.aoh-nav-toggle__close { display: none; }
.aoh-nav-toggle[aria-expanded="true"] .aoh-nav-toggle__open { display: none; }
.aoh-nav-toggle[aria-expanded="true"] .aoh-nav-toggle__close { display: block; }

.aoh-nav__list { list-style: none; margin: 0; padding: 0; }
.aoh-nav__list a { color: var(--aoh-text); text-decoration: none; font-weight: 700; }
.aoh-nav__list a:hover { color: var(--aoh-orange); }
.aoh-nav__list .sub-menu { list-style: none; margin: 0; padding-left: 1rem; }
.aoh-nav__list .sub-menu a { font-weight: 500; }

@media (max-width: 1279px) {
	.aoh-nav {
		position: fixed; inset: 0; z-index: 90; padding: calc(var(--aoh-admin-bar-h) + var(--aoh-header-h) + 1.25rem) var(--aoh-gutter) 2.5rem;
		background: var(--aoh-header-bg); color: var(--aoh-text); overflow-y: auto; -webkit-overflow-scrolling: touch;
		transform: translateX(100%); visibility: hidden;
		transition: transform var(--aoh-dur-slow) var(--aoh-ease), visibility 0s linear var(--aoh-dur-slow);
	}
	.aoh-nav.is-open { transform: none; visibility: visible; transition-delay: 0s, 0s; }
	/* Brand and close button stay above the full-screen panel */
	.aoh-brand, .aoh-header__actions { position: relative; z-index: 95; }
	.aoh-nav__list > li + li { border-top: 1px solid var(--aoh-hairline); }
	.aoh-nav__list a {
		display: flex; align-items: center; justify-content: space-between; min-height: 3.4rem; padding: 0.6rem 0;
		font-size: clamp(1.5rem, 5.2vw, 2rem); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
	}
	.aoh-nav__list .current-menu-item > a, .aoh-nav__list .current_page_item > a { color: var(--aoh-orange); }
	.aoh-nav__list .sub-menu a { font-size: 1rem; min-height: 2.5rem; text-transform: none; letter-spacing: 0; }
	.aoh-nav__extras { margin-top: 1.5rem; display: grid; gap: 1rem; }
	.aoh-nav__extras .aoh-button { width: 100%; border-radius: var(--aoh-radius-control); }
	.aoh-nav__extras .aoh-social { margin-top: 0.5rem; }
	.aoh-nav__extras .aoh-social a { border-color: var(--aoh-hairline-strong); color: var(--aoh-text); }
	.aoh-header__hint { display: none; }
}
@media (min-width: 420px) {
	.aoh-header__order { padding: 0.65rem 1.1rem; font-size: 0.78rem; }
}
/* The whole name appears as soon as the row can hold it, never a shortened or
   ellipsised version. The brand box is 200px, the gap beside it 24px and the
   Order Now + menu button 188px, so the row needs 412px of container: that is
   met from 460px of viewport and comfortably from 480px, which is where this
   starts. Under it the official logo stands alone rather than a clipped name. */
@media (min-width: 480px) and (max-width: 1279px) {
	:root { --aoh-brand-w: 12.5rem; }
	.aoh-header.is-compact .aoh-brand__name, .aoh-header--solid .aoh-brand__name, .aoh-header.is-nav-open .aoh-brand__name { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (min-width: 1280px) {
	/* The desktop row starts at 1280px: below it the brand box and the eight menu
	   items cannot both fit beside the 215px CTA, so the existing menu panel is
	   used instead of shortening the brand name. The box holds the small logo and
	   the complete name (148px at this size) with a little slack. */
	:root { --aoh-brand-w: 13.25rem; --aoh-nav-pad: 0.45rem; }
	.aoh-header__inner { column-gap: 0.75rem; }
	.aoh-header.is-compact .aoh-brand__name, .aoh-header--solid .aoh-brand__name { opacity: 1; visibility: visible; transition-delay: 0s; }
	.aoh-brand__emblem { height: 112px; }
	.aoh-header--solid .aoh-brand__emblem, .aoh-header.is-compact .aoh-brand__emblem { height: 52px; }
	.aoh-brand__name { left: calc(52px * var(--aoh-logo-ratio) + 0.8rem); font-size: 1.05rem; }
	/* Order Now is 215 x 45; it only narrows (never below 10rem) when the full menu needs the room */
	.aoh-header__actions { flex: 0 1 auto; min-width: 10rem; }
	.aoh-header__order { width: 13.4375rem; max-width: 100%; height: 2.8125rem; min-height: 2.8125rem; padding: 0 1rem; justify-content: center; font-size: 1.0625rem; letter-spacing: 0.08em; }
	.aoh-nav-toggle { display: none; }
	.aoh-nav { display: block; flex: 1 0 auto; min-width: 0; }
	.aoh-nav__list { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: nowrap; }
	.aoh-nav__list > li { position: relative; }
	/* About 3px larger than before at 1360px+; eases to about +1.6px at 1100px so all eight items fit beside the larger CTA */
	.aoh-nav__list a { display: block; position: relative; padding: 0.6rem var(--aoh-nav-pad); font-size: clamp(0.88rem, 0.414rem + 0.677vw, 0.99rem); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
	.aoh-nav__list > li > a::after {
		content: ""; position: absolute; left: var(--aoh-nav-pad); right: var(--aoh-nav-pad); bottom: 0.25rem; height: 2px; background: var(--aoh-orange);
		transform: scaleX(0); transform-origin: left; transition: transform var(--aoh-dur) var(--aoh-ease);
	}
	.aoh-nav__list > li > a:hover::after, .aoh-nav__list > li > a:focus-visible::after,
	.aoh-nav__list .current-menu-item > a::after, .aoh-nav__list .current_page_item > a::after { transform: scaleX(1); }
	.aoh-nav__list > li > a:hover { color: var(--aoh-text); }
	.aoh-nav__list .sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 13rem; background: var(--aoh-surface-raised);
		padding: 0.5rem 0.25rem; display: none; border: 1px solid var(--aoh-hairline); border-radius: var(--aoh-radius-tile); box-shadow: var(--aoh-shadow-panel);
	}
	.aoh-nav__list .sub-menu a { padding: 0.5rem 0.9rem; text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
	.aoh-nav__list li:hover > .sub-menu, .aoh-nav__list li:focus-within > .sub-menu { display: block; }
	.aoh-nav__extras { display: none; }
}

/* ---- Homepage shared ---- */
.aoh-home-section { position: relative; padding-block: var(--aoh-home-pad); color: var(--aoh-text); }
.aoh-home-section--deep { background: var(--aoh-bg-dark); }
.aoh-home-section--raised { background: var(--aoh-bg-light); }
.aoh-home-section .aoh-admin-hint { color: var(--aoh-orange); }
.aoh-home-section .aoh-empty-state { background: transparent; color: var(--aoh-text-muted); border-color: var(--aoh-hairline-strong); }
.aoh-eyebrow {
	display: inline-flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem;
	font-size: 0.75rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange);
}
.aoh-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; border-radius: 2px; flex: 0 0 auto; }
.aoh-eyebrow-pill {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.1rem; padding: 0.45rem 0.95rem;
	border: 1px solid rgba(255, 122, 0, 0.35); border-radius: var(--aoh-pill); background: rgba(255, 122, 0, 0.1);
	font-size: 0.72rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aoh-orange);
}
.aoh-title {
	margin: 0 0 1.1rem; color: var(--aoh-text);
	font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3rem); text-transform: uppercase; text-wrap: balance;
}
.aoh-copy { margin: 0 0 1em; max-width: 38rem; color: var(--aoh-text-muted); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); line-height: 1.65; }
.aoh-button--dark { background: var(--aoh-surface-card-hi); color: var(--aoh-text); border: 1px solid var(--aoh-hairline-strong); }
.aoh-button--dark:hover { background: #2c2c30; border-color: rgba(255, 122, 0, 0.55); color: var(--aoh-text); transform: translateY(-1px); }
.aoh-button--follow .aoh-icon { color: var(--aoh-orange); }
.aoh-arrow-link {
	display: inline-flex; align-items: center; gap: 0.45rem;
	font-weight: 700; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aoh-orange); text-decoration: none;
}
.aoh-arrow-link:hover { color: var(--aoh-amber); }
.aoh-arrow-link .aoh-icon { width: 1em; height: 1em; transition: transform var(--aoh-transition); }
.aoh-arrow-link:hover .aoh-icon { transform: translateX(3px); }
.aoh-check-circle { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--aoh-orange-tint); color: var(--aoh-orange); }
.aoh-check-circle .aoh-icon { width: 0.9rem; height: 0.9rem; }
.aoh-home-section picture, .aoh-hero picture { display: block; }

/* Official store badges on dark: black rounded rects, not white pills */
.aoh-footer__stores .aoh-store {
	background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--aoh-radius-control); padding: 0.45rem 1rem 0.45rem 0.8rem;
}
.aoh-footer__stores .aoh-store:hover { color: #fff; border-color: var(--aoh-orange); box-shadow: none; }
.aoh-footer__stores .aoh-store__small { color: rgba(255, 255, 255, 0.72); }

/* ---- Vimeo video layers (shared: homepage hero, Franchise hero, figures) ---- */
/*
 * One implementation for every Vimeo embed on the site, so neither hero owns
 * a copy of this and the Franchise stylesheet only has to position the box.
 *
 * object-fit does nothing to an iframe, so a background player is cropped a
 * different way: the layer is itself a size query container, which lets the
 * frame be measured against the box it sits in rather than the viewport. The
 * frame is grown until it covers that box on both axes at the video's own
 * ratio, then centred, so the video is cropped like a photograph — never
 * stretched, never letterboxed — and the parent clips what hangs over.
 *
 * It starts invisible and is revealed only once the player reports that it is
 * genuinely playing. That is what makes the poster underneath a true fallback:
 * while the player loads, when a browser refuses to autoplay it, when the
 * visitor prefers reduced motion, and when there is no video configured at
 * all, the photograph is simply what remains on screen.
 */
.aoh-video-bg {
	position: absolute; inset: 0; overflow: hidden; container-type: size;
	opacity: 0; pointer-events: none;
	transition: opacity var(--aoh-dur-slow) var(--aoh-ease);
	--aoh-video-ar-w: 16; --aoh-video-ar-h: 9;
}
.aoh-video-bg iframe {
	position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: 0;
	transform: translate(-50%, -50%);
}
/*
 * A photograph is a known quantity, so each hero overlay was tuned to the one
 * picture behind it. A video is not: it can cut to a white wall or a lit grill
 * on any frame. So the moving layer carries its own scrim, painted over the
 * frame and under the hero overlay.
 *
 * It belongs to the layer rather than to the hero on purpose. It therefore
 * fades in and out with the video and is absent in every fallback state — no
 * video configured, player still loading, autoplay refused, reduced motion —
 * which leaves the approved photograph heroes exactly as they were signed off.
 *
 * It also self-scales. It darkens the light left by an overlay, so a hero whose
 * overlay is already heavy (Franchise) barely changes, while one tuned to an
 * already-dark photograph (homepage) gains the most.
 */
.aoh-video-bg::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(19, 19, 21, 0.32);
}
/*
 * The cover arithmetic, and the reveal, in the same @supports: a browser that
 * cannot size the frame to the box is never shown a letterboxed video, it just
 * keeps the photograph. vimeo-bg.js tests the same feature before it requests
 * anything, so such a browser also makes no Vimeo request at all.
 */
@supports (width: 1cqw) {
	.aoh-video-bg iframe {
		width: max(100cqw, calc(100cqh * var(--aoh-video-ar-w) / var(--aoh-video-ar-h)));
		height: max(100cqh, calc(100cqw * var(--aoh-video-ar-h) / var(--aoh-video-ar-w)));
	}
	.aoh-video-bg.is-playing { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.aoh-video-bg { display: none; }
}

/* An ordinary player the visitor starts: its own ratio, its own controls. */
.aoh-video-embed {
	position: relative; overflow: hidden; max-width: 100%;
	aspect-ratio: var(--aoh-video-ar-w, 16) / var(--aoh-video-ar-h, 9);
	background: #000;
}
.aoh-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- 1. Hero ---- */
/* The homepage hero fills the first screen, and the 940px ceiling this used to
   carry is what stopped it: on any viewport taller than 940px the hero stopped
   growing and the slack went to the section below it, which is why the top of
   the About band was already on screen at 1024px (84px of it) and at 1200px
   (260px of it). The ceiling is gone; the floor stays, so a short landscape
   phone still gets a hero it can hold rather than a crushed band.

   The admin bar is subtracted exactly once. Core gives <html> a top margin the
   height of the bar, so a logged-in page starts that far down and a hero of a
   full 100svh would hang that far past the bottom of the screen. The token is
   the one already maintained for the fixed header — 0px for a logged-out
   visitor, so the public page resolves to a plain 100svh and nothing is taken
   off it twice. svh rather than vh so a mobile browser measures against its
   small viewport and the hero does not jump as the toolbars retract; the vh
   line above it is the fallback for a browser that has no svh. */
.aoh-hero {
	position: relative; display: flex; align-items: center; overflow: hidden; isolation: isolate;
	min-height: max(620px, calc(100vh - var(--aoh-admin-bar-h)));
	min-height: max(620px, calc(100svh - var(--aoh-admin-bar-h)));
	background: var(--aoh-bg-dark); color: var(--aoh-text);
}
.aoh-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--aoh-bg-dark); }
.aoh-hero__media picture, .aoh-hero__media img, .aoh-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.aoh-hero__media video { opacity: 0; transition: opacity var(--aoh-dur-slow) var(--aoh-ease); }
.aoh-hero__media video.is-playing { opacity: 1; }
.aoh-hero__overlay {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(50% 55% at 16% 82%, rgba(255, 122, 0, 0.16), transparent 70%),
		linear-gradient(180deg, rgba(19, 19, 21, 0.25) 0%, rgba(19, 19, 21, 0.15) 35%, rgba(19, 19, 21, 0.72) 78%, var(--aoh-bg-dark) 100%),
		linear-gradient(90deg, rgba(19, 19, 21, 0.9) 0%, rgba(19, 19, 21, 0.62) 40%, rgba(19, 19, 21, 0.1) 72%, rgba(19, 19, 21, 0) 100%);
}
/* Centered stack; equal breathing room above (below the overlay header) and below */
.aoh-hero__inner {
	position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
	padding-top: calc(var(--aoh-header-h-open) + clamp(1rem, 4vh, 2.5rem)); padding-bottom: clamp(2rem, 6vh, 4rem);
}
.aoh-hero__logo {
	display: block; width: clamp(150px, 5.5vw + 129px, 200px); height: auto; max-width: 100%; margin: 0 0 1.35rem;
	filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}
.aoh-hero__pill {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.15rem; padding: 0.45rem 1rem 0.45rem 0.55rem;
	border-radius: var(--aoh-pill); background: rgba(30, 28, 27, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font-size: 0.72rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.aoh-hero__pill-icon { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(255, 122, 0, 0.2); color: var(--aoh-orange); }
.aoh-hero__pill-icon .aoh-icon { width: 0.75rem; height: 0.75rem; }
.aoh-hero__title { margin: 0 0 1rem; max-width: 62rem; font-size: clamp(2.55rem, 1.6rem + 3.35vw, 4.6rem); color: var(--aoh-text); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); }
.aoh-hero__line { display: block; }
.aoh-hero__line--accent { color: var(--aoh-orange); }
.aoh-hero__lead { margin: 0 0 1.6rem; max-width: 34rem; color: rgba(245, 239, 230, 0.86); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
/* Official badge artwork at one shared height; widths follow each SVG's ratio */
.aoh-hero__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 0 0.9rem; }
.aoh-hero__badge { display: block; border-radius: 8px; transition: transform var(--aoh-transition); }
.aoh-hero__badge img { display: block; width: auto; height: 50px; }
.aoh-hero__badge:hover { transform: translateY(-2px); }
.aoh-hero__find { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; color: var(--aoh-text); font-weight: 600; font-size: 1rem; text-decoration: none; }
.aoh-hero__find span { border-bottom: 1px solid rgba(245, 239, 230, 0.35); padding-bottom: 0.1rem; transition: border-color var(--aoh-transition); }
.aoh-hero__find:hover { color: var(--aoh-text); }
.aoh-hero__find:hover span { border-color: var(--aoh-orange); }
.aoh-hero__find .aoh-icon { color: var(--aoh-orange); }
@media (max-width: 767px) {
	.aoh-hero__media picture, .aoh-hero__media img, .aoh-hero__media video { object-position: 58% 50%; }
	.aoh-hero__overlay {
		background:
			radial-gradient(70% 45% at 20% 85%, rgba(255, 122, 0, 0.14), transparent 70%),
			linear-gradient(180deg, rgba(19, 19, 21, 0.45) 0%, rgba(19, 19, 21, 0.2) 30%, rgba(19, 19, 21, 0.82) 70%, var(--aoh-bg-dark) 100%);
	}
	.aoh-hero__logo { width: clamp(130px, 38vw, 150px); margin-bottom: 1.1rem; }
	.aoh-hero__badges { gap: 0.6rem; }
	.aoh-hero__badge img { height: 44px; }
}
/* The hero title is two deliberate lines, and on a phone the accent line -
   "That Started It All." - stopped fitting on one of them: PEPPERMINT is a
   markedly wider face than the one this clamp was set against, so the line
   broke and left "IT ALL." stranded underneath. No wrapping rule can mend
   that, because the line is simply wider than the column it sits in -
   text-wrap: balance on the title, balance and pretty on the line spans, and
   an inline title were each measured at 390px and each still produced three
   lines - so the floor of the title's size follows the viewport instead of
   sitting flat at 2.55rem. 9vw - 3px is the column's own geometry: the gutters
   either side come to a little over 30px whatever the screen, so the width a
   line has to play with is the viewport less a constant, and this tracks about
   four percent under the size at which the accent line breaks, at every width
   from 320px up. Above 499px the clamp's middle term is already generous
   enough on its own and this rule is out of play, so no tablet or desktop size
   moves, and nothing here touches the hero's height, padding or layout. */
@media (max-width: 499px) {
	.aoh-hero__title { font-size: clamp(1.5rem, 9vw - 3px, 2.55rem); }
}
@media (max-width: 339px) {

	.aoh-hero__badge img { height: 40px; }
}

/* ---- 2. About ---- */
.aoh-about { padding-block: clamp(3.5rem, 2.25rem + 3.5vw, 5.25rem); }
.aoh-about__grid { display: grid; gap: 2rem; }
.aoh-about__head .aoh-eyebrow { margin-bottom: 0.85rem; }
.aoh-about__head .aoh-title { margin-bottom: 1.1rem; font-size: clamp(1.85rem, 1.2rem + 2vw, 2.9rem); }
.aoh-about__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.aoh-about__main, .aoh-about__small { position: relative; margin: 0; overflow: hidden; border-radius: var(--aoh-radius-card); background: var(--aoh-surface-raised); }
.aoh-about__main { grid-column: 1 / -1; aspect-ratio: 10 / 7; }
.aoh-about__small { aspect-ratio: 4 / 3; }
.aoh-about__main img, .aoh-about__main picture, .aoh-about__small img, .aoh-about__small picture { width: 100%; height: 100%; object-fit: cover; }
/* Caption sits on the photo: a scrim that fades up from the bottom edge, no separate panel */
.aoh-about__caption {
	position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 0.3rem; padding: 3.75rem 1.25rem 1.05rem;
	background: linear-gradient(180deg, rgba(19, 19, 21, 0) 0%, rgba(19, 19, 21, 0.6) 45%, rgba(19, 19, 21, 0.92) 100%);
}
.aoh-about__caption-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-about__caption-text { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--aoh-text); }
.aoh-about__body { container-type: inline-size; }
.aoh-about__body .aoh-copy { max-width: 44rem; margin-bottom: 0.9rem; font-size: 1rem; line-height: 1.65; }
.aoh-about__body .aoh-about__lead { color: rgba(245, 239, 230, 0.88); font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem); line-height: 1.6; }
/* Four compact cards in one row on desktop, two per row on tablet and phones, one only on very narrow columns */
.aoh-about__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
@media (min-width: 1100px) { .aoh-about__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 17.5rem) { .aoh-about__stats { grid-template-columns: minmax(0, 1fr); } }
.aoh-about-stat {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 1rem 0.6rem 1.05rem; text-align: center;
	background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline); border-radius: var(--aoh-radius-card);
}
.aoh-about-stat__value { display: block; margin-bottom: 0.15rem; font-size: clamp(2.2rem, 1.8rem + 1vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--aoh-text); font-variant-numeric: lining-nums; }
.aoh-about-stat--orange .aoh-about-stat__value { color: var(--aoh-orange); }
.aoh-about-stat--amber .aoh-about-stat__value { color: var(--aoh-amber); }
.aoh-about-stat--green .aoh-about-stat__value { color: var(--aoh-halal-green); }
.aoh-about-stat__label { font-size: 0.72rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aoh-text); }
.aoh-about-stat__detail { font-size: 0.8rem; font-weight: 500; line-height: 1.3; color: var(--aoh-text-muted); text-wrap: balance; }
.aoh-about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.5rem; }
@media (min-width: 960px) {
	.aoh-about__grid { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); column-gap: clamp(2.5rem, 3.2vw, 3rem); align-items: center; }
	.aoh-about__media { gap: 0.75rem; }
}
/* Narrower two-column range: squarer photos keep the collage close to the height of the longer text column */
@media (min-width: 960px) and (max-width: 1099px) {
	.aoh-about__main, .aoh-about__small { aspect-ratio: 1 / 1; }
}
@media (hover: hover) {
	.aoh-about__main img, .aoh-about__small img { transition: transform 600ms var(--aoh-ease); }
	.aoh-about__main:hover img, .aoh-about__small:hover img { transform: scale(1.03); }
}

/* ---- 3. Featured menu ---- */
.aoh-featured { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
/* Heading left, tab control right, bottoms aligned in one row. The gaps (not
   the title) are what tighten, so the row holds from 1200px up; below that the
   tabs drop under the heading only because the two genuinely do not fit. */
.aoh-featured__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 1.25rem; margin-bottom: 2rem; }
.aoh-featured__head { flex: 0 1 auto; min-width: 0; }
/* The section-title size system, shared verbatim with each Our Menu category
   heading so the two can only ever change together. The eyebrow above it is
   the homepage's alone: a menu category heading carries its item count
   instead, on the same line as the title. */
.aoh-featured__head .aoh-eyebrow { margin-bottom: 0.75rem; font-size: 0.72rem; }
.aoh-featured__head .aoh-title, .aoh-menu-group__head .aoh-title { margin-bottom: 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.aoh-featured__tabs {
	display: flex; flex: none; gap: 0.125rem; max-width: 100%; padding: 0.3rem; overflow-x: auto; overscroll-behavior-x: contain;
	background: #232326; border-radius: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.aoh-featured__tabs::-webkit-scrollbar { display: none; }
.aoh-featured__tab {
	flex: none; min-height: 2.5rem; padding: 0.55rem 0.8rem; cursor: pointer; white-space: nowrap;
	background: transparent; color: rgba(245, 239, 230, 0.86); border: 0; border-radius: var(--aoh-radius-control);
	font-family: var(--aoh-font-body); font-size: 0.74rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
	transition: background-color var(--aoh-transition), color var(--aoh-transition);
}
/* 1200–1279px: the narrowest width that still keeps the row; the tab bar gives up a little air instead of the title shrinking. */
@media (min-width: 1200px) and (max-width: 1279px) {
	.aoh-featured__top { column-gap: 1rem; }
	.aoh-featured__tabs { gap: 0; padding: 0.25rem; }
	.aoh-featured__tab { padding-inline: 0.6rem; letter-spacing: 0.04em; }
}
.aoh-featured__tab:hover, .aoh-featured__tab:focus-visible { background: #313135; color: var(--aoh-text); }
.aoh-featured__tab:focus-visible { outline: 2px solid var(--aoh-text); outline-offset: -2px; }
.aoh-featured__tab[aria-selected="true"] { background: var(--aoh-orange); color: #0b0b0b; }
.aoh-featured__tab[aria-selected="true"]:hover { background: #ff8a1f; }
.aoh-featured__tab[aria-selected="true"]:focus-visible { outline-color: #0b0b0b; outline-offset: -4px; }
.aoh-featured__panels .aoh-tabs__panel:focus-visible { outline: 2px solid var(--aoh-text); outline-offset: 6px; border-radius: var(--aoh-radius-card); }

.aoh-featured__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; list-style: none; margin: 0; padding: 0; }
/* Every .aoh-dish card, on either page, stretches to its cell. */
.aoh-featured__grid > li, .aoh-menu-cards > li { display: flex; min-width: 0; }
.aoh-dish {
	position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
	background: #232326; border-radius: var(--aoh-radius-card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	transition: transform var(--aoh-dur) var(--aoh-ease), box-shadow var(--aoh-transition), background-color var(--aoh-transition);
}
.aoh-dish__media { position: relative; flex: none; aspect-ratio: 3 / 2; overflow: hidden; background: var(--aoh-surface-deep); }
.aoh-dish__media picture { width: 100%; height: 100%; }
.aoh-dish__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Keep the food in frame for each bundled stand-in photo */
.aoh-dish__media--wrap-hand img { object-position: 50% 55%; }
.aoh-dish__media--packaging img { object-position: 45% 50%; }
.aoh-dish__media--catering-table img { object-position: 50% 78%; }
.aoh-dish__media--hero-spread img { object-position: 50% 55%; }
.aoh-dish__media--catering-hands img { object-position: 35% 70%; }
.aoh-dish__media--empty { display: grid; place-items: center; }
.aoh-dish__media .aoh-dish__placeholder { width: auto; height: auto; max-width: 34%; max-height: 42%; object-fit: contain; opacity: 0.22; }
.aoh-dish__badge {
	position: absolute; top: 0.85rem; left: 0.85rem; z-index: 1; padding: 0.3rem 0.65rem; border-radius: var(--aoh-pill);
	background: var(--aoh-orange); color: #0b0b0b; font-size: 0.66rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase;
}
.aoh-dish__body { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; min-height: 10.5rem; padding: 1.3rem 1.4rem 1.5rem; }
.aoh-dish__title { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.35vw, 1.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; text-transform: none; color: var(--aoh-text); }
.aoh-dish__desc { margin: 0; color: #b3aca2; font-size: 1rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.aoh-featured__band {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; margin-top: 1.75rem; padding: 0.8rem 0.9rem 0.8rem 1rem;
	background: #1f1f22; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--aoh-radius-card);
}
.aoh-featured__band-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--aoh-radius-control); background: rgba(255, 122, 0, 0.09); color: var(--aoh-orange); }
.aoh-featured__band-icon .aoh-icon { width: 1.05rem; height: 1.05rem; }
.aoh-featured__band-text { flex: 1 1 16rem; margin: 0; color: var(--aoh-text); font-size: 0.98rem; font-weight: 600; line-height: 1.45; }
.aoh-featured__band .aoh-button { margin-left: auto; min-height: 2.6rem; padding: 0.65rem 1.2rem; font-size: 0.75rem; }
@media (hover: hover) {
	.aoh-dish:hover { transform: translateY(-3px); background: #262629; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35); }
	.aoh-dish__media img { transition: transform 600ms var(--aoh-ease); }
	.aoh-dish:hover .aoh-dish__media img:not(.aoh-dish__placeholder) { transform: scale(1.04); }
}
/* Narrow desktop: slightly taller photos keep the image near 60% of the card */
@media (min-width: 960px) and (max-width: 1279px) {
	.aoh-dish__media { aspect-ratio: 4 / 3; }
}
/* Tablet: two columns, the third card runs full width with the photo beside the text */
@media (min-width: 600px) and (max-width: 959px) {
	.aoh-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
	.aoh-featured__grid > li:nth-child(odd):last-child { grid-column: 1 / -1; }
	.aoh-featured__grid > li:nth-child(odd):last-child .aoh-dish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
	.aoh-featured__grid > li:nth-child(odd):last-child .aoh-dish__body { justify-content: center; }
}
@media (max-width: 599px) {
	.aoh-featured__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.aoh-dish__body { min-height: 0; padding: 1.15rem 1.2rem 1.35rem; }
	.aoh-featured__tab { min-height: 2.75rem; padding-inline: 0.95rem; }
	.aoh-featured__band { padding: 1rem; }
	.aoh-featured__band .aoh-button { width: 100%; margin-left: 0; }
}

/* ---- 4. Instagram ---- */
.aoh-ig__layout { display: grid; gap: 1.75rem; grid-template-areas: "head" "feed" "follow"; }
.aoh-ig__head { grid-area: head; max-width: 40rem; }
.aoh-ig__head .aoh-title { margin-bottom: 0; }
.aoh-ig__follow { grid-area: follow; }
.aoh-ig__feed { grid-area: feed; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.aoh-ig__item { min-width: 0; }
.aoh-ig__frame { position: relative; display: block; aspect-ratio: 8 / 11; overflow: hidden; isolation: isolate; border-radius: var(--aoh-radius-tile); background: var(--aoh-surface-raised); color: #fff; text-decoration: none; }
.aoh-ig__frame picture { display: block; width: 100%; height: 100%; }
.aoh-ig__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Black fade from the bottom edge only (same on every tile): depth and caption legibility, never a full dim */
.aoh-ig__frame::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.32) 38%, rgba(0, 0, 0, 0) 68%);
	transition: opacity var(--aoh-transition);
}
.aoh-ig__mark {
	position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
	border-radius: 50%; background: rgba(12, 12, 14, 0.34); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform: translate(-50%, -50%);
	transition: background-color var(--aoh-transition), border-color var(--aoh-transition), transform var(--aoh-transition);
}
.aoh-ig__mark .aoh-icon { width: 1rem; height: 1rem; }
.aoh-ig__caption {
	position: absolute; right: 0.8rem; bottom: 0.75rem; left: 0.8rem; z-index: 2; overflow: hidden;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	color: #fff; font-size: 0.78rem; font-weight: 500; line-height: 1.4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
a.aoh-ig__frame:hover .aoh-ig__mark, a.aoh-ig__frame:focus-visible .aoh-ig__mark { background: rgba(12, 12, 14, 0.56); border-color: rgba(255, 255, 255, 0.3); }
a.aoh-ig__frame:focus-visible { outline: 2px solid var(--aoh-text); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.aoh-ig__frame img { transition: transform 600ms var(--aoh-ease); }
	a.aoh-ig__frame:hover img { transform: scale(1.04); }
	a.aoh-ig__frame:hover .aoh-ig__mark { transform: translate(-50%, -50%) scale(1.06); }
}
@media (min-width: 700px) {
	.aoh-ig__feed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
}
@media (min-width: 960px) {
	.aoh-ig__layout { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head follow" "feed feed"; align-items: end; column-gap: 2rem; }
	.aoh-ig__feed { gap: 1rem; }
	.aoh-ig__mark { width: 3.1rem; height: 3.1rem; }
	.aoh-ig__mark .aoh-icon { width: 1.3rem; height: 1.3rem; }
	.aoh-ig__caption { right: 1rem; bottom: 0.95rem; left: 1rem; font-size: 0.85rem; }
}
@media (max-width: 767px) {
	.aoh-ig__follow .aoh-button { width: 100%; white-space: normal; }
}

/* ---- 5. Catering band ---- */
/* Full-width band: the section is the design. Copy stays in the site container; the photo runs to the viewport edge. */
.aoh-cater { display: flex; flex-direction: column; overflow: hidden; isolation: isolate; padding-block: clamp(3rem, 1.25rem + 4vw, 4.25rem); background: var(--aoh-bg-dark); border-block: 1px solid var(--aoh-hairline); }
.aoh-cater--media { padding-top: 0; }
.aoh-cater__inner { position: relative; z-index: 1; }
.aoh-cater__media { position: relative; order: -1; aspect-ratio: 16 / 10; max-height: 24rem; }
.aoh-cater__media picture, .aoh-cater__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aoh-cater__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 19, 21, 0) 45%, var(--aoh-bg-dark) 100%); }
.aoh-cater--media .aoh-cater__content { padding-top: 1.5rem; }
/* Tighter vertical rhythm; the description wraps evenly and never leaves a lone last word */
.aoh-cater__content .aoh-eyebrow { margin-bottom: 0.8rem; }
.aoh-cater__content .aoh-title { margin-bottom: 0.9rem; }
.aoh-cater__content .aoh-copy { max-width: 38rem; margin-bottom: 0; font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); line-height: 1.6; text-wrap: pretty; }
.aoh-cater__list { display: grid; gap: 0.6rem; list-style: none; margin: 1.15rem 0 0; padding: 0; }
.aoh-cater__list li { display: flex; align-items: center; gap: 0.7rem; color: var(--aoh-text); font-weight: 600; }
.aoh-cater__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1.6rem; }
/* Split: photo pinned to the right edge, faded into the band from the left */
@media (min-width: 700px) {
	.aoh-cater { display: block; }
	.aoh-cater--media { padding-top: clamp(3rem, 1.25rem + 4vw, 4.25rem); }
	.aoh-cater__media { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 50%; max-height: none; aspect-ratio: auto; }
	/* Tablet: the copy reaches further into the photo, so the fade stays darker for longer */
	.aoh-cater__media::after { background: linear-gradient(90deg, var(--aoh-bg-dark) 0%, rgba(19, 19, 21, 0.92) 18%, rgba(19, 19, 21, 0.6) 40%, rgba(19, 19, 21, 0.2) 62%, rgba(19, 19, 21, 0) 82%); }
	.aoh-cater--media .aoh-cater__content { width: 56%; max-width: 38rem; padding-top: 0; }
}
@media (min-width: 1200px) {
	.aoh-cater__media { width: 56%; }
	.aoh-cater__media::after { background: linear-gradient(90deg, var(--aoh-bg-dark) 0%, rgba(19, 19, 21, 0.88) 12%, rgba(19, 19, 21, 0.5) 30%, rgba(19, 19, 21, 0.16) 55%, rgba(19, 19, 21, 0) 76%); }
	.aoh-cater--media .aoh-cater__content { width: 50%; }
}
@media (max-width: 599px) {
	.aoh-cater__actions .aoh-button { flex: 1 1 100%; }
}

/* ---- 6. App ---- */
/* Compact, content-driven band: transparent phone mockup beside the copy, both vertically centred */
.aoh-appx { padding-block: clamp(3rem, 2rem + 2.5vw, 4rem); }
.aoh-appx__grid { display: grid; gap: 1.75rem; align-items: center; }
.aoh-appx__visual { display: flex; justify-content: center; }
.aoh-appx__phone { display: block; width: clamp(9.5rem, 4rem + 22vw, 10.5rem); height: auto; aspect-ratio: 1 / 2; object-fit: contain; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.5)); }
.aoh-appx__body .aoh-eyebrow-pill { margin-bottom: 1rem; }
.aoh-appx__body .aoh-title { margin-bottom: 0.9rem; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); }
.aoh-appx__body .aoh-copy { max-width: 36rem; margin-bottom: 0; font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); line-height: 1.6; text-wrap: pretty; }
/* Feature rows: icon beside text on a slightly raised surface */
.aoh-appx__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.aoh-appx__feature { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline); border-radius: var(--aoh-radius-control); }
.aoh-appx__feature-icon { display: grid; flex: none; color: var(--aoh-orange); }
.aoh-appx__feature-icon .aoh-icon { width: 1.35rem; height: 1.35rem; }
.aoh-appx__feature-title { margin: 0 0 0.15rem; font-size: 0.9rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aoh-text); }
.aoh-appx__feature p { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--aoh-text-muted); }
/* Coupon chip: label, code and a small Copy control on one solid surface */
.aoh-appx__promo { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 0; margin-top: 1rem; padding: 0.3rem 0.3rem 0.3rem 0.95rem; background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-control); }
.aoh-appx__promo .aoh-promo__label { margin-right: 0.7rem; color: var(--aoh-text-muted); white-space: nowrap; }
.aoh-appx__promo .aoh-promo__code { padding: 0 0.85rem 0 0; border: 0; border-radius: 0; background: none; color: var(--aoh-text); font-size: 1.05rem; letter-spacing: 0.14em; }
.aoh-appx__copy {
	display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0 0.75rem; border: 0; border-radius: 7px;
	background: rgba(255, 255, 255, 0.07); color: var(--aoh-text); font: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
	transition: background-color var(--aoh-transition), color var(--aoh-transition);
}
.aoh-appx__copy:hover { background: rgba(255, 255, 255, 0.12); }
.aoh-appx__copy .aoh-icon { width: 0.95rem; height: 0.95rem; }
.aoh-appx__copy.is-copied { color: var(--aoh-orange); }
/* Status stays in the accessibility tree (announced), never shifts the layout */
.aoh-appx__promo .aoh-promo__status, .aoh-appx__promo .aoh-promo__status:empty { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Official badges: artwork untouched, equal height */
.aoh-appx__stores { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }
.aoh-appx__badge { display: block; border-radius: 8px; line-height: 0; transition: transform var(--aoh-dur-fast) var(--aoh-ease); }
.aoh-appx__badge:hover { transform: translateY(-1px); }
.aoh-appx__badge img { display: block; width: auto; height: 2.75rem; }
@media (min-width: 768px) {
	.aoh-appx__grid { grid-template-columns: auto minmax(0, 42rem); justify-content: center; column-gap: clamp(2rem, 1rem + 4vw, 5rem); }
	.aoh-appx__phone { width: clamp(11rem, 5rem + 12vw, 15.5rem); }
}

/* ---- 7. Find your nearest ---- */
/* Compact band: one rounded panel, subtle storefront photo on the right, whole-card state links.
   One card per state that has active locations. The cards live in a scroll-snapping track: on a
   wide desktop they all fit and it never scrolls; narrower viewports show part of the next card
   so it reads as a slider. Same markup at every width — only the card width changes. */
.aoh-find { padding-block: clamp(2.5rem, 1.25rem + 3.5vw, 4rem); }
.aoh-find__panel {
	/* Panel base; the photo scrim below is keyed to it so the image fades into this exact color */
	--aoh-find-bg: #1a1a1e;
	position: relative; overflow: hidden; isolation: isolate; margin-inline: auto; padding: clamp(1.25rem, 0.5rem + 3vw, 3rem);
	background: var(--aoh-find-bg); border-radius: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.aoh-find__bg { position: absolute; inset: 0 0 0 auto; z-index: -1; width: min(58%, 44rem); pointer-events: none; }
.aoh-find__bg picture, .aoh-find__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.aoh-find__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--aoh-find-bg) 0%, rgba(26, 26, 30, 0.7) 45%, rgba(26, 26, 30, 0.3) 100%), linear-gradient(0deg, rgba(26, 26, 30, 0.55) 0%, rgba(26, 26, 30, 0) 60%); }
.aoh-find__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 2rem; margin-bottom: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }
.aoh-find__eyebrow {
	display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.55rem;
	font-size: 0.72rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aoh-orange);
}
.aoh-find__eyebrow .aoh-icon { width: 0.95rem; height: 0.95rem; }
.aoh-find__title { margin: 0; font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); }
.aoh-find__status { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 0.2rem; color: #e9e3da; font-size: 0.875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.aoh-find__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3fb96a; box-shadow: 0 0 0 3px rgba(63, 185, 106, 0.16); }
/* Cards per viewport. The fraction is the visible slice of the next card that tells a visitor
   the row slides; at 1280+ it becomes the real number of states, capped at five. */
.aoh-find__carousel { --aoh-state-gap: 0.75rem; --aoh-state-cards: 1.18; }
.aoh-find__states {
	display: flex; gap: var(--aoh-state-gap); list-style: none;
	/* 4px of breathing room so a focused card's outline is not clipped by the scroll port.
	   scroll-padding matches it, otherwise the first card snaps to 4px instead of 0 and the
	   track never reports itself as being at the start. */
	margin: -4px; padding: 4px; scroll-padding: 4px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.aoh-find__states::-webkit-scrollbar { display: none; }
.aoh-find__states:focus-visible { outline: 2px solid var(--aoh-text); outline-offset: -2px; border-radius: var(--aoh-radius-card); }
.aoh-find__states > li {
	display: flex; min-width: 0; scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--aoh-state-cards) - 1) * var(--aoh-state-gap)) / var(--aoh-state-cards));
}
/* Whole card is one link; hover/focus lighten the surface only (no outline, glow or lift) */
.aoh-state {
	display: flex; flex-direction: column; width: 100%; min-height: 10rem; padding: 1.2rem 1.25rem 1.15rem;
	background: #2c2c30; border-radius: var(--aoh-radius-card); color: var(--aoh-text); text-decoration: none; cursor: pointer;
	transition: background-color var(--aoh-dur-fast) ease;
}
.aoh-state:hover, .aoh-state:focus-visible { background: #3b3b3f; color: var(--aoh-text); }
.aoh-state:focus-visible { outline: 2px solid var(--aoh-text); outline-offset: 3px; }
/* Wrapping is the safety valve for an unusually long state name; it never triggers at normal widths */
.aoh-state__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.6rem; }
.aoh-state__name { min-width: 0; margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.4rem); line-height: 1.15; letter-spacing: -0.005em; color: var(--aoh-text); }
.aoh-state__count {
	flex: none; display: inline-flex; align-items: center; padding: 0.28rem 0.6rem; border-radius: var(--aoh-pill);
	background: #19191b; color: #e9e3da; font-size: 0.72rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.aoh-find__states > li:first-child .aoh-state__count { background: rgba(255, 122, 0, 0.2); color: var(--aoh-orange); }
.aoh-state__cities { display: block; margin-top: 0.85rem; color: #d8d1c7; font-size: 0.875rem; line-height: 1.45; }
.aoh-state__action {
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1rem;
	color: var(--aoh-orange); font-size: 0.72rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase;
}
.aoh-state__action .aoh-icon { width: 1rem; height: 1rem; transition: transform var(--aoh-dur-fast) ease; }
.aoh-state:hover .aoh-state__action .aoh-icon { transform: translateX(2px); }
/* Previous / next: unhidden by state-carousel.js only while the track really scrolls */
.aoh-find__nav { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.aoh-find__nav[hidden] { display: none; }
.aoh-find__arrow {
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; padding: 0;
	background: transparent; border: 1.5px solid rgba(233, 227, 218, 0.28); border-radius: 50%; color: #e9e3da; cursor: pointer;
	transition: background-color var(--aoh-dur-fast) ease, border-color var(--aoh-dur-fast) ease, opacity var(--aoh-dur-fast) ease;
}
.aoh-find__arrow:hover:not(:disabled) { background: #3b3b3f; border-color: rgba(233, 227, 218, 0.55); }
.aoh-find__arrow:focus-visible { outline: 2px solid var(--aoh-text); outline-offset: 2px; }
.aoh-find__arrow:disabled { opacity: 0.3; cursor: default; }
.aoh-find__arrow .aoh-icon { width: 1.05rem; height: 1.05rem; }
.aoh-find__arrow--prev .aoh-icon { transform: scaleX(-1); }
.aoh-find__empty p { margin: 0 0 0.75rem; color: var(--aoh-text-muted); }
@media (min-width: 600px) { .aoh-find__carousel { --aoh-state-gap: 1rem; --aoh-state-cards: 2.3; } }
@media (min-width: 768px) { .aoh-find__title { white-space: nowrap; } }
@media (min-width: 1024px) { .aoh-find__carousel { --aoh-state-cards: 3.35; } }
/* Enough room for the whole row: every state gets a card and the track stops scrolling.
   A sixth state keeps five per screen and the row becomes a slider again. */
@media (min-width: 1280px) {
	.aoh-find__carousel { --aoh-state-cards: min(var(--aoh-state-total, 5), 5); }
	.aoh-find__states > li { max-width: 24rem; }
	/* Five narrow columns: trim the card header just enough for a long state name beside its badge */
	.aoh-state { padding: 1.1rem 1.05rem 1.05rem; }
	.aoh-state__top { gap: 0.4rem; }
	.aoh-state__name { font-size: 1.2rem; }
	.aoh-state__count { padding: 0.26rem 0.5rem; font-size: 0.68rem; }
	.aoh-state__cities { font-size: 0.82rem; }
	.aoh-state__action { gap: 0.5rem; font-size: 0.63rem; letter-spacing: 0.04em; }
	.aoh-state__action .aoh-icon { width: 0.9rem; height: 0.9rem; }
}
@media (max-width: 599px) {
	.aoh-find__bg { width: 100%; }
	.aoh-find__bg img { opacity: 0.18; }
	.aoh-state { min-height: 0; padding: 1rem 1.1rem; }
	/* Swiping is the natural gesture here, and the peeking card already shows there is more */
	.aoh-find__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .aoh-find__states { scroll-behavior: auto; } }

/* ---- Locations archive: server-side state filter (cream internal page) ---- */
.aoh-state-filter { margin: 0 0 1.5rem; }
.aoh-state-filter__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.aoh-state-filter__link {
	display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.5rem 1rem; border-radius: var(--aoh-pill);
	background: var(--aoh-white); color: var(--aoh-near-black); border: 1.5px solid var(--aoh-line-light);
	font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
	transition: border-color var(--aoh-transition), background-color var(--aoh-transition), color var(--aoh-transition);
}
.aoh-state-filter__link:hover { border-color: var(--aoh-orange); color: var(--aoh-near-black); }
.aoh-state-filter__link[aria-current="page"] { background: var(--aoh-near-black); border-color: var(--aoh-near-black); color: var(--aoh-white); }
.aoh-state-filter__reset { margin-top: 1rem; }
.aoh-state-filter__reset .aoh-arrow-link { color: var(--aoh-near-black); border-bottom: 2px solid var(--aoh-orange); padding-bottom: 0.15rem; }

/* ---- Footer (global, deep) ---- */
.aoh-footer { background: var(--aoh-footer-bg); color: var(--aoh-text-muted); padding-block: clamp(3.5rem, 6vw, 5rem) 1.5rem; border-top: 1px solid var(--aoh-hairline); }
.aoh-footer__grid { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "signup signup" "explore company"; }
.aoh-footer__brand { grid-area: brand; }
.aoh-footer__signup { grid-area: signup; }
.aoh-footer__col--explore { grid-area: explore; }
.aoh-footer__col--company { grid-area: company; }
.aoh-footer__logo { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--aoh-text); text-decoration: none; }
.aoh-footer__logo:hover { color: var(--aoh-text); }
.aoh-footer__mark { display: block; flex: none; height: 6rem; }
.aoh-footer__emblem { display: block; width: auto; height: 100%; }
.aoh-footer__name { font-size: 1.2rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; }
.aoh-footer__line { margin: 1.1rem 0 0; max-width: 24rem; color: var(--aoh-text-muted); font-size: 0.95rem; line-height: 1.6; }
/* Social profiles live in the brand column, directly under the summary */
.aoh-footer__social { margin-top: 1.25rem; }
.aoh-footer__heading { margin: 0 0 1rem; color: var(--aoh-text); font-size: 0.78rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; }
/* Explore, Company and the newsletter heading run 15% above the base size; the
   app heading inside the signup column keeps the base size. */
.aoh-footer__col > .aoh-footer__heading, .aoh-footer__signup > .aoh-footer__heading { font-size: 0.897rem; }
.aoh-footer__links { display: grid; gap: 0.65rem; list-style: none; margin: 0; padding: 0; }
.aoh-footer__links a, .aoh-footer__legal-list a { color: var(--aoh-text-muted); text-decoration: none; transition: color var(--aoh-transition); }
.aoh-footer__links a { font-size: 0.95rem; }
.aoh-footer__links a:hover, .aoh-footer__legal-list a:hover { color: var(--aoh-orange); }
.aoh-footer__signup-copy { margin: 0 0 1rem; max-width: 26rem; font-size: 0.92rem; line-height: 1.55; }
.aoh-footer-news { display: grid; gap: 0.75rem; max-width: 26rem; }
.aoh-footer-news__field {
	display: flex; align-items: center; padding: 0.3rem; background: var(--aoh-surface-raised);
	border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-tile); transition: border-color var(--aoh-transition), box-shadow var(--aoh-transition);
}
.aoh-footer-news__field:focus-within { border-color: var(--aoh-orange); box-shadow: 0 0 0 1px var(--aoh-orange); }
.aoh-footer-news__field input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.85rem; border: 0; background: transparent; color: var(--aoh-text); font: inherit; outline: none; }
.aoh-footer-news__field input::placeholder { color: rgba(163, 156, 146, 0.9); }
.aoh-footer-news__submit {
	display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
	background: var(--aoh-orange); color: #0b0b0b; border: 0; border-radius: 9px; transition: background-color var(--aoh-transition);
}
.aoh-footer-news__submit:hover { background: var(--aoh-amber); }
.aoh-footer-news__submit:focus-visible { outline: 2px solid var(--aoh-text); outline-offset: 2px; }
.aoh-footer-news__submit .aoh-icon { width: 1.15rem; height: 1.15rem; }
.aoh-footer-news__terms { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--aoh-text-muted); }
.aoh-footer-news__terms a { color: var(--aoh-text); text-decoration: underline; }
.aoh-footer-news__terms a:hover { color: var(--aoh-orange); }
.aoh-footer-news__status { margin: 0; font-size: 0.85rem; color: var(--aoh-text); }
.aoh-footer-news__status:empty { display: none; }
.aoh-footer-news__status.is-error { color: #ffb4a8; }
.aoh-footer-news__status.is-success { color: #8fdcaf; }
.aoh-footer-news--disabled p { margin: 0; font-size: 0.88rem; }
.aoh-footer__app { margin-top: 2rem; }
.aoh-footer__stores { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
/* Official store artwork: scaled by height only, so each badge keeps its own proportions */
.aoh-footer__badge { display: inline-flex; border-radius: 8px; }
.aoh-footer__badge img { display: block; width: auto; height: 2.5rem; }
.aoh-footer__badge:focus-visible { outline: 2px solid var(--aoh-text); outline-offset: 3px; }
.aoh-footer__bottom {
	display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 3rem; padding-top: 1.5rem;
	border-top: 1px solid var(--aoh-hairline); font-size: 0.84rem; color: var(--aoh-text-muted);
}
.aoh-footer__copyright { margin: 0; }
.aoh-footer__legal-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.aoh-footer .aoh-social a { color: var(--aoh-text); background: var(--aoh-surface-raised); border-color: var(--aoh-hairline-strong); }
.aoh-footer .aoh-social a:hover { color: var(--aoh-orange); border-color: var(--aoh-orange); }
/* The social icons live in the narrow brand column, where wrapping a flex row
   left one icon stranded on a line of its own (7 + 1). A grid keeps the rows
   even instead: four across — 4 + 4 for the eight platforms — widening to a
   single row of eight only where the column really holds it (8 × 2.5rem plus
   7 × 0.5rem of gap = 23.5rem). Where container queries are unsupported the
   balanced four-across row is what remains. */
.aoh-footer__brand { container-type: inline-size; }
.aoh-footer .aoh-footer__social { display: grid; grid-template-columns: repeat(4, 2.5rem); justify-content: start; gap: 0.5rem; }
@container (min-width: 23.5rem) {
	.aoh-footer .aoh-footer__social { grid-template-columns: repeat(8, 2.5rem); }
}
@media (max-width: 767px) {
	.aoh-footer__bottom { flex-direction: column; }
	.aoh-footer__legal { order: 1; }
	.aoh-footer__copyright { order: 2; }
}
@media (min-width: 640px) {
	.aoh-footer__grid { grid-template-areas: "brand signup" "explore company"; column-gap: 2.5rem; }
}
@media (min-width: 1024px) {
	.aoh-footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.5fr); grid-template-areas: "brand explore company signup"; column-gap: clamp(2rem, 4vw, 4rem); }
	.aoh-footer__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.aoh-footer__copyright { grid-column: 1; }
	.aoh-footer__legal { grid-column: 2; justify-self: end; }
	.aoh-footer__legal-list { justify-content: flex-end; }
	/* The fixed CTA overlays the bottom-right corner. Keep the legal links out of
	   its lane instead of reserving empty vertical space under the footer. */
	body:has(.aoh-float) .aoh-footer__bottom { padding-right: max(0px, calc(26rem - (100vw - 100%) / 2)); }
	body:has(.aoh-float--catering) .aoh-footer__bottom { padding-right: max(0px, calc(32.5rem - (100vw - 100%) / 2)); }
}

/* ---- Floating Order / Catering CTA (≥768px only) ---- */
.aoh-float { display: none; }
@media (min-width: 768px) {
	.aoh-float {
		position: fixed; z-index: 80; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
		display: flex; align-items: center; gap: 0.9rem; max-width: calc(100vw - 2.5rem); padding: 0.7rem 0.7rem 0.7rem 0.75rem;
		background: var(--aoh-surface-deep); color: var(--aoh-text); border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-card);
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
		opacity: 0; visibility: hidden; transform: translateY(14px);
		transition: opacity 260ms var(--aoh-ease), transform 260ms var(--aoh-ease), visibility 0s linear 260ms;
	}
	.aoh-float.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.aoh-float__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--aoh-radius-control); background: var(--aoh-orange); color: #0b0b0b; }
.aoh-float__icon .aoh-icon { width: 1.25rem; height: 1.25rem; }
.aoh-float__text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; margin: 0 0.35rem 0 0; }
.aoh-float__title { font-size: 0.82rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.09em; text-transform: uppercase; color: var(--aoh-text); }
.aoh-float__note { font-size: 0.85rem; line-height: 1.25; color: var(--aoh-text-muted); white-space: nowrap; }
.aoh-float .aoh-float__button { flex: none; padding: 0.7rem 1.2rem; min-height: 2.75rem; font-size: 0.78rem; border-radius: var(--aoh-radius-control); }
@media (prefers-reduced-motion: reduce) { .aoh-float { transform: none; } }

/* ---- Our Menu page ---- */
/* Compact, centred, dark. Headline is the page title at the real Barlow 800. */
.aoh-menuhero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
/* Restrained ambient warmth behind the headline - no border around the hero. */
.aoh-menuhero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-menuhero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
.aoh-menuhero__title { margin: 0; font-size: clamp(2.6rem, 1.65rem + 4vw, 4.5rem); text-transform: uppercase; color: var(--aoh-text); }
.aoh-menuhero__lead { margin: 0; max-width: 46rem; color: var(--aoh-text-muted); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; }
.aoh-menuhero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.6rem; list-style: none; margin: 0.35rem 0 0; padding: 0; }
.aoh-menuhero__chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.9rem; border-radius: var(--aoh-pill); border: 1px solid var(--aoh-hairline-strong); background: var(--aoh-surface-raised); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.aoh-menuhero__chip-icon { display: inline-flex; color: var(--aoh-orange); }
.aoh-menuhero__chip-icon .aoh-icon { width: 1rem; height: 1rem; }
@media (max-width: 380px) { .aoh-menuhero__chip { padding: 0.36rem 0.7rem; font-size: 0.72rem; } }

/* Shared internal-page hero background --------------------------------------
   One mechanism, reused by any internal page that sets a Page Hero image. It
   owns the photograph, the cover crop, the focus position and the overlay, and
   nothing else: the section it sits inside keeps its own copy, alignment and
   spacing. With no image the markup is not printed at all, so the page keeps
   exactly the dark/radial hero it had before.

   Absolutely positioned and behind the content, so the photograph can never
   move anything as it decodes — the section's height comes from its padding
   and its type, not from the image. `z-index: -1` paints it above the section
   background and below the copy inside the section's own stacking context. */
.aoh-pagehero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background-color: var(--aoh-bg-dark); }
.aoh-pagehero-media picture { display: block; width: 100%; height: 100%; }
.aoh-pagehero-media__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(0.94) contrast(1.02); }

/* The cinematic treatment. A flat scrim would flatten the food; these two
   layers keep the middle of the frame legible while the top and the foot go
   almost to black, so the band reads as one dark surface with a photograph
   inside it and meets the next section without a seam. */
.aoh-pagehero-media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 8, 9, 0.93) 0%, rgba(8, 8, 9, 0.66) 26%, rgba(8, 8, 9, 0.64) 52%, rgba(8, 8, 9, 0.88) 84%, rgba(8, 8, 9, 0.99) 100%),
		radial-gradient(118% 88% at 50% 50%, rgba(8, 8, 9, 0.3) 0%, rgba(8, 8, 9, 0.48) 58%, rgba(8, 8, 9, 0.74) 100%);
}

/* Focus position: which part of the photograph survives the crop. */
.aoh-pagehero--focus-center .aoh-pagehero-media__img { object-position: 50% 50%; }
.aoh-pagehero--focus-left .aoh-pagehero-media__img { object-position: 0% 50%; }
.aoh-pagehero--focus-right .aoh-pagehero-media__img { object-position: 100% 50%; }
.aoh-pagehero--focus-top .aoh-pagehero-media__img { object-position: 50% 0%; }
.aoh-pagehero--focus-bottom .aoh-pagehero-media__img { object-position: 50% 100%; }

/* A photograph needs room to be a photograph, so the band is taller when one
   is set. Padding and not a min-height: the copy stays in normal flow exactly
   where it was, at exactly the sizes it was, and only the band around it
   grows. The orange glow is the no-image treatment and would only muddy a
   photograph, so it is dropped here. */
.aoh-menuhero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }
.aoh-menuhero.aoh-pagehero--image .aoh-menuhero__glow { display: none; }
/* Over a photograph the supporting line needs more than the muted grey it uses
   on flat charcoal, and the chips need a solid ground rather than a
   translucent one. Same sizes, same weights, same spacing. */
.aoh-menuhero.aoh-pagehero--image .aoh-menuhero__lead { color: rgba(245, 239, 230, 0.9); }
.aoh-menuhero.aoh-pagehero--image .aoh-menuhero__chip { background: rgba(14, 14, 16, 0.62); border-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); }

/* ---- Our Menu: visual category navigator ---- */
/* One compact horizontal track at every width, pinned directly under the fixed
   site header while the visitor scrolls the menu. Only the tiles-per-view
   changes; the row centres itself while every category fits and becomes a
   swipeable, arrow-driven slider as soon as it does not. Each tile is two
   stacked circles — a muted orange backing plate with the photo clipped inside
   it — so the accent reads as a plate rather than a border line. Nothing in a
   tile moves on hover: only the photo zooms inside its clip.
   --aoh-catnav-h mirrors the real band height at each breakpoint and is what
   the menu sections use as their anchor offset; menu-navigator.js measures the
   live element, so clicked anchors stay exact whatever the band ends up. */
:root { --aoh-catnav-h: 154px; }
@media (min-width: 600px) { :root { --aoh-catnav-h: 160px; } }
@media (min-width: 768px) { :root { --aoh-catnav-h: 167px; } }
@media (min-width: 1024px) { :root { --aoh-catnav-h: 173px; } }
@media (min-width: 1200px) { :root { --aoh-catnav-h: 180px; } }
.aoh-catnav {
	--aoh-catnav-gap: 0.6rem;
	--aoh-catnav-cards: min(var(--aoh-catnav-total, 99), 2.6);
	--aoh-catnav-tile: 80px;
	--aoh-catnav-max: 128px;
	--aoh-catnav-inset: 4px;
	--aoh-catnav-name: 0.95rem;
	--aoh-catnav-label-gap: 0.65rem;
	--aoh-catnav-pad: 0.65rem;
	--aoh-catnav-plate: #9c4f0b;
	--aoh-catnav-plate-active: #cf6a10;
	--aoh-catnav-zoom: 1.05;
	--aoh-catnav-dur: 240ms;
	position: sticky;
	top: calc(var(--aoh-admin-bar-h) + var(--aoh-header-h));
	z-index: 85;
	background: var(--aoh-bg-dark);
	border-bottom: 1px solid var(--aoh-hairline);
	padding-block: var(--aoh-catnav-pad);
}
.aoh-catnav__inner { display: flex; align-items: flex-start; justify-content: center; gap: 0.5rem; }
.aoh-catnav__track { display: flex; flex: 1 1 auto; min-width: 0; gap: var(--aoh-catnav-gap); justify-content: safe center; list-style: none; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.aoh-catnav__track::-webkit-scrollbar { display: none; }
.aoh-catnav__track:focus-visible { outline: var(--aoh-focus); outline-offset: 4px; border-radius: var(--aoh-radius-card); }
.aoh-catnav__item { flex: 1 0 calc((100% - (var(--aoh-catnav-cards) - 1) * var(--aoh-catnav-gap)) / var(--aoh-catnav-cards)); max-width: var(--aoh-catnav-max); scroll-snap-align: start; }
.aoh-catnav__link { --aoh-catnav-accent: var(--aoh-orange); display: flex; flex-direction: column; align-items: center; gap: var(--aoh-catnav-label-gap); min-height: 44px; padding: 0.1rem 0.1rem 0.2rem; text-align: center; text-decoration: none; color: var(--aoh-text); }
.aoh-catnav__link[data-aoh-accent="amber"] { --aoh-catnav-accent: var(--aoh-amber); }
.aoh-catnav__link[data-aoh-accent="ember"] { --aoh-catnav-accent: var(--aoh-orange-dark); }
.aoh-catnav__link[data-aoh-accent="sand"] { --aoh-catnav-accent: var(--aoh-sand); }
/* Outer circle: the muted orange backing plate. Its padding is the only thing
   that decides how much of the plate stays visible around the photo. */
.aoh-catnav__media { position: relative; width: min(100%, var(--aoh-catnav-tile)); aspect-ratio: 1; padding: var(--aoh-catnav-inset); border-radius: 50%; background: var(--aoh-catnav-plate); transition: background-color var(--aoh-catnav-dur) var(--aoh-ease); }
/* Inner circle: clips the photo and casts a soft shadow onto the plate. */
.aoh-catnav__frame { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--aoh-surface-raised); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.4); }
.aoh-catnav__img, .aoh-catnav__mark { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: transform var(--aoh-catnav-dur) var(--aoh-ease); }
.aoh-catnav__frame--fallback { display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(255, 122, 0, 0.18), var(--aoh-surface-raised) 70%); }
.aoh-catnav__frame--fallback .aoh-catnav__mark { width: 52%; height: auto; opacity: 0.85; }
/* Badge centre sits on the plate's lower-right edge (85.4% = 50% + 50%/sqrt2). */
.aoh-catnav__badge { position: absolute; left: 85.4%; top: 85.4%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--aoh-catnav-accent); color: var(--aoh-bg-dark); border: 3px solid var(--aoh-bg-dark); }
.aoh-catnav__badge .aoh-icon { width: 0.78rem; height: 0.78rem; }
.aoh-catnav__name { font-weight: 600; font-size: var(--aoh-catnav-name); line-height: 1.2; transition: color var(--aoh-catnav-dur) var(--aoh-ease); }
/* Hover and focus never move the tile: the photo alone zooms inside its clip. */
@media (hover: hover) {
	.aoh-catnav__link:hover .aoh-catnav__img, .aoh-catnav__link:hover .aoh-catnav__mark { transform: scale(var(--aoh-catnav-zoom)); }
	.aoh-catnav__link:hover .aoh-catnav__media { background: var(--aoh-catnav-plate-active); }
	.aoh-catnav__link:hover .aoh-catnav__name { color: var(--aoh-orange); }
}
.aoh-catnav__link:focus-visible { outline: var(--aoh-focus); outline-offset: 3px; border-radius: var(--aoh-radius-card); }
.aoh-catnav__link:focus-visible .aoh-catnav__img, .aoh-catnav__link:focus-visible .aoh-catnav__mark { transform: scale(var(--aoh-catnav-zoom)); }
.aoh-catnav__link:focus-visible .aoh-catnav__media { background: var(--aoh-catnav-plate-active); }
.aoh-catnav__link.is-active .aoh-catnav__media, .aoh-catnav__link[aria-current="true"] .aoh-catnav__media { background: var(--aoh-catnav-plate-active); }
.aoh-catnav__link.is-active .aoh-catnav__name, .aoh-catnav__link[aria-current="true"] .aoh-catnav__name { color: var(--aoh-orange); }
@media (prefers-reduced-motion: reduce) {
	.aoh-catnav__img, .aoh-catnav__mark { transition: none; }
	.aoh-catnav__link:hover .aoh-catnav__img, .aoh-catnav__link:hover .aoh-catnav__mark,
	.aoh-catnav__link:focus-visible .aoh-catnav__img, .aoh-catnav__link:focus-visible .aoh-catnav__mark { transform: none; }
}
/* The arrows share the row with the track so the band stays one line tall and
   so they sit on the container edges rather than over the tiles;
   display:contents lets menu-navigator.js keep hiding the pair with [hidden].
   They are bare chevrons: the 44px box is only the hit area, nothing paints. */
.aoh-catnav__nav { display: contents; }
.aoh-catnav__nav[hidden] { display: none; }
.aoh-catnav__arrow { align-self: flex-start; margin-top: calc(var(--aoh-catnav-tile) / 2 - 22px + 0.1rem); display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--aoh-text); cursor: pointer; transition: color var(--aoh-catnav-dur) var(--aoh-ease), opacity var(--aoh-catnav-dur) var(--aoh-ease); }
.aoh-catnav__arrow--prev { order: -1; }
.aoh-catnav__arrow:hover:not(:disabled), .aoh-catnav__arrow:focus-visible:not(:disabled) { color: var(--aoh-orange); }
.aoh-catnav__arrow:focus-visible { outline: var(--aoh-focus); outline-offset: 2px; border-radius: 6px; }
.aoh-catnav__arrow:disabled { opacity: 0.3; cursor: default; }
.aoh-catnav__arrow .aoh-icon { width: 1.4rem; height: 1.4rem; }
.aoh-catnav__arrow--prev .aoh-icon { transform: scaleX(-1); }
/* Below 768px the row is swipe-first: the arrows would eat the width the peek
   needs, so touch, trackpad and keyboard drive the track instead. */
@media (max-width: 767px) { .aoh-catnav__arrow { display: none; } }
@media (min-width: 600px) { .aoh-catnav { --aoh-catnav-gap: 0.7rem; --aoh-catnav-cards: min(var(--aoh-catnav-total, 99), 3.6); --aoh-catnav-tile: 84px; --aoh-catnav-max: 140px; --aoh-catnav-pad: 0.7rem; } }
@media (min-width: 768px) { .aoh-catnav { --aoh-catnav-gap: 0.75rem; --aoh-catnav-cards: min(var(--aoh-catnav-total, 99), 3.9); --aoh-catnav-tile: 88px; --aoh-catnav-max: 150px; --aoh-catnav-name: 1rem; --aoh-catnav-pad: 0.75rem; --aoh-catnav-inset: 5px; } }
@media (min-width: 1024px) { .aoh-catnav { --aoh-catnav-gap: 0.8rem; --aoh-catnav-cards: min(var(--aoh-catnav-total, 99), 5.4); --aoh-catnav-tile: 92px; --aoh-catnav-max: 155px; --aoh-catnav-name: 1.0625rem; } }
/* Every breakpoint caps the tiles-per-view; when there are fewer categories
   than that cap, --aoh-catnav-total takes over, the basis stops overflowing
   and the row spreads across the whole container (up to --aoh-catnav-max)
   with the arrows hidden. Past the cap the basis overflows and the slider,
   the peek and the arrows come back. */
@media (min-width: 1200px) { .aoh-catnav { --aoh-catnav-gap: 0.875rem; --aoh-catnav-cards: min(var(--aoh-catnav-total, 99), 7.4); --aoh-catnav-tile: 96px; --aoh-catnav-max: 160px; --aoh-catnav-name: 1.125rem; } }

/* The whole listing area under the navigator is one dark surface; the anchor
   offset clears the fixed header and the sticky navigator together. */
.aoh-menu-group { padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: calc(var(--aoh-admin-bar-h) + var(--aoh-header-h) + var(--aoh-catnav-h) + 1rem); }
/* One header row per category — name left, real item count right — closed by a
   neutral hairline that runs the full width of the content container, from the
   title's left edge to the grid's right edge. 18px above it, 32px below. */
.aoh-menu-group__head { margin-bottom: 2rem; padding-bottom: 1.125rem; border-bottom: 1px solid var(--aoh-hairline-strong); }
.aoh-menu-group__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.aoh-menu-group__row .aoh-title { min-width: 0; overflow-wrap: break-word; }
.aoh-menu-group__desc { margin: 0.75rem 0 0; color: rgba(245, 239, 230, 0.78); max-width: 40rem; }
.aoh-menu-group__count { flex: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 239, 230, 0.55); white-space: nowrap; }
.aoh-menu-group--ink, .aoh-menu-group--charcoal { background: var(--aoh-bg-light); color: var(--aoh-text); }

/* The listing grid. The cards themselves are the homepage's `.aoh-dish` block,
   untouched — only the number of columns belongs to this page. Fixed column
   counts (not auto-fit) are what keep a short last row starting at the normal
   left content edge instead of stretching to fill it. */
.aoh-menu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1023px) { .aoh-menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (max-width: 599px) { .aoh-menu-cards { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* The list layout, a presentation variant of the same grid and the same card:
   two horizontal cards per desktop row, one per row from tablet down. These
   rules must stay after the base breakpoints above — they carry the same
   specificity, so source order is what makes them win. A short final row still
   starts at the left content edge, because the column count is fixed, and
   `grid-auto-rows: 1fr` keeps a lone last card the same height as the pair
   above it instead of shrinking to its own text. */
.aoh-menu-cards--list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (max-width: 1023px) { .aoh-menu-cards--list { grid-template-columns: minmax(0, 1fr); } }

/* Horizontal card: photo left, text right. Only the direction and the photo's
   share of the width belong to this modifier — background, border, radius,
   clipping, typography, hover and image zoom are the `.aoh-dish` rules above,
   inherited untouched, so the two variants cannot drift apart. The photo has
   no aspect ratio of its own here: it stretches to whatever height the text
   column sets, and the shared menu media rule below fits the whole item inside
   it without cropping. */
.aoh-dish--row { flex-direction: row; }
.aoh-dish--row .aoh-dish__media { flex: 0 0 44%; aspect-ratio: auto; align-self: stretch; }
.aoh-dish--row .aoh-dish__body { flex: 1; min-width: 0; min-height: 9.5rem; justify-content: center; }
.aoh-dish--row .aoh-dish__placeholder { max-width: 42%; max-height: 34%; }
@media (max-width: 599px) {
	/* Keep it horizontal on phones — only the proportions and the internal
	   padding shrink, so the image still reads and the text still wraps. */
	.aoh-dish--row .aoh-dish__media { flex-basis: 39%; }
	.aoh-dish--row .aoh-dish__body { min-height: 8rem; gap: 0.4rem; padding: 1rem 1.1rem; }
	.aoh-dish--row .aoh-dish__title { font-size: 1.1rem; }
	.aoh-dish--row .aoh-dish__desc { font-size: 0.9rem; line-height: 1.45; }
}
/* Our Menu item media — the single shared rule for both card variants, and the
   only place this page's media background and image fit are declared. Scoped
   to `.aoh-menu-cards` on purpose: the homepage Featured Menu keeps its dark
   media box and its cover crop, and these two-class selectors out-specify the
   per-photo `object-position` nudges further up, which stay for the homepage.

   Nothing here may crop the product. `contain` inside a padded box scales each
   photo down until all of it fits, with breathing room on every side, and the
   space left over shows the neutral plate — the intended look for the cutout
   photographs, not a fallback. So a wide plate uses the full width and a tall
   item keeps grey at its sides: that is the trade this page makes in exchange
   for never cutting a sandwich, a tray, or its shadow. */
.aoh-menu-cards .aoh-dish__media,
.aoh-featured__grid--plated .aoh-dish__media { background: var(--aoh-menu-media-bg); padding: clamp(12px, 1.5vw, 20px); }
.aoh-menu-cards .aoh-dish__media img:not(.aoh-dish__placeholder),
.aoh-featured__grid--plated .aoh-dish__media img:not(.aoh-dish__placeholder) { width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* The brand mark is drawn white for dark surfaces; on the light plate it needs
   inverting to read at all. Fallback state only — no photo exists here. */
.aoh-menu-cards .aoh-dish__media .aoh-dish__placeholder,
.aoh-featured__grid--plated .aoh-dish__media .aoh-dish__placeholder { filter: invert(1); opacity: 0.18; }
@media (hover: hover) {
	/* No image zoom on this page. Under `contain` the photo already touches two
	   edges of its box, so any scale would clip the product, and the no-cropping
	   rule outranks matching the homepage's zoom. The card still answers the
	   pointer with its lift, its lighter background and its shadow. */
	.aoh-menu-cards .aoh-dish:hover .aoh-dish__media img,
	.aoh-featured__grid--plated .aoh-dish:hover .aoh-dish__media img { transform: none; }
}

/* Our Menu prints the whole description. The shared dish card clamps it to
   three lines, which is right where a card is a teaser for a page that will
   say more — the homepage strip, a related-items row — but Our Menu IS that
   page: there is nowhere further to read, so a clamp there just hides half of
   what the kitchen says about the dish. Dropping the -webkit-box display is
   what removes it; -webkit-line-clamp only does anything inside that display
   type, so this one declaration also retires the six- and four-line variants
   the text-only card used to need. The card still grows to fit, the text still
   wraps inside it, and nothing overflows.

   Scoped to .aoh-menu-cards on purpose: the homepage keeps its three lines. */
.aoh-menu-cards .aoh-dish__desc { display: block; -webkit-line-clamp: none; overflow: visible; }

/* The text-only card. Half of the real menu — the sauces, the drinks, several
   of the bowls — has no photograph, and the honest answer to that is not an
   empty grey plate repeated thirty-five times, nor somebody else's dinner: it
   is a card with no picture in it. The media box is gone from the markup
   entirely, so there is nothing to load, nothing to fail, and nothing for a
   screen reader to announce.

   Everything that makes it a card stays: the same surface, the same radius,
   the same inset hairline, the same hover lift, the same padding rhythm and
   the same type. Only two things are added, and both exist so the card reads
   as deliberate rather than unfinished. The text is centred in the space the
   photo would have used, because a short name pinned to the top of a tall
   empty card is what "missing" looks like. */
.aoh-menu-cards .aoh-dish--textonly .aoh-dish__body { justify-content: center; min-height: 13.5rem; padding-block: 1.6rem 1.75rem; }
/* Badged and pictureless at once. Nothing on the menu is that today — both
   badges belong to photographed products — but the pill is absolutely placed,
   so the card has to hold a lane open for it rather than print it over the
   product's name. */
.aoh-menu-cards .aoh-dish--textonly-badged .aoh-dish__body { padding-top: 3.25rem; }
/* List layout: the text column was already the whole card's height, so it only
   needs the width the photo has given up. */
.aoh-menu-cards--list .aoh-dish--textonly .aoh-dish__body { min-height: 9.5rem; padding-inline: 1.5rem; }
@media (max-width: 599px) {
	.aoh-menu-cards .aoh-dish--textonly .aoh-dish__body { min-height: 0; }
	.aoh-menu-cards--list .aoh-dish--textonly .aoh-dish__body { padding: 1.1rem 1.2rem; }
	.aoh-menu-cards--list .aoh-dish--textonly .aoh-dish__title { font-size: 1.1rem; }
	.aoh-menu-cards--list .aoh-dish--textonly .aoh-dish__desc { font-size: 0.9rem; line-height: 1.45; }
}

/* Closing CTA — one full-bleed photographic band between the last category and
   the footer. It is a band, not a second hero: the photograph is a bundled
   theme asset (no remote request, no attachment to delete) and `--aoh-bg-dark`
   underneath means a failed image decode leaves readable white-on-dark rather
   than white-on-white. Centred, on the accent rule, at the same heading size
   and with the same button as the Deals band: the two closing CTAs are one
   design on two photographs, so only the picture changes between pages. */
.aoh-menu-cta {
	position: relative; isolation: isolate;
	display: grid; align-items: center;
	min-height: clamp(280px, 62vw, 340px);
	padding-block: clamp(2.25rem, 6vw, 3rem);
	color: var(--aoh-text);
	background-color: var(--aoh-bg-dark);
	background-image: url("../img/photo/hero-spread-2000.webp");
	background-image: image-set(url("../img/photo/hero-spread-2000.avif") type("image/avif"), url("../img/photo/hero-spread-2000.webp") type("image/webp"));
	background-repeat: no-repeat;
	background-size: cover;
	/* Pushed right of centre: the platter and the fries stay in the open half
	   while the text sits over the darkest part of the gradient. */
	background-position: 64% 56%;
}
/* Negative z-index paints above the element's own background and below its
   content — the overlay the white type needs, with no extra element. The veil
   went where the copy went: a flat wash plus a radial that falls to near-black
   at the edges, so the centred block sits in the darkest part of the band and
   the bright fries on the right no longer come up behind white type. */
.aoh-menu-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(105% 130% at 50% 45%, rgba(8, 8, 9, 0.58) 0%, rgba(8, 8, 9, 0.86) 52%, rgba(8, 8, 9, 0.97) 100%),
		linear-gradient(0deg, rgba(8, 8, 9, 0.55), rgba(8, 8, 9, 0.55));
}
.aoh-menu-cta__inner { position: relative; }
.aoh-menu-cta__copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; max-width: 52rem; margin-inline: auto; }
/* Larger than the page's other headings, so the closing line is the loudest
   thing on the band, with the brand's own accent rule above it. */
.aoh-menu-cta__title { margin: 0; font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); }
.aoh-menu-cta__title::before {
	content: ""; display: block; width: 2.25rem; height: 3px; margin: 0 auto 1.1rem;
	background: var(--aoh-orange); border-radius: 2px;
}
/* Out-specifies the generic `.aoh-on-dark p` so the supporting line keeps its
   own size and weight of colour rather than the page-wide paragraph tone. */
.aoh-menu-cta .aoh-menu-cta__lead { margin: 0 auto; max-width: 30rem; color: rgba(245, 239, 230, 0.88); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
/* The same block the Deals band uses: the site's pill traded for a
   soft-cornered button with a warm glow, so it carries the whole band. */
.aoh-menu-cta__button {
	margin-top: 1.4rem;
	padding: 1.15rem 2.75rem; min-height: 3.6rem; border-radius: 10px;
	font-size: 1rem; letter-spacing: 0.06em;
	box-shadow: 0 12px 34px rgba(255, 122, 0, 0.3);
}
.aoh-menu-cta__button:hover { box-shadow: 0 14px 38px rgba(255, 122, 0, 0.42); }
@media (min-width: 768px) {
	/* Taller from tablet up, matching the Deals band. The copy column no longer
	   needs the old cap that held it out of the floating order card's lane: the
	   block is centred and 52rem wide, which measures clear of the card (375px,
	   20px off the right edge) at every width from 768px up. */
	.aoh-menu-cta { min-height: clamp(380px, 30vw, 460px); padding-block: clamp(3rem, 5vw, 4.25rem); }
}
@media (max-width: 767px) {
	/* A narrow viewport crops the photograph hard, so the vignette tightens:
	   the type keeps the same contrast wherever the crop lands. */
	.aoh-menu-cta { background-position: 62% 55%; }
	.aoh-menu-cta::before {
		background:
			radial-gradient(120% 110% at 50% 45%, rgba(8, 8, 9, 0.6), rgba(8, 8, 9, 0.86) 55%, rgba(8, 8, 9, 0.96) 100%),
			linear-gradient(0deg, rgba(8, 8, 9, 0.58), rgba(8, 8, 9, 0.58));
	}
}

/* Legacy menu category structure (Catering page still uses it) */
.aoh-menu-category { padding-block: 2.5rem; scroll-margin-top: calc(var(--aoh-admin-bar-h) + var(--aoh-header-h) + var(--aoh-menu-nav-h) + 0.5rem); }
.aoh-menu-category + .aoh-menu-category { border-top: 1px solid var(--aoh-line-light); }
.aoh-menu-category__desc { color: var(--aoh-graphite); max-width: 44rem; }

/* ---- Page header (internal pages) ---- */
.aoh-page-header { position: relative; background: var(--aoh-near-black); color: var(--aoh-off-white); padding-block: clamp(2.75rem, 6vw, 4.5rem); overflow: hidden; }
.aoh-page-header::after { content: ""; position: absolute; inset: auto -10% -60% auto; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 0, 0.16), transparent); pointer-events: none; }
.aoh-page-header h1 { margin: 0; color: var(--aoh-off-white); font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); }
.aoh-page-header__lead { margin: 0.9rem 0 0; color: rgba(247, 242, 234, 0.78); max-width: 40rem; font-size: 1.1rem; }
.aoh-page-header .aoh-container { position: relative; z-index: 1; }

/* ---- Generic cards (inner pages) ---- */
.aoh-card { display: flex; flex-direction: column; background: var(--aoh-white); border: 1px solid var(--aoh-line-light); border-radius: var(--aoh-radius-lg); overflow: hidden; transition: border-color var(--aoh-transition); }
.aoh-card:hover { border-color: rgba(255, 122, 0, 0.5); }
.aoh-card__media { aspect-ratio: 3 / 2; background: var(--aoh-sand); display: block; overflow: hidden; }
.aoh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aoh-card__media--placeholder { display: grid; place-items: center; color: var(--aoh-stone); font-size: 0.85rem; }
.aoh-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.aoh-card__title { margin: 0; font-size: 1.2rem; text-transform: none; }
.aoh-card__title a { color: inherit; text-decoration: none; }
.aoh-card__title a:hover { color: var(--aoh-orange-dark); }
.aoh-card__text { margin: 0; color: var(--aoh-graphite); font-size: 0.95rem; }
.aoh-card__meta { margin: 0; color: var(--aoh-stone); font-size: 0.85rem; }
.aoh-card__footer { margin-top: auto; padding-top: 0.5rem; }
.aoh-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.aoh-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--aoh-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--aoh-sand); color: var(--aoh-near-black); }
.aoh-badge--featured, .aoh-badge--special, .aoh-badge--new { background: var(--aoh-orange); color: var(--aoh-black); }
.aoh-badge--spicy { background: #b3261e; color: var(--aoh-white); }
.aoh-deal__badge { max-height: 3rem; width: auto; }

/* ---- Locations (internal) ---- */
.aoh-location-card__address { margin: 0; font-size: 0.95rem; }
.aoh-hours { max-width: 24rem; }
.aoh-hours th { text-align: left; font-weight: 600; padding: 0.35rem 0.75rem 0.35rem 0; }
.aoh-hours td { padding: 0.35rem 0; }
.aoh-hours__row--closed td { color: var(--aoh-stone); }
.aoh-hours__row--unknown td { color: var(--aoh-stone); font-style: italic; }
.aoh-location-map { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--aoh-radius); background: var(--aoh-sand); }
.aoh-archive-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.aoh-archive-filters p { margin: 0; }

/* ---- Forms ---- */
.aoh-form { max-width: 40rem; }
.aoh-form__row, .aoh-field { margin-bottom: 1rem; }
.aoh-form__row label, .aoh-field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.aoh-form__row .aoh-required, .aoh-field .aoh-required { color: var(--aoh-orange-dark); }
.aoh-form input[type="text"], .aoh-form input[type="email"], .aoh-form input[type="tel"], .aoh-form input[type="date"],
.aoh-form input[type="number"], .aoh-form select, .aoh-form textarea {
	width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--aoh-stone); border-radius: var(--aoh-radius);
	font: inherit; background: var(--aoh-white); color: var(--aoh-near-black);
}
.aoh-form textarea { min-height: 8rem; resize: vertical; }
.aoh-form__hint { font-size: 0.85rem; color: var(--aoh-stone); margin: 0.25rem 0 0; }
.aoh-form__honeypot { position: absolute; left: -9999px; }
.aoh-form .aoh-button { margin-top: 0.5rem; }
.aoh-field--error input, .aoh-field--error select, .aoh-field--error textarea { border-color: #b3261e; }
.aoh-field__error { margin: 0.25rem 0 0; font-size: 0.85rem; color: #b3261e; font-weight: 600; }
.aoh-field__consent label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.aoh-field__consent input { margin-top: 0.3rem; flex: none; }
.aoh-notice--error ul { margin: 0.5rem 0 0 1.2rem; }
.aoh-badge--coming-soon { background: var(--aoh-near-black); color: var(--aoh-white); }

/* ---- Notices / empty state ---- */
.aoh-notice { padding: 0.9rem 1rem; border-left: 4px solid var(--aoh-orange); background: var(--aoh-white); margin: 1rem 0; border-radius: var(--aoh-radius); }
.aoh-notice--success { border-left-color: #1e7e34; }
.aoh-notice--error, .aoh-notice--warning { border-left-color: #b3261e; }
.aoh-empty-state { padding: 1.5rem; border: 1px dashed var(--aoh-stone); border-radius: var(--aoh-radius); color: var(--aoh-graphite); background: var(--aoh-white); }
.aoh-empty-state p { margin: 0; }
.aoh-section--charcoal .aoh-empty-state, .aoh-section--ink .aoh-empty-state, .aoh-section--dark .aoh-empty-state, .aoh-menu-group--ink .aoh-empty-state, .aoh-menu-group--charcoal .aoh-empty-state { background: transparent; color: rgba(247, 242, 234, 0.8); border-color: var(--aoh-line-dark); }
.aoh-admin-hint { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--aoh-orange-dark); }
.aoh-section--charcoal .aoh-admin-hint, .aoh-section--ink .aoh-admin-hint, .aoh-section--dark .aoh-admin-hint, .aoh-section--media .aoh-admin-hint, .aoh-hero .aoh-admin-hint, .aoh-header .aoh-admin-hint, .aoh-footer .aoh-admin-hint { color: var(--aoh-orange); }
.aoh-dev-placeholder { padding: 0.75rem 1rem; background: #fff6e5; border: 1px dashed var(--aoh-orange); border-radius: var(--aoh-radius); font-size: 0.9rem; color: var(--aoh-near-black); }
.aoh-dev-placeholder__tag { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--aoh-orange-dark); margin-right: 0.5rem; }

/* ---- Blog ---- */
.aoh-post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.aoh-post-list__item { border-bottom: 1px solid var(--aoh-line-light); padding-bottom: 1.5rem; }
.aoh-post-meta { color: var(--aoh-stone); font-size: 0.9rem; }
.aoh-entry-header { margin-bottom: 1.5rem; }
.aoh-entry-thumb img { border-radius: var(--aoh-radius); }
.aoh-pagination { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aoh-pagination .page-numbers { padding: 0.4rem 0.75rem; border: 1px solid var(--aoh-line-light); border-radius: var(--aoh-radius); text-decoration: none; }
.aoh-pagination .page-numbers.current { background: var(--aoh-near-black); color: var(--aoh-white); }

/* ---- Search form ---- */
.aoh-search-form { display: flex; gap: 0.5rem; max-width: 30rem; }
.aoh-search-form input[type="search"] { flex: 1; padding: 0.6rem 0.75rem; border: 1px solid var(--aoh-stone); border-radius: var(--aoh-radius); font: inherit; }


/* ---- Deals page -----------------------------------------------------------
   Four bands on one dark surface: the shared image hero, the unified deal
   grid, the three steps, and the closing photographic CTA. There is no
   "featured" treatment anywhere in here — every deal card is the same
   component at the same size, because the only thing that orders them is the
   display order an editor set. */

/* Hero. Same anatomy as the Our Menu hero and the same shared background
   mechanism (.aoh-pagehero-*), so the crop, the focus position, the mobile
   image and the dark overlay behave identically; a page with no hero image
   still lands on the approved dark band. */
.aoh-dealhero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-dealhero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-dealhero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.aoh-dealhero__eyebrow { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-dealhero__title { margin: 0; font-size: clamp(2.55rem, 1.65rem + 3.8vw, 4.4rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
/* Each half of the headline stays whole: it may move onto its own line, but
   "MORE FLAVOR." never breaks after "MORE". */
.aoh-dealhero__title-line { white-space: nowrap; }
.aoh-dealhero__title-line--accent { color: var(--aoh-orange); }
.aoh-dealhero__lead { margin: 0; max-width: 46rem; color: var(--aoh-text-muted); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; }
.aoh-dealhero__benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; list-style: none; margin: 0.35rem 0 0; padding: 0; }
.aoh-dealhero__benefit { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aoh-text); }
.aoh-dealhero__benefit-icon { display: inline-flex; color: var(--aoh-orange); }
.aoh-dealhero__benefit-icon .aoh-icon { width: 1rem; height: 1rem; }
/* With a photograph behind it the band grows and the orange glow goes: the
   glow is the no-image treatment and would only muddy a photo. */
.aoh-dealhero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }
.aoh-dealhero.aoh-pagehero--image .aoh-dealhero__glow { display: none; }
.aoh-dealhero.aoh-pagehero--image .aoh-dealhero__lead { color: rgba(245, 239, 230, 0.9); }
@media (max-width: 374px) {
	.aoh-dealhero__benefits { gap: 0.4rem 1rem; }
	.aoh-dealhero__benefit { font-size: 0.72rem; }
}

/* Current Deals */
.aoh-deals { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3rem, 6vw, 5rem); }
.aoh-deals__head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.aoh-deals__head .aoh-title { margin-bottom: 0.75rem; }
.aoh-deals__lead { margin: 0; max-width: 42rem; color: var(--aoh-text-muted); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; }

/* One fixed track, never auto-fit. A last row holding one deal keeps it at
   column width on the left instead of stretching it across the row or
   centring it, so the grid reads the same however many deals are live. */
.aoh-deals__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; list-style: none; margin: 0; padding: 0; justify-content: start; }
.aoh-deals__item { display: flex; }
@media (min-width: 768px) { .aoh-deals__grid { grid-template-columns: repeat(2, 1fr); gap: 1.35rem; } }
@media (min-width: 1160px) { .aoh-deals__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* The card. Raised charcoal on the page's dark ground, one hairline, orange
   for the offer and nothing else. The hover answer is a border and a glow and
   deliberately not a lift: a grid of cards that jump as the pointer crosses
   them is noise, and a card that moves out from under a pointer heading for
   its Copy button is worse than noise. */
.aoh-deal-card {
	flex: 1; display: flex; flex-direction: column;
	padding: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
	background: var(--aoh-surface-raised);
	border: 1px solid var(--aoh-hairline-strong);
	border-radius: var(--aoh-radius-lg);
	transition: border-color var(--aoh-transition), box-shadow var(--aoh-transition);
}
@media (hover: hover) {
	.aoh-deal-card:hover { border-color: rgba(255, 122, 0, 0.5); box-shadow: 0 0 0 1px rgba(255, 122, 0, 0.16), 0 16px 36px rgba(0, 0, 0, 0.38); }
}
/* Optional, and optional means absent: no badge prints no element, so the
   offer value starts at the top of the card with nothing held open for it. */
.aoh-deal-card__badge {
	align-self: flex-start; margin: 0 0 0.85rem; padding: 0.34rem 0.72rem;
	border: 1px solid rgba(255, 122, 0, 0.35); border-radius: var(--aoh-pill); background: rgba(255, 122, 0, 0.1);
	color: var(--aoh-orange); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase;
}
.aoh-deal-card__value { margin: 0 0 0.4rem; color: var(--aoh-orange); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.15rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.005em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
.aoh-deal-card__title { margin: 0 0 0.5rem; color: var(--aoh-text); font-family: var(--aoh-font-body); font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.aoh-deal-card__text { margin: 0 0 1.15rem; color: var(--aoh-text-muted); font-size: 0.93rem; line-height: 1.6; }
/* Everything above is as tall as its own words; the promo panel and the small
   print are pushed to the foot, so cards in a row line up along the bottom. */
.aoh-deal-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.8rem; }

/* Code panel: scoped overrides of the shared .aoh-promo, which is styled for
   the light surfaces it appears on elsewhere. An offer with no code prints no
   panel at all rather than an empty dashed box. The code and its button sit on
   one line with no heading above them — seven cards repeating the same label
   told the reader nothing the dashed panel and the button did not already say,
   and dropping it takes real height off every card. */
.aoh-deal-card__promo {
	position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
	padding: 0.4rem 0.45rem 0.4rem 0.75rem;
	border: 1px dashed rgba(255, 122, 0, 0.45); border-radius: var(--aoh-radius); background: rgba(255, 122, 0, 0.06);
}
/* Wraps to a second line only when the two genuinely will not fit. */
.aoh-deal-card__promo .aoh-promo__code { flex: 1 1 5rem; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--aoh-text); font-size: 1.02rem; font-weight: 800; letter-spacing: 0.1em; overflow-wrap: anywhere; }
/* Cream by default, so the one control on a dark card is the obvious thing to
   press, and orange only once it is hovered, focused or has just copied.
   transform is cleared because the shared button styles lift and scale on
   hover and press, which inside a single-line row nudges the code beside it. */
.aoh-deal-card__promo .aoh-promo__copy {
	flex: 0 0 auto;
	padding: 0.45rem 0.85rem; min-height: 2.1rem; font-size: 0.72rem;
	background: var(--aoh-cream); color: var(--aoh-black); border-color: var(--aoh-cream);
	transform: none;
}
.aoh-deal-card__promo .aoh-promo__copy:hover,
.aoh-deal-card__promo .aoh-promo__copy:focus-visible,
.aoh-deal-card__promo .aoh-promo__copy.is-copied {
	background: var(--aoh-orange); color: var(--aoh-black); border-color: var(--aoh-orange);
	transform: none; box-shadow: none;
}
/* The site focus ring is orange, which would sit on an orange fill the moment
   this button takes focus. Cream keeps the ring readable against both states. */
.aoh-deal-card__promo .aoh-promo__copy:focus-visible { outline-color: var(--aoh-cream); }
/* The live region stays in the accessibility tree and off the screen: a region
   that is display:none until the moment it gets text is not reliably
   announced, and one that reserves a line leaves a gap under every card. The
   sighted confirmation is the button itself swapping to "Copied". */
.aoh-deal-card__promo .aoh-promo__status,
.aoh-deal-card__promo .aoh-promo__status:empty {
	display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aoh-deal-card__terms { margin: 0; color: var(--aoh-text-muted); font-size: 0.76rem; line-height: 1.5; }

/* Empty state: compact and deliberate, never an empty grid. */
.aoh-deals__empty {
	display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
	max-width: 34rem; margin-inline: auto; padding: clamp(1.75rem, 4vw, 2.75rem);
	text-align: center; background: var(--aoh-surface-raised);
	border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-lg);
}
.aoh-deals__empty-title { margin: 0; color: var(--aoh-text); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; }
.aoh-deals__empty-text { margin: 0 0 0.35rem; color: var(--aoh-text-muted); font-size: 0.95rem; line-height: 1.6; }

/* How to use your deal. Centred as one block — head, the three cards and the
   order button all share the same axis, so the section reads as a single
   centred unit rather than a centred heading over left-aligned content. */
.aoh-steps { background: var(--aoh-bg-light); color: var(--aoh-text); padding-block: clamp(3rem, 6vw, 5rem); }
.aoh-steps__head { max-width: 46rem; margin-inline: auto; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.aoh-steps__head .aoh-title { margin-bottom: 0.75rem; }
.aoh-steps__lead { margin: 0; color: var(--aoh-text-muted); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; }
.aoh-steps__list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .aoh-steps__list { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.aoh-steps__item { padding: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-lg); text-align: center; }
.aoh-steps__num { display: block; margin-bottom: 0.65rem; color: var(--aoh-orange); font-size: 2.45rem; font-weight: 800; line-height: 1; letter-spacing: 0.06em; }
.aoh-steps__title { margin: 0 0 0.4rem; color: var(--aoh-text); font-family: var(--aoh-font-body); font-size: 1.1rem; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.aoh-steps__text { margin: 0; color: var(--aoh-text-muted); font-size: 0.93rem; line-height: 1.6; }
.aoh-steps__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }

/* Closing CTA. The same band as the Our Menu page, on a different photograph:
   a bundled theme asset, so there is no remote request and no attachment to
   delete, and `--aoh-bg-dark` underneath means a failed decode still reads
   white-on-dark. Centred: measured at every width, the fixed order card sits
   clear of the centred block, so nothing runs under it. */
.aoh-deals-cta {
	position: relative; isolation: isolate;
	display: grid; align-items: center;
	min-height: clamp(280px, 62vw, 340px);
	padding-block: clamp(2.25rem, 6vw, 3rem);
	color: var(--aoh-text);
	background-color: var(--aoh-bg-dark);
	background-image: url("../img/photo/packaging-1400.webp");
	background-image: image-set(url("../img/photo/packaging-1400.avif") type("image/avif"), url("../img/photo/packaging-1400.webp") type("image/webp"));
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 66% 50%;
}
/* Vignette veil. A flat wash over the whole photograph plus a radial that goes
   near-black at the edges: the centre keeps just enough of the food to read as
   a photograph, and everything around the copy falls away, so the band is one
   dark field with the headline sitting in it rather than text over a picture. */
.aoh-deals-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(105% 130% at 50% 45%, rgba(8, 8, 9, 0.58) 0%, rgba(8, 8, 9, 0.86) 52%, rgba(8, 8, 9, 0.97) 100%),
		linear-gradient(0deg, rgba(8, 8, 9, 0.55), rgba(8, 8, 9, 0.55));
}
.aoh-deals-cta__inner { position: relative; }
.aoh-deals-cta__copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; max-width: 52rem; margin-inline: auto; }
/* Larger than the page's other headings, so the closing line is the loudest
   thing on the band, with the brand's own accent rule above it. */
.aoh-deals-cta__title { margin: 0; font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); }
.aoh-deals-cta__title::before {
	content: ""; display: block; width: 2.25rem; height: 3px; margin: 0 auto 1.1rem;
	background: var(--aoh-orange); border-radius: 2px;
}
.aoh-deals-cta .aoh-deals-cta__lead { margin: 0 auto; max-width: 30rem; color: rgba(245, 239, 230, 0.88); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.aoh-deals-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.4rem; }
/* One filled destination and one quiet link beside it. The order button trades
   the site's pill for a soft-cornered block with a warm glow so it carries the
   whole band; the menu link drops its outline to a text link with an arrow so
   the two never read as a pair of equal choices. */
.aoh-deals-cta__actions .aoh-button--primary {
	padding: 1.15rem 2.75rem; min-height: 3.6rem; border-radius: 10px;
	font-size: 1rem; letter-spacing: 0.06em;
	box-shadow: 0 12px 34px rgba(255, 122, 0, 0.3);
}
.aoh-deals-cta__actions .aoh-button--primary:hover { box-shadow: 0 14px 38px rgba(255, 122, 0, 0.42); }
.aoh-deals-cta__actions .aoh-button--secondary,
.aoh-deals-cta__actions .aoh-button--secondary:hover {
	background: transparent; border-color: transparent;
	padding-inline: 0.9rem; transform: none; box-shadow: none;
}
.aoh-deals-cta__actions .aoh-button--secondary { color: var(--aoh-text); letter-spacing: 0.06em; font-size: 1rem; }
.aoh-deals-cta__actions .aoh-button--secondary:hover { color: var(--aoh-orange); }
@media (min-width: 768px) {
	.aoh-deals-cta { min-height: clamp(380px, 30vw, 460px); padding-block: clamp(3rem, 5vw, 4.25rem); }
}
@media (max-width: 767px) {
	.aoh-deals-cta { background-position: 62% 52%; }
	.aoh-deals-cta::before {
		background:
			radial-gradient(120% 110% at 50% 45%, rgba(8, 8, 9, 0.6), rgba(8, 8, 9, 0.86) 55%, rgba(8, 8, 9, 0.96) 100%),
			linear-gradient(0deg, rgba(8, 8, 9, 0.58), rgba(8, 8, 9, 0.58));
	}
	/* Two full-width buttons rather than a cramped row: the secondary link is
	   as much of a destination as the primary one on a phone. */
	.aoh-deals-cta__actions .aoh-button { flex: 1 1 100%; justify-content: center; }
}
/* ---- Shared internal-page hero height ---------------------------------- */
/* Our Menu, Deals and Locations keep their own copy, alignment and background
   treatment. What they now share is a floor. Until now each band was sized
   only by how much text happened to sit inside it, so the same header met a
   short band on one page and a tall one on the next and the internal pages
   read as three separate designs. One token, owned by the design system and
   deliberately absent from WordPress Admin, gives every internal hero the same
   minimum band and centres the copy inside it.

   A minimum, not a fixed height: a hero with more copy still grows past it, so
   no existing hero loses a line or changes its own rhythm. The number is the
   tallest the approved Our Menu and Deals bands already reach, so those two
   keep the height they were signed off at and the newer pages rise to meet
   them rather than the other way round. */
:root {
	--aoh-pagehero-min: 24rem;
}
.aoh-pagehero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Capped against the viewport so a short landscape phone is not handed a
	   full-screen hero; the cap only ever lowers the floor, never the hero, so
	   a taller hero still keeps every line it has. */
	min-height: min(var(--aoh-pagehero-min), 78vh);
}

/* ---- Locations page ---------------------------------------------------- */
/* Hero. Same anatomy as the Our Menu hero - that band is approved, and the
   Locations page is a sibling of it, not a new idea. */
.aoh-lochero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-lochero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-lochero.aoh-pagehero--image .aoh-lochero__glow { display: none; }
.aoh-lochero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; }
.aoh-lochero__eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-lochero__title { margin: 0; font-size: clamp(2.6rem, 1.65rem + 4vw, 4.5rem); text-transform: uppercase; color: var(--aoh-text); }
.aoh-lochero__lead { margin: 0; max-width: 42rem; color: var(--aoh-text-muted); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; }

.aoh-locations { background: var(--aoh-bg-light); color: var(--aoh-text); padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.5rem) clamp(3rem, 2rem + 4vw, 5rem); }
.aoh-locations--bare { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

/* Search. One field, full width, with the icon inside it and a clear control
   that only exists while there is something to clear. */
.aoh-locations__tools { display: flex; flex-direction: column; gap: 0.9rem; }
.aoh-locsearch { position: relative; }
.aoh-locsearch__icon { position: absolute; top: 50%; left: 1.15rem; display: inline-flex; transform: translateY(-50%); color: var(--aoh-text-muted); pointer-events: none; }
.aoh-locsearch__icon .aoh-icon { width: 1.15rem; height: 1.15rem; }
.aoh-locsearch__input { display: block; width: 100%; padding: 0.95rem 3.1rem 0.95rem 3rem; border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-pill); background: var(--aoh-surface-raised); color: var(--aoh-text); font: inherit; font-size: 1rem; }
.aoh-locsearch__input::placeholder { color: var(--aoh-text-muted); }
.aoh-locsearch__input:focus-visible { outline: var(--aoh-focus); outline-offset: 2px; }
.aoh-locsearch__clear { position: absolute; top: 50%; right: 0.7rem; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; transform: translateY(-50%); border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--aoh-text-muted); cursor: pointer; }
.aoh-locsearch__clear:hover { background: rgba(255, 122, 0, 0.16); color: var(--aoh-text); }
.aoh-locsearch__clear:focus-visible { outline: var(--aoh-focus); outline-offset: 2px; }
.aoh-locsearch__clear .aoh-icon { width: 0.95rem; height: 0.95rem; }
.aoh-locsearch__clear[hidden] { display: none; }
.aoh-locsearch__go { margin-top: 0.6rem; }

/* State filters. Generated from the data, so the row grows a pill on its own
   the day a new state opens. It scrolls sideways rather than wrapping into a
   second line on a phone. */
.aoh-locfilter__list { display: flex; gap: 0.5rem; margin: 0; padding: 0.15rem 0 0.35rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.aoh-locfilter__list::-webkit-scrollbar { height: 6px; }
.aoh-locfilter__list::-webkit-scrollbar-thumb { border-radius: var(--aoh-pill); background: rgba(255, 255, 255, 0.18); }
.aoh-locfilter__pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-pill); background: var(--aoh-surface-raised); color: var(--aoh-text); font-family: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.aoh-locfilter__pill:hover { border-color: rgba(255, 122, 0, 0.45); }
.aoh-locfilter__pill:focus-visible { outline: var(--aoh-focus); outline-offset: 2px; }
.aoh-locfilter__pill[aria-pressed="true"] { background: var(--aoh-orange); border-color: var(--aoh-orange); color: #17100a; }
.aoh-locfilter__pill[disabled] { opacity: 0.38; cursor: default; }
.aoh-locfilter__count { display: inline-flex; justify-content: center; min-width: 1.5rem; padding: 0.06rem 0.35rem; border-radius: var(--aoh-pill); background: rgba(255, 255, 255, 0.09); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.aoh-locfilter__pill[aria-pressed="true"] .aoh-locfilter__count { background: rgba(0, 0, 0, 0.22); }

/* Result count and the list/map switch. */
.aoh-locations__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 1.35rem; padding-bottom: 1rem; border-bottom: 1px solid var(--aoh-hairline); }
.aoh-locations__count { margin: 0; color: var(--aoh-text-muted); font-size: 0.88rem; letter-spacing: 0.04em; }
.aoh-locview { display: none; gap: 0.2rem; padding: 0.22rem; border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-pill); background: var(--aoh-surface-raised); }
.aoh-locview__btn { padding: 0.45rem 1.15rem; border: 0; border-radius: var(--aoh-pill); background: transparent; color: var(--aoh-text-muted); font-family: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.aoh-locview__btn[aria-pressed="true"] { background: var(--aoh-orange); color: #17100a; }
.aoh-locview__btn:focus-visible { outline: var(--aoh-focus); outline-offset: 2px; }

.aoh-locations__layout { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.aoh-locations__cards { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.aoh-locations__card { margin: 0; }
.aoh-locations__card[hidden] { display: none; }

/* The map column is sticky, never fixed: it travels with the cards, starts
   below the sticky header and stops with the grid it lives in, so it cannot
   ride over the footer. Its height is the viewport less the header and a
   1.25rem gap top and bottom, so it fills the screen under the header without
   ever sliding behind it; the floor keeps it useful on a short laptop screen
   and the ceiling stops it growing past the list on a tall monitor. No inner
   scroller - the page keeps exactly one scrollbar. The floating Order button
   is the one fixed element that now reaches the map, so the OpenStreetMap
   credit moves to the opposite corner here as it already does on tablet. */
.aoh-locations__mapwrap { display: none; }
@media (min-width: 1024px) {
	.aoh-locations__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 2rem; align-items: start; }
	.aoh-locations__mapwrap { display: block; position: sticky; top: calc(var(--aoh-admin-bar-h) + var(--aoh-header-h) + 1.25rem); align-self: start; height: calc(100vh - var(--aoh-admin-bar-h) - var(--aoh-header-h) - 2.5rem); min-height: 32rem; max-height: 54rem; }
	.aoh-locations__list { min-width: 0; }
}

/* Cards. Text only by design: there are no approved per-branch photographs,
   and a stock shot over a real address would be a lie. */
/* The card is padded by its two bands, not by itself, so the darker footer
   strip can run the full width. overflow:hidden is what lets that strip take
   the rounded bottom corners from the card instead of squaring them off. */
.aoh-loccard { position: relative; overflow: hidden; border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-lg); background: var(--aoh-surface-raised); transition: border-color 0.18s ease, background-color 0.18s ease; }
.aoh-loccard:hover { border-color: rgba(255, 255, 255, 0.2); }
/* Selected is a quiet state, not a spotlight: a single hairline of orange and
   the faintest tint. The title stays cream at every state - it is the branch
   name, not a link. */
.aoh-locations__card.is-selected .aoh-loccard { border-color: rgba(255, 122, 0, 0.45); background: rgba(255, 122, 0, 0.045); }
.aoh-loccard__select { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
/* Drawn inside the card: overflow:hidden above would clip an outset ring. */
.aoh-loccard__select:focus-visible { outline: var(--aoh-focus); outline-offset: -3px; }
/* The optional media panel — a photograph when the record has one, the branded
   type illustration when it does not. The modifier is only ever printed on a
   card that really has one of those, so a card with neither is the exact layout
   it was before this block existed: no reserved column, no collapsed
   placeholder. Beside the text where the card is wide enough to afford it, a
   panel above the text where it is not. The min-height is what stops a branch
   with only a name and an address from squashing its panel into a strip. */
.aoh-loccard--has-media { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: stretch; }
.aoh-loccard__media { position: relative; overflow: hidden; min-height: 8.5rem; background: var(--aoh-surface-deep); }
.aoh-loccard__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.aoh-loccard--has-media .aoh-loccard__body { grid-column: 2; }
.aoh-loccard--has-media .aoh-loccard__footer { grid-column: 1 / -1; }

/* The illustration plate. The drawing is not an icon dropped into a hole: the
   warm floor glow and the charcoal fall-off are the plate, drawn in CSS so they
   reach every edge at any panel shape, and the SVG sits on top carrying only
   the subject. The hairline is where the plate meets the text column. */
.aoh-loccard--media-illustration .aoh-loccard__media {
	background:
		radial-gradient(78% 60% at 50% 94%, rgba(255, 122, 0, 0.20), transparent 72%),
		linear-gradient(168deg, var(--aoh-surface-card-hi), var(--aoh-surface-deep));
	border-right: 1px solid var(--aoh-hairline);
}

/* The icon panel. Flat, not a plate: one wash of black over the card, the same
   wash the action strip carries, so the panel and the strip read as one frame
   around the text and the white symbol is the only thing drawn in it. */
.aoh-loccard--media-icon .aoh-loccard__media {
	background: rgba(0, 0, 0, 0.24);
	border-right: 1px solid var(--aoh-hairline);
}

/* Brand illustrations. Every colour is a theme token, so the drawings follow
   the palette rather than carrying their own copy of it. They scale with
   preserveAspectRatio="meet", which never crops the subject; the ground band is
   drawn far wider than the viewBox so it still reaches both edges when a wide
   panel letterboxes the scene. */
.aoh-illus { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.aoh-illus__glow { fill: var(--aoh-orange); opacity: 0.12; }
.aoh-illus__ground { fill: var(--aoh-black); opacity: 0.45; }
.aoh-illus__dark { fill: var(--aoh-black); }
.aoh-illus__surface { fill: var(--aoh-graphite); }
.aoh-illus__surface-hi { fill: var(--aoh-surface-card-hi); }
.aoh-illus__glass { fill: var(--aoh-bg-dark); }
.aoh-illus__accent { fill: var(--aoh-orange); }
.aoh-illus__detail { fill: var(--aoh-off-white); opacity: 0.82; }
.aoh-illus__line { fill: none; stroke: var(--aoh-mid-grey); stroke-width: 2; opacity: 0.5; }

/* The type icon. It is a symbol, not a scene, so it holds a fixed size in the
   middle of the flat panel instead of filling it, and its colour and stroke
   weight come from theme tokens rather than from the files: white line on the
   black wash. Licence: assets/svg/location-icon/LICENSE.txt. */
.aoh-locicon {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 3.375rem;
	height: 3.375rem;
	color: var(--aoh-white);
	stroke-width: 1.5;
}
.aoh-loccard__body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.05rem 1.15rem 1rem; }
.aoh-loccard__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.aoh-loccard__locality { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-loccard__badge { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.22rem 0.62rem; border-radius: var(--aoh-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.aoh-loccard__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.aoh-loccard__badge--open { color: #7fd18a; background: rgba(127, 209, 138, 0.13); }
.aoh-loccard__badge--closed,
.aoh-loccard__badge--closed_today { color: var(--aoh-text-muted); background: rgba(255, 255, 255, 0.07); }
.aoh-loccard__badge--soon { color: var(--aoh-orange); background: rgba(255, 122, 0, 0.14); }
.aoh-loccard__title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--aoh-text); }
.aoh-loccard:hover .aoh-loccard__title,
.aoh-locations__card.is-selected .aoh-loccard__title { color: var(--aoh-text); }
.aoh-loccard__address,
.aoh-loccard__hours,
.aoh-loccard__phone { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--aoh-text-muted); font-size: 0.92rem; line-height: 1.5; }
.aoh-loccard__hours .aoh-icon,
.aoh-loccard__phone .aoh-icon { flex: none; width: 1rem; height: 1rem; }
.aoh-loccard__phone a { position: relative; z-index: 2; color: var(--aoh-text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.aoh-loccard__phone a:hover { color: var(--aoh-orange); text-decoration-color: currentColor; }
.aoh-loccard__phone a:focus-visible { outline: var(--aoh-focus); outline-offset: 3px; border-radius: 3px; }
.aoh-loccard__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; padding: 0.65rem 1.15rem 0.7rem; border-top: 1px solid var(--aoh-hairline); background: rgba(0, 0, 0, 0.24); }
.aoh-loccard__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.aoh-loccard__tag { padding: 0.2rem 0.55rem; border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-pill); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aoh-text-muted); }
.aoh-loccard__tag--type { border-color: rgba(255, 122, 0, 0.3); color: var(--aoh-orange); }
.aoh-loccard__footer .aoh-loccard__directions { margin-left: auto; }
.aoh-loccard__directions { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--aoh-text); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; }
.aoh-loccard__directions:hover { color: var(--aoh-orange); }
.aoh-loccard__directions:focus-visible { outline: var(--aoh-focus); outline-offset: 3px; }
.aoh-loccard__directions .aoh-icon { width: 0.9rem; height: 0.9rem; }
.aoh-loccard__footer .aoh-loccard__directions { margin-left: auto; }

/* Empty search result. Shown only for a real search that found nothing. */
.aoh-locations__empty { padding: 2.75rem 1.25rem; border: 1px dashed var(--aoh-hairline-strong); border-radius: var(--aoh-radius-lg); text-align: center; }
.aoh-locations__empty[hidden] { display: none; }
.aoh-locations__empty-title { margin: 0 0 0.55rem; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aoh-text); }
.aoh-locations__empty-text { margin: 0 auto 1.35rem; max-width: 32rem; color: var(--aoh-text-muted); }
.aoh-locations__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }

/* Map. OpenStreetMap tiles, no API key, no third-party script: the tiles are
   images and everything drawn over them is this theme's own CSS. */
.aoh-locmap { position: relative; height: 100%; border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-lg); background: #10151a; overflow: hidden; }
.aoh-locmap__frame { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: pan-y; }
.aoh-locmap__frame.is-dragging { cursor: grabbing; }
/* The tiles arrive as a daylight map, which would be the one bright rectangle
   on a dark site. Inverting and re-rotating the hue turns the same OpenStreetMap
   imagery into a dark basemap in the browser: no second tile service, no key,
   no extra request. The markers sit outside this element so they keep their
   real orange. */
.aoh-locmap__tiles { position: absolute; inset: 0; filter: invert(1) hue-rotate(180deg) brightness(0.86) contrast(1.06) saturate(0.55); }
.aoh-locmap__tile { position: absolute; top: 0; left: 0; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; }
.aoh-locmap__markers { position: absolute; inset: 0; }
.aoh-locmap.is-empty .aoh-locmap__tiles { opacity: 0.55; }

/* Markers sit on their coordinate: the pin's point and the cluster's centre.
   JavaScript writes only the transform, so the anchoring lives here. */
.aoh-locmap__marker { position: absolute; top: 0; left: 0; width: 34px; height: 40px; margin: -38px 0 0 -17px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.aoh-locmap__marker:focus-visible { outline: var(--aoh-focus); outline-offset: 2px; border-radius: 6px; }
.aoh-locmap__pin { position: relative; display: block; width: 24px; height: 24px; margin: 4px auto 0; border: 2px solid var(--aoh-cream); border-radius: 50% 50% 50% 0; background: linear-gradient(155deg, var(--aoh-orange), var(--aoh-orange-dark)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45); transform: rotate(-45deg); transform-origin: 50% 50%; transition: transform 0.16s ease, box-shadow 0.16s ease; }
.aoh-locmap__pin::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--aoh-cream); }
.aoh-locmap__marker:hover .aoh-locmap__pin { transform: rotate(-45deg) scale(1.12); }
.aoh-locmap__marker.is-selected { z-index: 3; }
.aoh-locmap__marker.is-selected .aoh-locmap__pin { transform: rotate(-45deg) scale(1.32); box-shadow: 0 0 0 4px var(--aoh-orange-glow), 0 6px 16px rgba(0, 0, 0, 0.5); }
.aoh-locmap__marker--cluster { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 2px solid var(--aoh-cream); border-radius: 50%; background: linear-gradient(155deg, var(--aoh-orange), var(--aoh-orange-dark)); color: #17100a; font-family: var(--aoh-font-body); font-size: 0.85rem; font-weight: 800; box-shadow: 0 0 0 5px rgba(255, 122, 0, 0.22), 0 5px 14px rgba(0, 0, 0, 0.45); }
.aoh-locmap__marker--cluster:hover { box-shadow: 0 0 0 7px rgba(255, 122, 0, 0.26), 0 5px 14px rgba(0, 0, 0, 0.45); }

/* The popup opens below its marker, so it never hides the pin it belongs to. */
/* Anchored on the coordinate, then lifted clear of the pin so the popup sits
   above the marker it describes rather than on top of it. --below is the flip
   the script applies when the pin is too close to the top edge for that to
   fit. Centring by transform rather than a negative margin means the width can
   change at a breakpoint without a second number having to change with it. */
.aoh-locmap__popup { position: absolute; top: 0; left: 0; z-index: 5; width: 17rem; max-width: calc(100% - 1rem); transform: translate(-50%, calc(-100% - 2.75rem)); padding: 0.85rem 0.95rem 0.95rem; border: 1px solid rgba(255, 122, 0, 0.35); border-radius: var(--aoh-radius-lg); background: rgba(14, 14, 16, 0.97); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); color: var(--aoh-text); }
.aoh-locmap__popup-close { position: absolute; top: 0.4rem; right: 0.4rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: transparent; color: var(--aoh-text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.aoh-locmap__popup--below { transform: translate(-50%, 1.1rem); }
.aoh-locmap__popup-close:hover { color: var(--aoh-text); background: rgba(255, 255, 255, 0.08); }
.aoh-locmap__popup-close:focus-visible { outline: var(--aoh-focus); outline-offset: 1px; }
.aoh-locmap__popup-item + .aoh-locmap__popup-item { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--aoh-hairline); }
.aoh-locmap__popup-title { margin: 0 1.6rem 0.25rem 0; font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--aoh-text); }
.aoh-locmap__popup-text { margin: 0; color: var(--aoh-text-muted); font-size: 0.82rem; line-height: 1.45; }
.aoh-locmap__popup-link { display: inline-block; margin-top: 0.4rem; color: var(--aoh-orange); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.aoh-locmap__popup-link:hover { text-decoration: underline; }

.aoh-locmap__zoom { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 4; display: flex; flex-direction: column; gap: 0.35rem; }
.aoh-locmap__zoom-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius); background: rgba(14, 14, 16, 0.86); color: var(--aoh-text); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.aoh-locmap__zoom-btn:hover { border-color: rgba(255, 122, 0, 0.5); color: var(--aoh-orange); }
.aoh-locmap__zoom-btn:focus-visible { outline: var(--aoh-focus); outline-offset: 2px; }
.aoh-locmap__attrib { position: absolute; left: 0.5rem; bottom: 0.4rem; z-index: 4; margin: 0; padding: 0.12rem 0.45rem; border-radius: var(--aoh-radius); background: rgba(14, 14, 16, 0.78); color: var(--aoh-text-muted); font-size: 0.65rem; }
.aoh-locmap__attrib a { color: inherit; }
/* The honest note when there is nothing to pin: no invented markers, no
   decorative city labels floating over an empty map. */
.aoh-locmap__note { position: absolute; left: 50%; bottom: 2.2rem; z-index: 4; max-width: calc(100% - 2.5rem); margin: 0; padding: 0.6rem 0.95rem; transform: translateX(-50%); border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-pill); background: rgba(14, 14, 16, 0.92); color: var(--aoh-text-muted); font-size: 0.8rem; text-align: center; }
.aoh-locmap__note[hidden] { display: none; }

/* Below the two-column breakpoint the map is a view, not a column: the
   segmented control swaps it with the list so neither is squeezed. */
@media (max-width: 1023px) {
	.aoh-locview { display: inline-flex; }
	.aoh-locations__layout[data-aoh-view-state="map"] .aoh-locations__list { display: none; }
	.aoh-locations__layout[data-aoh-view-state="map"] .aoh-locations__mapwrap { display: block; height: 60vh; min-height: 21rem; }
}
@media (max-width: 599px) {
	/* Below this the text column beside an 11rem panel is too narrow to read an
	   address in, so the panel moves above the text. A photograph gets the full
	   16/9 it deserves; a type plate gets a shorter band, because it carries far
	   less information and should not push the next branch off the screen. */
	.aoh-loccard--has-media { grid-template-columns: minmax(0, 1fr); }
	.aoh-loccard--has-media .aoh-loccard__body { grid-column: 1; }
	.aoh-loccard__media { min-height: 0; aspect-ratio: 16 / 9; }
	.aoh-loccard--media-illustration .aoh-loccard__media,
	.aoh-loccard--media-icon .aoh-loccard__media {
		aspect-ratio: 5 / 2;
		border-right: 0;
		border-bottom: 1px solid var(--aoh-hairline);
	}
	.aoh-locicon { width: 2.875rem; height: 2.875rem; }
}
@media (max-width: 767px) {
	.aoh-locations__bar { margin-top: 1.15rem; }
	.aoh-locfilter__list { margin-inline: calc(var(--aoh-gutter) * -1); padding-inline: var(--aoh-gutter); }
	.aoh-locsearch__input { font-size: 1rem; }
	.aoh-locations__empty { padding: 2rem 1rem; }
	.aoh-locations__empty-actions .aoh-button { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 374px) {
	.aoh-loccard__body { padding: 0.95rem 1rem 0.9rem; }
	.aoh-loccard__footer { padding: 0.6rem 1rem; }
	.aoh-loccard__head { flex-wrap: wrap; gap: 0.4rem; }
	.aoh-locmap__popup { width: 14rem; }
}
@media (prefers-reduced-motion: reduce) {
	.aoh-loccard,
	.aoh-locfilter__pill,
	.aoh-locmap__pin { transition: none; }
}

/* ---- About page -------------------------------------------------------- */
/* Seven bands, no new design system. Every colour, radius, shadow, button and
   type style below is an existing token or an existing component; what is new
   here is only composition. Backgrounds alternate the approved page scale —
   dark hero, dark founder, light brand + statistics, dark timeline, cream
   values, photographic closing band — so the page never puts two identical
   surfaces against each other. */

/* Hero. Same anatomy as the Our Menu, Deals and Locations heroes: the band is
   this file's, the photograph, its crop and its focus are the shared Page Hero
   system's, and .aoh-pagehero supplies the one shared internal-page height. */
.aoh-abouthero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-abouthero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-abouthero.aoh-pagehero--image .aoh-abouthero__glow { display: none; }
.aoh-abouthero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.aoh-abouthero__eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-abouthero__title { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-abouthero__title-line { display: block; }
.aoh-abouthero__title-line--accent { color: var(--aoh-orange); }
/* Deliberately narrower than the heading: the paragraph is a caption for it,
   not a second headline. */
.aoh-abouthero__lead { margin: 0; max-width: 46rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.04rem); line-height: 1.6; }
.aoh-abouthero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }

/* Founder. Image column first in source order so the mobile stack is photo →
   copy without reordering anything. */
.aoh-founder { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-founder__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
.aoh-founder__media { position: relative; max-width: 30rem; margin-inline: auto; width: 100%; }
/* A fixed ratio, so the frame occupies its final height before the portrait
   decodes and nothing below it moves. */
.aoh-founder__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--aoh-radius-panel); background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline-strong); }
.aoh-founder__frame picture, .aoh-founder__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* Anchored to the foot of the frame. The portrait's 4:5 crop puts the head in
   the upper half and the jacket across the bottom, so the card overlaps cloth,
   never the face. */
.aoh-founder__card { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; padding: 0.95rem 1.15rem; border-radius: var(--aoh-radius-card); background: rgba(14, 14, 16, 0.85); border: 1px solid var(--aoh-hairline-strong); backdrop-filter: blur(3px); }
.aoh-founder__card-label { margin: 0 0 0.35rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-founder__card-name { margin: 0 0 0.2rem; font-size: 1.1rem; font-weight: 800; line-height: 1.15; color: var(--aoh-text); }
.aoh-founder__card-role { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aoh-text-muted); }
.aoh-founder__title { margin-bottom: 1.2rem; }
.aoh-founder__title-line { display: block; }
.aoh-founder__body .aoh-copy { max-width: 36rem; }
.aoh-founder__link { margin-top: 0.4rem; }
@media (min-width: 900px) {
	.aoh-founder__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
	.aoh-founder__media { margin-inline: 0; }
}

/* Brand story. One step lighter than the Founder and Timeline bands it sits
   between — the same Dark ↔ Light alternation the homepage uses. */
.aoh-brandstory { background: var(--aoh-bg-light); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.aoh-brandstory__grid { display: grid; gap: clamp(2.25rem, 1rem + 4.5vw, 4rem); align-items: center; }
.aoh-brandstory__body .aoh-copy { max-width: 34rem; }
.aoh-brandstory__points { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.aoh-brandstory__points li { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aoh-text); }
@media (min-width: 900px) {
	.aoh-brandstory__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Editorial collage: restaurant behind, branded truck in front, real logo on a
   plate. A fixed ratio again, so three lazy images cannot shift the section. */
.aoh-collage { position: relative; aspect-ratio: 5 / 4; width: 100%; }
.aoh-collage__layer { position: absolute; margin: 0; overflow: hidden; border-radius: var(--aoh-radius-card); border: 1px solid var(--aoh-hairline-strong); box-shadow: var(--aoh-shadow-panel); }
.aoh-collage__layer picture, .aoh-collage__layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aoh-collage__store { top: 0; right: 0; width: 74%; aspect-ratio: 4 / 3; }
.aoh-collage__truck { left: 0; bottom: 0; width: 62%; aspect-ratio: 4 / 3; transform: rotate(-2deg); transition: transform 300ms var(--aoh-ease); }
.aoh-collage__logo { position: absolute; left: 1%; top: 3%; width: clamp(4.5rem, 22%, 7rem); padding: 0.75rem; border-radius: var(--aoh-radius-tile); background: var(--aoh-surface-card-hi); border: 1px solid var(--aoh-hairline-strong); box-shadow: var(--aoh-shadow-panel); }
.aoh-collage__logo-img { display: block; width: 100%; height: auto; }
/* The one piece of motion on this page: the front photograph straightens while
   it is hovered and settles back to its tilt afterwards. Pointer devices only —
   on a touch screen there is no hover to end, so the image would be left
   straight or, worse, stuck mid-transition. The logo never moves. */
@media (hover: hover) and (pointer: fine) {
	.aoh-collage:hover .aoh-collage__truck { transform: rotate(0deg); }
}

/* Statistics. Same surface as the brand story above it, separated by a
   hairline rather than another colour: they are one thought, not two bands. */
.aoh-aboutstats { background: var(--aoh-bg-light); color: var(--aoh-text); padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-aboutstats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; margin: 0; }
.aoh-aboutstats__item { text-align: center; }
.aoh-aboutstats__label { margin: 0 0 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-text-muted); }
.aoh-aboutstats__value { margin: 0 0 0.35rem; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--aoh-text); }
.aoh-aboutstats__value--accent { color: var(--aoh-orange); }
.aoh-aboutstats__note { margin: 0; font-size: 0.82rem; color: var(--aoh-text-muted); }
@media (min-width: 720px) {
	.aoh-aboutstats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.aoh-aboutstats__item + .aoh-aboutstats__item { border-left: 1px solid var(--aoh-hairline); }
}

/* Timeline. Primary dark body, raised cards, hairline borders, small orange
   markers — no shadow and no glow, so the line reads as a document. */
.aoh-journey { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.aoh-journey__head { max-width: 40rem; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem); }
.aoh-journey__head .aoh-title { margin-bottom: 0; }
.aoh-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
/* The spine. Inset by half the marker so the dots sit centred on it. */
.aoh-timeline::before { content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem; left: 0.4rem; width: 2px; background: var(--aoh-hairline-strong); }
.aoh-timeline__item { position: relative; padding-left: 2.25rem; }
.aoh-timeline__item + .aoh-timeline__item { margin-top: 1rem; }
.aoh-timeline__item::before { content: ""; position: absolute; top: 1.55rem; left: 0; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--aoh-orange); box-shadow: 0 0 0 4px var(--aoh-bg-dark); }
.aoh-timeline__card { padding: 1.35rem 1.5rem; background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline); border-radius: var(--aoh-radius-card); }
.aoh-timeline__date { margin: 0 0 0.5rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-timeline__title { margin: 0 0 0.5rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 800; line-height: 1.15; text-transform: uppercase; color: var(--aoh-text); }
/* Full body size at every width: the milestones are the content of this
   section, not a caption under it. */
.aoh-timeline__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--aoh-text-muted); }
@media (min-width: 1024px) {
	.aoh-timeline::before { left: 50%; transform: translateX(-50%); }
	.aoh-timeline__item { width: calc(50% - 2.5rem); padding-left: 0; }
	.aoh-timeline__item + .aoh-timeline__item { margin-top: 1.5rem; }
	.aoh-timeline__item:nth-child(odd) { margin-right: auto; }
	.aoh-timeline__item:nth-child(even) { margin-left: auto; }
	/* Half of each item's own gutter plus half the marker: the dots land on the
	   centre line from either side. */
	.aoh-timeline__item:nth-child(odd)::before { left: auto; right: -2.925rem; }
	.aoh-timeline__item:nth-child(even)::before { left: -2.925rem; }
	.aoh-timeline__item:nth-child(odd) .aoh-timeline__card { text-align: right; }
}

/* Values. The site's existing cream surface, used as a light break between the
   dark timeline and the dark closing band. */
.aoh-values__head { max-width: 42rem; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem); }
.aoh-values__head .aoh-eyebrow { color: var(--aoh-orange-dark); }
.aoh-values__head .aoh-title { margin-bottom: 0.9rem; color: var(--aoh-near-black); }
.aoh-values__lead { margin: 0; max-width: 38rem; color: var(--aoh-stone); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); line-height: 1.6; }
.aoh-values__grid { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.aoh-value { padding: 1.75rem; background: var(--aoh-white); border: 1px solid var(--aoh-line-light); border-radius: var(--aoh-radius-card); box-shadow: var(--aoh-shadow-soft); }
.aoh-value__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border-radius: 50%; background: var(--aoh-orange-tint); color: var(--aoh-orange-dark); }
.aoh-value__icon .aoh-icon { width: 1.35rem; height: 1.35rem; }
.aoh-value__title { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aoh-near-black); }
.aoh-value__text { margin: 0; color: var(--aoh-stone); line-height: 1.6; }
@media (min-width: 860px) {
	.aoh-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

/* Closing CTA. A photograph under a scrim heavy enough that the type passes
   contrast wherever the crop lands. */
.aoh-aboutcta { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3.5rem, 2.25rem + 5vw, 6rem); }
.aoh-aboutcta__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background-color: var(--aoh-bg-dark); }
.aoh-aboutcta__media picture { display: block; width: 100%; height: 100%; }
.aoh-aboutcta__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.aoh-aboutcta__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 8, 9, 0.9) 0%, rgba(8, 8, 9, 0.72) 45%, rgba(8, 8, 9, 0.92) 100%),
		radial-gradient(110% 90% at 50% 50%, rgba(8, 8, 9, 0.35) 0%, rgba(8, 8, 9, 0.6) 100%);
}
.aoh-aboutcta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; }
.aoh-aboutcta__label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-aboutcta__title { margin: 0; font-size: clamp(2rem, 1.35rem + 2.8vw, 3.4rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-aboutcta__lead { margin: 0; max-width: 40rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; }
.aoh-aboutcta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem 1rem; margin-top: 0.75rem; }
@media (max-width: 499px) {
	/* Two full-width buttons rather than two cramped ones. */
	.aoh-aboutcta__actions { flex-direction: column; align-self: stretch; }
	.aoh-aboutcta__actions .aoh-button { width: 100%; }
}

/* ---- Contact page ---- */
/* Three bands: the shared hero, one dark section holding the topic cards and
   the form, and a photographic closing CTA pointing at the Locations archive.
   Every form rule below is scoped to .aoh-contactform — the Catering, Careers
   and Private Events forms use the same plugin markup on light backgrounds and
   must keep the light styling they already have. */

/* Hero. Identical anatomy and identical height values to the About, Our Menu,
   Deals and Locations heroes; the photograph, crop and focus belong to the
   shared Page Hero system. */
.aoh-contacthero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-contacthero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-contacthero.aoh-pagehero--image .aoh-contacthero__glow { display: none; }
.aoh-contacthero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.aoh-contacthero__eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-contacthero__title { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-contacthero__title-line { display: block; }
.aoh-contacthero__title-line--accent { color: var(--aoh-orange); }
.aoh-contacthero__lead { margin: 0; max-width: 46rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.04rem); line-height: 1.6; }
.aoh-contacthero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }

/* Main section. The form column is the wider of the two: it is the action, the
   copy beside it is the explanation. */
.aoh-contact { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-contact__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.25rem); align-items: start; }
.aoh-contact__title { margin-bottom: 0.9rem; }
.aoh-contact__lead { margin: 0; max-width: 34rem; color: var(--aoh-text-muted); font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.06rem); line-height: 1.65; }
@media (min-width: 960px) {
	.aoh-contact__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

/* Topic cards. Links, not buttons: with the script off each one still jumps to
   the Topic field, so the control is never dead. Selection is a border and a
   surface step — no glow, no movement. */
.aoh-topics { display: grid; gap: 0.75rem; list-style: none; margin: clamp(1.5rem, 1rem + 1.5vw, 2rem) 0 0; padding: 0; }
.aoh-topic { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: var(--aoh-radius-card); background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline); color: var(--aoh-text); text-decoration: none; transition: background-color var(--aoh-transition), border-color var(--aoh-transition); }
.aoh-topic:hover { background: var(--aoh-surface-card-hi); border-color: var(--aoh-hairline-strong); }
.aoh-topic:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: 3px; }
.aoh-topic.is-selected { background: var(--aoh-surface-card-hi); border-color: rgba(255, 122, 0, 0.45); }
.aoh-topic__icon { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--aoh-orange-tint); color: var(--aoh-orange); }
.aoh-topic__icon .aoh-icon { width: 1.05rem; height: 1.05rem; }
/* One shared card-title style for all four topics. `balance` rather than a
   smaller size at the two-up width: the longest title ("Order or location
   feedback") then breaks evenly instead of dropping one word. */
.aoh-topic__title { display: block; margin-bottom: 0.32rem; font-size: clamp(0.9rem, 0.85rem + 0.18vw, 0.97rem); font-weight: 800; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-topic__text { display: block; font-size: clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem); line-height: 1.55; color: var(--aoh-text-muted); }
@media (min-width: 620px) and (max-width: 959px) {
	.aoh-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The form panel: one solid raised surface, a hairline and the existing panel
   radius. No gradient, no glass, no orange frame. */
.aoh-contactform { color-scheme: dark; }
.aoh-contactform__panel { 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); }
/* Level 3 in the page's hierarchy: below "How can we help?" (`.aoh-title`),
   above the topic-card titles. Same family, same uppercase treatment, one
   step down in size. */
.aoh-contactform__title { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.4rem); font-weight: 800; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-contactform__note { margin: 0 0 1.5rem; color: var(--aoh-text-muted); font-size: 0.92rem; line-height: 1.6; }

/* Two columns where the fields ask for it, one everywhere else. The hidden
   inputs the plugin prints (action, nonce, redirect) must not take grid
   cells. */
.aoh-contactform .aoh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem 1rem; max-width: none; }
.aoh-contactform .aoh-form > * { grid-column: 1 / -1; }
.aoh-contactform .aoh-form > input[type="hidden"] { display: none; }
.aoh-contactform .aoh-field { margin-bottom: 0; }
.aoh-contactform .aoh-field[hidden] { display: none; }
@media (min-width: 560px) {
	.aoh-contactform .aoh-field--half { grid-column: span 1; }
}

.aoh-contactform .aoh-field label { display: block; margin-bottom: 0.45rem; font-size: clamp(0.78rem, 0.75rem + 0.13vw, 0.85rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aoh-text-muted); }
.aoh-contactform .aoh-required { color: var(--aoh-orange); }
.aoh-contactform .aoh-field__note { letter-spacing: 0.08em; font-weight: 600; color: rgba(163, 156, 146, 0.8); }
.aoh-contactform .aoh-form__hint { color: var(--aoh-text-muted); font-size: 0.8rem; }

.aoh-contactform .aoh-form input[type="text"],
.aoh-contactform .aoh-form input[type="email"],
.aoh-contactform .aoh-form input[type="tel"],
.aoh-contactform .aoh-form select,
.aoh-contactform .aoh-form textarea {
	width: 100%; min-height: 3rem; padding: 0.78rem 0.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: 0.95rem; line-height: 1.4;
	transition: border-color var(--aoh-transition), box-shadow var(--aoh-transition);
}
.aoh-contactform .aoh-form textarea { min-height: 9.5rem; resize: vertical; }
.aoh-contactform .aoh-form ::placeholder { color: var(--aoh-text-muted); opacity: 1; }
/* Related location is grouped by state, the same as the Careers list. Group
   labels must not read as choices, so they sit one step brighter and bolder
   than the options. */
.aoh-contactform .aoh-form optgroup { font-weight: 700; color: var(--aoh-text); background: var(--aoh-surface-deep); }
.aoh-contactform .aoh-form option { font-weight: 400; color: var(--aoh-text); background: var(--aoh-surface-deep); }
.aoh-contactform .aoh-form input:focus-visible,
.aoh-contactform .aoh-form select:focus-visible,
.aoh-contactform .aoh-form textarea:focus-visible {
	outline: none; border-color: var(--aoh-orange); box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.28);
}
/* Chrome paints its own autofill background; this keeps the field readable
   without hiding that it was autofilled. */
.aoh-contactform .aoh-form input:-webkit-autofill,
.aoh-contactform .aoh-form input:-webkit-autofill:hover,
.aoh-contactform .aoh-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--aoh-text);
	-webkit-box-shadow: 0 0 0 100px var(--aoh-surface-deep) inset;
	caret-color: var(--aoh-text);
}

/* Invalid. The server's own error class is the authority; :user-invalid only
   marks a field the visitor has already left in a bad state. */
.aoh-contactform .aoh-field--error input,
.aoh-contactform .aoh-field--error select,
.aoh-contactform .aoh-field--error textarea,
.aoh-contactform .aoh-form input:user-invalid,
.aoh-contactform .aoh-form select:user-invalid,
.aoh-contactform .aoh-form textarea:user-invalid { border-color: #ff8a80; }
.aoh-contactform .aoh-field__error { margin: 0.4rem 0 0; font-size: 0.82rem; font-weight: 600; color: #ff8a80; }

/* `pretty` so the required marker is never left alone on a line of its own
   at narrow widths; the statement is a sentence, not a field label. */
.aoh-contactform .aoh-field--consent label { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--aoh-text-muted); text-wrap: pretty; }
.aoh-contactform .aoh-field--consent input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--aoh-orange); }
.aoh-contactform .aoh-field--consent a { color: var(--aoh-text); }

.aoh-contactform .aoh-notice { background: var(--aoh-surface-card-hi); color: var(--aoh-text); border-radius: var(--aoh-radius-card); margin: 0 0 1.25rem; }
.aoh-contactform .aoh-notice a { color: var(--aoh-orange); }
.aoh-contactform .aoh-notice--success { border-left-color: #4ea87a; }
.aoh-contactform .aoh-notice p:last-child { margin-bottom: 0; }
.aoh-contactform .aoh-notice:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: 3px; }

/* Send. The existing primary button, one size up, with a typographic arrow so
   the page needs no extra SVG for it. */
.aoh-contactform .aoh-form > button[type="submit"] { justify-self: start; min-height: 3.25rem; padding-inline: 1.9rem; margin-top: 0.4rem; }
.aoh-contactform .aoh-form > button[type="submit"]::after { content: "\2192"; font-size: 1.1em; line-height: 1; transition: transform var(--aoh-dur-fast) var(--aoh-ease); }
.aoh-contactform .aoh-form > button[type="submit"]:hover::after { transform: translateX(3px); }
.aoh-contactform .aoh-form.is-sending > button[type="submit"] { opacity: 0.72; cursor: progress; transform: none; }
@media (max-width: 559px) {
	.aoh-contactform .aoh-form > button[type="submit"] { justify-self: stretch; width: 100%; }
}

/* Closing CTA. The same component anatomy as the About page's photographic
   closing band — full-bleed image, scrim, centred container content — so the
   site keeps one closing-CTA idiom. It is deliberately shorter and quieter
   than a hero: the shared `.aoh-eyebrow` and `.aoh-title` carry the type, and
   only the colour and the warmth of the wash are page-specific. */
.aoh-loccta { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3.5rem, 2.6rem + 4.75vw, 7rem); }
.aoh-loccta__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background-color: var(--aoh-bg-dark); }
.aoh-loccta__media picture { display: block; width: 100%; height: 100%; }
/* 40%: the crop window then clears the lit sign at every band height, and
   what it gives up at the foot is pavement. */
.aoh-loccta__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.aoh-loccta__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(115% 85% at 50% 42%, rgba(255, 122, 0, 0.13), transparent 60%),
		linear-gradient(180deg, rgba(8, 8, 9, 0.84) 0%, rgba(8, 8, 9, 0.74) 45%, rgba(8, 8, 9, 0.9) 100%);
}
.aoh-loccta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Scoped, not bare: the generic `.aoh-on-dark p` is more specific than
   `.aoh-eyebrow` and would otherwise repaint the kicker cream. */
.aoh-loccta .aoh-loccta__eyebrow { margin: 0 0 0.9rem; color: var(--aoh-orange); }
.aoh-loccta__title { margin-bottom: 0.85rem; }
.aoh-loccta__brand { color: var(--aoh-orange); }
.aoh-loccta .aoh-loccta__lead { margin: 0; max-width: 40rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; }
.aoh-loccta__button { margin-top: 1.75rem; }
@media (max-width: 439px) {
	.aoh-loccta__button { align-self: stretch; width: 100%; }
}

/* ---- Our App page ---- */
/* Four bands: the shared page hero with the store badges inside it, a dark
   product band pairing the phone with the three confirmed benefits, a light
   "how it works" band in the About page's cream styling, and a photographic
   closing download CTA. The promotional module and the QR are ordinary flow
   children, so with either one switched off the layout closes up and leaves
   no reserved gap behind. */

/* Official store badges. Shared by the hero, the closing CTA and (at a
   smaller scale) the download bar. The artwork is the official SVG, untouched
   and un-recoloured: only the height is set, so the two badges line up
   without either being redrawn. 3rem clears the 48px touch target. */
.aoh-storerow { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.aoh-storerow__badge { display: block; border-radius: 8px; line-height: 0; transition: transform var(--aoh-dur-fast) var(--aoh-ease); }
.aoh-storerow__badge:hover { transform: translateY(-1px); }
.aoh-storerow__badge:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: 3px; }
.aoh-storerow__badge img { display: block; width: auto; height: 3rem; }
/* The narrowest supported screen cannot fit two 3rem badges on one line, and a
   stacked pair would push the hero past the shared internal-page height. 2.75rem
   keeps them side by side and still clears the 44px minimum. */
@media (max-width: 374px) {
	.aoh-storerow__badge img { height: 2.75rem; }
}

/* Hero. The same anatomy, content width, type scale, image treatment and
   overlay as the About, Contact, Our Menu, Deals and Locations heroes, and the
   same 24rem floor from the shared Page Hero system. This hero carries a line
   of headline and a row of badges more than its siblings do, so the padding is
   a flat minimum clearance rather than the usual growing clamp: the content
   still fits inside the shared floor at every width, which keeps this band
   exactly as tall as the About and Contact heroes instead of pushing past
   them. Flex centring distributes whatever room is left, so the visible space
   above and below still reads as the same generous hero padding. */
.aoh-apphero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: 2rem 1.75rem; }
.aoh-apphero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-apphero.aoh-pagehero--image .aoh-apphero__glow { display: none; }
.aoh-apphero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.aoh-apphero__eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-apphero__title { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); text-transform: uppercase; color: var(--aoh-text); }
.aoh-apphero__title-group { display: block; }
.aoh-apphero__title-line { display: block; }
.aoh-apphero__title-line--accent { color: var(--aoh-orange); }
/* One line for the first two phrases, the orange one under them. The switch
   is a display change on the grouped spans, so the phrases stay whole words
   in the source and the browser still wraps them itself if a translation or
   a zoom level makes the pair too wide for the band. 992px is where the
   longest rendering of the pair — 3.2rem, about 830px — clears the 1240px
   container with room to spare, so the line never sits tight against the
   gutters and the heading is never shrunk to force the fit. */
@media (min-width: 992px) {
	.aoh-apphero__title-group .aoh-apphero__title-line { display: inline; }
}
.aoh-apphero__lead { margin: 0; max-width: 44rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.04rem); line-height: 1.6; }
.aoh-apphero__stores { justify-content: center; margin-top: 0.5rem; }

/* The app experience. A product presentation, not a card grid: one phone, one
   headline and three rows separated by hairlines. */
.aoh-appexp { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-appexp__grid { display: grid; gap: clamp(2.25rem, 1.25rem + 4vw, 3.5rem); align-items: center; justify-items: center; }
.aoh-appexp__visual { display: flex; justify-content: center; }
/* Bundled mockup: it carries its own device frame, so it is drawn as-is. */
.aoh-appexp__phone { display: block; width: clamp(12rem, 6rem + 22vw, 18rem); height: auto; aspect-ratio: 1 / 2; object-fit: contain; filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.55)); }
/* Uploaded screenshot: a plain bezel around the real screens. Nothing is
   drawn inside it — no invented status bar, no invented interface. */
.aoh-appexp__frame { width: clamp(11rem, 5.5rem + 20vw, 16.5rem); padding: 0.5rem; background: #0b0b0b; border: 1px solid var(--aoh-hairline-strong); border-radius: 2.25rem; box-shadow: 0 28px 48px rgba(0, 0, 0, 0.55); }
.aoh-appexp__screen { display: block; width: 100%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover; border-radius: 1.8rem; background: var(--aoh-surface-deep); }
.aoh-appexp__body { width: 100%; }
.aoh-appexp__title { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem); max-width: 24ch; }
.aoh-appexp__list { display: grid; list-style: none; margin: 0; padding: 0; }
/* The icon is centred against the whole number/title/description group, not
   pinned to the first line of it, so the three rows read as one column of
   marks however long a description runs. */
.aoh-appexp__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.1rem; padding-block: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-appexp__item:last-child { border-bottom: 1px solid var(--aoh-hairline); }
.aoh-appexp__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--aoh-radius-control); background: var(--aoh-orange-tint); color: var(--aoh-orange); }
.aoh-appexp__icon .aoh-icon { width: 1.3rem; height: 1.3rem; }
/* The step count is meant to be read, not just sensed: 0.96rem is the 0.7rem
   original plus 37%. It stays one step under the 1rem title, and stays at
   weight 700 against the title's 800, so the row still opens with the name of
   the feature rather than with its number. */
.aoh-appexp__num { margin: 0 0 0.55rem; font-size: 0.96rem; font-weight: 700; line-height: 1; letter-spacing: 0.18em; color: var(--aoh-orange); }
.aoh-appexp__item-title { margin: 0 0 0.35rem; font-family: var(--aoh-font-body); font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aoh-text); }
.aoh-appexp__item-text { margin: 0; color: var(--aoh-text-muted); font-size: 0.95rem; line-height: 1.6; text-wrap: pretty; }
@media (min-width: 900px) {
	.aoh-appexp__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); justify-items: stretch; column-gap: clamp(2.5rem, 1rem + 5vw, 4.5rem); }
}

/* Promotional module. Optional and entirely owned by the Admin: the value,
   the code and the terms line are campaign content, so each one renders only
   while it is set and the whole block disappears with one checkbox. The
   orange rule marks it as an offer without letting it outrank the benefits
   above it. */
.aoh-apppromo { position: relative; margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); padding: 1.1rem 1.25rem 1.2rem; background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline); border-left: 3px solid var(--aoh-orange); border-radius: var(--aoh-radius-card); }
.aoh-apppromo__label { margin: 0; font-size: 0.68rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aoh-text-muted); }
.aoh-apppromo__value { margin: 0.3rem 0 0; font-family: var(--aoh-font-body); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); font-weight: 800; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-apppromo__row { margin-top: 0.85rem; align-items: center; gap: 0.5rem 0.6rem; }
.aoh-apppromo .aoh-promo__label { font-size: 0.68rem; letter-spacing: 0.14em; color: var(--aoh-text-muted); }
.aoh-apppromo .aoh-promo__code { padding: 0.4rem 0.85rem; border: 1px dashed var(--aoh-hairline-strong); border-radius: var(--aoh-radius-control); background: rgba(255, 255, 255, 0.05); color: var(--aoh-text); font-size: 0.98rem; letter-spacing: 0.16em; }
.aoh-apppromo__copy {
	display: inline-flex; align-items: center; gap: 0.4rem; min-height: 3rem; padding: 0 0.85rem; border: 0; border-radius: var(--aoh-radius-control);
	background: rgba(255, 255, 255, 0.07); color: var(--aoh-text); font: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
	transition: background-color var(--aoh-transition), color var(--aoh-transition);
}
.aoh-apppromo__copy:hover { background: rgba(255, 255, 255, 0.12); }
.aoh-apppromo__copy:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: 2px; }
.aoh-apppromo__copy.is-copied { color: var(--aoh-orange); }
.aoh-apppromo__copy .aoh-icon { width: 0.95rem; height: 0.95rem; }
.aoh-apppromo__terms { margin: 0.8rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--aoh-text-muted); text-wrap: pretty; }
/* Announced, never laid out: the confirmation must not nudge the module. */
.aoh-apppromo .aoh-promo__status, .aoh-apppromo .aoh-promo__status:empty { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* How it works. The About page's cream band, its card surface and its type
   scale — this is the same light break, used for three steps instead of
   three values. */
.aoh-appsteps { background: var(--aoh-cream); color: var(--aoh-near-black); padding-block: clamp(3.25rem, 2.25rem + 4vw, 5.5rem); }
.aoh-appsteps__head { max-width: 42rem; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem); }
.aoh-appsteps__eyebrow { color: var(--aoh-orange-dark); }
.aoh-appsteps__title { margin-bottom: 0; color: var(--aoh-near-black); }
.aoh-appsteps__list { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.aoh-appsteps__item { padding: 1.75rem; background: var(--aoh-white); border: 1px solid var(--aoh-line-light); border-radius: var(--aoh-radius-card); box-shadow: var(--aoh-shadow-soft); }
.aoh-appsteps__num { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; font-size: 1rem; font-weight: 800; line-height: 1; letter-spacing: 0.14em; color: var(--aoh-orange-dark); }
.aoh-appsteps__rule { display: block; flex: none; width: 1.75rem; height: 2px; border-radius: 2px; background: currentColor; }
.aoh-appsteps__item-title { margin: 0 0 0.6rem; font-family: var(--aoh-font-body); font-size: 1.05rem; font-weight: 800; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aoh-near-black); text-wrap: balance; }
.aoh-appsteps__item-text { margin: 0; color: var(--aoh-stone); line-height: 1.6; text-wrap: pretty; }
@media (min-width: 860px) {
	.aoh-appsteps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

/* Closing download CTA. The same photographic closing-band component the
   About and Contact pages use. The photograph is a bright flat-lay, so the
   scrim is heavier here than on the night-time storefront — the type has to
   pass contrast wherever the crop lands. */
.aoh-appcta { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3.5rem, 2.6rem + 4.75vw, 7rem); }
.aoh-appcta__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background-color: var(--aoh-bg-dark); }
.aoh-appcta__media picture { display: block; width: 100%; height: 100%; }
.aoh-appcta__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.aoh-appcta__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(115% 85% at 50% 45%, rgba(255, 122, 0, 0.16), transparent 62%),
		linear-gradient(180deg, rgba(8, 8, 9, 0.9) 0%, rgba(8, 8, 9, 0.84) 45%, rgba(8, 8, 9, 0.94) 100%);
}
.aoh-appcta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Scoped, not bare: the generic `.aoh-on-dark p` is more specific than
   `.aoh-eyebrow` and would otherwise repaint these cream. */
.aoh-appcta .aoh-appcta__eyebrow { margin: 0 0 0.9rem; color: var(--aoh-orange); }
.aoh-appcta__title { margin-bottom: 0.85rem; }
.aoh-appcta__accent { color: var(--aoh-orange); }
.aoh-appcta .aoh-appcta__lead { margin: 0; max-width: 40rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; }
.aoh-appcta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2rem; margin-top: 1.75rem; }
.aoh-appcta__stores { justify-content: center; }
/* The QR is for a second device, so it is pointless on the one showing it. */
.aoh-appcta__qr { display: none; }
.aoh-appcta__qr-link { display: block; line-height: 0; border-radius: var(--aoh-radius-control); }
.aoh-appcta__qr-link:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: 3px; }
.aoh-appcta__qr img { display: block; width: 6.5rem; height: 6.5rem; padding: 0.4rem; background: var(--aoh-white); border-radius: var(--aoh-radius-control); }
.aoh-appcta .aoh-appcta__qr-label { margin: 0; font-size: 0.66rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-text-muted); }
@media (min-width: 900px) {
	.aoh-appcta__qr { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
}

/* Small-screen download bar. Never rendered above 768px, where the floating
   order card already owns the bottom-right corner, and never without the
   script that governs it: app-bar.js reveals it once the hero has scrolled
   away and hides it again over the closing CTA, so it can only ever appear on
   the stretch of page that has no badges of its own. */
.aoh-appbar { display: none; }
.aoh-appbar__icon { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px; object-fit: cover; }
.aoh-appbar__text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.8rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; color: var(--aoh-text); text-wrap: pretty; }
.aoh-appbar .aoh-appbar__button { flex: none; min-height: 2.75rem; padding: 0.7rem 1rem; font-size: 0.72rem; border-radius: var(--aoh-radius-control); }
.aoh-appbar__close { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.35rem; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--aoh-text-muted); cursor: pointer; transition: color var(--aoh-transition), background-color var(--aoh-transition); }
.aoh-appbar__close:hover { color: var(--aoh-text); background: rgba(255, 255, 255, 0.08); }
.aoh-appbar__close:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: -2px; }
.aoh-appbar__close .aoh-icon { width: 1rem; height: 1rem; }
@media (max-width: 767px) {
	.aoh-js .aoh-appbar {
		position: fixed; z-index: 80; left: 0.7rem; right: 0.7rem; bottom: max(0.7rem, env(safe-area-inset-bottom));
		display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem;
		background: var(--aoh-surface-deep); color: var(--aoh-text); border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-card);
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
		opacity: 0; visibility: hidden; transform: translateY(16px);
		transition: opacity 260ms var(--aoh-ease), transform 260ms var(--aoh-ease), visibility 0s linear 260ms;
	}
	.aoh-js .aoh-appbar.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	/* Reserve the bar's lane at the foot of the page while it is on screen, so
	   it can never cover the footer's own links or the newsletter control. */
	body.aoh-has-appbar .aoh-footer { padding-bottom: 5.75rem; }
}
@media (prefers-reduced-motion: reduce) {
	.aoh-js .aoh-appbar { transform: none; transition: opacity 1ms linear, visibility 0s linear 1ms; }
}

/* ---- Careers page ---- */
/* Two bands only: the shared hero and one dark application section. The page
   is deliberately short — no listings, no benefits, no testimonials, no second
   CTA — so the form is the whole of the second band.

   The form markup is the plugin's, shared with Contact, Catering and Private
   Events. Every rule below is therefore scoped to .aoh-careersform so the
   other three forms keep exactly the styling they already have. The type is
   the Contact panel's, one step up: the labels and the panel title are small
   uppercase text on a dark surface, and this page asks for more of them. */

/* Hero. Same anatomy and the same height values as the About, Contact and Our
   App heroes; the photograph, its crop and its focus belong to the shared Page
   Hero system and are never hardcoded here. */
.aoh-careershero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-careershero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-careershero.aoh-pagehero--image .aoh-careershero__glow { display: none; }
.aoh-careershero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.aoh-careershero__eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-careershero__title { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-careershero__title-line { display: block; }
.aoh-careershero__title-line--accent { color: var(--aoh-orange); }
.aoh-careershero__lead { margin: 0; max-width: 46rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.04rem); line-height: 1.6; }
.aoh-careershero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }

/* Application section. The form column is the wider of the two, as on Contact:
   it is the action, the column beside it is the explanation. Below 960px the
   introduction and its photograph stack above the form. */
.aoh-careers { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-careers__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.25rem); align-items: start; }
.aoh-careers__title { margin-bottom: 0.9rem; }
.aoh-careers__lead { margin: 0; max-width: 34rem; color: var(--aoh-text-muted); font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.06rem); line-height: 1.65; }
@media (min-width: 960px) {
	.aoh-careers__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

/* One photograph, not a gallery: a fixed ratio so the reserved box is the same
   before and after the image decodes and the section never shifts. */
.aoh-careers__media { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem); border-radius: var(--aoh-radius-card); overflow: hidden; border: 1px solid var(--aoh-hairline); background: var(--aoh-surface-deep); }
.aoh-careers__media picture { display: block; }
.aoh-careers__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }

/* The form panel: one solid raised surface, a hairline and the existing panel
   radius. No gradient, no glass, no orange frame. */
.aoh-careersform { color-scheme: dark; }
.aoh-careersform__panel { 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); }
/* Level 3 in the page's hierarchy: below "Apply to join the team."
   (`.aoh-title`), above the field labels. Same family and same uppercase
   treatment as the Contact panel title, one step larger. */
.aoh-careersform__title { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 1.15rem + 0.6vw, 1.6rem); font-weight: 800; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-careersform__note { margin: 0 0 1.5rem; color: var(--aoh-text-muted); font-size: 0.95rem; line-height: 1.6; }

/* Two columns where the fields ask for it, one everywhere else. The hidden
   inputs the plugin prints (action, nonce, redirect) must not take grid
   cells. */
.aoh-careersform .aoh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem 1rem; max-width: none; }
.aoh-careersform .aoh-form > * { grid-column: 1 / -1; }
.aoh-careersform .aoh-form > input[type="hidden"] { display: none; }
.aoh-careersform .aoh-field { margin-bottom: 0; }
.aoh-careersform .aoh-field[hidden] { display: none; }
@media (min-width: 560px) {
	.aoh-careersform .aoh-field--half { grid-column: span 1; }
}

.aoh-careersform .aoh-field label { display: block; margin-bottom: 0.45rem; font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.92rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(214, 208, 199, 0.95); }
.aoh-careersform .aoh-required { color: var(--aoh-orange); }
.aoh-careersform .aoh-field__note { letter-spacing: 0.07em; font-weight: 600; color: var(--aoh-text-muted); }
.aoh-careersform .aoh-form__hint { color: var(--aoh-text-muted); font-size: 0.86rem; }

.aoh-careersform .aoh-form input[type="text"],
.aoh-careersform .aoh-form input[type="email"],
.aoh-careersform .aoh-form input[type="tel"],
.aoh-careersform .aoh-form select,
.aoh-careersform .aoh-form textarea {
	width: 100%; min-height: 3.1rem; padding: 0.8rem 0.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-careersform .aoh-form textarea { min-height: 9.5rem; resize: vertical; }
.aoh-careersform .aoh-form ::placeholder { color: var(--aoh-text-muted); opacity: 1; }
/* The location list is grouped by state. Group labels must not read as
   choices, so they sit one step brighter and bolder than the options. */
.aoh-careersform .aoh-form optgroup { font-weight: 700; color: var(--aoh-text); background: var(--aoh-surface-deep); }
.aoh-careersform .aoh-form option { font-weight: 400; color: var(--aoh-text); background: var(--aoh-surface-deep); }
.aoh-careersform .aoh-form input:focus-visible,
.aoh-careersform .aoh-form select:focus-visible,
.aoh-careersform .aoh-form textarea:focus-visible {
	outline: none; border-color: var(--aoh-orange); box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.28);
}
/* Chrome paints its own autofill background; this keeps the field readable
   without hiding that it was autofilled. */
.aoh-careersform .aoh-form input:-webkit-autofill,
.aoh-careersform .aoh-form input:-webkit-autofill:hover,
.aoh-careersform .aoh-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--aoh-text);
	-webkit-box-shadow: 0 0 0 100px var(--aoh-surface-deep) inset;
	caret-color: var(--aoh-text);
}

/* Invalid. The server's own error class is the authority; :user-invalid only
   marks a field the visitor has already left in a bad state. */
.aoh-careersform .aoh-field--error input,
.aoh-careersform .aoh-field--error select,
.aoh-careersform .aoh-field--error textarea,
.aoh-careersform .aoh-form input:user-invalid,
.aoh-careersform .aoh-form select:user-invalid,
.aoh-careersform .aoh-form textarea:user-invalid { border-color: #ff8a80; }
.aoh-careersform .aoh-field__error { margin: 0.4rem 0 0; font-size: 0.86rem; font-weight: 600; color: #ff8a80; }

/* Resume upload. Without the script this is the browser's own file input on a
   dark surface; `careers.js` wraps it in the zone below and the real control
   stays on top of it at zero opacity, so a click, a tab stop and a drop all
   still reach the input itself. */
.aoh-upload { position: relative; }
.aoh-upload__zone {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.3rem; min-height: 6.25rem; padding: 1.15rem 1rem; text-align: center;
	background: var(--aoh-surface-deep); border: 1px dashed var(--aoh-hairline-strong); border-radius: var(--aoh-radius-control);
	transition: border-color var(--aoh-transition), background-color var(--aoh-transition);
}
.aoh-upload__zone:hover { border-color: rgba(255, 122, 0, 0.5); background: var(--aoh-surface-card-hi); }
.aoh-upload__zone.is-filled { border-style: solid; }
/* Without the script this is the visible control, so it is dressed like the
   other fields rather than left as the browser's grey button; with the script
   it becomes the invisible hit area over the zone. */
.aoh-careersform .aoh-form input[type="file"] { width: 100%; min-height: 3.1rem; padding: 0.72rem 0.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: 0.95rem; cursor: pointer; }
.aoh-careersform .aoh-upload__zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; opacity: 0; cursor: pointer; }
/* The overlaid input is invisible, so its own focus ring would be too: the
   zone wears it instead. */
.aoh-upload__zone:has(input[type="file"]:focus-visible) { border-style: solid; border-color: var(--aoh-orange); box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.28); }
.aoh-upload__prompt { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--aoh-text); }
.aoh-upload__prompt::before { content: "\2191"; margin-right: 0.45rem; color: var(--aoh-orange); }
.aoh-careersform .aoh-upload__meta { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--aoh-text-muted); }

/* Chosen file. Shown only after a real selection passes the courtesy checks;
   removing it clears the input, so the row and the form never disagree. */
.aoh-upload__file { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.65rem; padding: 0.6rem 0.75rem; min-height: 3rem; background: var(--aoh-surface-card-hi); border: 1px solid rgba(255, 122, 0, 0.4); border-radius: var(--aoh-radius-control); }
.aoh-upload__file[hidden] { display: none; }
.aoh-upload__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; font-weight: 600; color: var(--aoh-text); }
.aoh-upload__name::before { content: "\2713"; margin-right: 0.45rem; font-weight: 700; color: #4ea87a; }
.aoh-upload__size { flex: none; font-size: 0.86rem; color: var(--aoh-text-muted); font-variant-numeric: tabular-nums; }
.aoh-upload__remove {
	flex: none; min-height: 2.75rem; padding: 0 0.9rem;
	background: transparent; color: var(--aoh-text-muted);
	border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-control);
	font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	cursor: pointer; transition: color var(--aoh-transition), border-color var(--aoh-transition), background-color var(--aoh-transition);
}
.aoh-upload__remove:hover { color: var(--aoh-text); background: rgba(255, 255, 255, 0.06); border-color: var(--aoh-hairline-strong); }
.aoh-upload__remove:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: 2px; }
.aoh-careersform .aoh-upload__error { margin-top: 0.5rem; }
.aoh-careersform .aoh-upload__error[hidden] { display: none; }

/* `pretty` so the required marker is never left alone on a line of its own at
   narrow widths; the statement is a sentence, not a field label. */
.aoh-careersform .aoh-field--consent label { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--aoh-text-muted); text-wrap: pretty; }
.aoh-careersform .aoh-field--consent input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--aoh-orange); }
.aoh-careersform .aoh-field--consent a { color: var(--aoh-text); }

.aoh-careersform .aoh-notice { background: var(--aoh-surface-card-hi); color: var(--aoh-text); border-radius: var(--aoh-radius-card); margin: 0 0 1.25rem; }
.aoh-careersform .aoh-notice a { color: var(--aoh-orange); }
.aoh-careersform .aoh-notice--success { border-left-color: #4ea87a; }
.aoh-careersform .aoh-notice p:last-child { margin-bottom: 0; }
.aoh-careersform .aoh-notice:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: 3px; }
.aoh-careersform .aoh-notice__retry { font-weight: 700; }
.aoh-careersform .aoh-notice__title { margin: 0 0 0.4rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; }

/* Submit. The shared primary button at the same height the rest of the site
   uses for it, with the typographic arrow so the page needs no extra SVG. */
.aoh-careersform .aoh-form > button[type="submit"] { justify-self: start; min-height: 3.25rem; padding-inline: 1.9rem; margin-top: 0.4rem; }
.aoh-careersform .aoh-form > button[type="submit"]::after { content: "\2192"; font-size: 1.1em; line-height: 1; transition: transform var(--aoh-dur-fast) var(--aoh-ease); }
.aoh-careersform .aoh-form > button[type="submit"]:hover::after { transform: translateX(3px); }
.aoh-careersform .aoh-form.is-sending > button[type="submit"] { opacity: 0.72; cursor: progress; transform: none; }
/* A plain form post reports no upload progress, so the waiting state is an
   indeterminate bar: it says the file is on its way, not how far it got. */
.aoh-upload__file.is-uploading { position: relative; overflow: hidden; cursor: progress; }
.aoh-upload__file.is-uploading .aoh-upload__remove { opacity: 0.55; pointer-events: none; }
.aoh-upload__file.is-uploading::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--aoh-orange); animation: aoh-upload-progress 1.1s ease-in-out infinite; }
@keyframes aoh-upload-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
	.aoh-upload__file.is-uploading::after { animation: none; width: 100%; opacity: 0.6; }
}
@media (max-width: 559px) {
	.aoh-careersform .aoh-form > button[type="submit"] { justify-self: stretch; width: 100%; }
	/* The filename needs the whole row at this width, so Remove drops below it
	   and takes a full touch target with it. */
	.aoh-upload__file { flex-wrap: wrap; }
	.aoh-upload__name { flex-basis: 100%; }
	.aoh-upload__remove { flex: 1 1 auto; min-height: 3rem; }
}

/* ---- Private Events page ---- */
/* Four bands: the shared hero, one dark introduction split, one off-white
   band of options, and the event inquiry form. Nothing else — the page is an
   explanation and a request, not a marketing landing page.

   The form markup is the plugin's, shared with Contact, Catering and Careers.
   Every form rule below is therefore scoped to .aoh-eventsform so the other
   three forms keep exactly the styling they already have. */

/* Hero. Same anatomy and the same height values as the About, Contact,
   Careers and Our App heroes; the photograph, its crop and its focus belong
   to the shared Page Hero system and are never hardcoded here. */
.aoh-eventshero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-eventshero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-eventshero.aoh-pagehero--image .aoh-eventshero__glow { display: none; }
.aoh-eventshero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.aoh-eventshero__eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-eventshero__title { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-eventshero__title-line { display: block; }
.aoh-eventshero__title-line--accent { color: var(--aoh-orange); }
.aoh-eventshero__lead { margin: 0; max-width: 46rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.04rem); line-height: 1.6; }
.aoh-eventshero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }

/* Introduction. The same editorial split the About page uses: text on one
   side, one photograph on the other, stacking below 960px. */
.aoh-events { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-events__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.25rem); align-items: center; }
.aoh-events__title { margin-bottom: 0.9rem; }
.aoh-events__lead { margin: 0; max-width: 34rem; color: rgba(245, 239, 230, 0.88); font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.08rem); line-height: 1.65; }
.aoh-events__support { margin: 1rem 0 0; max-width: 34rem; color: var(--aoh-text-muted); font-size: clamp(0.94rem, 0.92rem + 0.15vw, 1rem); line-height: 1.65; }
@media (min-width: 960px) {
	.aoh-events__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* One photograph, not a gallery: a fixed ratio so the reserved box is the
   same before and after the image decodes and the section never shifts. */
.aoh-events__media { border-radius: var(--aoh-radius-card); overflow: hidden; border: 1px solid var(--aoh-hairline); background: var(--aoh-surface-deep); }
.aoh-events__media picture { display: block; }
.aoh-events__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 960px) {
	.aoh-events__img { aspect-ratio: 5 / 6; }
}

/* Options. The one light band on the page, so the page reads as three moves
   rather than one long dark scroll. These are explanations of what people ask
   us for — no price, no minimum, no service area, no availability. */
.aoh-eventopts { background: var(--aoh-off-white); color: var(--aoh-black); padding-block: clamp(3rem, 2rem + 4vw, 5.25rem); }
.aoh-eventopts__head { max-width: 42rem; margin: 0 auto clamp(2rem, 1.25rem + 2.5vw, 3rem); text-align: center; }
/* `.aoh-title` carries the dark-band text colour; this is the one light band
   on the page, so the heading states its own. */
.aoh-eventopts__title { margin: 0.5rem 0 0; color: var(--aoh-black); }
.aoh-eventopts__list,
.aoh-eventopts__services { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.aoh-eventopts__services { margin-top: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); }
@media (min-width: 880px) {
	.aoh-eventopts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 680px) {
	.aoh-eventopts__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The three occasions: quiet cards, one orange icon each. Restraint is the
   point — the accent belongs to the two service cards below. */
.aoh-eventopt { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: #fff; border: 1px solid rgba(11, 11, 11, 0.1); border-radius: var(--aoh-radius-card); }
.aoh-eventopt__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.85rem; height: 3.85rem; border-radius: 50%; background: var(--aoh-orange-tint); color: var(--aoh-orange); }
.aoh-eventopt__icon svg { width: 1.925rem; height: 1.925rem; }
.aoh-eventopt__title { margin: 0; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem); font-weight: 800; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aoh-black); }
.aoh-eventopt__text { margin: 0; color: rgba(11, 11, 11, 0.72); font-size: 0.96rem; line-height: 1.6; }

/* The two service interests. These are the cards that carry the accent: a
   tinted surface and an orange edge, so the page has one clear emphasis
   instead of five competing ones. */
.aoh-eventsvc { display: flex; align-items: center; gap: 0.9rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--aoh-orange-tint); border: 1px solid rgba(255, 122, 0, 0.3); border-left: 3px solid var(--aoh-orange); border-radius: var(--aoh-radius-card); }
.aoh-eventsvc__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; color: var(--aoh-orange); }
.aoh-eventsvc__icon svg { width: 2.1rem; height: 2.1rem; }
.aoh-eventsvc__body { min-width: 0; }
.aoh-eventsvc__title { margin: 0 0 0.35rem; font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); font-weight: 800; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aoh-black); }
.aoh-eventsvc__text { margin: 0; color: rgba(11, 11, 11, 0.74); font-size: 0.96rem; line-height: 1.6; }

/* Event inquiry form. One solid charcoal surface — no gradient — on the dark
   band, with the head above it so the panel holds nothing but the form. */
.aoh-eventsform { background: var(--aoh-bg-dark); color: var(--aoh-text); color-scheme: dark; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-eventsform__inner { max-width: 62rem; margin-inline: auto; }
.aoh-eventsform__head { max-width: 42rem; margin: 0 auto clamp(1.75rem, 1.25rem + 2vw, 2.5rem); text-align: center; }
.aoh-eventsform__title { margin: 0.5rem 0 0; }
.aoh-eventsform__lead { margin: 0.9rem 0 0; color: var(--aoh-text-muted); font-size: clamp(0.96rem, 0.94rem + 0.18vw, 1.04rem); line-height: 1.65; }
.aoh-eventsform__panel { 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); }

/* Two columns where the fields ask for it, one everywhere else. The hidden
   inputs the plugin prints (action, nonce, redirect) must not take grid
   cells. */
.aoh-eventsform .aoh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem 1rem; max-width: none; }
.aoh-eventsform .aoh-form > * { grid-column: 1 / -1; }
.aoh-eventsform .aoh-form > input[type="hidden"] { display: none; }
.aoh-eventsform .aoh-field { margin-bottom: 0; }
.aoh-eventsform .aoh-field[hidden] { display: none; }
@media (min-width: 560px) {
	.aoh-eventsform .aoh-field--half { grid-column: span 1; }
}

.aoh-eventsform .aoh-field label { display: block; margin-bottom: 0.45rem; font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.92rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(214, 208, 199, 0.95); }
.aoh-eventsform .aoh-required { color: var(--aoh-orange); }
.aoh-eventsform .aoh-field__note { letter-spacing: 0.07em; font-weight: 600; color: var(--aoh-text-muted); }
.aoh-eventsform .aoh-form__hint { color: var(--aoh-text-muted); font-size: 0.86rem; }
.aoh-eventsform .aoh-field__privacy { margin: 0.5rem 0 0 1.8rem; font-size: 0.86rem; line-height: 1.5; color: var(--aoh-text-muted); }

/* Date, time and number are listed alongside the others: this page is the
   first to use them, and without them the browser's default control would sit
   white on the charcoal panel. */
.aoh-eventsform .aoh-form input[type="text"],
.aoh-eventsform .aoh-form input[type="email"],
.aoh-eventsform .aoh-form input[type="tel"],
.aoh-eventsform .aoh-form input[type="date"],
.aoh-eventsform .aoh-form input[type="time"],
.aoh-eventsform .aoh-form input[type="number"],
.aoh-eventsform .aoh-form select,
.aoh-eventsform .aoh-form textarea {
	width: 100%; min-height: 3.1rem; padding: 0.8rem 0.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-eventsform .aoh-form textarea { min-height: 9.5rem; resize: vertical; }
.aoh-eventsform .aoh-form ::placeholder { color: var(--aoh-text-muted); opacity: 1; }
.aoh-eventsform .aoh-form option { font-weight: 400; color: var(--aoh-text); background: var(--aoh-surface-deep); }
/* The picker button WebKit paints inside date and time fields is black on a
   dark field; `color-scheme: dark` on the section already inverts it, and
   this only keeps it from shrinking to nothing at small sizes. */
.aoh-eventsform .aoh-form input[type="date"]::-webkit-calendar-picker-indicator,
.aoh-eventsform .aoh-form input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.85; cursor: pointer; }
.aoh-eventsform .aoh-form input:focus-visible,
.aoh-eventsform .aoh-form select:focus-visible,
.aoh-eventsform .aoh-form textarea:focus-visible {
	outline: none; border-color: var(--aoh-orange); box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.28);
}
/* Chrome paints its own autofill background; this keeps the field readable
   without hiding that it was autofilled. */
.aoh-eventsform .aoh-form input:-webkit-autofill,
.aoh-eventsform .aoh-form input:-webkit-autofill:hover,
.aoh-eventsform .aoh-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--aoh-text);
	-webkit-box-shadow: 0 0 0 100px var(--aoh-surface-deep) inset;
	caret-color: var(--aoh-text);
}

/* Invalid. The server's own error class is the authority; :user-invalid only
   marks a field the visitor has already left in a bad state. */
.aoh-eventsform .aoh-field--error input,
.aoh-eventsform .aoh-field--error select,
.aoh-eventsform .aoh-field--error textarea,
.aoh-eventsform .aoh-form input:user-invalid,
.aoh-eventsform .aoh-form select:user-invalid,
.aoh-eventsform .aoh-form textarea:user-invalid { border-color: #ff8a80; }
.aoh-eventsform .aoh-field__error { margin: 0.4rem 0 0; font-size: 0.86rem; font-weight: 600; color: #ff8a80; }

/* `pretty` so the required marker is never left alone on a line of its own at
   narrow widths; the statement is a sentence, not a field label. */
.aoh-eventsform .aoh-field--consent label { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--aoh-text-muted); text-wrap: pretty; }
.aoh-eventsform .aoh-field--consent input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--aoh-orange); }
.aoh-eventsform .aoh-field--consent a { color: var(--aoh-text); }

.aoh-eventsform .aoh-notice { background: var(--aoh-surface-card-hi); color: var(--aoh-text); border-radius: var(--aoh-radius-card); margin: 0 0 1.25rem; }
.aoh-eventsform .aoh-notice a { color: var(--aoh-orange); }
.aoh-eventsform .aoh-notice--success { border-left-color: #4ea87a; }
.aoh-eventsform .aoh-notice p:last-child { margin-bottom: 0; }
.aoh-eventsform .aoh-notice:focus-visible { outline: 2px solid var(--aoh-orange); outline-offset: 3px; }
.aoh-eventsform .aoh-notice__title { margin: 0 0 0.4rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; }
.aoh-eventsform .aoh-notice__retry { font-weight: 700; }

/* Submit. The shared primary button at the same height the rest of the site
   uses for it, with the typographic arrow so the page needs no extra SVG. */
.aoh-eventsform .aoh-form > button[type="submit"] { justify-self: start; min-height: 3.25rem; padding-inline: 1.9rem; margin-top: 0.4rem; }
.aoh-eventsform .aoh-form > button[type="submit"]::after { content: "\2192"; font-size: 1.1em; line-height: 1; transition: transform var(--aoh-dur-fast) var(--aoh-ease); }
.aoh-eventsform .aoh-form > button[type="submit"]:hover::after { transform: translateX(3px); }
/* While sending, the arrow would read as "go" next to a label that already
   says the browser is busy. */
.aoh-eventsform .aoh-form.is-sending > button[type="submit"] { opacity: 0.72; cursor: progress; transform: none; }
.aoh-eventsform .aoh-form.is-sending > button[type="submit"]::after { content: none; }
@media (max-width: 559px) {
	.aoh-eventsform .aoh-form > button[type="submit"] { justify-self: stretch; width: 100%; }
}

/* ---- Catering page ---- */
/* Six bands: the shared hero, a dark introduction split, the occasions, one
   off-white band of reasons, the shared three-step block, and the closing
   photographic CTA. No form: catering orders are placed on the external
   platform, so this page only explains and points.

   The page reuses the system rather than restating it — `.aoh-pagehero` for
   the hero floor, `.aoh-steps` for step three, `.aoh-eyebrow` / `.aoh-title`
   / `.aoh-button` everywhere else. Orange stays on the eyebrows, the card
   icons, the step numerals and the primary buttons. */

/* Hero. Same anatomy and the same height values as the About, Contact,
   Careers, Our App and Private Events heroes; the photograph, its crop and
   its focus belong to the shared Page Hero system and are never hardcoded
   here. The CTA is the only thing this hero adds over its siblings. */
.aoh-caterhero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-caterhero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-caterhero.aoh-pagehero--image .aoh-caterhero__glow { display: none; }
.aoh-caterhero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.aoh-caterhero__eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-caterhero__title { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-caterhero__title-line { display: block; }
.aoh-caterhero__title-line--accent { color: var(--aoh-orange); }
.aoh-caterhero__lead { margin: 0; max-width: 46rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.04rem); line-height: 1.6; }
.aoh-caterhero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }

/* Introduction. The editorial split the About and Private Events pages use:
   text on one side, one photograph on the other, stacking below 960px. The
   photograph is a bundled theme asset, so there is no remote request and no
   attachment to delete. */
.aoh-caterintro { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-caterintro__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.25rem); align-items: center; }
.aoh-caterintro__title { margin-bottom: 0.9rem; }
.aoh-caterintro__lead { margin: 0; max-width: 34rem; color: rgba(245, 239, 230, 0.88); font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.08rem); line-height: 1.65; }
.aoh-caterintro__actions:not(:empty) { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
@media (min-width: 960px) {
	.aoh-caterintro__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
/* A fixed ratio so the reserved box is the same before and after the image
   decodes and the section never shifts. */
.aoh-caterintro__media { border-radius: var(--aoh-radius-card); overflow: hidden; border: 1px solid var(--aoh-hairline); background: var(--aoh-surface-deep); }
.aoh-caterintro__media picture { display: block; }
.aoh-caterintro__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 62%; }
@media (min-width: 960px) {
	.aoh-caterintro__img { aspect-ratio: 5 / 6; }
}

/* Occasions. A lift to the raised surface rather than another colour, so the
   page steps forward without a second dark palette. Four quiet cards, one
   orange icon each; the accent edge belongs to the reasons band below. */
.aoh-cateroccasions { background: var(--aoh-bg-light); color: var(--aoh-text); padding-block: clamp(3rem, 2rem + 4vw, 5.25rem); border-top: 1px solid var(--aoh-hairline); }
.aoh-cateroccasions__head { max-width: 42rem; margin: 0 auto clamp(2rem, 1.25rem + 2.5vw, 3rem); text-align: center; }
.aoh-cateroccasions__title { margin: 0.5rem 0 0; }
.aoh-cateroccasions__list { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 620px) {
	.aoh-cateroccasions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.aoh-cateroccasions__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.aoh-cateroccasion { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--aoh-surface-raised); border: 1px solid var(--aoh-hairline-strong); border-radius: var(--aoh-radius-card); }
.aoh-cateroccasion__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.85rem; height: 3.85rem; border-radius: 50%; background: var(--aoh-orange-tint); color: var(--aoh-orange); }
.aoh-cateroccasion__icon svg { width: 1.925rem; height: 1.925rem; }
.aoh-cateroccasion__title { margin: 0; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem); font-weight: 800; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aoh-text); }
.aoh-cateroccasion__text { margin: 0; color: var(--aoh-text-muted); font-size: 0.96rem; line-height: 1.6; }

/* Why Abu Omar Halal. The one light band on the page, so the scroll reads as
   a sequence of moves rather than one long dark field. Same cream, same card
   anatomy and same orange edge the Private Events service cards use. */
.aoh-caterwhy { background: var(--aoh-off-white); color: var(--aoh-black); padding-block: clamp(3rem, 2rem + 4vw, 5.25rem); }
.aoh-caterwhy__head { max-width: 42rem; margin: 0 auto clamp(2rem, 1.25rem + 2.5vw, 3rem); text-align: center; }
/* `.aoh-title` carries the dark-band text colour; this band states its own. */
.aoh-caterwhy__title { margin: 0.5rem 0 0; color: var(--aoh-black); }
/* Photograph left, benefits right. Below 880px the two columns would squeeze
   the descriptions into a narrow measure, so the band stacks instead: heading,
   photograph, benefits. */
.aoh-caterwhy__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: stretch; }
@media (min-width: 880px) {
	.aoh-caterwhy__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
.aoh-caterwhy__media { border-radius: var(--aoh-radius-card); overflow: hidden; border: 1px solid rgba(11, 11, 11, 0.1); background: var(--aoh-surface-deep); }
.aoh-caterwhy__media picture { display: block; height: 100%; }
/* The file is a full-frame 2:3 portrait, kept that way in the library so it
   can be re-used elsewhere. Shown at that shape it would tower over the three
   benefits on a desktop and eat a phone screen, so the box states its own
   ratio per breakpoint and the photo is cropped to it from just below centre,
   where the platters are. The picture is never distorted and carries no text. */
.aoh-caterwhy__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 58%; }
@media (min-width: 880px) {
	.aoh-caterwhy__img { aspect-ratio: 1 / 1; }
}
.aoh-caterwhy__list { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 880px) {
	/* One clean vertical list rather than three wide cards. The items share the
	   column evenly so their combined height matches the photograph beside
	   them; the base rule centres each item's contents inside that height. */
	.aoh-caterwhy__list { display: flex; flex-direction: column; }
	.aoh-caterfeature { flex: 1 1 0; }
}
.aoh-caterfeature { display: flex; align-items: center; gap: 0.9rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: #fff; border: 1px solid rgba(11, 11, 11, 0.1); border-left: 3px solid var(--aoh-orange); border-radius: var(--aoh-radius-card); }
.aoh-caterfeature__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; color: var(--aoh-orange); }
.aoh-caterfeature__icon svg { width: 2.1rem; height: 2.1rem; }
.aoh-caterfeature__body { min-width: 0; }
.aoh-caterfeature__title { margin: 0 0 0.35rem; font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); font-weight: 800; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aoh-black); }
.aoh-caterfeature__text { margin: 0; color: rgba(11, 11, 11, 0.74); font-size: 0.96rem; line-height: 1.6; }

/* How catering works. The shared `.aoh-steps` block, unchanged, with one
   eyebrow added above its heading. */
.aoh-catersteps { border-top: 1px solid var(--aoh-hairline); }
.aoh-catersteps .aoh-steps__head .aoh-eyebrow { margin: 0 0 0.5rem; }
.aoh-catersteps .aoh-steps__cta:empty { display: none; }

/* Closing CTA. The same full-bleed band as the Our Menu and Deals pages, on a
   bundled theme photograph; `--aoh-bg-dark` underneath means a failed decode
   still reads white-on-dark. Centred, so nothing runs under the fixed
   catering card at any width. */
.aoh-catercta {
	position: relative; isolation: isolate;
	display: grid; align-items: center;
	min-height: clamp(280px, 62vw, 340px);
	padding-block: clamp(2.25rem, 6vw, 3rem);
	color: var(--aoh-text);
	background-color: var(--aoh-bg-dark);
	background-image: url("../img/photo/catering-hands-1600.webp");
	background-image: image-set(url("../img/photo/catering-hands-1600.avif") type("image/avif"), url("../img/photo/catering-hands-1600.webp") type("image/webp"));
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 45% 58%;
}
/* Vignette veil: a flat wash over the whole photograph plus a radial that
   goes near-black at the edges, so the centre keeps enough of the food to
   read as a photograph and the copy sits in a dark field. */
.aoh-catercta::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(105% 130% at 50% 45%, rgba(8, 8, 9, 0.58) 0%, rgba(8, 8, 9, 0.86) 52%, rgba(8, 8, 9, 0.97) 100%),
		linear-gradient(0deg, rgba(8, 8, 9, 0.55), rgba(8, 8, 9, 0.55));
}
.aoh-catercta__inner { position: relative; }
.aoh-catercta__copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; max-width: 52rem; margin-inline: auto; }
.aoh-catercta__eyebrow { margin: 0; }
.aoh-catercta__title { margin: 0; font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); }
.aoh-catercta .aoh-catercta__lead { margin: 0 auto; max-width: 32rem; color: rgba(245, 239, 230, 0.88); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.aoh-catercta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
.aoh-catercta__actions:not(:empty) { margin-top: 1.1rem; }
.aoh-catercta__actions .aoh-button--primary {
	padding: 1.15rem 2.75rem; min-height: 3.6rem; border-radius: 10px;
	font-size: 1rem; letter-spacing: 0.06em;
	box-shadow: 0 12px 34px rgba(255, 122, 0, 0.3);
}
.aoh-catercta__actions .aoh-button--primary:hover { box-shadow: 0 14px 38px rgba(255, 122, 0, 0.42); }
@media (min-width: 768px) {
	.aoh-catercta { min-height: clamp(380px, 30vw, 460px); padding-block: clamp(3rem, 5vw, 4.25rem); }
}
@media (max-width: 767px) {
	.aoh-catercta { background-position: 48% 55%; }
	.aoh-catercta::before {
		background:
			radial-gradient(120% 110% at 50% 45%, rgba(8, 8, 9, 0.6), rgba(8, 8, 9, 0.86) 55%, rgba(8, 8, 9, 0.96) 100%),
			linear-gradient(0deg, rgba(8, 8, 9, 0.58), rgba(8, 8, 9, 0.58));
	}
	.aoh-catercta__actions .aoh-button { flex: 1 1 100%; justify-content: center; }
}

/* ---- News & Press page ---- */
/* One page, two content systems, told apart by type and not by colour.

   Stories & News lists internal Articles; In the Press lists external
   coverage. The cards are deliberate near-twins — same surface, same radius,
   same 3:2 media, same rhythm — because they belong to the same page. A press
   card is marked as outward-bound three times over: the outlined PRESS MENTION
   badge, the thin orange rail down its left edge, and the diagonal arrow on
   its call to action. That rail is the whole of the alternate accent; the page
   otherwise keeps orange to the eyebrow, the active tab indicator, the card
   category and the call to action, as everywhere else in the system. */

/* Hero. A clone of the Careers hero, which is itself the About / Contact /
   Our App hero: the same padding clamps and the same .aoh-pagehero min-height,
   so every internal page measures the same. The image and its focus come from
   the shared per-page Page Hero field and are never hardcoded here. */
.aoh-newshero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-newshero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-newshero.aoh-pagehero--image .aoh-newshero__glow { display: none; }
.aoh-newshero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.aoh-newshero__eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aoh-orange); }
.aoh-newshero__title { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-newshero__title-line { display: block; }
.aoh-newshero__title-line--accent { color: var(--aoh-orange); }
.aoh-newshero__lead { margin: 0; max-width: 46rem; color: rgba(245, 239, 230, 0.9); font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.04rem); line-height: 1.6; }
.aoh-newshero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }

/* The listing band carries the dark surface through from the hero. */
.aoh-news { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) clamp(3rem, 2rem + 4vw, 5rem); }
.aoh-news .aoh-button--secondary:hover { background: var(--aoh-off-white); color: var(--aoh-black); border-color: var(--aoh-off-white); }
.aoh-news .aoh-empty-state { background: transparent; color: rgba(247, 242, 234, 0.8); border-color: var(--aoh-line-dark); }
.aoh-news .aoh-admin-hint { color: var(--aoh-orange); }

/* Tabs. An underlined bar, not a pair of buttons: the active view is carried
   by cream text over muted and a 3px orange rule, and nothing else. */
.aoh-news__tablist { display: flex; flex-wrap: nowrap; gap: clamp(0.9rem, 0.4rem + 1.5vw, 2rem); border-bottom: 1px solid var(--aoh-hairline); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.aoh-news__tablist::-webkit-scrollbar { display: none; }
.aoh-news__tab { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 3rem; padding: 0.8rem 0.15rem; color: var(--aoh-text-muted); background: none; border: 0; white-space: nowrap; text-decoration: none; cursor: pointer; font-family: var(--aoh-font-body); font-size: clamp(0.74rem, 0.7rem + 0.2vw, 0.82rem); font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; transition: color var(--aoh-transition); }
.aoh-news__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color var(--aoh-transition); }
.aoh-news__tab:hover { color: var(--aoh-text); }
.aoh-news__tab[aria-selected="true"] { color: var(--aoh-text); }
.aoh-news__tab[aria-selected="true"]::after { background: var(--aoh-orange); }
.aoh-news__tab:focus-visible { outline: var(--aoh-focus); outline-offset: 2px; border-radius: 4px; }

/* Panels. Deliberately not .aoh-tabs__panel: that class belongs to the
   homepage featured-menu tabs and carries its own sizing assumptions. The
   animation values are the same ones, and the global reduced-motion rule in
   the token block already switches both keyframes off. */
.aoh-news__panel { display: none; padding-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.aoh-news__panel[hidden] { display: none; }
.aoh-news__panel.is-active { display: block; animation: aoh-panel-in var(--aoh-dur) var(--aoh-ease); }
.aoh-news__panel.is-leaving { animation: aoh-panel-out 120ms var(--aoh-ease) forwards; }
.aoh-news__panel:focus-visible { outline: var(--aoh-focus); outline-offset: -3px; }
.aoh-news__intro { margin: 0 0 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); max-width: 46rem; color: var(--aoh-text-muted); font-size: clamp(0.96rem, 0.93rem + 0.18vw, 1.04rem); line-height: 1.65; }

/* Grid: three across on desktop, two on tablet, one on phones. Every story
   is in it, including the newest one: there is no lead card above the grid. */
.aoh-news__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 0.85rem + 1vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.aoh-news__grid > li { display: flex; min-width: 0; }
@media (min-width: 40.0625em) { .aoh-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 67.5625em) { .aoh-news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Card. Modelled on the dish card, with one link stretched over the whole
   surface so the card is clickable while screen readers hear the headline
   once. The call to action below is decorative and hidden from them. */
.aoh-newscard { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; background: var(--aoh-surface-raised); border-radius: var(--aoh-radius-card); box-shadow: inset 0 0 0 1px var(--aoh-hairline); transition: transform var(--aoh-dur) var(--aoh-ease), box-shadow var(--aoh-transition), background-color var(--aoh-transition); }
.aoh-newscard:hover { transform: translateY(-2px); background: var(--aoh-surface-card-hi); box-shadow: inset 0 0 0 1px var(--aoh-hairline-strong), 0 14px 32px rgba(0, 0, 0, 0.38); }
.aoh-newscard__media { position: relative; flex: none; aspect-ratio: 3 / 2; overflow: hidden; background: var(--aoh-surface-deep); }
.aoh-newscard__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--aoh-dur-slow) var(--aoh-ease); }
.aoh-newscard:hover .aoh-newscard__img { transform: scale(1.03); }
.aoh-newscard__media--empty { display: grid; place-items: center; }
.aoh-newscard__placeholder { width: auto; height: auto; max-width: 34%; max-height: 42%; object-fit: contain; opacity: 0.22; }
.aoh-newscard__badge { position: absolute; z-index: 2; top: 0.85rem; left: 0.85rem; max-width: calc(100% - 1.7rem); padding: 0.3rem 0.65rem; border-radius: var(--aoh-pill); background: var(--aoh-orange); color: #0b0b0b; font-size: 0.64rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; }
.aoh-newscard__badge--press { background: rgba(14, 14, 16, 0.88); color: var(--aoh-text); box-shadow: inset 0 0 0 1px var(--aoh-orange); }
.aoh-newscard__body { display: flex; flex-direction: column; flex: 1; gap: 0.6rem; min-width: 0; padding: 1.2rem 1.35rem 1.35rem; }
.aoh-newscard__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin: 0; min-width: 0; font-size: 0.68rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aoh-text-muted); }
.aoh-newscard__category { color: var(--aoh-orange); overflow-wrap: anywhere; }
.aoh-newscard__category--source { color: var(--aoh-text); }
.aoh-newscard__category + .aoh-newscard__date::before { content: "\00b7"; margin-right: 0.5rem; color: var(--aoh-hairline-strong); }
.aoh-newscard__title { margin: 0; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; text-transform: none; color: var(--aoh-text); overflow-wrap: anywhere; }
/* Every state is pinned to the title's own colour, not just the resting one.
   The global `a:hover` sets a near-black, which is the right answer on a page
   of light prose and the wrong one on a dark card: it would take the headline
   almost to the card's own colour the moment a pointer touched the card, and
   the same for :focus and :visited. A single-state override here would be
   beaten by `a:hover`, so all of them are named together. */
.aoh-newscard__link,
.aoh-newscard__link:link,
.aoh-newscard__link:visited,
.aoh-newscard__link:hover,
.aoh-newscard__link:focus,
.aoh-newscard__link:focus-visible,
.aoh-newscard__link:active { color: inherit; text-decoration: none; }
.aoh-newscard__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.aoh-newscard__link:focus-visible { outline: none; }
.aoh-newscard__link:focus-visible::after { outline: var(--aoh-focus); outline-offset: -3px; }
.aoh-newscard__excerpt { margin: 0; color: var(--aoh-text-muted); font-size: 0.95rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aoh-newscard__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin: auto 0 0; padding-top: 0.4rem; color: var(--aoh-orange); font-size: 0.72rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; }
.aoh-newscard__cta-text { min-width: 0; overflow-wrap: anywhere; }
.aoh-newscard__cta .aoh-icon { width: 0.95em; height: 0.95em; transition: transform var(--aoh-transition); }
.aoh-newscard:hover .aoh-newscard__cta .aoh-icon--arrow-right { transform: translateX(3px); }
.aoh-newscard:hover .aoh-newscard__cta--external .aoh-icon { transform: translate(2px, -2px); }

/* External coverage: one restrained rail, no second accent colour. */
.aoh-newscard--press::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 3px; background: var(--aoh-orange); opacity: 0.6; pointer-events: none; }
.aoh-newscard--press:hover::before { opacity: 1; }

/* Load more. A real link until the script upgrades it, so the status line
   below stays empty and silent on a page that is doing nothing. */
.aoh-news__more { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.aoh-news__more-link.is-busy { opacity: 0.6; cursor: progress; }
.aoh-news__more-link.is-busy:hover { transform: none; }
.aoh-news__status { margin: 0; min-height: 1.4rem; color: var(--aoh-text-muted); font-size: 0.88rem; line-height: 1.4; text-align: center; }

/* ---- Single Article ---- */
/* One editorial card on the dark page. The photograph, the headline and the
   text sit on a single surface a shade lighter than the page, because they are
   one piece of writing; the card clips its own corners so the image follows
   them. .aoh-main already holds the page clear of the fixed header, so the
   padding below is the article's own breathing room, not a second hero. */
.aoh-article { background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 4vw, 5rem); }
.aoh-article__shell { width: min(100% - 2 * var(--aoh-gutter), 66rem); margin-inline: auto; }
.aoh-article__card { background: var(--aoh-surface-deep); border: 1px solid var(--aoh-hairline); border-radius: var(--aoh-radius-card); overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }

/* The photograph, flush to the top of the card.
   16:9 is the ratio the whole site crops news imagery to, and aoh-wide is
   already a true 1600x900 file, so no image is stretched. The height cap is
   what stops it from taking the screen: below roughly a 990px viewport the card
   is narrow enough that 16:9 is under the cap and the ratio is exact, and above
   it the cap holds at 520px and object-fit trims the top and bottom rather than
   distorting anything. */
.aoh-article__figure { margin: 0; }
.aoh-article__image { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 32.5rem; object-fit: cover; object-position: center 40%; border-bottom: 1px solid var(--aoh-hairline); }

/* Generous inside the card, and still 22px at 390px. */
.aoh-article__inner { padding: clamp(1.25rem, 0.85rem + 2.2vw, 3rem); }

/* The readable column, centred inside the wider card. */
.aoh-article__header,
.aoh-article .aoh-prose,
.aoh-article__foot { width: 100%; max-width: 46rem; margin-inline: auto; }

.aoh-article__header { margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.aoh-article__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin: 0 0 0.85rem; font-family: var(--aoh-font-body); font-size: 0.72rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aoh-text-muted); }
.aoh-article__category { color: var(--aoh-orange); }
.aoh-article__date { color: var(--aoh-text-muted); }
.aoh-article__category + .aoh-article__date::before { content: "\00b7"; margin-right: 0.5rem; color: var(--aoh-hairline-strong); }
/* PEPPERMINT, at a size that still leaves three or four words on a line. Only
   weight 400 is self-hosted, so the weight is pinned to stop a synthesised
   bold. */
.aoh-article__title { margin: 0; font-family: var(--aoh-font-title); font-weight: 400; font-size: clamp(2rem, 1.15rem + 2.8vw, 3.5rem); line-height: 1.12; letter-spacing: 0.01em; text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; overflow-wrap: break-word; }
/* Printed only when the post really carries an excerpt; see single.php. */
.aoh-article__standfirst { margin: 1rem 0 0; font-family: var(--aoh-font-body); color: rgba(245, 239, 230, 0.9); font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem); line-height: 1.65; }

.aoh-article .aoh-prose { max-width: 46rem; font-family: var(--aoh-font-body); color: rgba(245, 239, 230, 0.88); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); line-height: 1.75; }
.aoh-article .aoh-prose > *:first-child { margin-top: 0; }
.aoh-article .aoh-prose > *:last-child { margin-bottom: 0; }
.aoh-article .aoh-prose p { margin: 0 0 1.5em; }
/* Body headings inside an article are Barlow, not PEPPERMINT. The display
   face stops at the article's own headline: a heading that merely opens a
   paragraph of prose is ordinary content typography, so it takes the body
   family at the bold weight every other heading of its rank uses. Size,
   margins, colour, tracking and wrapping are untouched. */
.aoh-article .aoh-prose h2 { margin: 2.1em 0 0.55em; font-family: var(--aoh-font-body); font-weight: 700; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.1rem); line-height: 1.2; letter-spacing: 0.01em; color: var(--aoh-text); text-wrap: balance; }
.aoh-article .aoh-prose h3 { margin: 1.8em 0 0.45em; font-family: var(--aoh-font-body); font-weight: 700; font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); line-height: 1.3; letter-spacing: 0.01em; text-transform: none; color: var(--aoh-text); }
.aoh-article .aoh-prose h4 { margin: 1.6em 0 0.45em; font-family: var(--aoh-font-body); font-weight: 700; font-size: 1.05rem; text-transform: none; color: var(--aoh-text); }
/* Every migrated article heads its sections with h3 and never uses h2, so in
   those articles h3 *is* the section heading and is sized like the h2 above
   rather than like a sub-heading. The content keeps whatever markup the editor
   wrote; only the styling reads the level that is actually there. Family and
   weight match that h2 exactly - this rule moves the size and nothing else. */
.aoh-article .aoh-prose:not(:has(h2)) h3 { font-family: var(--aoh-font-body); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.75vw, 1.85rem); line-height: 1.22; letter-spacing: 0.01em; }

/* A page-wide hover rule must never take a heading's colour with it. */
.aoh-article .aoh-prose :is(h2, h3, h4):hover { color: var(--aoh-text); }
.aoh-article .aoh-prose ul, .aoh-article .aoh-prose ol { margin: 0 0 1.5em; padding-left: 1.4rem; }
.aoh-article .aoh-prose li { margin-bottom: 0.5em; }
.aoh-article .aoh-prose li::marker { color: var(--aoh-orange); }
.aoh-article .aoh-prose a { color: var(--aoh-orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 0.16s ease, text-decoration-color 0.16s ease; }
/* Still unmistakably the brand orange on hover, just brighter and heavier. */
.aoh-article .aoh-prose a:hover { color: #ff9a3c; text-decoration-thickness: 2px; }
.aoh-article .aoh-prose a:focus-visible { outline: var(--aoh-focus); outline-offset: 3px; border-radius: 2px; color: var(--aoh-text); }
.aoh-article .aoh-prose blockquote { margin: 1.85em 0; padding: 0.35rem 0 0.35rem 1.35rem; border-left: 3px solid var(--aoh-orange); color: var(--aoh-text); font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem); line-height: 1.55; }
.aoh-article .aoh-prose blockquote p:last-child { margin-bottom: 0; }
.aoh-article .aoh-prose blockquote cite { display: block; margin-top: 0.6em; color: var(--aoh-text-muted); font-size: 0.85rem; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.aoh-article .aoh-prose figure { margin: 1.85em 0; }
.aoh-article .aoh-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--aoh-radius-card); }
.aoh-article .aoh-prose figcaption { margin-top: 0.6em; color: var(--aoh-text-muted); font-size: 0.85rem; line-height: 1.5; }
/* Anything the editor embeds stays inside the column. */
.aoh-article .aoh-prose :is(iframe, video, embed, object) { display: block; max-width: 100%; border-radius: var(--aoh-radius-card); }
.aoh-article .aoh-prose .wp-block-embed__wrapper { max-width: 100%; }
.aoh-article .aoh-prose hr { margin: 2.25em 0; border: 0; border-top: 1px solid var(--aoh-hairline-strong); }
.aoh-article .aoh-prose code { padding: 0.1em 0.35em; background: var(--aoh-surface-raised); border-radius: var(--aoh-radius); font-size: 0.92em; overflow-wrap: break-word; }
.aoh-article .aoh-prose pre { margin: 1.75em 0; padding: 1rem; overflow-x: auto; background: var(--aoh-surface-raised); border-radius: var(--aoh-radius); }
.aoh-article .aoh-prose table { display: block; width: 100%; margin: 1.75em 0; overflow-x: auto; font-size: 0.95rem; }
.aoh-article .aoh-prose th, .aoh-article .aoh-prose td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--aoh-hairline); text-align: left; }
.aoh-article__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.75em; font-size: 0.9rem; }

/* The one way back, under a hairline divider. */
.aoh-article__foot { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-top: 1px solid var(--aoh-hairline-strong); }
.aoh-article__back { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--aoh-font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--aoh-text); transition: color 0.16s ease; }
.aoh-article__back-arrow { font-size: 1.05em; line-height: 1; transition: transform 0.16s ease; }
.aoh-article__back:hover { color: var(--aoh-orange); }
.aoh-article__back:hover .aoh-article__back-arrow { transform: translateX(-3px); }
.aoh-article__back:focus-visible { outline: var(--aoh-focus); outline-offset: 4px; border-radius: 2px; color: var(--aoh-orange); }

/* Other published stories, in the archive's own card. Absent entirely when
   there are none; see single.php. */
.aoh-article__more { margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.aoh-article__more-title { margin: 0 0 clamp(1.1rem, 0.9rem + 1vw, 1.75rem); font-family: var(--aoh-font-title); font-weight: 400; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aoh-text); }

@media (max-width: 47.9375em) {
	/* On a phone the photograph is a header image, not a panorama: a fixed
	   band keeps the headline on the first screen while the image stays. */
	.aoh-article__image { aspect-ratio: auto; height: clamp(220px, 56vw, 260px); max-height: none; }
}

@media (max-width: 30em) {
	.aoh-article__card { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.aoh-article__back,
	.aoh-article__back-arrow,
	.aoh-article .aoh-prose a { transition: none; }
	.aoh-article__back:hover .aoh-article__back-arrow { transform: none; }
}

/* ---- Legal / Company pages -------------------------------------------- */
/* Privacy Policy, Terms of Service and Government Contracting. Three long
   documents, one layout, and nothing invented for them: the hero is the
   Careers / About / Contact / Our App hero again - the same padding clamps and
   the same .aoh-pagehero min-height, so these pages measure like every other
   internal page - and the body is the project's cream reading column. The
   image, its mobile variant and its focus come from the shared per-page Page
   Hero field and are never hardcoded here. */
.aoh-legalhero { position: relative; isolation: isolate; overflow: hidden; background: var(--aoh-bg-dark); color: var(--aoh-text); padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem) clamp(2.25rem, 1.25rem + 3.5vw, 3.75rem); }
.aoh-legalhero__glow { position: absolute; z-index: -1; left: 50%; top: -42%; width: min(780px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 122, 0, 0.2), rgba(255, 122, 0, 0.06) 45%, transparent 70%); }
.aoh-legalhero.aoh-pagehero--image .aoh-legalhero__glow { display: none; }
.aoh-legalhero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
/* PEPPERMINT reaches exactly this far: the page's own title, through
   .aoh-display-title, and nothing below it. */
.aoh-legalhero__title { margin: 0; font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); text-transform: uppercase; color: var(--aoh-text); text-wrap: balance; }
.aoh-legalhero.aoh-pagehero--image { padding-block: clamp(3.5rem, 1.75rem + 6vw, 6.25rem) clamp(3rem, 1.5rem + 5vw, 5.25rem); }

/* Body. A document, so the column is sized for reading - about 880px - and the
   headings are Barlow at a scale that separates sections without re-opening
   the page. The global h1/h2 rule is a poster scale built for section bands;
   every part of it that applies to a heading inside running text is reset
   here. */
.aoh-legal { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
.aoh-legal__prose {
	max-width: 55rem;
	margin-inline: auto;
	font-family: var(--aoh-font-body);
	color: var(--aoh-near-black);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.7;
	overflow-wrap: break-word;
}
.aoh-legal__prose > *:first-child { margin-top: 0; }
.aoh-legal__prose > *:last-child { margin-bottom: 0; }
.aoh-legal__prose p { margin: 0 0 1.35em; }
.aoh-legal__prose :is(h2, h3, h4) { font-family: var(--aoh-font-body); font-weight: 700; color: var(--aoh-near-black); text-transform: none; text-wrap: balance; }
.aoh-legal__prose h2 { margin: 2em 0 0.5em; font-size: clamp(1.5rem, 1.2rem + 1.05vw, 2.25rem); line-height: 1.22; letter-spacing: 0.01em; }
.aoh-legal__prose h3 { margin: 1.7em 0 0.4em; font-size: clamp(1.25rem, 1.05rem + 0.65vw, 1.75rem); line-height: 1.3; letter-spacing: 0.01em; }
.aoh-legal__prose h4 { margin: 1.5em 0 0.4em; font-size: 1.0625rem; line-height: 1.35; letter-spacing: 0.01em; }
.aoh-legal__prose ul, .aoh-legal__prose ol { margin: 0 0 1.35em; padding-left: 1.4rem; }
.aoh-legal__prose li { margin-bottom: 0.4em; }
.aoh-legal__prose li:last-child { margin-bottom: 0; }
.aoh-legal__prose li::marker { color: var(--aoh-orange-dark); }
/* Links keep the site-wide orange and stay underlined, which is what carries
   them for a reader who cannot separate the two colours. A policy page is also
   the one place a bare URL can appear in running text, so it is allowed to
   break rather than push the column sideways on a phone. */
.aoh-legal__prose a { color: var(--aoh-orange-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.aoh-legal__prose a:hover { color: var(--aoh-near-black); text-decoration-thickness: 2px; }
.aoh-legal__prose a:focus-visible { outline: var(--aoh-focus); outline-offset: 3px; border-radius: 2px; }
.aoh-legal__prose hr { margin: 2.25em 0; border: 0; border-top: 1px solid var(--aoh-light-grey); }
.aoh-legal__prose img { border-radius: var(--aoh-radius); }
.aoh-legal__prose table { margin: 1.75em 0; font-size: 0.95em; }
.aoh-legal__prose :is(th, td) { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--aoh-light-grey); text-align: left; }

/* Document download panel - [aoh_document]. A card inside the reading column,
   not a second hero: one orange edge, the button, and the file type and size
   stated in text so the reader knows what the link will hand them. */
.aoh-legaldoc {
	margin: 2em 0;
	padding: clamp(1.15rem, 0.9rem + 1vw, 1.75rem);
	border: 1px solid var(--aoh-light-grey);
	border-left: 4px solid var(--aoh-orange);
	border-radius: var(--aoh-radius-lg);
	background: var(--aoh-white);
}
.aoh-legal__prose .aoh-legaldoc__title { margin: 0 0 0.35em; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.25; }
.aoh-legal__prose .aoh-legaldoc__copy { margin: 0 0 1.1rem; color: var(--aoh-near-black); }
.aoh-legal__prose .aoh-legaldoc__action { margin: 0; }
/* The label is long and the generic button never wraps, which would push a
   390px screen sideways; here it is allowed to run to a second line. */
.aoh-legal__prose .aoh-legaldoc__button { white-space: normal; text-align: center; line-height: 1.25; text-decoration: none; color: var(--aoh-black); }
.aoh-legal__prose .aoh-legaldoc__button:hover { color: var(--aoh-white); }
.aoh-legal__prose .aoh-legaldoc__meta { margin: 0.7rem 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aoh-mid-grey); }
/* ---- Utilities ---- */
.aoh-muted { color: var(--aoh-stone); }
.aoh-center { text-align: center; }
.aoh-stack > * + * { margin-top: 1rem; }