/*!
Theme Name: Mixer Parts
Theme URI: https://cerezastudios.com/
Author: Cereza Studios
Author URI: https://cerezastudios.com/
Description: Mixer Parts (mixerparts.net), built by Cereza Studios.
Version: 09.18.2026
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mixerparts
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, rtl-language-support

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Mixer Parts is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
0.0 Fonts (@font-face)
1.0 Design Tokens
2.0 Normalize / Reset
3.0 Base Typography
4.0 Elements
5.0 Forms
6.0 Accessibility
7.0 Layout
8.0 Header + Branding
9.0 Navigation Menus (dropdowns, mobile accordion, mega menu)
10.0 Off-canvas Mobile Menu
11.0 Search Overlay
12.0 Footer
13.0 Posts and Pages
14.0 Comments
15.0 Blocks and Alignments
16.0 Utilities
17.0 Landing Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 0.0 Fonts
#
# Montserrat, bundled rather than loaded from Google. A variable font
# covering weights 100-900 in a single file per subset, so the whole type
# scale costs two requests (35KB, plus 68KB for latin-ext only when a page
# uses those characters), and no visitor IP is handed to a third party.
#
# Montserrat is licensed under the SIL Open Font License 1.1, which permits
# bundling and redistribution. See readme.txt.
#
# To swap typefaces: replace these files, update the src and unicode-range
# below, and change --font-body / --font-head / --font-accent in section 1.
--------------------------------------------------------------*/
@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/montserrat-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(fonts/montserrat-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*--------------------------------------------------------------
# 1.0 Design Tokens
#
# Every colour, size and font in this theme resolves to one of the
# custom properties below. To re-skin the theme for a project, change
# the values here and leave the rest of the stylesheet alone.
--------------------------------------------------------------*/
:root {

	/*
	 * Mixer Parts brand palette.
	 *
	 * Sampled from the landing page mockup (Illustrator, Sept 2026). Two of
	 * the mockup's colours fail AA as drawn and are corrected here:
	 *
	 *   white on the red #ed1c24       4.38:1  ->  --c-red-ui  #d71920  5.19:1
	 *   grey note text #7a888e         3.66:1  ->  --c-text-low #5b6a70 5.61:1
	 *
	 * The raw brand values are kept (--c-red, --c-steel) for decoration only.
	 */

	/* Brand, as drawn. */
	--c-navy: #264184;          /* hero band, logo MIXER */
	--c-yellow: #fbbd0d;        /* value props, submit. Backgrounds or on navy only (5.70:1) */
	--c-yellow-deep: #f0ae00;   /* submit hover; --c-heading on it 5.29:1 */
	--c-red: #ed1c24;           /* logo-adjacent accent. Not for white text */
	--c-red-ui: #d71920;        /* header buttons; white on it 5.19:1 */
	--c-red-ui-deep: #b3141a;   /* hover; white on it 6.93:1 */
	--c-silver: #cdd2d4;        /* hero headline, on navy 6.34:1 */
	--c-steel: #778a92;         /* logo PARTS. Decoration only (3.6:1 on white) */
	--c-bar: #117fcd;           /* the rule beside the value props. Decorative */

	/* Surfaces, lightest to darkest. */
	--c-bg: #fff;
	--c-bg-deep: #f6f8f9;
	--c-surface: #eef1f3;
	--c-surface-2: #e2e7ea;
	--c-surface-3: #cdd2d4;
	--c-line: #cdd2d4;

	/* Form field outlines. A field's edge is a control boundary, so it needs
	   3:1 (WCAG 1.4.11), which --c-line does not reach (1.53:1). 3.52:1. */
	--c-field-border: #7d8b91;

	/*
	 * Text. Every one of these clears WCAG AA (4.5:1) on --c-bg AND on
	 * --c-surface, the tinted panel behind cards and the footer.
	 *
	 *                    white    surface
	 *   --c-heading      10.33     9.10
	 *   --c-text         11.58    10.21
	 *   --c-text-muted    6.99     6.17
	 *   --c-text-low      5.61     4.95
	 */
	--c-heading: #1a3d82;
	--c-text: #2d3b41;
	--c-text-muted: #4a5c63;
	--c-text-low: #5b6a70;

	/*
	 * Accents. --c-accent is the link and focus-ring colour on light
	 * surfaces (10.33:1 on white). It is the same hue as the navy band, so
	 * on --c-navy it disappears (1.07:1): anything dark-on-dark must switch
	 * to --c-brand. .section--dark and the landing hero both do.
	 */
	--c-accent: #1a3d82;
	--c-accent-deep: #122c5f;
	--c-accent-light: #117fcd;
	--c-accent-2: #c8161d;
	--c-accent-2-deep: #a01218;

	/*
	 * Colours for use ON --c-navy. Kept under the starter's names so
	 * .section--dark (section 16) picks them up unchanged.
	 *   --c-brand  yellow  5.70:1 on navy
	 *   --c-lime   silver  6.34:1 on navy
	 */
	--c-brand: var(--c-yellow);
	--c-lime: var(--c-silver);

	/* Validation. 6.54:1 on --c-bg and 5.76:1 on --c-surface. */
	--c-error: #b3261e;

	--c-white: #fff;
	--c-black: #000;

	/*
	 * Montserrat throughout, in place of the mockup's Gotham: the same
	 * geometric shapes, and open-licensed, so it ships with the theme. The
	 * mockup's Book / Medium / Bold map to 400 / 500 / 700.
	 */
	--font-brand: montserrat, system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
	--font-head: var(--font-brand);
	--font-body: var(--font-brand);
	--font-accent: var(--font-brand);

	/* Outlined icon buttons in the mobile header. 5.32:1 on white, and white
	   on it is 5.32:1, so the filled hover state holds too. */
	--c-blue: #0f6fb3;

	/*
	 * Off-canvas menu backdrop. White text sits on this, so both stops must
	 * stay dark enough to carry it: #0f6fb3 is 5.32:1 against white and
	 * #264184 is 9.67:1.
	 */
	--menu-gradient: linear-gradient(165deg, var(--c-blue) 0%, var(--c-navy) 100%);

	/* Fluid type scale. Each step is named for its maximum pixel size. */
	--fs-14: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--fs-16: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
	--fs-18: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--fs-20: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--fs-22: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--fs-24: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--fs-32: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--fs-44: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
	--fs-48: clamp(2rem, 1.45rem + 2.4vw, 3rem);
	--fs-62: clamp(2.25rem, 1.6rem + 3.2vw, 3.875rem);
	--fs-80: clamp(2.5rem, 1.5rem + 5vw, 5rem);

	/*
	 * Layout. The mockup is drawn at 1440px with a 990px content column, so
	 * --c-max is that column plus the gutters either side of it.
	 */
	--c-max: calc(990px + 2 * var(--c-gutter));
	--c-max-wide: 1600px;
	--c-gutter: clamp(20px, 5vw, 80px);
	--c-header-h: 84px;

	/* Spacing scale. */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	/* Misc. */
	--radius: 6px;
	--radius-lg: 12px;
	--transition: 0.2s ease;
}

/*--------------------------------------------------------------
# 2.0 Normalize / Reset
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);

	/* The mockup sets body copy at 14px. 16px here: the smaller size is hard
	   going for the phone-in-hand, on-site readers this page is for. */
	font-size: var(--fs-16);
	line-height: 1.6;
}

