/*
 * Ocean Ronnika: all theme CSS, front end and editor.
 *
 * 1. Token bridge   design token names → theme.json presets
 * 2. Base           page, focus, headings, type styles
 * 3. Components     ported from design/design/components/bundle.css (ap-*)
 * 4. Sections       the homepage sections (or-*)
 * 5. Templates      page, post, blog list
 * 6. Responsive     < 900px (brand book mobile rules)
 *
 * Colours only ever come from the tokens, so the dark style variation
 * (styles/dark.json) re-colours everything. The design's Google Fonts
 * @import is intentionally absent: fonts are self-hosted (theme.json).
 */

/* ---------- 0. Metric-matched fallback fonts ----------
 * Shown while the woff2 files load (font-display: swap). Sized to the web
 * fonts' metrics so text doesn't reflow when they arrive (no layout shift).
 * Values computed with fontTools from the font files against the
 * metric-compatible Arial / Times New Roman (Liberation on Linux). */
@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial"), local("Liberation Sans"), local("Helvetica");
	size-adjust: 99.3%;
	ascent-override: 107.35%;
	descent-override: 30.21%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Instrument Serif Fallback";
	src: local("Times New Roman"), local("Liberation Serif"), local("Times");
	size-adjust: 84.16%;
	ascent-override: 117.63%;
	descent-override: 36.83%;
	line-gap-override: 0%;
}

/* ---------- 1. Token bridge ---------- */
body {
	--paper: var(--wp--preset--color--paper);
	--paper-raised: var(--wp--preset--color--paper-raised);
	--paper-sunk: var(--wp--preset--color--paper-sunk);
	--ink: var(--wp--preset--color--ink);
	--ink-muted: var(--wp--preset--color--ink-muted);
	--line: var(--wp--preset--color--line);
	--line-strong: var(--wp--preset--color--line-strong);
	--pine: var(--wp--preset--color--pine);
	--pine-soft: var(--wp--preset--color--pine-soft);
	--clay: var(--wp--preset--color--clay);
	--clay-soft: var(--wp--preset--color--clay-soft);
	--saffron: var(--wp--preset--color--saffron);
	--on-accent: var(--wp--preset--color--on-accent);
	--night: var(--wp--preset--color--night);
	--night-ink: var(--wp--preset--color--night-ink);
	--night-muted: var(--wp--preset--color--night-muted);
	--focus-ring: var(--wp--preset--color--focus-ring);
	--focus-gap: var(--paper);
	--shadow-soft: var(--wp--preset--shadow--soft);

	--space-1: var(--wp--preset--spacing--space-1);
	--space-2: var(--wp--preset--spacing--space-2);
	--space-3: var(--wp--preset--spacing--space-3);
	--space-4: var(--wp--preset--spacing--space-4);
	--space-5: var(--wp--preset--spacing--space-5);
	--space-6: var(--wp--preset--spacing--space-6);
	--space-7: var(--wp--preset--spacing--space-7);
	--space-8: var(--wp--preset--spacing--space-8);
	--space-9: var(--wp--preset--spacing--space-9);
	--section-pad: var(--space-9);

	--radius-s: 8px;
	--radius-m: 16px;
	--radius-l: 32px;
	--radius-pill: 999px;

	--font-display: var(--wp--preset--font-family--display);
	--font-sans: var(--wp--preset--font-family--sans);
	--font-mono: var(--wp--preset--font-family--mono);
}

