/**
 * Philip landing — Bryn grid/spacing; typography Outfit + Source Sans 3; warm paper + sage hero + light noise.
 */

/* ------------------------------------------------------------------
   Bryn design tokens (global, scoped to landing for safety)
------------------------------------------------------------------ */
/* Theme palette: align with theme.json presets; landing-only paper + hero depth stay local. */
.philip-landing-main,
.philip-announcement-bar,
.philip-header-shell {
	--pad-bg: #faf8f5;
	--pad-surface: var(--wp--preset--color--surface);
	--pad-hero-base: var(--pad-bg);
	--pad-ink: var(--wp--preset--color--primary);
	--pad-dark: var(--wp--preset--color--pad-dark);
	--pad-stone: var(--wp--preset--color--pad-stone);
	--pad-sage: var(--wp--preset--color--pad-sage);
	--pad-cream: var(--wp--preset--color--pad-cream);
	--pad-paprika: var(--wp--preset--color--pad-paprika);
	--pad-body-muted: color-mix(in srgb, var(--wp--preset--color--pad-stone) 58%, var(--wp--preset--color--primary));
	--pad-container: var(--wp--style--global--content-size, 80rem);
	--pad-col-gap: 4rem;
	--pad-page-pad: 4rem;
	--pad-announcement-y: clamp(0.5rem, 1.25vw, 0.75rem);
	--pad-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pad-font-display: "Outfit", "Source Sans 3", system-ui, sans-serif;
	--pad-font: var(--pad-font-body);
	--pad-noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.philip-header-shell {
	--pad-nav-foreground: var(--pad-dark);
}

/* Bryn-style page padding (4 -> 3.5 -> 3 -> 2.5rem) */
.page-padding {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding-left: var(--pad-page-pad);
	padding-right: var(--pad-page-pad);
}

@media (max-width: 1023px) {
	.page-padding { padding-left: 3.5rem; padding-right: 3.5rem; }
}

@media (max-width: 767px) {
	.page-padding { padding-left: 3rem; padding-right: 3rem; }
}

@media (max-width: 479px) {
	.page-padding { padding-left: 2.5rem; padding-right: 2.5rem; position: relative; }
}

.container-large {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--pad-container);
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
}

.layout-12-column {
	grid-column-gap: var(--pad-col-gap);
	grid-row-gap: 0;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	width: 100%;
	min-width: 0;
	max-width: 100%;
	display: grid;
}

@media (max-width: 1023px) {
	.layout-12-column {
		grid-column-gap: 4rem;
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.layout-12-column {
		grid-column-gap: 3rem;
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 479px) {
	.layout-12-column { grid-column-gap: 2rem; }
}

/* ------------------------------------------------------------------
   Landing shell (warm paper + subtle grain; children above noise)
------------------------------------------------------------------ */
body.philip-front-landing .philip-landing-main,
body:has(.philip-landing-main .philip-hero.section-header) .philip-landing-main {
	margin-block-start: 0;
}

.philip-landing-main {
	position: relative;
	isolation: isolate;
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
	margin-top: 0;
}

.philip-landing-main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.038;
	mix-blend-mode: multiply;
	background-image: var(--pad-noise-svg);
	background-repeat: repeat;
	background-size: 200px 200px;
}

.philip-landing-main > * {
	position: relative;
	z-index: 1;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .philip-landing-main::before {
		mix-blend-mode: screen;
		opacity: 0.045;
	}
}

html[data-theme="dark"] .philip-landing-main::before {
	mix-blend-mode: screen;
	opacity: 0.045;
}

.philip-landing-main .wp-block-group.alignfull {
	box-sizing: border-box;
	margin-inline: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: clip;
}

/* Strip WP section top hairlines (keep .philip-section-header ::before rule only). */
.philip-bryn-section.alignfull,
.philip-section-work.alignfull,
.philip-section-testimonials.alignfull,
.philip-services-wrap.alignfull,
.philip-project-cta.alignfull,
.philip-giving-back.alignfull {
	border-top: none !important;
}

.philip-landing-main {
	background-color: var(--pad-bg);
}

/* Transparent sticky nav row sits over hero; negative hero margin pulls hero canvas behind shell */
body:has(.philip-landing-main .philip-hero.section-header) {
	--philip-hero-header-overlap: calc(var(--wp--preset--spacing--20, 1rem) + 3.25rem);
}

@media (max-width: 767px) {
	body:has(.philip-landing-main .philip-hero.section-header) {
		--philip-hero-header-overlap: calc(var(--wp--preset--spacing--20, 1rem) + 4rem);
	}
}

.philip-landing-main,
.philip-header-shell {
	font-family: var(--pad-font);
	color: var(--pad-ink);
}

.philip-header-shell {
	background-color: var(--pad-bg);
}

/* Header (nav row only now): sticky; announcement bar is sibling and scrolls away */
header {
	position: sticky;
	top: 0;
	z-index: 150;
}

body.admin-bar header {
	top: 32px;
}

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

.philip-header-shell {
	position: static;
	top: auto;
	z-index: auto;
}

/* Landing hero: keep nav transparent at top, then solid on scroll */
body:has(.philip-landing-main .philip-hero.section-header) header {
	overflow: visible !important;
}

body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell {
	z-index: 200;
	transition:
		background-color 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell {
		transition-duration: 0.01ms;
	}
}

body:has(.philip-landing-main .philip-hero.section-header) header {
	top: 0;
	z-index: 200;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	gap: 0 !important;
}

body.admin-bar:has(.philip-landing-main .philip-hero.section-header) header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar:has(.philip-landing-main .philip-hero.section-header) header {
		top: 46px;
	}
}