main {
	display: block;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

/*--------------------------------------------------------------
# 3.0 Base Typography
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--c-heading);
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.15;
}

/* Sizes from the mockup: a 48px Bold headline set solid, and 22px Medium
   for the next level down. */
h1 {
	font-size: var(--fs-48);
	line-height: 1;
}

h2 {
	font-size: var(--fs-32);
}

h3 {
	font-size: var(--fs-22);
	font-weight: 500;
}

h4 {
	font-size: var(--fs-20);
	font-weight: 500;
}

h5 {
	font-size: var(--fs-18);
	font-weight: 500;
}

h6 {
	font-size: var(--fs-16);
	font-weight: 500;
	font-family: var(--font-accent);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

p {
	margin: 0 0 1.25em;
}

/* Long-form text is easier to read when the line length is capped. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-summary > p {
	max-width: 70ch;
}

small {
	font-size: var(--fs-14);
}

/*--------------------------------------------------------------
# 4.0 Elements
--------------------------------------------------------------*/
a {
	color: var(--c-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--c-accent-deep);
}

ul,
ol {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

blockquote {
	margin: 0 0 1.25em;
	padding-left: var(--space-sm);
	border-left: 3px solid var(--c-accent);
	color: var(--c-text-muted);
	font-size: var(--fs-20);
}

hr,
.wp-block-separator {
	height: 0;
	margin: var(--space-md) 0;
	border: 0;
	border-top: 1px solid var(--c-line);
}

figure {
	margin: 0 0 1.25em;
}

figcaption,
.wp-caption-text {
	color: var(--c-text-muted);
	font-size: var(--fs-14);
	margin-top: var(--space-xs);
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var(--space-sm);
	background-color: var(--c-surface);
	border-radius: var(--radius);
}

table {
	width: 100%;
	margin: 0 0 1.25em;
	border-collapse: collapse;
}

th,
td {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
}

th {
	color: var(--c-heading);
	font-weight: 700;
}

/* Tables can be wider than the column they sit in; let them scroll. */
.entry-content > table,
.wp-block-table {
	display: block;
	overflow-x: auto;
}

/*--------------------------------------------------------------
# 5.0 Forms
--------------------------------------------------------------*/
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.55em 0.75em;
	background-color: var(--c-bg);
	border: 1px solid var(--c-field-border);
	border-radius: var(--radius);
	color: var(--c-text);
}

textarea {
	min-height: 8em;
	resize: vertical;
}

button,
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link,
.wp-element-button {
	display: inline-block;
	padding: 0.7em 1.5em;
	background-color: var(--c-accent);

	/* Transparent rather than none, so the Outline variant is the same height
	   as its neighbours instead of sitting 4px shorter. */
	border: 2px solid transparent;
	border-radius: var(--radius);
	color: var(--c-white);
	cursor: pointer;
	font-family: var(--font-accent);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--c-accent-deep);
	color: var(--c-white);
}

/*
 * Button variants.
 *
 * Three, because three is what a page needs: a primary action, a quieter
 * companion beside it, and a darker one for when the accent is already doing
 * something else nearby. Core registers Fill and Outline for core/button;
 * Secondary is registered in inc/template-functions.php so it appears in the
 * editor's Styles panel rather than needing a hand-typed class.
 *
 * Each is checked against both surfaces it can land on:
 *   fill       white on accent            6.52:1
 *   outline    accent on white / card     6.52:1 / 5.88:1
 *   secondary  white on navy             11.96:1
 *
 * The border on Outline is a real control boundary, so it also has to clear
 * 3:1 as a non-text contrast (WCAG 1.4.11). It does, at 6.52:1.
 */

/* Outline — core's own is-style-outline, dressed for this theme. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-outline > .wp-element-button:not(.has-background),
.button--outline {
	background-color: transparent;
	border: 2px solid var(--c-accent);
	color: var(--c-accent);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-element-button:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus,
.button--outline:hover,
.button--outline:focus {
	background-color: var(--c-accent);
	color: var(--c-white);
}

/*
 * Red — the header contact buttons. Class-only, not an editor style: the red
 * is kept to the header so the yellow stays the page's one call to action.
 *   white on --c-red-ui 5.19:1, on --c-red-ui-deep 6.93:1
 */
.button--red {
	background-color: var(--c-red-ui);
	border-color: var(--c-red-ui);
	color: var(--c-white);
	text-align: center;
}

.button--red:hover,
.button--red:focus {
	background-color: var(--c-red-ui-deep);
	border-color: var(--c-red-ui-deep);
	color: var(--c-white);
}

/* Secondary — the navy fill. */
.wp-block-button.is-style-secondary > .wp-block-button__link,
.wp-block-button.is-style-secondary > .wp-element-button,
.button--secondary {
	background-color: var(--c-navy);
	border: 2px solid var(--c-navy);
	color: var(--c-white);
}

.wp-block-button.is-style-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-secondary > .wp-element-button:hover,
.button--secondary:hover,
.button--secondary:focus {
	background-color: var(--c-heading);
	border-color: var(--c-heading);
	color: var(--c-white);
}



/*--------------------------------------------------------------
# 6.0 Accessibility
--------------------------------------------------------------*/

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* The skip link: visually hidden until it takes focus. */
.screen-reader-text:focus {
	background-color: var(--c-bg);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--c-heading);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*
 * WCAG 2.1 AA, 2.4.7 Focus Visible. --c-accent is 5.9:1 on --c-bg, well
 * clear of the 3:1 a non-text contrast minimum, so one ring colour works
 * site-wide. Never remove this without replacing it.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}