/* ---------- 2. Base ---------- */
/* The design's .ap-root sets border-box on everything; padded frames rely on it. */
*, *::before, *::after { box-sizing: border-box; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Header, main and footer sit flush; sections bring their own spacing. */
.wp-site-blocks > * { margin-block: 0; }
.or-flush > * { margin-block: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

/* German compounds overflow large serif headlines without hyphenation. */
:where(h1, h2, h3, .wp-block-post-title) {
	hyphens: auto;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* The one italic accent word per headline (core "italic" format). */
:is(h1, h2, h3) em {
	font-style: italic;
	color: var(--clay);
}

.has-display-xl-font-size { font-family: var(--font-display); font-weight: 400; line-height: .95; letter-spacing: -.02em; }
.has-display-l-font-size { font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: -.015em; }
.has-heading-1-font-size { font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
.has-heading-2-font-size { font-family: var(--font-display); font-weight: 400; line-height: 1.15; }
.has-lead-font-size { line-height: 1.6; }
.has-body-s-font-size { line-height: 1.6; }

.or-lead { color: var(--ink-muted); }
.or-lead strong { color: var(--ink); font-weight: 600; }

/* ---------- 3. Components (ap-*, from bundle.css) ----------
 * "p:not([class*=ap-]):not([class*=or-])" = a plain text paragraph (WP 7.1+
 * gives every paragraph the wp-block-paragraph class, so :not([class]) fails). */
.ap-display { font-family: var(--font-display); font-weight: 400; margin: 0; }
.ap-accent { font-style: italic; color: var(--clay); }
.ap-muted { color: var(--ink-muted); }
.ap-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.ap-eyebrow + :is(h1, h2, h3) { margin-block-start: var(--space-3); }

/* Buttons: core/button block styles primary · clay · secondary · light · ghost-light */
.wp-block-buttons { gap: var(--space-4); }
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: 0 var(--space-5);
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	font: 600 15px/20px var(--font-sans);
	letter-spacing: .005em;
	text-decoration: none;
	background: var(--pine);
	color: var(--on-accent);
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wp-block-button .wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring);
}
.wp-block-button.is-style-clay .wp-block-button__link { background: var(--clay); color: var(--on-accent); }
.wp-block-button:is(.is-style-primary, .is-style-clay, :not([class*="is-style-"])) .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}
.wp-block-button.is-style-secondary .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.wp-block-button.is-style-secondary .wp-block-button__link:hover { border-color: var(--ink); }
.wp-block-button.is-style-light .wp-block-button__link { background: var(--night-ink); color: var(--night); }
.wp-block-button.is-style-ghost-light .wp-block-button__link { background: transparent; color: var(--night-ink); border-color: var(--night-muted); }
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover { border-color: var(--night-ink); }

/* "Go somewhere" arrow on the strong variants; hidden from screen readers. */
.wp-block-button:is(.is-style-primary, .is-style-clay, .is-style-light):not(.or-btn-sm) .wp-block-button__link::after {
	content: "→";
	content: "→" / "";
	transition: transform .15s ease;
}
.wp-block-button .wp-block-button__link:hover::after { transform: translateX(3px); }

.wp-block-button.or-btn-sm .wp-block-button__link { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; }

.ap-link,
.or-page .wp-block-post-content a:where(:not(.wp-element-button)) {
	color: var(--pine);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

/* Tag */
.ap-tag { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; margin: 0; padding: 0 var(--space-3); border-radius: var(--radius-pill); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--paper-sunk); }
.ap-tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); }
.ap-tag--pine { background: var(--pine-soft); }
.ap-tag--pine::before { background: var(--pine); }
.ap-tag--clay { background: var(--clay-soft); }
.ap-tag--clay::before { background: var(--clay); }

/* Language switch */
.ap-lang { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper-raised); }
.ap-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font: 500 12px/16px var(--font-mono); letter-spacing: .1em; color: var(--ink-muted); text-decoration: none; }
.ap-lang a:hover { color: var(--ink); }
.ap-lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.ap-lang a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* Wordmark */
.ap-wordmark { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--ink); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.ap-wordmark em { color: var(--clay); font-style: italic; }
.ap-wordmark small { margin-left: .45em; font: 500 10px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); vertical-align: .35em; }