body:has(.philip-landing-main .philip-hero.section-header) header > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell,
body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.has-background,
body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.has-background-background-color,
body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.is-layout-constrained,
body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.wp-block-group-is-layout-constrained {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	margin-bottom: 0 !important;
}

body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.philip-header-shell--scrolled {
	background-color: var(--wp--preset--color--white, #fff) !important;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}

html[data-theme='dark'] body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.philip-header-shell--scrolled {
	background-color: var(--wp--preset--color--surface, #1a1918) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme='light']) body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.philip-header-shell--scrolled {
		background-color: var(--wp--preset--color--surface, #1a1918) !important;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
	}
}

body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell > .wp-block-group {
	background: transparent !important;
	background-color: transparent !important;
}

body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell [class*='wp-container-core-group'] {
	background: transparent !important;
	background-color: transparent !important;
}

.philip-announcement-bar {
	font-family: var(--pad-font);
	color: #fff;
	background-color: var(--pad-dark);
}

/* Header: hide WP site title if editor adds it (custom logo in template part) */
header .wp-block-site-title,
.philip-header-shell .wp-block-site-title {
	display: none !important;
}

.philip-header-shell .philip-site-logo {
	color: var(--pad-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.philip-header-shell .philip-site-logo:hover {
	color: var(--pad-stone);
	text-decoration: none;
}

.philip-site-logo__svg,
.philip-site-logo__img {
	width: clamp(64px, 18vw, 96px);
	height: auto;
	display: block;
	transition:
		width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		max-width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.philip-site-logo__svg,
	.philip-site-logo__img {
		transition-duration: 0.01ms;
	}
}

/* Larger logo over hero; scroll script shrinks to 64px */
body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell .philip-site-logo__svg,
body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell .philip-site-logo__img {
	width: clamp(72px, 15vw, 96px);
	max-width: 96px;
}

body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.philip-header-shell--scrolled .philip-site-logo__svg,
body:has(.philip-landing-main .philip-hero.section-header) .philip-header-shell.philip-header-shell--scrolled .philip-site-logo__img {
	width: 64px !important;
	max-width: 64px !important;
}

.philip-landing-main :where(h1, h2, h3, h4, h5, h6, p, a, li, span, button, input, select, textarea),
.philip-hero :where(h1, h2, h3, h4, h5, h6, p, a, li, span, button),
.philip-header-shell :where(h1, h2, h3, h4, h5, h6, p, a, li, span, button),
.philip-announcement-bar :where(p, span) {
	font-family: inherit;
}

/* Announcement + header row share Bryn page padding */
.philip-announcement-bar,
.philip-header-shell {
	padding-left: var(--pad-page-pad) !important;
	padding-right: var(--pad-page-pad) !important;
}

@media (max-width: 1023px) {
	.philip-announcement-bar,
	.philip-header-shell { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
}

@media (max-width: 767px) {
	.philip-announcement-bar,
	.philip-header-shell { padding-left: 3rem !important; padding-right: 3rem !important; }
}

@media (max-width: 479px) {
	.philip-announcement-bar,
	.philip-header-shell { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
}

/* ------------------------------------------------------------------
   Announcement bar (page pad L/R already; add Y + same inner cap as header)
------------------------------------------------------------------ */
.philip-announcement-bar {
	background-color: var(--pad-dark) !important;
	color: #fff !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--pad-announcement-y) !important;
	padding-bottom: var(--pad-announcement-y) !important;
	border: 0 !important;
	border-bottom: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.philip-announcement-text {
	margin: 0;
	box-sizing: border-box;
	width: min(100%, var(--pad-container));
	max-width: var(--pad-container);
	text-align: center;
	font-family: var(--pad-font);
	font-size: 1em;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.35;
	color: #fff !important;
}

.philip-announcement-text #philip-availability-month-year {
	font-weight: 500;
}

/* ------------------------------------------------------------------
   HERO (.section-header) — exact Bryn specs
------------------------------------------------------------------ */
/* PNG sits on element bg; gradient on ::before — stacked bg layers hide image (first layer = top, opaque gradient covered photo). */
.philip-landing-main .wp-block-group.alignfull.philip-hero.section-header.has-background-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow,
.philip-hero.section-header {
	position: relative;
	z-index: 1;
	isolation: isolate;
	background-image: var(--pad-hero-bg-image, none) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: var(--pad-bg) !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: clip;
	padding-top: 12.5rem;
	padding-bottom: 10rem;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: left;
}

.philip-landing-main .wp-block-group.alignfull.philip-hero.section-header.has-background-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow::before,
.philip-hero.section-header::before {
	content: none;
}

.philip-landing-main .wp-block-group.alignfull.philip-hero.section-header.has-background-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow > *,
.philip-hero.section-header > * {
	position: relative;
	z-index: 1;
	min-width: 0;
}

/* Hero canvas sits under transparent sticky nav strip */
body:has(.philip-landing-main .philip-hero.section-header) .philip-landing-main .wp-block-group.alignfull.philip-hero.section-header.has-background-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow,
body:has(.philip-landing-main .philip-hero.section-header) .philip-hero.section-header {
	margin-top: calc(-1 * var(--philip-hero-header-overlap));
	padding-top: calc(12.5rem + var(--philip-hero-header-overlap));
}

.philip-hero.section-header > .page-padding + .page-padding {
	margin-top: 2.5rem;
}

@media (max-width: 1023px) {
	.philip-hero.section-header { padding-top: 10.5rem; padding-bottom: 8rem; }

	body:has(.philip-landing-main .philip-hero.section-header) .philip-landing-main .wp-block-group.alignfull.philip-hero.section-header.has-background-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow,
	body:has(.philip-landing-main .philip-hero.section-header) .philip-hero.section-header {
		padding-top: calc(10.5rem + var(--philip-hero-header-overlap));
	}
}

@media (max-width: 767px) {
	.philip-hero.section-header { padding-top: 8.5rem; padding-bottom: 6rem; }

	body:has(.philip-landing-main .philip-hero.section-header) .philip-landing-main .wp-block-group.alignfull.philip-hero.section-header.has-background-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow,
	body:has(.philip-landing-main .philip-hero.section-header) .philip-hero.section-header {
		padding-top: calc(8.5rem + var(--philip-hero-header-overlap));
	}
}

@media (max-width: 479px) {
	.philip-hero.section-header { padding-top: 6rem; padding-bottom: 3.5rem; }

	body:has(.philip-landing-main .philip-hero.section-header) .philip-landing-main .wp-block-group.alignfull.philip-hero.section-header.has-background-background-color.has-background.is-layout-flow.wp-block-group-is-layout-flow,
	body:has(.philip-landing-main .philip-hero.section-header) .philip-hero.section-header {
		padding-top: calc(6rem + var(--philip-hero-header-overlap));
	}
}

/* Desktop: align hero copy with container left edge */
.hero-heading-col { grid-area: 1 / 1 / 2 / 9; }

@media (max-width: 1023px) {
	.hero-heading-col { grid-column: 2 / 8; }
}

@media (max-width: 767px) {
	.hero-heading-col { grid-area: span 1 / span 1 / span 1 / span 1; }
}

/* Hero display: clamp min tracks theme fluid xxx-large floor (~2.25rem); max 5rem. */
.heading-xlarge {
	margin: 0;
	padding: 0;
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	letter-spacing: -0.01em;
	font-size: clamp(2.25rem, 1.35rem + 3.85vw, 5rem);
	font-weight: 500;
	line-height: 1.05;
	color: var(--pad-ink);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.heading-large {
	margin: 0;
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	letter-spacing: -0.01em;
	font-size: 3.5rem;
	font-weight: 500;
	line-height: 1.1;
	color: var(--pad-ink);
	text-wrap: balance;
}

@media (max-width: 1023px) { .heading-large { font-size: 2.75rem; } }
@media (max-width: 767px)  { .heading-large { font-size: 2rem; } }
@media (max-width: 479px)  { .heading-large { font-size: 1.75rem; } }

.heading-medium {
	margin: 0;
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	letter-spacing: 0.01em;
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.1;
	color: var(--pad-ink);
	text-wrap: balance;
}

@media (max-width: 767px) { .heading-medium { font-size: 1.5rem; } }

/* Hero supporting content follows heading column alignment */
.philip-hero-content {
	grid-column: 1 / 9;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

@media (max-width: 1023px) { .philip-hero-content { grid-column: 2 / 8; } }
@media (max-width: 767px)  { .philip-hero-content { grid-column: 1 / -1; } }

.paragraph-large {
	margin: 0;
	font-family: var(--pad-font);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	color: var(--pad-ink);
	max-width: min(42rem, 70ch);
}

@media (max-width: 479px) { .paragraph-large { font-size: 1.125rem; } }

.philip-hero-chat.heading-medium { margin-top: 0.75rem; }

.philip-hero-footnote {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--pad-body-muted);
	font-weight: 400;
}

.philip-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.philip-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.8rem 1.35rem;
	border-radius: 999px;
	font-family: var(--pad-font);
	font-weight: 500;
	font-size: 1em;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.philip-btn--solid {
	background: var(--pad-paprika);
	color: var(--pad-ink);
	border: 1.5px solid var(--pad-paprika);
}

.philip-btn--solid:hover,
.philip-btn--solid:focus-visible {
	background: var(--pad-ink);
	color: var(--pad-paprika);
	border-color: var(--pad-ink);
}

.philip-btn--ghost {
	background: transparent;
	color: var(--pad-ink);
	border: 1.5px solid var(--pad-dark);
}

.philip-btn--ghost:hover,
.philip-btn--ghost:focus-visible {
	background: var(--pad-dark);
	color: #fff;
	border-color: var(--pad-dark);
}

.philip-btn:focus-visible {
	outline: 2px solid var(--pad-dark);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Section titles (Work / Testimonials / Services / Contact)
   Uses heading-large scale, section-title-divider black rule.
------------------------------------------------------------------ */
.philip-section-header {
	padding-top: 1.625rem;
	padding-bottom: 1.5rem;
	margin: 0 0 2rem;
	position: relative;
	border-bottom: none;
}

.philip-section-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 0.125rem;
	background-color: var(--pad-section-rule, var(--pad-dark));
	transform-origin: 0;
}

.philip-section-header .wp-block-heading {
	margin: 0;
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 3.5rem;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--pad-ink);
}

@media (max-width: 1023px) {
	.philip-section-header .wp-block-heading { font-size: 2.75rem; }
}

@media (max-width: 767px) {
	.philip-section-header .wp-block-heading { font-size: 2rem; }
}

@media (max-width: 479px) {
	.philip-section-header .wp-block-heading { font-size: 1.75rem; }
}

.philip-section-kicker {
	margin: 0 0 0.5rem;
	font-family: var(--pad-font);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pad-body-muted);
}

/* ------------------------------------------------------------------
   Sections (Work / Testimonials / Services / CTA)
------------------------------------------------------------------ */
.philip-bryn-section,
.philip-section-work,
.philip-section-testimonials {
	padding-left: var(--pad-page-pad) !important;
	padding-right: var(--pad-page-pad) !important;
	padding-top: clamp(4rem, 8vw, 6rem);
	padding-bottom: clamp(4rem, 8vw, 6rem);
}

@media (max-width: 1023px) {
	.philip-bryn-section,
	.philip-section-work,
	.philip-section-testimonials { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
}

@media (max-width: 767px) {
	.philip-bryn-section,
	.philip-section-work,
	.philip-section-testimonials { padding-left: 3rem !important; padding-right: 3rem !important; }
}

@media (max-width: 479px) {
	.philip-bryn-section,
	.philip-section-work,
	.philip-section-testimonials { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
}

.philip-landing-main .alignfull > :where(
	.philip-section-header,
	.philip-services-list,
	.philip-work-grid,
	.philip-work-filters,
	.philip-testimonials-grid,
	.philip-clients-logos,
	.philip-skills-logos,
	.philip-project-cta > p,
	.philip-giving-back-inner
) {
	max-width: var(--pad-container);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.philip-landing-main p {
	font-family: var(--pad-font);
	font-size: 1em;
	line-height: 1.5;
	font-weight: 400;
}

.philip-bryn-section p,
.philip-section-work p,
.philip-section-testimonials p {
	color: var(--pad-body-muted);
}

.philip-bryn-section p.has-secondary-color,
.philip-bryn-section h2.has-secondary-color,
.philip-bryn-section h3.has-secondary-color {
	color: var(--pad-ink);
}

/* ------------------------------------------------------------------
   Services — two-column grid (thumb + copy per cell)
------------------------------------------------------------------ */
.philip-services-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem);
	align-items: stretch;
}

.philip-service-row {
	display: grid;
	grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 1.5rem);
	align-items: start;
	box-sizing: border-box;
	min-width: 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--pad-cream);
	border-radius: 0.25rem;
	background-color: var(--pad-surface);
}

@media (max-width: 52rem) {
	.philip-services-list {
		grid-template-columns: 1fr;
	}
}

.philip-service-thumb {
	aspect-ratio: 1;
	max-width: 8rem;
	border-radius: 0.25rem;
	background-color: #fff;
	border: 1px solid var(--pad-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
}

.philip-service-thumb-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.philip-service-copy .wp-block-heading {
	margin: 0 0 0.5rem;
	color: var(--pad-ink);
}

.philip-service-copy p {
	margin: 0;
	max-width: 72ch;
	color: var(--pad-body-muted);
}

.philip-service-actions {
	margin: 1rem 0 0;
}

.philip-service-secondary-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.4em;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	font-family: var(--pad-font);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	background: transparent;
	color: var(--pad-ink);
	border: 1.5px solid var(--pad-dark);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.philip-service-secondary-link:hover,
.philip-service-secondary-link:focus-visible {
	background: var(--pad-dark);
	color: #fff;
	border-color: var(--pad-dark);
	text-decoration: none;
}

@media (max-width: 36rem) {
	.philip-service-row { grid-template-columns: 1fr; }
	.philip-service-thumb { max-width: 100%; aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------------
   Testimonials
------------------------------------------------------------------ */
.philip-testimonials-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.philip-testimonial-card {
	border: 1px solid var(--pad-cream);
	border-radius: 0.5rem;
	padding: 1.75rem;
	background: var(--pad-surface);
}

.philip-testimonial-card p {
	margin: 0 0 0.75rem;
	font-family: var(--pad-font);
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.5;
	max-width: 68ch;
	color: var(--pad-body-muted);
}

.philip-testimonial-card p:last-child { margin-bottom: 0; }

.philip-testimonial-card .philip-quote-author {
	margin: 1rem 0 0.15rem;
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--pad-ink);
}

.philip-testimonial-card .philip-quote-role {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--pad-body-muted);
}

/* ------------------------------------------------------------------
   Work
------------------------------------------------------------------ */
.philip-work-grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.35rem);
	grid-template-columns: 1fr;
	margin-top: clamp(0.85rem, 2vw, 1.25rem);
}

@media (min-width: 48rem) {
	.philip-work-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.philip-work-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.35rem;
	margin-bottom: 1rem;
}

.philip-work-loader-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	max-height: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition:
		opacity 0.2s ease,
		min-height 0.2s ease,
		max-height 0.2s ease,
		margin 0.2s ease,
		visibility 0.2s ease;
}

.philip-work-loader {
	width: 48px;
	height: 48px;
	border: 3px solid color-mix(in srgb, var(--pad-ink) 25%, var(--pad-bg));
	border-radius: 50%;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	animation: keahi-work-loader-rotation 1s linear infinite;
}

.philip-work-loader::after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-bottom-color: var(--pad-paprika);
}

@keyframes keahi-work-loader-rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.philip-work-grid {
	opacity: 1;
	transition: opacity 0.2s ease;
}

.philip-work-is-loading .philip-work-loader-wrap {
	min-height: 25vh;
	max-height: 40rem;
	margin: 0.25rem 0 0.75rem;
	opacity: 1;
	visibility: visible;
}

.philip-work-is-loading .philip-work-grid {
	opacity: 0;
	pointer-events: none;
}

.philip-work-pill {
	margin: 0 !important;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--pad-cream);
	line-height: 1.2;
	font-family: var(--pad-font);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--pad-ink);
}

