/*
Theme Name: BlueLease
Theme URI: https://bluelease.ie
Author: Little Inferno Digital
Author URI: https://littleinferno.co.uk
Description: Bespoke, page-builder-free theme for BlueLease — an Irish aircraft leasing platform backed by Asterion Industrial Partners. Built to the BlueLease Brand Manual (Roboto + Spectral, Pantone 279 blue / Pantone 375 green) with a clean, premium aviation-finance aesthetic.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
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: bluelease
*/

/* =========================================================================
   1. Design tokens (CSS custom properties)
   ========================================================================= */
:root {
	/* --- Brand: primary palette (Brand Manual p.10) --- */
	--bl-blue:        #3272C4; /* Azul BlueLease — Pantone 279 */
	--bl-green:       #84BD00; /* Verde BlueLease — Pantone 375 */
	--bl-white:       #FFFFFF;

	/* Blue tonal variations */
	--bl-blue-80:     #5B8FD0;
	--bl-blue-60:     #84ABDC;
	--bl-blue-40:     #ADC7E7;
	--bl-blue-20:     #D6E3F3;
	--bl-blue-dark:   #285c9c; /* shade for hover/contrast */

	/* Green tonal variations */
	--bl-green-80:    #9DCA33;
	--bl-green-60:    #B5D766;
	--bl-green-40:    #CEE599;
	--bl-green-20:    #E6F2CC;
	--bl-green-dark:  #6fa000; /* shade for hover/contrast */

	/* --- Brand: secondary palette (Brand Manual p.11) --- */
	--bl-orange:      #FF7900;
	--bl-red:         #C8102E;
	--bl-purple:      #58427C;
	--bl-sky:         #7AB4D2;
	--bl-grey:        #4F5658; /* Gris BlueLease — Pantone 425 */

	/* --- Neutral system --- */
	--bl-ink:         #20272b; /* near-black text, warmer than pure black */
	--bl-body:        #3c454a; /* default body copy */
	--bl-muted:       #6b757a;
	--bl-line:        #e4e8ea;
	--bl-bg:          #ffffff;
	--bl-bg-alt:      #f5f7f8; /* light section background */
	--bl-bg-deep:     #1c2b3a; /* deep blue-grey for dark sections */

	/* --- Typography --- */
	--font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--font-body:    'Spectral', Georgia, 'Times New Roman', serif;
	--font-ui:      'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	--fs-eyebrow:  0.78rem;
	--fs-base:     1.0625rem;
	--fs-lead:     1.25rem;
	--fs-h1:       clamp(2.4rem, 6vw, 4rem);
	--fs-h2:       clamp(1.75rem, 4vw, 2.375rem);
	--fs-h3:       clamp(1.3rem, 2.2vw, 1.6rem);
	--fs-stat:     clamp(2.125rem, 4vw, 2.875rem);

	--lh-tight:    1.1;
	--lh-snug:     1.3;
	--lh-body:     1.7;

	/* --- Spacing scale --- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs:  0.75rem;
	--space-sm:  1rem;
	--space-md:  1.5rem;
	--space-lg:  2.5rem;
	--space-xl:  4rem;
	--space-2xl: 6rem;
	--space-3xl: 6.5rem;

	/* --- Layout --- */
	--container:      1200px;
	--container-wide: 1400px;
	--container-text: 760px;
	--gutter:         clamp(1.25rem, 5vw, 4rem);
	--header-h:       80px;
	--radius:         4px;
	--radius-lg:      10px;

	--shadow-sm: 0 1px 3px rgba(28, 43, 58, 0.08);
	--shadow-md: 0 10px 30px rgba(28, 43, 58, 0.10);
	--shadow-lg: 0 24px 60px rgba(28, 43, 58, 0.16);

	--ease:       cubic-bezier(0.22, 1, 0.36, 1);
	--transition: 0.3s var(--ease);
}

/* =========================================================================
   2. Reset & base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--bl-body);
	background: var(--bl-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--bl-ink);
	font-weight: 500;
	line-height: var(--lh-snug);
	margin: 0 0 var(--space-md);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); font-weight: 300; line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 300; }
h3 { font-size: var(--fs-h3); font-weight: 500; }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--bl-blue);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover { color: var(--bl-green-dark); }

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

ul, ol { margin: 0 0 var(--space-md); padding-left: 1.2em; }

strong { font-weight: 600; color: var(--bl-ink); }

:focus-visible {
	outline: 3px solid var(--bl-green);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 1000;
	background: var(--bl-blue);
	color: #fff;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-ui);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); color: #fff; }

/* =========================================================================
   3. Layout primitives
   ========================================================================= */