/* Photo placeholder (rendered by ocean_ronnika_photo_placeholder() while an image block is empty) */
.ap-photo { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); text-align: center; overflow: hidden; color: var(--ink-muted); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-m); background: radial-gradient(circle, var(--line) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--paper-sunk); }
.ap-photo--clay { background: radial-gradient(circle, var(--paper) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--clay-soft); }
.ap-photo--pine { background: radial-gradient(circle, var(--paper) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--pine-soft); }
.ap-photo--arch { aspect-ratio: 4 / 5; border-radius: 50% 50% var(--radius-m) var(--radius-m) / 40% 40% var(--radius-m) var(--radius-m); }
.ap-photo--wide { aspect-ratio: 21 / 9; border-radius: var(--radius-l); }
.ap-photo svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ap-photo figcaption { margin: 0; font: 500 12px/18px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ap-photo figcaption span { display: block; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ink-muted); }

/* Real photos keep the frame shape. */
.wp-block-image.is-style-photo-arch img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 50% 50% var(--radius-m) var(--radius-m) / 40% 40% var(--radius-m) var(--radius-m);
}
.wp-block-image.is-style-photo-wide img {
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--radius-l);
}

/* Site header (sticky template part) */
.or-site-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .or-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .or-site-header { top: 0; } }

.ap-header {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: var(--space-6);
	height: 80px;
	padding-inline: var(--wp--style--root--padding-left);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .2s ease;
}
/* The blur sits on a pseudo-element: backdrop-filter on .ap-header itself
   would trap the navigation overlay (position: fixed) inside the header. */
.ap-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.ap-header > * { margin: 0; }
.is-scrolled .ap-header { box-shadow: var(--shadow-soft); }
.ap-header .or-nav { margin-left: auto; }
.or-nav .wp-block-navigation__container { gap: var(--space-6); }
.or-nav .wp-block-navigation-item__content { position: relative; font: 600 15px/20px var(--font-sans); color: var(--ink); text-decoration: none; }
.or-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--clay); border-radius: 2px; transition: right .2s ease; }
.or-nav .wp-block-navigation-item__content:hover::after { right: 0; }
.ap-header__end { display: flex; align-items: center; gap: var(--space-4); }
.ap-header__end > * { margin: 0; }
.or-lang--menu { display: none; }

/* Light/dark toggle (blocks/theme-toggle). aria-pressed = dark mode on:
   the moon shows in light mode, the sun in dark mode. */
.or-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper-raised);
	color: var(--ink);
	cursor: pointer;
	transition: border-color .15s ease;
}
.or-theme-toggle[hidden] { display: none; }
.or-theme-toggle:hover { border-color: var(--ink); }
.or-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.or-theme-toggle[aria-pressed="true"] .or-theme-toggle__moon,
.or-theme-toggle:not([aria-pressed="true"]) .or-theme-toggle__sun { display: none; }
.or-toggle--menu { display: none; }

/* Service card: group block styles service-software · service-pinterest (ap-service) */
:is(.is-style-service-software, .is-style-service-pinterest) {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-7);
	border-radius: var(--radius-l);
	overflow: hidden;
	color: var(--ink);
}
:is(.is-style-service-software, .is-style-service-pinterest) > * { position: relative; margin: 0; }
:is(.is-style-service-software, .is-style-service-pinterest) > p:not([class*="ap-"]):not([class*="or-"]) { max-width: 34em; }
.is-style-service-software { background: var(--pine-soft); }
.is-style-service-pinterest { background: var(--clay-soft); }
:is(.is-style-service-software, .is-style-service-pinterest)::before { content: ""; position: absolute; }
.is-style-service-software::before { top: calc(var(--space-6) * -1); right: calc(var(--space-6) * -1); width: 160px; height: 160px; background: radial-gradient(circle, var(--pine) 2px, transparent 2.5px) 0 0 / 16px 16px; opacity: .35; }
.is-style-service-pinterest::before { top: var(--space-6); right: var(--space-6); width: 96px; height: 96px; border-radius: 50%; background: var(--clay); opacity: .9; }
.ap-service__num { font: 500 14px/20px var(--font-mono); color: var(--ink-muted); }
.or-service-list { list-style: none; padding: 0; border-top: 1px solid var(--line-strong); }
.or-service-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 16px; line-height: 28px; }
.or-service-list li em { font: normal 400 13px/20px var(--font-mono); color: var(--ink-muted); text-align: right; }
:is(.is-style-service-software, .is-style-service-pinterest) > .ap-service__foot { margin-top: auto; }

