/*
 * Saramad — main stylesheet (design v2, docs/DECISIONS.md).
 * Palette A. Logical properties everywhere so the same rules work for RTL Persian.
 */

:root {
	--sm-green: #1e4d3a;
	--sm-green-deep: #163a2c;
	--sm-gold: #c9a96e;
	--sm-gold-text: #8a6a2e;
	--sm-gold-light: #d9bc8e;
	--sm-ink: #2c2c2c;
	--sm-muted: #5a5a55;
	--sm-mist: #f5f4f0;
	--sm-paper: #fafaf8;
	--sm-line: #e3e0d6;
	--sm-on-green: #bcd0c3;
	--sm-gutter: clamp(1.25rem, 4vw, 3rem);
	--sm-font: "Instrument Sans", system-ui, Tahoma, sans-serif;
	--sm-track: -0.03em;
	--sm-display-lh: 1.04;
}

html[lang^="fa"] {
	--sm-font: Sahel, Tahoma, sans-serif;
	--sm-track: 0;
	--sm-display-lh: 1.35;
}

html[lang^="zh"] {
	--sm-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", sans-serif;
	--sm-track: 0;
	--sm-display-lh: 1.25;
}

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

body {
	margin: 0;
	background: var(--sm-paper);
	color: var(--sm-ink);
	font: 400 1rem/1.6 var(--sm-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html[lang^="fa"] body { line-height: 1.9; }
html[lang^="zh"] body { line-height: 1.8; }

img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
html[lang^="zh"] :is(h1, h2, h3) { word-break: keep-all; }
a { color: inherit; text-underline-offset: 0.2em; }
[lang^="fa"] { font-family: Sahel, Tahoma, sans-serif; }
/* On EN and ZH pages the few Persian words (language names) use a system font,
   so those pages do not download Sahel (38 KB) for one word. */
html:not([lang^="fa"]) [lang^="fa"] { font-family: Tahoma, "Segoe UI", system-ui, sans-serif; }
[lang="en"] { font-family: "Instrument Sans", system-ui, sans-serif; }
[lang^="zh"] { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }

:focus-visible {
	outline: 3px solid var(--sm-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

.sm-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sm-skip {
	position: absolute;
	inset-inline-start: 1rem;
	top: -4rem;
	z-index: 100;
	background: var(--sm-green);
	color: #fff;
	padding: 0.7rem 1rem;
	border-radius: 10px;
}
.sm-skip:focus { top: 1rem; }

.sm-wrap {
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--sm-gutter);
}

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

.sm-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.8rem 1.3rem;
	border: 0;
	border-radius: 10px;
	background: var(--sm-green);
	color: #fff;
	font: 600 0.95rem/1.1 var(--sm-font);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.sm-btn:hover,
.wp-block-button__link:hover { background: var(--sm-green-deep); color: #fff; }

.sm-btn--gold { background: var(--sm-gold); color: var(--sm-green-deep); }
.sm-btn--gold:hover { background: var(--sm-gold-light); color: var(--sm-green-deep); }

.sm-btn--line,
.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--sm-green);
	box-shadow: inset 0 0 0 1.5px var(--sm-green);
}
.sm-btn--line:hover,
.is-style-outline > .wp-block-button__link:hover { background: rgba(30, 77, 58, 0.07); color: var(--sm-green); }

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

.sm-header { position: relative; z-index: 10; background: var(--sm-paper); }
.sm-header--over {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: linear-gradient(rgba(250, 250, 248, 0.9) 35%, rgba(250, 250, 248, 0));
}

.sm-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: 6.5rem;
}

.sm-header__brand { display: block; line-height: 0; }
.sm-logo { height: 76px; width: auto; }

.sm-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin-inline-start: auto;
}

.sm-nav__menu ul {
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-nav__menu a {
	color: var(--sm-green);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
}
.sm-nav__menu a:hover { border-bottom-color: var(--sm-gold); }
.sm-nav__menu .current-menu-item > a,
.sm-nav__menu .current-page-ancestor > a { border-bottom-color: var(--sm-green); }

.sm-langs {
	display: flex;
	gap: 0.2rem;
	margin: 0;
	padding: 0.2rem;
	list-style: none;
	border: 1px solid rgba(30, 77, 58, 0.25);
	border-radius: 999px;
	background: rgba(250, 250, 248, 0.75);
}
.sm-langs a {
	display: block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	color: var(--sm-green);
	font-size: 0.9rem;
	line-height: 1.3;
	text-decoration: none;
}
.sm-langs a:hover { background: rgba(30, 77, 58, 0.08); }
.sm-langs a[aria-current] { background: var(--sm-green); color: #fff; }

.sm-header__cta { min-height: 2.5rem; padding: 0.65rem 1.05rem; font-size: 0.9rem; }
.sm-nav__cta { display: none; }

.sm-nav__toggle {
	display: none;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(30, 77, 58, 0.25);
	border-radius: 10px;
	background: rgba(250, 250, 248, 0.85);
	cursor: pointer;
}
.sm-nav__bars,
.sm-nav__bars::before,
.sm-nav__bars::after {
	position: absolute;
	inset-inline-start: 50%;
	width: 18px;
	height: 2px;
	margin-inline-start: -9px;
	background: var(--sm-green);
	transition: transform 0.2s ease;
}
.sm-nav__bars { top: 50%; }
.sm-nav__bars::before, .sm-nav__bars::after { content: ""; inset-inline-start: 0; margin: 0; }
.sm-nav__bars::before { top: -6px; }
.sm-nav__bars::after { top: 6px; }
.sm-nav__toggle[aria-expanded="true"] .sm-nav__bars { background: transparent; }
.sm-nav__toggle[aria-expanded="true"] .sm-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.sm-nav__toggle[aria-expanded="true"] .sm-nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Shared section parts ---------- */

.sm-sec { padding-block: clamp(4.5rem, 9vw, 7.5rem); }

.sm-sec h2 {
	margin: 0;
	color: var(--sm-green);
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: var(--sm-track);
}
html[lang^="fa"] .sm-sec h2 { font-weight: 700; line-height: 1.45; }
html[lang^="zh"] .sm-sec h2 { line-height: 1.35; }

.sm-sec__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.25rem 4rem;
	align-items: end;
	margin-bottom: 3rem;
}
.sm-sec__head p { margin: 0; max-width: 34rem; color: var(--sm-muted); }

/* ---------- Front: hero ---------- */

.sm-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(100svh, 880px);
	overflow: hidden;
	background: #dfe6ea;
}
.sm-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}
.sm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Soft oval behind the text only, so the orchard still shows at the screen edge and above/below the text. */
	background: radial-gradient(ellipse 48% 62% at 28% 52%, rgba(250, 250, 248, 0.88) 0, rgba(250, 250, 248, 0.75) 55%, rgba(250, 250, 248, 0) 100%);
}
/* Orchard video (desktop only, plays once): fades in over the photo, stops on its last frame. */
.sm-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0; transition: opacity 1.2s ease; }
.sm-hero.is-video .sm-hero__video { opacity: 1; }
/* The video has leaves behind the text (the photo has sky), so the fade is stronger while it shows. */
.sm-hero.is-video::before { background: radial-gradient(ellipse 50% 64% at 28% 52%, rgba(250, 250, 248, 0.93) 0, rgba(250, 250, 248, 0.82) 55%, rgba(250, 250, 248, 0) 100%); }
/* Persian: text sits on the right, so mirror the photo and the fade. */
[dir="rtl"] .sm-hero::before,
[dir="rtl"] .sm-hero__video,
[dir="rtl"] .sm-hero__img { transform: scaleX(-1); }
.sm-hero__body { position: relative; z-index: 2; width: 100%; padding-block: 9rem; }
.sm-hero h1 {
	max-width: 13ch;
	margin: 0;
	color: var(--sm-green);
	font-size: clamp(2.4rem, 4.4vw, 3.6rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.035em;
}
html[lang^="fa"] .sm-hero h1 { max-width: 19ch; font-size: clamp(2.1rem, 3.8vw, 3.1rem); font-weight: 800; line-height: 1.4; letter-spacing: 0; }
html[lang^="zh"] .sm-hero h1 { max-width: 10em; font-size: clamp(2.1rem, 4vw, 3.3rem); font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; }
.sm-hero__lead { max-width: 34rem; margin: 1.5rem 0 2rem; font-size: 1.1rem; line-height: 1.55; }
html[lang^="fa"] .sm-hero__lead, html[lang^="zh"] .sm-hero__lead { line-height: 1.9; }
.sm-hero__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (prefers-reduced-motion: no-preference) {
	.sm-hero__img { animation: sm-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	[dir="rtl"] .sm-hero__img { animation-name: sm-settle-rtl; }
	@keyframes sm-settle { from { transform: scale(1.04); } to { transform: none; } }
	@keyframes sm-settle-rtl { from { transform: scaleX(-1) scale(1.04); } to { transform: scaleX(-1); } }
}

/* ---------- Front: quick quote ---------- */

.sm-quick { position: relative; z-index: 3; margin-top: -4.5rem; }
.sm-quick form {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr auto;
	gap: 1px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--sm-line);
	box-shadow: 0 18px 40px -18px rgba(22, 58, 44, 0.35);
}
.sm-quick label {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 1.25rem;
	background: #fff;
	color: var(--sm-muted);
	font-size: 0.82rem;
}
.sm-quick select {
	padding: 0;
	padding-inline-end: 1.25rem;
	border: 0;
	appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e4d3a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right center;
	color: var(--sm-ink);
	font: 500 1rem/1.4 var(--sm-font);
	cursor: pointer;
}
[dir="rtl"] .sm-quick select { background-position: left center; }
.sm-quick .sm-btn { border-radius: 0; padding-inline: 1.75rem; font-size: 1rem; }
.sm-quick__note { margin: 0.9rem 0 0; color: var(--sm-muted); font-size: 0.9rem; }

/* ---------- Front: varieties ---------- */

.sm-vars { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--sm-green); }
.sm-var {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
	gap: 1rem 2.5rem;
	align-items: center;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--sm-line);
}
.sm-var h3 {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
html[lang^="fa"] .sm-var h3, html[lang^="zh"] .sm-var h3 { letter-spacing: 0; line-height: 1.4; }
.sm-var__alt { display: block; margin-top: 0.35rem; color: var(--sm-gold-text); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.sm-var p { margin: 0; }
.sm-var__use { color: var(--sm-muted); font-size: 0.98rem; }
.sm-var__img { display: grid; place-items: center; width: 7.5rem; height: 7.5rem; object-fit: contain; mix-blend-mode: multiply; }
.sm-var__img--empty { border-radius: 12px; background: var(--sm-mist); mix-blend-mode: normal; }
.sm-shape { color: var(--sm-green); font-size: 0.92rem; white-space: nowrap; }
.sm-var__img--empty i { display: block; border: 1.5px solid var(--sm-gold-text); border-radius: 50%; background: var(--sm-gold-light); }
.sm-shape--long i { width: 16px; height: 26px; }
.sm-shape--mid i { width: 18px; height: 24px; }
.sm-shape--round i { width: 22px; height: 23px; }
.sm-shape--small i { width: 16px; height: 17px; }
.sm-vars__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: 1.75rem;
	color: var(--sm-muted);
	font-size: 0.95rem;
}
.sm-vars__foot a { color: var(--sm-green); font-weight: 600; }

/* ---------- Front: process ---------- */

.sm-process { background: var(--sm-green); color: #e9efe9; }
.sm-process h2 { color: #fff; }
.sm-process .sm-sec__head p { color: var(--sm-on-green); }
.sm-steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sm-step;
}
.sm-step {
	position: relative;
	padding-block: 3.25rem 0;
	padding-inline: 0 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	counter-increment: sm-step;
}
.sm-step::before {
	content: counter(sm-step);
	position: absolute;
	top: -1.05rem;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--sm-gold);
	color: var(--sm-green-deep);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
}
html[lang^="fa"] .sm-step::before { content: counter(sm-step, persian); }
.sm-step h3 { margin: 0 0 0.5rem; color: #fff; font-size: 1.15rem; font-weight: 600; }
.sm-step p { margin: 0; color: var(--sm-on-green); font-size: 0.95rem; line-height: 1.55; }
html[lang^="fa"] .sm-step p, html[lang^="zh"] .sm-step p { line-height: 1.85; }

/* ---------- Front: request help ---------- */

.sm-ask { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem 5rem; }
.sm-ask__lead { max-width: 34rem; margin: 1rem 0 0; color: var(--sm-muted); }
.sm-checklist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
	margin: 2rem 0 2.25rem;
	padding: 0;
	list-style: none;
}
.sm-checklist li {
	position: relative;
	padding-block: 0.85rem;
	padding-inline-start: 2rem;
	border-bottom: 1px solid var(--sm-line);
}
.sm-checklist li::before {
	content: "";
	position: absolute;
	top: 1.2rem;
	inset-inline-start: 0;
	width: 1rem;
	height: 0.55rem;
	border-bottom: 2px solid var(--sm-gold-text);
	border-left: 2px solid var(--sm-gold-text);
	transform: rotate(-45deg);
}
html[lang^="fa"] .sm-checklist li::before, html[lang^="zh"] .sm-checklist li::before { top: 1.45rem; }
.sm-checklist small { display: block; color: var(--sm-muted); font-size: 0.88rem; }

.sm-talk { align-self: start; padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: 20px; background: var(--sm-mist); }
.sm-talk h3 { margin: 0 0 1.5rem; color: var(--sm-muted); font-size: 1.1rem; font-weight: 600; }
.sm-talk__langs { margin: 0 0 1.75rem; padding: 0; list-style: none; }
.sm-talk__langs li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--sm-line);
}
.sm-talk__langs li:last-child { border: 0; }
.sm-talk__langs b { color: var(--sm-green); font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.3; }
.sm-talk__langs span { color: var(--sm-muted); font-size: 0.92rem; text-align: end; }

/* ---------- Inner pages ---------- */

.sm-main:not(.sm-main--front) { padding-block-end: 5rem; }
.sm-main:has(> .sm-quality, > .sm-products) { padding-block-end: 0; }

.sm-page-head { margin-bottom: 2.5rem; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--sm-line); }
.sm-page-head h1 {
	max-width: 20ch;
	margin: 0;
	color: var(--sm-green);
	font-size: clamp(2.2rem, 4.2vw, 3.2rem);
	font-weight: 600;
	line-height: var(--sm-display-lh);
	letter-spacing: var(--sm-track);
}
html[lang^="fa"] .sm-page-head h1 { font-weight: 800; }
.sm-page-head__lead { max-width: 40rem; margin: 1.25rem 0 0; color: var(--sm-muted); font-size: 1.1rem; }

.sm-content { max-width: 76rem; margin-inline: auto; padding-inline: var(--sm-gutter); }
.sm-content > * { max-width: 46rem; margin-block: 0 1.25rem; }
.sm-content > .alignwide { max-width: none; }
.sm-content > .alignfull { max-width: none; margin-inline: calc(-1 * var(--sm-gutter)); }
.sm-content h2 { margin-block-start: 3rem; color: var(--sm-green); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.2; letter-spacing: var(--sm-track); }
html[lang^="fa"] .sm-content h2, html[lang^="zh"] .sm-content h2 { line-height: 1.5; }
.sm-content p, .sm-content li { max-width: 68ch; }

/* Legal page (privacy): small type, two columns on wide screens so it fits one screen. */
.sm-page-head--compact { margin-bottom: 1.75rem; padding-block: 2rem 1.25rem; }
.sm-page-head--compact h1 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.sm-page-head--compact .sm-page-head__lead { font-size: 0.95rem; }
.sm-content--legal { font-size: 0.875rem; line-height: 1.65; }
.sm-content--legal > * { max-width: none; }
.sm-content--legal h2 { margin-block: 1.25rem 0.35rem; font-size: 1.05rem; break-after: avoid; }
.sm-content--legal h2:first-child { margin-block-start: 0; }
.sm-content--legal p { margin-block-end: 0.75rem; break-inside: avoid; }
@media (min-width: 861px) {
	.sm-content--legal { columns: 2; column-gap: 3.5rem; }
}

.sm-draft {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: #fff3cd;
	color: #6b4e00;
	font-size: 0.8rem;
	font-weight: 600;
}

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

.sm-footer {
	padding-block: 3.5rem 2rem;
	background: var(--sm-green-deep);
	color: var(--sm-on-green);
	font-size: 0.95rem;
}
.sm-footer a { color: #e9efe9; text-decoration: none; }
.sm-footer a:hover { text-decoration: underline; }
.sm-footer__grid { display: grid; grid-template-columns: 1.1fr 1.7fr 0.7fr 0.7fr; gap: 2.5rem; }
.sm-footer__co strong { display: block; margin-bottom: 0.4rem; color: #fff; font-size: 1.15rem; font-weight: 600; }
.sm-footer__co p { margin: 0; }
.sm-footer__menu ul,
.sm-footer__langs { display: grid; align-content: start; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sm-footer__langs a[aria-current] { color: var(--sm-gold-light); }
.sm-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.85rem;
}
.sm-footer__legal > span { margin-inline-end: auto; }

/* ---------- Contact details (footer, Contact, About) ---------- */

.sm-contact { display: grid; gap: 0.9rem; margin: 0; }
.sm-contact div { display: grid; gap: 0.1rem; }
.sm-contact dt { color: var(--sm-gold-text); font-size: 0.85rem; font-weight: 600; }
.sm-contact dd { margin: 0; }
.sm-contact a { color: inherit; text-decoration-color: var(--sm-gold); text-underline-offset: 0.2em; }
.sm-footer__contact { font-size: 0.92rem; }
.sm-footer__contact dt { color: var(--sm-gold-light); }
.sm-footer__contact a { text-decoration: none; }

.sm-contact-band { padding-block: 3rem 5rem; }
.sm-contact-band h2 { margin: 0 0 1.25rem; color: var(--sm-green); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.3; }

/* ---------- About ---------- */

.sm-page-head + .sm-about { margin-top: -2.5rem; }
.sm-page-head--photo + .sm-about { margin-top: 0; }
.sm-about figcaption { margin-top: 0.6rem; color: var(--sm-muted); font-size: 0.88rem; }
.sm-about__split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }

/* Same rhythm as Quality: green intro with one photo, figures band (.sm-qfigs), then a row of photo cards. */
.sm-sec.sm-about__intro { background: var(--sm-green); color: var(--sm-on-green); padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }
.sm-about__intro h2 { color: #fff; }
.sm-about__intro .sm-quality__text p { max-width: 34rem; }
.sm-about__intro .sm-quality__text p + p { margin-top: 1rem; }
.sm-about__lead { margin: 0; }
.sm-about__lead img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.sm-about__intro figcaption { color: var(--sm-on-green); }

.sm-sec.sm-about__inside { background: var(--sm-mist); padding-block: clamp(3rem, 6vw, 5rem); }
.sm-acards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.sm-acard { display: flex; flex-direction: column; margin: 0; border-radius: 4px; background: #fff; box-shadow: 0 1.25rem 2.5rem -1.75rem rgba(22, 58, 44, 0.45); }
.sm-acard img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px 4px 0 0; }
.sm-about .sm-acard figcaption { flex: 1; margin: 0; padding: 1rem 1.4rem 1.15rem; border-top: 3px solid var(--sm-gold); color: var(--sm-green); font-size: 1.05rem; font-weight: 600; }
html[lang^="fa"] .sm-about .sm-acard figcaption { font-weight: 700; }

.sm-about__markets { background: var(--sm-green); color: var(--sm-on-green); }
.sm-about h2 { margin-block: 0 1.5rem; }
.sm-about__markets h2 { color: #fff; }
.sm-about__markets p { margin: 0 0 1.5rem; }
.sm-about__countries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.sm-about__countries li { padding-block: 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 1.05rem; }
.sm-about__countries li:nth-child(odd) { padding-inline-end: 1rem; }
.sm-about__trucks { margin: 0; }
.sm-about__trucks img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }

.sm-contact--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; padding-block: 1.5rem; border-block: 1px solid var(--sm-line); }
.sm-contact--wide div:nth-child(2) { grid-column: span 2; }
.sm-about__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 0; color: var(--sm-muted); }

@media (max-width: 1100px) {
	.sm-footer__grid { grid-template-columns: 1fr 1.4fr; }
}

@media (max-width: 860px) {
	.sm-about__split { grid-template-columns: 1fr; }
	.sm-acards { grid-template-columns: minmax(0, 1fr); }
	.sm-contact--wide { grid-template-columns: 1fr; }
	.sm-contact--wide div:nth-child(2) { grid-column: auto; }
}

/* ---------- Quality ---------- */

.sm-page-head + .sm-quality { margin-top: -2.5rem; }
/* Quality: full-width, low photo head (AI, decorative: alt=""), no tint; the title sits on the photo's empty light side.
   The green intro band starts right under it. */
.sm-page-head--photo { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(13rem, 16vw, 17rem); margin-bottom: 0; padding-block: 2rem; border-bottom: 0; background: var(--sm-mist); }
.sm-page-head--photo picture { position: absolute; inset: 0; }
.sm-page-head__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
[dir="rtl"] .sm-page-head__img { transform: scaleX(-1); }
/* Real photos (About: the factory) are busy and must not be mirrored: a light fade on the title side instead. */
.sm-page-head--fade picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--sm-mist) 0, rgba(245, 244, 240, 0.92) 28%, rgba(245, 244, 240, 0) 52%); }
[dir="rtl"] .sm-page-head--fade picture::after { background: linear-gradient(to left, var(--sm-mist) 0, rgba(245, 244, 240, 0.92) 28%, rgba(245, 244, 240, 0) 52%); }
.sm-page-head__text { position: relative; width: 100%; }
.sm-page-head__text h1, .sm-page-head__text .sm-page-head__lead { max-width: min(28rem, 29%); }
.sm-page-head--photo .sm-page-head__lead { color: var(--sm-ink); }
.sm-page-head--photo + .sm-quality { margin-top: 0; }
.sm-page-head--photo + .sm-content { padding-top: clamp(2rem, 4vw, 3rem); }
.sm-quality__intro { background: var(--sm-green); color: var(--sm-on-green); padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }
.sm-quality__intro h2 { color: #fff; }
.sm-quality__intro .sm-film figcaption { color: var(--sm-on-green); }
.sm-quality__intro .sm-film__frame { background: var(--sm-green-deep); }
.sm-quality__split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sm-quality__text h2 { margin-bottom: 1.25rem; }
.sm-quality__text p { max-width: 30rem; margin: 0; font-size: 1.08rem; }
.sm-film { margin: 0; }
.sm-film__frame { position: relative; overflow: hidden; border-radius: 4px; background: var(--sm-mist); }
.sm-film__img, .sm-film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sm-film__video { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.sm-film.is-video .sm-film__video { opacity: 1; }
.sm-film figcaption { margin-top: 0.6rem; color: var(--sm-muted); font-size: 0.88rem; }

/* Capacity band: its own light strip between the green intro and the steps. */
.sm-quality__figs { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); border-bottom: 1px solid var(--sm-line); background: var(--sm-paper); }
.sm-qfigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 0; }
.sm-qfigs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-inline-start: 1rem; border-inline-start: 3px solid var(--sm-gold); }
.sm-qfigs dt { margin-top: 0.2rem; color: var(--sm-ink); font-weight: 500; }
.sm-qfigs dd { margin: 0; color: var(--sm-muted); font-size: 0.92rem; }
.sm-qfigs strong { display: inline; color: var(--sm-green); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 600; line-height: 1.1; letter-spacing: var(--sm-track); }
.sm-qfigs--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.sm-qfigs--5 dd span { white-space: nowrap; }

/* Steps in three chapters on one gold rail; each chapter is a row of step cards (photo, number, text). */
.sm-quality__steps { background: var(--sm-mist); padding-block: clamp(3.5rem, 7vw, 6rem); counter-reset: sm-qstep; }
.sm-qchap { position: relative; padding-inline-start: 4rem; }
.sm-qchap::before { content: ""; position: absolute; inset-block: 1.2rem 0; inset-inline-start: calc(1rem - 1.5px); width: 3px; background: var(--sm-gold); }
.sm-qchap + .sm-qchap { --sm-qgap: clamp(2.5rem, 5vw, 4rem); padding-top: var(--sm-qgap); }
.sm-qchap + .sm-qchap::before { inset-block-start: 0; }
.sm-qchap:last-child::before { inset-block-end: auto; height: calc(var(--sm-qgap) + 0.6rem); }
.sm-qchap__head { margin-bottom: 1.5rem; }
.sm-qchap__head::before { content: ""; position: absolute; z-index: 1; inset-inline-start: 0.25rem; margin-top: 0.55rem; width: 1.5rem; height: 1.5rem; box-sizing: border-box; border: 4px solid var(--sm-gold); border-radius: 50%; background: var(--sm-mist); }
.sm-qchap__head h2 { margin: 0 0 0.4rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.sm-qchap__head p { max-width: 38rem; margin: 0; color: var(--sm-muted); font-size: 1.08rem; }
.sm-qsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.sm-qstep { position: relative; display: flex; flex-direction: column; border-radius: 4px; background: #fff; box-shadow: 0 1.25rem 2.5rem -1.75rem rgba(22, 58, 44, 0.45); counter-increment: sm-qstep; }
.sm-qstep__img { margin: 0; }
.sm-qstep__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px 4px 0 0; }
.sm-qstep__text { position: relative; flex: 1; padding: 2rem 1.4rem 1.5rem; border-top: 3px solid var(--sm-gold); }
.sm-qstep__text::before {
	content: counter(sm-qstep);
	position: absolute;
	top: -1.6rem;
	inset-inline-start: 1.2rem;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--sm-gold);
	box-shadow: 0 0 0 5px #fff;
	color: var(--sm-green-deep);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
}
html[lang^="fa"] .sm-qstep__text::before { content: counter(sm-qstep, persian); }
.sm-qstep h3 { margin: 0 0 0.5rem; color: var(--sm-green); font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: var(--sm-track); }
html[lang^="fa"] .sm-qstep h3 { font-weight: 700; line-height: 1.5; }
.sm-qstep p { margin: 0; font-size: 0.98rem; }
/* Scroll reveal (assets/js/steps.js adds .is-reveal, then .is-in per step); cards in a row follow each other. */
.sm-qsteps.is-reveal .sm-qstep { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s ease, transform 0.6s ease; }
.sm-qsteps.is-reveal .sm-qstep:nth-child(2) { transition-delay: 0.12s; }
.sm-qsteps.is-reveal .sm-qstep:nth-child(3) { transition-delay: 0.24s; }
.sm-qsteps.is-reveal .sm-qstep.is-in { opacity: 1; transform: none; }

.sm-quality__cta { background: var(--sm-green); color: var(--sm-on-green); }
.sm-quality__cta .sm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 3rem; align-items: center; }
.sm-quality__cta h2 { color: #fff; }
.sm-quality__cta p { grid-column: 1; margin: 0; max-width: 34rem; }
.sm-quality__cta .sm-btn { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 860px) {
	.sm-quality__split { grid-template-columns: 1fr; }
	.sm-page-head--photo { display: block; min-height: 0; padding-block: 0 2rem; }
	.sm-page-head--photo picture { position: relative; display: block; width: 100%; aspect-ratio: 800 / 411; }
	[dir="rtl"] .sm-page-head__img { transform: none; }
	.sm-page-head--fade picture::after { display: none; }
	.sm-page-head__text { padding-top: 1.5rem; }
	.sm-page-head__text h1, .sm-page-head__text .sm-page-head__lead { max-width: none; }
	.sm-qfigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm-qchap { padding-inline-start: 2.5rem; }
	.sm-qchap::before { inset-inline-start: calc(0.6rem - 1.5px); }
	.sm-qchap__head::before { inset-inline-start: 0; margin-top: 0.5rem; width: 1.2rem; height: 1.2rem; border-width: 3px; }
	.sm-qsteps { grid-template-columns: minmax(0, 1fr); }
	.sm-quality__cta .sm-wrap { grid-template-columns: 1fr; }
	.sm-quality__cta .sm-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.75rem; }
}

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

@media (max-width: 1100px) {
	.sm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3rem; }
	.sm-header__inner { flex-wrap: wrap; gap: 1rem; }
	/* Mobile bar: menu button at the start side (right in Persian), languages always visible. */
	.sm-nav__toggle { display: block; order: 0; }
	.sm-header__brand { order: 1; }
	.sm-header__inner > .sm-langs { order: 2; margin-inline-start: auto; }
	.sm-header__cta { order: 3; }
	.sm-nav {
		display: none;
		order: 4;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		margin: 0;
		padding-block: 0.5rem 1.25rem;
	}
	.sm-nav-open .sm-header { background: var(--sm-paper); box-shadow: 0 10px 30px -15px rgba(22, 58, 44, 0.4); }
	.sm-nav-open .sm-nav { display: flex; }
	.sm-nav__menu ul { flex-direction: column; gap: 0; }
	.sm-nav__menu a { display: block; padding-block: 0.85rem; border-bottom: 1px solid var(--sm-line); font-size: 1.15rem; }
}

@media (max-width: 860px) {
	.sm-header__inner { min-height: 4.75rem; }
	.sm-logo { height: 52px; }
	.sm-header--over { background: linear-gradient(rgba(250, 250, 248, 0.92), rgba(250, 250, 248, 0)); }

	.sm-hero { display: block; min-height: 0; background: var(--sm-paper); }
	.sm-hero::before { display: none; }
	.sm-hero__img { position: relative; height: 78vw; min-height: 300px; object-position: 72% 50%; }
	.sm-hero__body { padding-block: 2rem 1rem; }

	.sm-quick { margin-top: 1.5rem; }
	.sm-quick form { grid-template-columns: 1fr; }
	.sm-quick .sm-btn { padding-block: 1.15rem; }

	.sm-sec__head, .sm-ask { grid-template-columns: 1fr; }
	.sm-var { grid-template-columns: 5.5rem 1fr auto; gap: 0.5rem 1rem; align-items: start; }
	.sm-var__img { grid-row: 1 / span 3; width: 5.5rem; height: 5.5rem; }
	.sm-var h3 { grid-column: 2; }
	.sm-var .sm-shape { grid-column: 3; grid-row: 1; }
	.sm-var p { grid-column: 2 / -1; }

	.sm-steps { grid-template-columns: 1fr; row-gap: 0; }
	.sm-step {
		margin-inline-start: 1.05rem;
		padding-block: 0 2rem;
		padding-inline: 2.25rem 0;
		border-top: 0;
		border-inline-start: 1px solid rgba(255, 255, 255, 0.22);
	}
	.sm-step::before { top: -0.2rem; inset-inline-start: -1.05rem; }
	.sm-step:last-child { border-color: transparent; }

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

@media (max-width: 560px) {
	.sm-header__inner { gap: 0.6rem; }
	.sm-header__cta { display: none; }
	.sm-nav__cta { display: inline-flex; align-self: flex-start; }
	.sm-langs a { padding: 0.3rem 0.55rem; font-size: 0.85rem; }
}

@media (max-width: 420px) {
	.sm-logo { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* Desktop: everything one step smaller (rem-based), mobile keeps 16px. */
@media (min-width: 861px) {
	html { font-size: 93.75%; }
}

/* Big monitors (above 1600px): the page gets wider so it does not sit as a narrow column,
   text keeps its laptop size. Laptops are unchanged. */
@media (min-width: 1600px) {
	.sm-wrap, .sm-content { max-width: 82vw; }
}

/* ---------- Products page: same rhythm as Quality/About; one card per variety, photo and text side by side ---------- */
.sm-page-head--photo + .sm-products { margin-top: 0; }
.sm-products h2 { margin-block: 0 1.25rem; }
.sm-products .sm-about__intro .sm-quality__text p { max-width: 34rem; }
.sm-products .sm-about__intro .sm-quality__text p + p { margin-top: 1rem; }
.sm-products .sm-about__lead figcaption { margin-top: 0.6rem; font-size: 0.88rem; }
.sm-pvars { background: var(--sm-mist); padding-block: clamp(3rem, 6vw, 5rem); }
.sm-pvars__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.sm-pvars__head p { margin: 0; max-width: 34rem; color: var(--sm-muted); }
.sm-pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.sm-pcard { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 1.25rem 2.5rem -1.75rem rgba(22, 58, 44, 0.45); scroll-margin-top: 6rem; }
.sm-pcard:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.15fr); }
.sm-pcard__img { display: grid; place-items: center; position: relative; margin: 0; min-height: 14rem; background: #fff; }
.sm-pcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.sm-pcard__img .sm-pcard__nut { width: 9rem; height: 9rem; object-fit: contain; mix-blend-mode: multiply; }
.sm-pcard__text { display: flex; flex-direction: column; align-items: flex-start; padding: 1.4rem 1.6rem 1.5rem; border-inline-start: 3px solid var(--sm-gold); }
.sm-pcard h3 { margin: 0.35rem 0 0.75rem; font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
html[lang^="fa"] .sm-pcard h3, html[lang^="zh"] .sm-pcard h3 { letter-spacing: 0; line-height: 1.4; }
.sm-pcard p { margin: 0 0 0.75rem; }
.sm-pcard__use { color: var(--sm-muted); font-size: 0.95rem; }
.sm-pcard__use b { display: block; color: var(--sm-ink); font-weight: 600; }
.sm-pcard__ask { margin-top: auto; padding-top: 0.5rem; color: var(--sm-green); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sm-gold); text-underline-offset: 0.3em; }
.sm-pcard__ask:hover { color: var(--sm-green-2); }
.sm-porder { background: var(--sm-paper); padding-block: clamp(3rem, 6vw, 5rem); }
.sm-porder__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem clamp(2.5rem, 6vw, 5rem); align-items: start; }
.sm-porder__grid p { margin: 0; max-width: 32rem; }
@media (max-width: 860px) {
	.sm-pcards, .sm-porder__grid { grid-template-columns: minmax(0, 1fr); }
	.sm-pcard, .sm-pcard:last-child:nth-child(odd) { grid-template-columns: minmax(0, 1fr); }
	.sm-pcard__img { min-height: 0; }
	.sm-pcard__img img { aspect-ratio: 4 / 3; height: auto; }
	.sm-pcard__img .sm-pcard__nut { width: 7rem; height: 7rem; aspect-ratio: auto; margin-block: 1rem; }
	.sm-pcard__text { border-inline-start: 0; border-top: 3px solid var(--sm-gold); }
}
.sm-products .sm-qfigs dd span { white-space: nowrap; }