.philip-work-filters button.philip-work-pill {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	cursor: pointer;
	background: transparent;
	font: inherit;
	font-family: var(--pad-font);
	color: inherit;
}

.philip-work-filters button.philip-work-pill:focus-visible {
	outline: 2px solid var(--pad-dark);
	outline-offset: 2px;
}

.philip-work-pill--active {
	border-color: var(--pad-ink);
}

/* Ensure filtered cards drop out of grid (block layout can fight [hidden] alone) */
.philip-section-work .philip-work-card[hidden] {
	display: none !important;
}

/* D — work grid: raised cards + tight type hierarchy */
.philip-section-work .philip-work-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 0.55rem 0.85rem 0.65rem;
	background: var(--pad-surface);
	border: 1px solid var(--pad-cream);
	border-radius: 0.5rem;
	box-shadow:
		0 1px 0 rgb(0 0 0 / 0.04),
		0 14px 32px rgb(0 0 0 / 0.055);
	gap: 0.35rem;
}

.philip-section-work .philip-work-card-link {
	color: inherit;
	text-decoration: none;
}

/* Kill stray gap under image */
.philip-section-work .philip-work-card > .philip-work-card-link:first-of-type {
	display: block;
	line-height: 0;
}

.philip-section-work .philip-work-card-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.25rem;
}

