/*
 * Chris Erbstoesser by Pencil: main stylesheet.
 *
 * 1. Fonts      2. Tokens      3. Base        4. Layout
 * 5. Type       6. Buttons     7. Cards/frames 8. Header
 * 9. Sections   10. Pages      11. Footer     12. WPForms
 * 13. Pencil    14. Responsive
 *
 * All component classes use the "ce-" prefix so nothing collides with
 * WordPress core UI classes (Pencil loads the Media Library on the page).
 */

/* 1. Fonts (self-hosted, SIL Open Font License) ------------------------- */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/work-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/work-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/work-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

/* 2. Tokens (Erbstoesser design system) --------------------------------- */
:root {
	--ink: #0d0d0c;
	--ink-elevated: #171613;
	--paper: #f7f4ee;
	--paper-pure: #ffffff;
	--accent: #004af7;
	--accent-active: #0038ba;
	--accent-soft: #e8effe;
	--gray-500: #7a766f;
	--gray-300: #b8b4ac;
	--gray-200: #ddd9d0;
	--gray-100: #efece5;
	--success: #1c8a52;
	--error: #c8102e;
	--hairline: #e1ddd4;
	--hairline-on-dark: #33322e;
	--text-body: #4a4744;
	--text-muted: #7a766f;
	--text-on-dark: #f7f4ee;
	--text-on-dark-soft: #b8b4ac;
	--text-on-accent: #ffffff;
	--surface-canvas: var(--paper);
	--surface-raised: var(--paper-pure);
	--surface-sunken: var(--gray-100);
	--surface-dark: var(--ink);

	--font-display: "Space Grotesk", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body: "Work Sans", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-xl: 20px;

	--shadow-hard: 4px 4px 0 var(--ink);
	--shadow-hard-pressed: 2px 2px 0 var(--ink);
	--border-hairline: 1px solid var(--hairline);
	--border-hairline-dark: 1px solid var(--hairline-on-dark);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--fast: 120ms;
	--base: 200ms;

	--container: 1240px;
	--gutter: 48px;
	--header-offset: var(--wp-admin--admin-bar--height, 0px);
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:where(h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote) { margin: 0; }

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

body {
	margin: 0;
	background: var(--surface-canvas);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
::selection { background: var(--accent-soft); color: var(--ink); }

.ce-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ce-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius-md);
	font-weight: 600;
	text-decoration: none;
}
.ce-skip-link:focus { top: calc(var(--header-offset) + 12px); color: var(--paper); }

/* 4. Layout --------------------------------------------------------------- */
/* Padded container: max 1240 including gutters (matches the template). */
.ce-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Full-bleed band with a 1240 inner column. */
.ce-band { padding-inline: var(--gutter); }
.ce-band > .ce-container { padding-inline: 0; }
.ce-band__inner { max-width: var(--container); margin-inline: auto; }
.ce-band--sunken { background: var(--surface-sunken); }

.ce-section { padding-block: 80px; }
.ce-section--lg { padding-block: 96px; }
.ce-band.ce-band--sunken > .ce-container.ce-section--lg { padding-inline: 0; }

.ce-section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 40px;
}

.ce-grid { display: grid; gap: 24px; }
.ce-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-grid--tight { gap: 20px; }

.ce-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
}

.ce-btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ce-btn-row--spaced { margin-top: 32px; }

/* 5. Type ------------------------------------------------------------------ */
.ce-eyebrow {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--accent);
	margin-bottom: 16px;
}
.ce-eyebrow--on-dark { color: var(--text-on-dark-soft); letter-spacing: .4px; margin-bottom: 24px; }
.ce-eyebrow--tight { margin-bottom: 8px; }

.ce-h1 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -1.4px;
	color: var(--ink);
	max-width: 780px;
	margin-bottom: 24px;
}
.ce-h1--hero { font-size: 64px; line-height: 1.02; letter-spacing: -2px; color: var(--text-on-dark); max-width: none; }
.ce-h1--portfolio { font-size: 48px; letter-spacing: -1.2px; margin-bottom: 16px; }
.ce-h1--contact { font-size: 44px; letter-spacing: -1.2px; margin-bottom: 20px; }