/* Founder card: group block style founder (ap-founder) */
.is-style-founder {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--space-6);
	align-items: start;
	padding: var(--space-6);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	background: var(--paper-raised);
}
.is-style-founder > * { margin: 0; }
.is-style-founder > .wp-block-image { width: 200px; }
.ap-founder__body > * { margin: 0; }
.ap-founder__body > h3 { margin-block: var(--space-2) var(--space-3); }
.ap-founder__body > p:not([class*="ap-"]):not([class*="or-"]) { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.ap-founder__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ap-founder__body > .ap-founder__facts { margin-top: var(--space-4); }
.ap-founder__facts > * { margin: 0; }

/* Stat */
.ap-stat > * { margin: 0; }
.ap-stat__num { font: 400 52px/1 var(--font-display); letter-spacing: -.02em; }
.ap-stat__label { margin-top: var(--space-2); font: 500 13px/20px var(--font-mono); color: var(--ink-muted); }

/* ---------- 4. Sections ---------- */
.or-section { padding-block: var(--section-pad); }
.or-section.or-section--flush-top { padding-top: 0; }
.or-section > * { margin-block: 0; }
.or-section > * + * { margin-block-start: var(--space-7); }

/* Section head: eyebrow + headline left, lead right, bottoms aligned */
.or-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; }
.or-head > * { margin: 0; }
.or-head > div > * { margin-block: 0; }

.or-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.or-grid-2 > * { margin: 0; }

/* Hero */
.or-section.or-hero { padding-block: var(--space-9) var(--space-8); overflow: hidden; }
.or-hero__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-8); align-items: end; }
.or-hero__grid > * { margin: 0; }
.or-hero__text > * { margin-block: 0; }
.or-hero__text > .or-hero__title { margin-block: var(--space-5) var(--space-6); isolation: isolate; }
.or-hero__title em { display: inline-block; position: relative; }
.or-hero__title em::after { content: ""; position: absolute; left: 4%; right: 2%; bottom: .04em; height: .09em; background: var(--saffron); border-radius: 99px; z-index: -1; }
.or-hero__text > .or-lead { max-width: 32em; margin-bottom: var(--space-6); }
.or-hero__text > .or-hero__note { margin-top: var(--space-5); font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* Hero art: pure CSS, positions from the design (440 × 480 stage) */
.or-art { position: relative; height: 480px; }
.or-art__stage { position: absolute; top: 0; left: 0; width: 440px; height: 480px; }
.or-art__slab { position: absolute; border-radius: var(--radius-l); }
.or-art__pine { left: 0; top: 64px; width: 220px; height: 416px; background: var(--pine); border-radius: 110px 110px var(--radius-l) var(--radius-l); }
.or-art__dots { left: 0; top: 64px; width: 220px; height: 416px; background: radial-gradient(circle, var(--pine-soft) 1.6px, transparent 2px) 8px 8px / 24px 24px; border-radius: 110px 110px var(--radius-l) var(--radius-l); opacity: .5; }
.or-art__clay { left: 244px; top: 0; width: 196px; height: 300px; background: var(--clay); }
.or-art__soft { left: 244px; top: 324px; width: 196px; height: 156px; background: var(--clay-soft); }
.or-art__sun { left: 176px; top: 20px; width: 88px; height: 88px; border-radius: 50%; background: var(--saffron); }
.or-art__code { display: block; position: absolute; left: 22px; bottom: 26px; font: 500 12px/20px var(--font-mono); color: var(--on-accent); opacity: .92; }
.or-art__pins { position: absolute; left: 268px; top: 24px; display: grid; grid-template-columns: repeat(3, 40px); gap: 12px; }
.or-art__pins i { display: block; width: 40px; border-radius: 20px; background: var(--on-accent); opacity: .9; }
.or-art__pins i:nth-child(1) { height: 64px; }
.or-art__pins i:nth-child(2) { height: 96px; }
.or-art__pins i:nth-child(3) { height: 52px; }
.or-art__pins i:nth-child(4) { height: 84px; margin-top: -32px; }
.or-art__pins i:nth-child(5) { height: 56px; }
.or-art__pins i:nth-child(6) { height: 100px; margin-top: -44px; }
.or-art__badge { position: absolute; left: 20px; bottom: 20px; font: 400 40px/1 var(--font-display); color: var(--ink); }
.or-art__badge small { display: block; margin-top: 6px; font: 500 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

/* Trust strip */
.or-strip { border-block: 1px solid var(--line); padding-block: var(--space-6); }
.or-strip__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); }
.or-strip__row > * { margin: 0; }
.wp-block-separator.or-vsep { width: 1px; height: auto; align-self: stretch; margin: 0; border: 0; background: var(--line); opacity: 1; }

