/* Shared section layouts for the homepage and inner pages (patterns written by tools/site/build-pages.mjs). */

.pe-accent { color: var(--wp--preset--color--color-accent); }
.pe-dark .pe-accent { color: var(--wp--preset--color--color-highlight); }

/* Groups used as grids or rows: no flow margins between their children. */
.pe-grid > *, .pe-steps > *, .pe-compare > *, .pe-split > *, .pe-head-row > *, .pe-cases > *, .pe-faq > *, .pe-contact > *, .pe-page-hero__grid > *, .pe-cta > * { margin-block: 0; }

/* ---------- Section heads ---------- */
.pe-section > .pe-section-head + .alignwide { margin-block-start: clamp(36px, 4vw, 64px); }
.pe-section-head .pe-lead { margin-block-start: 18px; }
.pe-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.pe-head-row + .alignwide { margin-block-start: clamp(36px, 4vw, 64px); }

/* ---------- Grids ---------- */
.pe-grid { display: grid; gap: clamp(16px, 1.6vw, 24px); }
.pe-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pe-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Six people per group: three across down to tablets, two on phones; every row stays full. */
.pe-grid--people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.pe-grid--work { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) {
	.pe-grid--3, .pe-grid--work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.pe-grid--2, .pe-grid--3 { grid-template-columns: minmax(0, 1fr); }
	.pe-grid--people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Cards ---------- */
.pe-card { position: relative; }
.pe-card--link { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pe-card--link > * + * { margin-block-start: 0; }
.pe-card__media { margin: 0; overflow: hidden; background: var(--wp--preset--color--color-background-dark); }
.pe-card__media img { display: block; width: 100%; transition: transform var(--wp--custom--motion--duration-long) var(--wp--custom--motion--easing-out); }
.pe-card--link:hover .pe-card__media img { transform: scale(1.035); }
.pe-card__body { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; flex: 1; }
.pe-card__body > * { margin: 0; }
.pe-card__body > * + * { margin-block-start: 10px; }
.pe-card__body h3 { font-size: var(--wp--preset--font-size--h-4); }
.pe-card__body h3 a { display: block; padding-block: 2px; color: inherit; text-decoration: none; }
.pe-card__body h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pe-card__body h3 a:focus-visible { outline: none; }
.pe-card--link:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--color-highlight); outline-offset: 3px; }
.pe-card__more { margin-block-start: auto !important; padding-top: 14px; font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--color-accent); }
.pe-card__more::after { content: " →"; transition: margin var(--wp--custom--motion--duration-short) var(--wp--custom--motion--easing-out); }
.pe-card--link:hover .pe-card__more::after { margin-left: 4px; }
.pe-card__num, .pe-step__num {
	font-family: var(--wp--preset--font-family--geist-mono); font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.08em; color: var(--wp--preset--color--color-accent); margin: 0;
}
.pe-card > .pe-card__num + h3 { margin-block-start: 18px; }
.pe-card h3 { font-size: var(--wp--preset--font-size--h-4); }

/* ---------- Steps ---------- */
.pe-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); counter-reset: step; }
.pe-step { position: relative; padding-top: 28px; border-top: 1px solid var(--wp--preset--color--color-line); }
.pe-step::before {
	content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%;
	background: var(--wp--preset--color--color-accent); box-shadow: 0 0 0 4px rgba(48, 112, 168, 0.14);
}
.pe-step > * { margin: 0; }
.pe-step h3 { font-size: var(--wp--preset--font-size--h-4); margin-block-start: 14px; }
.pe-step__list { list-style: none; padding: 0; margin-block-start: 12px !important; color: var(--wp--preset--color--color-text-secondary); }
.pe-step__list li + li { margin-top: 8px; }
.pe-step .pe-muted { margin-block-start: 12px; }
.pe-dark .pe-step { border-color: var(--wp--preset--color--color-line-dark); }
@media (max-width: 1023px) { .pe-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 599px) { .pe-steps { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } }

/* ---------- Compare (home) ---------- */
.pe-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.pe-compare__col { border-radius: var(--wp--custom--radius--large); padding: clamp(24px, 3vw, 44px); }
.pe-compare__col--them { background: var(--wp--preset--color--color-surface-light); border: 1px solid var(--wp--preset--color--color-line); }
.pe-compare__col--us {
	background:
		radial-gradient(600px 300px at 90% 0%, rgba(26, 179, 245, 0.16), transparent 60%),
		var(--wp--preset--color--color-background-dark);
	color: var(--wp--preset--color--color-text-on-dark);
}
.pe-compare__label { font-size: var(--wp--preset--font-size--h-4); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.pe-compare__list { list-style: none; padding: 0; margin: 24px 0 0; }
.pe-compare__list li { position: relative; padding: 16px 0 16px 34px; border-top: 1px solid var(--wp--preset--color--color-line); }
.pe-compare__col--us .pe-compare__list li { border-top-color: var(--wp--preset--color--color-line-dark); }
.pe-compare__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; }
.pe-compare__col--them li { color: var(--wp--preset--color--color-text-secondary); }
.pe-compare__col--them li::before { border: 1.5px solid #b5bcc7; background: linear-gradient(45deg, transparent 46%, #b5bcc7 46%, #b5bcc7 56%, transparent 56%); }
.pe-compare__col--us li::before { border: 1.5px solid var(--wp--preset--color--color-highlight); background: radial-gradient(circle, var(--wp--preset--color--color-highlight) 0 3.5px, transparent 4px), rgba(26, 179, 245, 0.12); box-shadow: 0 0 14px rgba(26, 179, 245, 0.4); box-sizing: border-box; }
.pe-compare__col--them li::before { box-sizing: border-box; }
@media (max-width: 767px) { .pe-compare { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Features with icons (ownership band) ---------- */
.pe-features { row-gap: clamp(32px, 4vw, 56px); column-gap: clamp(24px, 3vw, 48px); }
.pe-feature > * { margin: 0; }
.pe-feature::before {
	content: ""; display: block; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px;
	background-color: rgba(26, 179, 245, 0.1); border: 1px solid rgba(26, 179, 245, 0.25);
	background-image: none;
}
.pe-feature { position: relative; }
.pe-feature::after {
	content: ""; position: absolute; top: 11px; left: 11px; width: 22px; height: 22px;
	background: var(--wp--preset--color--color-highlight);
	-webkit-mask: var(--pe-icon) center / contain no-repeat; mask: var(--pe-icon) center / contain no-repeat;
}
.pe-feature h3 { font-size: var(--wp--preset--font-size--h-4); }
.pe-feature .pe-muted { margin-block-start: 10px; }
.pe-icon--server { --pe-icon: url(../../icons/server.svg); }
.pe-icon--lock { --pe-icon: url(../../icons/lock.svg); }
.pe-icon--stack-2 { --pe-icon: url(../../icons/stack-2.svg); }
.pe-icon--wifi-off { --pe-icon: url(../../icons/wifi-off.svg); }
.pe-icon--book { --pe-icon: url(../../icons/book.svg); }
.pe-icon--headset { --pe-icon: url(../../icons/headset.svg); }

/* ---------- Client names (home) ---------- */
.pe-names { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0; }
.pe-names li {
	font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.5;
	color: var(--wp--preset--color--color-text-secondary);
}
.pe-names li:not(:last-child)::after { content: "/"; margin: 0 0.5em; color: var(--wp--preset--color--color-line); font-weight: 300; }
.pe-names + .pe-link-arrow { margin-block-start: 32px; }

/* ---------- Split: aside heading + main content ---------- */
.pe-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.pe-split__aside > * { margin: 0; }
.pe-split__aside > * + * { margin-block-start: 16px; }
.pe-split__aside h2 { margin-block-start: 14px; }
.pe-split__aside .pe-link-arrow { margin-block-start: 24px; }
.pe-split__main > * { margin-block: 0; }
@media (min-width: 1024px) { .pe-split__aside { position: sticky; top: calc(var(--wp--custom--header-height) + 32px); } }
@media (max-width: 1023px) { .pe-split { grid-template-columns: minmax(0, 1fr); } }

.pe-checks--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.pe-checks--grid li { padding-block: 16px; padding-left: 32px; border-top: 1px solid var(--wp--preset--color--color-line); margin: 0 !important; }
.pe-checks--grid li::before { top: calc(16px + 0.45em); }
@media (max-width: 767px) { .pe-checks--grid { grid-template-columns: minmax(0, 1fr); } }

.pe-faq-list { margin: 0; }
.pe-faq-list .wp-block-details:first-child { border-top: 0; padding-top: 0; }
.pe-faq-list .wp-block-details { margin: 0; }

/* ---------- Call to action band ---------- */
.pe-s-cta {
	background:
		radial-gradient(900px 420px at 85% 120%, rgba(48, 112, 168, 0.32), transparent 60%),
		var(--wp--preset--color--color-background-dark);
}
.pe-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.pe-cta__copy > * { margin: 0; }
.pe-cta__copy h2 { margin-block-start: 16px; font-size: var(--wp--preset--font-size--h-2); }
.pe-cta__actions > * { margin: 0; }
.pe-cta__direct { margin-block-start: 24px !important; line-height: 1.9; color: var(--wp--preset--color--color-text-on-dark-secondary); }
.pe-cta__direct a { text-decoration: none; }
.pe-cta__direct a:hover { text-decoration: underline; }
@media (max-width: 1023px) { .pe-cta { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 599px) {
	.pe-cta .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.pe-cta .wp-block-button__link { width: 100%; justify-content: center; }
}

/* ---------- Inner page hero ---------- */
/* Bottom padding = the section padding, so a phone never shows more than about 100px between blocks. */
.pe-page-hero { padding-top: clamp(40px, 1rem + 6vw, 120px); padding-bottom: var(--wp--preset--spacing--section); background: var(--wp--preset--color--color-background-light); }
.pe-page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pe-page-hero__copy > * { margin: 0; }
.pe-page-hero__copy h1 { margin-block-start: 16px; font-size: var(--wp--preset--font-size--h-1); }
.pe-page-hero__copy .pe-lead { margin-block-start: 22px; }
.pe-page-hero__copy .wp-block-buttons { margin-block-start: 32px; }
.pe-page-hero--plain .pe-page-hero__copy > * { max-width: 880px; }
/* A plain hero followed by a section on the same background: no double padding between them. */
.pe-page-hero--plain + .pe-section:not(.pe-surface):not(.pe-dark) { padding-top: 0; }
.pe-page-hero__media { margin: 0; box-shadow: 0 30px 80px -30px rgba(15, 18, 22, 0.45); }
.pe-crumbs a { color: inherit; text-decoration: none; }
.pe-crumbs a:hover { text-decoration: underline; }
@media (max-width: 899px) {
	.pe-page-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.pe-page-hero__media img { aspect-ratio: 16 / 10 !important; }
}
@media (max-width: 599px) {
	.pe-page-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.pe-page-hero .wp-block-button__link { width: 100%; justify-content: center; }
}

/* ---------- People ---------- */
.pe-person > * { margin: 0; }
.pe-person__photo { margin: 0; border-radius: var(--wp--custom--radius--medium); overflow: hidden; background: #10151c; }
.pe-person__photo img { display: block; width: 100%; filter: saturate(0.92); transition: filter var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-out), transform var(--wp--custom--motion--duration-long) var(--wp--custom--motion--easing-out); }
.pe-person:hover .pe-person__photo img { filter: none; transform: scale(1.02); }
.pe-person__name { font-size: var(--wp--preset--font-size--body-large); font-weight: 600; letter-spacing: -0.01em; margin-block-start: 16px !important; }
.pe-person__role { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--color-text-secondary); margin-block-start: 4px !important; line-height: 1.45; }
/* AI employees: a small "AI" mark on the avatar (the section heading says it in words). */
.pe-person--ai .pe-person__photo { position: relative; }
.pe-person--ai .pe-person__photo::after {
	content: "AI";
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 3px 9px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.5;
	color: var(--wp--preset--color--color-text-on-dark);
	background: rgba(6, 14, 26, 0.72);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--color-highlight) 55%, transparent);
}

/* ---------- Portfolio ---------- */
.pe-work { background: var(--wp--preset--color--color-surface-light); border: 1px solid var(--wp--preset--color--color-line); border-radius: var(--wp--custom--radius--medium); overflow: hidden; display: flex; flex-direction: column; }
.pe-work > * { margin: 0; }
.pe-work__logo { margin: 0; background: #fff; border-bottom: 1px solid var(--wp--preset--color--color-line); }
.pe-work__logo img { display: block; width: 100%; padding: 12%; box-sizing: border-box; }
.pe-work__body { padding: 18px 20px 22px; }
.pe-work__body > * { margin: 0; }
.pe-work__body h3 { font-size: var(--wp--preset--font-size--body-large); font-weight: 600; letter-spacing: -0.01em; }
.pe-work__body .pe-muted { margin-block-start: 6px; line-height: 1.5; }
@media (max-width: 599px) {
	.pe-grid--work { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pe-work { flex-direction: row; align-items: center; }
	.pe-work__logo { flex: 0 0 88px; border-bottom: 0; border-right: 1px solid var(--wp--preset--color--color-line); align-self: stretch; display: flex; align-items: center; }
	.pe-work__logo img { padding: 10px; }
	.pe-work__body { padding: 14px 16px; }
}

/* ---------- Case studies ---------- */
.pe-cases { display: grid; gap: clamp(16px, 2vw, 24px); }
.pe-case { background: var(--wp--preset--color--color-surface-light); border: 1px solid var(--wp--preset--color--color-line); border-radius: var(--wp--custom--radius--large); padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); }
.pe-case > * { margin: 0; }
.pe-case__head { display: flex; gap: 20px; align-items: flex-start; }
.pe-case__head > * { margin: 0; }
.pe-case__logo { flex: 0 0 72px; margin: 0; border: 1px solid var(--wp--preset--color--color-line); border-radius: var(--wp--custom--radius--small); overflow: hidden; background: #fff; }
.pe-case__logo img { display: block; width: 100%; padding: 8px; box-sizing: border-box; }
.pe-case__title > * { margin: 0; }
.pe-case__title h3 { font-size: var(--wp--preset--font-size--h-4); margin-block-start: 8px; }
.pe-case__title .pe-muted { margin-block-start: 6px; font-size: var(--wp--preset--font-size--small); }
.pe-case__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pe-case__rows > * { margin: 0; }
.pe-case__row > * { margin: 0; }
.pe-case__k { font-family: var(--wp--preset--font-family--geist-mono); font-size: var(--wp--preset--font-size--label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--color-accent); }
.pe-case__row p + p { margin-block-start: 10px; color: var(--wp--preset--color--color-text-secondary); }
@media (max-width: 1023px) { .pe-case { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .pe-case__rows { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ---------- FAQ page ---------- */
.pe-faq { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.pe-faq__nav > * { margin: 0; }
.pe-toc { list-style: none; padding: 0; margin-block-start: 16px !important; }
.pe-toc li + li { margin-top: 4px; }
.pe-toc a { display: block; padding: 8px 0; color: var(--wp--preset--color--color-text-primary); text-decoration: none; font-weight: 500; }
.pe-toc a:hover { color: var(--wp--preset--color--color-accent); }
.pe-faq__main > * { margin: 0; }
.pe-faq__group + .pe-faq__group { margin-block-start: clamp(56px, 6vw, 96px); }
.pe-faq__group > * { margin: 0; }
.pe-faq__group h2 { font-size: var(--wp--preset--font-size--h-3); }
.pe-faq__group > .pe-muted { margin-block-start: 8px; }
.pe-faq__group .pe-faq-list { margin-block-start: 28px; }
.pe-faq__group .pe-faq-list .wp-block-details:first-child { border-top: 1px solid var(--wp--preset--color--color-line); padding-top: 20px; }
.pe-faq__group { scroll-margin-top: calc(var(--wp--custom--header-height) + 24px); }
@media (min-width: 1024px) { .pe-faq__nav { position: sticky; top: calc(var(--wp--custom--header-height) + 32px); } }
@media (max-width: 1023px) {
	.pe-faq { grid-template-columns: minmax(0, 1fr); }
	.pe-toc { display: flex; flex-wrap: wrap; gap: 8px; }
	.pe-toc li + li { margin: 0; }
	.pe-toc a { padding: 8px 14px; border: 1px solid var(--wp--preset--color--color-line); border-radius: 999px; background: var(--wp--preset--color--color-surface-light); font-size: var(--wp--preset--font-size--small); }
}

/* ---------- Contact ---------- */
/* Wide screens: the intro fills the first screen beside the background figure (page-video-bg.js);
   the details (kept in view while the form scrolls) and the form follow below. */
.pe-contact {
	display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start;
	grid-template-areas: "intro ." "info form"; gap: clamp(48px, 6vw, 96px) clamp(32px, 6vw, 112px);
}
.pe-contact__intro { grid-area: intro; }
.pe-contact__info { grid-area: info; }
.pe-contact__form { grid-area: form; scroll-margin-top: 104px; }
.pe-contact__intro > *, .pe-contact__info > * { margin: 0; }
.pe-contact__intro h1 { margin-block-start: 16px; font-size: var(--wp--preset--font-size--h-1); }
.pe-contact__intro .pe-lead { margin-block-start: 22px; }
.pe-contact__intro .wp-block-buttons { margin-block-start: 36px; }
@media (min-width: 1024px) {
	.pe-contact__intro { min-height: min(calc(100svh - 260px), 720px); display: flex; flex-direction: column; justify-content: center; }
	.pe-contact__info { position: sticky; top: 120px; padding-block-start: clamp(24px, 3vw, 40px); }
}
.pe-contact__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.pe-contact__list > * { margin: 0; }
.pe-contact__item > * { margin: 0; }
.pe-contact__k { font-family: var(--wp--preset--font-family--geist-mono); font-size: var(--wp--preset--font-size--label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--color-text-secondary); }
.pe-contact__v { margin-block-start: 6px !important; font-size: var(--wp--preset--font-size--body-large); font-weight: 500; }
.pe-contact__v a { color: inherit; text-decoration: none; }
.pe-contact__v a:hover { color: var(--wp--preset--color--color-accent); text-decoration: underline; }
.pe-contact__form { padding: clamp(24px, 3vw, 40px); border-radius: var(--wp--custom--radius--large); }
.pe-contact__form-title { font-size: var(--wp--preset--font-size--h-3); margin: 0; }
.pe-contact__form .pe-small { margin-block-start: 16px; }
@media (max-width: 1023px) { .pe-contact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "info" "form"; row-gap: 40px; } }
@media (max-width: 599px) {
	.pe-contact__list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.pe-contact__intro .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.pe-contact__intro .wp-block-button__link { justify-content: center; width: 100%; }
}

/* ---------- Articles (query loop) and posts ---------- */
.pe-posts .wp-block-post-template { gap: clamp(16px, 1.6vw, 24px); }
.pe-posts .wp-block-post {
	position: relative; display: flex; flex-direction: column; margin: 0;
	background: var(--wp--preset--color--color-surface-light); border: 1px solid var(--wp--preset--color--color-line);
	border-radius: var(--wp--custom--radius--medium); overflow: hidden; box-shadow: var(--wp--custom--shadow--card);
	transition: box-shadow var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-out), transform var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-out);
}
.pe-posts .wp-block-post:hover { box-shadow: var(--wp--custom--shadow--lift); transform: translateY(-2px); }
.pe-posts .wp-block-post > * { margin: 0; padding-inline: clamp(20px, 2vw, 28px); }
.pe-posts .pe-post__media { padding: 0; margin: 0 0 20px; background: var(--wp--preset--color--color-background-dark); }
.pe-posts .pe-post__media img { display: block; width: 100%; }
.pe-posts .wp-block-post > :first-child:not(.pe-post__media) { padding-top: clamp(20px, 2vw, 28px); }
.pe-post__date { font-family: var(--wp--preset--font-family--geist-mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--color-text-secondary); }
.pe-posts .pe-post__title { font-size: var(--wp--preset--font-size--h-4); margin-block-start: 10px !important; }
.pe-posts .pe-post__title a { color: inherit; text-decoration: none; }
.pe-posts .pe-post__title a::after { content: ""; position: absolute; inset: 0; }
.pe-posts .pe-post__excerpt { margin-block-start: 10px !important; padding-bottom: clamp(20px, 2vw, 28px); color: var(--wp--preset--color--color-text-secondary); }
.pe-posts .pe-post__excerpt p { margin: 0; }
.pe-posts .wp-block-post-excerpt__more-text { display: none; }
.pe-pagination { margin-block-start: clamp(24px, 3vw, 48px); font-weight: 600; align-items: center; }
.pe-pagination a { color: var(--wp--preset--color--color-text-primary); text-decoration: none; display: inline-block; padding: 10px 4px; }
.pe-pagination .wp-block-query-pagination-numbers > * { display: inline-block; min-width: 40px; padding: 10px 8px; text-align: center; box-sizing: border-box; }
.pe-pagination .current { color: var(--wp--preset--color--color-accent); }

.pe-s-post-head .pe-page-hero__copy > * { max-width: 860px; }
.pe-s-post-head .wp-block-post-terms a { color: inherit; text-decoration: none; display: inline-block; padding-block: 4px; }
.pe-s-post-head .pe-post__date { margin-block-start: 20px; }
.pe-s-post { padding-top: 0; }
.pe-post__hero { margin-block: 0 clamp(40px, 5vw, 72px) !important; }
.pe-post__hero img { display: block; width: 100%; }
.pe-prose { font-size: var(--wp--preset--font-size--body-large); line-height: 1.7; }
.pe-prose img { border-radius: var(--wp--custom--radius--medium); }
.pe-post-nav { margin-block-start: clamp(32px, 4vw, 56px) !important; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--color-line); }
.pe-post-nav > * { margin: 0; }
.pe-post-nav a { display: inline-flex; padding-block: 8px; }
.pe-s-page-body { padding-top: 0; }
.pe-search { max-width: 560px; margin-block-start: 28px !important; }

/* Privacy Policy and Terms of Service: one reading column under the page title */
.pe-legal { max-width: 46rem; }
.pe-legal > :first-child { margin-block-start: 0; }

/* Contact form (built into the theme: inc/contact-form.php) */
.pe-form form > p { margin: 0; }
.pe-form form > p + p { margin-top: 18px; }
.pe-field { display: block; }
.pe-field > span:first-child { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 600; margin-bottom: 8px; }
.pe-form .pe-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pe-form input[type="text"], .pe-form input[type="email"], .pe-form input[type="tel"], .pe-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--wp--preset--color--color-text-primary);
	background: var(--wp--preset--color--color-background-light); border: 1px solid var(--wp--preset--color--color-line);
	border-radius: var(--wp--custom--radius--small); padding: 13px 14px; min-height: 48px;
	transition: border-color var(--wp--custom--motion--duration-short) var(--wp--custom--motion--easing-out), box-shadow var(--wp--custom--motion--duration-short) var(--wp--custom--motion--easing-out), background-color var(--wp--custom--motion--duration-short) var(--wp--custom--motion--easing-out);
}
.pe-form textarea { min-height: 160px; resize: vertical; }
.pe-form input::placeholder, .pe-form textarea::placeholder { color: #8a929e; }
.pe-form input:focus, .pe-form textarea:focus { outline: none; border-color: var(--wp--preset--color--color-accent); background: #fff; box-shadow: 0 0 0 3px rgba(48, 112, 168, 0.18); }
.pe-form .pe-submit {
	font: inherit; font-weight: 600; font-size: var(--wp--preset--font-size--button); cursor: pointer;
	background: var(--wp--preset--color--color-accent); color: #fff; border: 0; border-radius: 999px; padding: 14px 28px; min-height: 48px;
	transition: background-color var(--wp--custom--motion--duration-short) var(--wp--custom--motion--easing-out);
}
.pe-form .pe-submit:hover { background: var(--wp--preset--color--color-text-primary); }
.pe-form__notice { margin: 0 0 22px; padding: 12px 14px; border-radius: var(--wp--custom--radius--small); font-size: var(--wp--preset--font-size--small); border: 1px solid; }
.pe-form__notice.is-ok { background: rgba(90, 159, 203, 0.14); border-color: rgba(90, 159, 203, 0.45); }
.pe-form__notice.is-error { background: rgba(180, 35, 24, 0.16); border-color: rgba(240, 120, 110, 0.5); }
.pe-form__notice a { color: inherit; text-decoration: underline; }
@media (max-width: 599px) { .pe-form .pe-submit { width: 100%; } }

/* ---------- Dark only (owner 2026-11-11: "I want dark mode only, not mixed") ----------
   theme.json maps the former light tokens to dark values (page #0F1216, surfaces #161B21, text #F2F4F7 /
   #A3ABB8, hairlines #2A313B), so every section, card, header, footer and form is dark. The rules below
   fix what the token swap cannot: the logo blue used as TEXT (3.4:1 on dark, below the 4.5:1 minimum)
   becomes the lighter accent; white boxes become dark ones; client logos (mostly transparent PNGs with
   dark lettering that would vanish on dark) sit on a small light badge instead of a white tile. */
::selection { background: rgba(26, 179, 245, 0.3); }
body { background: var(--wp--preset--color--color-background-dark); }

/* Labels and small links in the accent colour */
.pe-eyebrow, .pe-accent, .pe-card__more, .pe-card__num, .pe-step__num, .pe-case__k,
.pe-toc a:hover, .pe-contact__v a:hover, .pe-pagination .current, .pe-footer a:hover,
.wp-block-details summary::after { color: var(--wp--preset--color--color-accent-muted); }
.pe-dark .pe-accent { color: var(--wp--preset--color--color-highlight); }
.pe-step::before { box-shadow: 0 0 0 4px rgba(26, 179, 245, 0.16); }

/* Buttons: one style everywhere (blue, white text); the light button inside dark bands goes */
.pe-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--wp--preset--color--color-accent); color: var(--wp--preset--color--color-text-on-dark); }
.pe-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--wp--preset--color--color-highlight); color: var(--wp--preset--color--color-background-dark); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--color-accent-muted); }

/* Cards */
a.pe-card:hover, .pe-card.is-link:hover { border-color: #3A4452; }

/* Header and menus */
.pe-header::before { background: rgba(15, 18, 22, 0.86); }
.pe-header .wp-block-navigation-item__content:hover { background: rgba(242, 244, 247, 0.07); }
.pe-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.pe-header .wp-block-navigation-item__content[aria-current="page"] { background: rgba(90, 159, 203, 0.16); color: var(--wp--preset--color--color-text-primary); }
.pe-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.pe-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--color-accent-muted); }
/* Services dropdown (owner 2026-11-12: "barely visible, make it lighter"). WordPress's own navigation CSS
   (links "color: inherit", submenu colour #000) left its links black on the dark panel. The panel is now a
   clear step lighter than the page, with a visible edge, and the links are near-white. */
.pe-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: #262E39; border-color: #3E4957; color: var(--wp--preset--color--color-text-primary);
	box-shadow: 0 24px 56px -18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pe-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--color-text-primary); }
.pe-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(90, 159, 203, 0.22); color: #FFFFFF; }
/* Phone and tablet menu: WordPress paints the open menu white with black text
   (".wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open",
   four classes, beat the base rule); it is dark like the rest of the site. */
.pe-header .pe-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--color-background-dark); color: var(--wp--preset--color--color-text-primary);
}
.pe-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent; border: 0; box-shadow: none; }
/* The logo's blue lettering is drawn for a white page: lifted so it reads on dark (same colours, brighter). */
.wp-block-site-logo img { filter: brightness(1.45) saturate(1.1); }

/* Page heroes and images */
.pe-page-hero__media { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); }

/* Client logos (owner 2026-11-11): 14 of the 21 logos are mostly unreadable on dark without changing their
   colours (80-100% of their pixels under 3:1 contrast), so each sits in a light gradient container that makes
   it pop, inside the dark card; the logos themselves are untouched. */
.pe-work__logo { background: var(--wp--preset--color--color-surface-dark); display: flex; align-items: center; justify-content: center; padding: clamp(18px, 3vw, 32px); }
.pe-work__logo img, .pe-case__logo img {
	background: radial-gradient(130% 120% at 28% 18%, #FFFFFF 0%, #EEF2F7 46%, #D3DCE7 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px -16px rgba(26, 179, 245, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
	object-fit: contain; box-sizing: border-box;
}
.pe-work__logo img { border-radius: 18px; padding: 14%; max-height: 220px; width: auto; aspect-ratio: 1 / 1; transition: transform var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-out), box-shadow var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-out); }
.pe-work:hover .pe-work__logo img { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 40px -14px rgba(26, 179, 245, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pe-case__logo img { padding: 10%; width: 100%; height: 100%; }
.pe-case__logo { background: none; border-color: transparent; overflow: visible; }

/* Contact form */
.pe-form input:focus, .pe-form textarea:focus { background: var(--wp--preset--color--color-surface-dark); box-shadow: 0 0 0 3px rgba(90, 159, 203, 0.25); }
.pe-form input::placeholder, .pe-form textarea::placeholder { color: #7C8592; }
/* ---------- Services: the orb in place of the hero photo (owner 2026-11-11; assets/js/components/services-orb.js) ---------- */
.pe-page-hero__media.has-orb { position: relative; box-shadow: none; border-radius: 0; overflow: visible; background: transparent; }
.pe-page-hero__media.has-orb img { visibility: hidden; }
.pe-page-hero__media.has-orb .pe-orb { position: absolute; inset: -8% -8% -8% -8%; width: 116%; height: 116%; display: block; }
@media (max-width: 781px) { .pe-page-hero__media.has-orb .pe-orb { inset: -4%; width: 108%; height: 108%; } }
/* ---------- FAQ: particle swarm behind the page (owner 2026-11-11; assets/js/components/faq-particles.js) ---------- */
.pe-particles { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
.pe-particles-on .wp-site-blocks { position: relative; z-index: 1; }
.pe-particles-on .pe-page-hero, .pe-particles-on .pe-s-faq { background: transparent; }
/* The answers keep a calm, readable panel over the field. */
.pe-particles-on .pe-s-faq .pe-faq__main, .pe-particles-on .pe-s-faq .pe-faq__nav {
	background: rgba(15, 18, 22, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid var(--wp--preset--color--color-line); border-radius: var(--wp--custom--radius--large);
	padding: clamp(20px, 3vw, 40px);
}
.pe-particles-on .pe-s-faq .pe-faq__nav { align-self: start; }
/* ---------- Video backgrounds: Articles and Contact (owner 2026-11-11; assets/js/components/page-video-bg.js) ---------- */
.pe-vbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--wp--preset--color--color-background-dark); }
.pe-vbg__media { position: absolute; display: block; }
.pe-vbg__scrim { position: absolute; inset: 0; }
.pe-vbg-on .wp-site-blocks { position: relative; z-index: 1; }
.pe-vbg-on .pe-page-hero, .pe-vbg-on .pe-s-posts, .pe-vbg-on .pe-s-contact { background: transparent; }

/* Articles: the portal fills the page; darker at the left (headline) and lower down (the cards). */
.pe-vbg--cover .pe-vbg__media { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-vbg--moon-walk .pe-vbg__scrim {
	background:
		linear-gradient(90deg, rgba(15, 18, 22, 0.72) 0%, rgba(15, 18, 22, 0.38) 45%, rgba(15, 18, 22, 0.28) 100%),
		linear-gradient(180deg, rgba(15, 18, 22, 0.15) 0%, rgba(15, 18, 22, 0.45) 55%, rgba(15, 18, 22, 0.72) 100%);
}
.pe-vbg-on .pe-s-posts .wp-block-post { background: rgba(22, 27, 33, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Contact: the figure on the right, its black frame faded into the page. */
.pe-vbg--side { background: #07090B; }
.pe-vbg--side .pe-vbg__media {
	right: -3vw; bottom: -2vh; width: min(64vw, 1180px); aspect-ratio: 2910 / 2176; height: auto; object-fit: cover;
	-webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 55%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 48% 50% at 50% 55%, #000 58%, transparent 100%);
}
.pe-vbg--metal-human .pe-vbg__scrim { background: linear-gradient(90deg, rgba(7, 9, 11, 0.55) 0%, rgba(7, 9, 11, 0.1) 50%, transparent 100%); }
.pe-vbg-on .pe-s-contact .pe-contact__form { background: rgba(22, 27, 33, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 899px) {
	.pe-vbg--side .pe-vbg__media { right: auto; left: 50%; bottom: 0; width: 170vw; transform: translateX(-50%); }
	.pe-vbg--metal-human .pe-vbg__scrim { background: rgba(7, 9, 11, 0.6); }
}

/* ---------- Layered pages (owner 2026-11-12: "make all items layered"; "the containers on all pages should be
   a little transparent in order for the animations to appear a little through them") ----------
   Every page except Services has an animated layer behind the whole page: the ink fluid on Home and
   Portfolio (home-fluid.js), the Flow Wave field on every page without one of its own (page-flow-wave.js),
   the FAQ particles and the Articles / Contact videos. The page lies over it: section bands have no colour
   of their own, and the containers (cards, panels, the form, the footer) are slightly see-through glass. */
.pe-fluid-bg, .pe-flow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.pe-fluid-bg .pe-fluid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms cubic-bezier(0.2, 0, 0, 1); }
.pe-fluid-bg .pe-fluid.is-running { opacity: 1; }
.pe-fluid-bg__scrim, .pe-fluid-bg__scrim::before, .pe-fluid-bg__scrim::after { position: absolute; inset: 0; }
.pe-fluid-bg__scrim::before, .pe-fluid-bg__scrim::after { content: ""; }
/* First screen: darker behind the copy, the ink in full colour around it; further down an even veil, so
   text over the ink reads easily (home-fluid.js sets --pe-deep from 0 to 1 over the first screen). */
.pe-fluid-bg__scrim::before {
	background: radial-gradient(115% 95% at 30% 46%,
		rgba(15, 18, 22, 0.68) 0%, rgba(15, 18, 22, 0.68) 24%, rgba(15, 18, 22, 0.46) 52%, rgba(15, 18, 22, 0.12) 100%);
	opacity: calc(1 - var(--pe-deep, 0));
}
.pe-fluid-bg__scrim::after { background: rgba(15, 18, 22, 0.6); opacity: var(--pe-deep, 0); }
@media (max-width: 899px) {
	.pe-fluid-bg__scrim::before {
		background: radial-gradient(130% 80% at 50% 32%,
			rgba(15, 18, 22, 0.72) 0%, rgba(15, 18, 22, 0.66) 30%, rgba(15, 18, 22, 0.46) 60%, rgba(15, 18, 22, 0.16) 100%);
	}
}
/* Flow Wave without WebGL: its own colours, still. The veil over it deepens as the page scrolls. */
.pe-flow { background: radial-gradient(120% 90% at 50% 45%, #02160c 0%, #010c06 100%); }
.pe-flow-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(2, 10, 6, 0.58); opacity: 0; }

/* The page over the layer */
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .wp-site-blocks { position: relative; z-index: 1; }
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) :is(.pe-section, .pe-page-hero, .pe-surface, .pe-dark, .pe-s-cta, .pe-s-diagram, .pe-s-home-hero) { background: transparent; }
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) :is(.pe-card, .pe-work, .pe-case, .pe-compare__col--them, .pe-toc a) {
	background: rgba(22, 27, 33, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .pe-dark .pe-card { background: rgba(26, 31, 38, 0.72); }
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .pe-compare__col--us {
	background: radial-gradient(600px 300px at 90% 0%, rgba(26, 179, 245, 0.16), transparent 60%), rgba(15, 18, 22, 0.66);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--wp--preset--color--color-line);
}
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .pe-work__logo { background: transparent; }
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .pe-diagram__visual { background: rgba(15, 18, 22, 0.55); }
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .pe-footer {
	background: rgba(22, 27, 33, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* Text lying straight on a moving field: a soft dark halo keeps the letters clean; outline buttons get a
   light glass fill so the field does not run through their labels. */
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .wp-site-blocks :is(h1, h2, h3, p, li, .pe-eyebrow) {
	text-shadow: 0 0 18px rgba(2, 8, 6, 0.75), 0 1px 2px rgba(2, 8, 6, 0.55);
}
/* The header sits on its own solid bar (and the open menu on a solid page): no halo there. */
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .pe-header :is(h1, h2, h3, p, li, .pe-eyebrow) { text-shadow: none; }
body:is(.pe-fluid-on, .pe-flow-on, .pe-particles-on, .pe-vbg-on) .wp-block-button.is-style-outline > .wp-block-button__link {
	background: rgba(15, 18, 22, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}