/**
 * Australia Quality - global design system.
 *
 * Loaded after Bootstrap (see inc/enqueue.php), so rules here extend or
 * override Bootstrap. Page-specific section styles live in
 * assets/css/pages/{page}.css and are loaded only on that page template.
 *
 * Contents:
 *   1. Fonts
 *   2. Design tokens
 *   3. Bootstrap bridge (Bootstrap variables mapped to tokens)
 *   4. Base elements
 *   5. Utilities and layout patterns
 *   6. Components (buttons, eyebrow, section header, links, frames, photos, cards, ruled rows)
 *   7. Site header
 *   8. Site footer
 *   9. Global sections
 *
 * See DESIGN.md for the documented design system.
 */

/* 1. Fonts ----------------------------------------------------------------
 * Inter (variable: weight 400-700, optical size 14-32), self-hosted.
 * Licence: assets/fonts/inter/LICENSE.txt (SIL OFL 1.1).
 */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter/inter-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: "Inter";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter/inter-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter/inter-italic-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;
}

/* 2. Design tokens ------------------------------------------------------- */
:root {
	/* Brand palette */
	--aq-white: #FFFFFF;
	--aq-bg: #FFFFFF;
	--aq-bg-alt: #F0F8FC;
	--aq-text: #102E43;
	--aq-highlight: #008BC5;
	--aq-primary: #007FB5;
	--aq-dark: #073B59;
	--aq-accent: #43C3EB;
	--aq-border: #D5E8F2;

	/* Feedback (forms only) */
	--aq-error: #B42318;

	/* Neutrals (tints of the navy text colour) */
	--aq-neutral-400: #586D7B;
	--aq-neutral-600: #4C6272;
	--aq-neutral-800: #344D5F;

	/* Lines */
	--aq-line-frame: color-mix(in srgb, var(--aq-text) 18%, transparent);
	--aq-line-corner: color-mix(in srgb, var(--aq-text) 42%, transparent);
	--aq-line-on-dark: color-mix(in srgb, var(--aq-white) 18%, transparent);

	/* Text on dark sections */
	--aq-on-dark-muted: color-mix(in srgb, var(--aq-white) 68%, transparent);
	--aq-on-dark-body: color-mix(in srgb, var(--aq-white) 78%, transparent);
	--aq-on-dark-strong: color-mix(in srgb, var(--aq-white) 82%, transparent);

	/* Typography */
	--aq-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--aq-weight-regular: 400;
	--aq-weight-medium: 500;
	--aq-weight-semibold: 600;
	--aq-body-size: 16px;
	--aq-body-line-height: 1.62;
	--aq-section-title-size: clamp(27px, 3.3vw, 50px);

	/* Layout */
	--aq-gutter: clamp(20px, 4vw, 64px);
	--aq-section-space-top: clamp(56px, 7vw, 120px);
	--aq-section-space-bottom: clamp(48px, 6vw, 100px);

	/* Shape and depth */
	--aq-radius: 0;
	--aq-shadow-sm: 0 1px 2px rgba(7, 59, 89, .08);
	--aq-shadow-md: 0 6px 18px rgba(7, 59, 89, .10);
	--aq-shadow-lg: 0 18px 44px rgba(7, 59, 89, .14);
	--aq-shadow-menu: 0 14px 28px rgba(7, 59, 89, .10);

	/* Motion */
	--aq-transition: .18s ease;
}

/* 3. Bootstrap bridge ---------------------------------------------------- */
:root {
	--bs-font-sans-serif: var(--aq-font-sans);
	--bs-body-font-family: var(--aq-font-sans);
	--bs-body-font-size: var(--aq-body-size);
	--bs-body-font-weight: var(--aq-weight-regular);
	--bs-body-line-height: var(--aq-body-line-height);
	--bs-body-color: var(--aq-text);
	--bs-body-bg: var(--aq-bg);
	--bs-heading-color: inherit;
	--bs-link-color: var(--aq-primary);
	--bs-link-color-rgb: 0, 127, 181;
	--bs-link-hover-color: var(--aq-dark);
	--bs-link-hover-color-rgb: 7, 59, 89;
	--bs-border-color: var(--aq-border);
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;
	--bs-border-radius-xxl: 0;
	--bs-border-radius-pill: 0;
}