/* Why together */
.or-combo { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: center; }
.or-combo > * { margin: 0; }
.or-combo__text > * { margin-block: 0; }
.or-combo__text > * + * { margin-block-start: var(--space-5); }
.or-combo__text > .ap-eyebrow + h2 { margin-block-start: var(--space-3); }

.or-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; align-items: center; }
.or-flow > * { margin: 0; }
.is-style-flow-node {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 168px;
	padding: var(--space-5);
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
}
.is-style-flow-node > * { margin: 0; }
.is-style-flow-node::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-muted); }
.or-node--clay::before { background: var(--clay); }
.or-node--saffron::before { background: var(--saffron); }
.or-node--pine::before { background: var(--pine); }
.or-flow > .is-style-flow-node:not(:last-child)::after {
	content: "→";
	content: "→" / "";
	position: absolute;
	top: 50%;
	left: calc(100% + 12px);
	width: 28px;
	transform: translateY(-50%);
	font: 400 28px/1 var(--font-display);
	text-align: center;
	color: var(--ink-muted);
}
.or-node__title { font: 400 26px/1.1 var(--font-display); }
.or-node__text { font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* Team */
.or-section > .or-team-photo + .or-grid-2 { margin-block-start: var(--space-6); }
.or-team-photo.ap-photo { width: 100%; }

/* Process */
.or-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.or-steps > * { margin: 0; }
.or-step { border-top: 1.5px solid var(--ink); padding-top: var(--space-5); }
.or-step > * { margin-block: 0; }
.or-step__num { font: 500 14px/20px var(--font-mono); color: var(--clay); }
.or-step > h3 { margin-block: var(--space-3); }
.or-step > p:not([class*="ap-"]):not([class*="or-"]) { font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* Quote */
.or-quote { quotes: "“" "”"; max-width: 900px; margin-inline: auto; padding: 0; border: 0; text-align: center; }
:lang(de) .or-quote, .or-quote:lang(de) { quotes: "„" "“"; }
:lang(es) .or-quote, .or-quote:lang(es) { quotes: "«" "»"; }
.or-quote p { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--wp--preset--font-size--heading-1); line-height: 1.15; letter-spacing: -.01em; }
.or-quote p::before { content: open-quote; color: var(--clay); }
.or-quote p::after { content: close-quote; color: var(--clay); }
.or-quote cite { display: block; margin-top: var(--space-5); font: normal 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

/* CTA band: the one night panel per page */
.or-cta {
	--focus-gap: var(--night);
	--focus-ring: var(--saffron);
	position: relative;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-8);
	align-items: end;
	padding: var(--space-8);
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--night);
	color: var(--night-ink);
}
.or-cta::after { content: ""; position: absolute; right: -56px; bottom: -56px; width: 144px; height: 144px; border-radius: 50%; background: var(--saffron); opacity: .9; }
.or-cta > * { position: relative; z-index: 1; margin: 0; }
.or-cta > div > * { margin-block: 0; }
.or-cta h2 em { color: var(--saffron); }
.or-cta .ap-eyebrow { color: var(--night-muted); }
.or-cta p:not([class*="ap-"]):not([class*="or-"]) { color: var(--night-muted); margin-bottom: var(--space-5); }
.or-cta .wp-block-buttons { flex-wrap: wrap; }
.or-cta > div > .or-cta__langs { margin-top: var(--space-5); font: 500 13px/20px var(--font-mono); color: var(--night-muted); }

