/*
Theme Name: Dorniko
Author: Dornico
Author URI: https://dornico.com
Description: قالب اختصاصی بلوکی درنیکو
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dorniko
*/

.dorniko-icon {
	width: var(--wp--custom--icon--md);
	height: var(--wp--custom--icon--md);
	/* icons sit beside text in flex rows, so they must not absorb the shrink */
	flex: none;
}

.dorniko-icon--sm {
	width: var(--wp--custom--icon--sm);
	height: var(--wp--custom--icon--sm);
}

.dorniko-icon--lg {
	width: var(--wp--custom--icon--lg);
	height: var(--wp--custom--icon--lg);
}

/* horizontal chevrons and arrows ship pointing ltr; reading direction mirrors them */
[dir="rtl"] .dorniko-icon--chevron-left,
[dir="rtl"] .dorniko-icon--chevron-right,
[dir="rtl"] .dorniko-icon--arrow-left,
[dir="rtl"] .dorniko-icon--external-link {
	transform: scaleX(-1);
}

/* the job-position sections stand on the light neutral rather than on white, and the ground
   keeps a rhythm of its own inside each edge, over the rhythm the page leaves around it */
.dorniko-ground {
	background-color: var(--wp--preset--color--light);
	padding-block: var(--wp--preset--spacing--rhythm);
}

/* the ground reaches the viewport edges, so the page column is re-made inside it */
.dorniko-ground--column {
	padding-inline: var(--wp--preset--spacing--gutter);
}

.dorniko-ground--column > * {
	box-sizing: border-box;
	margin-inline: auto;
	max-inline-size: var(--wp--custom--layout--content-max);
}

/* two grounded sections meet without a seam: the first one's padding is the rhythm between
   them, so the second brings neither margin nor padding of its own to that edge */
.is-layout-constrained > .dorniko-ground + .dorniko-ground {
	margin-block-start: 0;
	padding-block-start: 0;
}

.dorniko-navbar {
	/* the hairline sits inside the 101, so the content box is what is left after padding and border */
	--dorniko-navbar-content: calc(var(--wp--custom--navbar--height) - (var(--wp--custom--navbar--padding-block) * 2) - var(--wp--custom--border--hairline));

	position: sticky;
	inset-block-start: 0;
	z-index: 3;
	padding-block: var(--wp--custom--navbar--padding-block);
	padding-inline: var(--wp--preset--spacing--gutter);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--border--subtle);
}

/* the glass sits on its own layer: backdrop-filter on the bar itself makes it the containing
   block for the fixed mobile overlay, which then cannot leave the 64px bar */
.dorniko-navbar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--palette--overlay-glass);
	backdrop-filter: blur(var(--wp--custom--blur--navbar));
}

.dorniko-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--70);
	min-block-size: var(--dorniko-navbar-content);
	max-inline-size: var(--wp--custom--layout--content-max);
	margin-inline: auto;
}

.dorniko-navbar .wp-block-site-logo,
.dorniko-navbar .wp-block-site-logo a,
.dorniko-navbar .wp-block-site-logo img {
	display: block;
	block-size: var(--dorniko-navbar-content);
	inline-size: auto;
	max-inline-size: none;
}

.dorniko-navbar .wp-block-site-logo img {
	object-fit: contain;
}

.dorniko-navbar__links {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

.dorniko-navbar__menu .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--60);
}

.dorniko-navbar__menu .wp-block-navigation-item__content,
.dorniko-language-switcher {
	padding: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--custom--nav--font-size);
	line-height: var(--wp--custom--nav--line-height);
	font-weight: 400;
	text-decoration: none;
}

.dorniko-navbar__menu .wp-block-navigation-item__content:hover,
.dorniko-navbar__menu .wp-block-navigation-item__content:focus,
.dorniko-navbar__menu .wp-block-navigation-item__content[aria-current="page"],
.dorniko-language-switcher:hover,
.dorniko-language-switcher:focus {
	color: var(--wp--custom--hover--link);
}

.dorniko-language-switcher {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

/* theme.json swaps the face for :lang(en) only, so the persian label has to ask for its own */
.dorniko-language-switcher__label:lang(fa) {
	font-family: var(--wp--preset--font-family--iransans);
}

.dorniko-navbar__menu .wp-block-navigation__responsive-container-open {
	padding: 0;
	color: var(--wp--preset--color--text-primary);
}

.dorniko-navbar__menu .wp-block-navigation__responsive-container-open svg {
	width: var(--wp--custom--icon--lg);
	height: var(--wp--custom--icon--lg);
	fill: currentColor;
}

@keyframes dorniko-menu-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* core swaps to the overlay at 600px; the design swaps at the layout breakpoint */
@media (width < 782px) {
	.dorniko-navbar__menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* the close button takes over the same slot, so the bar must not draw both icons */
	.dorniko-navbar__menu:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}

	.dorniko-navbar__menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.dorniko-navbar__links {
		gap: var(--wp--preset--spacing--40);
	}

	.dorniko-navbar__menu {
		order: 1;
	}

	/* figma gives the switcher its own mobile variant: 24px tall, which is what lands the bar on 64 */
	.dorniko-language-switcher {
		order: 0;
		padding: 0;
		gap: var(--wp--preset--spacing--10);
		font-size: var(--wp--preset--font-size--body-1);
		line-height: var(--wp--custom--line-height--body-1);
	}

	.dorniko-language-switcher .dorniko-icon {
		width: var(--wp--custom--icon--md);
		height: var(--wp--custom--icon--md);
	}

	/* the panel hangs below the real bar, so the glass, the logo and the switcher stay put.
	   core's own overlay animation slides on transform, which would capture the fixed close button */
	.dorniko-navbar__menu .wp-block-navigation__responsive-container.is-menu-open {
		animation-name: dorniko-menu-fade;
		inset-block: var(--wp--custom--navbar--height) auto;
		max-block-size: calc(100dvh - var(--wp--custom--navbar--height));
		background: var(--wp--preset--color--white);
		padding: 0;
	}

	.dorniko-navbar__menu .is-menu-open .wp-block-navigation__responsive-close {
		max-inline-size: none;
	}

	/* pinned to the viewport so it lands in the bar the panel starts below */
	.dorniko-navbar__menu .is-menu-open .wp-block-navigation__responsive-container-close {
		position: fixed;
		display: flex;
		align-items: center;
		inset-block-start: var(--wp--custom--navbar--padding-block);
		inset-inline: auto var(--wp--preset--spacing--gutter);
		block-size: var(--dorniko-navbar-content);
		color: var(--wp--preset--color--text-primary);
	}

	.dorniko-navbar__menu .is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: var(--wp--custom--icon--lg);
		height: var(--wp--custom--icon--lg);
		fill: currentColor;
	}

	/* core styles the open overlay at four and five classes deep, so these have to match it */
	.dorniko-navbar__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		inline-size: 100%;
		align-items: stretch;
		padding-block: 0;
		padding-inline: var(--wp--preset--spacing--gutter);
	}

	.dorniko-navbar__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		inline-size: 100%;
	}

	.dorniko-navbar__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		box-sizing: border-box;
		inline-size: 100%;
		block-size: var(--wp--preset--spacing--100);
		border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--border--color);
	}

	.dorniko-navbar__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:last-child {
		border-block-end: 0;
	}

	.dorniko-navbar__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		inline-size: 100%;
		block-size: 100%;
		padding: 0;
		color: var(--wp--preset--color--text-primary);
	}

	.dorniko-navbar__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
		color: var(--wp--custom--hover--link);
	}
}

.dorniko-footer {
	background: var(--wp--preset--color--silver);
	padding-block: var(--wp--preset--spacing--110) 0;
	padding-inline: var(--wp--preset--spacing--gutter);
}

.dorniko-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--100);
	max-inline-size: var(--wp--custom--layout--content-max);
	margin-inline: auto;
}

.dorniko-footer__main {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--90);
}

/* figma: brand 373.33 against utility 746.67, so the utility column is twice as wide */
.dorniko-footer__brand {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.dorniko-footer__utility {
	flex: 2 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-footer__tagline {
	color: var(--wp--preset--color--text-secondary);
}

.dorniko-footer__social {
	gap: var(--wp--preset--spacing--20);
}

/* core sizes its glyphs off font-size and its own padding, which lands them a pixel or two
   off centre; zero the padding and let the grid do it */
.dorniko-footer__social .wp-block-social-link {
	inline-size: var(--wp--custom--control--social-size);
	block-size: var(--wp--custom--control--social-size);
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--secondary-500);
}

.dorniko-footer__social .wp-block-social-link-anchor {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
}

.dorniko-footer__social .wp-block-social-link svg {
	display: block;
	inline-size: var(--wp--custom--icon--lg);
	block-size: var(--wp--custom--icon--lg);
	fill: currentColor;
}

.dorniko-footer__newsletter {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

/* contact form 7 draws the newsletter and its stylesheet is off; the rules for the two page
   forms are scoped away from here, so this carries its own control, button and states */

.dorniko-footer__newsletter .hidden-fields-container {
	display: none;
}

/* the live region the plugin writes its response into, and the label the design replaces with
   a placeholder — both stay reachable, neither takes up room */
.dorniko-footer__newsletter :is(.screen-reader-response, .dorniko-newsletter__field label) {
	position: absolute;
	overflow: hidden;
	clip-path: inset(50%);
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

/* the paragraph formatter is off, so the response output is spaced from here */
.dorniko-footer__newsletter .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-newsletter {
	display: flex;
	/* not centred: the error message under the input grows the field, and the button keeps its
	   line against the input rather than against the message */
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-newsletter__field {
	position: relative;
	flex: 1 1 auto;
}

/* pinned to the middle of the input rather than the field, so the error tip below it cannot
   drag the glyph down with it */
.dorniko-newsletter__field::before {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--wp--custom--control--input-height) / 2);
	inset-inline-start: var(--wp--custom--control--input-padding-inline);
	inline-size: var(--wp--custom--icon--lg);
	block-size: var(--wp--custom--icon--lg);
	background: var(--wp--preset--color--text-tertiary);
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-mask: url("assets/icons/mail.svg") no-repeat center / contain;
	mask: url("assets/icons/mail.svg") no-repeat center / contain;
}

.dorniko-newsletter .wpcf7-form-control-wrap {
	display: block;
}

.dorniko-newsletter input[type="email"] {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: var(--wp--custom--control--input-height);
	padding-block: 0;
	/* the glyph is drawn on the field, so the address starts after it */
	padding-inline: calc(var(--wp--custom--control--input-padding-inline) * 2 + var(--wp--custom--icon--lg)) var(--wp--custom--control--input-padding-inline);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text-primary);
	/* the ua sheet pins the email field to ltr, which drags its placeholder out of reading order */
	direction: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-1);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body-1);
}

.dorniko-newsletter input[type="email"]::placeholder {
	color: var(--wp--preset--color--text-tertiary);
	/* firefox dims it otherwise, and the design has one grey */
	opacity: 1;
}

.dorniko-newsletter__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* figma: 222 of the 698.67 row, with the field taking the rest */
	flex: none;
	inline-size: 222px;
	margin-block-start: calc((var(--wp--custom--control--input-height) - var(--wp--custom--button--medium--height)) / 2);
	padding-block: var(--wp--custom--button--medium--padding-block);
	padding-inline: var(--wp--custom--button--medium--padding-inline);
	background: var(--wp--preset--color--primary-500);
	border: 0;
	border-radius: var(--wp--custom--button--radius);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--custom--button--medium--font-size);
	font-weight: 500;
	line-height: var(--wp--custom--button--medium--line-height);
	cursor: pointer;
}