.philip-section-work .philip-work-thumb--empty {
	min-height: 12rem;
	border-radius: 0.25rem;
	background: color-mix(in srgb, var(--pad-ink) 4%, var(--pad-surface));
	border: 1px solid var(--pad-cream);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .philip-section-work .philip-work-card {
		box-shadow:
			0 1px 0 rgb(255 255 255 / 0.05),
			0 10px 28px rgb(0 0 0 / 0.4);
	}
}

html[data-theme="dark"] .philip-section-work .philip-work-card {
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.05),
		0 10px 28px rgb(0 0 0 / 0.4);
}

/* Meta line: quiet, below hero — title leads */
.philip-section-work .philip-work-card .philip-work-cat {
	display: block;
	align-self: stretch;
	margin: 0.15rem 0 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	border: none;
	font-family: var(--pad-font);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--pad-body-muted) !important;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .philip-section-work .philip-work-card .philip-work-cat {
		background: transparent;
		color: color-mix(in srgb, var(--pad-stone) 88%, var(--pad-surface)) !important;
	}
}

html[data-theme="dark"] .philip-section-work .philip-work-card .philip-work-cat {
	background: transparent;
	color: color-mix(in srgb, var(--pad-stone) 88%, var(--pad-surface)) !important;
}

.philip-work-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 2rem 1rem;
	text-align: center;
	font-family: var(--pad-font);
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--pad-body-muted);
}