.ce-h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 32px;
	line-height: 1.15;
	color: var(--ink);
}
.ce-h2--intro { letter-spacing: -.8px; margin-bottom: 20px; }
.ce-h2--tight { margin-bottom: 12px; }
.ce-h2--spaced { margin-bottom: 40px; }
.ce-h2--faq { margin-bottom: 32px; }
.ce-h2--service { font-size: 40px; letter-spacing: -1px; margin-bottom: 20px; line-height: 1.08; }

.ce-h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.15;
	color: var(--ink);
	margin-bottom: 16px;
}
.ce-h3 a { color: inherit; text-decoration: none; }
.ce-h3 a:hover { color: var(--accent); }

.ce-lede { font-size: 17px; line-height: 1.6; color: var(--text-body); max-width: 640px; }
.ce-lede--section { max-width: 600px; margin-bottom: 40px; }
.ce-lede--head { margin-top: 20px; }
.ce-page-head .ce-lede--section, .ce-portfolio .ce-lede--section { max-width: 640px; }

/* Rich text and long copy. */
.ce-prose { font-size: 16px; line-height: 1.6; color: var(--text-body); }
.ce-prose p, .ce-prose ul, .ce-prose ol { margin: 0 0 20px; }
.ce-prose > :last-child { margin-bottom: 0; }
.ce-prose ul, .ce-prose ol { padding-left: 1.25em; }
.ce-prose li + li { margin-top: 6px; }
.ce-prose a { color: var(--accent); text-underline-offset: 2px; }
.ce-prose a:hover { color: var(--ink); }
.ce-prose strong, .ce-prose b { color: var(--ink); font-weight: 600; }
.ce-prose--lg { font-size: 17px; }
.ce-prose--loose { line-height: 1.7; }
.ce-prose--measure { max-width: 720px; }

.ce-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 12px; }

.ce-text-link {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}
.ce-text-link:hover { color: var(--ink); }

.ce-back-link { color: var(--text-muted); font-size: 14px; text-decoration: none; }
.ce-back-link:hover { color: var(--ink); }

/* 6. Buttons ------------------------------------------------------------- */
.ce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.ce-btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.ce-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }

.ce-btn--primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-hard); }
.ce-btn--primary:hover { background: var(--accent); color: var(--ink); transform: translate(2px, 2px); box-shadow: var(--shadow-hard-pressed); }

.ce-btn--accent { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-hard); }
.ce-btn--accent:hover { color: var(--text-on-accent); transform: translate(2px, 2px); box-shadow: var(--shadow-hard-pressed); }

.ce-btn--primary:active, .ce-btn--accent:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

.ce-btn--outline-dark { background: transparent; color: var(--text-on-dark); border: 1.5px solid var(--text-on-dark); }
.ce-btn--outline-dark:hover { color: var(--text-on-dark); border-color: var(--accent); background: rgba(0, 74, 247, .12); }

/* 7. Cards and image frames --------------------------------------------- */
.ce-card {
	position: relative;
	background: var(--surface-raised);
	color: var(--ink);
	border: var(--border-hairline);
	border-radius: var(--radius-lg);
	padding: 32px;
	transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.ce-card--flush { padding: 0; overflow: hidden; }
.ce-card--lift:hover, .ce-card--lift:focus-within { box-shadow: var(--shadow-hard); transform: translate(-2px, -2px); }
.ce-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	color: var(--ink);
	margin-bottom: 10px;
}
.ce-card__title--lg { font-size: 24px; }
.ce-card__title--sm { font-size: 17px; margin-bottom: 8px; }
.ce-card__title a { color: inherit; text-decoration: none; }
.ce-card__text { font-size: 15px; line-height: 1.6; color: var(--text-body); }
.ce-card__text--sm { font-size: 14px; }

/* Whole-card click target via the heading link. */
.ce-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ce-stretched-link:focus-visible { outline: none; }
.ce-card:has(.ce-stretched-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ce-card:has(.ce-stretched-link) { cursor: pointer; }

/* Fixed image frames: the frame owns the ratio, the image is cropped into it. */
.ce-frame {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--surface-sunken);
}
.ce-frame__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.ce-frame__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-muted);
	background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(13, 13, 12, .035) 10px 11px);
}
.ce-frame--card { aspect-ratio: 2 / 1; }
.ce-frame--portrait-home { aspect-ratio: 7 / 5; border-radius: var(--radius-xl); }
.ce-frame--portrait-about { aspect-ratio: 5 / 4; border-radius: var(--radius-xl); }
.ce-frame--case-hero { aspect-ratio: 8 / 3; width: 100%; }
.ce-frame--detail { aspect-ratio: 16 / 9; }