.dorniko-newsletter__submit:hover {
	background: var(--wp--custom--hover--solid);
}

/* the design draws no waiting state; the button is held on the disabled tokens while it posts */
.dorniko-footer__newsletter form.submitting .dorniko-newsletter__submit {
	background: var(--wp--custom--hover--disabled-surface);
	color: var(--wp--custom--hover--disabled-text);
	pointer-events: none;
}

.dorniko-footer__newsletter .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--custom--palette--error);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--caption);
}

.dorniko-footer__newsletter .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wp--custom--palette--error);
}

.dorniko-footer__newsletter .wpcf7-response-output {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline) solid currentColor;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--body-2);
	line-height: var(--wp--custom--line-height--body-2);
}

.dorniko-footer__newsletter form:is(.init, .resetting, .submitting) .wpcf7-response-output {
	display: none;
}

.dorniko-footer__newsletter form.sent .wpcf7-response-output {
	color: var(--wp--custom--palette--success);
}

.dorniko-footer__newsletter form:is(.invalid, .unaccepted, .failed, .aborted, .spam, .payment-required) .wpcf7-response-output {
	color: var(--wp--custom--palette--error);
}

.dorniko-footer__links {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--70);
}

.dorniko-footer__column {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-footer__nav .wp-block-navigation__container,
.dorniko-contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
	margin: 0;
}

.dorniko-footer__nav .wp-block-navigation-item__content,
.dorniko-contact-list a,
.dorniko-contact-list span {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--body-1);
	line-height: var(--wp--custom--line-height--body-1);
	font-weight: 400;
	text-decoration: none;
}

.dorniko-footer__nav .wp-block-navigation-item__content:hover,
.dorniko-footer__nav .wp-block-navigation-item__content:focus,
.dorniko-contact-list a:hover,
.dorniko-contact-list a:focus {
	color: var(--wp--custom--hover--link);
}

.dorniko-contact-list__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text-secondary);
}

.dorniko-back-to-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--button--gap);
	padding: var(--wp--custom--button--medium--padding-block) var(--wp--custom--button--medium--padding-inline);
	border-radius: var(--wp--custom--button--radius);
	background: var(--wp--preset--color--primary-500);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--custom--button--medium--font-size);
	line-height: var(--wp--custom--button--medium--line-height);
	font-weight: 500;
	text-decoration: none;
}

.dorniko-back-to-top:hover,
.dorniko-back-to-top:focus {
	background: var(--wp--custom--hover--solid);
	color: var(--wp--preset--color--white);
}

.dorniko-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--border--color);
}

.dorniko-footer__bottom p {
	font-size: var(--wp--preset--font-size--body-2);
	line-height: var(--wp--custom--line-height--body-2);
	color: var(--wp--preset--color--text-primary);
}

@media (width < 782px) {
	.dorniko-footer {
		padding-block-start: var(--wp--preset--spacing--100);
	}

	.dorniko-footer__inner {
		gap: var(--wp--preset--spacing--70);
	}

	/* the six blocks reorder on mobile, so flatten the two wrappers into one column */
	.dorniko-footer__main {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--70);
	}

	.dorniko-footer__utility,
	.dorniko-footer__links {
		display: contents;
	}

	.dorniko-footer__brand {
		order: 0;
		align-items: center;
		text-align: center;
	}

	.dorniko-footer__column--contact {
		order: 1;
	}

	.dorniko-footer__column--quick {
		order: 2;
	}

	.dorniko-footer__newsletter {
		order: 3;
	}

	.dorniko-newsletter {
		flex-direction: column;
		align-items: stretch;
	}

	.dorniko-newsletter__submit {
		inline-size: auto;
		margin-block-start: 0;
	}

	.dorniko-back-to-top {
		order: 4;
		background: var(--wp--preset--color--white);
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--primary-500);
		color: var(--wp--preset--color--primary-500);
	}

	.dorniko-back-to-top:hover,
	.dorniko-back-to-top:focus {
		background: var(--wp--custom--hover--tint);
		color: var(--wp--preset--color--primary-500);
	}

	.dorniko-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--40);
	}
}

.dorniko-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-block-size: 650px;
	padding-block: var(--wp--preset--spacing--120);
	padding-inline: var(--wp--preset--spacing--gutter);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* image, then the hero gradient, then a flat wash; first layer paints on top */
.dorniko-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(var(--wp--custom--palette--overlay-light), var(--wp--custom--palette--overlay-light)),
		var(--wp--preset--gradient--hero-overlay);
}

.dorniko-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--80);
	inline-size: 100%;
	max-inline-size: var(--wp--custom--layout--content-max);
	margin-inline: auto;
	text-align: center;
}

.dorniko-hero__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
}

.dorniko-hero__title-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-hero__eyebrow {
	font-weight: 500;
}

.dorniko-hero__description {
	max-inline-size: var(--wp--custom--layout--prose-max);
}

.dorniko-hero__buttons {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
}

/* the outlined button, shared by the hero, the closing band, the about us card and the
   company panel */
.dorniko-hero__button--outline .wp-block-button__link,
.dorniko-cta__button .wp-block-button__link,
.dorniko-cta-card__button .wp-block-button__link,
.dorniko-company__cta-buttons .wp-block-button__link {
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--primary-500);
	color: var(--wp--preset--color--primary-500);
}

.dorniko-hero__button--outline .wp-block-button__link:hover,
.dorniko-hero__button--outline .wp-block-button__link:focus,
.dorniko-cta__button .wp-block-button__link:hover,
.dorniko-cta__button .wp-block-button__link:focus,
.dorniko-cta-card__button .wp-block-button__link:hover,
.dorniko-cta-card__button .wp-block-button__link:focus,
.dorniko-company__cta-buttons .wp-block-button__link:hover,
.dorniko-company__cta-buttons .wp-block-button__link:focus {
	background: var(--wp--custom--hover--tint);
	color: var(--wp--preset--color--primary-500);
}

@media (width < 782px) {
	.dorniko-hero {
		min-block-size: 500px;
		padding-block: var(--wp--preset--spacing--90);
	}

	.dorniko-hero__description {
		max-inline-size: none;
	}

	.dorniko-hero__buttons {
		flex-direction: column;
	}

	.dorniko-hero__buttons .wp-block-button,
	.dorniko-hero__buttons .wp-block-button__link {
		inline-size: 100%;
	}
}

.dorniko-about {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--110);
}

.dorniko-about__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--80);
}

/* figma: text 594 against photo 550 at 1440, so both track the row width */
.dorniko-about__text {
	flex: 594 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--60);
}

.dorniko-about__photo {
	flex: 550 1 0;
	/* the design puts the photo at the inline start; the text stays first in the dom for reading order */
	order: -1;
	margin: 0;
}

.dorniko-about__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-about__eyebrow {
	font-weight: 500;
}

.dorniko-about__photo img {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--portrait);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

/* surface, type and hover come from elements.button in theme.json; only the glyph is left */
.wp-block-button.is-style-chevron .wp-block-button__link,
.wp-block-button.is-style-external-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--button--gap);
}

.wp-block-button.is-style-chevron .wp-block-button__link::after,
.wp-block-button.is-style-external-link .wp-block-button__link::after {
	content: "";
	flex: none;
	inline-size: var(--wp--custom--icon--md);
	block-size: var(--wp--custom--icon--md);
	background: currentColor;
}

.wp-block-button.is-style-chevron .wp-block-button__link::after {
	-webkit-mask: url("assets/icons/chevron-right.svg") no-repeat center / contain;
	mask: url("assets/icons/chevron-right.svg") no-repeat center / contain;
}

.wp-block-button.is-style-external-link .wp-block-button__link::after {
	-webkit-mask: url("assets/icons/external-link.svg") no-repeat center / contain;
	mask: url("assets/icons/external-link.svg") no-repeat center / contain;
}

/* the assets ship pointing ltr, like the inline icons; reading direction mirrors them */
[dir="rtl"] .wp-block-button.is-style-chevron .wp-block-button__link::after,
[dir="rtl"] .wp-block-button.is-style-external-link .wp-block-button__link::after {
	transform: scaleX(-1);
}

/* the glyph leads the label rather than trailing it, so it is drawn on ::before */
.wp-block-button.is-style-globe .wp-block-button__link,
.wp-block-button.is-style-download .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--button--gap);
}

.wp-block-button.is-style-globe .wp-block-button__link::before,
.wp-block-button.is-style-download .wp-block-button__link::before {
	content: "";
	flex: none;
	inline-size: var(--wp--custom--icon--md);
	block-size: var(--wp--custom--icon--md);
	background: currentColor;
}

.wp-block-button.is-style-globe .wp-block-button__link::before {
	-webkit-mask: url("assets/icons/globe.svg") no-repeat center / contain;
	mask: url("assets/icons/globe.svg") no-repeat center / contain;
}

.wp-block-button.is-style-download .wp-block-button__link::before {
	-webkit-mask: url("assets/icons/download.svg") no-repeat center / contain;
	mask: url("assets/icons/download.svg") no-repeat center / contain;
}

@media (width < 782px) {
	.dorniko-about {
		gap: var(--wp--preset--spacing--80);
	}

	.dorniko-about__row {
		flex-direction: column;
		align-items: stretch;
	}

	.dorniko-about__photo {
		order: 0;
	}

	.dorniko-about__button {
		align-self: stretch;
	}

	.dorniko-about__button .wp-block-button,
	.dorniko-about__button .wp-block-button__link {
		inline-size: 100%;
	}
}

.dorniko-stats {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dorniko-stat {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: 0;
	text-align: center;
}

/* dividers separate cells only, never the outer edges */
.dorniko-stat + .dorniko-stat {
	border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--primary-500);
}

.dorniko-stat__figure {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--wp--custom--line-height--h-1);
	font-weight: 700;
	color: var(--wp--preset--color--text-primary);
	font-variant-numeric: tabular-nums;
}

.dorniko-stat__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-1);
	line-height: var(--wp--custom--line-height--body-1);
	font-weight: 500;
	color: var(--wp--preset--color--text-tertiary);
}

@media (width < 782px) {
	/* figma: cells are 171.5 each against a 343 row, so the columns touch and the
	   divider above the second row reads as one unbroken line */
	.dorniko-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 0;
		row-gap: var(--wp--preset--spacing--20);
	}

	.dorniko-stat + .dorniko-stat {
		border-inline-start: 0;
	}

	/* the vertical divider is drawn as a layer so it can start clear of the horizontal one */
	.dorniko-stat:nth-child(2n) {
		position: relative;
	}

	.dorniko-stat:nth-child(2n)::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--primary-500);
	}

	/* rows sitting under a divider keep the same clearance the row above has */
	.dorniko-stat:nth-child(2n):nth-child(n+3)::before {
		inset-block-start: var(--wp--preset--spacing--20);
	}

	.dorniko-stat:nth-child(n+3) {
		border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--primary-500);
	}
}

.dorniko-portfolio__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-portfolio__text,
.dorniko-portfolio__grid {
	flex: 1 1 0;
}

.dorniko-portfolio__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--80);
}

.dorniko-portfolio__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-portfolio__eyebrow {
	font-weight: 500;
}