/* .container is box-sizing: border-box, so padding-inline: var(--gutter) is
   deducted FROM the max-width cap rather than added outside it. The
   calc() below adds the gutter back on both sides so the interior content
   box resolves to --container (1200px) exactly, which is what Figma
   measures at x=120 in all five desktop section frames (15:2, 16:2, 17:2,
   18:2, 19:2 — see 04-GAP-EVIDENCE.md Finding A). Matches .header-inner's
   existing identical compensation. D-18. */
.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
/* .container--wide class rule removed by D-06 (Phase 5, plan 05-09): the
   footer was its only consumer and now sits on the shared .container. The
   --container-wide token survives above (line 85) because .consent__inner
   still consumes it directly. WR-26's .container--text half below is
   deliberately untouched — deferred to Phase 6 by D-07. */
.container--text { max-width: var(--container-text); }

.section {
	padding-block: var(--space-xl);
	position: relative;
}
.section--alt { background: var(--bl-bg-alt); }
.section--deep { background: var(--bl-bg-deep); color: rgba(255,255,255,0.82); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }

@media (min-width: 900px) {
	.section { padding-block: var(--space-3xl); }
}

/* Section header (kicker index + heading + intro) */
.section-head { max-width: 820px; margin-bottom: var(--space-xl); }
.section-head--center { margin-inline: auto; text-align: center; }

.kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bl-green-dark);
	margin-bottom: var(--space-sm);
}
.kicker__num { color: var(--bl-blue); }
.kicker::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--bl-green);
}
.section-head--center .kicker { justify-content: center; }

.lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--bl-body);
}

/* Flight-path divider graphic (recurring brand motif) */
.bl-flightpath {
	display: flex;
	align-items: center;
	gap: 0;
	color: var(--bl-green);
	margin: var(--space-lg) 0;
}
.bl-flightpath__line {
	flex: 1;
	height: 2px;
	background: linear-gradient(90deg, var(--bl-green-40), var(--bl-green));
}
.bl-flightpath__plane { flex: none; margin-left: -2px; }

/* =========================================================================
   4. Buttons
   ========================================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.9em 1.8em;
	border-radius: var(--radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all var(--transition);
	text-align: center;
	line-height: 1.2;
}
.btn--primary { background: var(--bl-blue); color: #fff; border-color: var(--bl-blue); }
.btn--primary:hover { background: var(--bl-green); border-color: var(--bl-green); color: #fff; transform: translateY(-2px); }

.btn--green { background: var(--bl-green); color: #fff; border-color: var(--bl-green); }
.btn--green:hover { background: var(--bl-green-dark); border-color: var(--bl-green-dark); color: #fff; transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--bl-blue); border-color: var(--bl-blue-40); }
.btn--ghost:hover { border-color: var(--bl-green); color: var(--bl-green-dark); }

.btn--on-dark { background: var(--bl-green); color: #fff; border-color: var(--bl-green); }
.btn--on-dark:hover { background: #fff; color: var(--bl-bg-deep); border-color: #fff; }

.btn__arrow { width: 1em; height: 1em; transition: transform var(--transition); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* =========================================================================
   5. Header / navigation
   ========================================================================= */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--bl-line);
	transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Transparent over hero on the one-page front page */