/* 8. Header -------------------------------------------------------------- */
.ce-header {
	position: sticky;
	top: var(--header-offset);
	z-index: 20;
	background: var(--surface-canvas);
	border-bottom: var(--border-hairline);
}
.ce-header-dark .ce-header { background: var(--surface-dark); border-bottom: var(--border-hairline-dark); }

.ce-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px var(--gutter);
}

.ce-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ce-brand__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--ink);
}
.ce-brand__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ce-header-dark .ce-brand__mark { background: var(--paper); }
.ce-header-dark .ce-brand__img { filter: invert(1); }
.ce-brand__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -.3px;
	color: var(--ink);
	white-space: nowrap;
}
.ce-header-dark .ce-brand__name { color: var(--text-on-dark); }

.ce-site-nav { display: flex; align-items: center; gap: 32px; }
.ce-site-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ce-site-nav__list a {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-body);
	text-decoration: none;
}
.ce-site-nav__list a:hover { color: var(--ink); }
.ce-header-dark .ce-site-nav__list a { color: var(--text-on-dark-soft); }
.ce-header-dark .ce-site-nav__list a:hover { color: var(--text-on-dark); }
.ce-site-nav__list .current-menu-item > a,
.ce-site-nav__list .current_page_item > a,
.ce-site-nav__list .current-menu-ancestor > a,
.ce-header-dark .ce-site-nav__list .current-menu-item > a { color: var(--accent); }

.ce-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 26px;
	line-height: 1;
	color: var(--ink);
}
.ce-header-dark .ce-nav-toggle { color: var(--text-on-dark); }
.ce-nav-toggle__close { display: none; }
.ce-nav-toggle[aria-expanded="true"] .ce-nav-toggle__open { display: none; }
.ce-nav-toggle[aria-expanded="true"] .ce-nav-toggle__close { display: inline; }

/* 9. Shared sections ------------------------------------------------------- */
/* Homepage hero */
.ce-hero {
	background: var(--surface-dark);
	color: var(--text-on-dark);
	padding: 96px var(--gutter) 0;
}
.ce-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.ce-hero__lede { font-size: 19px; line-height: 1.55; color: var(--text-on-dark-soft); max-width: 520px; margin-bottom: 40px; }
.ce-hero__lede p { margin: 0 0 12px; }
.ce-hero__lede p:last-child { margin-bottom: 0; }
.ce-hero__glyph { display: flex; justify-content: center; }
.ce-hero__glyph-text {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 180px;
	line-height: 1;
	letter-spacing: -6px;
	color: var(--accent);
}

.ce-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 64px;
	margin-bottom: 0;
	border-top: var(--border-hairline-dark);
}
.ce-stats__item { padding: 28px 24px; border-right: var(--border-hairline-dark); }
.ce-stats__item:first-child { padding-left: 0; }
.ce-stats__item:last-child { border-right: 0; }
.ce-stats__value { font-family: var(--font-mono); font-size: 28px; font-weight: 500; line-height: 1.3; color: var(--accent); }
.ce-stats__label { margin-top: 4px; font-size: 14px; color: var(--text-on-dark-soft); }

/* Homepage intro */
.ce-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}
.ce-intro__more { margin-top: 28px; }

/* Process */
.ce-process {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ce-process__step { border-top: 2px solid var(--ink); padding-top: 16px; }
.ce-process__num { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-bottom: 12px; }
.ce-process__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.ce-process__text { font-size: 14px; line-height: 1.5; color: var(--text-body); }

/* FAQ */
.ce-faq { max-width: 780px; margin-inline: auto; }
.ce-faq__item { border-bottom: var(--border-hairline); }
.ce-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--ink);
}
.ce-faq__q::-webkit-details-marker { display: none; }
.ce-faq__icon {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: 20px;
	color: var(--accent);
	transition: transform var(--base) var(--ease);
}
.ce-faq__item[open] .ce-faq__icon { transform: rotate(45deg); }
.ce-faq__a { max-width: 640px; padding-bottom: 24px; }