/* Footer */
.or-footer { padding-block: var(--space-8) var(--space-7); }
.or-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.or-footer__grid > * { margin: 0; }
.or-footer__grid > div > * { margin-block: 0; }
.or-footer__grid h2.ap-eyebrow { margin-bottom: var(--space-3); }
.or-footer__links { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 24px; }
.or-footer__links li { margin: 0; }
.or-footer a:not(.ap-wordmark) { color: var(--ink); text-decoration: none; }
.or-footer a:not(.ap-wordmark):hover { color: var(--pine); }
.or-footer__grid > div > .or-footer__about { margin-top: var(--space-4); max-width: 26em; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

.or-legal { border-top: 1px solid var(--line); padding-block: var(--space-5); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.or-legal__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.or-legal__row > * { margin: 0; }
.or-legal a { color: inherit; text-decoration: none; }
.or-legal a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Start & grow page (pitch-*) and homepage teaser ---------- */
.or-hero--pitch .or-hero__grid { grid-template-columns: 1.6fr 1fr; align-items: center; }

/* Launch-plan card in the pitch hero */
.or-plan {
	position: relative;
	padding: var(--space-7);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--paper-raised);
}
.or-plan::before { content: ""; position: absolute; top: var(--space-6); right: var(--space-6); width: 72px; height: 72px; border-radius: 50%; background: var(--saffron); }
.or-plan > * { position: relative; margin-block: 0; }
.or-plan > .ap-eyebrow + h2 { margin-block-start: var(--space-3); }
.or-plan > .or-service-list { margin-block-start: var(--space-6); }

/* Two starting points */
.or-path {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-7);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--paper-raised);
}
.or-path > * { position: relative; margin: 0; }
.or-path > p:not([class*="ap-"]):not([class*="or-"]) { max-width: 34em; color: var(--ink-muted); }
.or-path::before { content: ""; position: absolute; }
.or-path--saffron::before { top: var(--space-6); right: var(--space-6); width: 72px; height: 72px; border-radius: 50%; background: var(--saffron); }
.or-path--pine::before { top: calc(var(--space-6) * -1); right: calc(var(--space-6) * -1); width: 160px; height: 160px; background: radial-gradient(circle, var(--pine) 2px, transparent 2.5px) 0 0 / 16px 16px; opacity: .35; }

/* Six building blocks: the process steps, three per row */
.or-steps--six { row-gap: var(--space-7); }

/* One team instead of five */
.or-compare__card {
	padding: var(--space-7);
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--radius-l);
}
.or-compare__card > * { margin-block: 0; }
.or-compare__card > h3 { margin-block-end: var(--space-5); }
.or-compare__card--us { border: 0; background: var(--pine-soft); }
.or-checklist { margin: 0; padding: 0; list-style: none; }
.or-checklist li { position: relative; margin: 0; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 16px; line-height: 26px; }
.or-checklist li::before { content: "—"; content: "—" / ""; position: absolute; left: 0; color: var(--ink-muted); font-weight: 400; }
.or-compare__card:not(.or-compare__card--us) .or-checklist li { color: var(--ink-muted); font-weight: 400; }
.or-compare__card--us .or-checklist li::before { content: "→"; content: "→" / ""; color: var(--pine); }

