﻿/* ============================================================
   CERTIFICATES.SCOT — MAIN STYLESHEET
   ============================================================ */

:root {
	/* Brand */
	--charcoal: #5f635d;
	--charcoal-dark: #383b37;
	--sage: #a6aba0;
	--peach: #f4bfb3;
	--green: #bfd59c;

	/* Tints */
	--charcoal-50: #f0f1f0;
	--sage-50: #f3f4f2;
	--sage-100: #e6e7e5;
	--peach-50: #fdf5f3;
	--peach-100: #f9e9e5;
	--green-50: #f4f8ef;
	--green-100: #e8f0dc;
	--green-dark: #4a6b38;
	--green-dark-hover: #3d5a2e;

	/* Semantic */
	--white: #ffffff;
	--text-primary: var(--charcoal-dark);
	--text-muted: var(--charcoal);
	--text-link: var(--green-dark);
	--text-link-hover: var(--green-dark-hover);
	--link-content-hover: var(--charcoal-dark);
	--border: color-mix(in srgb, var(--sage) 45%, var(--white));
	--focus-ring: rgba(74, 107, 56, 0.22);
	--facebook: #1877f2;

	/* Typography */
	--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 1.875rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;
	--leading-tight: 1.2;
	--leading-snug: 1.4;
	--leading-base: 1.65;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Spacing scale */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-24: 6rem;

	/* Layout */
	--container-max: 1120px;
	--container-narrow: 780px;
	--container-pad: 1.5rem;
	--header-h: 72px;

	/* Radius */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-xl: 16px;
	--r-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);

	/* Transitions */
	--t-fast: 140ms ease;
	--t-base: 220ms ease;
}

/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

body {
	font-family: var(--font);
	font-size: var(--text-base);
	line-height: var(--leading-base);
	color: var(--text-primary);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: var(--text-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--text-link-hover);
}

ul,
ol {
	padding-left: var(--sp-6);
}

address {
	font-style: normal;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--sp-4);
	z-index: 9999;
	padding: var(--sp-3) var(--sp-6);
	background: var(--charcoal);
	color: var(--white);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-radius: 0 0 var(--r-md) var(--r-md);
}

.skip-link:focus {
	top: 0;
}

:focus-visible {
	outline: 3px solid var(--green-dark);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.section {
	padding-block: var(--sp-16);
}

.section--alt {
	background-color: var(--sage-50);
}

.section-header {
	text-align: center;
	margin-bottom: var(--sp-12);
}

.section-header h2 {
	font-size: var(--text-3xl);
	font-weight: var(--fw-bold);
	color: var(--charcoal);
	line-height: var(--leading-tight);
	margin-bottom: var(--sp-3);
}

.section-header h2::after {
	content: '';
	display: block;
	width: 4.5rem;
	height: 4px;
	margin: var(--sp-3) auto 0;
	border-radius: var(--r-full);
	background: var(--green);
}

.section-header p {
	font-size: var(--text-md);
	color: var(--text-muted);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: var(--white);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 1px 4px rgba(56, 59, 55, 0.06);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	height: var(--header-h);
}

/* Logo */
.site-header__logo {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	flex-shrink: 0;
}

.site-header__logo-icon {
	display: flex;
	align-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.site-header__logo-icon img,
.site-header__logo-icon svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-header__logo-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.site-header__site-name {
	font-size: var(--text-xl);
	font-weight: var(--fw-bold);
	color: var(--charcoal);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* Primary nav */
.primary-nav {
	display: flex;
	align-items: center;
}

.primary-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	list-style: none;
	padding: 0;
	margin: 0;
}

.primary-nav__menu a {
	display: block;
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--text-md);
	font-weight: var(--fw-medium);
	color: var(--charcoal);
	text-decoration: none;
	border-radius: var(--r-md);
	transition: background var(--t-fast), color var(--t-fast);
	white-space: nowrap;
}

.primary-nav__menu a:hover,
.primary-nav__menu .current-menu-item>a,
.primary-nav__menu .current_page_item>a {
	background: var(--green-50);
	color: var(--charcoal-dark);
}

/* Mobile toggle */
.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: var(--sp-2);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background var(--t-fast);
}

