/* ============================================================
   ברגר — main stylesheet
   RTL-first: every directional rule uses logical properties.
   ============================================================ */

:root {
	--brand-red: #c63340;
	--brand-red-deep: #a32833;
	--burgundy: #5a1e22;
	--burgundy-deep: #3a1215;
	--ink: #1c1719;
	--ink-soft: #5b5254;
	--cream: #fbf8f5;
	--warm-grey: #f1ece8;
	--line: #e2d9d3;
	--gold: #b08d3f;
	/* Lifted gold for text on burgundy — #b08d3f only reaches 3.4:1 there. */
	--gold-text: #dcb765;
	--wa: #25d366;

	--font-display: Heebo, Assistant, "Segoe UI", sans-serif;
	--font-body: Assistant, "Segoe UI", system-ui, sans-serif;

	--wrap: 1200px;
	--radius: 14px;
	--radius-lg: 22px;
	--shadow: 0 2px 4px rgb(28 23 25 / 6%), 0 12px 28px -12px rgb(28 23 25 / 18%);
	--shadow-lg: 0 4px 10px rgb(28 23 25 / 8%), 0 28px 60px -24px rgb(28 23 25 / 30%);

	/* Fluid type — clamps so nothing needs a media query to stay readable. */
	--fs-display: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
	--fs-h2: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem);
	--fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
	--fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.13rem);
	--fs-sm: clamp(0.9rem, 0.87rem + 0.16vw, 0.98rem);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
	font-synthesis: none;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-red); text-underline-offset: 3px; }

/* Heebo carries every heading AND every UI element. Assistant is declared 400-700, so a
   selector left on it silently clamps an 800/900 request; Heebo's digits are also monowidth
   at every weight, which Assistant's are not (its "1" is 8% narrow). */
h1, h2, h3,
.btn, .site-nav a, .navmenu > ul a, .pricenav a, .order-rail a, .skip-link,
.price, .ocard__title, .ocard__num, .ocard__go, .cat__link,
.pricegroup__cta, .grade__label, .faq__item summary {
	font-family: var(--font-display);
	line-height: 1.3;
}
/* No negative tracking: it exists to close Latin's ascender gaps, and Hebrew is
   non-connecting with neither ascenders nor descenders in that sense. */
h1, h2, h3 { font-weight: 800; line-height: 1.2; margin: 0; }
.hero__title { text-wrap: balance; }
em, i { font-style: normal; }

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

.wrap {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: 1rem;
	z-index: 200;
	background: var(--burgundy);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--radius) var(--radius);
	text-decoration: none;
	font-weight: 700;
}
.skip-link:focus { inset-block-start: 0; }

.icon { flex: none; }

/* The custom butcher marks are traced line art with a much finer stroke than the solid
   platform glyphs, so they need more room to carry the same visual weight at a glance. */
.icon--knife, .icon--scale, .icon--clock,
.icon--heart, .icon--check, .icon--flame { width: 30px; height: 30px; }

/* Emanuel dual-render: the live design is the PHP; the Elementor area only
   appears inside the editor. !important beats the inline display:none. */
.elementor-editor-active .nexo-elementor-area { display: block !important; }
.elementor-editor-active .nexo-home-sections { display: none !important; }

/* ---------- shared bits ---------- */