.is-onepage .site-header.is-top {
	background: transparent;
	border-color: transparent;
}
.is-onepage .site-header.is-top .nav-menu a { color: rgba(255,255,255,0.92); }
.is-onepage .site-header.is-top .nav-menu a:hover { color: #fff; }
.is-onepage .site-header.is-top .nav-toggle__bar { background: #fff; }

.header-inner {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
}

.site-logo { display: inline-flex; align-items: center; }
.site-logo--img { width: 178px; height: auto; }
.site-logo .custom-logo { height: 34px; width: auto; }

/*
 * AMB-12: two wordmark-colour variants, toggled by display, keyed on the
 * exact same selector that drives the header background above
 * (.is-onepage .site-header.is-top:not(.menu-open)) rather than
 * .is-scrolled. main.js sets is-scrolled at y>8 while is-top persists
 * until y>790 (the hero's height minus its threshold offset) — keying on
 * is-scrolled would turn the wordmark blue while the header is still
 * transparent over the dark hero photo, a new bug. Binding wordmark
 * colour to the identical condition that governs the background is what
 * prevents the two from ever drifting apart again. Default (solid header:
 * scrolled, mobile menu open, and every non-one-page template) shows the
 * blue-wordmark variant; the one transparent-over-hero state overrides
 * back to the white-wordmark variant.
 */
.site-logo--on-dark { display: none; }
.site-logo--on-light { display: block; }
.is-onepage .site-header.is-top:not(.menu-open) .site-logo--on-dark { display: block; }
.is-onepage .site-header.is-top:not(.menu-open) .site-logo--on-light { display: none; }

.main-nav { display: flex; align-items: center; gap: var(--space-lg); }
.nav-menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.2rem);
	list-style: none;
	margin: 0; padding: 0;
}
.nav-menu a {
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--bl-ink);
	position: relative;
	padding-block: 0.5rem;
}
.nav-menu a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--bl-green);
	transition: width var(--transition);
}
.nav-menu a:hover::after,
.nav-menu .current-menu-item > a::after,
.nav-menu li.is-active > a::after { width: 100%; }

/* Mobile nav toggle */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 44px; height: 44px;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.nav-toggle__bar {
	display: block;
	width: 26px; height: 2px;
	background: var(--bl-ink);
	transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	.main-nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--bl-line);
		box-shadow: var(--shadow-md);
		padding: var(--space-sm) var(--gutter) var(--space-lg);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	}
	.main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
	.nav-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.nav-menu li { border-bottom: 1px solid var(--bl-line); }
	.nav-menu a { display: block; padding: var(--space-sm) 0; color: var(--bl-ink) !important; }
	.nav-menu a::after { display: none; }
	.main-nav .btn { margin-top: var(--space-md); justify-content: center; }
	/* Force solid header colours when menu open over hero */
	.is-onepage .site-header.is-top.menu-open { background: rgba(255,255,255,0.98); }
	.is-onepage .site-header.is-top.menu-open .nav-toggle__bar { background: var(--bl-ink); }
	.site-logo--img { width: 152px; height: auto; }
}

/* =========================================================================
   6. Hero
   ========================================================================= */
.hero {
	position: relative;
	min-height: min(92vh, 880px);
	display: flex;
	align-items: center;
	color: #fff;
	padding-top: var(--header-h);
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(28,43,58,0.30) 0%, rgba(28,43,58,0.55) 55%, rgba(28,43,58,0.72) 100%),
		linear-gradient(90deg, rgba(40,92,156,0.55) 0%, rgba(40,92,156,0.05) 60%);
}
.hero__inner { max-width: 760px; padding-block: var(--space-2xl); }
.hero h1 { color: #fff; margin-bottom: var(--space-md); text-wrap: balance; line-height: 1.05; }
.hero__sub {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: rgba(255,255,255,0.92);
	max-width: 620px;
	margin-bottom: var(--space-lg);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__explore {
	display: inline-block;
	color: #fff;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.3px;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding-bottom: 9px;
}
.hero__explore:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =========================================================================
   7. Generic prose / two-column intros
   ========================================================================= */
.prose p { margin-bottom: var(--space-md); }
.prose--lead p:first-child { font-size: var(--fs-lead); color: var(--bl-ink); }

.split {
	display: grid;
	gap: var(--space-xl);
}
@media (min-width: 900px) {
	.split { grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
	.split--40-60 { grid-template-columns: 4fr 6fr; }
}

.media-frame {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.media-frame--tall img { aspect-ratio: 3 / 4; }
@media (max-width: 899.98px) {
	.media-frame::after {
		content: "";
		position: absolute; left: 0; bottom: 0;
		width: 64px; height: 5px; background: var(--bl-green);
	}
}

/* Callout card (e.g. Ireland note) */
.callout {
	background: #fff;
	border: 1px solid var(--bl-line);
	border-left: 5px solid var(--bl-green);
	border-radius: var(--radius);
	padding: var(--space-lg);
	box-shadow: var(--shadow-sm);
}
.section--alt .callout { background: #fff; }

/* =========================================================================
   8. Stats row
   ========================================================================= */
.stats {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
	margin-top: var(--space-xl);
}
@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat {
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--bl-line);
	border-top: 4px solid var(--bl-green);
	border-radius: var(--radius);
}
.stat__value {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: var(--fs-stat);
	line-height: 1;
	color: var(--bl-blue);
	margin-bottom: var(--space-2xs);
}
.stat__label { font-family: var(--font-ui); font-size: 0.95rem; color: var(--bl-muted); line-height: 1.4; }

/* =========================================================================
   10. Why BlueLease — feature cards
   ========================================================================= */
.cards { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-top: var(--space-xl); }
@media (min-width: 800px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
	background: #fff;
	border: 1px solid var(--bl-line);
	border-radius: var(--radius-lg);
	padding: 2rem;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--bl-green-40); }
.card__icon {
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--bl-green);
	color: #fff;
	margin-bottom: var(--space-sm);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: var(--space-sm); }
.card p { color: var(--bl-body); margin: 0; }

/* #why-scoped mobile rhythm (WHY-M-07/M-08) — do not extend to #about; no matching audit row there. */
@media (max-width: 899.98px) {
	#why .split { gap: 18px; }
	/* Inter-card gap is 14px (measured directly on Figma node 26:2, D-13 handoff item 6) — NOT
	   the 18px the rest of the mobile stack uses; see 03-05-SUMMARY.md for the UI-SPEC supersession. */
	#why .cards { margin-top: 18px; gap: 14px; }
	#why .prose--lead p:first-child { font-size: inherit; color: inherit; }
}

/* =========================================================================
   11. Team
   ========================================================================= */
.team-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	margin-top: var(--space-xl);
}
@media (min-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 279px)); gap: 28px; } }