.mobile-menu-toggle:hover {
	background: var(--sage-50);
}

.mobile-menu-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--charcoal);
	border-radius: var(--r-full);
	transition: transform var(--t-base), opacity var(--t-base);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
	background: var(--white);
	background-image: linear-gradient(180deg, var(--white) 0%, var(--green) 100%);
	border-bottom: 1px solid var(--border);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--sp-8);
	padding-block: var(--sp-16);
}

.hero__content {
	padding-right: var(--sp-4);
}

.hero__title {
	font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
	font-weight: var(--fw-semibold);
	color: var(--charcoal);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
	margin-bottom: var(--sp-5);
}

.hero__subtitle {
	font-size: var(--text-md);
	color: var(--text-muted);
	line-height: 1.7;
	margin-bottom: var(--sp-8);
}

.hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-4);
}

.hero__decoration {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--sp-8) var(--sp-6);
}

.hero__decoration img,
.hero__decoration svg {
	width: 100%;
	max-width: 400px;
	height: auto;
	display: block;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-6);
	font-family: var(--font);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	line-height: var(--leading-snug);
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.btn:active {
	transform: translateY(0);
}

.btn__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.btn--primary {
	background: var(--charcoal);
	color: var(--white);
}

.btn--primary:hover {
	background: var(--charcoal-dark);
	color: var(--white);
}

.btn--secondary {
	background: var(--white);
	color: var(--charcoal);
	border-color: var(--border);
}

.btn--secondary:hover {
	background: var(--peach-50);
	border-color: var(--sage);
	color: var(--charcoal);
	box-shadow: var(--shadow-sm);
}

.btn--large {
	padding: var(--sp-4) var(--sp-8);
	font-size: var(--text-md);
}

/* ============================================================
   WP CONTENT STYLES
   ============================================================ */
.wp-content h1,
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6 {
	color: var(--charcoal);
	font-weight: var(--fw-bold);
	line-height: var(--leading-tight);
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-4);
}

.wp-content>*:first-child {
	margin-top: 0;
}

.wp-content h1 {
	font-size: var(--text-3xl);
}

.wp-content h2 {
	font-size: var(--text-2xl);
}

.wp-content h3 {
	font-size: var(--text-xl);
}

.wp-content h4 {
	font-size: var(--text-lg);
}

.wp-content p {
	margin-bottom: var(--sp-5);
}

.wp-content ul,
.wp-content ol {
	margin-bottom: var(--sp-5);
}

.wp-content li {
	margin-bottom: var(--sp-2);
}

.wp-content a,
.entry-content a {
	color: var(--text-link);
	font-weight: var(--fw-medium);
}

.wp-content a:hover,
.entry-content a:hover {
	color: var(--link-content-hover);
	text-decoration: underline;
	text-decoration-thickness: max(2px, 0.1875rem, 0.12em);
	-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
	-webkit-text-decoration-skip: none;
	text-decoration-skip: none;
}

.wp-content a:focus-visible,
.entry-content a:focus-visible {
	color: var(--link-content-hover);
	text-decoration-thickness: max(2px, 0.1875rem, 0.12em);
	-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
}

.wp-content strong {
	font-weight: var(--fw-semibold);
}

.wp-content blockquote {
	border-left: 4px solid var(--green);
	padding: var(--sp-4) var(--sp-6);
	background: linear-gradient(90deg, var(--peach-50), var(--sage-50));
	border-radius: 0 var(--r-md) var(--r-md) 0;
	margin-block: var(--sp-6);
}

.wp-content blockquote p:last-child {
	margin-bottom: 0;
}

.wp-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sp-6);
}