.dorniko-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--70);
}

.dorniko-portfolio__tile {
	margin: 0;
}

.dorniko-portfolio__tile img {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--tile);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

@media (width < 782px) {
	.dorniko-portfolio__row {
		flex-direction: column;
		align-items: stretch;
	}

	/* the desktop proportions would otherwise split the column height between the two */
	.dorniko-portfolio__text,
	.dorniko-portfolio__grid {
		flex: none;
	}

	/* the png puts the tiles above the heading; the text stays first in the dom for reading order */
	.dorniko-portfolio__grid {
		order: -1;
		gap: var(--wp--preset--spacing--40);
	}
}

.dorniko-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	inline-size: 100%;
}

.dorniko-accordion-item {
	padding-block-end: var(--wp--preset--spacing--60);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--border--color);
}

.dorniko-accordion-item__heading {
	margin: 0;
}

.dorniko-accordion-item__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--h-4);
	font-weight: 500;
	text-align: start;
	cursor: pointer;
}

.dorniko-accordion-item__chevron {
	display: flex;
	flex: none;
}

.dorniko-accordion-item__button[aria-expanded="false"] .dorniko-icon--chevron-up,
.dorniko-accordion-item__button[aria-expanded="true"] .dorniko-icon--chevron-down {
	display: none;
}

.dorniko-accordion-item__panel {
	margin-block-start: var(--wp--preset--spacing--40);
}

.dorniko-accordion-item__panel p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-1);
	line-height: var(--wp--custom--line-height--body-1);
	color: var(--wp--preset--color--text-secondary);
}

.dorniko-subsidiaries {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
	text-align: center;
}

.dorniko-subsidiaries__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-subsidiaries__eyebrow {
	font-weight: 500;
}

/* figma: 296 at 1440, full width once the row stacks */
.dorniko-subsidiaries__button .wp-block-button__link {
	inline-size: 296px;
}

.dorniko-logo-carousel {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
	inline-size: 100%;
	block-size: 100px;
}

.dorniko-logo-carousel__arrow {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--button--medium--height);
	block-size: var(--wp--custom--button--medium--height);
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--primary-500);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-500);
	cursor: pointer;
}

.dorniko-logo-carousel__arrow:hover,
.dorniko-logo-carousel__arrow:focus {
	background: var(--wp--custom--hover--tint);
}

/* a scroller, so every logo stays reachable with the view script absent */
.dorniko-logo-carousel__track {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--110);
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.dorniko-logo-carousel__track::-webkit-scrollbar {
	display: none;
}

.dorniko-logo-carousel__slot {
	flex: none;
	inline-size: 150px;
}

.dorniko-logo-carousel__slot figure {
	margin: 0;
}

.dorniko-logo-carousel__slot img {
	display: block;
	inline-size: 100%;
	max-block-size: 69px;
	object-fit: contain;
}

@media (width < 782px) {
	.dorniko-subsidiaries {
		gap: var(--wp--preset--spacing--70);
	}

	.dorniko-logo-carousel {
		gap: var(--wp--preset--spacing--40);
	}

	.dorniko-logo-carousel__arrow {
		inline-size: var(--wp--custom--button--small--height);
		block-size: var(--wp--custom--button--small--height);
		padding: var(--wp--preset--spacing--20);
	}

	.dorniko-logo-carousel__arrow .dorniko-icon {
		width: var(--wp--custom--icon--sm);
		height: var(--wp--custom--icon--sm);
	}

	.dorniko-logo-carousel__track {
		gap: var(--wp--preset--spacing--60);
	}

	.dorniko-logo-carousel__slot {
		inline-size: 105px;
	}

	.dorniko-logo-carousel__slot img {
		max-block-size: 49px;
	}

	.dorniko-subsidiaries__button {
		align-self: stretch;
	}

	.dorniko-subsidiaries__button .wp-block-button,
	.dorniko-subsidiaries__button .wp-block-button__link {
		inline-size: 100%;
	}
}

.dorniko-innovation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
	padding-block: var(--wp--preset--spacing--120) var(--wp--preset--spacing--130);
	padding-inline: var(--wp--preset--spacing--gutter);
}

.dorniko-innovation__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	text-align: center;
	max-inline-size: var(--wp--custom--layout--content-max);
}

.dorniko-innovation__title-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-innovation__eyebrow {
	font-weight: 500;
}

.dorniko-innovation__description {
	max-inline-size: 900px;
}

/* the design runs this row against the page direction: the first card is leftmost at 1440
   but topmost at 375, so the dom keeps the design's sequence and the row flips */
.dorniko-card-row {
	display: flex;
	flex-direction: row-reverse;
	gap: var(--wp--preset--spacing--90);
	inline-size: 100%;
	max-inline-size: var(--wp--custom--layout--content-max);
}

.dorniko-card {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--silver);
	border-radius: var(--wp--custom--radius--lg);
}

.dorniko-card__image {
	margin: 0;
}

/* not a ratio: height is locked and the width fills, so only the top corners round */
.dorniko-card__image img {
	display: block;
	inline-size: 100%;
	block-size: 300px;
	object-fit: cover;
	border-start-start-radius: var(--wp--custom--radius--sm);
	border-start-end-radius: var(--wp--custom--radius--sm);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.dorniko-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60);
}

.dorniko-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.dorniko-card__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-card__category {
	font-weight: 500;
}

/* figma: 146 at 1440, stretched once the row stacks */
.dorniko-card__button {
	align-self: flex-start;
}

@media (width < 782px) {
	.dorniko-innovation {
		padding-block: var(--wp--preset--spacing--110) var(--wp--preset--spacing--120);
	}

	.dorniko-card-row {
		flex-direction: column;
	}

	/* the row's basis is the block axis once it stacks, and a zero basis against an auto
	   height collapses the card to nothing */
	.dorniko-card {
		flex: none;
	}

	.dorniko-card__button {
		align-self: stretch;
	}

	.dorniko-card__button .wp-block-button,
	.dorniko-card__button .wp-block-button__link {
		inline-size: 100%;
	}
}

.dorniko-why {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-why__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
	text-align: center;
}

.dorniko-why__title-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-why__eyebrow {
	font-weight: 500;
}

.dorniko-why__description {
	max-inline-size: 900px;
}

.dorniko-why__content {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
	inline-size: 100%;
}

/* figma: photo 550 against list 586 at 1440, so both track the row width */
.dorniko-why__photo {
	flex: 550 1 0;
	/* the design puts the photo at the inline end at 1440 and on top at 375, so the dom
	   keeps the stacked order and the row moves it */
	order: 1;
	margin: 0;
}

.dorniko-why__photo img {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--square);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

.dorniko-feature-list {
	flex: 586 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dorniko-feature-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--60);
}

/* the same 52 brand tile carries the icon here and on the advantage card, so the one size
   with no token behind it is written once */
.dorniko-feature-item__icon,
.dorniko-advantage__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	aspect-ratio: var(--wp--custom--ratio--square);
	background: var(--wp--preset--color--primary-500);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--white);
}

.dorniko-feature-item__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

/* the theme lays this pair out itself, so they sit outside a core layout container */
.dorniko-feature-item__title,
.dorniko-feature-item__description {
	margin: 0;
}

@media (width < 782px) {
	.dorniko-why__content {
		flex-direction: column;
		align-items: stretch;
	}

	.dorniko-why__photo {
		order: 0;
	}

	.dorniko-feature-list {
		gap: var(--wp--preset--spacing--70);
	}
}

.dorniko-cta {
	/* the band is not a core group, so nothing has already set this and the min height
	   would otherwise measure the content box */
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--80);
	min-block-size: 368px;
	padding-block: var(--wp--preset--spacing--130);
	padding-inline: var(--wp--preset--spacing--gutter);
	background-color: var(--wp--preset--color--primary-500);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}

/* image, then a flat brand wash, then the cta gradient; first layer paints on top */
.dorniko-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(var(--wp--custom--palette--overlay-brand-50), var(--wp--custom--palette--overlay-brand-50)),
		var(--wp--preset--gradient--cta-overlay);
}

.dorniko-cta__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
	max-inline-size: var(--wp--custom--layout--content-max);
}

.dorniko-cta__title-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-cta__eyebrow {
	font-weight: 500;
}

.dorniko-cta__description,
.dorniko-cta-card__description {
	max-inline-size: 900px;
}

.dorniko-cta__button {
	display: flex;
	justify-content: center;
	inline-size: 100%;
}

@media (width < 782px) {
	.dorniko-cta {
		min-block-size: 370px;
		padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	}

	.dorniko-cta__button .wp-block-button,
	.dorniko-cta__button .wp-block-button__link {
		inline-size: 100%;
	}
}

.wp-block-dorniko-page-hero {
	/* not a core group, so the min height would otherwise measure the content box */
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-block-size: 400px;
	padding-block: var(--wp--preset--spacing--120);
	padding-inline: var(--wp--preset--spacing--gutter);
	background-color: var(--wp--custom--palette--primary-600);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* a flat wash over the image; the fill beneath is the colour the wash resolves to, so an
   empty slot reads the same as a filled one */
.wp-block-dorniko-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--wp--custom--palette--overlay-brand-60), var(--wp--custom--palette--overlay-brand-60));
}

/* positioned so it paints over the wash; dom order settles the pair, so neither takes a z-index */
.wp-block-dorniko-page-hero__inner {
	position: relative;
	inline-size: 100%;
	max-inline-size: var(--wp--custom--layout--content-max);
	margin-inline: auto;
}

/* figma: 495 at 1440, and it is the measure that breaks the title over two lines */
.wp-block-dorniko-page-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	max-inline-size: 495px;
	text-align: start;
}

/* that measure is sized for a 48px persian title; english runs 60px and needs the whole
   column to break in the same two places the markup already asks for */
.wp-block-dorniko-page-hero__text:lang(en) {
	max-inline-size: none;
}

.wp-block-dorniko-page-hero__text > * {
	margin-block: 0;
}

.wp-block-dorniko-page-hero__text > p {
	font-weight: 500;
	line-height: var(--wp--custom--line-height--body-2);
}

.wp-block-dorniko-page-hero__text > h1 {
	font-weight: 700;
	line-height: var(--wp--custom--line-height--hero);
}

@media (width < 782px) {
	.wp-block-dorniko-page-hero__text {
		max-inline-size: none;
		text-align: center;
	}
}

/* the portfolio hero centres the pair across the whole column instead of setting it at the
   inline start, and its export washes the photograph one step darker */
.wp-block-dorniko-page-hero--centered .wp-block-dorniko-page-hero__text {
	max-inline-size: none;
	text-align: center;
}

.wp-block-dorniko-page-hero--centered::before {
	background: linear-gradient(var(--wp--custom--palette--overlay-brand-70), var(--wp--custom--palette--overlay-brand-70));
}

/* the collaboration hero carries a lead under the title, so the two steps above it are set on
   the children and the flex gap goes to nothing */
.wp-block-dorniko-page-hero--centered-lead .wp-block-dorniko-page-hero__text {
	gap: 0;
	max-inline-size: none;
	text-align: center;
}