/*
 * Inside the off-canvas menu the ring sits on the blue gradient, where the
 * navy --c-accent falls below the 3:1 that WCAG 1.4.11 asks of
 * a focus indicator. White clears it against both stops.
 */
.mobile-menu__nav :focus-visible,
.menu-open .mobile-menu__button:focus-visible {
	outline-color: var(--c-white);
}

/* Skip the ring for pointer users on engines that support :focus-visible. */
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
	outline: none;
}

/*
 * WCAG 2.1 AA, 2.1.1 Keyboard. Desktop sub-menus open on :hover, which no
 * keyboard user can trigger. The matching :focus-within rules live in
 * css/navwalker.css alongside the :hover ones, so the two can never drift
 * apart; do not duplicate them here, where a partial copy would override
 * navwalker's overflow handling and clip third-level fly-outs.
 *
 * The off-canvas sub-list below is collapsed with max-height/opacity rather
 * than display:none, so its links stay focusable. Reveal it when focus moves
 * inside.
 */

/* `none`, not a big number: max-height cannot interpolate to none, so focus
   reveals the submenu instantly instead of running the accordion. That is the
   right behaviour for a safety net — a keyboard user tabbing in should see
   the item now, not after a third of a second. */
.mobile-menu__nav ul.dropdown-menu:focus-within {
	max-height: none;
	opacity: 1;
}

/*
 * AOS hides every [data-aos] element until its script animates it in. If that
 * script never runs — JS disabled, a CDN blocked, a syntax error earlier in
 * the page — the content stays invisible forever. The .no-js class on <html>
 * (swapped to .js by an inline script in wp_head, see inc/enqueue.php) means
 * animation is opt-in on top of working content, never a precondition for it.
 */
.no-js [data-aos] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* WCAG 2.1 AA, 2.3.3 Animation from Interactions. */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.has-parallax {
		background-attachment: scroll !important;
	}
}

/*--------------------------------------------------------------
# 7.0 Layout
--------------------------------------------------------------*/
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

/* The standard inner container. Section wrappers go full-bleed; .wrap
   re-establishes the reading width and side gutters inside them. */
.wrap {
	width: 100%;
	max-width: var(--c-max);
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

.section {
	padding-block: var(--space-lg);
}

/*--------------------------------------------------------------
# 8.0 Header + Branding
--------------------------------------------------------------*/
header#masthead {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--c-bg);
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow 0.3s ease;
}

.site-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	max-width: var(--c-max);
	margin-inline: auto;
	padding: var(--space-sm) var(--c-gutter);
	transition: padding 0.3s ease;
}

@media screen and (min-width: 62em) {

	.site-top {
		padding-block: 1.5rem;
	}
}

.logo_wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.custom-logo-link {
	display: inline-block;
}

/* 153px wide on desktop, as drawn; smaller where the header row is tight. */
.custom-logo {
	width: 96px;
	max-width: 100%;
	height: auto;
	transition: width 0.3s ease;
}

@media screen and (min-width: 62em) {

	.custom-logo {
		width: 153px;
	}
}

.brand__text {
	color: var(--c-heading);
	font-family: var(--font-head);
	font-size: var(--fs-20);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

@media screen and (min-width: 62em) {

	.brand__text {
		font-size: var(--fs-24);
	}
}

.site-top__right {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-md);
}

/*
 * The Top Bar widget is a desktop affordance. On small screens the phone and
 * email icon buttons already carry the call to action, and leaving a text CTA
 * in the row as well squeezed the branding into three wrapped lines.
 */
.top-bar__widget {
	display: none;
	align-items: center;
}

@media screen and (min-width: 62em) {

	.top-bar__widget {
		display: flex;
	}
}

/* Shrinking sticky header. sticky-header.js adds .header-shrink to <body>
   past a 40px scroll threshold. Animatable properties only, so it eases. */
body.header-shrink #masthead {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

@media screen and (min-width: 62em) {

	body.header-shrink .custom-logo {
		width: 96px;
	}

	body.header-shrink .site-top {
		padding-block: 0.5rem;
	}

	/* The tagline is the first thing to go when the header shrinks. */
	body.header-shrink .header-contact .site-description {
		display: none;
	}
}

/*
 * Header contact: the tagline, with the email and phone buttons beneath it,
 * spread to the tagline's width. Desktop only; small screens get the icon
 * buttons in .icon-actions instead.
 */
.header-contact {
	display: none;
}

@media screen and (min-width: 62em) {

	.header-contact {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}
}

.header-contact .site-description {
	margin: 0;
	color: var(--c-heading);
	font-family: var(--font-head);
	font-size: var(--fs-20);
	font-weight: 500;
	line-height: 1.2;
}

.header-contact__buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.header-contact__buttons .button {
	font-size: var(--fs-14);
}

/* The vanity number over the digits, one per line. */
.header-contact__phone {
	padding-block: 0.35em;
	text-align: center;
}

.header-contact__phone span {
	display: block;
}

/* The inline nav is desktop-only; the off-canvas menu covers small screens. */
.main-navigation {
	display: none;
}

.primary-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-navigation a {
	color: var(--c-text);
	font-family: var(--font-accent);
	font-size: var(--fs-16);
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.primary-navigation a:hover,
.primary-navigation a:focus,
.primary-navigation .current-menu-item > a {
	color: var(--c-accent);
}

@media screen and (min-width: 62em) {

	.main-navigation {
		display: block;
	}

	.mobile-menu {
		display: none;
	}
}

/*
 * Icon buttons: phone, email, search and the menu toggle share one shape --
 * a 34px circle outlined in the header button red (5.19:1 on white). Sized
 * for a comfortable touch target; the circle is the visible affordance while
 * the tap area extends past it.
 */
.icon-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	appearance: none;
	background-color: var(--c-bg);
	border: 1px solid var(--c-red-ui);
	border-radius: 50%;
	color: var(--c-red-ui);
	cursor: pointer;
	line-height: 0;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}

.icon-btn svg {
	width: 17px;
	height: 17px;
	fill: currentcolor;
}

.icon-btn:hover,
.icon-btn:focus-visible {
	background-color: var(--c-red-ui);
	color: var(--c-white);
}

/*
 * Small-screen affordances: phone and email, because on desktop the inline
 * nav takes over and the footer carries the contact details, and the menu
 * toggle, because the off-canvas panel it drives is hidden at this width.
 *
 * The toggle MUST be named here. It lives in the icon row, not inside
 * .mobile-menu, so the rule that hides that container in section 10 does not
 * reach it — and a visible toggle on desktop is worse than untidy, because
 * the panel it opens is display:none, so pressing it does nothing at all.
 */
@media screen and (min-width: 62em) {

	.icon-btn--mobile-only,
	.mobile-menu__button {
		display: none;
	}
}

/*
 * The toggle is the fourth button in the icon row, so the row's own flex
 * layout gives it the same baseline and the same gap as the others. It was
 * absolutely positioned before, which put it outside that layout entirely and
 * left it 2px high with double the gap.
 *
 * position: relative only so z-index applies. The number has to beat
 * .mobile-menu's 900, not the panel's — see the note there.
 */
.mobile-menu__button {
	position: relative;
	z-index: 1000;
}

/*
 * Stays white while open. Inverting it to a filled colour was the active-state
 * signal back when the backdrop was white; against the gradient that is the
 * same colour as the top stop the button sits on, so it would disappear. The
 * white circle is the contrast now, and the bars have already folded to an X.
 */

/* No position change on open: the header is sticky and the page behind is
   locked, so the button stays exactly where it is. */

/*
 * And on hover: the shared .icon-btn hover fills with red, which clashes
 * with the blue gradient the open toggle sits on. Keep the white fill and
 * deepen the icon to the navy end instead.
 */
.menu-open .mobile-menu__button:hover,
.menu-open .mobile-menu__button:focus-visible {
	background-color: var(--c-white);
	color: var(--c-navy);
}

/*
 * The reveal: a full-viewport layer carrying the gradient, clipped to a
 * zero-radius circle centred on the toggle and opened out to cover the page.
 *
 * The centre comes from --toggle-cx/cy, which js/theme.js measures off the
 * button as the menu opens. Hard-coding it stopped working once the button
 * became a flex child, because its position is now decided by the row's
 * layout rather than by a rule here. The fallbacks put the circle in the top
 * right corner, which is close enough if the script never runs.
 *
 * This used to be a 34px circle scaled 80x. That works for a flat colour but
 * not for a gradient: the background is painted into the element's own 34px
 * box and then magnified, so the ramp ends up ~2720px wide and the viewport
 * only ever shows about a seventh of it — a gradient that reads as flat
 * colour. Clipping instead of scaling paints it at true size.
 *
 * The circle's centre tracks the toggle: 1rem inset + half of its 34px.
 * clip-path animates on the compositor, same as transform did.
 */
.mobile-menu__background {
	position: fixed;
	inset: 0;
	z-index: 1;
	background-image: var(--menu-gradient);
	clip-path: circle(0 at var(--toggle-cx, calc(100% - 2.5rem)) var(--toggle-cy, 2.5rem));
	will-change: clip-path;

	/*
	 * Closing. A transition declared on the base state is the one that runs on
	 * the way BACK to it, so this is the close curve and the .menu-open rule
	 * below carries the open curve.
	 *
	 * They cannot be the same. A symmetric ease-in-out decelerates at its end,
	 * which is what you want when the circle is growing — it settles — but
	 * played backwards it makes the last shrink to nothing the slowest part of
	 * the move, leaving a small blob of gradient creeping near the toggle after
	 * the menu content has already gone. Closing accelerates instead, so it
	 * clears the screen and is done.
	 */
	transition: clip-path 0.4s cubic-bezier(0.4, 0, 1, 1);
}

/* Opening: decelerate, so the reveal arrives and settles rather than
   slamming to a stop. */
.menu-open .mobile-menu__background {
	clip-path: circle(150% at var(--toggle-cx, calc(100% - 2.5rem)) var(--toggle-cy, 2.5rem));
	transition-duration: 0.55s;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/*
 * The hamburger. Three bars with a deliberately shorter middle one, which is
 * what gives the Cereza mark its character, folding into an X when open.
 */
.mobile-menu__icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 16px;
	height: 16px;
}

.mobile-menu__icon span {
	display: block;
	width: 16px;
	height: 2px;
	background-color: currentcolor;
	border-radius: 3px;
	transform-origin: center;

	/* transform and opacity only. Animating width here made every frame of the
	   open relayout the button's contents. */
	transition: transform 0.3s cubic-bezier(0.08, 0.81, 0.87, 0.71), opacity 0.18s ease;
}

/* The middle bar is short at rest and vanishes on open. */
.mobile-menu__icon span:nth-child(2) {
	width: 10px;
}

.menu-open .mobile-menu__icon span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.menu-open .mobile-menu__icon span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.menu-open .mobile-menu__icon span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/*--------------------------------------------------------------
# 9.0 Navigation Menus
#
# Dropdown mechanics for both menus, which render from the same walker:
#   .mobile-menu__nav    off-canvas accordion
#   .primary-navigation  inline desktop fly-outs
# Header layout lives in section 8; the off-canvas panel itself in section 10.
--------------------------------------------------------------*/

/* -----------------------------------------------------------
   1. Caret control
   ----------------------------------------------------------- */

/*
 * Neutralise Bootstrap's border-drawn triangle without hiding ::after —
 * .nav-link reuses that pseudo-element for its hover underline, so
 * display:none here would remove the underline from items with dropdowns.
 * The visible caret is the separate .submenu-toggle button.
 */
.dropdown-toggle::after {
	border: 0;
	margin-left: 0;
	vertical-align: 0;
}

.submenu-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	transform: rotate(0deg);
	transition: transform 150ms ease;
}

/*
 * The chevron is drawn in CSS rather than loaded as an image so it inherits
 * the surrounding text colour. It replaced a 45KB Illustrator SVG hard-coded
 * to fill:#fff — fine on the dark theme this started from, invisible the
 * moment the palette went light, and impossible to recolour from a
 * background-image.
 */
.submenu-toggle::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin-top: -3px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg);
}

/*
 * Rotate when open. aria-expanded is the single source of truth for submenu
 * state at every depth, set by js/navigation.js.
 */
.submenu-toggle[aria-expanded="true"] {
	transform: rotate(-180deg);
	z-index: 2;
}

/* -----------------------------------------------------------
   2. Bootstrap dropdown resets
   ----------------------------------------------------------- */
.dropdown-menu,
.navbar-nav .dropdown-menu {
	position: relative;
	background-color: transparent;
	border: none;
	color: var(--c-text);
	font-size: var(--fs-16);
}

.navbar-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The link and its disclosure button share one row; the submenu wraps onto a
 * row of its own. The button used to be absolutely positioned instead, at
 * `top: 50%` of the <li> — which centred it against the whole list item, so
 * the moment a submenu expanded the item grew tall and the caret slid down
 * into the submenu's rows, away from the link it belongs to.
 */
.navbar-nav li.menu-item,
.primary-navigation li.menu-item,
.navbar-nav .dropdown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	text-align: center;
}

/*
 * The off-canvas menu is a stacked column: each item spans the full width and
 * its submenu wraps onto a row below the link + caret.
 */
.navbar-nav li.menu-item,
.navbar-nav .dropdown {
	flex-wrap: wrap;
	width: 100%;
}

/*
 * The desktop nav is a horizontal row, so an item must size to its own
 * content. Inheriting the width:100% above squeezed each <li> down to the
 * link's width, leaving no room for the caret, which then wrapped onto a
 * second line under the label. Submenus here are position:absolute and so
 * take no part in this row.
 */
.primary-navigation li.menu-item {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	width: auto;
	white-space: nowrap;
}

/* Force the submenu onto its own line beneath the link + caret row. */
.navbar-nav li.menu-item > .sub-menu {
	flex: 0 0 100%;
}

.navbar-nav a.nav-link,
.navbar-nav a.dropdown-item {
	position: relative;
	display: inline-block;
	margin: 0;
	background: transparent;
	border: none;
	text-decoration: none;
	transition: color 0.25s ease-in-out;
}

.navbar-nav a.nav-link {
	padding: 0.5rem 1rem;
	color: var(--c-text);
	font-family: var(--font-accent);
	font-size: var(--fs-20);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.navbar-nav a.dropdown-item {
	padding: 0.35rem 1rem;
	color: var(--c-text-muted);
	font-family: var(--font-accent);
	font-size: var(--fs-18);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: normal;
}

.navbar-nav a.nav-link:hover,
.navbar-nav a.nav-link:focus,
.navbar-nav .current-menu-item > a.nav-link,
.navbar-nav .current-menu-parent > a.nav-link,
.navbar-nav .nav-link.active,
.navbar-nav li.is-open > .nav-link,
.navbar-nav a.dropdown-item:hover,
.navbar-nav a.dropdown-item:focus,
.navbar-nav a.dropdown-item.active {
	background: transparent;
	color: var(--c-accent);
}

/* Animated underline on top-level items. */
.navbar-nav a.nav-link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 1rem;
	width: 0;
	height: 2px;
	background-color: var(--c-accent);
	transition: width 0.25s ease-in-out;
}

.navbar-nav a.nav-link:hover::after,
.navbar-nav .current-menu-item > a.nav-link::after,
.navbar-nav .current-menu-parent > a.nav-link::after,
.navbar-nav li.is-open > a.nav-link::after {
	width: calc(100% - 2rem);
}

/* -----------------------------------------------------------
   3. Mobile accordion submenus
   #
   # Every depth is toggled the same way: js/navigation.js puts .is-open on
   # the <li> and flips aria-expanded on its button. Rendered in flow and
   # always present so max-height can transition, which keeps the links
   # focusable rather than display:none.
   ----------------------------------------------------------- */
.mobile-menu__nav ul.dropdown-menu {
	position: static;
	display: block;
	width: 100%;
	max-height: 0;
	padding: 0;
	opacity: 0;
	overflow: hidden;

	/*
	 * js/theme.js sets max-height to the measured content height on open and
	 * clears it on close; the 0 here is the closed end of that. Padding is
	 * deliberately not transitioned — it forces layout on every frame and the
	 * height change already carries the motion.
	 */
	transition: max-height 0.32s ease, opacity 0.25s ease;
}

.mobile-menu__nav li.is-open > ul.sub-menu {
	opacity: 1;
}

/* First level opens as a full-width tinted panel. */

/* A translucent lift rather than a solid fill, so the gradient still reads
   through the open submenu. */
.mobile-menu__nav ul.dropdown-menu.depth_0 {
	width: 100%;
	margin: 0;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 0;
}

.mobile-menu__nav li.is-open > ul.sub-menu.depth_0 {
	margin-top: 4px;
	padding: 4px 0;
}

/* Deeper levels stay flat inside the panel, lightly inset. */
.mobile-menu__nav ul.dropdown-menu.sub-menu.depth_1 {
	padding-left: 1rem;
}

.mobile-menu__nav li.is-open > ul.sub-menu.depth_1 {
	padding-block: 4px 2px;
}

/*
 * Shrink to the label. This was display:block back when the caret was
 * absolutely positioned over the row; as a flex sibling a full-width link
 * pushes the caret onto a second line.
 */
.mobile-menu__nav a.dropdown-item {
	flex: 0 1 auto;
	display: inline-block;
	max-width: calc(100% - 40px);
}

/* currentcolor for the chevron; matches the link colour beside it. */
.primary-navigation .submenu-toggle {
	color: var(--c-text);
}

.mobile-menu__nav .submenu-toggle {
	color: var(--c-white);
}

/* Teal marks the active chevron on the light desktop nav... */
.primary-navigation li.is-open > .submenu-toggle,
.primary-navigation .submenu-toggle:hover,
.primary-navigation .submenu-toggle:focus {
	color: var(--c-accent);
}

/* ...but inside the menu it would sit on the gradient at 2.17:1, so the
   chevron stays white and the rotation alone signals the open state. */
.mobile-menu__nav li.is-open > .submenu-toggle,
.mobile-menu__nav .submenu-toggle:hover,
.mobile-menu__nav .submenu-toggle:focus {
	color: var(--c-white);
}

/* The off-canvas menu is a single column, so every item shows its underline. */

/* The underline is the hover signal in the off-canvas menu, so it inherits
   the link colour rather than the accent used on light backgrounds. */
.mobile-menu__nav a.nav-link::after {
	width: calc(100% - 2rem);
	background-color: currentcolor;
}

/* Roomier spacing on the larger screens that still get the off-canvas menu. */
@media screen and (min-width: 601px) {

	.mobile-menu__nav li.is-open > ul.sub-menu.depth_0 {
		margin-top: 10px;
		padding: 10px 0;
	}
}

/* -----------------------------------------------------------
   4. Desktop fly-out submenus
   #
   # Hidden off-screen rather than display:none so they can animate and stay
   # in the accessibility tree. style.css section 6 adds the :focus-within
   # rule that makes them keyboard reachable.
   ----------------------------------------------------------- */