.philip-work-card .wp-block-heading,
.philip-section-work .philip-work-card-title {
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--large);
	color: var(--pad-ink);
}

.philip-section-work .philip-work-card-excerpt {
	margin: 0;
	padding: 0;
	font-family: var(--pad-font);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 400;
	line-height: 1.5;
	max-width: 70ch;
	color: var(--pad-body-muted);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .philip-section-work .philip-work-card-title {
		color: var(--pad-ink);
	}
}

html[data-theme="dark"] .philip-section-work .philip-work-card-title {
	color: var(--pad-ink);
}

.philip-work-thumb {
	min-height: 12rem;
	border-radius: 0.25rem;
	background: color-mix(in srgb, var(--pad-ink) 4%, var(--pad-surface));
	border: 1px solid var(--pad-cream);
}

/* ------------------------------------------------------------------
   Header brand & nav (keep close to site header visual)
------------------------------------------------------------------ */
.philip-brand-title {
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.05;
}

/* Header logo SVG uses .philip-site-logo__svg; footer .philip-brand-title unchanged */

.philip-header-actions .wp-block-navigation {
	gap: 0.5rem 1.5rem;
}

.philip-header-shell .philip-header-actions .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--pad-font);
	font-size: 1em !important;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--pad-nav-foreground, var(--pad-dark)) !important;
}

.philip-header-shell .philip-header-actions .wp-block-navigation,
.philip-header-shell .philip-header-actions .wp-block-navigation__container,
.philip-header-shell .philip-header-actions .wp-block-navigation-item,
.philip-header-shell .philip-header-actions .wp-block-navigation-item__label {
	font-size: 1em !important;
}

/* Flatten hover so layout stays static */
.philip-header-shell .philip-header-actions .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--pad-stone) !important;
	text-decoration: none;
}

.philip-header-shell .philip-header-actions .wp-block-navigation .wp-block-navigation-item__content.philip-nav-active,
.philip-header-shell .philip-header-actions .wp-block-navigation .wp-block-navigation-item__content[aria-current='location'] {
	color: var(--pad-paprika) !important;
}

.philip-header-shell .philip-dark-mode-switch .logo {
	color: var(--pad-nav-foreground, var(--pad-ink));
}

.wp-block-site-title a:hover {
	color: var(--pad-ink);
	text-decoration: none;
}

.wp-block-button__link:hover { filter: none; opacity: 1; }

a:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--pad-dark);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Project CTA
------------------------------------------------------------------ */
.philip-project-cta .wp-block-heading {
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	max-width: 20ch;
}

.philip-landing-main .philip-project-cta > p {
	max-width: min(42rem, 68ch);
	margin-inline: auto;
	overflow-wrap: break-word;
}

.philip-project-cta a { color: var(--pad-ink); text-underline-offset: 0.2em; }

/* Giving back — copy + foodbank mark; Bryn card surface on logo */
.philip-giving-back-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.philip-giving-back-copy p {
	margin: 0;
	max-width: min(42rem, 72ch);
}

.philip-giving-back-logo-link {
	display: block;
	box-sizing: border-box;
	padding: 1rem 1.25rem;
	border-radius: 0.25rem;
	border: 1px solid var(--pad-cream);
	background-color: var(--pad-surface);
	line-height: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.philip-giving-back-logo-link:hover {
	border-color: var(--pad-sage);
}

.philip-giving-back-mark {
	display: block;
	width: 100%;
	max-width: 12rem;
	height: auto;
}

.philip-giving-back a { color: var(--pad-ink); text-underline-offset: 0.2em; }

@media (max-width: 40rem) {
	.philip-giving-back-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.philip-giving-back-copy {
		max-width: 100%;
	}
}

/* WP “background” preset = white blocks → match paper (cards keep --pad-surface). */
.philip-landing-main .philip-bryn-section.has-background-background-color.has-background,
.philip-landing-main .philip-services-wrap.has-background-background-color.has-background {
	background-color: var(--pad-bg) !important;
}

/* Dark: one canvas; hero deeper than sections; nav uses ink (not pad-dark on dark bg). */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .philip-landing-main {
		--pad-bg: #121110;
		--pad-surface: #1a1918;
		--pad-hero-base: #0a1010;
		--pad-ink: #f2f0eb;
		--pad-stone: #8fa9a3;
		--pad-body-muted: var(--pad-stone);
		--pad-cream: rgba(255, 255, 255, 0.12);
		--pad-section-rule: color-mix(in srgb, var(--pad-sage) 45%, transparent);
	}

	html:not([data-theme="light"]) .philip-header-shell {
		--pad-bg: #121110;
		--pad-surface: #1a1918;
		--pad-ink: #f2f0eb;
		--pad-stone: #8fa9a3;
		--pad-cream: rgba(255, 255, 255, 0.12);
		--pad-nav-foreground: var(--pad-ink);
	}

	html:not([data-theme="light"]) .philip-header-shell .philip-site-logo {
		color: #fff;
	}

	html:not([data-theme="light"]) .philip-header-shell .philip-site-logo:hover {
		color: var(--pad-stone);
	}

	html:not([data-theme="light"]) .philip-hero.section-header {
		--pad-ink: #000;
	}

	html:not([data-theme="light"]) .philip-hero.section-header .has-secondary-color,
	html:not([data-theme="light"]) .philip-hero.section-header .has-primary-color,
	html:not([data-theme="light"]) .philip-hero.section-header .heading-xlarge,
	html:not([data-theme="light"]) .philip-hero.section-header .paragraph-large,
	html:not([data-theme="light"]) .philip-hero.section-header .philip-hero-chat,
	html:not([data-theme="light"]) .philip-hero.section-header .philip-btn,
	html:not([data-theme="light"]) .philip-hero.section-header .philip-btn--ghost {
		color: #000 !important;
	}
}

html[data-theme="dark"] .philip-landing-main {
	--pad-bg: #121110;
	--pad-surface: #1a1918;
	--pad-hero-base: #0a1010;
	--pad-ink: #f2f0eb;
	--pad-stone: #8fa9a3;
	--pad-body-muted: var(--pad-stone);
	--pad-cream: rgba(255, 255, 255, 0.12);
	--pad-section-rule: color-mix(in srgb, var(--pad-sage) 45%, transparent);
}

html[data-theme="dark"] .philip-header-shell {
	--pad-bg: #121110;
	--pad-surface: #1a1918;
	--pad-ink: #f2f0eb;
	--pad-stone: #8fa9a3;
	--pad-cream: rgba(255, 255, 255, 0.12);
	--pad-nav-foreground: var(--pad-ink);
}

html[data-theme="dark"] .philip-header-shell .philip-site-logo {
	color: #fff;
}

html[data-theme="dark"] .philip-header-shell .philip-site-logo:hover {
	color: var(--pad-stone);
}

html[data-theme="dark"] .philip-hero.section-header {
	--pad-ink: #000;
}

html[data-theme="dark"] .philip-hero.section-header .has-secondary-color,
html[data-theme="dark"] .philip-hero.section-header .has-primary-color,
html[data-theme="dark"] .philip-hero.section-header .heading-xlarge,
html[data-theme="dark"] .philip-hero.section-header .paragraph-large,
html[data-theme="dark"] .philip-hero.section-header .philip-hero-chat,
html[data-theme="dark"] .philip-hero.section-header .philip-btn,
html[data-theme="dark"] .philip-hero.section-header .philip-btn--ghost {
	color: #000 !important;
}