.wp-block-dorniko-page-hero--centered-lead .wp-block-dorniko-page-hero__text > h1 {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-dorniko-page-hero--centered-lead .wp-block-dorniko-page-hero__lead {
	margin-inline: auto;
}

/* the export doubles the wash across the middle, where the type sits, and lets it fall away at
   both edges; the ellipse is centred on the inline start but peaks at the frame's centre, so it
   is symmetrical and needs no flip under rtl */
.wp-block-dorniko-page-hero--centered-lead::before {
	background:
		linear-gradient(var(--wp--custom--palette--overlay-brand-70), var(--wp--custom--palette--overlay-brand-70)),
		radial-gradient(100% 490.79% at 0% 23.01%, transparent 0%, var(--wp--custom--palette--overlay-brand-70) 50%, transparent 100%);
}

/* the academy hero sets its type on the pale half of the photograph, so it takes no wash and
   reads in ink; the fill beneath is pale to match, keeping an empty slot legible */
.wp-block-dorniko-page-hero--light {
	background-color: var(--wp--preset--color--light);
}

.wp-block-dorniko-page-hero--light::before {
	background: none;
}

/* three rows on two different gaps, so the rhythm is carried on the children */
.wp-block-dorniko-page-hero--light .wp-block-dorniko-page-hero__text {
	gap: 0;
	max-inline-size: none;
}

.wp-block-dorniko-page-hero--light .wp-block-dorniko-page-hero__text > h1 {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-dorniko-page-hero__text > .wp-block-dorniko-page-hero__lead {
	max-inline-size: var(--wp--custom--layout--prose-max);
	margin-block-start: var(--wp--preset--spacing--40);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body-1);
}

@media (width < 782px) {
	/* the crop keeps no pale half at this width, so the wash makes the room the photograph does not */
	.wp-block-dorniko-page-hero--light::before {
		background: linear-gradient(var(--wp--custom--palette--overlay-light), var(--wp--custom--palette--overlay-light));
	}
}

.dorniko-growth {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
	text-align: center;
}

.dorniko-growth__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

/* figma lays the milestones out space-between at 264 wide, so the first column carries that
   width and the rest share what is left; at 1440 the dot centres land 230 apart */
.dorniko-timeline {
	/* no border token reaches 5 */
	--dorniko-timeline-rule: 5px;

	display: grid;
	grid-auto-flow: column;
	grid-template-columns: auto;
	grid-auto-columns: minmax(0, 1fr);
	/* the band above the rule and the band below hold each other to one height, so the rule
	   keeps meeting the dots however long the copy runs */
	grid-template-rows: 1fr auto 1fr;
	row-gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dorniko-timeline-item {
	--dorniko-timeline-head: 0px;
	--dorniko-timeline-tail: 0px;

	position: relative;
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: subgrid;
	justify-self: end;
	inline-size: 264px;
}

/* the rule is drawn a segment at a time, so it survives any number of milestones; the outer
   two stop at the dot they begin and end on */
.dorniko-timeline-item:first-child {
	--dorniko-timeline-head: calc(50% - var(--wp--custom--icon--lg) / 2);
}

.dorniko-timeline-item:last-child {
	--dorniko-timeline-tail: calc(50% - var(--wp--custom--icon--lg) / 2);
}

.dorniko-timeline-item::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: var(--dorniko-timeline-head) var(--dorniko-timeline-tail);
	block-size: var(--dorniko-timeline-rule);
	margin-block: auto;
	background: var(--wp--preset--color--primary-500);
}

.dorniko-timeline-item__dot {
	grid-row: 2;
	justify-self: center;
	inline-size: var(--wp--custom--icon--lg);
	block-size: var(--wp--custom--icon--lg);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary-500);
}

.dorniko-timeline-item__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60);
}

.dorniko-timeline-item:nth-child(odd) .dorniko-timeline-item__card {
	grid-row: 1;
}

.dorniko-timeline-item:nth-child(even) .dorniko-timeline-item__card {
	grid-row: 3;
}

/* the theme lays this pair out itself, so they sit outside a core layout container */
.dorniko-timeline-item__title,
.dorniko-timeline-item__description {
	margin: 0;
}

@media (width < 782px) {
	/* the rule stands up and every milestone hangs off the same side of it */
	.dorniko-timeline {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--90);
		padding-inline-start: var(--wp--preset--spacing--60);
	}

	.dorniko-timeline-item {
		/* the segment reaches across the gap to the next milestone */
		--dorniko-timeline-tail: calc(-1 * var(--wp--preset--spacing--90));

		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		inline-size: auto;
	}

	.dorniko-timeline-item::before {
		inset-block: var(--dorniko-timeline-head) var(--dorniko-timeline-tail);
		inset-inline: 0 calc(100% - var(--wp--custom--icon--lg));
		inline-size: var(--dorniko-timeline-rule);
		block-size: auto;
		margin-block: 0;
		margin-inline: auto;
	}

	.dorniko-timeline-item__dot {
		flex: none;
	}

	.dorniko-timeline-item__card {
		flex: 1 1 auto;
		gap: var(--wp--preset--spacing--20);
		padding-block: 0;
	}
}

.dorniko-vision {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--110);
	padding-block: var(--wp--preset--spacing--120) var(--wp--preset--spacing--130);
	padding-inline: var(--wp--preset--spacing--gutter);
}

.dorniko-vision__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
	max-inline-size: var(--wp--custom--layout--content-max);
	text-align: center;
}

.dorniko-vision__eyebrow,
.dorniko-vision__category {
	font-weight: 500;
}

.dorniko-vision__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--120);
	inline-size: 100%;
	max-inline-size: var(--wp--custom--layout--content-max);
}

.dorniko-vision__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--70);
}

/* figma: photo 592 against text 560 at 1440, so both track the row width */
.dorniko-vision__photo {
	flex: 592 1 0;
	margin: 0;
}

.dorniko-vision__text {
	flex: 560 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-vision__text-title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-vision__photo img {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--wide);
	object-fit: cover;
}

@media (width < 782px) {
	.dorniko-vision {
		gap: var(--wp--preset--spacing--90);
		padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--110);
	}

	.dorniko-vision__content {
		gap: var(--wp--preset--spacing--100);
	}

	.dorniko-vision__row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--60);
	}

	/* a zero basis is read on the block axis once the row stacks, and would flatten both */
	.dorniko-vision__photo,
	.dorniko-vision__text {
		flex: none;
	}

	/* at 375 every block leads with its photo; only the row carrying it at the inline end
	   has to move */
	.dorniko-vision__row--photo-end .dorniko-vision__photo {
		order: -1;
	}
}

.dorniko-ecosystem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
	text-align: center;
}

.dorniko-ecosystem__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
}

.dorniko-ecosystem__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-ecosystem__eyebrow {
	font-weight: 500;
}

.dorniko-ecosystem__description {
	max-inline-size: 900px;
}

.dorniko-ecosystem__row {
	display: flex;
	gap: var(--wp--preset--spacing--70);
	inline-size: 100%;
}

.dorniko-ecosystem__card {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 370px;
	padding: var(--wp--preset--spacing--60);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--primary-500);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* a flat wash over the image; the fill beneath is the colour the wash resolves to, so an
   empty slot reads the same as a filled one */
.dorniko-ecosystem__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--wp--custom--palette--overlay-brand-50), var(--wp--custom--palette--overlay-brand-50));
}

/* positioned so it paints over the wash; dom order settles the pair, so neither takes a z-index */
.dorniko-ecosystem__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--white);
}

@media (width < 782px) {
	.dorniko-ecosystem__row {
		flex-direction: column;
	}

	/* a zero basis is read on the block axis once the row stacks, and would flatten the cards */
	.dorniko-ecosystem__card {
		flex: none;
	}
}

.dorniko-offices {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

/* figma: 568 against 568 at 1440, so the pair splits the row evenly */
.dorniko-offices__text,
.dorniko-offices__map {
	flex: 1 1 0;
}

.dorniko-offices__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-offices__map {
	margin: 0;
}

.dorniko-offices__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-offices__eyebrow {
	font-weight: 500;
}

.dorniko-offices__map img {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--wide);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

@media (width < 782px) {
	/* at 375 the map drops under the copy and the column reads centred */
	.dorniko-offices {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--60);
		text-align: center;
	}

	/* a zero basis is read on the block axis once the row stacks, and would flatten both */
	.dorniko-offices__text,
	.dorniko-offices__map {
		flex: none;
	}
}

/* the section runs edge to edge only so the carousel can pass the gutter at 375; the bands
   inside it re-make the page column themselves */
.dorniko-advantages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
	text-align: center;
}

.dorniko-advantages__header,
.dorniko-advantage-grid {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: calc(var(--wp--custom--layout--content-max) + var(--wp--preset--spacing--gutter) * 2);
	padding-inline: var(--wp--preset--spacing--gutter);
}

.dorniko-advantages__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-advantages__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

/* every header that carries a lead holds it at the same 900, so it is written once */
.dorniko-advantages__description,
.dorniko-academy-advantages__description,
.dorniko-job-approach__description,
.dorniko-academy-gallery__description,
.dorniko-engines__description,
.dorniko-dts-approach__description {
	max-inline-size: 900px;
}

/* the gap belongs to the dots, which only stand under the track at 375 */
.dorniko-advantage-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* six columns carry the designed five: the first two span three each and the last three
   span two, which lands on 576 and 373.33 inside the 1184 column */
.dorniko-advantage-grid__track {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--wp--preset--spacing--70);
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* figma states the card width over its padding, and the carousel sets that width directly */
.dorniko-advantage {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--light);
}

/* the academy row places the same card three across and reads it from the start edge, so
   how this grid arranges the card stays with the grid */
.dorniko-advantage-grid__track .dorniko-advantage {
	grid-column: span 2;
	align-items: center;
}

.dorniko-advantage-grid__track .dorniko-advantage:first-child:nth-last-child(5),
.dorniko-advantage-grid__track .dorniko-advantage:first-child:nth-last-child(5) + .dorniko-advantage {
	grid-column: span 3;
}

.dorniko-advantage__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
}

/* the theme lays this pair out itself, so they sit outside a core layout container */
.dorniko-advantage__title,
.dorniko-advantage__description {
	margin: 0;
}

.dorniko-advantage-grid__dots {
	display: none;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-advantage-grid__dot {
	box-sizing: border-box;
	inline-size: 12px;
	aspect-ratio: var(--wp--custom--ratio--square);
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--radius--lg);
	background: none;
	cursor: pointer;
}

.dorniko-advantage-grid__dot[aria-current="true"] {
	background: var(--wp--preset--color--gray);
}

@media (width < 782px) {
	/* the track scrolls the full width at 375, so the gutter moves off it and onto the
	   scroll padding, which is what the cards then rest against */
	.dorniko-advantage-grid {
		padding-inline: 0;
	}

	/* a scroller, so every card stays reachable with the view script absent */
	.dorniko-advantage-grid__track {
		display: flex;
		padding-inline: var(--wp--preset--spacing--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--preset--spacing--gutter);
		scrollbar-width: none;
	}

	.dorniko-advantage-grid__track::-webkit-scrollbar {
		display: none;
	}

	.dorniko-advantage-grid__track .dorniko-advantage {
		flex: none;
		inline-size: 270px;
		scroll-snap-align: start;
	}

	.dorniko-advantage-grid__dots {
		display: flex;
	}
}

.dorniko-values {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-values__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	text-align: center;
}

.dorniko-values__eyebrow {
	font-weight: 500;
}

.dorniko-value-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dorniko-value {
	/* the rule is drawn on the row, so the padding has to sit inside the border box */
	box-sizing: border-box;
	display: flex;
	gap: var(--wp--preset--spacing--90);
	padding-block-end: var(--wp--preset--spacing--60);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
}

