/* ==========================================================================
   Pittar — mosquito research & manufacturing
   Design tokens, layout primitives, header and hero.
   ========================================================================== */

:root {
	--paper: #fbf8f1;
	--paper-2: #f5f0e5;
	--sand: #efe7d7;
	--sand-deep: #e5dbc7;
	--ink: #16211b;
	--ink-2: #3d4c44;
	--muted: #6d7b73;
	--forest: #0e2c22;
	--forest-2: #14382b;
	--green: #5b9e2e;
	--orange: #ee7a1f;
	--blue: #1b8fc4;
	--line: rgba(22, 33, 27, 0.13);
	--line-strong: rgba(22, 33, 27, 0.28);
	--light-line: rgba(246, 242, 232, 0.16);

	--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--font-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--content: 1180px;
	--gutter: clamp(20px, 4vw, 56px);
	--section-y: clamp(48px, 6.5vw, 92px);
	--radius: 2px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--forest);
}

::selection {
	background: var(--green);
	color: #fff;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--ink);
}

p {
	margin: 0 0 1em;
}

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

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

.wrap {
	max-width: var(--content);
	margin-inline: auto;
	padding-inline: var(--gutter);
	width: 100%;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 999;
	background: var(--forest);
	color: var(--paper);
	padding: 12px 18px;
	width: auto;
	height: auto;
	clip: auto;
	font-family: var(--font-mono);
	font-size: 12px;
}

:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Typography helpers used by the demo blocks
   -------------------------------------------------------------------------- */

.eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 18px;
}

.eyebrow::before {
	content: '';
	width: 28px;
	height: 1px;
	background: var(--orange);
	flex: 0 0 auto;
}

.section-title {
	font-size: clamp(28px, 3.4vw, 44px);
	letter-spacing: -0.02em;
	max-width: 26ch;
}

.section-lead {
	margin-top: 16px;
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 64ch;
}

.sub-title {
	font-size: 21px;
	margin: 28px 0 10px;
}

.body-text {
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--ink-2);
	max-width: 62ch;
	margin-bottom: 14px;
}

.check-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.check-list li {
	position: relative;
	padding-inline-start: 26px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink-2);
}

.check-list li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0.52em;
	width: 11px;
	height: 11px;
	border: 1px solid var(--green);
	border-radius: 50%;
	background: radial-gradient(circle, var(--green) 0 3px, transparent 3.5px);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 22px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn .icon,
.wp-block-button__link .icon {
	width: 15px;
	height: 15px;
}

.btn--primary,
.wp-block-button:not(.is-style-outline):not(.is-style-sand) .wp-block-button__link {
	background: var(--forest);
	color: #f7f3e9;
	border-color: var(--forest);
}

.btn--primary:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-sand) .wp-block-button__link:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
	transform: translateY(-1px);
}

.btn--outline,
.is-style-outline .wp-block-button__link {
	border-color: var(--line-strong);
	color: var(--ink);
	background: transparent;
}

.btn--outline:hover,
.is-style-outline .wp-block-button__link:hover {
	border-color: var(--ink);
	background: rgba(22, 33, 27, 0.04);
	transform: translateY(-1px);
}

.btn--sand,
.is-style-sand .wp-block-button__link {
	background: var(--sand);
	color: var(--ink);
	border-color: var(--sand);
}

.btn--sand:hover,
.is-style-sand .wp-block-button__link:hover {
	background: var(--sand-deep);
	border-color: var(--sand-deep);
	transform: translateY(-1px);
}

.btn--sm {
	padding: 11px 15px;
	font-size: 10.5px;
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.wp-block-button {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Utility bar
   -------------------------------------------------------------------------- */

.utility {
	background: var(--forest);
	color: #c3d0c7;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.utility__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	padding-block: 9px;
}

.utility__note {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.utility__links {
	display: flex;
	gap: 24px;
	align-items: center;
}

.utility__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #d7e1da;
	text-decoration: none;
}

.utility__links a:hover {
	color: #fff;
}

.utility__links .icon {
	width: 14px;
	height: 14px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(251, 248, 241, 0.985);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 40px);
	padding-block: 12px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--ink);
	flex: 0 0 auto;
}

.brand__img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 3px;
}

.brand__name {
	display: block;
	font-family: var(--font-serif);
	font-size: 23px;
	letter-spacing: 0.01em;
	line-height: 1;
}