/* Page canvas matches landing (no hairline vs body). */
@supports selector(:has(*)) {
	html:has(.philip-landing-main) {
		background-color: var(--wp--preset--color--background);
	}
}

.philip-landing-main > .philip-section-work.alignfull + .philip-section-testimonials.alignfull {
	margin-block-start: 0 !important;
	border-block-start: 0 !important;
	border-block-end: 0 !important;
	box-shadow: none !important;
}

/* Platforms & tools — 7-column icon grid */

.philip-skills-logos {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1.5rem 1rem;
	justify-items: center;
	align-items: start;
	margin: 2em 0 0;
	padding: 0;
	list-style: none;
}

.philip-skills-logos .philip-skill-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	min-width: 0;
	list-style: none;
	text-align: center;
	margin: 0 0 2em;
	padding: 0;
}

.philip-skills-logos .philip-skill-item::marker,
.philip-skills-logos .philip-skill-item::before {
	content: none !important;
}

.philip-skills-logos .philip-skill-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
}

.philip-skills-logos .philip-skill-logo img {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	object-fit: contain;
}

.philip-skills-logos .philip-skill-logo--text {
	border-radius: 999px;
	background: color-mix(in srgb, var(--pad-stone) 30%, #fff);
	border: 1px solid color-mix(in srgb, var(--pad-stone) 70%, #fff);
	color: var(--pad-dark);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.philip-skills-logos .philip-skill-label {
	display: block;
	width: 100%;
	text-align: center;
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 500;
	line-height: 1.35;
}

.philip-section-skills .philip-skill-item[hidden] {
	display: none !important;
}

@media (max-width: 64rem) {
	.philip-skills-logos {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 48rem) {
	.philip-skills-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 1.75rem;
	}
}

/* Charity / business client logo rows — identical design */
.philip-clients-logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.5rem clamp(1rem, 3vw, 2.5rem);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.philip-clients-logos .philip-client-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.philip-clients-logos .philip-client-item::marker,
.philip-clients-logos .philip-client-item::before {
	content: none !important;
}

.philip-clients-logos .philip-client-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	min-height: 3.5rem;
	width: 100%;
}

.philip-clients-logos .philip-client-logo {
	display: block;
	max-height: clamp(2.5rem, 5vw, 3.5rem);
	width: auto;
	max-width: min(10rem, 60%);
	object-fit: contain;
}

.philip-clients-logos .philip-client-logo--pdh {
	max-height: clamp(2.75rem, 5.5vw, 3.75rem);
	max-width: min(4.25rem, 36%);
}

/* Salisbury Foodbank — wide landscape wordmark */
.philip-clients-logos .philip-client-logo--salisbury-foodbank {
	max-height: clamp(2.5rem, 5vw, 3.5rem);
	max-width: min(12rem, 85%);
}

/* Carers Trust: navy mat; pad = 10% of default charity-row logo cap (literal % = wrong CB) */
.philip-clients-logos .philip-client-link:has(.philip-client-logo--carers) {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	background: #152f4e;
	padding: calc(clamp(2.5rem, 5vw, 3.5rem) * 0.1);
}

/* HHC — self-hosted HHC.png (RGBA); no invert (colour baked in) */
.philip-clients-logos .philip-client-logo--hhc {
	max-height: clamp(2.75rem, 5.5vw, 3.75rem);
	max-width: min(7rem, 50%);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .philip-section-clients--charity .philip-client-logo--unhcr,
	html:not([data-theme="light"]) .philip-section-clients--charity .philip-client-logo--sciaf,
	html:not([data-theme="light"]) .philip-section-clients--charity .philip-client-logo--salisbury-foodbank {
		background-color: #fff;
		outline: 5px solid #fff;
	}
}

html[data-theme="dark"] .philip-section-clients--charity .philip-client-logo--unhcr,
html[data-theme="dark"] .philip-section-clients--charity .philip-client-logo--sciaf,
html[data-theme="dark"] .philip-section-clients--charity .philip-client-logo--salisbury-foodbank {
	background-color: #fff;
	outline: 5px solid #fff;
}

@media (max-width: 48rem) {
	.philip-clients-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 1.75rem;
	}
}

@media (max-width: 30rem) {
	.philip-clients-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
   Single project (CPT)
------------------------------------------------------------------ */
.keahi-project-single {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--pad-container);
	margin-left: auto;
	margin-right: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad-page-pad) clamp(2.5rem, 5vw, 4rem);
	min-width: 0;
}

.keahi-project-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	align-items: start;
}

@media (min-width: 56.25rem) {
	.keahi-project-hero {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
	}
}

.keahi-project-hero-media {
	min-width: 0;
}

.keahi-project-hero-img,
.keahi-project-hero-placeholder {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	border: 1px solid var(--pad-cream);
	box-sizing: border-box;
}

.keahi-project-hero-placeholder {
	aspect-ratio: 4 / 3;
	background: color-mix(in srgb, var(--pad-ink) 5%, var(--pad-surface));
}

.keahi-project-title {
	margin: 0 0 0.75rem;
	font-family: var(--pad-font-display);
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: clamp(1.75rem, 3.5vw, 2.35rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--pad-ink);
}

.keahi-project-excerpt {
	margin: 0 0 1.25rem;
	font-family: var(--pad-font);
	font-size: 1em;
	line-height: 1.5;
	color: var(--pad-body-muted);
	font-weight: 500;
	max-width: 70ch;
}