/* figma holds the title column at 230 whatever the wording, which is what lands every
   description on the same edge */
.dorniko-value__title {
	flex: none;
	inline-size: 230px;
	margin: 0;
	color: var(--wp--custom--palette--primary-600);
	font-weight: 500;
}

.dorniko-value__description {
	flex: 1 1 auto;
	margin: 0;
}

@media (width < 782px) {
	/* at 375 the pair stacks and reads centred, so the title gives up its column */
	.dorniko-value {
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		text-align: center;
	}

	.dorniko-value__title {
		inline-size: auto;
	}

	/* a grow factor is read on the block axis once the row stacks */
	.dorniko-value__description {
		flex: none;
	}
}

.dorniko-cta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--80);
	padding-block: var(--wp--preset--spacing--110);
	/* figma insets the card by 128 at 1440 and its contents by 16 at 375; one gutter is both */
	padding-inline: var(--wp--preset--spacing--gutter);
	border-radius: var(--wp--custom--radius--lg);
	text-align: center;
}

.dorniko-cta-card__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
}

.dorniko-cta-card__title-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-cta-card__eyebrow {
	font-weight: 500;
}

.dorniko-cta-card__button {
	display: flex;
	justify-content: center;
	inline-size: 100%;
}

@media (width < 782px) {
	.dorniko-cta-card {
		padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	}

	.dorniko-cta-card__button .wp-block-button,
	.dorniko-cta-card__button .wp-block-button__link {
		inline-size: 100%;
	}
}

.dorniko-portfolio-tabs {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--110);
}

.dorniko-portfolio-tabs__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.dorniko-portfolio-tabs__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-portfolio-tabs__eyebrow {
	font-weight: 500;
}

/* every panel follows the tab that opens it, which is the order the stack reads in; the
   row of tabs at 1440 is that same markup placed on a grid, so this side of the
   breakpoint is the plain one and is also what the editor shows */
.dorniko-company-tabs,
.dorniko-company-tabs-editor {
	display: flex;
	flex-direction: column;
}

.dorniko-company-tabs > .dorniko-company-tabs__tab:not(:first-child),
.dorniko-company-tabs-editor > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.dorniko-company-tabs__tab {
	/* a button is not a core group, so the tab height would otherwise measure the content box */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
	min-block-size: var(--wp--custom--control--tab-height-mobile);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--40);
	border: 0;
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--text-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--h-4);
	font-weight: 500;
	text-align: start;
	cursor: pointer;
}

/* a tab leaves 128px for its label. the persian names clear that at h-4 with room to
   spare; the english ones are longer and need the smaller step to stay on one line */
.dorniko-company-tabs__tab:lang(en) {
	font-size: var(--wp--preset--font-size--body-2);
	line-height: var(--wp--custom--line-height--body-2);
}

@media (width < 782px) {
	/* the tabs stack full width here, so the label has the room the design gives it */
	.dorniko-company-tabs__tab:lang(en) {
		font-size: var(--wp--preset--font-size--h-4);
		line-height: var(--wp--custom--line-height--h-4);
	}
}

/* nothing is collapsed while editing, so every header there reads as open */
.dorniko-company-tabs__tab[aria-expanded="true"],
.dorniko-company-tabs-editor .dorniko-company-tabs__tab {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
	background: var(--wp--preset--color--primary-500);
	color: var(--wp--preset--color--white);
}

.dorniko-company-tabs__chevron {
	display: flex;
	flex: none;
	inline-size: var(--wp--custom--icon--lg);
	block-size: var(--wp--custom--icon--lg);
}

.dorniko-company-tabs__tab[aria-expanded="false"] .dorniko-icon--chevron-up,
.dorniko-company-tabs__tab[aria-expanded="true"] .dorniko-icon--chevron-down {
	display: none;
}

.dorniko-company {
	/* not a core group, so the padding would otherwise fall outside the panel width */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--110);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--light);
	border-end-start-radius: var(--wp--custom--radius--lg);
	border-end-end-radius: var(--wp--custom--radius--lg);
}

/* the panel sets its own display, so the ua rule for the attribute no longer reaches it */
.dorniko-company[hidden] {
	display: none;
}

.dorniko-company__about {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--110);
}

.dorniko-company__intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-company__intro-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.dorniko-company__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-company__eyebrow {
	font-weight: 500;
}

.dorniko-company__logo,
.dorniko-company__products-image {
	margin: 0;
}

.dorniko-company__logo img {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--logo);
	object-fit: contain;
	border-radius: var(--wp--custom--radius--sm);
}

.dorniko-company__products {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-company__products-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
}

/* the photo leads the column at 375 and sits beside the text at 1440, so the two exports
   genuinely disagree and order carries the difference */
.dorniko-company__products-image {
	order: -1;
}

.dorniko-company__products-image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--square);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

/* the cell is a card here rather than the ruled strip the home page uses */
.dorniko-company .dorniko-stats .dorniko-stat {
	box-sizing: border-box;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--radius--lg);
}

.dorniko-company .dorniko-stats .dorniko-stat::before {
	content: none;
}

.dorniko-company .dorniko-stats .dorniko-stat__figure {
	color: var(--wp--preset--color--primary-500);
}

.dorniko-company .dorniko-stats .dorniko-stat__label {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--h-4);
	color: var(--wp--preset--color--text-primary);
}

.dorniko-company .dorniko-stats {
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
}

.dorniko-company__cta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	padding-inline: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg);
	text-align: center;
}

.dorniko-company__cta-header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-buttons.dorniko-company__cta-buttons {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-buttons.dorniko-company__cta-buttons .wp-block-button__link {
	inline-size: 100%;
}

@media (width >= 782px) {
	.dorniko-portfolio-tabs__header {
		padding-inline: var(--wp--preset--spacing--150);
	}

	/* the tabs take one wrapped flex line and the open panel the next; the stack reads
	   tab, panel, tab, panel, so the two groups have to be ordered apart to form a row */
	.dorniko-company-tabs {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: var(--wp--preset--spacing--20);
		/* trims the backing below to the strip; clip is not a scroll container, so the
		   tabs still stick */
		overflow-x: clip;
	}

	.dorniko-company-tabs > .dorniko-company-tabs__tab:not(:first-child) {
		margin-block-start: 0;
	}

	.dorniko-company-tabs > .dorniko-company-tabs__tab {
		/* the strip stays reachable while the panel scrolls past it, below the sticky navbar */
		position: sticky;
		inset-block-start: var(--wp--custom--navbar--height);
		order: 1;
		/* an auto basis would refuse to shrink a long company name and widen the row */
		flex: 1 1 0;
		min-inline-size: 0;
		flex-direction: column;
		justify-content: center;
		min-block-size: var(--wp--custom--control--tab-height);
		padding: var(--wp--preset--spacing--40);
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
		/* the pill is the stacked form; across a row the tabs and the panel are one square box */
		border-radius: 0;
		text-align: center;
	}

	/* one backing behind the whole row: it keeps the gaps opaque once the row is pinned
	   over the panel, and carries the rule that runs under the strip. it hangs off the
	   first tab so that it paints before every other tab and none of their hairlines are
	   overdrawn — flex widths land on half pixels, and a fill that ends on a border eats
	   the half of it that reads. the offsets resolve against the padding box, so the
	   inline one steps back over the border to start at the tab's outer edge */
	.dorniko-company-tabs > .dorniko-company-tabs__tab:first-child::after {
		content: "";
		position: absolute;
		inset-block: calc(-1 * var(--wp--custom--border--hairline));
		inset-inline-start: calc(100% + var(--wp--custom--border--hairline));
		/* the strip is always narrower than the viewport, so this reaches its far edge */
		inline-size: 100vw;
		background: var(--wp--preset--color--white);
		border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	}

	.dorniko-company-tabs > .dorniko-company-tabs__tab[aria-expanded="false"] {
		background: var(--wp--preset--color--white);
	}

	/* the open tab hands its slice of the rule over to the panel it opens */
	.dorniko-company-tabs > .dorniko-company-tabs__tab[aria-expanded="true"] {
		border-block-end-color: transparent;
		background: var(--wp--preset--color--light);
		color: var(--wp--preset--color--primary-500);
	}

	.dorniko-company-tabs .dorniko-company-tabs__chevron {
		display: none;
	}

	.dorniko-company {
		gap: var(--wp--preset--spacing--140);
		padding-block: var(--wp--preset--spacing--110);
		padding-inline: var(--wp--preset--spacing--80);
	}

	.dorniko-company-tabs > .dorniko-company {
		order: 2;
		flex: 0 0 100%;
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
		border-block-start: 0;
		border-radius: 0;
	}

	.dorniko-company__intro {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--110);
	}

	/* figma: 350 at 1440, beside a text column that takes what is left */
	.dorniko-company__logo {
		flex: none;
		inline-size: 350px;
	}

	.dorniko-company__intro-text,
	.dorniko-company__products-text,
	.dorniko-company__cta-header {
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	.dorniko-company .dorniko-stats {
		column-gap: var(--wp--preset--spacing--70);
	}

	.dorniko-company__products {
		flex-direction: row;
		align-items: center;
	}

	/* figma: 550 at 1440 */
	.dorniko-company__products-image {
		order: 0;
		flex: none;
		inline-size: 550px;
	}

	.dorniko-company__products-image img {
		aspect-ratio: var(--wp--custom--ratio--tile);
	}

	.dorniko-company__cta {
		flex-direction: row;
		align-items: center;
		padding-block: var(--wp--preset--spacing--110);
		padding-inline: var(--wp--preset--spacing--150);
		text-align: start;
	}

	.wp-block-buttons.dorniko-company__cta-buttons {
		flex: none;
	}
}

/* the card climbs the last 80 of the image rather than following it, so the two share a middle
   row; the image spans the first pair of rows and the card the second */
.dorniko-contact-hero {
	display: grid;
	grid-template-rows: auto 80px auto;
}

.dorniko-contact-hero > .wp-block-dorniko-page-hero {
	grid-column: 1;
	grid-row: 1 / 3;
	/* the card covers the foot of the image, so the title centres in what stays visible */
	padding-block: 0 var(--wp--preset--spacing--110);
}

/* positioned so it paints over the image, which is positioned itself; dom order settles the pair */
.dorniko-contact-hero__card {
	position: relative;
	grid-column: 1;
	grid-row: 2 / 4;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
	max-inline-size: var(--wp--custom--layout--content-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--90);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
}

.dorniko-contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--xl);
	text-align: center;
}

/* the 48 disc has no size token behind it and is drawn nowhere else */
.dorniko-contact-card__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	aspect-ratio: var(--wp--custom--ratio--square);
	background: var(--wp--preset--color--primary-500);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--white);
}

.dorniko-contact-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
}

.dorniko-contact-card__title,
.dorniko-contact-card__value {
	margin: 0;
}

@media (width < 782px) {
	.dorniko-contact-hero__card {
		grid-template-columns: 1fr;
		/* edge to edge here, and each row already carries its own 24 */
		padding-inline: 0;
	}

	/* the two exports disagree: at 1440 the address closes the row, at 375 it sits between
	   the phone and the email */
	.dorniko-contact-hero__card > :nth-child(2) {
		order: 1;
	}
}

/* the map closes the panel the contact card opens, so when the two sit together the rhythm
   between them goes; :root carries it past the gap the constrained layout sets */
:root .dorniko-contact-hero + .dorniko-google-map {
	margin-block-start: 0;
}

.dorniko-google-map__panel {
	position: relative;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: var(--wp--custom--layout--content-max);
	margin-inline: auto;
	/* figma: 344 at both widths */
	block-size: 344px;
	border-end-start-radius: var(--wp--custom--radius--lg);
	border-end-end-radius: var(--wp--custom--radius--lg);
}

.dorniko-google-map__frame {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.dorniko-google-map__frame--inert {
	pointer-events: none;
}

/* the touch box is 44 around a 32 pill, so it starts 6 above where the white begins */
.dorniko-google-map__chip {
	position: absolute;
	inset-block-start: 29px;
	inset-inline-start: 27px;
	display: flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--secondary-500);
	text-decoration: none;
}

.dorniko-google-map__chip-face {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: 32px;
	padding-block: var(--wp--preset--spacing--10);
	padding-inline: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--white);
	/* no radius token reaches 4 */
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--body-2);
	line-height: var(--wp--custom--line-height--body-2);
}

.dorniko-google-map__chip:hover .dorniko-google-map__chip-face,
.dorniko-google-map__chip:focus .dorniko-google-map__chip-face {
	color: var(--wp--custom--hover--link);
}

@media (width < 782px) {
	/* the two exports disagree: at 1440 the chip opens from the top start, at 375 from the
	   bottom end */
	.dorniko-google-map__chip {
		inset-block-start: auto;
		inset-block-end: 14px;
		inset-inline-start: auto;
		inset-inline-end: var(--wp--preset--spacing--50);
	}
}

.dorniko-contact-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-contact-form__header,
.dorniko-collab-contact-form__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	/* figma stops the header short of the card, and no layout token reaches 900 */
	max-inline-size: 900px;
	text-align: center;
}

.dorniko-contact-form__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-contact-form__eyebrow {
	font-weight: 500;
}

/* the surface a form sits on, the same in every section that holds one */
.dorniko-contact-form__card,
.dorniko-academy-contact-form__card,
.dorniko-collab-contact-form__card {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--90);
	padding-inline: var(--wp--preset--spacing--110);
	background: var(--wp--preset--color--light);
	border-radius: var(--wp--custom--radius--lg);
}

.dorniko-contact-form__card,
.dorniko-collab-contact-form__card {
	inline-size: 100%;
}

/* contact form 7 draws the form and its own stylesheet is switched off in functions.php, so
   everything from here down carries the controls, the stack they sit in whichever template
   the form was built from, and the states the plugin needs to show */

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .hidden-fields-container {
	display: none;
}

/* the live region the plugin writes its response into, and the resume control the dashed
   zone below stands in for — both stay reachable, neither takes up room */
:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) :is(.screen-reader-response, .dorniko-form__field--upload .wpcf7-file) {
	position: absolute;
	overflow: hidden;
	clip-path: inset(50%);
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

/* the paragraph formatter is off, so the stack is drawn here rather than on the br it wrote */
:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

/* the designed template sets the label beside its control and the plugin default wraps one
   inside the other; both stack on the same 8 */
:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-form label {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	font-weight: 500;
}

.dorniko-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
}

.dorniko-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--70);
	row-gap: var(--wp--preset--spacing--60);
}

.dorniko-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-form__field--wide {
	grid-column: 1 / -1;
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-form-control:is(input, select, textarea):where(:not([type="submit"])) {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: var(--wp--custom--control--input-height);
	padding-block: 0;
	padding-inline: var(--wp--custom--control--input-padding-inline);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text-primary);
	/* the ua sheet pins the tel field to ltr, which drags its placeholder out of reading order */
	direction: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-1);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body-1);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-form-control:is(input, textarea)::placeholder {
	color: var(--wp--preset--color--text-tertiary);
	/* firefox dims it otherwise, and the design has one grey */
	opacity: 1;
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) textarea.wpcf7-form-control {
	/* figma: the box does not grow, the message scrolls inside it */
	block-size: 120px;
	padding-block: var(--wp--preset--spacing--20);
	resize: none;
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) select.wpcf7-form-control {
	appearance: none;
	/* the glyph is drawn on the wrap, so the value stops before it */
	padding-inline-end: calc(var(--wp--custom--control--input-padding-inline) * 2 + var(--wp--custom--icon--sm));
}

/* first_as_label leaves the placeholder option with an empty value, which is how it is told apart */
:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) select.wpcf7-form-control:has(option[value=""]:checked) {
	color: var(--wp--preset--color--text-tertiary);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) select.wpcf7-form-control option {
	color: var(--wp--preset--color--text-primary);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-form-control-wrap:has(select)::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--wp--custom--control--input-padding-inline);
	inline-size: var(--wp--custom--icon--sm);
	block-size: var(--wp--custom--icon--sm);
	background: currentColor;
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-mask: url("assets/icons/chevron-down.svg") no-repeat center / contain;
	mask: url("assets/icons/chevron-down.svg") no-repeat center / contain;
}

/* the resume field carries its two gaps on its parts: the plugin writes the error tip inside
   the wrap that follows the zone, and that wrap is not there to be spaced when it is empty */
.dorniko-form__field--upload {
	gap: 0;
}

.dorniko-form__field--upload .dorniko-form__upload {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* a label, so the whole zone opens the picker; the column and its 8 come from the label rule
   above, which is the same stack the design draws inside the zone */
:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) label.dorniko-form__upload {
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* the zone is a fixed height with its content centred in it, not a stack that fills it */
	block-size: 120px;
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--custom--control--input-padding-inline);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--hairline) dashed var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
}

.dorniko-form__upload-icon {
	flex: none;
	inline-size: var(--wp--custom--icon--lg);
	block-size: var(--wp--custom--icon--lg);
	background: var(--wp--preset--color--text-tertiary);
	-webkit-mask: url("assets/icons/upload.svg") no-repeat center / contain;
	mask: url("assets/icons/upload.svg") no-repeat center / contain;
}

.dorniko-form__upload-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dorniko-form__upload-action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--custom--button--small--height);
	padding-block: var(--wp--custom--button--small--padding-block);
	padding-inline: var(--wp--custom--button--small--padding-inline);
	border-radius: var(--wp--custom--button--radius);
	color: var(--wp--preset--color--primary-500);
	font-size: var(--wp--custom--button--small--font-size);
	line-height: var(--wp--custom--button--small--line-height);
}

.dorniko-form__upload-hint {
	color: var(--wp--preset--color--text-tertiary);
	font-size: var(--wp--preset--font-size--body-3);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body-3);
	text-align: center;
}

/* the control is clipped, so the ring and the invalid border it would carry are drawn on the
   zone that stands in for it */
.dorniko-form__field--upload:has(.wpcf7-file:focus-visible) .dorniko-form__upload {
	outline: var(--wp--custom--border--strong) solid var(--wp--preset--color--primary-500);
	outline-offset: var(--wp--custom--border--strong);
}

.dorniko-form__field--upload:has(.wpcf7-not-valid) .dorniko-form__upload {
	border-color: var(--wp--custom--palette--error);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) :is(.dorniko-form__submit, input[type="submit"]) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--button--gap);
	inline-size: 100%;
	padding-block: var(--wp--custom--button--medium--padding-block);
	padding-inline: var(--wp--custom--button--medium--padding-inline);
	background: var(--wp--preset--color--primary-500);
	border: 0;
	border-radius: var(--wp--custom--button--radius);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--custom--button--medium--font-size);
	font-weight: 500;
	line-height: var(--wp--custom--button--medium--line-height);
	cursor: pointer;
}

/* an input is a replaced element and carries no pseudo-element, which is why the designed
   template writes the button out rather than leaving it to the submit form-tag */
:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .dorniko-form__submit::after {
	content: "";
	flex: none;
	inline-size: var(--wp--custom--icon--md);
	block-size: var(--wp--custom--icon--md);
	background: currentColor;
	-webkit-mask: url("assets/icons/chevron-right.svg") no-repeat center / contain;
	mask: url("assets/icons/chevron-right.svg") no-repeat center / contain;
}

/* the asset ships pointing ltr, like every other chevron here */
[dir="rtl"] :is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .dorniko-form__submit::after {
	transform: scaleX(-1);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) :is(.dorniko-form__submit, input[type="submit"]):hover {
	background: var(--wp--custom--hover--solid);
}

/* the design draws no waiting state; the button is held on the disabled tokens while it posts */
:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) form.submitting :is(.dorniko-form__submit, input[type="submit"]) {
	background: var(--wp--custom--hover--disabled-surface);
	color: var(--wp--custom--hover--disabled-text);
	pointer-events: none;
}

/* the field error the design ships at display:none, in the 16 it reserves under the input */
:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--custom--palette--error);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--caption);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wp--custom--palette--error);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) .wpcf7-response-output {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline) solid currentColor;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--body-2);
	line-height: var(--wp--custom--line-height--body-2);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) form:is(.init, .resetting, .submitting) .wpcf7-response-output {
	display: none;
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) form.sent .wpcf7-response-output {
	color: var(--wp--custom--palette--success);
}

:is(.dorniko-contact-form, .dorniko-academy-contact-form, .dorniko-collab-contact-form) form:is(.invalid, .unaccepted, .failed, .aborted, .spam, .payment-required) .wpcf7-response-output {
	color: var(--wp--custom--palette--error);
}

@media (width < 782px) {
	.dorniko-contact-form {
		gap: var(--wp--preset--spacing--70);
	}

	.dorniko-contact-form__card,
	.dorniko-academy-contact-form__card,
	.dorniko-collab-contact-form__card {
		padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
		padding-inline: var(--wp--preset--spacing--40);
	}

	.dorniko-form__fields {
		grid-template-columns: 1fr;
	}
}

.dorniko-academy-about {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--80);
}

/* figma: text 594 against photo 550 at 1440, so both track the row width */
.dorniko-academy-about__text {
	display: flex;
	flex: 594 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

/* the design puts the photo at the inline start; the text stays first in the dom for
   reading order */
.dorniko-academy-about__photo {
	flex: 550 1 0;
	order: -1;
	margin: 0;
}

.dorniko-academy-about__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-academy-about__eyebrow {
	font-weight: 500;
}

.dorniko-academy-about__photo img {
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--wide);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

@media (width < 782px) {
	.dorniko-academy-about {
		flex-direction: column;
		align-items: stretch;
	}

	/* the zero basis would be read on the block axis once the row stacks */
	.dorniko-academy-about__photo,
	.dorniko-academy-about__text {
		flex: none;
	}

	/* at 375 the photo drops below the text, which is the dom order */
	.dorniko-academy-about__photo {
		order: 0;
	}
}

.dorniko-academy-advantages {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-academy-advantages__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	text-align: center;
}

.dorniko-academy-advantages__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-academy-advantages__eyebrow {
	font-weight: 500;
}

.dorniko-advantage-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--70);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dorniko-advantage-row .dorniko-advantage {
	align-items: flex-start;
}

@media (width < 782px) {
	.dorniko-advantage-row {
		grid-template-columns: 1fr;
	}
}

.dorniko-academy-audience {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-academy-audience__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-academy-audience__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-academy-audience__eyebrow {
	font-weight: 500;
}

/* the rule that divides the two columns belongs to the list, which stands on the left, so
   it is drawn on the start edge; 1.5 sits between the two border tokens and is used once */
.dorniko-audience-list {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	margin: 0;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--10) 0;
	border-inline-start: 1.5px solid var(--wp--custom--border--color);
	list-style: none;
}

.dorniko-audience-item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--60);
}

/* the 40 disc has no size token behind it and is drawn nowhere else */
.dorniko-audience-item__mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	aspect-ratio: var(--wp--custom--ratio--square);
	background: var(--wp--preset--color--primary-500);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--white);
}

/* the check is drawn at 22 inside the disc, which no icon token carries */
.dorniko-audience-item__mark .dorniko-icon {
	width: 22px;
	height: 22px;
}

.dorniko-audience-item__text {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-audience-item__title {
	margin: 0;
	font-weight: 500;
}

.dorniko-audience-item__description {
	margin: 0;
}

@media (width < 782px) {
	.dorniko-academy-audience {
		flex-direction: column;
		align-items: stretch;
	}

	/* the rule divides two columns that no longer stand side by side at 375 */
	.dorniko-audience-list {
		padding-inline: 0;
		border-inline-start: 0;
	}

	.dorniko-audience-item {
		padding-inline: var(--wp--preset--spacing--20);
	}

	/* the title gives up its place beside the description once the row narrows */
	.dorniko-audience-item__text {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--20);
	}
}
/* the section runs edge to edge only so the carousel can pass the gutter at 375; the header
   and the arrow row re-make the page column themselves */
.dorniko-academy-gallery {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
	padding-block-end: var(--wp--preset--spacing--60);
	text-align: center;
}

.dorniko-academy-gallery__header {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
	max-inline-size: calc(var(--wp--custom--layout--content-max) + var(--wp--preset--spacing--gutter) * 2);
	padding-inline: var(--wp--preset--spacing--gutter);
}

.dorniko-academy-gallery__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-academy-gallery__eyebrow {
	font-weight: 500;
}

/* figma: the card is 650 of the 1024 viewport at 1440 and 310 of the 375 at 375, so it holds
   its share of the viewport and the peek either side survives every width between the two */
.dorniko-video-carousel {
	--dorniko-video-card: 63.5%;
	--dorniko-video-gap: var(--wp--preset--spacing--70);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	inline-size: 100%;
}

.dorniko-video-carousel__row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--70);
	inline-size: 100%;
	max-inline-size: calc(var(--wp--custom--layout--content-max) + var(--wp--preset--spacing--gutter) * 2);
	padding-inline: var(--wp--preset--spacing--gutter);
}

.dorniko-video-carousel__arrow {
	box-sizing: border-box;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--button--medium--height);
	block-size: var(--wp--custom--button--medium--height);
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--primary-500);
	border-radius: var(--wp--custom--radius--sm);
	background: none;
	color: var(--wp--preset--color--primary-500);
	cursor: pointer;
}

.dorniko-video-carousel__arrow:hover,
.dorniko-video-carousel__arrow:focus {
	background: var(--wp--custom--hover--tint);
}

/* figma: 1024 of the 1184 column at 1440, the rest taken by the two arrows. a scroller, so
   every video stays reachable with the view script absent */
.dorniko-video-carousel__viewport {
	flex: 0 1 1024px;
	min-inline-size: 0;
	margin-inline: auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.dorniko-video-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.dorniko-video-carousel__track {
	display: flex;
	gap: var(--dorniko-video-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* what lets the first and the last card reach the middle. the ends are flex items rather
   than padding on the track, because a scroll container drops the padding that follows its
   last child and the last card would then stop short; each one is short by the gap it adds */
.dorniko-video-carousel__track::before,
.dorniko-video-carousel__track::after {
	content: "";
	flex: none;
	inline-size: calc((100% - var(--dorniko-video-card)) / 2 - var(--dorniko-video-gap));
}

/* once the script repeats the set, a real card stands either side and these would only pad
   the far ends of a track the carousel never travels to */
.dorniko-video-carousel[data-dorniko-loop] .dorniko-video-carousel__track::before,
.dorniko-video-carousel[data-dorniko-loop] .dorniko-video-carousel__track::after {
	display: none;
}

/* the text is pushed down by its own margin rather than by space-between, so a card with no
   video keeps it at the foot; the disc is placed rather than padded down, which is what keeps
   the frame at 16/9 however far the copy runs */
.dorniko-video-card {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	inline-size: var(--dorniko-video-card);
	aspect-ratio: var(--wp--custom--ratio--wide);
	padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--silver);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--white);
	scroll-snap-align: center;
}

/* the cards either side of the middle one stand behind it; view.js owns the state, so the
   plain scroller left when the script is absent stays sharp */
.dorniko-video-card[aria-current="false"] {
	filter: blur(2px);
}

/* image, then the gallery gradient; first layer paints on top */
.dorniko-video-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--wp--preset--gradient--gallery-overlay);
}

/* figma: the disc is 48 across and sits 144 down a card 366 tall, which is the ratio below.
   the 48 has no size token behind it and is drawn nowhere else */
.dorniko-video-card__play {
	box-sizing: border-box;
	position: absolute;
	inset-block-start: 39.344%;
	inset-inline: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	margin-inline: auto;
	aspect-ratio: var(--wp--custom--ratio--square);
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--pill);
	background: none;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

/* positioned so it paints over the gradient; dom order settles the pair, so neither takes a z-index */
.dorniko-video-card__text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
	margin-block-start: auto;
}

.dorniko-video-card__title,
.dorniko-video-card__description {
	margin: 0;
}

/* the file plays at its own ratio, which the card's 16/9 frame cannot give it, so it opens
   over the page instead of inside the card */
.dorniko-video-card__dialog {
	box-sizing: border-box;
	position: fixed;
	inline-size: min(var(--wp--custom--layout--content-max), 100% - var(--wp--preset--spacing--gutter) * 2);
	max-inline-size: none;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary-800);
	overflow: hidden;
}

.dorniko-video-card__dialog::backdrop {
	background: var(--wp--custom--palette--overlay-dark);
}

/* the cap is a share of the window rather than a design measure: it is what keeps a portrait
   file inside the screen */
.dorniko-video-card__dialog video {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 80vh;
	margin-inline: auto;
}

.dorniko-video-card__close {
	box-sizing: border-box;
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-end: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--button--small--height);
	block-size: var(--wp--custom--button--small--height);
	padding: var(--wp--preset--spacing--20);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--primary-500);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--custom--palette--overlay-glass);
	color: var(--wp--preset--color--primary-500);
	cursor: pointer;
}

.dorniko-video-card__close:hover,
.dorniko-video-card__close:focus {
	background: var(--wp--preset--color--white);
}

.dorniko-video-carousel__dots {
	display: none;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-video-carousel__dot {
	box-sizing: border-box;
	inline-size: 12px;
	aspect-ratio: var(--wp--custom--ratio--square);
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--radius--lg);
	background: none;
	cursor: pointer;
}

.dorniko-video-carousel__dot[aria-current="true"] {
	background: var(--wp--preset--color--gray);
}

@media (width < 782px) {
	.dorniko-academy-gallery {
		padding-block-end: var(--wp--preset--spacing--70);
	}

	.dorniko-video-carousel {
		--dorniko-video-card: 82.667%;
		--dorniko-video-gap: var(--wp--preset--spacing--60);
	}

	/* the track runs the full width at 375, so the row gives up the gutter and the arrows,
	   which stand over the card there, take it back on their own */
	.dorniko-video-carousel__row {
		position: relative;
		padding-inline: 0;
	}

	.dorniko-video-carousel__arrow {
		position: absolute;
		z-index: 1;
		inset-block-start: 50%;
		inline-size: var(--wp--custom--button--small--height);
		block-size: var(--wp--custom--button--small--height);
		padding: var(--wp--preset--spacing--20);
		background: var(--wp--custom--palette--overlay-glass);
		transform: translateY(-50%);
	}

	.dorniko-video-carousel__arrow[data-dorniko-carousel="previous"] {
		inset-inline-start: var(--wp--preset--spacing--gutter);
	}

	.dorniko-video-carousel__arrow[data-dorniko-carousel="next"] {
		inset-inline-end: var(--wp--preset--spacing--gutter);
	}

	.dorniko-video-carousel__arrow .dorniko-icon {
		width: var(--wp--custom--icon--sm);
		height: var(--wp--custom--icon--sm);
	}

	.dorniko-video-carousel__viewport {
		flex: 1 1 auto;
	}

	.dorniko-video-card {
		padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	}

	/* figma: 32 across, 37 down a card 174 tall. the 32 has no size token behind it either */
	.dorniko-video-card__play {
		inset-block-start: 21.264%;
		inline-size: 32px;
	}

	.dorniko-video-card__play .dorniko-icon {
		width: var(--wp--custom--icon--sm);
		height: var(--wp--custom--icon--sm);
	}

	.dorniko-video-card__text {
		gap: var(--wp--preset--spacing--10);
	}

	/* the two exports name different presets here, rather than one size scaling */
	.dorniko-video-card__description {
		font-size: var(--wp--preset--font-size--body-3);
		line-height: var(--wp--custom--line-height--body-3);
	}

	.dorniko-video-carousel__dots {
		display: flex;
	}
}

.dorniko-academy-contact-form {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

/* figma: header 544 against card 592 at 1440, so both track the row width */
.dorniko-academy-contact-form__header {
	display: flex;
	flex: 544 1 0;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-academy-contact-form__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-academy-contact-form__eyebrow {
	font-weight: 500;
}

.dorniko-academy-contact-form__card {
	display: flex;
	flex: 592 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
}

@media (width < 782px) {
	.dorniko-academy-contact-form {
		flex-direction: column;
		align-items: stretch;
	}

	/* the zero basis would be read on the block axis once the row stacks */
	.dorniko-academy-contact-form__header,
	.dorniko-academy-contact-form__card {
		flex: none;
	}

	/* the header is set to the start edge at 1440 and centred at 375 */
	.dorniko-academy-contact-form__header {
		text-align: center;
	}
}

.dorniko-engines {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-engines__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	text-align: center;
}

.dorniko-engines__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-engines__eyebrow {
	font-weight: 500;
}

.dorniko-engines__row {
	display: flex;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-engine {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--light);
	border: var(--wp--custom--border--hairline) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--lg);
}

.dorniko-engine__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.dorniko-engine__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-engine__category {
	font-weight: 500;
}

/* the start padding carries the designed 16 inset and the 16 the markers hang in */
.dorniko-engine__list {
	margin: 0;
	padding-block: 0 var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.dorniko-engine__button .wp-block-button,
.dorniko-engine__button .wp-block-button__link {
	inline-size: 100%;
}

@media (width < 782px) {
	.dorniko-engines__row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--60);
	}

	/* the zero basis would be read on the block axis once the row stacks */
	.dorniko-engine {
		flex: none;
	}
}

/* the dts row is the same object on white, so both sections share every rule below */
.dorniko-job-about,
.dorniko-dts-about {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--110);
}

/* figma: text 570 against photo 550 at 1440, so both track the row width */
.dorniko-job-about__text,
.dorniko-dts-about__text {
	display: flex;
	flex: 570 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
}

.dorniko-job-about__title-block,
.dorniko-dts-about__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-job-about__eyebrow,
.dorniko-dts-about__eyebrow {
	font-weight: 500;
}

/* the rule reads as the start edge in both directions; 4 is wider than either border token */
.dorniko-job-about__statement,
.dorniko-dts-about__statement {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding-inline-start: var(--wp--preset--spacing--60);
	border-inline-start: 4px solid var(--wp--preset--color--primary-500);
}

.dorniko-job-about__statement-title,
.dorniko-dts-about__statement-title {
	font-weight: 500;
}

/* the design puts the photo at the inline end, which is where the dom already leaves it */
.dorniko-job-about__photo,
.dorniko-dts-about__photo {
	flex: 550 1 0;
	margin: 0;
}

/* figma: 550 x 366.67 at 1440 and 343 x 228.67 at 375, the same 3/2 either way, and no ratio token carries it */
.dorniko-job-about__photo img,
.dorniko-dts-about__photo img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

@media (width < 782px) {
	.dorniko-job-about,
	.dorniko-dts-about {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--90);
	}

	/* the zero basis would be read on the block axis once the row stacks */
	.dorniko-job-about__text,
	.dorniko-job-about__photo,
	.dorniko-dts-about__text,
	.dorniko-dts-about__photo {
		flex: none;
	}
}

/* the section runs edge to edge only so the carousel can pass the gutter at 375; the header
   and the row inside it re-make the page column themselves */
.dorniko-job-approach {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-job-approach__header,
.dorniko-step-grid {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: calc(var(--wp--custom--layout--content-max) + var(--wp--preset--spacing--gutter) * 2);
	padding-inline: var(--wp--preset--spacing--gutter);
}

.dorniko-job-approach__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	text-align: center;
}

.dorniko-job-approach__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-job-approach__eyebrow {
	font-weight: 500;
}

/* the gap belongs to the dots, which only stand under the row at 375 */
.dorniko-step-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

.dorniko-step-grid__track {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--70);
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dorniko-step {
	/* the card is read as lifted off the ground the section stands on, so a section on
	   white takes the other neutral */
	--dorniko-step-ground: var(--wp--preset--color--white);

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--dorniko-step-ground);
}

/* the rule is drawn on the heading, so its padding has to sit inside the border box. the
   size comes from the preset, the leading with it, which h3 would otherwise set to its own */
.dorniko-step__title {
	box-sizing: border-box;
	margin: 0;
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: var(--wp--custom--border--strong) solid var(--wp--preset--color--primary-500);
	line-height: var(--wp--custom--line-height--h-4);
	font-weight: 500;
}

.dorniko-step__description {
	margin: 0;
}

.dorniko-step-grid__dots {
	display: none;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-step-grid__dot {
	box-sizing: border-box;
	inline-size: 12px;
	aspect-ratio: var(--wp--custom--ratio--square);
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--radius--lg);
	background: none;
	cursor: pointer;
}

.dorniko-step-grid__dot[aria-current="true"] {
	background: var(--wp--preset--color--gray);
}

@media (width < 782px) {
	/* the row scrolls the full width at 375, so the gutter moves off it and onto the scroll
	   padding, which is what the cards then rest against */
	.dorniko-step-grid {
		padding-inline: 0;
	}

	/* a scroller, so every card stays reachable with the view script absent */
	.dorniko-step-grid__track {
		display: flex;
		padding-inline: var(--wp--preset--spacing--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--preset--spacing--gutter);
		scrollbar-width: none;
	}

	.dorniko-step-grid__track::-webkit-scrollbar {
		display: none;
	}

	.dorniko-step-grid__track .dorniko-step {
		flex: none;
		inline-size: 270px;
		scroll-snap-align: start;
	}

	.dorniko-step-grid__dots {
		display: flex;
	}
}

.dorniko-job-services {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-job-services__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-job-services__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-job-services__eyebrow {
	font-weight: 500;
}

.dorniko-job-services__description {
	max-inline-size: 900px;
}

/* every panel follows the tab that opens it, which is the order the stack reads in; at
   1440 that same markup is two columns — the tabs down the start one, the open panel
   spanning the other — so the row count has to travel from php for the span to reach */
.dorniko-numbered-tabs {
	/* a closed tab lies flush with the ground the section stands on, and everything read as
	   lifted off it — the open tab, its card, the resting number — takes the other neutral;
	   a section on white therefore wants the pair the other way round */
	--dorniko-numbered-tabs-ground: var(--wp--preset--color--light);
	--dorniko-numbered-tabs-raised: var(--wp--preset--color--white);

	display: grid;
	/* figma: 500 beside a card that takes what is left, at 1184 */
	grid-template-columns: 500px minmax(0, 1fr);
	grid-template-rows: repeat(var(--dorniko-numbered-tabs-rows), auto);
	column-gap: var(--wp--preset--spacing--60);
	row-gap: var(--wp--preset--spacing--20);
}

/* nothing is collapsed while editing, so every pair there reads as the stack */
.dorniko-numbered-tabs-editor {
	--dorniko-numbered-tabs-ground: var(--wp--preset--color--light);
	--dorniko-numbered-tabs-raised: var(--wp--preset--color--white);

	display: flex;
	flex-direction: column;
	counter-reset: dorniko-numbered-tab;
}

.dorniko-numbered-tabs-editor > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.dorniko-numbered-tabs__tab {
	/* a button is not a core group, so the tab height would otherwise measure the content box */
	box-sizing: border-box;
	grid-column: 1;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	/* the figma frame insets the tabs inside the 500 with padding of its own */
	margin-inline: var(--wp--preset--spacing--40);
	min-block-size: var(--wp--custom--control--tab-height-mobile);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--dorniko-numbered-tabs-ground);
	color: var(--wp--preset--color--text-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--h-4);
	font-weight: 500;
	text-align: start;
	cursor: pointer;
}

.dorniko-numbered-tabs__tab[aria-expanded="true"],
.dorniko-numbered-tabs-editor .dorniko-numbered-tabs__tab {
	background: var(--dorniko-numbered-tabs-raised);
}

.dorniko-numbered-tabs__label {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.dorniko-numbered-tabs__chevron {
	display: flex;
	flex: none;
	inline-size: var(--wp--custom--icon--lg);
	block-size: var(--wp--custom--icon--lg);
}

/* the two columns keep a card open at all times, so the chevron only points across at it */
.dorniko-numbered-tabs__chevron .dorniko-icon--chevron-down,
.dorniko-numbered-tabs__chevron .dorniko-icon--chevron-up {
	display: none;
}

/* the shape is shared between the tab and the card it opens; the fill is what says which
   of the six the reader is on */
.dorniko-numbered-tabs__number,
.dorniko-numbered-tab__number {
	box-sizing: border-box;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	/* figma: 36 at 1440, 32 at 375 */
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--h-4);
	font-weight: 500;
}

.dorniko-numbered-tabs__number {
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	background: var(--dorniko-numbered-tabs-raised);
	color: var(--wp--preset--color--text-secondary);
}

.dorniko-numbered-tab__number,
.dorniko-numbered-tabs__tab[aria-expanded="true"] .dorniko-numbered-tabs__number,
.dorniko-numbered-tabs-editor .dorniko-numbered-tabs__number {
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--silver);
	background: var(--wp--preset--color--primary-500);
	color: var(--wp--preset--color--white);
}

/* the number is positional, so the editor counts the tabs rather than storing it */
.dorniko-numbered-tabs-editor .dorniko-numbered-tabs__number::before {
	counter-increment: dorniko-numbered-tab;
	content: counter(dorniko-numbered-tab, persian);
}

.dorniko-numbered-tab {
	/* not a core group, so the padding would otherwise fall outside the panel width */
	box-sizing: border-box;
	grid-column: 2;
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--70);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--dorniko-numbered-tabs-raised);
}

/* the panel sets its own display, so the ua rule for the attribute no longer reaches it */
.dorniko-numbered-tab[hidden] {
	display: none;
}

.dorniko-numbered-tab__number {
	align-self: flex-start;
}

.dorniko-numbered-tab__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.dorniko-numbered-tab__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-numbered-tab__eyebrow {
	font-weight: 500;
}

@media (width < 782px) {
	.dorniko-numbered-tabs {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* the open tab is the head of the card below it, so only the tabs carry the gap */
	.dorniko-numbered-tabs > .dorniko-numbered-tabs__tab:not(:first-child) {
		margin-block-start: var(--wp--preset--spacing--20);
	}

	.dorniko-numbered-tabs__tab {
		gap: var(--wp--preset--spacing--20);
		margin-inline: 0;
		padding-inline: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--body-1);
		line-height: var(--wp--custom--line-height--body-1);
	}

	.dorniko-numbered-tabs__tab[aria-expanded="true"] {
		min-block-size: var(--wp--custom--control--tab-height);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}

	.dorniko-numbered-tabs__number,
	.dorniko-numbered-tab__number {
		inline-size: 32px;
		block-size: 32px;
	}

	/* the stack collapses, so its chevron reads down or up instead */
	.dorniko-numbered-tabs__chevron .dorniko-icon--chevron-right,
	.dorniko-numbered-tabs__tab[aria-expanded="false"] .dorniko-icon--chevron-up,
	.dorniko-numbered-tabs__tab[aria-expanded="true"] .dorniko-icon--chevron-down {
		display: none;
	}

	.dorniko-numbered-tabs__tab[aria-expanded="false"] .dorniko-icon--chevron-down,
	.dorniko-numbered-tabs__tab[aria-expanded="true"] .dorniko-icon--chevron-up {
		display: block;
	}

	.dorniko-numbered-tabs > .dorniko-numbered-tab {
		padding-inline: var(--wp--preset--spacing--60);
		border-block-start: 0;
		border-start-start-radius: 0;
		border-start-end-radius: 0;
	}

	/* the head of the card carries the number, so the body no longer repeats it */
	.dorniko-numbered-tabs > .dorniko-numbered-tab > .dorniko-numbered-tab__number {
		display: none;
	}
}

.dorniko-dts-services {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
}

/* this section keeps the page's white, so the strip's two neutrals swap round it */
.dorniko-dts-services .dorniko-numbered-tabs,
.dorniko-dts-services .dorniko-numbered-tabs-editor {
	--dorniko-numbered-tabs-ground: var(--wp--preset--color--white);
	--dorniko-numbered-tabs-raised: var(--wp--preset--color--light);
}

.dorniko-dts-services__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.dorniko-dts-services__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-dts-services__eyebrow {
	font-weight: 500;
}

.dorniko-dts-services__description {
	max-inline-size: 900px;
}

/* the section runs edge to edge only so the carousel can pass the gutter at 375; the header
   and the row inside it re-make the page column themselves */
.dorniko-dts-approach {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

/* this section keeps the page's white, so the card takes the light neutral */
.dorniko-dts-approach .dorniko-step {
	--dorniko-step-ground: var(--wp--preset--color--light);
}

.dorniko-dts-approach__header {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
	max-inline-size: calc(var(--wp--custom--layout--content-max) + var(--wp--preset--spacing--gutter) * 2);
	padding-inline: var(--wp--preset--spacing--gutter);
	text-align: center;
}

.dorniko-dts-approach__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.dorniko-dts-approach__eyebrow {
	font-weight: 500;
}

.dorniko-collab-contact-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--90);
}

.dorniko-collab-contact-form__title-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.dorniko-collab-contact-form__eyebrow {
	font-weight: 500;
}

/* figma draws this form on a 44 control, the height the medium button carries, where the input
   token holds 48 */
.dorniko-collab-contact-form input.wpcf7-form-control:where(:not([type="submit"])) {
	block-size: 44px;
}