/* Why us */
.or-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); }
.or-reasons > * { margin: 0; }
.or-reason { border-top: 1.5px solid var(--ink); padding-top: var(--space-5); }
.or-reason > * { margin-block: 0; }
.or-reason::before { content: ""; display: block; width: 14px; height: 14px; margin-bottom: var(--space-4); border-radius: 50%; background: var(--ink-muted); }
.or-reason > h3 { margin-block-end: var(--space-3); }
.or-reason > p:not([class*="ap-"]):not([class*="or-"]) { font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* FAQ: core/details, works without JavaScript */
.or-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); align-items: start; }
.or-faq > * { margin: 0; }
.or-faq__item { border-top: 1px solid var(--line-strong); padding-block: var(--space-5); }
.or-faq__item summary { position: relative; padding-right: var(--space-7); cursor: pointer; list-style: none; font: 700 19px/26px var(--font-sans); }
.or-faq__item summary::-webkit-details-marker { display: none; }
.or-faq__item summary::after { content: "+"; content: "+" / ""; position: absolute; top: -2px; right: 0; font: 400 28px/1 var(--font-display); color: var(--clay); transition: transform .2s ease; }
.or-faq__item[open] summary::after { transform: rotate(45deg); }
.or-faq__item > p { margin: var(--space-3) 0 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* Homepage teaser */
.or-teaser {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-8);
	align-items: end;
	padding: var(--space-8);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--paper-raised);
}
.or-teaser > * { margin: 0; }
.or-teaser > div > * { margin-block: 0; }
.or-teaser .or-lead { margin-bottom: var(--space-5); }

/* ---------- Services & pricing page (pricing-*) ---------- */
.or-section.or-pricing-intro { padding-bottom: var(--space-8); }
.or-pricing-intro .or-head h1 { margin-block-start: var(--space-3); }