/*
 * The desktop chevron is a function of input, not screen size.
 *
 * Width alone is the wrong test: a touchscreen laptop is 62em+ and has no
 * reliable hover, so hiding the chevron there would make a tap on a parent
 * navigate away instead of opening its submenu, leaving the children
 * unreachable from the nav entirely.
 *
 * So: hide it at desktop width, then put it back wherever a coarse pointer
 * exists. `any-pointer: coarse` asks whether ANY available input is coarse,
 * which is true on tablets, touchscreen laptops and 2-in-1s even when a mouse
 * is also attached. Hybrids therefore keep the control, which is the right
 * way round -- a redundant chevron costs a little tidiness, a missing one
 * costs access to half the menu.
 *
 * Written as two positive queries rather than one `not (any-pointer: coarse)`
 * because negated media conditions are Media Queries 4 and only landed in
 * Safari 16.4, while plain `any-pointer` has been supported since Safari 9.
 *
 * Below 62em the off-canvas menu keeps its buttons regardless.
 */
@media screen and (min-width: 62em) {

	.primary-navigation .submenu-toggle {
		display: none;
	}
}

@media screen and (min-width: 62em) and (any-pointer: coarse) {

	.primary-navigation .submenu-toggle {
		display: flex;
	}
}

.primary-navigation li {
	position: relative;
}

.primary-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 99999;
	width: 200px;
	margin: 0;
	padding: 0;
	flex-direction: column;
	gap: 0;
	background-color: var(--c-bg);
	border: 1px solid var(--c-line);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	text-align: left;
	transform: translateX(-50%);
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.primary-navigation:not(.suppress-hover) ul li:hover > ul,
.primary-navigation ul li:focus-within > ul,
.primary-navigation ul li.is-open > ul {
	height: auto;
	opacity: 1;
	overflow: visible;
	visibility: visible;
}

.primary-navigation ul ul li.menu-item {
	width: 100%;
	padding: 0;
	border-bottom: 1px solid var(--c-line);
}

.primary-navigation ul ul li.menu-item:last-child {
	border-bottom: 0;
}

.primary-navigation ul ul a {
	display: block;
	padding: 0.6rem 1rem;
	color: var(--c-text);
	font-size: var(--fs-16);
	line-height: 1.3;
	text-transform: none;
	white-space: normal;
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul a:focus,
.primary-navigation ul ul .current-menu-item > a {
	color: var(--c-accent);
}

/* Third level slides out to the side of its parent. */
.primary-navigation ul ul ul {
	top: 0;
	left: 100%;
	transform: translateX(-10px);
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.primary-navigation:not(.suppress-hover) ul ul li:hover > ul,
.primary-navigation ul ul li:focus-within > ul,
.primary-navigation ul ul li.is-open > ul {
	transform: translateX(0);
}

/* -----------------------------------------------------------
   5. Mega menu (opt-in)
   #
   # In Appearance > Menus, open Screen Options and tick "CSS Classes", then
   # add  mega-menu  to a top-level item. Its dropdown becomes a wide
   # three-column panel. Items without the class are untouched, as is the
   # off-canvas menu.
   ----------------------------------------------------------- */
@media screen and (min-width: 62em) {

	/* Anchor the panel to the nav bar, not the single <li>, so it can be
	   wider than its trigger without overflowing the viewport. */
	.primary-navigation #primary-menu > li.mega-menu {
		position: static;
	}

	.primary-navigation #primary-menu > li.mega-menu > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 1rem;
		row-gap: 0;
		width: min(950px, calc(100vw - 3rem));
		padding: 0.5rem;
	}

	.primary-navigation #primary-menu > li.mega-menu > ul.sub-menu > li.menu-item a {
		padding: 0.6rem;
		font-size: var(--fs-16);
		line-height: 1.3;
		text-align: left;
		transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
	}
}

/*--------------------------------------------------------------
# 10.0 Off-canvas Mobile Menu
#
# A <button aria-expanded aria-controls> drives the panel; js/navigation.js
# owns the state, moves focus in, traps Tab, and closes on Escape. Without
# JavaScript the panel renders as a plain stacked list (see the .no-js rules
# below), so every link stays reachable.
--------------------------------------------------------------*/

/*
 * Layering, and it is fiddly enough to write down.
 *
 * This element is positioned, so it forms a stacking context: everything
 * inside it — backdrop and panel — is composited at THIS z-index, and their
 * own values only order them against each other. The toggle sits outside, in
 * the icon row, so it competes here rather than in there. It must therefore
 * out-rank this number, not the panel's.
 *
 * .site-top is not positioned, so the toggle's z-index lands directly in
 * #masthead's context alongside this one. Its siblings in the row have no
 * z-index and stay in the base layer, correctly covered by the backdrop.
 *
 *   #masthead (sticky, 1000)
 *     .mobile-menu            900   <- backdrop 1, panel 2, inside
 *     .mobile-menu__button   1000   <- in .site-top, above the backdrop
 */
.mobile-menu {
	position: absolute;
	inset: 0 0 auto;
	width: 100%;
	z-index: 900;
}

/*
 * The toggle is a real <button> carrying aria-expanded and aria-controls, so
 * assistive tech announces "Menu, button, collapsed" and Space works. It
 * replaced an <input type="checkbox"> + <label>, which opened the panel
 * without JavaScript but announced itself as a checkbox — the wrong role and
 * no state, a WCAG 4.1.2 failure. js/navigation.js owns the state.
 */

/*
 * Deliberately transparent: the expanding circle behind it supplies the
 * background. Giving the panel its own would sit above the backdrop inside
 * .mobile-menu and mask the reveal completely.
 */
.mobile-menu__nav {
	position: fixed;
	top: var(--c-header-h);
	left: 0;
	z-index: 2;
	width: 0;
	height: calc(100vh - var(--c-header-h));
	margin: 0;
	opacity: 0;
	visibility: hidden;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/* Out fast, in at a readable pace — see the note on the backdrop. */
	transition: opacity 0.18s ease-in, visibility 0.18s ease-in;
}

.menu-open .mobile-menu__nav {
	width: 100%;
	opacity: 1;
	visibility: visible;
	transition-duration: 0.28s;
	transition-timing-function: ease-out;
}

.mobile-menu__list {
	width: 100%;
	margin: 0;
	padding: 0 0 120px;
	list-style: none;
	text-align: center;
}

/*
 * White throughout. It is the only colour that clears AA across the whole
 * gradient: the brand teal and the lime manage it on the navy end (5.64 and
 * 8.44) but fall to 2.17 and 3.25 on the lighter blue, so neither can be a
 * hover colour here. Hover is carried by the underline instead, which is
 * already the mechanism on these links.
 *
 * The .navbar-nav selectors in section 9 are written for the light desktop
 * nav and are more specific than a bare `.mobile-menu__nav a`, so the class
 * is repeated here to outrank them rather than reaching for !important.
 */
.mobile-menu__nav a,
.mobile-menu__nav .navbar-nav a.nav-link,
.mobile-menu__nav .navbar-nav a.dropdown-item {
	color: var(--c-white);
	font-family: var(--font-accent);
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--transition);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus,
.mobile-menu__nav .navbar-nav a.nav-link:hover,
.mobile-menu__nav .navbar-nav a.nav-link:focus,
.mobile-menu__nav .navbar-nav a.dropdown-item:hover,
.mobile-menu__nav .navbar-nav a.dropdown-item:focus,
.mobile-menu__nav .navbar-nav .current-menu-item > a,
.mobile-menu__nav .navbar-nav li.is-open > a.nav-link {
	color: var(--c-white);
}

/* Hamburger icon: three bars that fold into an X when the panel is open. */
.no-js .mobile-menu__button {
	display: none;
}

.no-js .mobile-menu__nav {
	position: static;
	width: 100%;
	height: auto;
	opacity: 1;
	visibility: visible;
}

.no-js .mobile-menu__list {
	padding-bottom: 0;
}

/* Submenus can't be toggled without JS either, so show them all. */
.no-js .sub-menu {
	max-height: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	height: auto !important;
	transform: none !important;
}

.no-js .submenu-toggle {
	display: none;
}

/* Lock the page behind the open menu. */
body.menu-open {
	overflow: hidden;
}

/*--------------------------------------------------------------
# 11.0 Search Overlay
#
# Markup lives in footer.php; js/search-overlay.js opens it from any
# element carrying the .search-trigger class.
--------------------------------------------------------------*/
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-image: var(--menu-gradient);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay[hidden] {
	display: none;
}

.search-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.search-overlay__form {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: min(720px, 92vw);
	border-bottom: 2px solid var(--c-white);
	transform: translateY(12px);
	transition: transform 0.3s ease;
}

.search-overlay.is-open .search-overlay__form {
	transform: translateY(0);
}

.search-overlay .search-overlay__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.4em 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--c-white);
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 4vw, 2.75rem);
}

/*
 * 80% white, not the light-theme --c-text-low. Against the gradient's lighter
 * stop that lands at 3.58:1 — under the 4.5:1 for body text, but this field
 * renders at 24px minimum, which is large text, where the threshold is 3:1.
 * Pure white would pass outright but leaves the placeholder competing with
 * the value the visitor types.
 */
.search-overlay .search-overlay__input::placeholder {
	color: rgba(255, 255, 255, 0.8);
}

.search-overlay .search-overlay__input:focus {
	outline: none;
}

.search-overlay__submit {
	flex: 0 0 auto;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--c-white);
	font-family: var(--font-accent);
	font-size: var(--fs-16);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The submit label is 16px, so it is body text and needs the full 4.5:1.
   Teal manages only 2.17:1 on the lighter stop, so both states stay white
   and hover is carried by the underline. */
.search-overlay__submit:hover,
.search-overlay__submit:focus {
	background: transparent;
	color: var(--c-white);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.search-overlay__close {
	position: absolute;
	top: clamp(1rem, 4vw, 2.5rem);
	right: clamp(1rem, 4vw, 2.5rem);
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--c-white);
	font-size: 2.5rem;
	line-height: 1;
}

/* Focus rings inside the overlay sit on the gradient, where --c-accent is
   2.17:1 and misses the 3:1 a focus indicator needs. */
.search-overlay :focus-visible {
	outline-color: var(--c-white);
}

.search-overlay__close:hover,
.search-overlay__close:focus {
	background: transparent;
	color: var(--c-white);
	transform: scale(1.1);
}

body.search-overlay-open {
	overflow: hidden;
}

/*--------------------------------------------------------------
# 12.0 Footer
--------------------------------------------------------------*/
.site-footer {
	flex-shrink: 0;
	padding-block: var(--space-lg);
	background-color: var(--c-surface);
	border-top: 1px solid var(--c-line);
	color: var(--c-text-muted);
	font-size: var(--fs-16);
}

/*
 * The same column as .wrap, not merely the same numbers.
 *
 * The gutters used to sit on .site-footer with the max-width on the inner
 * div, which looks equivalent and is not: --c-max already includes both
 * gutters, so the footer's content measured 1108px against the 990px the
 * header and the hero share, and the copyright line started a gutter
 * further left than everything above it.
 */
.site-footer__inner {
	max-width: var(--c-max);
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

.footer__widget-title {
	color: var(--c-heading);
	font-family: var(--font-accent);
	font-size: var(--fs-16);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* js/footer-active.js tags the footer link matching the current URL. */
.site-footer a.is-current {
	color: var(--c-accent);
	font-weight: 700;
}

.site-info {
	font-size: var(--fs-14);
}

/* The rule above the copyright separates it from the footer widgets. With
   no widgets there is nothing to separate, and it reads as a stray line. */
.site-info:not(:first-child) {
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--c-line);
}

/*--------------------------------------------------------------
# 13.0 Posts and Pages
--------------------------------------------------------------*/
.entry-header,
.entry-content,
.entry-summary,
.entry-footer,
.page-content,
.post-navigation,
.posts-navigation,
.not-found {
	max-width: var(--c-max);
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

.entry-header {
	padding-block: var(--space-lg) var(--space-sm);
}

.entry-content {
	padding-block: var(--space-sm) var(--space-lg);
}

.entry-title {
	margin-bottom: 0.25em;
}

.entry-meta,
.entry-footer {
	color: var(--c-text-muted);
	font-size: var(--fs-14);
}

.entry-meta > span + span::before,
.entry-footer > span + span::before {
	content: "·";
	margin: 0 0.5em;
}

.post-thumbnail {
	display: block;
	margin-bottom: var(--space-md);
}

.post-thumbnail img {
	width: 100%;
}

.page-links {
	clear: both;
	margin-top: var(--space-sm);
}

/* Archive card grid. */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--space-md);
	max-width: var(--c-max);
	margin-inline: auto;
	padding: var(--space-lg) var(--c-gutter);
}

.post-excerpt {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-sm);
	background-color: var(--c-surface);
	border-radius: var(--radius);
}

.post-excerpt__title {
	font-size: var(--fs-24);
}

.post-excerpt__title a {
	color: var(--c-heading);
	text-decoration: none;
}

.post-excerpt__title a:hover,
.post-excerpt__title a:focus {
	color: var(--c-accent);
}