/* Dark call-to-action band */
.ce-cta-band {
	background: var(--surface-dark);
	color: var(--text-on-dark);
	text-align: center;
	padding: 96px var(--gutter);
}
.ce-cta-band--xl { padding-block: 112px; }
.ce-cta-band__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 36px;
	line-height: 1.12;
	letter-spacing: -1px;
	max-width: 640px;
	margin: 0 auto 28px;
}
.ce-cta-band__title--xl { font-size: 44px; max-width: 700px; margin-bottom: 20px; }
.ce-cta-band__text { font-size: 17px; color: var(--text-on-dark-soft); max-width: 520px; margin: 0 auto 36px; }

/* 10. Pages ---------------------------------------------------------------- */
.ce-page-head { padding-top: 80px; padding-bottom: 40px; }
.ce-page-head--flush { padding-bottom: 0; }

/* About */
.ce-about-intro {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
	align-items: center;
	padding-top: 48px;
	padding-bottom: 96px;
}
.ce-about-intro .ce-prose p { margin-bottom: 24px; }
.ce-about-intro .ce-prose > :last-child { margin-bottom: 0; }

/* Services */
.ce-service { padding: 96px var(--gutter); border-top: var(--border-hairline); }
.ce-service__grid {
	display: grid;
	grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
	gap: 64px;
}
.ce-svc-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	color: var(--accent);
}
.ce-svc-icon__svg, .ce-svc-icon__svg svg { display: block; width: 40px; height: 40px; }
.ce-svc-icon__svg--sm, .ce-svc-icon__svg--sm svg { width: 30px; height: 30px; }
.ce-glyph { font-family: var(--font-mono); font-size: 40px; line-height: 1; }
.ce-glyph--md { font-size: 30px; }
.ce-glyph--sm { font-size: 20px; }

/* Portfolio */
.ce-portfolio { padding-top: 80px; padding-bottom: 96px; }
.ce-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.ce-filters__terms { display: flex; flex-wrap: wrap; gap: 8px; }
.ce-tag {
	padding: 7px 14px;
	border: var(--border-hairline);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-body);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.ce-tag:hover { color: var(--ink); border-color: var(--gray-300); }
.ce-tag.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ce-project-card[hidden] { display: none; }
.ce-project-card__body { padding: 20px; }
.ce-project-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-muted);
}
.ce-project-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.25;
	color: var(--ink);
}
.ce-project-card__title a { color: inherit; text-decoration: none; }
.ce-portfolio .ce-project-card__title { font-size: 18px; }
.ce-portfolio__cta { margin-top: 72px; text-align: center; }
.ce-portfolio__cta-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 24px;
	color: var(--ink);
	margin-bottom: 20px;
}

/* Case study */
.ce-case__head { padding-top: 64px; }
.ce-case__headline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin: 20px 0 32px;
}
.ce-case__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 44px;
	line-height: 1.08;
	color: var(--ink);
}
.ce-case__summary-region { max-width: 380px; }
.ce-case__summary { font-size: 16px; line-height: 1.5; color: var(--text-body); }
.ce-case__story {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	padding-top: 64px;
	padding-bottom: 64px;
}
.ce-case__h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	color: var(--ink);
	margin-bottom: 16px;
}
.ce-case__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.ce-case__results { padding-top: 64px; padding-bottom: 32px; }
.ce-case__results .ce-prose--measure { max-width: 760px; }
.ce-case__cta { padding: 64px var(--gutter) 96px; text-align: center; }