.or-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.or-prices > * { margin: 0; }
.or-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-7) var(--space-6);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--paper-raised);
}
.or-price-card > * { margin-block: 0; }
.or-price-card--featured { border: 2px solid var(--pine); box-shadow: var(--shadow-soft); }
.or-price-card > .or-price-card__badge { position: absolute; top: calc(-28px / 2); left: var(--space-6); }
.or-price-card > .or-price-card__tagline { margin-top: var(--space-3); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.or-price-card > .or-price { margin-top: var(--space-5); font: 400 56px/1 var(--font-display); letter-spacing: -.02em; }
.or-price-card > .or-price-note { margin-top: var(--space-2); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.or-price-card > .or-checklist,
.or-price-card > .or-service-list { margin-top: var(--space-5); }
.or-price-card > .or-price-card__foot { margin-top: auto; padding-top: var(--space-6); }
.or-checklist--yes li { color: var(--ink); font-weight: 500; font-size: 15px; line-height: 24px; }
.or-checklist--yes li::before { content: "→"; content: "→" / ""; color: var(--pine); }
.or-prices--single .or-price { font-size: 44px; }
.or-section > * + .wp-block-group:has(> .or-price-footnote) { margin-block-start: var(--space-6); }
.or-price-footnote { max-width: 60em; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- 5. Templates ---------- */
.or-page { padding-block: var(--space-9); }
.or-page > .wp-block-post-title,
.or-page > .wp-block-heading { margin-block-end: var(--space-7); }
.or-page .wp-block-post-content :where(h2) { margin-block-start: var(--space-7); }
.or-post-list { display: grid; gap: var(--space-7); padding: 0; list-style: none; }
.or-post-list > li { margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.or-post-list .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.or-post-list .wp-block-post-title a:hover { color: var(--pine); }

/* ---------- 6. Responsive (brand book: stack below 900px) ---------- */

/* Header: core navigation overlay below 1200px (core switches at 600px). The
   header needs more room than the content grids: wordmark, four nav items,
   theme toggle, language switch and button need ~1150px in German and
   ~1210px in Spanish. Between 1200 and 1279px the spacing tightens. */
@media (min-width: 1200px) and (max-width: 1279px) {
	.ap-header { gap: var(--space-5); padding-inline: var(--space-6); }
	.or-nav .wp-block-navigation__container { gap: var(--space-5); }
}
@media (max-width: 1199px) {
	.ap-header { gap: var(--space-4); height: 68px; }
	.ap-header .ap-wordmark { font-size: 24px; }
	.or-lang--bar { display: none; }
	.or-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.or-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.or-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex; }
	/* Mirrors core's selector (WP 7.1: :not(.has-background) … :not(.disable-default-overlay)), which otherwise wins with plain white/black. */
	.or-nav:not(.has-background):not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		padding: var(--space-5) var(--space-4);
		background: var(--paper);
		color: var(--ink);
	}
	.or-nav .is-menu-open .wp-block-navigation__container { gap: var(--space-5); margin-inline: 0; }
	/* Core aligns the overlay from the nav's justification (right); the menu reads left. */
	.or-nav .is-menu-open,
	.or-nav .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation-item) { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
	.or-nav .is-menu-open .wp-block-navigation-item__content { font: 400 34px/1.1 var(--font-display); }
	.or-nav .is-menu-open .or-lang--menu { display: inline-flex; margin-top: var(--space-7); }
	.or-toggle--bar { display: none; }
	.or-nav .is-menu-open .or-toggle--menu:not([hidden]) { display: inline-flex; margin-top: var(--space-4); }
}

@media (max-width: 899px) {
	body {
		--wp--style--root--padding-left: var(--space-4);
		--wp--style--root--padding-right: var(--space-4);
		--section-pad: var(--space-8);
	}

	.or-head,
	.or-grid-2,
	.or-hero__grid,
	.or-combo,
	.or-steps,
	.or-cta { grid-template-columns: 1fr; }
	.or-head { gap: var(--space-5); }
	.or-hero__grid { gap: var(--space-7); }
	.or-hero--pitch .or-hero__grid { grid-template-columns: 1fr; }

	.or-art { height: 320px; }
	.or-art__stage { transform: scale(.6667); transform-origin: top left; }

	.or-strip__row { flex-wrap: wrap; gap: var(--space-5) var(--space-4); }
	.or-strip__row > .ap-stat { flex: 1 1 40%; }
	.wp-block-separator.or-vsep { display: none; }
	.ap-stat__num { font-size: 44px; }

	:is(.is-style-service-software, .is-style-service-pinterest) { padding: var(--space-6) var(--space-5); border-radius: var(--radius-m); }
	.or-service-list li { flex-wrap: wrap; gap: 0 var(--space-4); }
	.or-service-list li em { text-align: left; }

	.is-style-founder { grid-template-columns: 1fr; padding: var(--space-5); }
	.is-style-founder > .wp-block-image { width: min(200px, 60%); }

	.or-flow { grid-template-columns: 1fr; gap: 52px; }
	.is-style-flow-node { min-height: 0; }
	.or-flow > .is-style-flow-node:not(:last-child)::after { top: calc(100% + 12px); left: 50%; transform: translateX(-50%) rotate(90deg); }

	.or-team-photo.ap-photo { aspect-ratio: 4 / 3; }

	.or-cta { gap: var(--space-6); padding: var(--space-6) var(--space-5); }

	.or-plan, .or-path, .or-compare__card { padding: var(--space-6) var(--space-5); border-radius: var(--radius-m); }
	.or-reasons, .or-faq, .or-teaser, .or-prices { grid-template-columns: 1fr; }
	.or-teaser { gap: var(--space-5); padding: var(--space-6) var(--space-5); }

	.or-footer__grid { grid-template-columns: 1fr 1fr; }
	.or-footer__grid > :first-child { grid-column: 1 / -1; }
}

/* Tablet (900–1279px): two-column grids stay, but the fixed-size hero art
   is scaled to its column and founder cards stack portrait over text. */
@media (min-width: 900px) and (max-width: 1279px) {
	.or-art { height: 400px; }
	.or-art__stage { transform: scale(.8333); transform-origin: top left; }
}
@media (min-width: 900px) and (max-width: 1099px) {
	.or-art { height: 320px; }
	.or-art__stage { transform: scale(.6667); }
}
@media (min-width: 900px) and (max-width: 1199px) {
	.or-price-card { padding: var(--space-6) var(--space-5); }
	.is-style-founder { grid-template-columns: 1fr; }
	.is-style-founder > .wp-block-image { width: min(200px, 60%); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }