/* ==========================================================================
   Crust Empire — page furniture (all Crust page templates)
   Loaded on every page using a Crust template, not just the homepage.
   ========================================================================== */

/* Design tokens, .ce-container, the button system and .ce-eyebrow all live in
   site.css, which loads before this file on every page. */

/* Let the template run edge to edge inside Blocksy's <main>. */
body.crust-template #main.site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

.ce-page {
	font-family: var(--ce-sans);
	color: var(--ce-body);
	font-size: 1rem;
	line-height: 1.7;
	background: var(--ce-white);
	overflow-x: clip;
}

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

/* ---------------------------------------------------------------- Base --
   Specificity here is deliberate and load-bearing: `:where(.ce-page)` adds 0, so
   each rule scores exactly (0,0,1) — the element selector alone.

   That sits in the only window that works:
   - It ties Blocksy's own element rules (`p{margin-block-end}`,
     `ul,ol{padding-inline-start}`, `body,h1,h2,h3{font-family…}`) at (0,0,1) and
     wins on source order, because this file loads after Blocksy's.
   - It LOSES to every component class (0,1,0), so components own their spacing.

   Written plainly as `.ce-page p` it would score (0,1,1) and outrank every
   component, which silently flattened the whole spacing system — each <p> got
   `0 / 1rem` regardless of its own rule. Written as `:where(.ce-page) :where(p)`
   it scores (0,0,0) and loses to Blocksy instead, which drops the serif
   headings. Don't "simplify" these selectors in either direction. */

:where(.ce-page) h1,
:where(.ce-page) h2,
:where(.ce-page) h3 {
	font-family: var(--ce-serif);
	color: var(--ce-ink);
	font-weight: 600;
	line-height: 1.18;
	margin-block: 0 .6em;
	letter-spacing: -.01em;
}

:where(.ce-page) p { margin-block: 0 1rem; }
:where(.ce-page) ul,
:where(.ce-page) ol { margin: 0; padding: 0; list-style: none; }
:where(.ce-page) img { display: block; max-width: 100%; height: auto; }

/* :not(.ce-btn) keeps this generic link colour from overriding button fills. */
.ce-page a:not(.ce-btn) {
	color: var(--ce-orange);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.ce-page a:not(.ce-btn):hover { color: var(--ce-orange-dark); }

.ce-page :focus-visible {
	outline: 2px solid var(--ce-orange);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.ce-section { padding-block: var(--ce-section-y); }
.ce-section--cream { background: var(--ce-cream); }
.ce-section--peach { background: var(--ce-peach); }
.ce-section--mist  { background: var(--ce-mist); }

.ce-section--navy {
	background: var(--ce-navy);
	color: var(--ce-body-light);
}

/* Every heading on a dark ground must be listed here. `.ce-page h1,h2,h3` above
   sets --ce-ink at specificity (0,1,1); these tie and win only by coming later,
   so a dark section whose heading is styled solely by its own single class (as
   .ce-cta__title was) silently renders near-black on navy. */
.ce-section--navy h2,
.ce-section--navy h3,
.ce-cta h2 { color: var(--ce-white); }

.ce-section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ce-section__head--center { margin-inline: auto; text-align: center; }

.ce-section__title { font-size: clamp(1.85rem, 3.4vw, 2.9rem); }
.ce-section__lede { font-size: 1.0625rem; margin-bottom: 0; }
.ce-section--navy .ce-section__lede { color: var(--ce-body-light); }

.ce-section__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	text-align: center;
}

.ce-fineprint {
	font-size: .8125rem;
	color: var(--ce-body);
	margin: 1rem 0 0;
	opacity: .85;
}

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

/* ---------------------------------------------------------------- Media -- */

.ce-media { width: 100%; height: 100%; object-fit: cover; }

/* Shown until real artwork is dropped into assets/img/. */
.ce-media--empty {
	display: grid;
	place-items: center;
	min-height: 240px;
	background:
		linear-gradient(135deg, rgba(172, 81, 32, .09), rgba(18, 49, 79, .14)),
		repeating-linear-gradient(45deg, transparent 0 12px, rgba(18, 49, 79, .05) 12px 24px);
	border: 1px dashed rgba(18, 49, 79, .25);
	border-radius: var(--ce-radius);
}

/* Placeholders sit on dark sections too, so lighten them there. */
.ce-section--navy .ce-media--empty {
	background:
		linear-gradient(135deg, rgba(201, 150, 74, .16), rgba(255, 255, 255, .06)),
		repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, .05) 12px 24px);
	border-color: rgba(255, 255, 255, .28);
}

.ce-section--navy .ce-media--empty span { color: var(--ce-white); opacity: .75; }

.ce-media--empty span {
	font-family: var(--ce-sans);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ce-navy);
	opacity: .6;
	padding: .5rem;
	text-align: center;
}

/* ----------------------------------------------------------------- Hero -- */

/* ----------------------------------------------------------------- Hero --
   Matches the supplied mockup: the photograph bleeds to the right edge of the
   viewport and fades into the cream ground behind the copy, with a watermark
   letterform and a dotted motif as background texture. */

.ce-hero {
	position: relative;
	background: linear-gradient(180deg, var(--ce-cream) 0%, var(--ce-peach) 100%);
	overflow: hidden;
}

/* Full-bleed photograph on the right. */
.ce-hero__visual {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 52%;
	z-index: 0;
}

.ce-hero__visual .ce-media,
.ce-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	aspect-ratio: auto;
}

/* Fades the photograph into the cream so the headline stays readable. */
.ce-hero__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, var(--ce-cream) 0%, rgba(250, 246, 240, .85) 22%, rgba(250, 246, 240, 0) 55%);
	pointer-events: none;
}

/* Watermark letterform behind the headline. */
.ce-hero::before {
	content: "E";
	position: absolute;
	inset-block-start: -2rem;
	inset-inline-start: -1.5rem;
	z-index: 0;
	font-family: var(--ce-serif);
	font-size: 30rem;
	line-height: 1;
	font-weight: 600;
	color: var(--ce-gold);
	opacity: .07;
	pointer-events: none;
	user-select: none;
}

/* Dotted motif, lower left. */
.ce-hero::after {
	content: "";
	position: absolute;
	inset-block-end: 3.5rem;
	inset-inline-start: 0;
	width: 7rem;
	height: 5rem;
	z-index: 0;
	background-image: radial-gradient(var(--ce-orange) 1.5px, transparent 1.6px);
	background-size: 12px 12px;
	opacity: .3;
	pointer-events: none;
}

.ce-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(3rem, 6vw, 5.5rem);
	min-height: clamp(26rem, 40vw, 34rem);
}

.ce-hero__copy {
	position: relative;
	z-index: 3;          /* above the photograph, which is z-index 0 */
	max-width: min( 34rem, 46% );
}

.ce-hero__title {
	font-size: clamp(2.1rem, 3.7vw, 3.5rem);
	line-height: 1.08;
	margin-bottom: 1.25rem;
}

.ce-hero__title span { display: block; }
.ce-hero__title-accent { color: var(--ce-orange); font-style: italic; }

.ce-hero__intro {
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	max-width: 30rem;
	margin-bottom: 2rem;
}

.ce-hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; }

/* Navy ribbon, pinned to the top right over the photograph. */
.ce-hero__badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: clamp(1rem, 4vw, 3.5rem);
	z-index: 3;
	width: 11.5rem;
	padding: 1.75rem 1.25rem 2.25rem;
	background: var(--ce-navy);
	color: var(--ce-white);
	text-align: center;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
}

.ce-hero__badge p {
	margin: .75rem 0 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ Trust bar -- */

.ce-trust { background: var(--ce-white); border-bottom: 1px solid var(--ce-line); }

.ce-trust__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.ce-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding-inline: .75rem;
	text-align: center;
	color: var(--ce-navy);
	border-inline-end: 1px solid var(--ce-line);
}

.ce-trust__item:last-child { border-inline-end: 0; }

.ce-trust__item span {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- Paths -- */

.ce-paths { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--ce-white); }

.ce-paths__grid {
	display: grid;
	grid-template-columns: 1.05fr 1.15fr 1.05fr 1.15fr 1.05fr;
	gap: 1rem;
	align-items: stretch;
}

.ce-path {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.5rem, 2.2vw, 2rem);
	border-radius: var(--ce-radius);
	background: var(--ce-mist);
}

.ce-path--chef { background: var(--ce-peach); }
.ce-path--why  { background: var(--ce-mist); }

.ce-path__label {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ce-body);
	margin-bottom: .75rem;
}

.ce-path__title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: .75rem; }
.ce-path p { font-size: .9375rem; }
/* Cards are narrow in the 5-column row, so tighten the label to keep it on one line. */
.ce-path .ce-btn {
	margin-top: auto;
	padding-inline: 1.15rem;
	letter-spacing: .07em;
	white-space: nowrap;
}

.ce-path__media { position: relative; border-radius: var(--ce-radius); overflow: hidden; min-height: 260px; }
.ce-path__media .ce-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------- Stats -- */

.ce-stats { background: var(--ce-navy); }

.ce-stats__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.ce-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	text-align: center;
	padding-inline: 1rem;
	color: var(--ce-gold);
	border-inline-end: 1px solid var(--ce-line-dark);
}

.ce-stat:last-child { border-inline-end: 0; }

.ce-stat__value {
	font-family: var(--ce-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	color: var(--ce-white);
	margin: 0;
	line-height: 1;
}

.ce-stat__label {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ce-body-light);
}

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

.ce-cards { display: grid; gap: 1.25rem; }
.ce-cards--3 { grid-template-columns: repeat(3, 1fr); }
.ce-cards--4 { grid-template-columns: repeat(4, 1fr); }

.ce-card {
	padding: clamp(1.5rem, 2.2vw, 2rem);
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ce-card:hover { transform: translateY(-3px); box-shadow: var(--ce-shadow); }

.ce-card__icon {
	display: inline-flex;
	margin-bottom: 1rem;
	color: var(--ce-orange);
}

.ce-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.ce-card p { font-size: .9375rem; margin: 0; }

.ce-card--role {
	background: rgba(255, 255, 255, .04);
	border-color: var(--ce-line-dark);
	border-top: 2px solid var(--ce-gold);
}

.ce-card--role:hover { background: rgba(255, 255, 255, .07); box-shadow: none; }
.ce-card--role p { color: var(--ce-body-light); }

/* ---------------------------------------------------------------- Split -- */

.ce-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.ce-split--reverse .ce-split__media { order: -1; }

.ce-split__media {
	position: relative;
	border-radius: var(--ce-radius);
	overflow: hidden;
	align-self: stretch;
	min-height: 340px;
}

/* Absolute so the image can never dictate the row height: a tall portrait was
   rendering 536x1072 and stretching the whole section to 1278px. The frame sets
   the size, the image crops into it. */
.ce-split__media .ce-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ce-split__copy .ce-section__title { margin-bottom: 1.25rem; }
.ce-split__copy .ce-btn { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- Steps -- */

.ce-steps { display: grid; gap: 1.5rem; margin-top: 2rem; }

.ce-step { display: grid; grid-template-columns: auto 1fr; gap: 1.125rem; align-items: start; }

.ce-step__num {
	font-family: var(--ce-serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ce-orange);
	padding-top: .1em;
	min-width: 2ch;
}

.ce-step__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--ce-white);
	color: var(--ce-orange);
	border: 1px solid var(--ce-line);
}

.ce-step h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.ce-step p { font-size: .9375rem; margin: 0; }
.ce-section--navy .ce-step p { color: var(--ce-body-light); }

.ce-callout {
	margin: 2rem 0 0;
	padding: 1.125rem 1.375rem;
	background: var(--ce-white);
	border-inline-start: 3px solid var(--ce-orange);
	border-radius: var(--ce-radius);
	font-size: .9375rem;
}

.ce-callout strong { color: var(--ce-ink); }

/* ------------------------------------------------------------ Checklist -- */

.ce-checklist { display: grid; gap: .875rem; margin-bottom: 1.5rem; }
.ce-checklist--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; margin-top: 2rem; }

.ce-checklist li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	font-size: .9375rem;
	line-height: 1.55;
}

.ce-checklist .ce-icon { color: var(--ce-orange); margin-top: .18em; }
.ce-section--navy .ce-checklist .ce-icon { color: var(--ce-gold); }

/* -------------------------------------------------------------- Sectors -- */

.ce-sectors { background: var(--ce-white); padding-block: clamp(2.5rem, 4vw, 3.5rem); }

.ce-sectors__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .625rem .75rem;
	margin-top: 1.5rem;
}

.ce-sectors__list li {
	padding: .5rem 1.125rem;
	border: 1px solid var(--ce-line);
	border-radius: 100px;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ce-navy);
	background: var(--ce-cream);
}

/* Form styles moved to site.css — the candidate and employer pages use them too. */

/* ------------------------------------------------------------------ CTA -- */

.ce-cta {
	background: var(--ce-navy-deep);
	padding-block: var(--ce-section-y);
	text-align: center;
}

.ce-cta__title {
	color: var(--ce-white);
	font-size: clamp(1.7rem, 3.2vw, 2.6rem);
	max-width: 22ch;
	margin-inline: auto;
}

.ce-cta__text { color: var(--ce-body-light); margin-bottom: 2rem; }

/* ------------------------------------------------------------- Contacts -- */

.ce-contacts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.ce-contact {
	padding: clamp(1.5rem, 2.2vw, 2rem);
	text-align: center;
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	color: var(--ce-orange);
}

.ce-contact h3 {
	font-family: var(--ce-sans);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ce-body);
	margin: .875rem 0 .4rem;
}

/* .ce-page prefix so these beat the generic `.ce-page a:not(.ce-btn)` colour. */
.ce-page .ce-contact a {
	font-family: var(--ce-serif);
	font-size: 1.0625rem;
	color: var(--ce-navy);
	text-decoration: none;
	word-break: break-word;
}

.ce-page .ce-contact a:hover { color: var(--ce-orange); }

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

@media (max-width: 1080px) {
	.ce-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ce-path--why { grid-column: 1 / -1; }
	.ce-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.ce-trust__list { grid-template-columns: repeat(3, 1fr); row-gap: 1.75rem; }
	.ce-trust__item:nth-child(3n) { border-inline-end: 0; }
}

@media (max-width: 900px) {
	/* Hero photo returns to the flow and stacks above the copy. */
	.ce-hero__inner { grid-template-columns: 1fr; min-height: 0; }

	.ce-hero__visual {
		position: relative;
		inset: auto;
		width: 100%;
		order: -1;
		border-radius: var(--ce-radius);
		overflow: hidden;
	}

	.ce-hero__visual .ce-media,
	.ce-hero__image { aspect-ratio: 4 / 3; }

	.ce-hero__visual::before { display: none; }
	.ce-hero::before { font-size: 18rem; opacity: .05; }
	.ce-hero::after { display: none; }

	.ce-hero__badge { inset-inline-end: 1rem; width: 10rem; }
	.ce-split { grid-template-columns: 1fr; }
	.ce-split--reverse .ce-split__media { order: 0; }
	.ce-cards--3 { grid-template-columns: 1fr; }
	.ce-contacts { grid-template-columns: 1fr; }
	.ce-stats__list { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
	.ce-stat:nth-child(2n) { border-inline-end: 0; }
}

@media (max-width: 640px) {
	.ce-paths__grid { grid-template-columns: 1fr; }
	.ce-cards--4 { grid-template-columns: 1fr; }
	.ce-form__grid { grid-template-columns: 1fr; }
	.ce-checklist--two { grid-template-columns: 1fr; }
	.ce-trust__list { grid-template-columns: repeat(2, 1fr); }
	.ce-trust__item { border-inline-end: 0; }
	.ce-hero__badge { position: static; width: auto; margin-top: 1rem; clip-path: none; border-radius: var(--ce-radius); }
	.ce-hero__actions .ce-btn { flex: 1 1 100%; justify-content: center; }
	.ce-split__media, .ce-split__media .ce-media { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
	.ce-page *,
	.ce-page *::before,
	.ce-page *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------- Inner page hero -- */

.ce-pagehero {
	background: linear-gradient(180deg, var(--ce-cream) 0%, var(--ce-peach) 100%);
	position: relative;
	overflow: hidden;
}

.ce-pagehero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.ce-pagehero__title {
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	margin-bottom: 1rem;
}

.ce-pagehero__intro {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	max-width: 34rem;
	margin-bottom: 1.75rem;
}

.ce-pagehero__actions { display: flex; flex-wrap: wrap; gap: .875rem; }

.ce-pagehero__visual .ce-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--ce-radius);
	box-shadow: var(--ce-shadow);
}

@media (max-width: 900px) {
	.ce-pagehero__inner { grid-template-columns: 1fr; }
	.ce-pagehero__visual { order: -1; }
}

@media (max-width: 640px) {
	.ce-pagehero__actions .ce-btn { flex: 1 1 100%; justify-content: center; }
}

/* Orange step numbers are 2.50:1 on navy — fine on cream, a WCAG failure on a
   dark ground. Gold is the dark-section accent throughout. */
.ce-section--navy .ce-step__num { color: var(--ce-gold); }

/* Compact checklist inside role cards. */
.ce-checklist--tight { gap: .5rem; margin: 1rem 0 0; }
.ce-checklist--tight li { font-size: .875rem; }

/* Contact page: mobile line grid and paired CTA buttons. */
.ce-mobilegrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.ce-mobilegrid a {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.25rem;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--ce-line-dark);
	border-radius: var(--ce-radius);
	font-size: 1.0625rem;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.ce-mobilegrid a:hover { background: rgba(255, 255, 255, .1); border-color: var(--ce-gold); }
.ce-mobilegrid svg { color: var(--ce-gold); }

.ce-socials--contact { margin-top: 1.75rem; }
.ce-socials--contact a { color: var(--ce-navy); }

.ce-cta__actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; }

@media (max-width: 640px) {
	.ce-mobilegrid { grid-template-columns: 1fr; }
	.ce-cta__actions .ce-btn { flex: 1 1 100%; justify-content: center; }
}

/* Dark-ground corrections (caught by the computed-contrast audit):
   - .ce-fineprint is --ce-body, only 2.10:1 on navy.
   - .ce-mobilegrid links inherit the orange link colour, 2.50:1 on navy. The
     .ce-page prefix is needed to tie `.ce-page a:not(.ce-btn)` at (0,2,1). */
.ce-section--navy .ce-fineprint { color: var(--ce-body-light); opacity: 1; }
.ce-page .ce-mobilegrid a:not(.ce-wabtn) { color: var(--ce-white); }

/* ------------------------------------------------- Contact: routes & depts -- */

/* Primary routes — three equal cards, generous target areas. */
.ce-routes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.ce-route {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.5rem, 2.4vw, 2.25rem);
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-top: 3px solid var(--ce-orange);
	border-radius: var(--ce-radius);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ce-route:hover { transform: translateY(-3px); box-shadow: var(--ce-shadow); }
.ce-route--phone { border-top-color: var(--ce-navy); }

.ce-route__icon { display: inline-flex; color: var(--ce-orange); margin-bottom: 1rem; }
.ce-route--phone .ce-route__icon { color: var(--ce-navy); }

.ce-route h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.ce-route p { font-size: .9375rem; margin: 0 0 1.25rem; }

.ce-route__mail {
	margin-top: auto;
	font-family: var(--ce-sans);
	font-size: .9375rem;
	font-weight: 600;
	word-break: break-word;
}

/* Secondary departments — a quieter two-column list, not competing cards. */
.ce-depts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2.5rem;
}

.ce-dept {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
	padding: 1.25rem 0;
	border-top: 1px solid var(--ce-line);
}

.ce-dept__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	color: var(--ce-orange);
}

.ce-dept h3 { font-size: 1rem; margin-bottom: .2rem; }
.ce-dept p { font-size: .875rem; margin: 0 0 .35rem; }
.ce-dept a { font-size: .875rem; word-break: break-word; }

@media (max-width: 900px) {
	.ce-routes { grid-template-columns: 1fr; }
	.ce-depts { grid-template-columns: 1fr; gap: 0; }
}

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

.ce-faq { display: grid; gap: 0; }

.ce-faq__item {
	padding: 1.25rem 0;
	border-top: 1px solid var(--ce-line);
}

.ce-faq__item:last-child { border-bottom: 1px solid var(--ce-line); }

.ce-faq dt {
	font-family: var(--ce-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ce-ink);
	margin-bottom: .35rem;
}

.ce-faq dd { margin: 0; font-size: .9375rem; }

/* Service cards on dark grounds link through, so give the heading link the
   gold treatment rather than the orange used on light sections. */
.ce-page .ce-card--role h3 a { color: var(--ce-white); text-decoration: none; }
.ce-page .ce-card--role h3 a:hover { color: var(--ce-gold); }

/* "More about this role" link at the foot of a card. */
.ce-card__more { margin: 1rem 0 0; }

.ce-card__more a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.ce-page .ce-card h3 a { color: var(--ce-ink); text-decoration: none; }
.ce-page .ce-card h3 a:hover { color: var(--ce-orange); }

/* Must come AFTER `.ce-page .ce-card h3 a` above: both score (0,2,1), so the
   later rule wins. Without this the dark role/service cards inherit --ce-ink
   and their heading links render at 1.23:1 on navy — invisible. */
.ce-page .ce-card--role h3 a { color: var(--ce-white); }
.ce-page .ce-card--role h3 a:hover { color: var(--ce-gold); }

/* ------------------------------------------------------------ Card links -- */

/*
 * Whole-card click target. The heading holds the only real link and its ::after
 * covers the card, so the entire surface is clickable while keyboard users get
 * exactly one focusable element with the role name as its accessible name.
 * A card using this must contain no other link, or the overlay would cover it.
 */
.ce-card--link { position: relative; }

.ce-card--link h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ce-card--link:hover { border-color: var(--ce-orange); }
.ce-card--role.ce-card--link:hover { border-color: var(--ce-gold); }

.ce-card--link:focus-within {
	outline: 2px solid var(--ce-orange);
	outline-offset: 3px;
}

.ce-card--role.ce-card--link:focus-within { outline-color: var(--ce-gold); }

/* Now decorative — the card itself is the link. */
.ce-card__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 1rem 0 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ce-orange);
}

/* --------------------------------------------------- Trust & compliance -- */

.ce-trustsec__title { text-transform: uppercase; letter-spacing: .01em; }

.ce-trustgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.ce-trustitem {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .85rem;
	align-items: start;
	padding: 1.25rem;
	background: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-top: 3px solid var(--ce-gold);
	border-radius: var(--ce-radius);
}

.ce-trustitem__icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--ce-cream);
	color: var(--ce-orange);
}

.ce-trustitem h3 { font-size: .9375rem; line-height: 1.35; margin-bottom: .3rem; }
.ce-trustitem p { font-size: .8125rem; line-height: 1.55; margin: 0; }

/* Registration details — deliberately plain and factual. */
.ce-regbox {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ce-navy);
	color: var(--ce-body-light);
	border-radius: var(--ce-radius);
	text-align: center;
}

.ce-regbox__title {
	font-family: var(--ce-sans);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--ce-gold);
	margin-bottom: 1rem;
}

.ce-regbox__lines {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--ce-white);
	margin: 0 0 1rem;
}

.ce-regbox__note {
	font-size: .8125rem;
	line-height: 1.65;
	max-width: 60ch;
	margin: 0 auto;
}

@media (max-width: 1100px) { .ce-trustgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ce-trustgrid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Legal pages -- */

.ce-pagehero--plain { background: var(--ce-peach); }
.ce-pagehero--plain .ce-container { padding-block: clamp(2.5rem, 5vw, 4rem); }

.ce-legal__updated {
	font-size: .8125rem;
	color: var(--ce-body);
	margin: 1rem 0 0;
}

.ce-legal h2 {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	margin: 2.25rem 0 .75rem;
}

.ce-legal h2:first-child { margin-top: 0; }
.ce-legal p { font-size: .9375rem; line-height: 1.75; margin: 0 0 1rem; }

.ce-legal__list { display: grid; gap: .5rem; margin: 0 0 1.25rem; padding-inline-start: 1.15rem; list-style: disc; }
.ce-legal__list li { font-size: .9375rem; line-height: 1.7; }

.ce-legal__contact,
.ce-legal__nav {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ce-line);
}

.ce-legal__nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ce-legal__nav li { font-size: .9375rem; }

/* Legal links row in the footer bar. */
.ce-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ce-footer__legal li { font-size: .8125rem; }

@media (max-width: 640px) {
	.ce-footer__legal { justify-content: center; gap: .5rem 1.1rem; }
}

/* ------------------------------------------------- Availability tables -- */

.ce-section__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin-block-start: 2.5rem;
}

/* Horizontal scroll is confined here so the page body never scrolls sideways. */
.ce-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--ce-line);
	border-radius: 14px;
	background: var(--ce-white);
}

.ce-tablewrap:focus-visible { outline: 2px solid var(--ce-orange); outline-offset: 2px; }

.ce-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ce-sans);
	font-size: .9375rem;
	min-width: 44rem;
}

.ce-table th,
.ce-table td {
	padding: .95rem 1.15rem;
	text-align: left;
	vertical-align: middle;
}

.ce-table thead th {
	background: var(--ce-navy);
	color: var(--ce-white);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ce-table thead th:first-child { border-start-start-radius: 13px; }
.ce-table thead th:last-child  { border-start-end-radius: 13px; }

.ce-table tbody tr + tr { border-top: 1px solid var(--ce-line); }
.ce-table tbody tr:nth-child(even) { background: var(--ce-cream); }
.ce-table tbody td { color: var(--ce-body); }

.ce-ref {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--ce-navy);
	letter-spacing: .03em;
}

.ce-pill {
	display: inline-block;
	padding: .3rem .7rem;
	border-radius: 100px;
	background: var(--ce-mist);
	color: var(--ce-navy);
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.ce-pill--now { background: #e7f1e8; color: #2f5d3a; }   /* 6.6:1 — passes AA */

/* Below the table's min-width, each row becomes its own stacked card. */
@media (max-width: 760px) {
	.ce-tablewrap { overflow-x: visible; border: 0; background: none; border-radius: 0; }
	.ce-table { min-width: 0; font-size: .9375rem; }
	.ce-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

	.ce-table tbody tr {
		display: block;
		margin-block-end: .85rem;
		padding: .35rem .25rem;
		border: 1px solid var(--ce-line);
		border-radius: 14px;
		background: var(--ce-white);
	}

	.ce-table tbody tr + tr { border-top: 1px solid var(--ce-line); }
	.ce-table tbody tr:nth-child(even) { background: var(--ce-white); }

	.ce-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: .5rem .9rem;
		text-align: right;
	}

	.ce-table tbody td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: .75rem;
		font-weight: 600;
		letter-spacing: .07em;
		text-transform: uppercase;
		color: var(--ce-body);
		text-align: left;
	}
}

/* -------------------------------------------------------- Staff profiles -- */

.ce-profile__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-block-end: .85rem;
}

.ce-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-block-start: 1rem;
	padding: 0;
	list-style: none;
}

.ce-tags li {
	padding: .28rem .65rem;
	border: 1px solid var(--ce-line);
	border-radius: 100px;
	background: var(--ce-cream);
	font-family: var(--ce-sans);
	font-size: .78rem;
	color: var(--ce-body);
}

/* ------------------------------------------------------------ Notecard -- */

/* Also carries .ce-field, which is `display: flex; flex-direction: column;
   gap: .45rem` — reset to block so the gap does not add to the title margin. */
.ce-notecard {
	display: block;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--ce-line);
	border-inline-start: 4px solid var(--ce-orange);
	border-radius: 12px;
	background: var(--ce-cream);
}

.ce-notecard__title {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--ce-sans);
	font-weight: 700;
	color: var(--ce-navy);
	margin-block-end: .4rem;
}

.ce-notecard__title .ce-icon { color: var(--ce-orange); flex: 0 0 auto; }

.ce-notecard p:last-child { margin-block-end: 0; }

/* ===========================================================================
   MOBILE OPTIMISATION  (<= 767px)
   ---------------------------------------------------------------------------
   Scoped entirely to phone widths so the desktop layout is untouched — the
   existing breakpoints at 900/1080/1100/1240 are left exactly as they were.

   The homepage measured 15,041px tall at 496px wide, roughly thirty screens.
   Nothing here removes content: the wins come from rhythm, grouping and
   letting short items sit two-up instead of one-up.
   =========================================================================== */