.section-title {
	font-size: var(--fs-h2);
	color: var(--burgundy);
	margin-block-end: 2.5rem;
	max-width: 26ch;
}
.section-title--light { color: #fff; }

/* Buttons: squircle rather than the full 999px pill, with a soft tinted shadow in the
   button's own colour and a real press state. Chips and badges keep the pill — the
   distinction is deliberate: pills read as tags, squircles read as actions. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.5rem;
	border-radius: 14px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.16s ease,
		background-color 0.16s ease,
		border-color 0.16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; border-radius: 16px; }

/* WhatsApp keeps the platform hue — a butcher's customers recognise it instantly — but
   gets a subtle vertical shade and a green-tinted shadow instead of a flat fill. */
.btn--wa {
	background-color: #23c85e;
	background-image: linear-gradient(180deg, #2bdd70 0%, #1fbe57 100%);
	color: #042a13;
	box-shadow:
		0 1px 2px rgb(4 42 19 / 20%),
		0 12px 24px -12px rgb(31 190 87 / 75%),
		inset 0 1px 0 rgb(255 255 255 / 30%);
}
.btn--wa:hover {
	background-color: #29d067;
	background-image: linear-gradient(180deg, #31e578 0%, #23c85e 100%);
	box-shadow:
		0 1px 2px rgb(4 42 19 / 22%),
		0 16px 30px -12px rgb(31 190 87 / 85%),
		inset 0 1px 0 rgb(255 255 255 / 35%);
}
.btn--wa:active { box-shadow: 0 1px 2px rgb(4 42 19 / 25%), inset 0 1px 2px rgb(4 42 19 / 18%); }

.btn--phone {
	background-color: #c2333f;
	background-image: linear-gradient(180deg, #d13d49 0%, #b32a36 100%);
	color: #fff;
	box-shadow:
		0 1px 2px rgb(58 18 21 / 22%),
		0 12px 24px -12px rgb(179 42 54 / 70%),
		inset 0 1px 0 rgb(255 255 255 / 22%);
}
.btn--phone:hover { background-color: #cb3d49; background-image: linear-gradient(180deg, #da4954 0%, #bd3240 100%); }

/* On the dark hero and the burgundy bar: frosted glass rather than a hard outline. */
.btn--ghost,
.btn--tel {
	background: rgb(255 255 255 / 9%);
	border-color: rgb(255 255 255 / 26%);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover,
.btn--tel:hover {
	background: rgb(255 255 255 / 16%);
	border-color: rgb(255 255 255 / 45%);
}

/* The ghost button also appears on the light desktop hero, where white-on-white would vanish. */
@media (min-width: 861px) {
	.btn--ghost {
		background: rgb(90 30 34 / 4%);
		border-color: rgb(90 30 34 / 30%);
		color: var(--burgundy);
		backdrop-filter: none;
	}
	.btn--ghost:hover { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
}

/* ---------- header ---------- */

/* Full-bleed. Hello Elementor caps `.site-header:not(.dynamic-header)` (0,2,0) from 576px up,
   but only releases `.site-header.header-full-width` from 768px — so 576-767px was pinned at
   500px. Element + both classes is 0,2,1, which wins at every width. */
header.site-header.header-full-width {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: var(--burgundy);
	color: #fff;
	box-shadow: 0 2px 18px rgb(58 18 21 / 25%);
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	min-height: 72px;
	padding-block: 0.5rem;
	flex-wrap: nowrap;           /* one row at every width — never a second stacked row */
}

.site-header__brand { flex: none; }
.site-header__logo {
	height: clamp(34px, 3.2vw, 44px);
	width: auto;
	/* Transparent-background artwork, flattened to solid white for the burgundy bar. */
	filter: brightness(0) invert(1);
}

.site-header__hechsher {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding-inline-start: 1.1rem;
	border-inline-start: 1px solid rgb(255 255 255 / 20%);
	font-family: var(--font-display);
	font-size: 0.82rem;
	color: #f0dcd0;
	white-space: nowrap;          /* it used to wrap to three cramped lines at 1440 */
	flex: none;
}
.site-header__hechsher img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.site-header__hechsher b { color: #fff; font-weight: 700; }

/* Anchor nav — the page is ~7000px tall and previously had no wayfinding at all. */
.site-nav { margin-inline: auto; }
.site-nav ul {
	display: flex;
	gap: clamp(0.9rem, 1.6vw, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav a {
	position: relative;
	color: #f0dcd0;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
	padding-block: 0.35rem;
	white-space: nowrap;
}
.site-nav a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	background: var(--gold-text);
	transform: scaleX(0);
	transition: transform 0.18s ease;
}
.site-nav a:hover { color: #fff; }
.site-nav a:hover::after { transform: scaleX(1); }

.site-header__cta { flex: none; }

/* Below the desktop nav breakpoint there is no floating rail, so the header carries both
   order paths itself. Above it the rail takes over and this would be a third redundant control. */
/* The client asked for call and email to be reachable "למעלה ובצד" — top bar as well as the
   side rail (2026-08-09). They were previously desktop-hidden on the assumption the rail
   covered it, which left the desktop top bar with WhatsApp only. Icon-only here so three
   buttons plus the nav still fit; the label stays in the accessibility tree. */
.site-header__tel,
.site-header__mail {
	flex: none;
	display: inline-flex;
	padding-inline: 0.75rem;
	min-width: 44px;
	justify-content: center;
}
.site-header__tel span:not(.icon),
.site-header__mail span:not(.icon) {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ---------- compact menu (below the nav breakpoint) ---------- */

.navmenu { display: none; position: relative; flex: none; }
.navmenu summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;      /* a comfortable touch target */
	border-radius: var(--radius);
	border: 1px solid rgb(255 255 255 / 30%);
}
.navmenu summary::-webkit-details-marker { display: none; }
.navmenu[open] summary { background: rgb(255 255 255 / 12%); }

/* Three bars from one element — a hamburger does not need to be an asset. */
.navmenu__bars,
.navmenu__bars::before,
.navmenu__bars::after {
	display: block;
	width: 20px; height: 2px;
	background: #fff;
	border-radius: 2px;
}
.navmenu__bars { position: relative; }
.navmenu__bars::before,
.navmenu__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.navmenu__bars::before { inset-block-start: -6px; }
.navmenu__bars::after  { inset-block-start: 6px; }

.navmenu > ul {
	position: absolute;
	inset-block-start: calc(100% + 0.6rem);
	inset-inline-end: 0;
	min-width: 220px;
	background: var(--burgundy-deep);
	border: 1px solid rgb(255 255 255 / 15%);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	display: grid;
	gap: 0.15rem;
	z-index: 10;
}
.navmenu > ul a {
	display: block;
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	color: #f0dcd0;
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
}
.navmenu > ul a:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.navmenu__tel {
	border-block-start: 1px solid rgb(255 255 255 / 15%);
	margin-block-start: 0.35rem;
	padding-block-start: 0.8rem !important;
	color: var(--gold-text) !important;
}

/* ---------- order rail ---------- */

/* Physically pinned left — deliberately NOT logical. The client asked for the rail on the
   left of the screen, which in an RTL document is the inline-END side. */
.order-rail {
	position: fixed;
	z-index: 90;
	left: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	border-radius: 0 var(--radius) var(--radius) 0;
	overflow: hidden;
	box-shadow: var(--shadow);
}
.order-rail a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 0.9rem;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
	transition: filter 0.16s ease;
}
.order-rail a:hover { filter: brightness(1.08); }
.order-rail a:active { filter: brightness(0.94); }
/* Collapsed to an icon on desktop, but the label stays in the accessibility tree —
   `display:none` here would leave these links with no name at all. */
.order-rail a span {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.order-rail a:hover span,
.order-rail a:focus-visible span {
	position: static;
	width: auto; height: auto;
	clip-path: none;
}
.order-rail__wa { background-color: #23c85e; background-image: linear-gradient(180deg, #2bdd70, #1fbe57); color: #042a13 !important; }
.order-rail__phone { background-color: #c2333f; background-image: linear-gradient(180deg, #d13d49, #b32a36); }
.order-rail__mail { background-color: #52191d; background-image: linear-gradient(180deg, #632025, #451417); }
/* The floating rail is a desktop affordance. On anything narrower the sticky header already
   holds WhatsApp and phone, and a bar pinned over the content is just in the way. */
@media (max-width: 1040px) {
	.order-rail { display: none; }
}


/* ---------- hero ---------- */

.hero {
	position: relative;
	background: linear-gradient(160deg, var(--cream) 0%, var(--warm-grey) 100%);
	overflow: hidden;
}

/* RTL: text runs from the right, so the photograph takes the left (inline-end) half
   and fades out before it reaches the copy. */
.hero__media {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 62%;
	pointer-events: none;
}
.hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	/* The source frames the steak right-of-centre with empty space to its left;
	   mirroring puts the subject on the left where this layout needs it. */
	transform: scaleX(-1);
	/* Gradients take no logical keywords. The mask is applied in the element's own
	   space and mirrored with it, so `to left` here lands as a fade on the visual
	   right — the edge that meets the copy. */
	mask-image: linear-gradient(to left, #000 45%, transparent 96%);
}

/* Keeps the headline legible where it passes over the photograph. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to left, var(--cream) 18%, rgb(251 248 245 / 45%) 46%, transparent 70%);
	pointer-events: none;
}

.hero__body {
	position: relative;
	z-index: 1;
	padding-block: clamp(3.5rem, 8vw, 7rem);
	max-width: 100%;
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.45rem 1rem 0.45rem 0.75rem;
	margin: 0 0 1.4rem;
	font-family: var(--font-display);
	font-size: 0.92rem;
	color: var(--burgundy);
	box-shadow: var(--shadow);
}
.hero__eyebrow .icon { width: 22px; height: 22px; color: var(--brand-red); }
.hero__eyebrow b { font-weight: 700; }

.hero__title {
	font-size: var(--fs-display);
	font-weight: 900;
	color: var(--burgundy);
	margin-block-end: 1.1rem;
}
.hero__title em { color: var(--brand-red); font-style: normal; }

.hero__lead {
	font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
	color: var(--ink-soft);
	max-width: 38ch;
	margin: 0 0 0.9rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- kashrut ---------- */

.kashrut {
	background: var(--burgundy);
	color: #fff;
	padding-block: clamp(3rem, 6vw, 5rem);
}
.kashrut__inner {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.kashrut__badge {
	background: var(--cream);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	border: 3px solid var(--gold);
	box-shadow: var(--shadow-lg);
}
.kashrut__title {
	font-size: var(--fs-h2);
	font-weight: 800;
	margin-block-end: 1rem;
}
.kashrut__lead {
	font-size: 1.15rem;
	color: #f0dcd0;
	max-width: 50ch;
	margin: 0 0 2rem;
}
.kashrut__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.kashrut__list li { display: flex; gap: 0.9rem; align-items: start; }
.kashrut__list .icon { color: var(--gold-text); margin-block-start: 0.1rem; }
.kashrut__list b { display: block; font-size: 1.05rem; }
.kashrut__list span { color: #e3cec5; font-size: 0.97rem; }
.kashrut__list span b { display: inline; color: #fff; }

/* Stamp-only variant. `.kashrut__inner` is a 240px + 1fr grid built for badge-beside-text;
   with the text gone that leaves a dead column, so this centres the single child instead.
   The band also loses most of its padding — it is now a mark, not a section. */
.kashrut--mark { padding-block: clamp(2rem, 4vw, 3rem); }
.kashrut--mark .kashrut__inner {
	display: flex;
	justify-content: center;
}
.kashrut--mark .kashrut__badge {
	max-inline-size: 320px;
	padding: 1.5rem;
}
.kashrut--mark .kashrut__badge img { width: 100%; height: auto; display: block; }

/* ---------- categories ---------- */

.cats { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1.5rem;
}
.cat {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cat:hover { transform: translateY(-0.25em); box-shadow: var(--shadow-lg); }
.cat__media {
	aspect-ratio: 1;
	margin-block-end: 0.75rem;
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
}
.cat__media img { width: 100%; height: 100%; object-fit: contain; }
.cat__title { font-size: var(--fs-h3); color: var(--brand-red); margin-block-end: 0.4rem; }
.cat__text { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 1.1rem; flex: 1; }

/* ---------- prices ---------- */

.prices { background: var(--warm-grey); padding-block: clamp(3.5rem, 7vw, 6rem); }
/* A phone number must never break across lines. In the RTL price intro "03-6588344" was
   wrapping after the hyphen, leaving "03-" on one line and "6588344" on the next, which reads
   as two different numbers. The dir="ltr" isolation fixes digit ORDER, not line breaking. */
a[href^="tel:"],
a[href^="tel:"] span,
.price {
	white-space: nowrap;
}

.prices__how { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 1.5rem; }
.prices__how a { font-weight: 700; }

.prices__intro { max-width: 66ch; color: var(--ink-soft); margin: -1.5rem 0 0.6rem; }

.grade__input { position: absolute; opacity: 0; width: 0; height: 0; }
.grade__label {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	cursor: pointer;
	font-weight: 800;
	box-shadow: var(--shadow);
}
.grade__opt { color: var(--ink-soft); transition: color 0.15s ease; }
.grade__opt--glatt { color: var(--brand-red); }
.grade__track {
	width: 52px; height: 28px;
	border-radius: 999px;
	background: var(--line);
	position: relative;
	flex: none;
	transition: background-color 0.2s ease;
}
.grade__knob {
	position: absolute;
	inset-block-start: 3px;
	/* Logical inset, not `translate` — a physical transform would slide the knob off
	   the track in RTL. */
	inset-inline-start: 3px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--brand-red);
	transition: inset-inline-start 0.2s ease, background-color 0.2s ease;
}
.grade__input:focus-visible + .grade .grade__label { outline: 3px solid var(--brand-red); outline-offset: 3px; }
.grade__input:checked + .grade .grade__label .grade__track { background: var(--gold); }
.grade__input:checked + .grade .grade__label .grade__knob { inset-inline-start: 27px; background: var(--burgundy); }
.grade__input:checked + .grade .grade__label .grade__opt--glatt { color: var(--ink-soft); }
.grade__input:checked + .grade .grade__label .grade__opt--chalak { color: var(--burgundy); }

.grade {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-block-end: 1.75rem;
}
.grade__hint { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.grade__hint--chalak,
.grade__input:checked ~ .grade .grade__hint .grade__hint--glatt { display: none; }
.grade__input:checked ~ .grade .grade__hint .grade__hint--chalak { display: inline; }

/* Both grades ship in the markup; the toggle only swaps which one is shown,
   so with JS off the גלאט list is still complete. */
.price__chalak { display: none; }
.grade__input:checked ~ .prices__list .price__glatt { display: none; }
.grade__input:checked ~ .prices__list .price__chalak { display: inline; }

/* Category jump-chips — the full list is long; this makes it navigable. */
.pricenav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 1.5rem;
}
.pricenav a {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.45rem 1.05rem;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--burgundy);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pricenav a:hover { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }

/* Stacked full-width groups. The previous masonry grid left huge ragged gaps because
   בקר has 13 rows and הודו has 5; stacking removes the problem instead of patching it. */
.prices__list { display: grid; gap: 1.5rem; }

.pricegroup {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.5rem clamp(1.15rem, 3vw, 2.25rem) 1.75rem;
	box-shadow: var(--shadow);
	scroll-margin-block-start: 100px;   /* clears the sticky header on anchor jumps */
}

.pricegroup__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block-end: 1rem;
	margin-block-end: 0.5rem;
	border-block-end: 2px solid var(--line);
}
.pricegroup__thumb {
	width: 66px; height: 66px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--line);
	flex: none;
}
.pricegroup__title { font-size: var(--fs-h3); color: var(--burgundy); }
.pricegroup__note { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0.25rem 0 0; }

/* Column captions for the two-price (קפוא/טרי) group, desktop only — each row also
   carries its own inline labels, which are what mobile shows. */
.pricegroup__cols { display: none; }

/* Rows flow into columns so a 13-row category is as tall as a 5-row one. */
.pricerows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.pricerows--two { grid-template-columns: 1fr; }

.pricerow {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 0.75rem;
	border-block-end: 1px solid var(--line);
}
.pricerow:last-child { border-block-end: 0; }

.pricerow__name { font-weight: 500; flex: 1 1 auto; min-width: 0; max-width: 60%; }
.pricerow__name small {
	display: block;
	font-size: 0.82rem;
	color: var(--ink-soft);
	font-weight: 400;
}

/* Dotted leader, the way a printed menu does it — ties name to price across the gap. */
.pricerow__leader {
	flex: 1;
	border-block-end: 1px dotted var(--line);
	min-width: 1.5rem;
	transform: translateY(-0.25em);
}

.pricerow__val {
	flex: none;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	min-width: 5.5rem;
	justify-content: end;
}
.pricerow__val small {
	font-size: 0.8rem;
	color: var(--ink-soft);
	font-weight: 600;
}
.pricerow__val .price { font-size: 1.05rem; }
.pricerow__val--hero .price { font-size: 1.2rem; }

.price {
	font-weight: 800;
	color: var(--brand-red);
}
/* The frozen column is the secondary price; the fresh one is what most people buy. */
.pricerow__val:not(.pricerow__val--hero) .price { color: var(--ink-soft); font-weight: 700; }

.prices__disclaimer {
	margin-block-start: 2rem;
	font-size: var(--fs-sm);
	color: var(--ink-soft);
}
/* Underlined because colour alone is not a sufficient cue inside running text. */
.prices__disclaimer a,
.order__mail a { text-decoration: underline; font-weight: 700; }


/* ---------- shabbat ---------- */

.shabbat { background: var(--burgundy-deep); color: #fff; }
.shabbat__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(3rem, 6vw, 5rem);
}
.shabbat__text p { color: #e3cec5; max-width: 52ch; }
.shabbat__tip {
	display: flex;
	gap: 0.6rem;
	align-items: start;
	background: rgb(255 255 255 / 7%);
	border-inline-start: 3px solid var(--gold);
	border-radius: var(--radius);
	padding: 0.85rem 1rem;
	font-size: 0.95rem;
	margin-block: 1.5rem 2rem !important;
}
.shabbat__tip .icon { color: var(--gold-text); flex: none; margin-block-start: 0.15rem; }
.shabbat__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ---------- service ----------

   Sits between the cream categories band and the warm-grey FAQ, so it can be neither. The
   gradient also buys it the visual weight the client asked for: he was explicit that service,
   not kashrut, is what sells here, and a quiet band would have contradicted the copy.

   `to bottom` is deliberate — gradients accept no logical keywords, and a vertical axis is the
   one direction that needs no RTL mirror. */

.service {
	background-color: var(--brand-red-deep);
	background-image: linear-gradient(to bottom, var(--brand-red-deep), var(--burgundy));
	color: #fff;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.service__head { text-align: center; max-width: 46ch; margin-inline: auto; }
.service__title { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 0.6rem; }
.service__lead { color: #f0dcd0; font-size: var(--fs-body); margin: 0 0 clamp(2rem, 4vw, 3rem); }

.service__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* min() so a 320px viewport shrinks the track instead of overflowing it. */
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.service__card {
	background: rgb(255 255 255 / 9%);
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.35rem;
	text-align: center;
}

.service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	/* --gold-text is tuned for the burgundy bands; on this lighter red it goes muddy, so the
	   circle carries the gold and the mark itself stays white. */
	background: rgb(220 183 101 / 22%);
	color: #fff;
	margin-block-end: 0.9rem;
}

.service__icon .icon { inline-size: 1.6rem; block-size: 1.6rem; }
.service__card-title { font-size: var(--fs-h3); font-weight: 800; margin: 0 0 0.4rem; }
/* #e3cec5 is the tone used on the flat burgundy bands, but the card's translucent white sits
   over the gradient at ~#ab3b45, which drops it to 4.03:1 — under AA. Measured, not guessed:
   this colour is 5.04:1 on that composited background. */
.service__card-text { color: #f6e6de; font-size: 0.97rem; margin: 0; }

/* ---------- faq ---------- */

.faq { background: var(--warm-grey); padding-block: clamp(3.5rem, 7vw, 6rem); }
.faq__list {
	display: grid;
	gap: 0.75rem;
	max-width: 820px;
	margin-inline: auto;
}
/* The heading has to share the content's axis, or it floats ~190px off it. */
.faq .section-title { margin-inline: auto; max-width: 820px; }
.faq__item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 0 1.35rem;
	transition: border-color 0.15s ease;
}
.faq__item[open] { border-color: var(--brand-red); }
.faq__item summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1.15rem;
	font-weight: 800;
	font-size: 1.02rem;
	color: var(--burgundy);
	cursor: pointer;
	list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand-red); }
.faq__item summary > span:first-child { flex: 1; }

/* Chevron drawn from two borders — a 4-line shape does not need to be an asset.
   Physical sides on purpose: this points DOWN when collapsed and UP when open, which is
   the same in both writing directions. */
.faq__chev {
	flex: none;
	width: 10px; height: 10px;
	border-right: 2px solid var(--brand-red);
	border-bottom: 2px solid var(--brand-red);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	margin-block-start: -5px;
}
.faq__item[open] .faq__chev { transform: rotate(225deg); margin-block-start: 4px; }

.faq__item p {
	margin: 0;
	max-width: 68ch;
	text-wrap: pretty;
	padding-block-end: 1.35rem;
	color: var(--ink-soft);
	border-block-start: 1px solid var(--line);
	padding-block-start: 1rem;
}

/* ---------- order ---------- */

.order { padding-block: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.order .section-title { margin-block-end: 1rem; max-width: 24ch; margin-inline: auto; }

.order__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 1.5rem;
	max-width: 820px;
	margin-inline: auto;
}
.ocard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 2.25rem 1.5rem;
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ocard:hover { transform: translateY(-0.25em); box-shadow: var(--shadow-lg); }
.ocard--wa:hover { border-color: var(--wa); }
.ocard--phone:hover { border-color: var(--brand-red); }
.ocard__icon {
	display: grid;
	place-items: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	margin-block-end: 0.5rem;
}
.ocard__icon .icon { width: 30px; height: 30px; }
.ocard--wa .ocard__icon { background: var(--wa); color: #06331a; }
.ocard--phone .ocard__icon { background: var(--brand-red); color: #fff; }
.ocard__title { font-weight: 800; font-size: 1.2rem; color: var(--burgundy); }
.ocard__num { font-size: 1.5rem; font-weight: 900; color: var(--brand-red); }
.ocard__text { color: var(--ink-soft); font-size: 0.95rem; max-width: 33ch; }
.ocard__go { margin-block-start: 0.75rem; font-weight: 800; color: var(--burgundy); }

/* U+2190 is in none of the four font subsets, so a literal arrow rendered from whatever
   the OS supplied. Drawn from borders instead, pointing inline-end (visual left in RTL). */
.ocard__chev {
	display: inline-block;
	width: 8px; height: 8px;
	/* bottom+left rotated 45deg points LEFT, which is "forward" in this RTL page. */
	border-left: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg);
	margin-inline-start: 0.4rem;
	vertical-align: middle;
}

.order__mail { margin-block-start: 2rem; color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---------- footer ---------- */

/* Same 576-767px gap as the header. */
footer.site-footer.footer-full-width {
	background: var(--burgundy-deep);
	color: #e3cec5;
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 2.5rem;
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.site-footer__brand img { height: 54px; width: auto; filter: brightness(0) invert(1); }
.site-footer__brand p { font-size: 0.95rem; margin-block-start: 0.75rem; }
.site-footer h2 { font-size: 1rem; color: #fff; margin-block-end: 0.85rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer a { color: #e3cec5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__kashrut { display: flex; gap: 0.9rem; align-items: flex-start; }
.site-footer__kashrut img { height: 62px; width: auto; filter: brightness(0) invert(1); }
.site-footer__kashrut p { font-family: var(--font-display); font-size: 0.88rem; margin: 0; }
.site-footer__kashrut b { color: #fff; }
.site-footer__legal {
	border-block-start: 1px solid rgb(255 255 255 / 12%);
	margin: 0;
	padding-block: 1.25rem;
	text-align: center;
	font-size: 0.85rem;
}

/* ============================================================
   Responsive
   ============================================================ */

/* The hechsher line is the first thing to go — it leads the page's second section anyway. */
@media (max-width: 1240px) {
	.site-header__hechsher { display: none; }
}

/* Five Hebrew nav items plus a CTA stop fitting here; swap the row for a disclosure menu
   rather than letting the bar wrap into a second row. */
@media (max-width: 1040px) {
	.site-nav { display: none; }
	.navmenu { display: block; }
	.site-header__cta { margin-inline-start: auto; }
}

@media (max-width: 1080px) {
	.kashrut__inner { grid-template-columns: 180px 1fr; }
}

@media (max-width: 860px) {
	/* Full-bleed hero: the photograph fills the viewport and the copy sits on it. The
	   previous version stacked a 16:10 photo above a tall cream block, which read as two
	   unrelated slabs on a phone. */
	.hero {
		position: relative;
		min-height: 82svh;
		display: flex;
		align-items: flex-end;
		background: var(--burgundy-deep);
	}
	.hero__media {
		position: absolute;
		inset: 0;
		width: 100%;
		opacity: 1;
	}
	.hero__media img {
		width: 100%; height: 100%;
		object-fit: cover;
		object-position: center;
		mask-image: none;
		transform: none;
	}
	/* The portrait frame is already near-black under the copy, so this only needs to
	   guarantee contrast, not manufacture it. */
	.hero::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top,
			rgb(20 6 8 / 88%) 0%,
			rgb(20 6 8 / 62%) 34%,
			rgb(20 6 8 / 18%) 58%,
			transparent 78%);
	}
	.hero__body { padding-block: 2rem 2.25rem; }
	.hero__lead { max-width: none; color: #efe2dd; }
	.hero__title { color: #fff; }
	.hero__title em { color: #ff8f97; }   /* lifted off the dark scrim for contrast */
	.hero__eyebrow {
		background: rgb(255 255 255 / 12%);
		border-color: rgb(255 255 255 / 30%);
		color: #fff;
		backdrop-filter: blur(6px);
		box-shadow: none;
	}
	.hero__eyebrow b { color: #fff; }
	.hero__eyebrow .icon { color: var(--gold-text); }
	.hero__cta { flex-direction: column; align-items: stretch; }
	.hero__cta .btn { justify-content: center; }
	.hero__cta .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 55%); }
	.hero__cta .btn--ghost:hover { background: #fff; color: var(--burgundy); border-color: #fff; }
	.kashrut__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.kashrut__badge { max-width: 220px; }
	.kashrut__list li { text-align: start; }
	.kashrut__lead { margin-inline: auto; }
	.shabbat__inner { grid-template-columns: 1fr; }
	.shabbat__media { order: -1; }
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
	/* Icon-only CTAs on phones, but the labels stay in the accessibility tree. */
	.site-header__cta span:not(.icon),
	.site-header__tel span:not(.icon),
	.site-header__mail span:not(.icon) {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.site-header__cta,
	.site-header__tel,
	.site-header__mail { padding: 0.7rem; min-width: 44px; justify-content: center; }

	/* Rail becomes a full-width bottom bar — the two order paths always in thumb reach. */
	.order-rail {
		inset: auto 0 0 0;
		transform: none;
		flex-direction: row;
		border-radius: 0;
		box-shadow: 0 -4px 20px rgb(28 23 25 / 25%);
	}

	/* One centred column on phones — three right-hugging blocks left a wide empty gutter. */
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		justify-items: center;
		text-align: center;
	}
	.site-footer__brand { display: grid; justify-items: center; }
	.site-footer ul { justify-items: center; }
	.site-footer__kashrut {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.6rem;
	}
	/* Carousel on phones. Stacked full-width these were ~4,100px of identical white
	   boxes; two-up was better but still four rows of scrolling. Swiping suits a
	   browse-y row of products and keeps the price list within reach.
	   Pure CSS scroll-snap — no library, no JS. */
	.cats__grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 63%;
		grid-template-columns: none;
		gap: 0.85rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Full-bleed track so cards can run to the screen edge and hint at the next one. */
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50% + 0.15rem);
		padding-block-end: 0.5rem;
	}
	.cats__grid::-webkit-scrollbar { display: none; }
	.cat {
		scroll-snap-align: start;
		padding: 0.75rem 0.75rem 1rem;
	}
	.cat__text { display: none; }

	/* Once Swiper initialises it owns the transform; the native scroll baseline must
	   stand down or the two fight each other. */
	.cats__carousel.is-swiper .cats__grid {
		display: flex;
		overflow: visible;
		scroll-snap-type: none;
		margin-inline: 0;
		padding-inline: 0;
		gap: 0;
	}
	.cats__carousel.is-swiper .cat {
		width: 63%;
		flex: none;
		height: auto;
	}
	.cats__carousel.is-swiper {
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
		overflow: hidden;
	}
	.cats__carousel .swiper-pagination { display: none; }
	.cats__carousel.is-swiper .swiper-pagination {
		display: block;
		position: static;
		margin-block-start: 1rem;
	}
	/* The visible dot stays 8px; padding + content-box clipping is what the thumb actually
	   hits. 24px clears the WCAG 2.5.8 AA floor, but Apple and Google both advise 44px, so
	   the vertical hit area is 44. Horizontal stays narrower on purpose: seven bullets at a
	   full 44 wide would overflow a 320px viewport. */
	.cats__carousel.is-swiper .swiper-pagination-bullet {
		width: 8px; height: 8px;
		padding: 18px 8px;
		background: var(--ink-soft);
		background-clip: content-box;
		opacity: 0.3;
		box-sizing: content-box;
		margin: 0 2px !important;
		transition: opacity 0.2s ease, width 0.2s ease;
	}
	.cats__carousel.is-swiper .swiper-pagination-bullet-active {
		background: var(--brand-red);
		background-clip: content-box;
		opacity: 1;
		width: 22px;
		border-radius: 12px;
	}

	/* Jump-chips were wrapping to two ragged rows; one swipeable row instead. */
	.pricenav {
		flex-wrap: nowrap;
		overflow-x: auto;
		/* Without this a horizontal swipe that runs past the last chip chains to the browser's
		   back gesture on iOS and Android, so flicking the chips can navigate away from the
		   page. The category carousel already contains its own scroll; this one did not. */
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
		padding-block-end: 0.25rem;
	}
	.pricenav::-webkit-scrollbar { display: none; }
	.pricenav a { flex: none; scroll-snap-align: start; }
	.pricegroup { padding: 1.15rem 1.15rem 1.35rem; }
	.pricegroup__head { flex-wrap: wrap; gap: 0.75rem; }
	.pricegroup__thumb { width: 48px; height: 48px; }
	/* The per-category CTA gets a full row of its own instead of being squeezed. */
	.pricerow__name { max-width: none; }
	.pricerow { flex-wrap: wrap; row-gap: 0.1rem; }
	.pricerow__val { min-width: 0; }

	/* Single-price rows keep the leader line. Two-price rows drop it and put the name on
	   its own line with both prices beneath, which reads better than a ragged wrap. */
	.pricerows--two .pricerow {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: baseline;
		column-gap: 1rem;
	}
	.pricerows--two .pricerow__leader { display: none; }
	.pricerows--two .pricerow__val { justify-content: flex-end; }
	.pricenav { gap: 0.4rem; }
	.pricenav a { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
}

/* ---------- touch targets ---------- */

/* Measured at 390px: the price chips were 31px tall, the footer links 22px and the logo
   link 34px. `pointer: coarse` scopes this to touch devices, so the desktop mouse layout
   keeps its tighter rhythm. Inline phone numbers inside a sentence are left alone —
   WCAG 2.5.8 exempts links in a block of text. */
@media (pointer: coarse) {
	.pricenav a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.site-footer ul a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;   /* flex drops the whitespace text node; this restores the space */
	}

	.site-header__brand {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.btn:hover, .btn:active, .cat:hover, .ocard:hover { transform: none; }
}

/* ---------- legal pages ---------- */

.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--cream); }
.legal__inner { max-width: 68ch; }
.legal__title { font-size: var(--fs-h2); margin-block-end: 0.75rem; }
.legal__intro { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 2rem; }
.legal__section { margin-block-end: 2rem; }
.legal__section h2 {
	font-size: var(--fs-h3);
	color: var(--brand-red);
	margin-block-end: 0.6rem;
}
.legal__section p { margin: 0 0 0.85rem; line-height: 1.7; }
/* WCAG 1.4.1: colour alone cannot distinguish a link from its surrounding text. Measured at
   2.45:1 against the body ink — well under the 3:1 that a colour-only distinction would need —
   so links inside prose are underlined. Applies to every in-paragraph link, not just here. */
.legal__section a,
.prices__how a,
.shabbat__text p a,
.faq__item a {
	color: var(--brand-red-deep);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* An unfilled required value has to be impossible to skim past. */
.legal__blank {
	background: #ffe9a8;
	color: #6b4a00;
	font-weight: 700;
	padding: 0.1em 0.4em;
	border-radius: 4px;
}

.legal__draft {
	background: #fff4d6;
	border: 2px solid var(--gold);
	border-radius: var(--radius);
	padding: 1rem 1.15rem;
	margin-block-end: 2rem;
	line-height: 1.6;
}

.legal__updated { color: var(--ink-soft); font-size: var(--fs-sm); }
.legal__back { margin-block-start: 2rem; }

.site-footer__policies ul {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	font-size: var(--fs-sm);
}
.site-footer__policies a { color: inherit; opacity: 0.85; }
.site-footer__policies a:hover { opacity: 1; }

/* ---------- the three reasons (under the hero) ---------- */

.pillars {
	background: var(--warm-grey);
	border-block-end: 1px solid var(--line);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.pillars__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* min() keeps a 320px viewport shrinking the track rather than overflowing it. */
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
}

.pillar { display: flex; gap: 0.75rem; align-items: start; }

.pillar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--brand-red);
}

.pillar__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.pillar__title { display: block; font-family: var(--font-display); font-size: 1.02rem; }
.pillar__text { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.5; }