.brand__tag {
	display: block;
	font-family: var(--font-mono);
	font-size: 8.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 4px;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 30px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__item a {
	position: relative;
	display: inline-block;
	font-size: 14.5px;
	line-height: 1.2;
	text-decoration: none;
	color: var(--ink);
	padding-block: 6px;
}

.nav__item a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ease);
}

.nav__item a:hover::after {
	transform: scaleX(1);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.lang {
	position: relative;
}

.lang__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	padding: 8px 10px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	cursor: pointer;
	list-style: none;
}

.lang__button::-webkit-details-marker,
.faq summary::-webkit-details-marker {
	display: none;
}

.lang__button .icon {
	width: 14px;
	height: 14px;
}

.lang__button .icon--chevron {
	width: 12px;
	height: 12px;
	opacity: 0.6;
	transition: transform 0.2s var(--ease);
}

.lang[open] .lang__button .icon--chevron {
	transform: rotate(180deg);
}

.lang__list {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 8px);
	min-width: 184px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 24px 48px rgba(14, 44, 34, 0.14);
	z-index: 70;
}

.lang__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 10px;
	font-size: 14px;
	text-decoration: none;
	color: var(--ink);
}

.lang__link span {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	color: var(--muted);
}

.lang__link:hover {
	background: var(--paper-2);
}

.lang__link.is-current {
	font-weight: 600;
}

.lang__link.is-current span {
	color: var(--green);
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	border-radius: var(--radius);
}

.nav-toggle .icon {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
	padding-block: clamp(34px, 5vw, 72px) clamp(36px, 5vw, 76px);
	position: relative;
}

.hero::after {
	content: '';
	position: absolute;
	inset-inline: var(--gutter);
	bottom: 0;
	height: 1px;
	background: var(--line);
}

.hero__grid {
	align-items: end;
	gap: clamp(24px, 4vw, 56px);
}

.hero__title {
	font-size: clamp(34px, 4.6vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.028em;
	max-width: 20ch;
}

.hero__title em {
	font-style: italic;
	color: var(--forest);
}

.hero__lead {
	margin-top: 20px;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 56ch;
}

.hero__actions {
	margin-top: 28px;
}

.hero__meta {
	margin-top: 28px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

.hero__image {
	margin: 0;
}

.hero__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--line-strong);
	background: var(--sand);
	padding: 8px;
}

.hero__caption {
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.5;
}

.hero--min {
	padding-block: clamp(36px, 4.6vw, 64px) clamp(30px, 4vw, 52px);
}

.hero--min .hero__title {
	font-size: clamp(30px, 4vw, 54px);
	max-width: 26ch;
}

.hero--min .hero__lead {
	max-width: 62ch;
}

.hero--min.hero--media .hero__image img {
	aspect-ratio: 16 / 10;
}

/* --------------------------------------------------------------------------
   Content sections
   -------------------------------------------------------------------------- */

.entry {
	width: 100%;
}

.entry > .wp-block-group {
	padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2));
}

/* Keep blocks aligned to the start of the content column: the constrained
   layout centres every child, which breaks the editorial left alignment. */
.site-main .is-layout-constrained > * {
	margin-inline: 0 !important;
}

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

.section--tight {
	padding-block: clamp(32px, 4vw, 56px);
}

.section--sand {
	background: var(--sand);
}

.section--forest {
	background: var(--forest);
	color: #e9e3d5;
}

.section__head {
	margin-bottom: clamp(26px, 3.4vw, 48px);
}

.section__head .section-title {
	margin-bottom: 0;
}

.section__actions {
	margin-top: 26px;
}

/* Stats ------------------------------------------------------------------ */

.stat-grid {
	gap: clamp(16px, 3vw, 40px);
}

.stat {
	border-top: 1px solid var(--line-strong);
	padding-top: 18px;
}

.stat__value {
	font-family: var(--font-serif);
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0;
	color: var(--ink);
}

.stat__label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 12px 0 0;
	max-width: 24ch;
}

.stat-note {
	margin-top: 24px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Cards ------------------------------------------------------------------ */

.card-grid {
	gap: clamp(18px, 2.4vw, 30px);
	align-items: stretch;
}

.card {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line-strong);
	padding-top: 16px;
}

.card__media {
	margin: 0 0 18px;
}

.card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--paper-2);
}

.card__kicker {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 8px;
}

.card__title {
	font-size: 23px;
	line-height: 1.14;
}

.card__body {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
}

.card__link {
	margin: 16px 0 0;
	margin-top: auto;
	padding-top: 16px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.card__link a {
	text-decoration: none;
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 3px;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.card__link a:hover {
	border-color: var(--ink);
}

/* Steps ------------------------------------------------------------------ */

.step-grid {
	gap: clamp(16px, 2.4vw, 32px);
}

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

.step__num {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--orange);
	margin: 0 0 10px;
}

.step__title {
	font-size: 20px;
	line-height: 1.2;
}

.step__body {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
}

/* Split ------------------------------------------------------------------ */

.split {
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.split__image {
	margin: 0;
}

.split__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--line);
}

.split__caption {
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Dark band -------------------------------------------------------------- */

.band {
	background: var(--forest);
	color: #e9e3d5;
	padding-block: clamp(44px, 6vw, 84px);
}

.band > .band__inner {
	max-width: 100% !important;
}

.band .eyebrow {
	color: #b9c9be;
}

.band .eyebrow::before {
	background: var(--green);
}

.band__title {
	color: #f7f3e9;
	font-size: clamp(28px, 3.4vw, 44px);
	max-width: 24ch;
}

.band__body {
	margin-top: 16px;
	color: #c2cec6;
	font-size: 16.5px;
	max-width: 64ch;
}

.band-grid {
	margin-top: clamp(28px, 4vw, 46px);
	gap: clamp(18px, 2.6vw, 36px);
}

.band-item {
	border-top: 1px solid var(--light-line);
	padding-top: 16px;
}

.band-item__title {
	font-size: 18px;
	color: #f7f3e9;
}

.band-item__body {
	margin-top: 8px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #b3c1b8;
}

.band__actions {
	margin-top: 32px;
}

/* Tables ----------------------------------------------------------------- */

.table-wrap {
	overflow-x: auto;
}

.spec-table {
	margin: 0;
}

.spec-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.spec-table th {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: start;
	padding: 0 16px 12px 0;
	border-bottom: 1px solid var(--line-strong);
	vertical-align: bottom;
}

.spec-table td {
	padding: 14px 16px 14px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	color: var(--ink-2);
}

.spec-table td:first-child {
	color: var(--ink);
	font-weight: 500;
}

/* FAQ -------------------------------------------------------------------- */

.faq {
	border-top: 1px solid var(--line-strong);
	padding: 0;
}

.faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	font-family: var(--font-serif);
	font-size: 19.5px;
	line-height: 1.3;
	border-bottom: 1px solid var(--line);
}

.faq summary::after {
	content: '+';
	font-family: var(--font-mono);
	font-size: 15px;
	color: var(--orange);
	flex: 0 0 auto;
}

.faq[open] summary::after {
	content: '\2013';
}

.faq__answer {
	padding: 14px 0 20px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	font-size: 15.5px;
	line-height: 1.62;
	max-width: 72ch;
}

/* CTA -------------------------------------------------------------------- */

.cta-band {
	background: var(--sand);
	padding-block: clamp(44px, 6vw, 80px);
}

.cta-band--forest {
	background: var(--forest);
	color: #e9e3d5;
}

.cta-band > .cta-band__inner {
	max-width: 100% !important;
}

.cta-band--forest .eyebrow {
	color: #b9c9be;
}

.cta-band--forest .eyebrow::before {
	background: var(--green);
}

.cta__title {
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1.06;
	max-width: 24ch;
}

.cta-band--forest .cta__title {
	color: #f7f3e9;
}

.cta__body {
	margin-top: 16px;
	max-width: 62ch;
	color: var(--ink-2);
	font-size: 16.5px;
}

.cta-band--forest .cta__body {
	color: #c2cec6;
}

.cta__actions {
	margin-top: 26px;
}

/* Gallery ---------------------------------------------------------------- */

.gallery {
	gap: 14px;
}

.gallery__item {
	margin: 0;
}

.gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--line);
}

/* Quote ------------------------------------------------------------------ */

.quote {
	border-top: 1px solid var(--line-strong);
	padding-top: 24px;
	max-width: 900px;
}

.quote__text {
	font-family: var(--font-serif);
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0;
}

.quote__cite {
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Inquiry form ----------------------------------------------------------- */

.section--form {
	padding-block: clamp(40px, 5vw, 72px);
}

.form-wrap {
	max-width: 860px;
}

.inquiry {
	background: #fff;
	border: 1px solid var(--line);
	padding: clamp(20px, 3vw, 40px);
}

.inquiry__title {
	font-size: 26px;
	margin-bottom: 22px;
}

.inquiry__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 28px;
}

.field {
	display: block;
}

.field--full {
	grid-column: 1 / -1;
}

.field__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 7px;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	font: inherit;
	font-size: 15.5px;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-strong);
	border-radius: 0;
	padding: 9px 0;
	transition: border-color 0.2s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: 0;
	border-bottom-color: var(--ink);
	box-shadow: 0 1px 0 var(--ink);
}

.field textarea {
	resize: vertical;
	min-height: 110px;
}

.inquiry__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 26px;
}

.inquiry__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.inquiry__notice {
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14.5px;
	border-inline-start: 2px solid var(--green);
	background: rgba(91, 158, 46, 0.08);
}

.inquiry__notice--error {
	border-color: #b23b2e;
	background: rgba(178, 59, 46, 0.07);
}

.inquiry__honeypot {
	position: absolute;
	inset-inline-start: -9999px;
}

/* --------------------------------------------------------------------------
   Catalogue
   -------------------------------------------------------------------------- */

.model-grid {
	display: grid;
	gap: clamp(16px, 2.2vw, 26px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

.model-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.model-card:hover {
	transform: translateY(-3px);
	border-color: var(--line-strong);
	box-shadow: 0 18px 36px rgba(14, 44, 34, 0.09);
}

.model-card__media {
	display: block;
	background: var(--paper-2);
	border-bottom: 1px solid var(--line);
	padding: 16px;
}

.model-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.model-card__body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.model-card__family {
	margin: 0 0 8px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.model-card__title {
	font-size: 19px;
	line-height: 1.22;
}

.model-card__title a {
	text-decoration: none;
}

.model-card__spec {
	margin: 10px 0 0;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.05em;
	color: var(--ink-2);
}

.model-card__excerpt {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--muted);
}

.model-card__link {
	margin-top: auto;
	padding-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}

.model-card__link .icon {
	width: 13px;
	height: 13px;
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 30px;
}

.chip {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 9px 14px;
	border: 1px solid var(--line-strong);
	text-decoration: none;
	color: var(--ink);
	border-radius: 999px;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.chip:hover {
	background: rgba(22, 33, 27, 0.05);
}

.chip.is-active {
	background: var(--forest);
	border-color: var(--forest);
	color: #f7f3e9;
}

/* Model detail ----------------------------------------------------------- */

.model {
	padding-top: clamp(20px, 3vw, 36px);
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: clamp(20px, 3vw, 32px);
}

.breadcrumb a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.breadcrumb a:hover {
	border-color: currentColor;
}

.model__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.model__media {
	margin: 0;
	background: var(--paper-2);
	border: 1px solid var(--line);
	padding: clamp(14px, 2.4vw, 30px);
}

.model__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.model__title {
	font-size: clamp(27px, 3.2vw, 42px);
	line-height: 1.06;
}

.model__code {
	margin: 12px 0 0;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.model__excerpt {
	margin-top: 16px;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--ink-2);
}

.model__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 28px;
}

.model__specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.model__specs caption {
	text-align: start;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 10px;
}

.model__specs th {
	width: 42%;
	text-align: start;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 11px 12px 11px 0;
	border-top: 1px solid var(--line);
	vertical-align: top;
}

.model__specs td {
	padding: 11px 0;
	border-top: 1px solid var(--line);
	color: var(--ink);
	vertical-align: top;
}

.model__body {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(24px, 4vw, 56px);
	padding-block: clamp(32px, 4.5vw, 60px);
	margin-top: clamp(30px, 4vw, 54px);
	border-top: 1px solid var(--line-strong);
}

.model__content .wp-block-group {
	padding: 0;
}

.model__content .body-text {
	font-size: 17px;
}

.model__features {
	background: var(--sand);
	padding: clamp(20px, 3vw, 32px);
	align-self: start;
}

.model__features .check-list {
	margin-top: 8px;
}

.model__oem {
	margin-top: 20px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   Page headers, lists, notes
   -------------------------------------------------------------------------- */

.entry-header {
	padding-block: clamp(32px, 4vw, 56px);
	border-bottom: 1px solid var(--line);
}

.entry-title {
	font-size: clamp(30px, 4vw, 50px);
}

.list-header {
	padding-block: clamp(36px, 5vw, 72px) clamp(18px, 2.6vw, 28px);
	border-bottom: 1px solid var(--line);
}

.list-title {
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.04;
	max-width: 26ch;
}

.list-lead {
	margin-top: 14px;
	max-width: 64ch;
	color: var(--ink-2);
	font-size: 17px;
}

.note-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 32px);
	padding-block: clamp(28px, 4vw, 48px);
}

.note-card {
	border-top: 1px solid var(--line-strong);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
}

.note-card__meta {
	margin: 0 0 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.note-card__title {
	font-size: 22px;
	line-height: 1.2;
}

.note-card__title a {
	text-decoration: none;
	background-image: linear-gradient(var(--ink), var(--ink));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s var(--ease);
}

.note-card__title a:hover {
	background-size: 100% 1px;
}

.note-card__excerpt {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
}

.note-card__link {
	margin-top: auto;
	padding-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.article-header {
	padding-block: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 32px);
}

.article-title {
	font-size: clamp(30px, 4.2vw, 54px);
	line-height: 1.05;
	max-width: 24ch;
}

.article-meta {
	margin-top: 16px;
	display: flex;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.article-body {
	max-width: 780px;
	padding-bottom: clamp(40px, 5vw, 72px);
}

.article-body p {
	font-size: 18px;
	line-height: 1.7;
	color: var(--ink-2);
	margin-bottom: 1.15em;
}

.article-body .sub-title {
	font-size: 24px;
	color: var(--ink);
}

.article-back {
	margin-top: 40px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.article-back a {
	text-decoration: none;
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 3px;
}

.search-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--line);
}

.search-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}

.search-list a {
	font-family: var(--font-serif);
	font-size: 20px;
	text-decoration: none;
}

.search-list span {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.empty-state {
	padding-block: 48px;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pagination {
	padding-block: clamp(24px, 3vw, 44px);
}

.pagination .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: 11px;
}

.pagination a,
.pagination span {
	padding: 8px 12px;
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--ink);
}

.pagination .current {
	background: var(--forest);
	border-color: var(--forest);
	color: #f7f3e9;
}

.notfound {
	padding-block: clamp(60px, 9vw, 120px);
}

.notfound__title {
	font-size: clamp(30px, 4.4vw, 54px);
	max-width: 24ch;
}

.notfound__text {
	margin-top: 16px;
	color: var(--ink-2);
	max-width: 52ch;
}

.notfound__actions {
	margin-top: 28px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--forest);
	color: #c9d3cb;
	padding-block: clamp(44px, 5vw, 76px) 24px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
	gap: clamp(24px, 3.4vw, 48px);
}

.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: #f7f3e9;
	font-family: var(--font-serif);
	font-size: 24px;
	letter-spacing: 0.01em;
}

.footer-brand img {
	width: 54px;
	height: 54px;
	object-fit: contain;
	background: #fff;
	padding: 4px;
	border-radius: var(--radius);
}

.site-footer__note {
	margin-top: 18px;
	color: #aebbaf;
	font-size: 14.5px;
	line-height: 1.62;
	max-width: 36ch;
}

.site-footer__legal {
	margin-top: 16px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	line-height: 1.8;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #85998b;
}

.site-footer__title {
	margin: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8ba193;
}

.site-footer__title--sub {
	margin-top: 26px;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
	font-size: 14.5px;
}

.site-footer a {
	color: #c9d3cb;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.site-footer a:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.site-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: #b6c4b9;
}

.site-footer__contact .icon {
	width: 15px;
	height: 15px;
	margin-top: 3px;
	flex: 0 0 auto;
}

.site-footer__langs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.site-footer__langs a[aria-current] {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: clamp(32px, 4vw, 52px);
	padding-top: 18px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8ba193;
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__marks {
	display: flex;
	gap: 18px;
}

/* --------------------------------------------------------------------------
   WordPress block alignment details
   -------------------------------------------------------------------------- */

.wp-block-columns {
	gap: clamp(18px, 2.4vw, 32px);
	margin-bottom: 0;
}

.wp-block-column {
	min-width: 0;
}

.wp-block-image {
	margin: 0;
}

.wp-block-image img {
	display: block;
}

.wp-block-group {
	margin: 0;
}

.wp-block-heading {
	margin: 0;
}

.hero .wp-block-buttons,
.band .wp-block-buttons,
.cta-band .wp-block-buttons,
.section .wp-block-buttons {
	margin-top: 0;
}

.model__content .wp-block-group,
.entry .prose .wp-block-group {
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Language-specific typography
   -------------------------------------------------------------------------- */

html[lang="ar"] body {
	font-family: 'Cairo', var(--font-sans);
	line-height: 1.8;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .hero__title,
html[lang="ar"] .section-title,
html[lang="ar"] .stat__value,
html[lang="ar"] .quote__text,
html[lang="ar"] .article-title,
html[lang="ar"] .model__title,
html[lang="ar"] .card__title,
html[lang="ar"] .footer-brand {
	font-family: 'Cairo', var(--font-sans);
	letter-spacing: 0;
	line-height: 1.35;
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .stat__label,
html[lang="ar"] .site-footer__title,
html[lang="ar"] .model-card__family,
html[lang="ar"] .btn,
html[lang="ar"] .wp-block-button__link,
html[lang="ar"] .field__label,
html[lang="ar"] .model__code,
html[lang="ar"] .utility,
html[lang="ar"] .chip {
	letter-spacing: 0;
	text-transform: none;
	font-family: 'Cairo', var(--font-sans);
}

[dir="rtl"] .icon--arrow,
[dir="rtl"] .icon--arrow-r {
	transform: scaleX(-1);
}

[dir="rtl"] .nav__item a::after {
	transform-origin: right;
}

[dir="rtl"] .check-list li::before {
	inset-inline-start: 0;
}

[dir="rtl"] .quote {
	border-inline-start: 0;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes pittar-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hero__title,
.hero__lead,
.hero__actions,
.hero__meta {
	animation: pittar-rise 0.6s var(--ease) both;
}

.hero__lead {
	animation-delay: 0.06s;
}

.hero__actions {
	animation-delay: 0.12s;
}

.hero__meta {
	animation-delay: 0.18s;
}

.hero__image {
	animation: pittar-rise 0.7s var(--ease) both;
	animation-delay: 0.1s;
}

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

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.brand__tag {
		display: none;
	}
}

@media (max-width: 1080px) {
	.model-grid,
	.note-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.site-footer__grid > .site-footer__col:last-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 40px;
	}
}

@media (max-width: 980px) {
	.site-header {
		position: sticky;
	}

	.nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 28px 44px rgba(14, 44, 34, 0.12);
		padding: 6px var(--gutter) 20px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}

	.site-header.is-open .nav {
		display: block;
	}

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

	.nav__item {
		border-bottom: 1px solid var(--line);
	}

	.nav__item a {
		display: block;
		width: 100%;
		padding: 15px 0;
		font-size: 16.5px;
	}

	.nav__item a::after {
		display: none;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.header-quote {
		display: none;
	}

	.model__grid,
	.model__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.model__features {
		order: 2;
	}

	.hero::after {
		inset-inline: var(--gutter);
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__grid > .site-footer__col:last-child {
		display: block;
		grid-column: auto;
	}
}

@media (max-width: 720px) {
	body {
		font-size: 16px;
	}

	.utility__note {
		display: none;
	}

	.utility__inner {
		justify-content: center;
	}

	.utility__links {
		gap: 16px;
	}

	.model-grid,
	.note-grid {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero__actions .wp-block-button,
	.hero__actions .wp-block-button__link,
	.cta__actions .wp-block-button,
	.cta__actions .wp-block-button__link,
	.notfound__actions .btn,
	.model__actions .btn {
		width: 100%;
		justify-content: center;
	}

	.hero__title {
		font-size: clamp(30px, 8.4vw, 44px);
	}

	.section-title {
		font-size: clamp(25px, 6.6vw, 34px);
	}

	.stat__label {
		max-width: none;
	}

	.faq summary {
		font-size: 17.5px;
	}

	.spec-table table {
		min-width: 560px;
	}
}

@media print {
	.utility,
	.site-header,
	.site-footer,
	.cta-band,
	.band {
		display: none;
	}

	body {
		background: #fff;
	}
}