@media (max-width: 767px) {

	/* Section rhythm. 56px top and bottom on eleven sections is ~1,230px of
	   pure air; 40px still reads as a clear break between sections. */
	:root { --ce-section-y: 2.5rem; }

	.ce-section__head { margin-bottom: 1.25rem; }
	.ce-section__lede { font-size: .9375rem; }

	/* Cards: the padding is tuned for a 380px-wide desktop column, which is
	   generous when the card is the full width of a phone. */
	.ce-cards { gap: .75rem; }
	.ce-card { padding: 1.15rem 1.2rem; }
	.ce-card h3 { font-size: 1.0625rem; }
	.ce-card p { font-size: .9rem; }
	.ce-card__icon { margin-bottom: .5rem; }

	/* Trust items are a short label plus one line — they pair up comfortably.
	   The icon moves above the text so neither column gets squeezed. */
	.ce-trustgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.ce-trustitem { grid-template-columns: 1fr; gap: .4rem; padding: .9rem 1rem; }
	.ce-trustitem h3 { font-size: .9375rem; }
	.ce-trustitem p { font-size: .8125rem; }

	/* Decorative imagery between the path cards. Kept — just not half a screen
	   each on a phone. */
	.ce-path__media, .ce-path__media .ce-media { min-height: 130px; height: 130px; }
	.ce-path { padding: 1.25rem; }
	.ce-paths__grid { gap: .75rem; }

	/* Hero: the photo does not need to be 372px tall above the headline. */
	.ce-hero__visual .ce-media { min-height: 240px; height: 240px; }
	.ce-hero__inner { padding-block: 2rem; }

	/* Steps and checklists. */
	.ce-steps { gap: 1rem; margin-top: 1.25rem; }
	.ce-step { gap: .85rem; }
	.ce-checklist { gap: .6rem; margin-bottom: 1rem; }

	/* Split sections: the media frame is a fixed 240px rather than a ratio that
	   grows with the viewport. */
	.ce-split { gap: 1.25rem; }
	.ce-split__media, .ce-split__media .ce-media { min-height: 200px; height: 200px; }

	.ce-sectors__list { gap: .5rem; margin-top: 1rem; }
	.ce-sectors__list li { padding: .4rem .9rem; font-size: .875rem; }

	.ce-section__foot { margin-top: 1.5rem; }
	.ce-section__actions { margin-block-start: 1.5rem; }
}

/* --- Mobile optimisation, part 2: footer, forms, hero ------------------- */

@media (max-width: 767px) {

	/* The footer stacked to a single column below 900px, which made it the
	   tallest block on the page. The two link columns are short lists and sit
	   side by side comfortably; brand and CTA keep the full width. */
	.ce-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1.25rem;
		padding-block: 2.25rem;
	}

	.ce-footer__brand,
	.ce-footer__cta { grid-column: 1 / -1; }

	.ce-footer__heading { margin-bottom: .6rem; font-size: .8125rem; }
	.ce-footer__col ul { gap: .45rem; }
	.ce-footer__col a { font-size: .9rem; }
	.ce-footer__blurb { font-size: .9rem; margin-bottom: 1rem; }
	.ce-footer__contact { gap: .5rem; }

	/* Four mobile numbers in a column is three lines of wasted space. */
	.ce-footer__mobiles ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .3rem .75rem;
	}

	/*
	 * Forms stay ONE field per row on purpose. Two-up would save about 300px,
	 * but at 390px that leaves ~170px per control — bad for the selects and for
	 * anyone with larger text. The height comes back from spacing instead, which
	 * costs nothing in usability.
	 */
	.ce-form__grid { gap: .75rem; }
	.ce-field { gap: .3rem; }
	.ce-field label { font-size: .875rem; }
	.ce-form .ce-field textarea { min-height: 5.5rem; }
	.ce-form__privacy { font-size: .8125rem; margin-block: .75rem; }
	.ce-uploads { gap: .5rem; }

	/* Hero headline: still the largest type on the page, just not four lines. */
	.ce-hero__title { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
	.ce-hero__intro { font-size: .95rem; }
	.ce-hero__badge { padding: .9rem 1.1rem; }

	.ce-regbox { padding: 1.15rem 1.25rem; }
	.ce-regbox__note { font-size: .8125rem; }

	/* Page heroes on the inner pages get the same treatment. */
	.ce-pagehero__inner { gap: 1.25rem; padding-block: 2rem; }
	.ce-pagehero__visual .ce-media { min-height: 200px; height: 200px; }
	.ce-pagehero__intro { font-size: .95rem; }
}

/* --- Mobile optimisation, part 3: hero badge, paths, cards -------------- */