.wp-content table th,
.wp-content table td {
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.wp-content table th {
	background: var(--sage-50);
	font-weight: var(--fw-semibold);
	color: var(--charcoal);
}

/* Notice / info box (for wp-content) */
.wp-content .notice,
.wp-content .wp-block-notice {
	background: var(--green-50);
	border-left: 4px solid var(--text-link);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	padding: var(--sp-4) var(--sp-6);
	margin-bottom: var(--sp-6);
}

/* ============================================================
   FEES SECTION
   ============================================================ */
.fees-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-6);
}

.fee-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	padding: var(--sp-8);
	box-shadow: var(--shadow-sm);
}

.fee-card--featured {
	border-color: var(--green);
	border-width: 3px;
	/* background: var(--green-50); */
}

.fee-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.fee-card__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	flex-shrink: 0;
	padding: var(--sp-2) var(--sp-4);
	background: var(--green-dark);
	color: var(--white);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	border-radius: var(--r-full);
	white-space: nowrap;
	line-height: 1;
}

.fee-card__badge-icon {
	display: flex;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.fee-card__badge-icon svg {
	width: 100%;
	height: 100%;
}

.fee-card__header h3 {
	font-size: var(--text-xl);
	font-weight: var(--fw-bold);
	color: var(--charcoal);
	line-height: var(--leading-snug);
}

.fee-card__price {
	font-size: var(--text-3xl);
	font-weight: var(--fw-bold);
	color: var(--charcoal);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: var(--sp-2);
}

.fee-card__desc {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-bottom: var(--sp-5);
}

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

.fee-card__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	padding: var(--sp-2) 0;
	font-size: var(--text-sm);
	color: var(--text-primary);
}

.fee-card__hours-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--sp-4);
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--border);
}

.fee-card__hours-table th {
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	color: var(--text-primary);
	text-align: left;
	background: var(--white);
	border-bottom: 1px solid var(--border);
	letter-spacing: 0.05em;
}

.fee-card__hours-table th:last-child {
	text-align: right;
}

.fee-card__hours-table td {
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--text-primary);
	border-bottom: 1px solid var(--border);
	background: var(--white);
}

.fee-card__hours-table tr:last-child td {
	border-bottom: none;
}

.fee-card__hours-table td:last-child {
	text-align: right;
	color: var(--charcoal);
	font-weight: var(--fw-semibold);
}

.fee-card__list li::before {
	content: '✓';
	color: var(--charcoal);
	font-weight: var(--fw-bold);
	flex-shrink: 0;
	line-height: 1.6;
}

.fee-card--featured .fee-card__list li::before {
	color: var(--text-link);
}

.fee-card__postage {
	margin-bottom: var(--sp-4);
	padding-top: var(--sp-4);
}

.postage-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-3) 0;
	font-size: var(--text-sm);
	border-bottom: 1px solid var(--border);
}

.postage-row:first-child {
	border-top: 1px solid var(--border);
}

.postage-row strong {
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	color: var(--charcoal);
}

/* ============================================================
   HOW TO ORDER
   ============================================================ */
.section.how-section {
	background-color: var(--white);
	padding-bottom: var(--sp-24);
}

.steps-grid {
	--step-marker-size: 3rem;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-8);
	margin-top: var(--sp-12);
}

.steps-grid::before {
	content: '';
	position: absolute;
	z-index: 0;
	background: var(--sage);
}

.step {
	position: relative;
	z-index: 1;
	flex: 1;
	max-width: 20rem;
	text-align: center;
	padding: 0 var(--sp-2);
}

.step__number {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--step-marker-size);
	height: var(--step-marker-size);
	background: var(--green-50);
	border: 2px solid var(--green);
	color: var(--charcoal-dark);
	font-size: var(--text-lg);
	font-weight: var(--fw-bold);
	border-radius: var(--r-full);
	margin: 0 auto var(--sp-5);
	box-shadow: var(--shadow-sm);
}

.step__title {
	font-size: var(--text-lg);
	font-weight: var(--fw-bold);
	color: var(--charcoal);
	margin-bottom: var(--sp-3);
}

.step__desc {
	font-size: var(--text-sm);
	color: var(--text-muted);
	line-height: var(--leading-base);
}

/* Desktop — one continuous horizontal line through step centres */
@media (min-width: 768px) {
	.steps-grid::before {
		top: calc(var(--step-marker-size) / 2);
		left: calc(100% / 6);
		right: calc(100% / 6);
		height: 2px;
	}
}

/* Mobile — one continuous vertical line through step centres */
@media (max-width: 767px) {
	.steps-grid {
		flex-direction: column;
		align-items: center;
		gap: var(--sp-10);
		max-width: 24rem;
		margin-inline: auto;
		margin-bottom: var(--sp-8);
	}

	.step {
		max-width: 100%;
		width: 100%;
	}

	.steps-grid::before {
		display: none;
	}
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
	background-color: var(--sage-50);
	border-top: 1px solid var(--border);
	padding: var(--sp-16) 0;
}

.cta-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-10);
	flex-wrap: wrap;
}

.cta-banner__text h2 {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--charcoal-dark);
	line-height: var(--leading-tight);
	margin-bottom: var(--sp-3);
}

.cta-banner__text p {
	font-size: var(--text-md);
	color: var(--charcoal);
	max-width: 600px;
	line-height: var(--leading-base);
}

.cta-banner__text strong {
	color: var(--charcoal-dark);
	font-weight: var(--fw-semibold);
}

.cta-banner__action {
	flex-shrink: 0;
	text-align: center;
}

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero {
	background: var(--white);
	background-image: linear-gradient(180deg, var(--white) 0%, var(--green) 100%);
	border-bottom: 1px solid var(--border);
	padding: var(--sp-10) 0 var(--sp-12);
	text-align: left;
}

.page-hero .container {
	max-width: var(--container-max);
}

.page-hero__content {
	max-width: var(--container-narrow);
}

.page-hero__title {
	font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
	font-weight: var(--fw-bold);
	color: var(--charcoal-dark);
	line-height: var(--leading-tight);
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 48rem;
}

.page-hero__intro {
	font-size: var(--text-md);
	color: var(--text-muted);
	line-height: 1.7;
	margin: var(--sp-4) 0 0;
	max-width: 640px;
}

.page-content-wrap {
	padding-block: var(--sp-16);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	position: relative;
	background: var(--white);
	border-top: 1px solid var(--border);
	color: var(--text-primary);
}

.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	padding-top: var(--sp-16);
}

/* Grid */
.site-footer__grid {
	display: grid;
	grid-template-columns: 3fr 2fr 1fr;
	gap: var(--sp-10);
	padding-bottom: var(--sp-10);
}

/* Col 1 – brand */
.site-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	margin-bottom: var(--sp-5);
}

.site-footer__badge {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.site-footer__brand-name {
	font-size: var(--text-xl);
	font-weight: var(--fw-bold);
	color: var(--charcoal);
	line-height: 1.2;
}

.site-footer__desc {
	font-size: var(--text-sm);
	color: var(--charcoal);
	line-height: 1.7;
	margin-top: var(--sp-5);
	margin-bottom: var(--sp-5);
	max-width: 420px;
}

.site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	transition: color var(--t-fast);
}

.site-footer__social svg {
	flex-shrink: 0;
	color: var(--facebook);
}

.site-footer__social-label {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--text-primary);
	line-height: 1.4;
}

.site-footer__social:hover .site-footer__social-label {
	color: var(--text-link);
}

/* Col 2 – contact */
.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.site-footer__contact-icon {
	display: flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--charcoal);
}

.site-footer__contact-icon svg {
	width: 100%;
	height: 100%;
}

.site-footer__contact-item a,
.site-footer__contact-item address {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--text-primary);
	text-decoration: none;
	font-style: normal;
	line-height: 1.6;
	transition: color var(--t-fast);
}

.site-footer__contact-item a:hover {
	color: var(--text-link);
}

/* Col 3 – partner logos */
.site-footer__col--partners {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: var(--sp-2);
}

.site-footer__partner-link {
	display: inline-block;
	text-decoration: none;
	transition: opacity var(--t-fast);
}

.site-footer__partner-link:hover {
	opacity: 0.75;
}