.post-excerpt__text {
	flex: 1 1 auto;
	color: var(--c-text-muted);
	font-size: var(--fs-16);
}

.read-more {
	align-self: flex-start;
	font-family: var(--font-accent);
	font-size: var(--fs-14);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Pagination. */
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: space-between;
}

.nav-subtitle {
	display: block;
	color: var(--c-text-low);
	font-size: var(--fs-14);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
# 14.0 Comments
--------------------------------------------------------------*/
.comments-area {
	max-width: var(--c-max);
	margin-inline: auto;
	padding: var(--space-lg) var(--c-gutter);
}

.comment-list,
.comment-list .children {
	list-style: none;
	padding-left: 0;
}

.comment-list .children {
	padding-left: var(--space-md);
}

.comment-body {
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--c-line);
}

.comment-meta {
	font-size: var(--fs-14);
}

.comment-author .avatar {
	display: inline-block;
	margin-right: var(--space-xs);
	vertical-align: middle;
	border-radius: 50%;
}

.comment-form label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 700;
}

.comment-form p {
	margin-bottom: var(--space-sm);
}

.bypostauthor > .comment-body .fn::after {
	content: " ★";
	color: var(--c-accent-2);
}

/*--------------------------------------------------------------
# 15.0 Blocks and Alignments
--------------------------------------------------------------*/
.alignleft {
	float: left;
	margin: 0 var(--space-sm) var(--space-sm) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-sm) var(--space-sm);
}

.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
}

.alignwide {
	max-width: var(--c-max-wide);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Clear floats after each entry so alignleft/right don't bleed. */
.entry-content::after,
.comment-content::after {
	content: "";
	display: table;
	clear: both;
}

.wp-block-image figcaption {
	text-align: center;
}

.sticky .entry-title::before {
	content: "★ ";
	color: var(--c-accent-2);
}

/*--------------------------------------------------------------
# 16.0 Utilities
--------------------------------------------------------------*/

/*
 * Dark section. --c-brand (yellow) and --c-lime (silver) are too light to
 * read on white (1.72:1 and 1.53:1), but clear AA on the navy (5.70:1 and
 * 6.34:1). Wrap a section in this to use them safely.
 */
.section--dark {
	background-color: var(--c-navy);
	color: var(--c-surface);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
	color: var(--c-white);
}

.section--dark a {
	color: var(--c-brand);
}

.section--dark a:hover,
.section--dark a:focus {
	color: var(--c-lime);
}

.section--dark .eyebrow {
	color: var(--c-brand);
}

.section--dark :focus-visible {
	outline-color: var(--c-brand);
}

/*
 * Buttons have to invert here too, and this is not cosmetic. The default
 * accent fill is only 1.07:1 against the navy — WCAG 1.4.11 asks 3:1 of a
 * control's boundary, so the button would vanish into the band. The yellow
 * is 5.70:1 on the navy and carries navy text at the same ratio, so it works
 * in both directions.
 */
.section--dark .wp-block-button__link,
.section--dark .wp-element-button,
.section--dark button:not(.icon-btn):not(.submenu-toggle) {
	background-color: var(--c-brand);
	border-color: var(--c-brand);
	color: var(--c-navy);
}

.section--dark .wp-block-button__link:hover,
.section--dark .wp-element-button:hover,
.section--dark button:not(.icon-btn):not(.submenu-toggle):hover {
	background-color: var(--c-lime);
	border-color: var(--c-lime);
	color: var(--c-navy);
}

/* Outline goes white here: the accent border is 1.83:1 on navy, white is
   11.96:1. */
.section--dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
.section--dark .wp-block-button.is-style-outline > .wp-element-button:not(.has-background),
.section--dark .button--outline {
	background-color: transparent;
	border-color: var(--c-white);
	color: var(--c-white);
}

.section--dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.section--dark .button--outline:hover,
.section--dark .button--outline:focus {
	background-color: var(--c-white);
	color: var(--c-navy);
}

.eyebrow {
	color: var(--c-accent-2-deep);
	font-family: var(--font-accent);
	font-size: var(--fs-14);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.link-arrow {
	color: var(--c-accent);
	font-family: var(--font-accent);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.no-margin {
	margin: 0;
}

.text-muted {
	color: var(--c-text-muted);
}

/*--------------------------------------------------------------
# 17.0 Landing Page
#
# page-templates/landing.php. The hero is a .section--dark band, so links,
# buttons and focus rings inside it already use the on-navy colours; the
# quote card is a white panel inside that band and switches them back.
--------------------------------------------------------------*/
.landing-hero {
	padding-block: clamp(2rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5.5rem);
}

.landing-hero__grid {
	display: grid;
	gap: var(--space-md);
	align-items: start;
}

/* Copy and a 390px card, as drawn at 1440. */
@media screen and (min-width: 62em) {

	.landing-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
		column-gap: clamp(3rem, 8vw, 7.5rem);
	}
}

/* Silver, not the white .section--dark gives headings: 6.34:1 on navy. */
.landing-hero__copy h1 {
	margin: 0 0 2.5rem;
	color: var(--c-silver);
}

.landing-hero__copy p {
	max-width: 29rem;
	margin: 0 0 0.875em;
	color: var(--c-white);
}

.landing-hero__copy > :last-child {
	margin-bottom: 0;
}

/*
 * "Value props" paragraph style. The yellow is 5.70:1 on navy but 1.70:1 on
 * white, so it is only for the hero. The blue rule is decoration.
 */
.is-style-value-props,
.landing-hero__copy .is-style-value-props {
	max-width: none;
	margin: 0 0 2.75rem;
	padding-left: 1.3rem;
	border-left: 4px solid var(--c-bar);
	color: var(--c-yellow);
	font-family: var(--font-head);
	font-size: var(--fs-22);
	font-weight: 500;
	line-height: 1.3;
}

.quote-card {
	margin: 0;
	padding: 1.5rem 1.75rem 1.25rem;
	background-color: var(--c-bg);
	border-radius: var(--radius-lg);
	color: var(--c-text);
}

.quote-card a {
	color: var(--c-accent);
}

.quote-card :focus-visible {
	outline-color: var(--c-accent);
}

.quote-card .quote-card__title {
	margin: 0 0 0.35rem;
	color: var(--c-heading);
	font-size: var(--fs-24);
	font-weight: 600;
}

.quote-card__intro {
	margin: 0 0 1.25rem;
	color: var(--c-text-muted);
	line-height: 1.35;
}

.quote-card__note {
	margin: 0.75rem 0 0;
	color: var(--c-text-low);
	text-align: center;
}