@media (max-width: 767px) {

	/*
	 * The badge was un-pinned at 640px and stacked below the photo, which costs
	 * ~170px. Put it back over the image but anchored to the bottom-left, where
	 * the photographs are darkest — the ribbon keeps its navy ground so the text
	 * is on a solid fill, not on the photo itself.
	 */
	.ce-hero__badge {
		position: absolute;
		inset-block-start: auto;
		inset-block-end: 0;
		inset-inline-start: var(--ce-gutter);
		inset-inline-end: auto;
		width: auto;
		max-width: 62%;
		margin-top: 0;
		padding: .8rem 1rem 1.1rem;
		border-radius: 0;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
	}

	.ce-hero__badge p { margin-top: .4rem; font-size: .6875rem; line-height: 1.5; }
	.ce-hero__visual { position: relative; }

	/* Path cards: the copy is short, so the generous desktop padding is the
	   main cost here. */
	.ce-path { padding: 1.1rem 1.15rem; }
	.ce-path h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
	.ce-path p { font-size: .9rem; }
	.ce-path .ce-btn { width: 100%; justify-content: center; }
	.ce-path__media, .ce-path__media .ce-media { min-height: 100px; height: 100px; }

	/* Stats and trust bar. */
	.ce-stats__list { padding-block: 1.5rem; }
	.ce-trust__list { padding-block: 1.25rem; }

	/* Step lists on the process/how-it-works blocks. */
	.ce-step h3 { font-size: 1rem; }
	.ce-step p { font-size: .9rem; }

	/* CTA band. */
	.ce-cta__title { font-size: 1.5rem; }
	.ce-cta p { font-size: .9375rem; }
}

/* --- Mobile optimisation, part 4: touch targets and small type ---------- */

@media (max-width: 767px) {

	/*
	 * The upload rows measured 29px tall — well under the 44px that WCAG 2.5.5
	 * and both platform guidelines ask for. The whole row is made tappable and
	 * the native "Choose file" button is given a real target of its own.
	 */
	.ce-form .ce-uploads .ce-upload { padding: .6rem .75rem; }

	.ce-form .ce-uploads .ce-upload input[type="file"] {
		min-height: 44px;
		display: flex;
		align-items: center;
		font-size: .8125rem;
	}

	.ce-field input[type="file"]::file-selector-button {
		min-height: 38px;
		padding-inline: .9rem;
	}

	/* Every other control clears 44px already; keep it that way if padding is
	   ever trimmed further. */
	.ce-form .ce-field input,
	.ce-form .ce-field select,
	.ce-form .ce-field textarea { min-height: 44px; }

	.ce-btn { min-height: 44px; }

	/*
	 * The badge caption was reduced to 11px in part 3, which is below the 12px
	 * floor the rest of the site keeps for uppercase, letter-spaced text.
	 */
	.ce-hero__badge p { font-size: .75rem; }
}

/* --- Mobile optimisation, part 5: minimum legible type ------------------ */

@media (max-width: 767px) {
	/* 10px and 11px are fine as desktop micro-labels but too small held at
	   arm's length. Raised on mobile only; desktop keeps its existing sizes. */
	.ce-upload__optional { font-size: .75rem; }
	.ce-regbox__title { font-size: .8125rem; }
	.ce-burger__label { font-size: .75rem; }
}

/* --- Bug fix: hero copy width once the photo stacks --------------------- */

/*
 * `.ce-hero__copy` carries `max-width: min(34rem, 46%)` from the desktop
 * layout, where 46% reserves the right half of the hero for the photograph.
 * Below 900px the photo returns to the flow and stacks above the copy, but the
 * 46% was never reset — so it measured against the full width instead and gave
 * the headline a 210px column on a 496px viewport. With `overflow-wrap:
 * break-word` inherited, the 38px headline snapped mid-word: "Professiona /
 * l Chefs, Cleaning & Housekeepi / ng".
 *
 * This was pre-existing, not introduced by the mobile pass, and it affected
 * every phone and small tablet. Desktop (>=901px) keeps the 46% rule untouched.
 */
@media (max-width: 900px) {
	.ce-hero__copy { max-width: none; }
}

/* ------------------------------- WhatsApp button in the mobile grid ------ */

/*
 * Each mobile row now holds two links: the tel: card and a WhatsApp button.
 * The generic `.ce-mobilegrid a` card styling would otherwise turn the button
 * into a second full-width card, and `.ce-mobilegrid svg` would paint its glyph
 * gold, so both are overridden here.
 */
.ce-mobilegrid li { display: flex; align-items: stretch; gap: .5rem; }
.ce-mobilegrid li > a:first-child { flex: 1 1 auto; }

.ce-page .ce-mobilegrid a.ce-wabtn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding-inline: .9rem;
	background: #25d366;
	border-color: #25d366;
	color: #05331a;                     /* 7.4:1 on the WhatsApp green — the label
	                                       is small, so it needs the 4.5:1 bar, not
	                                       the 3:1 an icon would. */
	font-family: var(--ce-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ce-page .ce-mobilegrid a.ce-wabtn:hover,
.ce-page .ce-mobilegrid a.ce-wabtn:focus-visible {
	background: #1fb457;
	border-color: #1fb457;
	color: #04240f;
}

.ce-mobilegrid .ce-wabtn svg { color: currentColor; }

@media (max-width: 460px) {
	.ce-mobilegrid .ce-wabtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.ce-page .ce-mobilegrid a.ce-wabtn { padding-inline: .75rem; }
}