.site-footer__partner-link img {
	display: block;
}

/* Bottom bar */
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-5) 0 var(--sp-10);
	border-top: 1px solid var(--border);
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.site-footer__bottom>p {
	font-size: var(--text-sm);
	color: var(--charcoal);
	margin: 0;
}

.site-footer__bottom nav {
	display: flex;
	gap: var(--sp-5);
}

.site-footer__bottom nav a {
	font-size: var(--text-sm);
	color: var(--charcoal);
	text-decoration: none;
	transition: color var(--t-fast);
}

.site-footer__bottom nav a:hover {
	color: var(--text-primary);
}

/* ============================================================
   CONTACT FORM 7
   ============================================================ */

/* Reset CF7 defaults */
.wpcf7 {
	width: 100%;
}

.wpcf7 br {
	display: none;
}

/* Form layout */
.wpcf7-form {
	display: grid;
	gap: var(--sp-5);
}

/* Field groups — wrap each label+input pair in a <p> in CF7 */
.wpcf7-form>p {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
}

/* Field labels */
.wpcf7-form label {
	font-size: var(--text-md);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

/* CF7 puts the label text directly inside <p> before the control */
.wpcf7-form>p {
	font-size: var(--text-md);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.wpcf7-form>p .wpcf7-form-control-wrap {
	font-weight: var(--fw-normal);
	margin-top: var(--sp-1);
}

/* Checkbox groups (horizontal) */
.wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-6);
}

/* Radio groups (vertical stack, larger controls) */
.wpcf7-radio {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--sp-3);
}

.wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-weight: var(--fw-normal);
}

.wpcf7-radio .wpcf7-list-item {
	display: flex;
	width: 100%;
	gap: var(--sp-3);
	min-height: 2.75rem;
	padding-block: var(--sp-1);
}

.wpcf7-list-item-label {
	font-size: var(--text-base);
	font-weight: var(--fw-normal);
	color: var(--text-primary);
	margin: 0;
	cursor: pointer;
}

.wpcf7-radio .wpcf7-list-item-label {
	font-size: var(--text-md);
	line-height: var(--leading-snug);
}

.wpcf7-list-item input[type="radio"],
.wpcf7-list-item input[type="checkbox"] {
	order: -1;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	accent-color: var(--text-link);
	cursor: pointer;
	appearance: auto;
	-webkit-appearance: auto;
}

.wpcf7-list-item input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
}

.wpcf7-list-item input[type="radio"] {
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	min-height: 1.5rem;
}

/* All inputs, selects, textareas */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	font-family: var(--font);
	font-size: var(--text-base);
	color: var(--text-primary);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
	appearance: none;
	-webkit-appearance: none;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--text-link);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
	border-color: #d0342c;
	box-shadow: 0 0 0 3px rgba(208, 52, 44, 0.1);
}

/* Textarea */
.wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
	line-height: var(--leading-base);
}

/* Select – custom arrow */
.wpcf7-form select {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235f635d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-3) center;
	background-size: 16px;
	padding-right: var(--sp-10);
}

/* Submit button */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-3) var(--sp-8);
	font-family: var(--font);
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	color: var(--white);
	background: var(--charcoal);
	border: 2px solid var(--charcoal);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
	width: auto;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
	background: var(--charcoal-dark);
	border-color: var(--charcoal-dark);
	box-shadow: 0 4px 14px rgba(56, 59, 55, 0.25);
	transform: translateY(-1px);
}

.wpcf7-form input[type="submit"]:active {
	transform: translateY(0);
}

/* Loading spinner */
.wpcf7-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--sage-100);
	border-top-color: var(--text-link);
	border-radius: 50%;
	animation: cf7-spin 0.7s linear infinite;
	margin-left: var(--sp-3);
	vertical-align: middle;
	visibility: hidden;
}

.wpcf7-form.submitting .wpcf7-spinner {
	visibility: visible;
}

@keyframes cf7-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Validation error tip (below field) */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: #d0342c;
}