/* #team-scoped overrides: TEAM-D-10 / TEAM-M-10 measured rhythm, do not edit the shared .section-head/.lead rules above */
#team .section-head { margin-bottom: 0; }
#team .team-grid { margin-top: 24px; }
@media (min-width: 900px) {
	#team .team-grid { margin-top: 44px; }
}
@media (max-width: 899.98px) {
	#team .lead { font-size: 17px; }
}

.member { display: flex; flex-direction: column; }
.member__photo {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 279 / 360;
	background: var(--bl-blue-20);
	margin-bottom: var(--space-xs);
}
/* The four team photos are alpha cut-out portraits (34.7-36.2% transparent per member,
   04-GAP-EVIDENCE.md Finding B) — the --bl-blue-20 backdrop shows THROUGH that transparency,
   it is not a letterbox beside the image. object-fit: contain is correct precisely because it
   never crops that cut-out; do not "fix" back to cover (D-11, D-20). This depends on the
   shipped file staying in an alpha-bearing single-file format (WebP, D-12) — a flattened JPEG
   destroys the alpha and paints solid black/white instead of the backdrop. Enforced by
   verify.sh --assets's alpha/corner-pixel/format gates and --team's renderScale <= 1.0 gate
   (T-04-14).
   object-position is bottom center, not top (owner rejection 2026-09-12, plan 04-11): three of
   the four photos (John, William, Francisco) are width-bound under contain — their rendered
   height is shorter than the 360px box — so whichever edge object-position anchors to determines
   where the leftover backdrop slack lands. `top center` left that slack at the bottom, floating
   the photo away from the box's bottom edge (and the always-visible accent bar that sits there);
   Figma's own composited team frame (18:2) shows every photo flush with the accent bar, with the
   backdrop only ever visible at the sides/top. `bottom center` puts the slack at the top instead,
   which is both what the owner asked for and what Figma shows. Eithne is height-bound (rendered
   height === box height), so this value never affects her. Enforced by --team's photoBottomGap
   gate. */
.member__photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; transition: transform 0.6s var(--ease); }
.member:hover .member__photo img { transform: scale(1.04); }
/* Accent bar is always visible at rest per D-11 / TEAM-D-07 — do not reinstate a hover gate. */
.member__photo::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 100%; height: 4px; background: var(--bl-green);
}
.member__photo--placeholder { display: grid; place-items: center; color: var(--bl-blue-60); }
.member__photo--placeholder svg { width: 40%; height: auto; }

.member__name { font-family: var(--font-heading); font-weight: 500; font-size: 19px; color: var(--bl-ink); margin: 0 0 var(--space-xs); }
.member__role { font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 0.69px; text-transform: uppercase; color: var(--bl-green-dark); margin-bottom: var(--space-xs); }
.member__bio { font-size: 15.5px; line-height: 1.65; color: var(--bl-body); }