/* Contact */
.ce-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 64px;
	padding-top: 80px;
	padding-bottom: 120px;
}
.ce-contact__lede { max-width: 420px; margin-bottom: 16px; }
.ce-contact__note { max-width: 420px; margin-bottom: 32px; font-size: 15px; color: var(--text-muted); }
.ce-contact__details { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ce-contact__email { font-family: var(--font-mono); font-size: 15px; color: var(--ink); text-decoration: none; }
.ce-contact__email:hover { color: var(--accent); }
.ce-contact__location { font-size: 15px; color: var(--text-body); }

/* Generic pages, posts, 404 */
.ce-generic { padding-bottom: 96px; }
.ce-entry > * + * { margin-top: 20px; }
.ce-entry h2, .ce-entry h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.ce-post-list { margin: 32px 0 0; padding: 0; list-style: none; }
.ce-post-list__item { padding: 32px 0; border-top: var(--border-hairline); }
.ce-not-found { padding-bottom: 120px; }

/* 11. Footer --------------------------------------------------------------- */
.ce-footer {
	background: var(--surface-dark);
	color: var(--text-on-dark-soft);
	padding: 64px var(--gutter) 32px;
	font-family: var(--font-body);
}
.ce-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 48px;
}
.ce-footer__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -.6px;
	color: var(--text-on-dark);
	max-width: 420px;
	margin-bottom: 20px;
}
.ce-footer__cols { display: flex; flex-wrap: wrap; gap: 48px; }
.ce-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ce-footer__heading {
	margin-bottom: 4px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--text-on-dark);
}
.ce-footer__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ce-footer__list a, .ce-footer__email { color: var(--text-on-dark-soft); text-decoration: none; }
.ce-footer__list a:hover, .ce-footer__email:hover { color: var(--text-on-dark); }
.ce-footer__email { font-family: var(--font-mono); font-size: 13px; }
.ce-footer__location { font-size: 14px; }
.ce-footer__legal {
	padding-top: 20px;
	border-top: var(--border-hairline-dark);
	font-family: var(--font-mono);
	font-size: 12px;
}

/* 12. WPForms (contact form) ---------------------------------------------- */
.ce-form .wpforms-container {
	--wpforms-field-border-radius: var(--radius-md);
	--wpforms-field-border-color: var(--hairline);
	--wpforms-field-background-color: var(--surface-raised);
	--wpforms-field-text-color: var(--ink);
	--wpforms-label-color: var(--ink);
	--wpforms-button-background-color: var(--accent);
	--wpforms-button-text-color: var(--text-on-accent);
	--wpforms-button-border-radius: var(--radius-md);
	--wpforms-field-size-input-height: 48px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-label-size-font-size: 13px;
	margin: 0;
	font-family: var(--font-body);
}
.ce-form .wpforms-form .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.ce-form .wpforms-form .wpforms-field {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}
.ce-form .wpforms-form .wpforms-field.ce-half { grid-column: auto; }
.ce-form .wpforms-form .wpforms-field-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}
.ce-form .wpforms-form .wpforms-required-label { color: var(--text-muted); font-weight: 500; }
.ce-form .wpforms-form input[type="text"],
.ce-form .wpforms-form input[type="email"],
.ce-form .wpforms-form input[type="tel"],
.ce-form .wpforms-form select,
.ce-form .wpforms-form textarea {
	display: block;
	width: 100%;
	max-width: none;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: var(--border-hairline);
	border-radius: var(--radius-md);
	background-color: var(--surface-raised);
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
	outline: none;
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.ce-form .wpforms-form textarea { height: auto; min-height: 150px; padding: 14px 16px; resize: vertical; }
.ce-form .wpforms-form input::placeholder, .ce-form .wpforms-form textarea::placeholder { color: var(--gray-500); opacity: 1; }
.ce-form .wpforms-form input:focus,
.ce-form .wpforms-form select:focus,
.ce-form .wpforms-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ce-form .wpforms-form .wpforms-field input.wpforms-error,
.ce-form .wpforms-form .wpforms-field select.wpforms-error,
.ce-form .wpforms-form .wpforms-field textarea.wpforms-error { border-color: var(--error); box-shadow: 0 0 0 .5px var(--error); }
.ce-form .wpforms-form em.wpforms-error, .ce-form .wpforms-form label.wpforms-error { display: block; margin-top: 6px; font-size: 12px; font-style: normal; color: var(--error); }
.ce-form .wpforms-form .wpforms-field-sublabel, .ce-form .wpforms-form .wpforms-field-description { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.ce-form .wpforms-form .wpforms-submit-container { margin: 20px 0 0; padding: 0; }
.ce-form .wpforms-form button.wpforms-submit,
.ce-form .wpforms-form .wpforms-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--accent);
	color: var(--text-on-accent);
	box-shadow: var(--shadow-hard);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.ce-form .wpforms-form .wpforms-submit:hover,
.ce-form .wpforms-form .wpforms-submit:focus { background: var(--accent); color: var(--text-on-accent); transform: translate(2px, 2px); box-shadow: var(--shadow-hard-pressed); }
.ce-form .wpforms-form .wpforms-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ce-form .wpforms-confirmation-container-full,
.ce-form div[submit-success] > .wpforms-confirmation-container-full {
	margin: 0;
	padding: 32px;
	border: var(--border-hairline);
	border-radius: var(--radius-lg);
	background: var(--surface-raised);
	color: var(--text-body);
	font-size: 16px;
	line-height: 1.6;
}
.ce-form .wpforms-confirmation-container-full p { margin: 0 0 8px; }
.ce-form .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }
.ce-form .wpforms-confirmation-container-full strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }

/* 13. Pencil edit mode ------------------------------------------------------ */
/* Let editors click the text inside clickable cards instead of following the link. */
html.pencil-selection-active .ce-stretched-link::after { display: none; }
html.pencil-selection-active .ce-card--lift:hover { transform: none; }
.pencil-managed-region { min-width: 0; }

/* 14. Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
	:root { --gutter: 32px; }

	.ce-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ce-process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }

	.ce-intro,
	.ce-service__grid,
	.ce-contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.ce-intro .ce-frame--portrait-home { order: -1; max-width: 640px; width: 100%; }

	.ce-h1 { font-size: 52px; }
	.ce-h1--hero { font-size: 52px; }
	.ce-hero__glyph-text { font-size: 120px; }
}

@media (max-width: 860px) {
	.ce-nav-toggle { display: flex; }

	.ce-site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 8px 20px 24px;
		background: var(--surface-canvas);
		border-bottom: var(--border-hairline);
	}
	.ce-header-dark .ce-site-nav { background: var(--surface-dark); border-bottom: var(--border-hairline-dark); }
	.ce-js .ce-site-nav:not(.is-open) { display: none; }
	html:not(.ce-js) .ce-site-nav { position: static; padding-inline: 0; border: 0; }
	html:not(.ce-js) .ce-header__bar { flex-wrap: wrap; }

	.ce-site-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; }
	.ce-site-nav__list a,
	.ce-header-dark .ce-site-nav__list a {
		display: block;
		padding: 12px 0;
		font-family: var(--font-display);
		font-size: 22px;
		font-weight: 600;
		color: var(--ink);
	}
	.ce-header-dark .ce-site-nav__list a { color: var(--text-on-dark); }
	.ce-site-nav__list .current-menu-item > a,
	.ce-header-dark .ce-site-nav__list .current-menu-item > a { color: var(--accent); }
	.ce-site-nav__cta { margin-top: 12px; }
	.ce-site-nav__cta .ce-btn { height: 44px; padding: 0 20px; font-size: 15px; }
}

@media (max-width: 640px) {
	:root { --gutter: 20px; }

	.ce-grid--2,
	.ce-grid--3,
	.ce-split,
	.ce-about-intro,
	.ce-case__story,
	.ce-case__details,
	.ce-process { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ce-form .wpforms-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); }
	.ce-form .wpforms-form .wpforms-field.ce-half { grid-column: 1 / -1; }

	.ce-section,
	.ce-portfolio,
	.ce-contact { padding-block: 56px; }
	.ce-section--lg,
	.ce-service,
	.ce-cta-band,
	.ce-cta-band--xl,
	.ce-about-intro { padding-block: 64px; }
	.ce-about-intro { padding-top: 32px; }
	.ce-page-head { padding-top: 56px; }

	.ce-h1,
	.ce-h1--hero,
	.ce-h1--portfolio,
	.ce-h1--contact { font-size: 40px; letter-spacing: -1px; }
	.ce-h2--service,
	.ce-case__title,
	.ce-cta-band__title--xl { font-size: 30px; letter-spacing: -.6px; }
	.ce-h2,
	.ce-cta-band__title { font-size: 26px; }
	.ce-h3 { font-size: 26px; }

	/* Hero: glyph moves above the copy. */
	.ce-hero { padding-top: 0; }
	.ce-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.ce-hero__glyph { order: -1; justify-content: center; padding: 35px 0; }
	.ce-hero__glyph-text { font-size: 120px; }

	.ce-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
	.ce-stats__item { padding: 20px 12px; }
	.ce-stats__item:first-child { padding-left: 0; }
	.ce-stats__value { font-size: 22px; }

	.ce-case__head { padding-top: 40px; }
	.ce-case__story { padding-block: 48px; }
	.ce-case__cta { padding: 48px var(--gutter) 64px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}