/* Response output (success / error banner) */
.wpcf7-response-output {
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	border: 1px solid transparent;
	margin-top: var(--sp-2);
}

.wpcf7-form.sent .wpcf7-response-output {
	background: var(--sage-50);
	border-color: var(--sage);
	color: var(--charcoal);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
	background: #fff4f4;
	border-color: #f1a8a5;
	color: #8b1a17;
}

.wpcf7-form.spam .wpcf7-response-output {
	background: #fff9ec;
	border-color: #f5cc80;
	color: #7a4f00;
}

.wpcf7-form.failed .wpcf7-response-output {
	background: #fff4f4;
	border-color: #f1a8a5;
	color: #8b1a17;
}

/* Two-column grid for wider forms (opt-in via CF7 HTML class) */
.wpcf7-form.cols-2 {
	grid-template-columns: 1fr 1fr;
}

.wpcf7-form.cols-2>p:has(textarea),
.wpcf7-form.cols-2>p:last-of-type,
.wpcf7-form.cols-2>.wpcf7-response-output {
	grid-column: 1 / -1;
}

/* ============================================================
   404 PAGE
   ============================================================ */
.not-found-page {
	padding: var(--sp-24) 0;
}

.not-found-page__inner {
	text-align: center;
	max-width: 520px;
	margin-inline: auto;
}

.not-found-page__code {
	font-size: 7rem;
	font-weight: var(--fw-bold);
	color: var(--sage-100);
	line-height: 1;
	letter-spacing: -0.04em;
	margin-bottom: var(--sp-4);
}

.not-found-page h1 {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--charcoal);
	margin-bottom: var(--sp-4);
}

.not-found-page p {
	color: var(--text-muted);
	font-size: var(--text-md);
	margin-bottom: var(--sp-8);
}

.not-found-page__actions {
	display: flex;
	justify-content: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
	.fees-grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-8);
	}

	.site-footer__col--partners {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.hero__inner {
		grid-template-columns: 1fr;
	}

	.hero__decoration {
		display: none;
	}

}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
	:root {
		--container-pad: 1rem;
		--header-h: 64px;
	}

	/* Mobile nav toggle */
	.mobile-menu-toggle {
		display: flex;
	}

	.primary-nav {
		display: none;
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		background: var(--white);
		border-top: 1px solid var(--border);
		box-shadow: 0 12px 24px rgba(56, 59, 55, 0.08);
		padding: var(--sp-3) var(--container-pad) var(--sp-5);
		z-index: 199;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		max-height: calc(100dvh - var(--header-h));
	}

	.primary-nav.is-open {
		display: flex;
	}

	.primary-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-1);
		width: 100%;
	}

	.primary-nav__menu a {
		padding: var(--sp-3) var(--sp-4);
		font-size: var(--text-base);
	}

	/* Hero */
	.hero {
		padding: var(--sp-12) 0 var(--sp-16);
	}

	/* Fees */
	.fees-grid {
		grid-template-columns: 1fr;
	}

	/* CTA banner */
	.cta-banner__inner {
		flex-direction: column;
		text-align: center;
	}

	.cta-banner__text p {
		max-width: 100%;
	}

	/* Footer */
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	.site-footer__col--partners {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sp-4);
	}

	.site-footer__desc {
		max-width: 100%;
	}

	/* Section spacing */
	.section {
		padding-block: var(--sp-12);
	}

	.section.how-section {
		padding-bottom: var(--sp-20);
	}

	.page-content-wrap {
		padding-block: var(--sp-12);
	}
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {

	.hero__inner {
		gap: var(--sp-2);
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .btn {
		text-align: center;
		justify-content: center;
	}

	.btn--large {
		padding: var(--sp-4) var(--sp-6);
	}

	.not-found-page__code {
		font-size: 5rem;
	}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {

	.site-header,
	.cta-banner,
	.site-footer {
		display: none;
	}

	body {
		color: #000;
		background: #fff;
	}

	.hero {
		border-bottom: none;
	}

	.hero__decoration {
		display: none;
	}
}