/* ==========================================================================
   Parcel Haus — Design System
   Matches "Home page UI.pdf". All tokens are CSS custom properties so the
   Customizer (and Elementor) can override them without touching this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand palette, sampled from the approved UI */
	--ph-ink: #121315;
	--ph-ink-soft: #1c1e21;
	--ph-cream: #f7f6f2;
	--ph-cream-deep: #f0eee7;
	--ph-lime: #d8fe4f;
	--ph-lime-deep: #c7ef39;
	--ph-green: #1f3b2d;
	--ph-white: #ffffff;

	--ph-text: #121315;
	--ph-muted: #5c5f5e;
	--ph-muted-soft: #7b7e7d;
	--ph-on-dark: rgba(255, 255, 255, 0.74);
	--ph-line: rgba(18, 19, 21, 0.12);
	--ph-line-strong: rgba(18, 19, 21, 0.22);
	--ph-line-dark: rgba(255, 255, 255, 0.16);

	/* Typography */
	--ph-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ph-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ph-fs-eyebrow: 0.75rem;
	--ph-fs-body: 1rem;
	--ph-fs-small: 0.875rem;
	--ph-fs-micro: 0.8125rem;
	--ph-fs-h1: clamp(2.6rem, 5.6vw, 4.5rem);
	--ph-fs-h2: clamp(2.1rem, 4.1vw, 3.5rem);
	--ph-fs-h3: clamp(1.25rem, 1.75vw, 1.5rem);
	--ph-fs-quote: clamp(1.75rem, 3.5vw, 3.05rem);

	/* Layout */
	--ph-container: 1180px;
	--ph-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--ph-section-y: clamp(3.5rem, 5.6vw, 5rem);
	--ph-gap: clamp(1rem, 1.6vw, 1.5rem);

	/* Shape */
	--ph-radius-card: 12px;
	--ph-radius-panel: 20px;
	--ph-radius-pill: 999px;
	--ph-shadow-card: 0 1px 2px rgba(18, 19, 21, 0.04), 0 10px 30px -22px rgba(18, 19, 21, 0.35);
	--ph-shadow-panel: 0 24px 60px -34px rgba(18, 19, 21, 0.5);

	--ph-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
	--ph-header-h: 74px;

	/* The header and footer are dark bands framing a light page. Both are
	   tokens so the Customizer can repoint them without touching this file. */
	--ph-header-bg: #121315;
	--ph-footer-bg: #121315;
}

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--ph-cream);
	color: var(--ph-text);
	font-family: var(--ph-font-body);
	font-size: var(--ph-fs-body);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ph-transition), opacity var(--ph-transition);
}

.ph-prose a,
.entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(18, 19, 21, 0.3);
}

.ph-prose a:hover,
.entry-content a:hover {
	text-decoration-color: var(--ph-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ph-font-display);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.06;
	margin: 0 0 0.6em;
	color: var(--ph-ink);
}

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

ul,
ol {
	margin: 0 0 1.1em;
	padding-left: 1.15rem;
}

blockquote {
	margin: 2rem 0;
	padding-left: 1.35rem;
	border-left: 3px solid var(--ph-lime);
	font-size: 1.15rem;
}

code,
pre,
kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	background: var(--ph-ink);
	color: #f2f2f2;
	padding: 1.25rem;
	border-radius: var(--ph-radius-card);
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

th,
td {
	border: 1px solid var(--ph-line);
	padding: 0.7rem 0.85rem;
	text-align: left;
}

th {
	font-family: var(--ph-font-display);
	font-weight: 700;
}

hr {
	border: 0;
	border-top: 1px solid var(--ph-line);
	margin: 2.5rem 0;
}

:focus-visible {
	outline: 3px solid var(--ph-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

.ph-section--dark :focus-visible {
	outline-color: var(--ph-lime);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.ph-container {
	width: 100%;
	max-width: var(--ph-container);
	margin-inline: auto;
	padding-inline: var(--ph-gutter);
}

.ph-section {
	padding-block: var(--ph-section-y);
	position: relative;
}

.ph-section--tight {
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

.ph-section--dark {
	background-color: var(--ph-ink);
	color: var(--ph-on-dark);
}

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

.ph-section--cream {
	background-color: var(--ph-cream);
}

/* Split heading: big headline left, supporting copy right — used in every
   content section of the reference design. */
.ph-split {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3.4vw, 2.5rem);
	align-items: start;
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.ph-split__head {
	min-width: 0;
}

.ph-split__title {
	font-size: var(--ph-fs-h2);
	margin: 0;
	max-width: 100%;
}

.ph-split__text {
	font-size: var(--ph-fs-small);
	color: var(--ph-muted);
	margin: 0;
	max-width: 46ch;
	padding-top: clamp(0.5rem, 4.8vw, 4.4rem);
}

.ph-section--dark .ph-split__text {
	color: var(--ph-on-dark);
}

/* An Elementor section carries no class saying its background is dark, so the
   widget says so itself. These are the same colours .ph-section--dark gives a
   theme-rendered heading — without them the eyebrow is forest green and the
   headline is ink, both invisible on the ink band. */
.ph-split--on-dark .ph-eyebrow {
	color: var(--ph-lime);
}

.ph-split--on-dark .ph-split__title {
	color: var(--ph-white);
}

.ph-split--on-dark .ph-split__text {
	color: var(--ph-on-dark);
}

@media (max-width: 900px) {
	.ph-split {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.ph-split__title {
		max-width: 100%;
	}

	/* Stacked, the supporting copy keeps the column width it had beside the
	   headline, which reads as an orphaned strip. Let it use the line length
	   it now has room for. */
	.ph-split__text {
		padding-top: 0;
		max-width: 64ch;
		font-size: var(--ph-fs-body);
	}
}

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */
.ph-eyebrow {
	display: block;
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ph-green);
	margin: 0 0 0.85rem;
	line-height: 1.3;
}

.ph-eyebrow--lime {
	color: var(--ph-lime);
}

.ph-eyebrow--muted {
	color: var(--ph-muted);
}

.ph-lede {
	font-size: 1.0625rem;
	color: var(--ph-muted);
	max-width: 52ch;
	line-height: 1.68;
}

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

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.ph-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--ph-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1;
	padding: 0.95rem 1.6rem;
	border-radius: var(--ph-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: transform var(--ph-transition), background-color var(--ph-transition),
		color var(--ph-transition), border-color var(--ph-transition), box-shadow var(--ph-transition);
	white-space: nowrap;
}

.ph-btn:hover {
	transform: translateY(-2px);
}

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

.ph-btn--lime {
	background-color: var(--ph-lime);
	color: var(--ph-ink);
}

.ph-btn--lime:hover {
	background-color: var(--ph-lime-deep);
	box-shadow: 0 12px 24px -14px rgba(18, 19, 21, 0.55);
}

.ph-btn--ink {
	background-color: var(--ph-ink);
	color: var(--ph-white);
}

.ph-btn--ink:hover {
	background-color: #000;
	box-shadow: 0 12px 24px -14px rgba(18, 19, 21, 0.6);
}

.ph-btn--outline {
	background-color: transparent;
	color: var(--ph-ink);
	border-color: var(--ph-line-strong);
}

.ph-btn--outline:hover {
	border-color: var(--ph-ink);
	background-color: var(--ph-ink);
	color: var(--ph-white);
}

.ph-section--dark .ph-btn--outline {
	color: var(--ph-white);
	border-color: var(--ph-line-dark);
}

.ph-btn--block {
	width: 100%;
}

.ph-btn--sm {
	padding: 0.7rem 1.2rem;
	font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   6. Pills (capability tags)
   -------------------------------------------------------------------------- */
.ph-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ph-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--ph-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.62rem 1.05rem;
	border-radius: var(--ph-radius-pill);
	background-color: var(--ph-white);
	color: var(--ph-ink);
	border: 1px solid var(--ph-line);
	transition: border-color var(--ph-transition), transform var(--ph-transition);
}

a.ph-pill:hover {
	border-color: var(--ph-ink);
	transform: translateY(-2px);
}

.ph-pill--ghost {
	background-color: transparent;
	border-color: var(--ph-line-strong);
}

.ph-pill--lime {
	background-color: var(--ph-lime);
	border-color: var(--ph-lime);
}

/* --------------------------------------------------------------------------
   7. Site header
   -------------------------------------------------------------------------- */
.ph-header {
	position: sticky;
	top: 0;
	z-index: 950;
	background-color: var(--ph-header-bg);
	color: var(--ph-on-dark);
	border-bottom: 1px solid var(--ph-line-dark);
}

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

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

.ph-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--ph-header-h);
}

/* Wordmark — "Parcel" in ink, "Haus" knocked out on a lime block */
.ph-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.34rem;
	font-family: var(--ph-font-display);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.028em;
	color: var(--ph-ink);
	line-height: 1;
	flex-shrink: 0;
}

/* The header and footer are dark grounds, so the text wordmark is knocked out
   white there. (The image lockup is handled in PHP, which swaps in the light
   artwork rather than recolouring it.) */
.ph-header .ph-brand,
.ph-footer .ph-brand {
	color: var(--ph-white);
}

.ph-brand__mark {
	background-color: var(--ph-lime);
	padding: 0.18em 0.34em;
	border-radius: 3px;
	display: inline-block;
}

.ph-brand__image img,
.ph-brand img {
	max-height: 46px;
	width: auto;
	display: block;
}

@media (max-width: 480px) {
	.ph-brand__image img,
	.ph-brand img {
		max-height: 38px;
	}
}

.ph-section--dark .ph-brand {
	color: inherit;
}

/* Primary navigation */
.ph-nav {
	margin-left: auto;
}

.ph-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ph-nav__list li {
	position: relative;
}

.ph-nav__list a {
	font-family: var(--ph-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
	white-space: nowrap;
	padding-block: 0.5rem;
	display: inline-block;
}

/* Hover and the current page brighten to full white rather than fading, which
   is what "hover" has to mean once the ground is dark. */
.ph-nav__list a:hover,
.ph-nav__list .current-menu-item > a,
.ph-nav__list .current_page_item > a {
	color: var(--ph-white);
}

/* A lime underline marks the current page — colour alone would be a thin
   signal against the white hover state. */
.ph-nav__list > .current-menu-item > a,
.ph-nav__list > .current_page_item > a,
.ph-nav__list > .current-menu-ancestor > a {
	box-shadow: inset 0 -2px 0 0 var(--ph-lime);
}

/* Dropdowns */
.ph-nav__list ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background-color: var(--ph-ink-soft);
	border: 1px solid var(--ph-line-dark);
	border-radius: 10px;
	box-shadow: var(--ph-shadow-card);
	padding: 0.5rem;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--ph-transition), transform var(--ph-transition), visibility var(--ph-transition);
	z-index: 20;
}

.ph-nav__list li:hover > ul.sub-menu,
.ph-nav__list li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ph-nav__list ul.sub-menu a {
	display: block;
	padding: 0.55rem 0.75rem;
	border-radius: 7px;
}

.ph-nav__list ul.sub-menu a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--ph-white);
}

.ph-nav__list ul.sub-menu ul.sub-menu {
	top: 0;
	left: 100%;
}

.ph-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

/* The header CTA is printed twice — once in the action bar, once in the mobile
   drawer. Exactly one is visible at any width. */
.ph-nav__cta {
	display: none;
}

/* Mobile toggle */
.ph-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ph-line-dark);
	border-radius: var(--ph-radius-pill);
	background-color: transparent;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
}

.ph-nav-toggle span {
	display: block;
	width: 17px;
	height: 2px;
	background-color: var(--ph-white);
	border-radius: 2px;
	transition: transform var(--ph-transition), opacity var(--ph-transition);
}

.ph-nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.ph-nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.ph-nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 960px) {
	.ph-nav-toggle {
		display: inline-flex;
	}

	.ph-nav {
		position: fixed;
		inset: var(--ph-header-h) 0 auto 0;
		background-color: var(--ph-header-bg);
		border-bottom: 1px solid var(--ph-line-dark);
		padding: 1rem var(--ph-gutter) 1.75rem;
		max-height: calc(100dvh - var(--ph-header-h));
		overflow-y: auto;
		display: none;
		margin-left: 0;
	}

	.admin-bar .ph-nav {
		top: calc(var(--ph-header-h) + 46px);
	}

	.ph-nav.is-open {
		display: block;
	}

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

	.ph-nav__list > li {
		border-bottom: 1px solid var(--ph-line-dark);
	}

	.ph-nav__list a {
		font-size: 1rem;
		padding: 0.95rem 0;
		width: 100%;
	}

	.ph-nav__list ul.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0.5rem 0.85rem;
		min-width: 0;
	}

	.ph-header__cta {
		display: none;
	}

	.ph-nav__cta {
		display: inline-flex;
		margin-top: 1.25rem;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.ph-hero {
	background-color: var(--ph-cream);
	padding-block: clamp(3rem, 6.5vw, 6rem) clamp(3rem, 6vw, 5.5rem);
}

.ph-hero__head {
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Copy left, image right. The image column is wide enough for the artwork to
   read at a glance, and both columns are centred against each other so neither
   one leaves a block of dead space beside the other. */
.ph-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.75rem, 4.5vw, 4rem);
	align-items: center;
}

.ph-hero__col {
	min-width: 0;
}

.ph-hero__aside {
	min-width: 0;
}

.ph-hero__title {
	font-size: var(--ph-fs-h1);
	line-height: 1.02;
	letter-spacing: -0.032em;
	margin: 0;
	max-width: 80%;
}

.ph-hero__text {
	font-size: 1.0625rem;
	color: var(--ph-muted);
	max-width: 95%;
	margin: 0 0 1.9rem;
	line-height: 1.66;
}

.ph-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2.1rem;
}

.ph-hero__pills {
	max-width: 37rem;
}

/* The black "advantage" card. A full-width band under the hero grid: statement
   left, supporting line right. Stacked in one narrow column it was both the
   tallest thing on the page and the reason the copy column ran short. */
.ph-advantage {
	background-color: var(--ph-ink);
	color: var(--ph-on-dark);
	border-radius: var(--ph-radius-panel);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--ph-shadow-panel);
	margin-top: clamp(2rem, 4vw, 3.25rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 3rem);
	align-items: center;
}

.ph-advantage__head {
	min-width: 0;
}

.ph-advantage__title {
	color: var(--ph-white);
	font-size: clamp(1.5rem, 2.6vw, 2.15rem);
	line-height: 1.1;
	margin: 0;
	max-width: 16ch;
}

.ph-advantage__text {
	font-size: var(--ph-fs-body);
	line-height: 1.65;
	margin: 0;
	max-width: 52ch;
}

/* One tablet breakpoint for the hero. Above it the copy and the image sit side
   by side; below it everything stacks and the image is capped so it can never
   become a full-width slab. */
@media (max-width: 767px) {
	.ph-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 5vw, 2.5rem);
	}

	.ph-hero__aside .ph-media {
		max-width: 460px;
		margin-inline: auto;
	}

	.ph-advantage {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
	}

	.ph-advantage__title,
	.ph-advantage__text {
		max-width: 100%;
	}

	.ph-hero__title,
	.ph-hero__text {
		max-width: 100%;
	}
}

/* Stacked calls to action read as one clear choice each, at a comfortable
   tap size, rather than two ragged pills of different widths. */
@media (max-width: 520px) {
	.ph-hero__cta {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.65rem;
	}

	.ph-hero__cta .ph-btn {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   9. Lime marquee strip

   The item list is rendered twice in markup. Above the breakpoint the second
   set is hidden and the strip is a single centred row; below it the row
   scrolls and the duplicate makes the loop seamless. Markup rather than
   JavaScript, so the strip is also correct inside the Elementor editor.
   -------------------------------------------------------------------------- */
.ph-strip {
	background-color: var(--ph-lime);
	color: var(--ph-ink);
	padding-block: 0.95rem;
	overflow: hidden;
}

.ph-strip__track {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.35rem 1.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ph-strip__item {
	display: inline-flex;
	align-items: center;
	font-family: var(--ph-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.155em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The separator leads each item after the first, so hiding the duplicate set
   can never leave a dangling bullet at the end of the row. */
.ph-strip__item + .ph-strip__item::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: currentColor;
	flex-shrink: 0;
	margin-right: 1.9rem;
}

.ph-strip__item--clone {
	display: none;
}

/* Below this width six items no longer fit on one line, so the row scrolls
   instead of wrapping. Keep this breakpoint in sync with nothing else — the
   strip needs no JavaScript. */
@media (max-width: 900px) {
	.ph-strip .ph-container {
		padding-inline: 0;
	}

	.ph-strip__track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: max-content;
		gap: 0 1.9rem;
		animation: ph-marquee 30s linear infinite;
	}

	.ph-strip__item--clone {
		display: inline-flex;
	}

	/* Every item carries a leading separator here, including the first, so the
	   two halves are identical and the -50% loop is seamless. */
	.ph-strip__item::before {
		content: "";
		width: 3px;
		height: 3px;
		border-radius: 50%;
		background-color: currentColor;
		flex-shrink: 0;
		margin-right: 1.9rem;
	}
}

@keyframes ph-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------------------------
   9b. Media, illustrations, split-media sections and stats
   -------------------------------------------------------------------------- */

/* Every image slot. Holds either a real photograph or a packaged illustration,
   at the same shape either way, so swapping one for the other never reflows. */
.ph-media {
	margin: 0;
	position: relative;
	border-radius: var(--ph-radius-panel);
	overflow: hidden;
	background-color: var(--ph-cream-deep);
	display: block;
}

.ph-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.ph-media--hero .ph-media__img {
	aspect-ratio: 4 / 3;
}

.ph-media--panel .ph-media__img {
	aspect-ratio: 4 / 3;
}

.ph-media--on-dark {
	background-color: var(--ph-white);
}

/* The illustrations draw with currentColor, so they inherit the section. */
.ph-illus {
	display: block;
	width: 100%;
	height: auto;
	color: var(--ph-ink);
	padding: clamp(0.75rem, 2vw, 1.5rem);
}

/* The panel is light, so the artwork keeps drawing in ink. */
.ph-media--on-dark .ph-illus {
	color: var(--ph-ink);
}

/* --- Illustration motion -------------------------------------------------
   Small, slow, and always optional. Every rule below is inside a
   prefers-reduced-motion guard, so the artwork is complete and correct with
   no animation at all — nothing moves into place from off-screen, and
   nothing is hidden until it animates. */
@media (prefers-reduced-motion: no-preference) {

	/* The scanner beam travelling the height of the arch. */
	.ph-illus__scan {
		animation: ph-scan 3.4s ease-in-out infinite;
	}

	/* Chips drifting, offset so they never bob in unison. */
	.ph-illus__float {
		animation: ph-float 5s ease-in-out infinite;
	}

	.ph-illus__float--b {
		animation-duration: 6.4s;
		animation-delay: -2s;
	}

	/* Parcels riding the belt — a few pixels, not a bounce. */
	.ph-illus__box {
		animation: ph-nudge 4.6s ease-in-out infinite;
	}

	.ph-illus__box--b {
		animation-duration: 5.4s;
		animation-delay: -1.4s;
	}

	.ph-illus__box--c {
		animation-duration: 6s;
		animation-delay: -2.8s;
	}

	/* Coverage breathing out from each hub on the map. */
	.ph-illus__reach {
		animation: ph-breathe 7s ease-in-out infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

	.ph-illus__reach--b {
		animation-delay: -3.5s;
	}

	.ph-illus__pulse {
		animation: ph-pulse 3.2s ease-out infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

	.ph-illus__pulse--b {
		animation-delay: -1.6s;
	}

	/* The lane draws itself in, then holds. */
	.ph-illus__lane {
		stroke-dasharray: 420;
		stroke-dashoffset: 420;
		animation: ph-draw 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
	}

	/* Bars rising to their value. */
	.ph-illus__bar {
		transform-box: fill-box;
		transform-origin: bottom;
		animation: ph-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}

	.ph-illus__bar--1 { animation-delay: 0.15s; }
	.ph-illus__bar--2 { animation-delay: 0.3s; }
	.ph-illus__bar--3 { animation-delay: 0.45s; }
}

@keyframes ph-scan {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(166px); }
}

@keyframes ph-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@keyframes ph-nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes ph-breathe {
	0%, 100% { transform: scale(0.9); opacity: 0.75; }
	50% { transform: scale(1.04); opacity: 1; }
}

@keyframes ph-pulse {
	0% { transform: scale(0.75); opacity: 0.45; }
	70% { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

@keyframes ph-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes ph-grow {
	from { transform: scaleY(0.12); }
	to { transform: scaleY(1); }
}

.ph-illus text {
	font-family: var(--ph-font-display);
}

/* Split media: image one side, copy the other. The copy column is the wider of
   the two — the image is support, not the subject, and a 50/50 split made the
   illustration dominate every band it appeared in. */
.ph-split-media {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.ph-split-media__media,
.ph-split-media__body {
	min-width: 0;
}

.ph-split-media--reverse .ph-split-media__media {
	order: 2;
}

.ph-split-media__title {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.1;
	margin: 0 0 1.1rem;
	max-width: 18ch;
}

.ph-split-media__text {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ph-muted);
	margin: 0 0 1rem;
	max-width: 52ch;
}

.ph-section--dark .ph-split-media__text {
	color: var(--ph-on-dark);
}

/* Same tablet breakpoint as the hero, so the whole page changes shape once
   instead of rearranging itself three times on the way down. */
@media (max-width: 767px) {
	.ph-split-media {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 4vw, 2.25rem);
	}

	.ph-split-media--reverse .ph-split-media__media {
		order: 0;
	}

	.ph-split-media__media .ph-media {
		max-width: 460px;
		margin-inline: auto;
	}

	.ph-split-media__title {
		max-width: 100%;
	}

	.ph-split-media__text {
		max-width: 64ch;
	}
}

/* Text link with a lime underline that grows on hover. */
.ph-textlink {
	display: inline-block;
	font-family: var(--ph-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: inherit;
	padding-bottom: 3px;
	position: relative;
	margin-top: 0.35rem;
}

.ph-textlink::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--ph-lime);
	transform-origin: left;
	transition: transform var(--ph-transition);
}

.ph-textlink:hover::after {
	transform: scaleX(0.45);
}

.ph-section__more {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

/* Stat row under the company introduction.

   The rule sits on each stat rather than on the row, so the row reads the same
   whether it is showing three columns or one — and no breakpoint has to decide
   where to draw a divider. */
.ph-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* 767px is Elementor's own mobile breakpoint. Matching it means an
   Elementor-built page and a theme-rendered one stack at the same width. */
@media (max-width: 767px) {
	.ph-stats {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ph-stat {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
	border-top: 1px solid var(--ph-line);
	padding-top: clamp(1rem, 2vw, 1.35rem);
}

.ph-section--dark .ph-stat {
	border-top-color: var(--ph-line-dark);
}

.ph-stat__value {
	font-family: var(--ph-font-display);
	font-size: clamp(2.1rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ph-ink);
}

.ph-stat__label {
	font-size: var(--ph-fs-small);
	color: var(--ph-muted);
	max-width: 26ch;
}

/* Why-choose-us reason grid. */
.ph-reasons {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.6vw, 2.25rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

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

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

.ph-reason {
	border-top: 1px solid var(--ph-line-dark);
	padding-top: 1.1rem;
	min-width: 0;
}

.ph-reason__num {
	display: block;
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ph-lime);
	margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
}

.ph-reason__title {
	font-size: 1.0625rem;
	line-height: 1.25;
	margin: 0 0 0.55rem;
	color: var(--ph-white);
}

.ph-reason__text {
	font-size: var(--ph-fs-small);
	line-height: 1.6;
	color: var(--ph-on-dark);
	margin: 0;
}

/* Pull quote sitting inside a section rather than as its own band. */
.ph-inline-quote {
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	padding: 0 0 0 1.15rem;
	border-left: 3px solid var(--ph-lime);
	font-size: 0;
}

.ph-inline-quote p {
	font-family: var(--ph-font-display);
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: var(--ph-ink);
	margin: 0;
	max-width: 34ch;
}

/* Light text only where the block is actually sitting on a dark ground —
   either a theme dark section, or the widget's own "on dark" switch. */
.ph-section--dark .ph-inline-quote p,
.ph-split-media--on-dark .ph-inline-quote p {
	color: var(--ph-white);
}

.ph-split-media--on-dark .ph-split-media__text {
	color: var(--ph-on-dark);
}

.ph-split-media--on-dark .ph-split-media__title {
	color: var(--ph-white);
}

/* Service card icon. */
.ph-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background-color: var(--ph-lime);
	color: var(--ph-ink);
	margin-bottom: 1.25rem;
	flex-shrink: 0;
}

.ph-icon {
	width: 24px;
	height: 24px;
	display: block;
}

.ph-card--service .ph-card__eyebrow {
	margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   10. Card grids
   -------------------------------------------------------------------------- */
.ph-grid {
	display: grid;
	gap: var(--ph-gap);
}

.ph-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ph-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ph-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 1024 and 767 are Elementor's own tablet and mobile breakpoints. The theme
   grid uses the same two, so a card row breaks to two columns and then to one
   at the same widths however the page was built. */
@media (max-width: 1024px) {
	.ph-grid--4,
	.ph-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ph-grid--2,
	.ph-grid--3,
	.ph-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ph-card {
	background-color: var(--ph-white);
	border-radius: var(--ph-radius-card);
	padding: clamp(1.4rem, 2.1vw, 1.9rem);
	border: 1px solid rgba(18, 19, 21, 0.06);
	box-shadow: var(--ph-shadow-card);
	display: flex;
	flex-direction: column;
	transition: transform var(--ph-transition), box-shadow var(--ph-transition);
}

.ph-card--link:hover,
a.ph-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(18, 19, 21, 0.05), 0 22px 44px -26px rgba(18, 19, 21, 0.45);
}

.ph-card__eyebrow {
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-muted);
	margin: 0 0 clamp(2.25rem, 4.4vw, 4rem);
	line-height: 1.3;
}

/* The tall gap above belongs to the reference design's icon-less cards, where
   the eyebrow sits alone at the top of the card. Once an icon is above it the
   card has three stacked blocks and that gap reads as a mistake, so close it.
   Matched on the icon itself rather than a modifier class, so it holds however
   the card was built. */
.ph-card__icon + .ph-card__eyebrow {
	margin-bottom: 0.85rem;
}

.ph-card__title {
	font-size: var(--ph-fs-h3);
	line-height: 1.16;
	margin: 0 0 0.7rem;
}

.ph-card__text {
	font-size: 0.875rem;
	color: var(--ph-muted);
	line-height: 1.62;
	margin: 0;
}

.ph-card__foot {
	margin-top: auto;
	padding-top: 1.25rem;
}

/* Value cards (EXPERIENCE / MATCHMAKING / ADVOCACY) use a heavier title */
.ph-card--value .ph-card__title {
	font-size: 1.125rem;
	letter-spacing: -0.012em;
}

/* --------------------------------------------------------------------------
   11. Split panels (green + white)
   -------------------------------------------------------------------------- */
.ph-panels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ph-gap);
	align-items: stretch;
}

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

	.ph-panel__title {
		max-width: 100%;
	}
}

.ph-panel {
	border-radius: var(--ph-radius-panel);
	padding: clamp(1.6rem, 2.6vw, 2.15rem);
	display: flex;
	flex-direction: column;
}

.ph-panel--green {
	background-color: var(--ph-green);
	color: rgba(255, 255, 255, 0.78);
}

.ph-panel--green .ph-panel__title,
.ph-panel--green .ph-eyebrow {
	color: var(--ph-white);
}

.ph-panel--green .ph-eyebrow {
	color: var(--ph-lime);
}

.ph-panel--white {
	background-color: var(--ph-white);
	color: var(--ph-muted);
}

/* The white panel lives inside .ph-section--dark, so its headings and
   eyebrow must be pulled back to ink — otherwise they inherit the dark
   section's white text and disappear. */
.ph-section--dark .ph-panel--white .ph-panel__title,
.ph-panel--white .ph-panel__title {
	color: var(--ph-ink);
}

.ph-section--dark .ph-panel--white .ph-eyebrow,
.ph-panel--white .ph-eyebrow {
	color: var(--ph-green);
}

.ph-section--dark .ph-panel--white .ph-pill {
	color: var(--ph-ink);
}

.ph-panel__title {
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	line-height: 1.12;
	margin: 0 0 0.95rem;
	max-width: 82%;
}

.ph-panel__text {
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

.ph-panel__list {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	font-size: var(--ph-fs-small);
	line-height: 1.5;
}

.ph-panel__list li {
	position: relative;
	padding-left: 1.05rem;
	margin-bottom: 0.55rem;
}

.ph-panel__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.58em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0.85;
}

.ph-panel__list li:last-child {
	margin-bottom: 0;
}

.ph-panel .ph-pills {
	margin-top: auto;
	padding-top: 1.9rem;
}

/* --------------------------------------------------------------------------
   12. Pull quote
   -------------------------------------------------------------------------- */
.ph-quote {
	padding-block: clamp(2.25rem, 4vw, 3.75rem);
}

.ph-quote__text {
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-quote);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.028em;
	color: var(--ph-ink);
	margin: 0;
	max-width: 82%;
}

@media (max-width: 900px) {
	.ph-quote__text {
		max-width: 100%;
	}
}

.ph-quote__cite {
	display: block;
	margin-top: 1.5rem;
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-muted);
	font-style: normal;
}

/* --------------------------------------------------------------------------
   13. Process steps (rule above each column)
   -------------------------------------------------------------------------- */
.ph-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.6vw, 2.25rem);
}

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

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

.ph-step {
	border-top: 1px solid var(--ph-line-strong);
	padding-top: 1.05rem;
}

.ph-step__num {
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ph-ink);
	display: block;
	margin-bottom: clamp(2rem, 3.6vw, 3.25rem);
}

.ph-step__title {
	font-size: 1.125rem;
	line-height: 1.2;
	margin: 0 0 0.6rem;
}

.ph-step__text {
	font-size: 0.875rem;
	color: var(--ph-muted);
	line-height: 1.6;
	margin: 0;
}

/* Same again for the numbered steps: ink numerals and ink titles on an ink
   band render at 1:1 — literally invisible. */
.ph-steps--on-dark .ph-step {
	border-top-color: var(--ph-line-dark);
}

.ph-steps--on-dark .ph-step__num {
	color: var(--ph-lime);
}

.ph-steps--on-dark .ph-step__title {
	color: var(--ph-white);
}

.ph-steps--on-dark .ph-step__text {
	color: var(--ph-on-dark);
}

/* --------------------------------------------------------------------------
   14. CTA card
   -------------------------------------------------------------------------- */
.ph-cta {
	background-color: var(--ph-white);
	border-radius: var(--ph-radius-panel);
	padding: clamp(1.9rem, 4vw, 3.25rem);
	box-shadow: var(--ph-shadow-card);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.ph-cta__title {
	font-size: clamp(1.75rem, 3.2vw, 2.65rem);
	line-height: 1.1;
	margin: 0 0 0.95rem;
	max-width: 72%;
}

.ph-cta__text {
	font-size: var(--ph-fs-body);
	color: var(--ph-muted);
	margin: 0;
	max-width: 58ch;
	line-height: 1.65;
}

.ph-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	align-items: stretch;
	min-width: 200px;
}

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

	.ph-cta__title {
		max-width: 100%;
	}

	.ph-cta__actions {
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   15. Footer — four columns over a bottom bar
   -------------------------------------------------------------------------- */
.ph-footer {
	background-color: var(--ph-footer-bg);
	border-top: 1px solid var(--ph-line-dark);
	padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(1.25rem, 2vw, 1.75rem);
	color: var(--ph-on-dark);
	font-size: var(--ph-fs-small);
}

/* Every rule below that used an ink or line colour is repointed for the dark
   ground. Contrast target is 4.5:1 for body copy and 3:1 for the hairlines. */

.ph-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
	gap: clamp(1.75rem, 3.5vw, 3rem);
	align-items: start;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* Three deliberate steps down, so no column is ever squeezed. */
@media (max-width: 1080px) {
	.ph-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.ph-footer__col--news {
		grid-column: 1 / -1;
		border-top: 1px solid var(--ph-line-dark);
		padding-top: clamp(1.5rem, 3vw, 2rem);
	}
}

@media (max-width: 767px) {
	.ph-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ph-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 460px) {
	.ph-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.ph-footer__col--news {
		border-top: 0;
		padding-top: 0;
	}
}

.ph-footer__col {
	min-width: 0;
}

/* Brand column */
.ph-brand--footer {
	margin-bottom: 1.1rem;
}

.ph-brand--footer img {
	max-height: 54px;
	width: auto;
}

.ph-footer__about {
	margin: 0 0 1.1rem;
	max-width: 40ch;
	line-height: 1.65;
	color: var(--ph-on-dark);
}

.ph-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--ph-font-display);
	font-weight: 600;
}

.ph-footer__contact li {
	margin-bottom: 0.35rem;
}

.ph-footer__contact li a {
	color: var(--ph-white);
}

.ph-footer__contact a:hover {
	color: var(--ph-lime);
}

/* Column headings */
.ph-footer__heading,
.ph-footer .widget-title,
.ph-footer__col h2,
.ph-footer__col h3 {
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-white);
	margin: 0 0 1.15rem;
	line-height: 1.3;
}

/* Link lists */
.ph-footer__links,
.ph-footer__col .menu,
.ph-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ph-footer__links li {
	margin-bottom: 0.55rem;
}

.ph-footer__links a {
	color: var(--ph-on-dark);
	display: inline-block;
	position: relative;
}

.ph-footer__links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background-color: var(--ph-lime);
	transition: width var(--ph-transition);
}

.ph-footer__links a:hover {
	color: var(--ph-white);
}

.ph-footer__links a:hover::after {
	width: 100%;
}

/* Newsletter */
.ph-newsletter {
	margin-bottom: 1.35rem;
	max-width: 30rem;
}

.ph-newsletter__row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ph-newsletter__row input[type="email"] {
	flex: 1 1 11rem;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	font-size: 0.875rem;
	border-radius: var(--ph-radius-pill);
	border: 1px solid var(--ph-line-dark);
	background-color: rgba(255, 255, 255, 0.07);
	color: var(--ph-white);
}

.ph-newsletter__row input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.ph-newsletter__row input[type="email"]:focus {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--ph-lime);
	outline: none;
}

.ph-newsletter__row .ph-btn {
	flex: 0 0 auto;
}

.ph-newsletter__msg {
	margin: 0.7rem 0 0;
	font-size: var(--ph-fs-micro);
	line-height: 1.5;
}

.ph-newsletter__msg--ok {
	color: var(--ph-lime);
}

.ph-newsletter__msg--error {
	color: #8c1d18;
}

/* Social icons */
.ph-social {
	margin-top: 0.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ph-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--ph-line-dark);
	color: var(--ph-white);
	background-color: transparent;
	transition: background-color var(--ph-transition), color var(--ph-transition),
		border-color var(--ph-transition), transform var(--ph-transition);
}

.ph-social__link:hover {
	background-color: var(--ph-lime);
	border-color: var(--ph-lime);
	color: var(--ph-ink);
	transform: translateY(-2px);
}

.ph-social__link svg {
	display: block;
}

/* Bottom bar */
.ph-footer__bar {
	border-top: 1px solid var(--ph-line-dark);
	padding-top: clamp(1.1rem, 2vw, 1.5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.5rem;
	flex-wrap: wrap;
	font-size: var(--ph-fs-micro);
	color: rgba(255, 255, 255, 0.6);
}

.ph-footer__bar p {
	margin: 0;
}

/* Stack the bottom bar rather than letting the two lines wrap raggedly. */
@media (max-width: 620px) {
	.ph-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
		text-align: left;
	}
}

.ph-footer__brand {
	font-family: var(--ph-font-display);
	font-weight: 700;
	color: var(--ph-white);
}

/* --------------------------------------------------------------------------
   16. Page header (inner pages) + prose
   -------------------------------------------------------------------------- */
.ph-page-head {
	background-color: var(--ph-cream);
	padding-block: clamp(3rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.75rem);
}

.ph-page-head__title {
	font-size: clamp(2.25rem, 4.6vw, 3.75rem);
	margin: 0;
	max-width: 18ch;
	letter-spacing: -0.03em;
}

.ph-page-head__text {
	margin-top: 1.1rem;
	font-size: 1.0625rem;
	color: var(--ph-muted);
	max-width: 56ch;
}

.ph-breadcrumbs {
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-muted);
	margin-bottom: 1rem;
	font-family: var(--ph-font-display);
}

.ph-main {
	min-height: 40vh;
}

.ph-prose {
	max-width: 46rem;
	font-size: 1.0625rem;
	line-height: 1.72;
}

.ph-prose > h2 {
	font-size: clamp(1.6rem, 2.8vw, 2.25rem);
	margin-top: 2.5rem;
}

.ph-prose > h3 {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	margin-top: 2rem;
}

.ph-prose img {
	border-radius: var(--ph-radius-card);
}

.ph-content-wide {
	max-width: 100%;
}

/* Post / archive cards */
.ph-entry-card {
	background-color: var(--ph-white);
	border-radius: var(--ph-radius-card);
	border: 1px solid rgba(18, 19, 21, 0.06);
	box-shadow: var(--ph-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--ph-transition), box-shadow var(--ph-transition);
}

.ph-entry-card:hover {
	transform: translateY(-4px);
}

.ph-entry-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.ph-entry-card__body {
	padding: clamp(1.25rem, 2vw, 1.6rem);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ph-entry-card__meta {
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-muted);
	margin-bottom: 0.85rem;
}

.ph-entry-card__title {
	font-size: 1.2rem;
	line-height: 1.2;
	margin: 0 0 0.65rem;
}

.ph-entry-card__excerpt {
	font-size: var(--ph-fs-small);
	color: var(--ph-muted);
	margin: 0 0 1.25rem;
}

.ph-entry-card__more {
	margin-top: auto;
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-micro);
	font-weight: 700;
	border-bottom: 2px solid var(--ph-lime);
	align-self: flex-start;
	padding-bottom: 2px;
}

.ph-entry-hero__thumb img {
	width: 100%;
	border-radius: var(--ph-radius-panel);
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* Pagination */
.ph-pagination {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	display: flex;
	justify-content: center;
}

.ph-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.75rem;
	border-radius: var(--ph-radius-pill);
	border: 1px solid var(--ph-line);
	font-family: var(--ph-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0 0.2rem;
	background-color: var(--ph-white);
}

.ph-pagination .page-numbers.current,
.ph-pagination .page-numbers:hover {
	background-color: var(--ph-ink);
	color: var(--ph-white);
	border-color: var(--ph-ink);
}

/* Sidebar */
.ph-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
}

.ph-layout--sidebar {
	grid-template-columns: minmax(0, 1fr) 300px;
}

@media (max-width: 900px) {
	.ph-layout--sidebar {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ph-sidebar .widget {
	background-color: var(--ph-white);
	border-radius: var(--ph-radius-card);
	border: 1px solid rgba(18, 19, 21, 0.06);
	padding: 1.35rem;
	margin-bottom: 1.25rem;
	font-size: var(--ph-fs-small);
}

.ph-sidebar .widget-title {
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-muted);
	margin: 0 0 1rem;
}

.ph-sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ph-sidebar li {
	margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   17. Forms (contact + comments + search)
   -------------------------------------------------------------------------- */
.ph-form {
	display: grid;
	gap: 1rem;
	max-width: 40rem;
}

.ph-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

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

.ph-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ph-field label {
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ph-muted);
}

.ph-field .required {
	color: #b3261e;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	font-family: var(--ph-font-body);
	font-size: 0.9375rem;
	color: var(--ph-ink);
	background-color: var(--ph-white);
	border: 1px solid var(--ph-line-strong);
	border-radius: 10px;
	padding: 0.8rem 1rem;
	transition: border-color var(--ph-transition), box-shadow var(--ph-transition);
}

textarea {
	min-height: 150px;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--ph-ink);
	box-shadow: 0 0 0 3px rgba(216, 254, 79, 0.55);
}

/* Fields are column flex containers, which would stretch a submit button to
   the full form width. Keep buttons at their natural pill size. */
.ph-field > .ph-btn,
.ph-field > button {
	align-self: flex-start;
}

.ph-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ph-notice {
	border-radius: 10px;
	padding: 0.95rem 1.15rem;
	font-size: var(--ph-fs-small);
	margin-bottom: 1.25rem;
	border: 1px solid;
}

.ph-notice--ok {
	background-color: rgba(31, 59, 45, 0.08);
	border-color: rgba(31, 59, 45, 0.3);
	color: var(--ph-green);
}

.ph-notice--error {
	background-color: rgba(179, 38, 30, 0.07);
	border-color: rgba(179, 38, 30, 0.3);
	color: #8c1d18;
}

.ph-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

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

.ph-contact-detail {
	border-top: 1px solid var(--ph-line);
	padding-block: 1rem;
}

.ph-contact-detail:first-child {
	border-top: 0;
	padding-top: 0;
}

.ph-contact-detail dt {
	font-family: var(--ph-font-display);
	font-size: var(--ph-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-muted);
	margin-bottom: 0.35rem;
}

.ph-contact-detail dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
}

.ph-search-form {
	display: flex;
	gap: 0.5rem;
}

/* Comments */
.ph-comments {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(2rem, 3vw, 2.75rem);
	border-top: 1px solid var(--ph-line);
	max-width: 46rem;
}

.ph-comments .comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem;
}

.ph-comments .comment-list ol.children {
	list-style: none;
	padding-left: 1.5rem;
}

.ph-comments .comment-body {
	background-color: var(--ph-white);
	border: 1px solid rgba(18, 19, 21, 0.06);
	border-radius: var(--ph-radius-card);
	padding: 1.25rem;
	margin-bottom: 1rem;
	font-size: var(--ph-fs-small);
}

.ph-comments .comment-author img {
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.6rem;
}

.ph-comments .comment-meta {
	font-size: var(--ph-fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ph-muted);
	margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   18. 404 / empty states
   -------------------------------------------------------------------------- */
.ph-empty {
	text-align: center;
	padding-block: clamp(3rem, 8vw, 6rem);
	max-width: 40rem;
	margin-inline: auto;
}

.ph-empty__code {
	font-family: var(--ph-font-display);
	font-size: clamp(4rem, 14vw, 9rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.05em;
	margin: 0 0 1rem;
}

.ph-empty__code mark {
	background-color: var(--ph-lime);
	color: var(--ph-ink);
	padding: 0 0.1em;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   19. Scroll reveal (progressive enhancement — safe without JS)
   -------------------------------------------------------------------------- */
.ph-reveal {
	opacity: 1;
}

.js .ph-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.js .ph-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .ph-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   19b. Elementor editor + builder compatibility
   -------------------------------------------------------------------------- */

/* Inside the Elementor editor nothing scrolls, so an IntersectionObserver may
   never fire and reveal elements would stay invisible. Force them visible in
   the editor canvas and in any builder preview. */
.elementor-editor-active .ph-reveal,
.elementor-editor-preview .ph-reveal,
body[class*="elementor-editor"] .ph-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* Theme sections assume they sit at page width. Inside an Elementor column
   they must not add their own horizontal gutter on top of the column's, and
   the container must not re-constrain an already-constrained width. */
.elementor-widget .ph-section,
.elementor-widget .ph-hero,
.elementor-widget .ph-quote {
	padding-block: 0;
}

/* Elementor already constrains a boxed section to the site width, so the
   theme container only needs to drop its own max-width. Its side padding
   stays — that gutter is what keeps content off the screen edge, and Elementor
   columns have none of their own by default. */
.elementor-widget .ph-container {
	max-width: 100%;
}

/* A boxed Elementor section caps its width but adds no side padding of its
   own, so below that cap the content runs straight into the screen edge — on
   every phone and tablet. Add the theme gutter. Only padding is set here:
   the width stays Elementor's, so Site Settings → Layout → Content Width
   still governs it.

   Full-width sections (the lime strip) are deliberately left alone: they are
   meant to bleed, and they carry their own inner padding. */
.elementor-section-boxed > .elementor-container {
	padding-inline: var(--ph-gutter);
}

/* Elementor's own inner sections sit inside a column that already has the
   gutter, so they must not add a second one. */
.elementor-inner-section.elementor-section-boxed > .elementor-container {
	padding-inline: 0;
}

/* A dark or coloured Elementor section still needs to bleed full width even
   though its content is boxed — the padding above lives on the container, not
   the section, so the background is unaffected. */
.elementor-section > .elementor-container > .elementor-column {
	min-width: 0;
}

/* The capability strip is deliberately full-bleed. Inside an Elementor
   section set to full width it already spans the viewport, so let it. */
.elementor-widget .ph-strip {
	margin-inline: 0;
}

/* Elementor's own reset can zero out list styling the theme relies on. */
.elementor-widget .ph-panel__list,
.elementor-widget .ph-pills,
.elementor-widget .ph-strip__track {
	list-style: none;
	padding-left: 0;
}

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */

/* Mirrored from style.css so the skip link stays hidden even if the theme
   stylesheet is dequeued by a performance plugin. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	background-color: var(--ph-white);
	color: var(--ph-ink);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	top: 5px;
	padding: 15px 23px 14px;
	width: auto;
	z-index: 100000;
	border-radius: 4px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

.ph-hide {
	display: none !important;
}

.ph-mt-0 {
	margin-top: 0 !important;
}

.ph-skip-link {
	position: absolute;
	left: -9999px;
}

@media print {
	.ph-header,
	.ph-footer,
	.ph-strip,
	.ph-nav-toggle {
		display: none !important;
	}

	body {
		background: #fff;
	}
}

/* Elementor header/footer: layout and visual styling are owned by the widgets. */
.ph-builder-header { position: relative; z-index: 950; }
.ph-builder-header--sticky { position: sticky; top: 0; }
.admin-bar .ph-builder-header--sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .ph-builder-header--sticky { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ph-builder-header--sticky { top: 0; } }
.ph-builder-header a, .ph-builder-footer a, .ph-layout-preview a { text-decoration: none; }
.ph-builder-header .elementor-widget, .ph-builder-footer .elementor-widget { min-width: 0; }
.ph-builder-header :focus-visible, .ph-builder-footer :focus-visible { outline-color: var(--ph-lime); }
.ph-builder-menu { --ph-menu-color: #d0d1d1; --ph-menu-hover: var(--ph-lime); --ph-menu-bg: #121315; --ph-menu-gap: 24px; display: flex; flex-direction: column; position: relative; color: var(--ph-menu-color); }
.ph-builder-menu ul { list-style: none; margin: 0; padding: 0; }
.ph-builder-menu > ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-menu-gap); }
.ph-builder-menu li { position: relative; }
.ph-builder-menu a { display: block; padding: 7px 0; color: var(--ph-menu-color); font-family: var(--ph-font-display); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.ph-builder-menu a:hover, .ph-builder-menu a:focus-visible, .ph-builder-menu .current-menu-item > a, .ph-builder-menu a[aria-current="page"] { color: var(--ph-menu-hover); }
.ph-builder-menu .sub-menu { padding: 10px 18px; background: var(--ph-menu-bg); }
.ph-builder-menu--horizontal .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; z-index: 10; }
.ph-builder-menu--horizontal li:hover > .sub-menu, .ph-builder-menu--horizontal li:focus-within > .sub-menu { display: block; }
.ph-builder-menu--horizontal .sub-menu .sub-menu { top: 0; left: 100%; }
.ph-builder-menu--vertical > ul { flex-direction: column; align-items: flex-start; gap: 2px; }
.ph-builder-menu--vertical > ul > li + li { margin-top: calc(var(--ph-menu-gap) / 8); }
.ph-menu-toggle { display: none; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: var(--ph-menu-color); font: inherit; cursor: pointer; min-height: 44px; }
@media (max-width: 767px) {
 .js .ph-builder-menu--horizontal .ph-menu-toggle { display: inline-flex; align-self: flex-end; }
 .js .ph-builder-menu--horizontal > ul { display: none; }
 .js .ph-builder-menu--horizontal.is-open > ul { display: flex; }
 .ph-builder-menu--horizontal > ul { flex-direction: column; align-items: stretch; gap: 0; background: var(--ph-menu-bg); padding: 12px 18px; }
 .js .ph-builder-menu--horizontal > ul { position: absolute; top: calc(100% + 12px); right: 0; width: min(290px, calc(100vw - 40px)); max-height: 65vh; overflow-y: auto; z-index: 30; }
 .ph-builder-menu--horizontal .sub-menu { display: block; position: static; min-width: 0; padding: 4px 0 4px 14px; }
}
.ph-builder-footer .ph-newsletter__msg--error { color: #ffb4ab; }
@media print { .ph-builder-header, .ph-builder-footer { display: none; } }