.keahi-project-meta {
	margin: 0;
	display: grid;
	gap: 0.65rem 1rem;
	font-family: var(--pad-font);
	font-size: 0.875rem;
}

.keahi-project-meta-row {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0.5rem 1rem;
	align-items: baseline;
}

.keahi-project-meta dt {
	margin: 0;
	font-weight: 600;
	color: var(--pad-dark);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.6875rem;
}

.keahi-project-meta dd {
	margin: 0;
	color: var(--pad-ink);
	font-weight: 500;
	line-height: 1.35;
}

@media (max-width: 30rem) {
	.keahi-project-meta-row {
		grid-template-columns: 1fr;
	}
}

.keahi-project-body {
	margin-top: clamp(2rem, 4vw, 3rem);
	font-family: var(--pad-font);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--pad-ink);
}

.keahi-project-body > *:first-child {
	margin-top: 0;
}

.keahi-project-body a {
	color: var(--pad-dark);
	font-weight: 600;
}

.keahi-project-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.keahi-project-gallery-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.35rem;
	border: 1px solid var(--pad-cream);
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.keahi-project-footer-cta {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--pad-surface);
	border: 1px solid var(--pad-cream);
	border-radius: 0.5rem;
	box-shadow:
		0 1px 0 rgb(0 0 0 / 0.04),
		0 14px 32px rgb(0 0 0 / 0.055);
}

.keahi-project-footer-cta-title {
	margin: 0 0 0.5rem;
	font-family: var(--pad-font-display);
	font-weight: 500;
	font-size: clamp(1.35rem, 2.5vw, 1.65rem);
	color: var(--pad-ink);
}

.keahi-project-footer-cta-text {
	margin: 0 0 1.25rem;
	font-family: var(--pad-font);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--pad-body-muted);
	max-width: min(40rem, 72ch);
}

.keahi-project-footer-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.keahi-project-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.2rem;
	border-radius: 999px;
	font-family: var(--pad-font);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	background: var(--pad-dark);
	color: #fff;
	transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.keahi-project-cta-button:hover {
	opacity: 0.92;
}

.keahi-project-cta-button:focus-visible {
	opacity: 0.92;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.keahi-project-cta-button--ghost {
	background: transparent;
	color: var(--pad-dark);
	border-color: var(--pad-cream);
}

.keahi-project-cta-button--ghost:hover {
	background: color-mix(in srgb, var(--pad-sage) 18%, var(--pad-surface));
}

.keahi-project-cta-button--ghost:focus-visible {
	background: color-mix(in srgb, var(--pad-sage) 18%, var(--pad-surface));
	outline: 2px solid var(--pad-dark);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Project modal (homepage SPA behavior for selected projects)
------------------------------------------------------------------ */
.philip-project-modal {
	position: fixed;
	inset: 2em;
	margin: 0;
	padding: 0;
	border: 0;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	background: transparent;
	overflow: hidden;
}

.philip-project-modal[open] {
	display: block;
}

.philip-project-modal::backdrop {
	background: rgb(0 0 0 / 0.28);
}

.philip-project-modal__surface {
	--pad-bg: #fff;
	--pad-surface: #fff;
	--pad-ink: #000;
	--pad-dark: #213e45;
	--pad-stone: #597878;
	--pad-cream: #dce2c8;
	--pad-body-muted: #597878;
	position: relative;
	height: 100%;
	overflow-y: auto;
	background-color: #fff;
	color: #000;
	border-radius: 0.5rem;
}

.philip-project-modal__content {
	min-height: 100%;
	background-color: #fff;
	color: #000;
}

.philip-project-modal__frame {
	display: block;
	width: 100%;
	min-height: calc(100vh - 4em);
	height: 100%;
	border: 0;
	background: #fff;
}

.philip-project-modal__loading {
	min-height: 40vh;
	display: grid;
	place-items: center;
	font-family: var(--pad-font);
	font-size: 1rem;
	color: var(--pad-body-muted);
}

.philip-project-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1000;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 1px solid #dce2c8;
	background: #fff;
	color: #000;
	font-family: var(--pad-font);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.philip-project-modal__close:hover,
.philip-project-modal__close:focus-visible {
	border-color: #597878;
}

html.philip-project-modal-open,
html.philip-project-modal-open body {
	overflow: hidden;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .keahi-project-cta-button--ghost:focus-visible {
		outline-color: var(--pad-sage);
	}

	html:not([data-theme="light"]) .keahi-project-cta-button--ghost {
		color: var(--pad-ink);
	}

	html:not([data-theme="light"]) .keahi-project-footer-cta {
		box-shadow:
			0 1px 0 rgb(255 255 255 / 0.05),
			0 10px 28px rgb(0 0 0 / 0.4);
	}
}

html[data-theme="dark"] .keahi-project-cta-button--ghost:focus-visible {
	outline-color: var(--pad-sage);
}

html[data-theme="dark"] .keahi-project-cta-button--ghost {
	color: var(--pad-ink);
}

html[data-theme="dark"] .keahi-project-footer-cta {
	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.05),
		0 10px 28px rgb(0 0 0 / 0.4);
}

/* prefers-reduced-motion: UI transitions only (page transition script already guards). */
@media (prefers-reduced-motion: reduce) {
	.philip-btn,
	.philip-giving-back-logo-link,
	.keahi-project-cta-button {
		transition: none;
	}
}

/* Page transitions are defined inline in <head> by keahi_page_transition_head_script(). */