/* 4. Base elements ------------------------------------------------------- */
*,
::before,
::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--aq-bg);
	color: var(--aq-text);
	font-family: var(--aq-font-sans);
	font-size: var(--aq-body-size);
	font-weight: var(--aq-weight-regular);
	line-height: var(--aq-body-line-height);
	letter-spacing: .002em;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 6.8px;
	color: inherit;
	font-family: var(--aq-font-sans);
	font-weight: var(--aq-weight-semibold);
	line-height: 1.12;
	letter-spacing: -.015em;
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }

h6 {
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

p {
	margin: 0 0 10.2px;
}

a {
	color: var(--aq-primary);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--aq-dark);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

figcaption {
	margin-top: 3.4px;
	font-size: 11px;
	color: color-mix(in srgb, var(--aq-text) 55%, transparent);
}

address {
	margin: 0;
	font-style: normal;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--aq-primary);
	outline-offset: 2px;
}

::selection {
	background: color-mix(in srgb, var(--aq-primary) 26%, transparent);
	color: var(--aq-text);
}

/* 5. Utilities and layout patterns -------------------------------------- */

/* Page wrapper: clips horizontal overflow without breaking position: sticky. */
.site {
	width: 100%;
	overflow-x: clip;
}

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

/*
 * Split: two-column grid used by most sections. Set the column ratio with
 * --aq-split-cols on the section; collapses to one column at 980px.
 */
.split {
	display: grid;
	grid-template-columns: var(--aq-split-cols, minmax(0, 1fr) minmax(0, 1fr));
}

/* Image + content (image column narrower). */
.split--media {
	--aq-split-cols: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(28px, 4.5vw, 80px);
	align-items: start;
}

/* Intro column + content column (e.g. heading/intro beside a list). */
.split--intro {
	--aq-split-cols: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
}

@media (max-width: 980px) {
	.split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Standard section spacing. */
.section {
	padding: var(--aq-section-space-top) var(--aq-gutter) var(--aq-section-space-bottom);
}

/* Space between a section header and the content block below it. */
.section-body {
	margin-top: clamp(38px, 4.6vw, 76px);
}

/* Section surfaces */
.section--alt {
	background: var(--aq-bg-alt);
}

.section--dark {
	background: var(--aq-dark);
	color: var(--aq-white);
}

.section--ruled {
	border-bottom: 1px solid var(--aq-border);
}

/* 6. Components ----------------------------------------------------------- */

/*
 * Buttons. Built on Bootstrap's .btn so its states (hover, focus, active,
 * disabled) resolve to our values through Bootstrap's own variables.
 *   .btn-primary   blue fill (main action)
 *   .btn-secondary hairline outline
 *   .btn-light     white fill, for dark sections
 * Sizes: .btn-sm (header), .btn-lg (hero), .btn-xl (contact band).
 */
.btn {
	--bs-btn-padding-x: 12.24px;
	--bs-btn-padding-y: 6.8px;
	--bs-btn-font-family: var(--aq-font-sans);
	--bs-btn-font-size: 14px;
	--bs-btn-font-weight: var(--aq-weight-medium);
	--bs-btn-line-height: 1.2;
	--bs-btn-color: var(--aq-text);
	--bs-btn-bg: transparent;
	--bs-btn-border-width: 1px;
	--bs-btn-border-color: var(--aq-border);
	--bs-btn-border-radius: var(--aq-radius);
	--bs-btn-hover-color: var(--aq-text);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: var(--aq-border);
	--bs-btn-active-color: var(--aq-text);
	--bs-btn-active-bg: transparent;
	--bs-btn-active-border-color: var(--aq-border);
	--bs-btn-disabled-opacity: .45;
	--bs-btn-focus-box-shadow: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	letter-spacing: .08em;
	transition: background-color var(--aq-transition), color var(--aq-transition), border-color var(--aq-transition);
}

.btn:focus-visible {
	outline: 2px solid var(--aq-primary);
	outline-offset: 2px;
}

.btn-primary {
	--bs-btn-color: var(--aq-white);
	--bs-btn-bg: var(--aq-primary);
	--bs-btn-border-color: var(--aq-line-frame);
	--bs-btn-hover-color: var(--aq-white);
	--bs-btn-hover-bg: var(--aq-dark);
	--bs-btn-hover-border-color: var(--aq-dark);
	--bs-btn-active-color: var(--aq-white);
	--bs-btn-active-bg: color-mix(in srgb, var(--aq-dark) 80%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--aq-dark) 80%, #000);
	--bs-btn-disabled-color: var(--aq-white);
	--bs-btn-disabled-bg: var(--aq-primary);
	--bs-btn-disabled-border-color: var(--aq-primary);
}

.btn-secondary {
	--bs-btn-color: var(--aq-text);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--aq-neutral-400);
	--bs-btn-hover-color: var(--aq-text);
	--bs-btn-hover-bg: var(--aq-bg-alt);
	--bs-btn-hover-border-color: var(--aq-primary);
	--bs-btn-active-color: var(--aq-text);
	--bs-btn-active-bg: var(--aq-bg-alt);
	--bs-btn-active-border-color: var(--aq-primary);
	--bs-btn-disabled-color: var(--aq-text);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--aq-neutral-400);
}

.btn-light {
	--bs-btn-color: var(--aq-dark);
	--bs-btn-bg: var(--aq-white);
	--bs-btn-border-color: var(--aq-white);
	--bs-btn-hover-color: var(--aq-dark);
	--bs-btn-hover-bg: var(--aq-accent);
	--bs-btn-hover-border-color: var(--aq-accent);
	--bs-btn-active-color: var(--aq-dark);
	--bs-btn-active-bg: var(--aq-border);
	--bs-btn-active-border-color: var(--aq-border);
	--bs-btn-disabled-color: var(--aq-dark);
	--bs-btn-disabled-bg: var(--aq-white);
	--bs-btn-disabled-border-color: var(--aq-white);
}

.btn-sm {
	--bs-btn-padding-y: 12px;
	--bs-btn-padding-x: 20px;
	--bs-btn-font-size: 12.5px;
	--bs-btn-border-radius: var(--aq-radius);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.btn-lg {
	--bs-btn-padding-y: 16px;
	--bs-btn-padding-x: 26px;
	--bs-btn-font-size: 13px;
	--bs-btn-border-radius: var(--aq-radius);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.btn-xl {
	--bs-btn-padding-y: 18px;
	--bs-btn-padding-x: 30px;
	--bs-btn-font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Eyebrow: small uppercase label above a section title. */
.eyebrow {
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--aq-primary);
}

.section--dark .eyebrow {
	color: var(--aq-accent);
}

/* Section header: eyebrow + title, with an optional text link on the right. */
.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.section-title {
	max-width: 20ch;
	margin: clamp(18px, 2.2vw, 30px) 0 0;
	font-size: var(--aq-section-title-size);
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* Compact title, used in the header of a dark band. */
.section-title--compact {
	max-width: 22ch;
	margin-top: 16px;
	font-size: clamp(24px, 2.7vw, 38px);
	line-height: 1.12;
	letter-spacing: -.015em;
}

/* Header of a full-bleed band whose content (e.g. a card grid) runs edge to edge. */
.section-header--band {
	align-items: baseline;
	padding: clamp(40px, 5vw, 72px) var(--aq-gutter) clamp(20px, 2.4vw, 32px);
}

/* Hero eyebrow: slightly larger label with an animated rule. */
.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--aq-primary);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.hero-eyebrow__rule {
	width: 44px;
	height: 1px;
	background: var(--aq-highlight);
	transform-origin: left center;
	animation: aq-rule-in 900ms cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes aq-rule-in {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

/*
 * Text styles
 *   .text-lead       hero/page-hero introduction
 *   .text-statement  large statement paragraph
 *   .text-intro      standard section introduction
 */
.text-lead {
	max-width: 46ch;
	margin: 0;
	color: var(--aq-neutral-800);
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.62;
}

.text-statement {
	max-width: 52ch;
	margin: 0;
	color: var(--aq-neutral-800);
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.6;
}

.text-intro {
	max-width: 40ch;
	margin: 0;
	color: var(--aq-neutral-600);
	font-size: 16px;
	line-height: 1.68;
}

.section-header + .text-intro {
	margin-top: clamp(22px, 2.6vw, 36px);
}

/* Body copy: one or more paragraphs of running text. */
.text-body {
	max-width: 62ch;
	color: var(--aq-neutral-800);
	font-size: 16.5px;
	line-height: 1.68;
}

.text-body p {
	margin: 0 0 1em;
}

.text-body p:last-child {
	margin-bottom: 0;
}

/*
 * Page hero: compact hero for internal pages. Title + eyebrow on the left,
 * introduction and actions on the right; stacks at 980px.
 */
.page-hero {
	--aq-split-cols: minmax(0, 1.2fr) minmax(0, .8fr);
	padding: clamp(48px, 6vw, 96px) var(--aq-gutter) clamp(44px, 5vw, 72px);
}

.page-hero__layout {
	gap: clamp(24px, 3vw, 38px) clamp(32px, 5vw, 96px);
	align-items: end;
}

.page-hero__title {
	max-width: 20ch;
	margin: clamp(24px, 3vw, 38px) 0 0;
	font-size: clamp(30px, 3.9vw, 60px);
	line-height: 1.08;
	letter-spacing: -.022em;
	text-wrap: balance;
}

.page-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(24px, 3vw, 38px);
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

@media (max-width: 520px) {
	.page-hero__aside .btn,
	.page-hero__actions {
		justify-content: center;
		width: 100%;
	}
}

/* Text link with an accent underline rule ("View all →"). */
.cta-link,
.cta-link:hover {
	color: var(--aq-primary);
}

.cta-link {
	padding-bottom: 6px;
	border-bottom: 1px solid var(--aq-accent);
	font-size: 12px;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
}

.section--dark .cta-link,
.section--dark .cta-link:hover {
	color: var(--aq-white);
}

@media (max-width: 768px) {
	/* These links carry an underline border, so the tap area only grows upward. */
	.cta-link {
		padding-top: 8px;
		margin-top: -8px;
	}
}

/* Frame: hairline border with corner ticks around an image ("blueprint"). */
.frame {
	position: relative;
	margin: 0;
	border: 1px solid var(--aq-line-frame);
	border-radius: var(--aq-radius);
}

.frame--square {
	align-self: start;
	aspect-ratio: 1 / 1;
}

/* 16:9: for banner-style images with text that must not be cropped. */
.frame--wide {
	align-self: start;
	aspect-ratio: 16 / 9;
}

.frame__corner {
	position: absolute;
	width: 11px;
	height: 11px;
	color: var(--aq-line-corner);
}

.frame__corner::before,
.frame__corner::after {
	content: "";
	position: absolute;
	background: currentcolor;
}

.frame__corner::before {
	top: 0;
	left: 5px;
	width: 1px;
	height: 100%;
}

.frame__corner::after {
	top: 5px;
	left: 0;
	width: 100%;
	height: 1px;
}

.frame__corner--tl { top: -6px; left: -6px; }
.frame__corner--tr { top: -6px; right: -6px; }
.frame__corner--bl { bottom: -6px; left: -6px; }
.frame__corner--br { bottom: -6px; right: -6px; }

/* Photo: fills its frame and crops with object-fit (3:2 when unconstrained). */
.photo {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
}

.photo__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--aq-bg-alt);
}

.photo__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Course card */
.course-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 30px);
	margin-top: clamp(34px, 4vw, 60px);
}