/* Bio truncation with accessible expand */
.member__bio { display: -webkit-box; -webkit-line-clamp: 11; -webkit-box-orient: vertical; overflow: hidden; }
.member.is-expanded .member__bio { display: block; }
.member__more {
	margin-top: var(--space-xs);
	background: none; border: none; padding: 0;
	font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500;
	color: var(--bl-blue); cursor: pointer;
}
.member__more:hover { color: var(--bl-green-dark); }

/* =========================================================================
   12. Contact
   ========================================================================= */
.contact-grid { display: grid; gap: var(--space-xl); }
/* CONTACT-D-07 (19:9 body row / 19:10 details column / 19:20 form card): 420px fixed : flex-1 (minmax(0, 1fr)) within the 1200px band, gap 64px -- at .container's full 1200px content width, 420 + 64 + 716 = 1200, matching the Figma ratio exactly. The second track is a genuine flexible remainder, not a second fixed 716px column: 05-REVIEW.md CR-01 found the literal "420px 716px" pair overflows .container below ~1328px viewport width (.container's own gutter-compensation calc() only reaches its full 1200px interior at that width), clipped invisibly by body{overflow-x:hidden}. Fixed per E-05-05 (05-DISCUSSION-LOG.md), which partially revokes E-05-02 ruling 2 -- minmax(0, 1fr) degrades sensibly at all widths while still resolving to exactly 716px once the container reaches 1200px. */
@media (min-width: 900px) { .contact-grid { grid-template-columns: 420px minmax(0, 1fr); gap: var(--space-xl); align-items: start; } }

.contact-details { font-size: 1.05rem; }
.contact-details dl { margin: 0; }
.contact-block { margin-bottom: var(--space-lg); }
.contact-block__label { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bl-green-dark); margin-bottom: var(--space-2xs); }
.contact-block address { font-style: normal; line-height: 1.6; color: var(--bl-ink); }
.contact-block a { color: var(--bl-blue); }
.section--deep .contact-block__label { color: var(--bl-green); }
.section--deep .contact-block address, .section--deep .contact-details { color: rgba(255,255,255,0.9); }
.section--deep .contact-block a { color: #fff; text-decoration: underline; text-decoration-color: var(--bl-green); }

/* #contact-scoped overrides: D-20 measured rhythm (19:3/19:9/19:10, 28:2/28:8/28:12), do not edit the shared .section-head/.contact-block rules above */
#contact .section-head { margin-bottom: 28px; }
#contact .contact-block { margin-bottom: 28px; }
@media (min-width: 900px) {
	#contact .section-head { margin-bottom: 44px; }
	#contact .contact-block { margin-bottom: 36px; }
}

@media (max-width: 899.98px) {
	/* CONTACT-M-08 (Phase 6, plan 06-09): Figma 28:7, lh 1.75. Deferred by
	   owner Sign-off Ruling 2 (2026-09-19, 05-PARITY-LEDGER.md) explicitly
	   *to* this phase's typography pass. Scoped to #contact .lead, not the
	   shared bare .lead rule above, because 404.php also consumes that one. */
	#contact .lead { font-size: 17px; line-height: 1.75; }
	#contact { padding-bottom: 56px; }
}

/* Form */
.contact-form { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--shadow-md); }
.form-row { margin-bottom: var(--space-md); }
.form-grid { display: grid; gap: var(--space-md); }
@media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-label { display: block; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; color: var(--bl-ink); margin-bottom: var(--space-2xs); }
.form-label .req { color: var(--bl-red); }
.form-control {
	width: 100%;
	font-family: var(--font-ui);
	font-size: 1rem;
	color: var(--bl-ink);
	padding: 0.8em 1em;
	border: 1px solid var(--bl-line);
	border-radius: var(--radius);
	background: #fdfdfe;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline: none; border-color: var(--bl-blue); box-shadow: 0 0 0 3px var(--bl-blue-20); background: #fff; }
textarea.form-control { min-height: 128px; resize: vertical; }
.form-hp { position: absolute; left: -5000px; } /* honeypot */
.form-actions { margin-top: var(--space-sm); }
.form-note { font-family: var(--font-ui); font-size: 0.8rem; color: var(--bl-muted); margin-top: var(--space-sm); }

@media (max-width: 559.98px) {
	.contact-form .form-actions .btn { width: 100%; justify-content: center; }
	textarea.form-control { min-height: 120px; }
}

.form-message { font-family: var(--font-ui); font-size: 0.95rem; padding: var(--space-sm) var(--space-md); border-radius: var(--radius); margin-bottom: var(--space-md); display: none; }
.form-message.is-visible { display: block; }
.form-message--success { background: var(--bl-green-20); border: 1px solid var(--bl-green-40); color: var(--bl-green-dark); }
.form-message--error { background: #fdecee; border: 1px solid #f5c2c9; color: var(--bl-red); }

/* =========================================================================
   13. Footer
   ========================================================================= */
/* D-19 (Phase 5, plan 05-11): border-top removed from .site-footer. Quick
   task 260913-sw3 added it here to separate #contact from the footer
   (both var(--bl-bg-deep)) with a full-bleed line at y=0. Figma's first
   divider (20:3 desktop / 29:3 mobile) is not full-bleed and is not at
   y=0 -- it sits on the 1200px content band, inset below the footer's
   own top padding (72px desktop / 40px mobile). See .footer-top below,
   where the divider now lives. Removing this rule makes the
   #contact-to-footer seam disappear entirely -- that is the accepted,
   owner-approved consequence (05-CONTEXT.md D-19), not a regression.
   This supersedes 05-UI-SPEC.md line 41's "geometrically the same
   position" claim, which the D-12 archive measurement disproved. */
.site-footer {
	background: var(--bl-bg-deep);
	color: rgba(255,255,255,0.7);
	padding-block: 40px 36px;
	font-family: var(--font-ui);
	font-size: 0.92rem;
}
@media (min-width: 800px) {
	.site-footer { padding-block: 72px 44px; }
}
/* D-19: divider 1 (20:3 desktop / 29:3 mobile) lands here, on the
   content band inside .container, inset below .site-footer's own top
   padding -- not full-bleed (see the removal note above .site-footer). */
.footer-top {
	display: grid;
	gap: 28px;
	margin-bottom: 28px;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 800px) {
	.footer-top {
		/* FOOTER-D-05: Figma's fixed 632:220:220 column split
		   (20:5/20:12/20:19). 632 + 220 + 220 = 1072 = the 1200px content
		   band minus two 64px gaps, so these fr tracks resolve to exact
		   pixel widths at 1440. */
		grid-template-columns: 632fr 220fr 220fr;
		gap: var(--space-xl);
		margin-bottom: var(--space-lg);
		padding-top: var(--space-lg);
	}
}
/* width: auto is load-bearing, not tidiness: footer.php's width="178"
   HTML attribute is a presentational hint that would otherwise fix the
   rendered width at 178px regardless of height, and the shared img/svg
   rule (line 146) only sets height: auto, no width. width: auto here
   restores the installed SVG's true 6.0733:1 (178 / 29.3087) aspect ratio
   at both breakpoints once height is set below. D-09/FOOTER-D-01: the
   filter that used to flatten the artwork's #9FBE37 plane to white has
   been removed; no asset change, see logo.svg provenance in MANIFEST.md. */
.footer-brand img { width: auto; height: 24.7px; margin-bottom: 28px; }
@media (min-width: 800px) {
	.footer-brand img { height: 28.32px; margin-bottom: 16px; }
}
.footer-brand p { max-width: 38ch; line-height: 1.6; color: rgba(255,255,255,0.7); }
/* FOOTER-D-07 / FOOTER-M-06 (Phase 6, plan 06-10, fix-evidence/06-10-divider2-
   attribution.md): divider 2 (20:25/29:21) sat +36.30px (1440) / +87.66px
   (375) below its Figma offset because .footer-col's row/title rhythm was
   inherited body line-height + margin-bottom, not Figma's explicit 14px/1.5
   (=21px) text rows laid out with a flex `gap` (20:12 desktop 10px, 29:10
   mobile 8px). The owner REJECTED a +/-24px tolerance for this exact row on
   2026-09-19 (05-PARITY-LEDGER.md Sign-off Ruling 1) and it is not available
   to this phase -- this reproduces Figma's rhythm by construction instead:
   an explicit 14px/1.5 row height and a flex `gap` (not `margin-bottom`,
   which produces a last-item asymmetry `gap` does not) at both the
   title-to-first-row and row-to-row levels, replacing var(--space-md)/
   var(--space-2xs) here (attribution doc: these are the wrong tokens, not
   shared-token bugs -- --space-md/--space-2xs are unchanged everywhere
   else). Closes exactly to Figma's 322.00px at 1440 (0px residual, verified
   twice). A separate, out-of-D-01-remit 0.92px residual remains at 375,
   caused by .footer-brand p's tagline font-size (not .footer-col, not this
   mechanism) -- reported per D-11, not fixed here (attribution doc S6). */
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { color: #fff; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0; line-height: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.footer-col li { font-size: 14px; line-height: 1.5; }
.footer-col a { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.7); }
.footer-col a:hover { color: var(--bl-green); }
@media (min-width: 800px) {
	.footer-col { gap: 10px; }
	.footer-col ul { gap: 10px; }
}
/* D-19: this rule IS Figma's second divider (20:25 desktop / 29:21
   mobile) already, via border-top above -- do not move or remove it.
   Only the padding-top/gap rhythm changes below, for FOOTER-M-07. */
/* AMB-15 / D-05, shared-rule exception (Phase 6, plan 06-09): Figma gives
   BOTH paragraphs this rule governs -- the legal line (20:27/29:22) and
   the "Incorporated and tax resident in Ireland." line (20:28/29:23) --
   the identical Roboto Regular 13 / opacity 0.60 treatment, so editing
   this shared .footer-bottom rule directly is the correct scope here,
   not a violation of the #team/#contact scoping discipline used
   elsewhere in this file. */
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: 28px;
	display: flex; flex-wrap: wrap; gap: 28px var(--space-lg);
	justify-content: space-between; align-items: center;
	font-size: 13px;
	color: rgba(255,255,255,0.60);
}
@media (min-width: 800px) {
	.footer-bottom {
		padding-top: var(--space-lg);
		gap: var(--space-sm) var(--space-lg);
	}
}
/* AMB-15 / D-05, corrected by D-19 (2026-09-21) (Phase 6, plan 06-09):
   this is a deliberate RESET of the bare `strong { font-weight: 600;
   color: var(--bl-ink); }` rule at style.css:150, not a style in its own
   right -- do not "tidy it away" by deleting it. Deleting this rule
   instead of resetting it would drop the retained <strong> (footer.php
   keeps it for semantic emphasis and the client-requested ABIO-style
   treatment -- markup, footer_legal_name field and its stored value are
   all deliberately unchanged) onto the bare rule at :150, which would
   leave the font-weight at 600 (AMB-15 option (b)'s "no emphasis" clause
   unmet) and turn the text near-black on this dark footer. The reset
   neutralises the bare rule at this scoped selector only; style.css:150
   itself is untouched. */
.footer-legal strong { font-weight: inherit; color: inherit; }

/* =========================================================================
   14. WordPress content (generic pages / editor)
   ========================================================================= */
.page-hero {
	background: var(--bl-bg-alt);
	padding-top: calc(var(--header-h) + var(--space-xl));
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid var(--bl-line);
}
.entry-content { max-width: var(--container-text); margin-inline: auto; }
.entry-content h2, .entry-content h3 { margin-top: var(--space-lg); }
.entry-content img { border-radius: var(--radius); margin-block: var(--space-md); }
.entry-content blockquote {
	border-left: 4px solid var(--bl-green);
	margin: var(--space-lg) 0;
	padding: var(--space-sm) var(--space-lg);
	font-style: italic;
	color: var(--bl-ink);
}
.aligncenter { display: block; margin-inline: auto; }

/* Tables in editor content (e.g. the cookie inventory).
   Wrapped in an overflow container so a wide table scrolls itself rather than
   forcing the page to scroll sideways on a phone. */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table {
	margin: var(--space-lg) 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-ui);
	font-size: 0.92rem;
	line-height: 1.55;
}
.entry-content thead th {
	text-align: left;
	font-weight: 500;
	color: var(--bl-ink);
	background: var(--bl-bg-alt);
	border-bottom: 2px solid var(--bl-green);
	padding: var(--space-xs) var(--space-sm);
	white-space: nowrap;
}
.entry-content tbody td {
	padding: var(--space-xs) var(--space-sm);
	border-bottom: 1px solid var(--bl-line);
	vertical-align: top;
}
.entry-content tbody tr:last-child td { border-bottom: 0; }
.entry-content td code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	background: var(--bl-bg-alt);
	border: 1px solid var(--bl-line);
	border-radius: 3px;
	padding: 0.1em 0.4em;
	white-space: nowrap;
}

/* Page hero headings (generic pages, 404, archives) */
.page-hero h1 { margin: var(--space-xs) 0 0; text-wrap: balance; }
.page-hero .kicker { color: var(--bl-muted); }
.page-hero span { color: inherit; }

/* Post list — index.php fallback (blog, archives, search results) */
.entry { padding-block: var(--space-md); }
.entry h2 { font-size: var(--fs-h3); margin-bottom: var(--space-2xs); text-wrap: balance; }
.entry h2 a { color: var(--bl-ink); text-decoration: none; }
.entry h2 a:hover, .entry h2 a:focus-visible { color: var(--bl-blue); }
.entry-meta {
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bl-muted);
	margin-bottom: var(--space-sm);
}
.entry-meta::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--bl-green); vertical-align: middle; margin-right: 0.6em; }

/* Pagination */
.pagination { margin-top: var(--space-xl); font-family: var(--font-ui); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; padding: 0.5rem 0.75rem;
	border: 1px solid var(--bl-line); border-radius: var(--radius);
	color: var(--bl-body); text-decoration: none;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pagination .page-numbers:hover, .pagination .page-numbers:focus-visible { border-color: var(--bl-blue); color: var(--bl-blue); }
.pagination .page-numbers.current { background: var(--bl-blue); border-color: var(--bl-blue); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }

/* Search form */
.search-form { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.search-form .form-control { flex: 1 1 16rem; }

/* Screen-reader-only text (used by searchform + skip link patterns) */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* =========================================================================
   14b. AI-generated image disclosure (EU AI Act Art. 50)
   ========================================================================= */
.ai-notice {
	position: absolute;
	right: var(--space-2xs);
	bottom: var(--space-2xs);
	z-index: 2;
	display: inline-block;
	padding: 0.3em 0.65em;
	border-radius: calc(var(--radius) / 2);
	background: rgba(28, 43, 58, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--font-ui);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	pointer-events: none;
}
.hero .ai-notice {
	right: 22px;
	bottom: 30px;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: 0;
	border-radius: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
	letter-spacing: 2.2px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
#about .ai-notice {
	top: 13px;
	right: 17px;
	bottom: auto;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: 0;
	border-radius: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
	letter-spacing: 2.2px;
}

/* <picture> is inline by default — make it fill its slot so the img rules
   above (object-fit / aspect-ratio) still apply as they did to a bare <img>. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.media-frame picture { display: block; }

/* =========================================================================
   14c. Cookie consent banner
   ========================================================================= */
.consent {
	position: fixed;
	left: var(--space-sm);
	right: var(--space-sm);
	bottom: var(--space-sm);
	z-index: 900;
	background: var(--bl-bg-deep);
	color: rgba(255, 255, 255, 0.86);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-md);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.consent.is-in { opacity: 1; transform: none; }

.consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	max-width: var(--container-wide);
	margin-inline: auto;
}
.consent__text { flex: 1 1 22rem; }
.consent__title {
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	margin: 0 0 var(--space-2xs);
}
.consent__text p { font-size: 0.92rem; line-height: 1.6; margin: 0; }
.consent__text a { color: var(--bl-green-60); text-decoration: underline; }
.consent__text a:hover, .consent__text a:focus-visible { color: var(--bl-green-40); }

/* Accept and Reject are deliberately given equal visual weight — same size,
   same solid treatment, neither de-emphasised. Styling refusal as a lesser
   option is treated as a dark pattern under EDPB consent guidance. */
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); flex: 0 0 auto; }
.consent__actions .btn { min-width: 8.5rem; justify-content: center; }
.consent__actions .btn--ghost {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.92);
	color: var(--bl-bg-deep);
}
.consent__actions .btn--ghost:hover,
.consent__actions .btn--ghost:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--bl-bg-deep);
}

.footer-sep { padding-inline: 0.4em; opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
	.consent { transition: none; transform: none; }
}

/* =========================================================================
   15. Reveal-on-scroll animation
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	.reveal { opacity: 1; transform: none; }
}