.course-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--aq-border);
	background: var(--aq-bg);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--aq-transition), background var(--aq-transition);
}

a.course-card:hover {
	border-color: var(--aq-primary);
	background: var(--aq-bg);
	color: inherit;
}

.course-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--aq-bg-alt);
}

/* Whole image shown (never cropped or distorted), centred on the tinted panel. */
.course-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.course-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 9px;
	padding: clamp(18px, 1.8vw, 26px);
}

.course-card__kicker {
	color: var(--aq-primary);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.course-card__title {
	margin: 0;
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.22;
	letter-spacing: -.01em;
}

.course-card__desc {
	margin: 0;
	color: var(--aq-neutral-600);
	font-size: 14.5px;
	line-height: 1.6;
}

.course-card__more {
	margin-top: auto;
	padding-top: 10px;
	color: var(--aq-primary);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

@media (max-width: 1023px) {
	.course-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.course-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Ruled list: rows separated by hairlines; rows stack at 760px.
 *   .ruled-row--feature  title | text            (e.g. key points, facts)
 *   .ruled-row--detail   label | headline | text (e.g. stories, process steps)
 * Custom column ratios: set --aq-row-cols on the row or list.
 */
.ruled-list {
	margin-bottom: 0;
	border-top: 1px solid var(--aq-border);
}

.ruled-row {
	display: grid;
	grid-template-columns: var(--aq-row-cols, minmax(0, 1fr));
	border-bottom: 1px solid var(--aq-border);
}

.ruled-row--feature {
	--aq-row-cols: minmax(0, .9fr) minmax(0, 1.4fr);
	gap: clamp(16px, 2.4vw, 40px);
	padding: clamp(20px, 2.4vw, 32px) 0;
}

.ruled-row--detail {
	--aq-row-cols: minmax(0, .34fr) minmax(0, 1fr) minmax(0, .9fr);
	align-items: baseline;
	gap: clamp(18px, 3vw, 52px);
	padding: clamp(24px, 3vw, 44px) 0;
}

/* Align label and value on their first line (short label/value pairs). */
.ruled-row--baseline {
	align-items: baseline;
}

.ruled-row__label {
	color: var(--aq-neutral-600);
	font-weight: var(--aq-weight-regular);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Small heading size, shared by row titles and panel headings. */
.ruled-row__title,
.heading-sm {
	margin: 0;
	font-size: clamp(18px, 1.55vw, 23px);
	line-height: 1.2;
	overflow-wrap: break-word;
}

.ruled-row__title a {
	text-decoration: none;
}

.ruled-row__headline {
	margin: 0;
	font-weight: var(--aq-weight-regular);
	font-size: clamp(20px, 1.9vw, 28px);
	line-height: 1.22;
	letter-spacing: -.01em;
}

.ruled-row__text {
	margin: 0;
	color: var(--aq-neutral-600);
	font-size: 15px;
	line-height: 1.66;
}

@media (max-width: 760px) {
	.ruled-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
}

/*
 * Ruled columns: compact multi-column list of short items with hairlines
 * (e.g. client types). 3 / 2 / 1 columns.
 */
.ruled-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(28px, 4vw, 72px);
	border-top: 1px solid var(--aq-border);
}

.ruled-columns__item {
	padding: clamp(14px, 1.7vw, 24px) 0;
	border-bottom: 1px solid var(--aq-border);
	font-size: clamp(18px, 1.55vw, 23px);
	line-height: 1.2;
	letter-spacing: -.01em;
}

@media (max-width: 980px) {
	.ruled-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.ruled-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Links inside ruled columns (e.g. "other services"). */
.ruled-columns__link {
	display: block;
	color: var(--aq-text);
	text-decoration: none;
	transition: color 160ms;
}

.ruled-columns__link:hover {
	color: var(--aq-primary);
}

/*
 * Item list: numbered hairline list of short statements or bullet points
 * (e.g. "How can we help?"). Numbers are generated by the template.
 */
.item-list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--aq-border);
	list-style: none;
}

.item-list__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: clamp(14px, 1.5vw, 20px) 0;
	border-bottom: 1px solid var(--aq-border);
	color: var(--aq-neutral-800);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.55;
}

.item-list__number {
	color: var(--aq-primary);
	font-size: 11px;
	letter-spacing: .18em;
}

/*
 * Display list: large hairline-separated names with a small tag on the
 * right (e.g. industries, standards). Rows can be links.
 */
.display-list {
	border-top: 1px solid var(--aq-border);
}

.display-list__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(14px, 1.7vw, 24px) 0;
	border-bottom: 1px solid var(--aq-border);
	color: var(--aq-text);
	text-decoration: none;
	transition: color 160ms;
}

a.display-list__item:hover {
	color: var(--aq-primary);
}

.display-list__name {
	font-size: clamp(24px, 2.9vw, 44px);
	line-height: 1.08;
	letter-spacing: -.015em;
}

.display-list__tags {
	color: var(--aq-neutral-600);
	font-size: 12px;
	letter-spacing: .12em;
	text-align: right;
	text-transform: uppercase;
}

/*
 * Numbered cards: grid of cards numbered 01, 02... with left hairlines.
 * Light by default; inside .section--dark they switch to the dark palette.
 */
.numbered-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--aq-border);
}

/* Three per row (e.g. home services); hairlines between rows. */
.numbered-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.numbered-grid--3 > .numbered-card:nth-child(n+4) {
	border-top-width: 1px;
}

.numbered-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(26px, 3vw, 42px) clamp(18px, 2.2vw, 32px) clamp(38px, 4vw, 58px);
	border-top: 0 solid var(--aq-border);
	border-left: 1px solid var(--aq-border);
	color: inherit;
	text-decoration: none;
	transition: background 180ms;
}

a.numbered-card:hover {
	background: var(--aq-bg-alt);
	color: inherit;
}

.numbered-card__number {
	color: var(--aq-primary);
	font-size: 11px;
	letter-spacing: .18em;
}

.numbered-card__title {
	margin: 0;
	font-weight: var(--aq-weight-regular);
	font-size: clamp(20px, 1.7vw, 26px);
	line-height: 1.14;
	letter-spacing: inherit;
}

.numbered-card__text {
	margin: 0;
	color: var(--aq-neutral-600);
	font-size: 13.5px;
	line-height: 1.6;
}

.section--dark .numbered-grid {
	border-top-color: var(--aq-line-on-dark);
}

.section--dark .numbered-card {
	border-left-color: var(--aq-line-on-dark);
	border-top-color: var(--aq-line-on-dark);
}

.section--dark a.numbered-card:hover {
	background: color-mix(in srgb, var(--aq-white) 7%, transparent);
}

.section--dark .numbered-card__number {
	color: var(--aq-accent);
}

.section--dark .numbered-card__text {
	color: var(--aq-on-dark-muted);
}

@media (max-width: 980px) {
	.numbered-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.numbered-grid--3 > .numbered-card:nth-child(n+4) {
		border-top-width: 0;
	}

	.numbered-grid--3 > .numbered-card:nth-child(n+3) {
		border-top-width: 1px;
	}
}

@media (max-width: 620px) {
	.numbered-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.numbered-grid--3 > .numbered-card:nth-child(n+2) {
		border-top-width: 1px;
	}
}

/*
 * Forms: Bootstrap .form-label / .form-control restyled to the design system
 * (square, hairline, uppercase micro-labels, primary focus).
 */
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
}

.form-grid__full {
	grid-column: 1 / -1;
}

.form-label {
	margin-bottom: 8px;
	color: var(--aq-neutral-600);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.form-control {
	padding: 14px 16px;
	border: 1px solid var(--aq-neutral-400);
	border-radius: var(--aq-radius);
	background-color: var(--aq-white);
	color: var(--aq-text);
	font-size: 16px;
	line-height: 1.5;
}

/* Bootstrap removes the outline on focus; a 2px primary edge marks it instead. */
.form-control:focus {
	border-color: var(--aq-primary);
	background-color: var(--aq-white);
	box-shadow: 0 0 0 1px var(--aq-primary);
	color: var(--aq-text);
}

textarea.form-control {
	min-height: 160px;
	resize: vertical;
}

.form-notice {
	margin-bottom: 24px;
	padding: 14px 18px;
	border-left: 2px solid var(--aq-primary);
	background: var(--aq-bg-alt);
	font-size: 15px;
	line-height: 1.6;
}

.form-notice--error {
	border-left-color: var(--aq-error);
	color: var(--aq-error);
}

/* Contact form panel (components/contact-form.php) */
.contact-form {
	padding: clamp(24px, 3vw, 44px);
	border: 1px solid var(--aq-border);
	background: var(--aq-white);
}

.contact-form__title {
	margin-bottom: 10px;
}

.contact-form__intro {
	margin: 0 0 24px;
	color: var(--aq-neutral-600);
	font-size: 15px;
	line-height: 1.66;
}

.contact-form__title + .contact-form__form,
.contact-form__title + .form-notice {
	margin-top: 24px;
}

.contact-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
}

.contact-form__required {
	margin: 0;
	color: var(--aq-neutral-600);
	font-size: 12.5px;
}

@media (max-width: 520px) {
	.form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.contact-form__footer .btn {
		justify-content: center;
		width: 100%;
	}
}

/* 7. Site header ---------------------------------------------------------- */
.site-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 38px;
	padding: 0 var(--aq-gutter);
	border-bottom: 1px solid var(--aq-border);
	color: var(--aq-neutral-600);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.site-topbar__locations,
.site-topbar__contact {
	display: flex;
	align-items: center;
}

.site-topbar__locations {
	gap: 18px;
}

.site-topbar__separator {
	color: var(--aq-neutral-400);
}

.site-topbar__contact {
	gap: 24px;
}

.site-topbar__email {
	letter-spacing: .1em;
	text-decoration: none;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	padding: 22px var(--aq-gutter);
	border-bottom: 1px solid var(--aq-border);
	background: color-mix(in srgb, var(--aq-bg) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Keep the sticky header below the WordPress admin bar when logged in. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-right: auto;
	color: inherit;
	text-decoration: none;
}

.site-branding__inner {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.site-branding__logo {
	display: block;
	flex: 0 0 auto;
	align-self: flex-start;
	width: auto;
	height: 46px;
	object-fit: contain;
}

.site-branding__name {
	font-weight: var(--aq-weight-semibold);
	font-size: 19px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.site-branding__tagline {
	margin-top: 9px;
	color: var(--aq-neutral-600);
	font-size: 9.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Primary navigation (desktop) */
.site-nav {
	--aq-nav-gap: clamp(18px, 2.4vw, 34px);
	display: flex;
	align-items: center;
	gap: var(--aq-nav-gap);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--aq-nav-gap);
	font-size: 13px;
}

.site-nav__link {
	display: block;
	color: var(--aq-text);
	font-size: 13px;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-nav__link:hover {
	color: var(--aq-primary);
}

.site-nav__cta {
	display: none;
}

.site-header__cta {
	flex: 0 0 auto;
}

.site-header__cta-short {
	display: none;
}

/* Mobile menu toggle (CSS only: checkbox + label) */
.nav-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.nav-btn {
	display: none;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	margin-left: auto;
	color: var(--aq-text);
	cursor: pointer;
}

.nav-btn span {
	display: block;
	width: 21px;
	height: 1.5px;
	background: currentColor;
	transition: transform .22s ease, opacity .18s ease;
}

.nav-toggle:focus-visible ~ .nav-btn {
	outline: 2px solid var(--aq-primary);
	outline-offset: 3px;
}

@media (min-width: 1181px) and (max-width: 1400px) {
	.site-nav {
		--aq-nav-gap: 19px;
	}

	.site-header {
		gap: 24px;
	}
}

@media (max-width: 1180px) {
	.site-branding__tagline,
	.site-nav .nav-secondary,
	.site-header__cta-long {
		display: none;
	}

	.site-header__cta-short {
		display: inline;
	}
}

@media (max-width: 1080px) {
	.site-nav {
		--aq-nav-gap: 20px;
	}

	.site-header {
		gap: 24px;
	}
}

@media (max-width: 860px) {
	.site-header {
		gap: 12px;
		padding-right: 18px;
		padding-left: 18px;
	}

	.site-branding__logo {
		height: 38px;
	}

	.nav-btn {
		display: flex;
	}

	.nav-toggle:checked ~ .nav-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	.nav-toggle:checked ~ .nav-btn span:nth-child(2) { opacity: 0; }
	.nav-toggle:checked ~ .nav-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

	.site-header__cta {
		display: none;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 2px 18px 18px;
		border-bottom: 1px solid var(--aq-border);
		background: var(--aq-bg);
		box-shadow: var(--aq-shadow-menu);
	}

	.nav-toggle:checked ~ .site-nav {
		display: flex;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav .nav-secondary {
		display: block;
	}

	.site-nav__link {
		padding: 15px 2px;
		border-top: 1px solid var(--aq-border);
		font-size: 14px;
		white-space: normal;
	}

	.site-nav__cta {
		display: block;
		margin-top: 16px;
		padding: 15px 20px;
		background: var(--aq-primary);
		color: var(--aq-white);
		font-size: 14px;
		letter-spacing: .1em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}

	.site-nav__cta:hover,
	.site-nav__cta:focus-visible {
		background: var(--aq-dark);
		color: var(--aq-white);
	}
}

@media (max-width: 768px) {
	.site-topbar a {
		padding-block: 6px;
	}
}

@media (max-width: 760px) {
	.site-topbar {
		gap: 12px;
		padding: 0 18px;
		font-size: 10px;
	}

	.site-topbar__contact {
		gap: 14px;
	}
}

@media (max-width: 620px) {
	.site-topbar__locations {
		display: none;
	}

	.site-topbar__contact {
		justify-content: space-between;
		width: 100%;
	}
}

@media (max-width: 520px) {
	.site-branding__logo {
		height: 34px;
	}
}

@media (max-width: 430px) {
	.site-topbar__email {
		display: none;
	}

	.site-branding__logo {
		height: 31px;
	}

	.site-topbar__contact {
		justify-content: center;
	}
}

/* 8. Site footer ---------------------------------------------------------- */
.site-footer {
	padding: clamp(48px, 6vw, 96px) var(--aq-gutter) clamp(28px, 3vw, 44px);
	background: var(--aq-bg-alt);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
	gap: clamp(28px, 3.4vw, 56px);
	padding-bottom: clamp(36px, 4vw, 64px);
	border-bottom: 1px solid var(--aq-border);
}

.site-footer__name {
	color: var(--aq-text);
	font-weight: var(--aq-weight-semibold);
	font-size: 19px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.site-footer__text {
	max-width: 34ch;
	margin: 14px 0 0;
	color: var(--aq-neutral-600);
	font-size: 14px;
	line-height: 1.66;
}

.site-footer .contact-details {
	margin-top: clamp(18px, 2vw, 26px);
	color: var(--aq-neutral-800);
	font-size: 14px;
	line-height: 1.7;
}

.contact-details a {
	text-decoration: none;
}

.site-footer__heading {
	margin-bottom: 16px;
	color: var(--aq-neutral-600);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.site-footer__link {
	display: block;
	color: var(--aq-neutral-800);
	font-size: 14px;
	text-decoration: none;
}

.site-footer__link:hover {
	color: var(--aq-primary);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: clamp(20px, 2.2vw, 30px);
	color: var(--aq-neutral-600);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.site-footer__legal-link,
.site-footer__legal-link:hover {
	display: block;
	color: var(--aq-neutral-600);
	text-decoration: none;
}

@media (max-width: 980px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	/* Footer links sit ~22px apart; give them room to be tapped. */
	.site-footer a {
		padding-block: 5px;
	}
}

@media (max-width: 520px) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 9. Global sections ------------------------------------------------------ */

/* Contact CTA (template-parts/global/sections/contact-cta.php) */
.contact-cta {
	--aq-split-cols: minmax(0, 1.25fr) minmax(0, .75fr);
	padding: clamp(64px, 8vw, 140px) var(--aq-gutter);
}

.contact-cta__layout {
	gap: clamp(32px, 5vw, 96px);
	align-items: end;
}

.contact-cta__title {
	max-width: 20ch;
	margin: 0;
	font-size: clamp(30px, 3.9vw, 60px);
	line-height: 1.08;
	letter-spacing: -.022em;
}

.contact-cta__text {
	max-width: 46ch;
	margin: clamp(24px, 2.8vw, 40px) 0 0;
	color: var(--aq-on-dark-body);
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.66;
}

.contact-cta__button {
	margin-top: clamp(30px, 3.4vw, 48px);
}

.contact-cta__details {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.8vw, 24px);
	font-size: 15px;
	line-height: 1.6;
}

.contact-cta__label {
	margin-bottom: 8px;
	color: var(--aq-accent);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.contact-cta__details a,
.contact-cta__details a:hover {
	color: var(--aq-white);
	text-decoration: none;
}

.contact-cta__address {
	color: var(--aq-on-dark-strong);
}

@media (max-width: 768px) {
	.contact-cta__details a {
		padding-block: 6px;
	}
}