/* ==========================================================================
   Tansen — design system
   Light, open and agricultural. Green carries the brand through the page,
   gold picks up the pack, and the house purple is held back for the brand
   bar, the results band and the footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* These were the agri-greens. They now carry the brand's royal purple, so
	   every rule that referenced them moves to the real palette at once. The
	   names are kept to avoid a churn of 133 edits; green survives only inside
	   photographs. */
	--green:      #300080;
	--green-2:    #4a1aa8;
	--green-dk:   #220060;
	--green-tint: #f4f0e6;
	--green-soft: #ece2cc;

	/* Gold — from the pack */
	--gold:       #d0a030;
	--gold-2:     #e8bc55;
	--gold-dk:    #8a651a;

	/* Royal purple — taken from the logo and the pack. This is the brand
	   ground, not an accent: the dark bands, the hero and the ornament all
	   sit on it, and the green now only appears inside photographs. */
	--royal:      #300080;
	--royal-2:    #260068;
	--royal-3:    #1c0450;
	--royal-4:    #120033;
	--royal-ink:  #0b0020;

	/* Gold, lifted from the pack's arabesque borders. */
	--gold-lt:    #e8c76a;
	--gold-deep:  #a87c1c;

	/* Warm rice-husk ivory, for the few light sections. */
	--husk:       #efe6d2;
	--husk-2:     #e3d6ba;

	/* Neutrals */
	--ink:        #1b1430;
	--text:       #55665c;
	--text-soft:  #7b8a81;
	--cream:      #f8f4ea;
	--husk-tint:  #f4efe1;
	--white:      #ffffff;
	--line:       #e4e6e0;
	--line-dark:  rgba(255, 255, 255, 0.16);

	--on-dark:       #ffffff;
	--on-dark-muted: rgba(255, 255, 255, 0.78);
	--on-dark-faint: rgba(255, 255, 255, 0.55);

	/* Type */
	--font-display: "Poppins", "Segoe UI", Arial, sans-serif;
	--font-body:    "DM Sans", "Segoe UI", Arial, sans-serif;
	/* Kept so older markup still resolves; the script face is retired. */
	--font-script:  "Poppins", "Segoe UI", Arial, sans-serif;

	/* Spacing — 8px rhythm */
	--s1: 0.5rem;
	--s2: 1rem;
	--s3: 1.5rem;
	--s4: 2rem;
	--s5: 3rem;
	--s6: 4rem;

	--section-y: clamp(2.25rem, 4vw, 3.5rem);
	/* Dark and photographic bands carry a little more air than flat ones. */
	--band-y:    clamp(2.75rem, 4.8vw, 4.25rem);
	--gutter:    clamp(1.25rem, 4vw, 2.5rem);
	--maxw:      1240px;

	--radius:    6px;
	--radius-lg: 10px;
	--radius-xl: 16px;

	--shadow:    0 14px 34px -26px rgba(28, 4, 80, 0.45);
	--shadow-lg: 0 30px 70px -44px rgba(28, 4, 80, 0.55);
	--shadow-md: 0 20px 48px -34px rgba(28, 4, 80, 0.5);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur:  260ms;

	--header-h: 82px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
	/* The drawer parks past the right edge. `clip` keeps it out of the
	   scrollable area without creating a scroll container, which `hidden`
	   would do — and that breaks the sticky header. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	overflow-x: clip;
}

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

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

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

.wrap--reading {
	max-width: 780px;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--ink);
	text-wrap: balance;
}

/* Poppins is geometric, so it needs negative tracking as it grows or the
   counters open up and the headline loses authority. Weight drops as size
   rises for the same reason. */
h1 { font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-weight: 700; line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; }
h4 { font-weight: 600; line-height: 1.3;  letter-spacing: -0.01em; }

.script {
	font-family: var(--font-script);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--gold-dk);
}

.mono {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Sections
   -------------------------------------------------------------------------- */
.section {
	position: relative;
	padding-block: var(--section-y);
	background: var(--white);
}

.section--tint {
	background: var(--husk-tint);
}

.section--green {
	background: var(--green);
	color: var(--on-dark-muted);
}

.sechead {
	max-width: 60ch;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.sechead--center {
	margin-inline: auto;
	text-align: center;
}

/* The same device as the hero and the parallax bands: a gold hairline leading
   into small type, rather than a decorative label floating above the title. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gold-dk);
}

.eyebrow__rule {
	display: block;
	flex: none;
	width: clamp(1.8rem, 4vw, 3.2rem);
	height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent);
}

.sechead--center .eyebrow { justify-content: center; }
.sechead--center .eyebrow__rule { background: linear-gradient(90deg, transparent, var(--gold)); }
.sechead--center .eyebrow::after {
	content: "";
	display: block;
	flex: none;
	width: clamp(1.8rem, 4vw, 3.2rem);
	height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent);
}

/* On dark grounds the rule and the type both lift. */
.phero .eyebrow,
.enquiry .eyebrow { color: var(--gold-lt); }

.sechead__title {
	max-width: 22ch;
	font-size: clamp(1.75rem, 3.3vw, 2.65rem);
	text-wrap: balance;
}

.sechead--center .sechead__title {
	margin-inline: auto;
}

.sechead__lead {
	margin-top: var(--s2);
	max-width: 58ch;
	font-size: clamp(0.98rem, 1.1vw, 1.05rem);
	line-height: 1.7;
}

.sechead--center .sechead__lead {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   4. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 52px;
	padding: 0.9rem 1.75rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.btn--sm {
	min-height: 44px;
	padding: 0.5rem 1.25rem;
	font-size: 0.88rem;
}

.btn--block { width: 100%; }

.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn--green {
	background: linear-gradient(170deg, var(--gold-lt), var(--gold));
	border-color: transparent;
	color: var(--royal-ink);
	font-weight: 700;
	box-shadow: 0 12px 26px -16px rgba(208, 160, 48, 0.95);
}

.btn--green:hover {
	background: linear-gradient(170deg, #f0d484, var(--gold-lt));
	border-color: transparent;
	color: var(--royal-ink);
	transform: translateY(-2px);
}

.btn--gold {
	background: var(--gold);
	border-color: var(--gold);
	color: #2c2005;
}

.btn--gold:hover {
	background: var(--gold-2);
	border-color: var(--gold-2);
	transform: translateY(-2px);
}

.btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.btn--outline:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ink);
}

.btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}

.btn--ghost:hover {
	border-color: var(--green);
	color: var(--green);
}

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[disabled]:hover .icon { transform: none; }

.ctapair {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s4);
}

.ctapair--center { justify-content: center; margin-top: var(--s5); }

.link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	color: var(--green);
	transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link:hover { gap: 0.7rem; color: var(--green-dk); }
.link--gold { color: var(--gold-dk); }

/* Tick lists */
.ticks {
	display: grid;
	gap: 0.7rem;
	margin: var(--s3) 0 0;
	padding: 0;
	list-style: none;
}

.ticks li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.98rem;
}

.ticks .icon {
	flex: none;
	margin-top: 4px;
	padding: 3px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green-dk);
}

/* --------------------------------------------------------------------------
   5. Top bar + header
   -------------------------------------------------------------------------- */
.topbar {
	background: var(--royal);
	color: var(--on-dark-muted);
	font-size: 0.85rem;
}

.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2) var(--s4);
	min-height: 46px;
	padding-block: 0.35rem;
}

.topbar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.topbar__list li,
.topbar__note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.topbar .icon { color: var(--gold-2); flex: none; }
.topbar a { transition: color var(--dur) var(--ease); }
.topbar a:hover { color: var(--gold-2); }

.masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	transition: box-shadow var(--dur) var(--ease);
}

.masthead.is-stuck { box-shadow: 0 8px 26px -20px rgba(24, 6, 64, 0.6); }

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	min-height: var(--header-h);
}

.brand__link { display: flex; align-items: center; gap: 0.7rem; }

.brand__mark {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }

.brand__name {
	font-family: var(--font-display);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--royal);
}

.brand__sub {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 1.5vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__item > a {
	position: relative;
	display: block;
	padding: 0.5rem 0;
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: clamp(0.86rem, 0.95vw, 0.96rem);
	font-weight: 500;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.nav__item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.nav__item > a:hover,
.nav__item.current-menu-item > a,
.nav__item.current_page_item > a { color: var(--green); }

.nav__item > a:hover::after,
.nav__item.current-menu-item > a::after,
.nav__item.current_page_item > a::after { transform: scaleX(1); }

.masthead__actions { display: flex; align-items: center; gap: var(--s2); }

.navtoggle {
	display: none;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
}

.navtoggle__icon { display: flex; flex-direction: column; gap: 5px; width: 20px; }

.navtoggle__icon span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* --------------------------------------------------------------------------
   6. Mobile drawer
   -------------------------------------------------------------------------- */
.drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	width: min(340px, 88vw);
	height: 100dvh;
	padding: var(--s3);
	background: var(--white);
	box-shadow: -20px 0 50px -30px rgba(24, 6, 64, 0.6);
	overflow-y: auto;
	transform: translateX(101%);
	visibility: hidden;
	transition: transform 320ms var(--ease), visibility 0s linear 320ms;
}

.drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 320ms var(--ease), visibility 0s linear 0s;
}

.drawer__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: var(--s2);
	border-bottom: 1px solid var(--line);
}

.drawer__mark { width: 42px; height: 42px; border-radius: 50%; }

.drawer__name {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--royal);
}

.drawer__close {
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
	color: var(--ink);
}

.drawer__close:hover { background: var(--cream); }

.drawer__list { margin: 0; padding: 0; list-style: none; }

.drawer__list a {
	display: block;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--ink);
}

.drawer__list a:hover { color: var(--green); }

.drawer__contact {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: var(--s2) 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: 0.92rem;
}

.drawer__contact li { display: flex; align-items: center; gap: 0.5rem; }
.drawer__contact .icon { color: var(--green); flex: none; }

.drawer__scrim {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(24, 6, 64, 0.55);
}

/* --------------------------------------------------------------------------
   7. Hero slider
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	background: var(--ink);
	overflow: hidden;
}

.hero__stage {
	position: relative;
	display: grid;
	min-height: clamp(520px, 76vh, 760px);
}

.slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 800ms var(--ease);
	pointer-events: none;
}

.slide.is-active { opacity: 1; pointer-events: auto; }

.slide__bg { position: absolute; inset: 0; }

.slide__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The headline sits on the left, so the scrim has to be heavy there and
   almost clear on the right where the photograph should still read. */
.slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(95deg,
			rgba(16, 2, 48, 0.95) 0%,
			rgba(20, 3, 60, 0.88) 26%,
			rgba(24, 4, 70, 0.62) 52%,
			rgba(28, 4, 80, 0.26) 78%,
			rgba(28, 4, 80, 0.10) 100%),
		radial-gradient(130% 90% at 8% 100%, rgba(208, 160, 48, 0.20) 0%, transparent 60%);
}

.slide__inner {
	position: relative;
	z-index: 2;
	max-width: var(--maxw);
	padding-block: var(--band-y);
}

.slide__inner > * { max-width: 40ch; }

.slide__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--gold-lt);
}

/* One gold hairline, the width of a tanpura string. */
.slide__rule {
	display: block;
	flex: none;
	width: clamp(2rem, 5vw, 4rem);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold));
}

.slide__title {
	font-size: clamp(2.3rem, 5.8vw, 4.4rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 2px 26px rgba(12, 2, 36, 0.55);
	max-width: 15ch;
}

.slide__copy {
	margin-top: var(--s2);
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	color: var(--on-dark-muted);
}

.slide__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s4);
	max-width: none;
}

.slide.is-active .slide__eyebrow,
.slide.is-active .slide__title,
.slide.is-active .slide__copy,
.slide.is-active .slide__cta {
	animation: tansen-rise 700ms var(--ease) backwards;
}

.slide.is-active .slide__eyebrow { animation-delay: 120ms; }
.slide.is-active .slide__title   { animation-delay: 220ms; }
.slide.is-active .slide__copy    { animation-delay: 330ms; }
.slide.is-active .slide__cta     { animation-delay: 440ms; }

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

/* Controls — a single right-hand stack, so nothing can land on the headline
   or on the cards that overlap the base of the hero. */
.hero__controls {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	top: 50%;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	transform: translateY(-50%);
}

.sliderbtn {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	color: #fff;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sliderbtn:hover { background: var(--green); border-color: var(--green); }
.sliderbtn--prev .icon { transform: rotate(180deg); }

/* Dots sit under the arrows in the same right-hand stack. */
.hero__dots {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.35rem;
}

.dots { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.dot {
	width: 5px;
	height: 26px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	transition: background-color var(--dur) var(--ease), height var(--dur) var(--ease);
}

.dot.is-active { background: var(--gold-2); height: 46px; }

.sliderplay {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	color: #fff;
}

.sliderplay:hover { background: rgba(255, 255, 255, 0.16); }

/* Pause glyph by default; becomes a play triangle when paused. */
.sliderplay__icon {
	width: 10px;
	height: 11px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.sliderplay[aria-pressed="true"] .sliderplay__icon {
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left: 10px solid currentColor;
	margin-left: 3px;
}

/* --------------------------------------------------------------------------
   8. Hero cards
   -------------------------------------------------------------------------- */
.herocards {
	position: relative;
	z-index: 5;
	padding-block: var(--section-y);
	background: var(--husk-tint);
	overflow: hidden;
}

.herocards__inner { position: relative; z-index: 1; }

/* The punchline is the heading for this band, not a caption under it. */
.herocards__title {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	text-align: center;
	font-size: clamp(1.6rem, 3vw, 2.35rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--gold-deep);
}

.herocards__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Plain tan panels in graduated tones. No border, no shadow, nothing
   straddling the edge — the emblem lives inside the card. */
.hcard {
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.2vw, 1.9rem);
	text-align: center;
	border: 0;
	border-radius: var(--radius-lg);
	box-shadow: none;
}

.hcard:nth-child(1) { background: #e7dbc4; }
.hcard:nth-child(2) { background: #dbc9a6; }
.hcard:nth-child(3) { background: #efe6d4; }

/* Wreath with the pictogram sitting in its opening, as in the reference. */
.hcard__emblem {
	display: grid;
	place-items: center;
	width: clamp(60px, 7vw, 74px);
	aspect-ratio: 1;
	margin-bottom: 0.9rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 0 0 1px var(--gold);
	/* Gold, not indigo — the purple is reserved for grounds and headings. */
	color: var(--gold-deep);
}

.hcard__title {
	font-size: 1.08rem;
	color: var(--ink);
}

.hcard__copy {
	font-size: 0.93rem;
	line-height: 1.65;
	color: var(--text);
}

/* --------------------------------------------------------------------------
   9. Intro
   -------------------------------------------------------------------------- */
.intro { overflow: hidden; }

.intro__texture {
	position: absolute;
	right: -6%;
	bottom: 2%;
	width: min(760px, 56%);
	opacity: 0.5;
	pointer-events: none;
	mix-blend-mode: multiply;
}

.intro__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* The portrait group: big circle pushed right so the foliage reads on the
   left, small circle overlapping its lower-left, badge on its lower edge. */
.intro__media {
	position: relative;
	padding-bottom: 16%;
}

.intro__round {
	position: relative;
	z-index: 1;
	display: block;
	width: 86%;
	margin-left: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.intro__round2 {
	position: absolute;
	z-index: 3;
	left: 0;
	bottom: 0;
	width: 40%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 10px solid var(--white);
	box-shadow: 0 18px 40px -26px rgba(24, 6, 64, 0.5);
}

.intro__badge {
	position: absolute;
	z-index: 4;
	right: 2%;
	bottom: 5%;
	display: grid;
	place-items: center;
	gap: 0.1rem;
	width: clamp(104px, 22%, 132px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--gold);
	color: #2c2005;
	text-align: center;
	box-shadow: 0 18px 40px -22px rgba(24, 6, 64, 0.55);
}

.intro__badgenum {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1;
}

.intro__badgetext {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.intro__copy .sechead { margin-bottom: var(--s3); }
.intro__copy p + p { margin-top: var(--s2); }

.intro__lede {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--green-dk);
}

.intro__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3);
	margin-top: var(--s4);
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
}

.intro__call { display: flex; align-items: center; gap: 0.75rem; }

.intro__callicon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green-dk);
}

.intro__calllabel {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.intro__callnum {
	display: block;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   10. Cards / product range
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); margin: 0; padding: 0; list-style: none; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.card:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

.variety__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--green-tint); }

.variety__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.card:hover .variety__media img { transform: scale(1.05); }

.variety__kicker {
	position: absolute;
	top: var(--s2);
	left: var(--s2);
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--green);
	color: #fff;
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.variety__body { display: flex; flex-direction: column; flex: 1; gap: var(--s2); padding: var(--s3); }

.variety__name { font-size: 1.3rem; color: var(--ink); }

.variety__length {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	padding-bottom: var(--s2);
	border-bottom: 1px solid var(--line);
}

.variety__lengthnum {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--green);
}

.variety__lengthlabel { font-size: 0.72rem; color: var(--text-soft); }

.variety__copy { font-size: 0.95rem; }

.spec--inline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s1);
	margin: 0;
	padding: var(--s2);
	background: var(--green-tint);
	border-radius: var(--radius);
}

.spec__row { display: flex; flex-direction: column; gap: 0.1rem; }
.spec__row dt { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.spec__row dd { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.chip {
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.76rem;
	color: var(--text);
}

.variety__for {
	margin-top: auto;
	padding-top: var(--s2);
	border-top: 1px solid var(--line);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--green-dk);
}

/* --------------------------------------------------------------------------
   11. By the numbers — figures and marks over the crop
   -------------------------------------------------------------------------- */
.proof {
	position: relative;
	padding-block: var(--section-y);
	background: var(--husk-tint);
	overflow: hidden;
}

.proof__inner { position: relative; z-index: 1; }

.proof__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); text-align: center; }
.proof__head .eyebrow { justify-content: center; }
.proof__head .eyebrow__rule { background: linear-gradient(90deg, transparent, var(--gold)); }
.proof__head .eyebrow::after {
	content: "";
	display: block;
	flex: none;
	width: clamp(1.8rem, 4vw, 3.2rem);
	height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent);
}

.proof__title {
	max-width: 22ch;
	margin-inline: auto;
	font-size: clamp(1.7rem, 3.1vw, 2.5rem);
	color: var(--ink);
}

.proof__figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Graduated tan tones, as in the reference, so the row reads as a set rather
   than as four identical boxes. */
.figcard {
	display: grid;
	justify-items: center;
	gap: 0.1rem;
	padding: clamp(1.75rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.5rem);
	text-align: center;
	border-radius: var(--radius-lg);
}

.figcard--1 { background: #e7dbc4; }
.figcard--2 { background: #dbc9a6; }
.figcard--3 { background: #efe6d4; }
.figcard--4 { background: #e3d3b4; }

.figcard__emblem {
	display: grid;
	place-items: center;
	width: clamp(58px, 7vw, 76px);
	margin-bottom: 0.6rem;
	color: var(--gold-deep);
}

.wreath { display: block; width: 100%; height: auto; }

.figcard__num {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.figcard__label {
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--gold-deep);
}

.xstats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: var(--s3);
	margin: var(--s4) 0 0;
	padding: var(--s3) 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.xstat { display: grid; justify-items: start; gap: 0.15rem; }

.xstat__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.35rem;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green-dk);
}

.xstat__num {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--ink);
}

.xstat__label { font-size: 0.82rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   30. Countries
   -------------------------------------------------------------------------- */
.countries__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.cregion {
	padding: var(--s3);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cregion:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.cregion__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: var(--s2);
	margin-bottom: var(--s2);
	border-bottom: 1px solid var(--line);
	font-size: 1.05rem;
}

.cregion__name .icon { color: var(--green); flex: none; }

.cregion__count {
	margin-left: auto;
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding-inline: 0.4rem;
	border-radius: 999px;
	background: var(--green-soft);
	color: var(--green-dk);
	font-size: 0.76rem;
	font-weight: 700;
}

.cregion__list { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }

.cnation { display: grid; gap: 0.1rem; }

.cnation__name { font-weight: 600; color: var(--ink); font-size: 0.96rem; }

.cnation__port {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	color: var(--text-soft);
}

.cnation__port .icon { color: var(--gold-dk); flex: none; }

.countries__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--s4);
	text-align: center;
}

@media (max-width: 1080px) {
	.experience__inner { grid-template-columns: minmax(0, 1fr); }
	.experience__media { max-width: 560px; }
	.years { right: 0; }
}

/* --------------------------------------------------------------------------
   31. Capabilities — icon cards over the field
   -------------------------------------------------------------------------- */
.capabilities {
	position: relative;
	padding-block: var(--section-y);
	background:
		linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
		url("../img/band-field.webp") center / cover no-repeat;
}

.capabilities .sechead__lead { color: var(--ink); }

.capgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(0.85rem, 1.6vw, 1.35rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1rem, 1.8vw, 1.5rem) clamp(1.75rem, 2.6vw, 2.25rem);
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	text-align: center;
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.cap:hover { transform: translateY(-6px); background: #fff; }

.cap__icon {
	display: grid;
	place-items: center;
	width: clamp(58px, 7vw, 72px);
	aspect-ratio: 1;
	margin: 0 auto var(--s2);
	border-radius: 50%;
	background: var(--husk-tint);
	box-shadow: inset 0 0 0 1px var(--gold);
	color: var(--gold-deep);
}

.cap:hover .cap__icon {
	background: var(--green-dk);
	box-shadow: 0 0 0 10px rgba(74, 26, 168, 0.18);
}

.cap__title {
	font-size: 1.15rem;
	color: var(--green-dk);
}

.cap__copy {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--text);
}

@media (max-width: 640px) {
	.cap__icon { width: 68px; height: 68px; }
}

/* --------------------------------------------------------------------------
   32. Certification logos
   -------------------------------------------------------------------------- */
.certcard__logo {
	display: grid;
	place-items: center;
	flex: none;
	width: 62px;
	height: 62px;
	padding: 7px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.certcard__logo img { width: 100%; height: 100%; object-fit: contain; }

.certcard--member .certcard__name::after {
	content: "Member";
	margin-left: 0.45rem;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: var(--green-soft);
	color: var(--green-dk);
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Logos on the purple band sit on white chips so every mark reads. */
.proof__certlist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.proof__cert {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	padding: 9px;
	background: #fff;
	border-radius: var(--radius);
}

.proof__cert img { width: 100%; height: 100%; object-fit: contain; }

/* --------------------------------------------------------------------------
   33. Product dialog
   -------------------------------------------------------------------------- */
.pdialog {
	width: min(940px, 92vw);
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xl);
	background: var(--white);
	color: var(--text);
	overflow: hidden;
	box-shadow: 0 40px 90px -40px rgba(24, 6, 64, 0.6);
}

.pdialog::backdrop {
	background: rgba(14, 26, 18, 0.62);
	backdrop-filter: blur(3px);
}

.pdialog__inner { position: relative; }

.pdialog__scroll {
	max-height: 90vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pdialog__close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pdialog__close:hover { background: var(--green); color: #fff; }

.ppanel {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.ppanel[hidden] { display: none; }

.ppanel__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	align-self: start;
}

.ppanel__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.ppanel__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.5rem; }
.ppanel__copy { font-size: 0.98rem; }

.pspec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	margin: var(--s3) 0;
	padding: var(--s2);
	background: var(--green-tint);
	border-radius: var(--radius);
}

.pspec > div { display: grid; gap: 0.1rem; }

.pspec dt {
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.pspec dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--green-dk);
}

.ppanel__label {
	margin-bottom: 0.4rem;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.ppanel__for {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: var(--s2);
	font-size: 0.86rem;
	color: var(--green-dk);
}

.ppanel__for .icon {
	flex: none;
	margin-top: 3px;
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: var(--green-soft);
}

.pdialog__form {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid var(--line);
	background: var(--cream);
}

.pdialog__formtitle { font-size: 1.2rem; }
.pdialog__formnote { margin: 0.3rem 0 var(--s3); font-size: 0.92rem; }

.form--compact .field__input { min-height: 46px; }
.form--compact .field__textarea { min-height: 92px; }
.pdialog__form .field__input { background: #fff; }

@media (max-width: 780px) {
	.ppanel { grid-template-columns: minmax(0, 1fr); }
	.ppanel__media img { aspect-ratio: 16 / 10; }
	.pdialog { width: 94vw; }
}

/* --------------------------------------------------------------------------
   34. Background footage
   -------------------------------------------------------------------------- */
video.experience__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
	border-radius: var(--radius-xl);
	background: var(--green-tint);
}

.showreel__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   35. Section ornament
   -------------------------------------------------------------------------- */
.countries,
.markets { overflow: hidden; }

.countries__leaf,
.markets__leaf {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	opacity: 0.5;
}

.countries__leaf {
	left: -5%;
	bottom: -8%;
	width: clamp(150px, 18vw, 280px);
	transform: rotate(-16deg);
}

.markets__leaf {
	right: -4%;
	top: 4%;
	width: clamp(150px, 19vw, 300px);
	transform: rotate(10deg) scaleX(-1);
}

.countries > .wrap,
.markets > .wrap { position: relative; z-index: 1; }

@media (max-width: 860px) {
	.countries__leaf,
	.markets__leaf { opacity: 0.3; width: clamp(120px, 28vw, 190px); }
}

/* --------------------------------------------------------------------------
   36. Compact form — placeholders carry the field name
   -------------------------------------------------------------------------- */

/* The labels stay in the DOM so screen readers still announce each field;
   they are only hidden from sight so the form matches the column beside it. */
.form--tight .field__label {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.form--tight .form__grid { gap: 0.7rem; }
.form--tight .field { gap: 0.25rem; }
.form--tight .field__input { min-height: 50px; }
.form--tight .field__textarea { min-height: 96px; }

/* --------------------------------------------------------------------------
   37. Factory gallery
   -------------------------------------------------------------------------- */
.gallery.section--tint { background: var(--cream); }

/* Three across, two rows — six tiles land square with no orphan columns. */
.gallerygrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shot__btn {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-align: left;
	cursor: pointer;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.shot__btn:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.shot__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--green-tint);
}

.shot__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease);
}

.shot__media--contain {
	background: linear-gradient(150deg, var(--green-tint), var(--white));
}

.shot__media--contain img { object-fit: contain; padding: var(--s2); }

.shot__btn:hover .shot__media img { transform: scale(1.06); }

.shot__body {
	display: block;
	padding: var(--s2) var(--s3) var(--s3);
}

.shot__title {
	display: block;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ink);
}

.shot__copy {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.87rem;
	line-height: 1.5;
	color: var(--text-soft);
}

.shot__zoom {
	position: absolute;
	top: var(--s2);
	right: var(--s2);
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--green-dk);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.shot__btn:hover .shot__zoom,
.shot__btn:focus-visible .shot__zoom { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
	width: min(1000px, 92vw);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xl);
	background: var(--white);
	overflow: hidden;
	box-shadow: 0 40px 90px -40px rgba(24, 6, 64, 0.6);
}

.lightbox::backdrop {
	background: rgba(11, 24, 14, 0.78);
	backdrop-filter: blur(3px);
}

.lightbox__figure { margin: 0; }

.lightbox__figure img {
	display: block;
	width: 100%;
	max-height: 74vh;
	object-fit: contain;
	background: var(--ink);
}

.lightbox__cap { display: block; padding: var(--s3); }

.lightbox__title {
	display: block;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
}

.lightbox__copy { display: block; margin-top: 0.2rem; font-size: 0.92rem; color: var(--text); }

.lightbox__close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	box-shadow: var(--shadow);
}

.lightbox__close:hover { background: var(--green); color: #fff; }

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

@media (max-width: 560px) {
	.gallerygrid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   38. Sticky contact buttons
   -------------------------------------------------------------------------- */
.sticky {
	position: fixed;
	right: clamp(0.85rem, 2vw, 1.5rem);
	bottom: clamp(0.85rem, 2vw, 1.5rem);
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	/* Never sit under a phone's home indicator. */
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.sticky__btn {
	display: flex;
	align-items: center;
	gap: 0;
	height: 54px;
	padding: 0 15px;
	border-radius: 999px;
	color: #fff;
	box-shadow: 0 12px 28px -12px rgba(24, 6, 64, 0.55);
	transition: gap var(--dur) var(--ease), padding var(--dur) var(--ease),
		transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.sticky__btn .icon { flex: none; }

/* WhatsApp keeps its own green — people recognise it by colour, and a purple
   WhatsApp button reads as broken rather than as branded. */
.sticky__btn--wa { background: #25d366; color: #fff; }
.sticky__btn--wa:hover { background: #1eb857; }

.sticky__btn--call { background: var(--royal); color: #fff; }
.sticky__btn--call:hover { background: var(--royal-2); }

/* The label unfurls on hover so the resting state stays two clean circles. */
.sticky__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0;
	transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.sticky__btn:hover,
.sticky__btn:focus-visible {
	gap: 0.55rem;
	padding-right: 20px;
	transform: translateY(-2px);
}

.sticky__btn:hover .sticky__label,
.sticky__btn:focus-visible .sticky__label {
	max-width: 8rem;
	opacity: 1;
}

@media (max-width: 640px) {
	.sticky__btn { height: 50px; padding: 0 13px; }
	/* No hover on touch, so keep the labels out of the way entirely. */
	.sticky__label { display: none; }
}

@media print {
	.sticky { display: none; }
}

/* --------------------------------------------------------------------------
   39. Contact routes
   -------------------------------------------------------------------------- */
.routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.route {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(1.5rem, 2.4vw, 2rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.route:hover {
	transform: translateY(-5px);
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

.route__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 0.5rem;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green-dk);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.route:hover .route__icon { background: var(--green); color: #fff; }

.route__title { font-size: 1.1rem; }

.route__copy { font-size: 0.9rem; line-height: 1.55; color: var(--text-soft); }

.route__link {
	margin-top: auto;
	padding-top: 0.75rem;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--green);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.route__link:hover { color: var(--green-dk); }

.route__link--plain {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

/* --------------------------------------------------------------------------
   40. Single grade page
   -------------------------------------------------------------------------- */
.product__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.product__media {
	position: relative;
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.product__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.product__title {
	margin-bottom: 0.5rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.product__length {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.2rem 0.7rem;
	padding-bottom: var(--s2);
	margin-bottom: var(--s2);
	border-bottom: 1px solid var(--line);
}

.product__lengthnum {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--green);
}

.product__lengthlabel {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.product__copy { font-size: 1.03rem; }

.pspec--wide {
	grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
	margin: var(--s3) 0;
	padding: var(--s3);
}

.product__label {
	margin-bottom: 0.4rem;
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-soft);
}

@media (max-width: 900px) {
	.product__inner { grid-template-columns: minmax(0, 1fr); }
	.product__media img { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   41. Story, generations, why-us, infrastructure, certificates, blog
   -------------------------------------------------------------------------- */
.story__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.story__copy p + p { margin-top: var(--s2); }

.story__media { margin: 0; }

.story__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--radius-xl);
}

.story__cap {
	display: block;
	margin-top: var(--s2);
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-soft);
}

/* Generations */
/* The family timeline: a gold rule running behind the four moments, with the
   year sitting on it as a marker. Four unconnected boxes read as a card grid;
   a line through them reads as a history. */
.generations { position: relative; }

.genline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The rule, set at the centre of the year markers. */
@property --genline-scale {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

.genline::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 1.45rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
	transform: scaleX(var(--genline-scale, 1));
	transform-origin: left center;
}

/* Only hide it up front where the motion layer is actually running. */
.has-motion .genline { --genline-scale: 0; }

.gen {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	padding: 0;
	text-align: center;
	background: none;
	border: 0;
	box-shadow: none;
}

/* The year, as a marker sitting on the rule. */
.gen__year {
	display: grid;
	place-items: center;
	min-width: 5.4rem;
	height: 2.9rem;
	padding-inline: 1rem;
	margin-bottom: 0.9rem;
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--gold-lt);
	background: var(--royal);
	border-radius: 999px;
	/* No ring here: it would cut the connecting rule either side. */
}

.gen__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.gen__name {
	margin-top: 0.15rem;
	font-size: 1.04rem;
	line-height: 1.3;
	color: var(--ink);
}

.gen__copy {
	margin-top: 0.4rem;
	max-width: 30ch;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--text);
}

@media (max-width: 760px) {
	.genline::before { display: none; }
	.gen { padding-bottom: var(--s3); border-bottom: 1px solid var(--husk-2); }
	.gen:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   42. Pull quote
   Lost in the light redesign; both the About story and the heritage section
   depend on it.
   -------------------------------------------------------------------------- */
.pull {
	position: relative;
	margin: var(--s4) 0;
	padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.4vw, 2rem);
	background: var(--green-tint);
	border-left: 4px solid var(--green);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.pull p {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.02rem, 1.5vw, 1.18rem);
	font-weight: 600;
	line-height: 1.6;
	color: var(--green-dk);
}

/* On the dark enquiry/proof bands the tint would disappear. */
.enquiry .pull,
.proof .pull {
	background: rgba(255, 255, 255, 0.08);
	border-left-color: var(--gold-2);
}

.enquiry .pull p,
.proof .pull p { color: #fff; }

/* --------------------------------------------------------------------------
   43. Sub-products — the processing forms of a variety
   -------------------------------------------------------------------------- */
.subgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sub {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: clamp(1.5rem, 2.4vw, 2rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sub:hover {
	transform: translateY(-5px);
	border-color: rgba(74, 26, 168, 0.35);
	box-shadow: var(--shadow);
}

/* Three grains in the milled colour of that form — the thing a buyer is
   actually choosing between. */
.sub__swatch {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 46px;
	margin-bottom: 0.6rem;
}

.sub__grain {
	display: block;
	width: 11px;
	height: 34px;
	border-radius: 999px;
	background: var(--grain);
	box-shadow: inset 0 0 0 1px rgba(24, 6, 64, 0.14);
}

.sub__grain:nth-child(2) { height: 40px; }
.sub__grain:nth-child(3) { height: 30px; }

.sub__name { font-size: 1.08rem; }

.sub__note {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.sub__copy { margin-top: 0.2rem; font-size: 0.9rem; line-height: 1.6; color: var(--text-soft); }

.sub__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: var(--s2);
	font-family: var(--font-display);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--green);
	transition: gap var(--dur) var(--ease);
}

.sub__cta:hover { gap: 0.6rem; color: var(--green-dk); }

.subs__note {
	margin-top: var(--s4);
	text-align: center;
	font-size: 0.92rem;
	color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   44. Motion handoff
   When the Motion enhancement layer is active it animates [data-reveal]
   itself, so the CSS transition must not also run — otherwise the two fight
   and elements flash.
   -------------------------------------------------------------------------- */
.has-motion [data-reveal] {
	opacity: 0;
	transform: none;
	transition: none;
}

.has-motion [data-reveal].is-in {
	opacity: 1;
}

.has-motion .share__bar > span {
	transform: scaleX(0);
	transition: none;
}

/* --------------------------------------------------------------------------
   45. Neighbouring sections that share a background
   Where the boundary between two sections is invisible, their stacked
   padding reads as one oversized hole rather than as a separation. Drop the
   second one's top padding so the gap is a single section rhythm, not two.
   Sections carrying their own background are excluded — there the edge is
   visible and the breathing room is doing a job.
   -------------------------------------------------------------------------- */
.section:not(.section--tint):not(.enquiry) + .section:not(.section--tint):not(.enquiry),
.section--tint + .section--tint {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   46. Footer
   -------------------------------------------------------------------------- */
.footer__inner {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1fr);
}

/* A menu this long towers as one column and stretches the whole footer, so
   it runs in two. */
.footer__list--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--s2);
}

.footer__list { line-height: 1.45; }
.footer__list a { padding-block: 1px; }

.footer__products a {
	display: block;
	font-size: 0.9rem;
}

.footer__quote { margin-top: var(--s3); }

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

@media (max-width: 560px) {
	.footer__inner { grid-template-columns: minmax(0, 1fr); }
	/* One column is already narrow; splitting again would orphan words. */
	.footer__list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   47. Journal layout and sticky sidebar
   -------------------------------------------------------------------------- */
.bloglayout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.bloglayout__main { min-width: 0; }

/* The column itself is not sticky — it simply spans the article's full height.
   What sticks is the widget stack inside it, so the widgets ride alongside the
   post and stop cleanly at the end of it. No inner scrollbar, no clipping. */
.sidebar { align-self: stretch; }

.sidebar__inner { display: grid; gap: var(--s3); }

/* Sticky is an enhancement, switched on only where the stack genuinely fits
   under the header. Pin it on a shorter screen and the bottom of the contact
   card can never be scrolled to — which is the whole reason a sticky sidebar
   ends up feeling broken. */
@media (min-height: 860px) {
	.sidebar__inner {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
	}
}

.swidget {
	padding: 1.15rem var(--s3) 1.25rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.swidget__title {
	margin-bottom: 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line);
	font-size: 1.02rem;
}

.swidget__list { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }

.swidget__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.42rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ink);
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.swidget__list li:last-child a { border-bottom: 0; }

.swidget__list a:hover { color: var(--green); padding-left: 0.35rem; }
.swidget__list .icon { flex: none; color: var(--gold-dk); opacity: 0; transition: opacity var(--dur) var(--ease); }
.swidget__list a:hover .icon { opacity: 1; }

.swidget__all {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.8rem;
	font-family: var(--font-display);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--green);
	transition: gap var(--dur) var(--ease);
}

.swidget__all:hover { gap: 0.6rem; }

/* The contact card is the one that has to stop the eye. */
.swidget--contact {
	background: linear-gradient(160deg, var(--green-dk), var(--green));
	border-color: transparent;
	color: rgba(255, 255, 255, 0.85);
}

.swidget__title--onDark {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

.swidget__copy { font-size: 0.87rem; line-height: 1.55; }

.swidget__contact {
	display: grid;
	gap: 0.5rem;
	margin: 0.9rem 0 1.1rem;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.swidget__contact li,
.swidget__contact a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	overflow-wrap: anywhere;
}

.swidget__contact a:hover { color: var(--gold-2); }
.swidget__contact .icon { flex: none; color: var(--gold-2); }
.swidget__hours { color: rgba(255, 255, 255, 0.72); }

.swidget__posts { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }

.swidget__posts a {
	display: grid;
	gap: 0.15rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line);
}

.swidget__posts li:last-child a { border-bottom: 0; }

.swidget__postdate {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.swidget__posttitle {
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.swidget__posts a:hover .swidget__posttitle { color: var(--green); }

/* Beside a sidebar there is room for two cards, not three. */
.postgrid--narrow { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 1024px) {
	.bloglayout { grid-template-columns: minmax(0, 1fr); }

	/* Stacked underneath, sticky would just pin it to the page bottom. */
	.sidebar { align-self: auto; }

	.sidebar__inner {
		position: static;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}

/* --------------------------------------------------------------------------
   48. Related notes, inside the article column
   Horizontal media rows rather than a card grid — the column is only so wide,
   and a row gives the thumbnail, date, title and excerpt room to breathe.
   -------------------------------------------------------------------------- */
.related {
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 2px solid var(--line);
}

.related__eyebrow { margin-bottom: 0.15rem; }

.related__title {
	margin-bottom: var(--s3);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}

.related__list {
	display: grid;
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.relcard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.relcard:hover {
	border-color: var(--green-2);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.relcard__link {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	color: inherit;
}

.relcard__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--cream);
}

.relcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.relcard:hover .relcard__media img { transform: scale(1.06); }

.relcard__body {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding: 1.1rem 1.25rem 1.15rem;
}

.relcard__date {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.relcard__date .icon { flex: none; }

.relcard__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.relcard:hover .relcard__title { color: var(--green); }

.relcard__excerpt {
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--muted);
}

.relcard__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.2rem;
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--green);
	transition: gap var(--dur) var(--ease);
}

.relcard:hover .relcard__more { gap: 0.6rem; }

/* Below this the thumbnail column is too narrow to read as an image. */
@media (max-width: 620px) {
	.relcard__link { grid-template-columns: minmax(0, 1fr); }
	.relcard__media { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   49. The partnership behind the export company, and the two directors
   -------------------------------------------------------------------------- */
.partners__copy {
	max-width: 68ch;
	margin: 0 auto var(--s5);
	text-align: center;
}

.partners__copy p {
	margin-bottom: var(--s2);
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--muted);
}

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

.dirs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dir {
	padding: var(--s4) var(--s3) var(--s3);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.dir:hover {
	border-color: var(--green-2);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.dir__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--s2);
	border-radius: 50%;
	background: var(--cream);
	color: var(--green);
}

.dir__name {
	margin-bottom: 0.2rem;
	font-size: 1.2rem;
}

.dir__role {
	margin-bottom: 0.8rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.dir__copy {
	font-size: 0.94rem;
	line-height: 1.7;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   50. The three group companies
   -------------------------------------------------------------------------- */
.cos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: co;
}

.co {
	position: relative;
	padding: var(--s4) var(--s3) var(--s3);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	border-top: 3px solid var(--green);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.co:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.co__num {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--font-display);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	color: var(--line);
}

.co__name {
	margin-bottom: 0.2rem;
	font-size: 1.12rem;
	color: var(--green-dk);
}

.co__role {
	margin-bottom: 0.8rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.co__copy {
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   51. Recipes index
   -------------------------------------------------------------------------- */
.recipes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.recipe {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.recipe:hover {
	border-color: var(--green-2);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.recipe__link { display: grid; color: inherit; }

.recipe__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cream);
}

.recipe__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.recipe:hover .recipe__media img { transform: scale(1.06); }

.recipe__body {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding: var(--s3) var(--s3) 1.15rem;
}

.recipe__pair {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.recipe__name {
	font-family: var(--font-display);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.recipe:hover .recipe__name { color: var(--green); }

.recipe__copy {
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--muted);
}

.recipe__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.25rem;
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--green);
	transition: gap var(--dur) var(--ease);
}

.recipe:hover .recipe__more { gap: 0.6rem; }

/* ---- choose by cooking style ---- */
.styles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.style {
	padding: var(--s4) var(--s3) var(--s3);
	text-align: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.style__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--s2);
	border-radius: 50%;
	background: var(--cream);
	color: var(--green);
}

.style__name { margin-bottom: 0.5rem; font-size: 1.08rem; }

.style__copy { font-size: 0.92rem; line-height: 1.7; color: var(--muted); }

.styles__cta { margin-top: var(--s5); text-align: center; }

/* Nine nav items need the drawer sooner than seven did. */
@media (max-width: 1180px) {
	.nav { display: none; }
	.navtoggle { display: flex; }
}

/* Equal-height recipe cards, with the link parked at the bottom. */
.recipe__link { align-content: start; height: 100%; grid-template-rows: auto 1fr; }
.recipe__body { height: 100%; grid-template-rows: auto auto 1fr auto; }

/* The header CTA must never wrap — it is the widest fixed element up there. */
.masthead__cta { white-space: nowrap; }

@media (max-width: 1330px) {
	.masthead__cta { padding-inline: 1rem; font-size: 0.84rem; }
}

/* --------------------------------------------------------------------------
   52. Office and mill addresses
   -------------------------------------------------------------------------- */
.locs__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loc {
	padding: var(--s4) var(--s3) var(--s3);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	border-top: 3px solid var(--gold);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.loc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.loc__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.loc__name {
	margin-bottom: 0.55rem;
	font-size: 1.08rem;
	color: var(--green-dk);
}

.loc__addr {
	font-size: 0.94rem;
	font-style: normal;
	line-height: 1.7;
	color: var(--muted);
}

/* The inline jump to the full address list has to read as a link. */
.route__copy a {
	color: var(--green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--dur) var(--ease);
}

.route__copy a:hover { color: var(--green-dk); }

/* --------------------------------------------------------------------------
   53. 404 — not found
   -------------------------------------------------------------------------- */
.gone__search {
	display: flex;
	gap: 0.6rem;
	max-width: 640px;
	margin: 0 auto var(--s5);
}

.gone__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.85rem 1.1rem;
	font-family: var(--font-body);
	font-size: 0.98rem;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.gone__search input[type="search"]::placeholder { color: var(--muted); }

.gone__search input[type="search"]:focus {
	outline: none;
	border-color: var(--green-2);
	box-shadow: 0 0 0 3px rgba(88, 160, 58, 0.18);
}

.gone__search .btn { flex: none; }

.gone__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gonecard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gonecard:hover {
	border-color: var(--green-2);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.gonecard__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s2);
	padding: 1.15rem var(--s3);
	color: inherit;
}

.gonecard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--cream);
	color: var(--green);
}

.gonecard__body { display: grid; gap: 0.15rem; }

.gonecard__title {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.gonecard:hover .gonecard__title { color: var(--green); }

.gonecard__copy { font-size: 0.88rem; line-height: 1.55; color: var(--muted); }

.gonecard__link > .icon {
	flex: none;
	color: var(--green);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gonecard:hover .gonecard__link > .icon { opacity: 1; transform: none; }

/* ---- grade chips ---- */
.gone__grades {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gradechip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--green-dk);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.gradechip:hover {
	color: var(--white);
	background: var(--green);
	border-color: var(--green);
	gap: 0.65rem;
}

@media (max-width: 560px) {
	.gone__search { flex-direction: column; }
	.gone__search .btn { justify-content: center; }
}

/* Director headshots and their direct contact rows. */
.dir__photo {
	display: block;
	width: 5.5rem;
	height: 5.5rem;
	margin-bottom: var(--s2);
	border-radius: 50%;
	overflow: hidden;
	background: var(--cream);
	border: 3px solid var(--white);
	box-shadow: 0 0 0 1px var(--line);
}

.dir__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.dir__contact {
	display: grid;
	gap: 0.4rem;
	margin: var(--s2) 0 0;
	padding-top: var(--s2);
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: 0.9rem;
}

.dir__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--green-dk);
	font-weight: 500;
	overflow-wrap: anywhere;
	transition: color var(--dur) var(--ease);
}

.dir__contact a:hover { color: var(--green); }
.dir__contact .icon { flex: none; color: var(--gold-dk); }

/* --------------------------------------------------------------------------
   54. Brand ornament — the tanpura strings and the pack's arabesque corner
   -------------------------------------------------------------------------- */
.strings {
	display: block;
	width: 100%;
	height: clamp(28px, 4vw, 52px);
	color: var(--gold);
	overflow: visible;
}

.hero__strings {
	position: absolute;
	left: 0;
	right: 0;
	/* Clear of the buttons: the strings run under the whole composition, just
	   above the lip where the cards overlap the hero. */
	bottom: clamp(0.5rem, 2vw, 1.5rem);
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	animation: stringsIn 1.4s var(--ease) 0.5s forwards;
}

@keyframes stringsIn {
	from { opacity: 0; transform: translateX(-3%); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__strings { animation: none; opacity: 1; }
}

.corner {
	position: absolute;
	width: clamp(42px, 6vw, 74px);
	height: auto;
	color: var(--gold);
	opacity: 0.5;
	pointer-events: none;
}

.corner--tl { top: 1.1rem; left: 1.1rem; }
.corner--tr { top: 1.1rem; right: 1.1rem; transform: scaleX(-1); }
.corner--bl { bottom: 1.1rem; left: 1.1rem; transform: scaleY(-1); }
.corner--br { bottom: 1.1rem; right: 1.1rem; transform: scale(-1); }

/* Gold button, matching the pack rather than the agri-green. */
.btn--gold {
	background: linear-gradient(170deg, var(--gold-lt), var(--gold));
	color: var(--royal-ink);
	border: 0;
	font-weight: 700;
}

.btn--gold:hover {
	background: linear-gradient(170deg, #f0d484, var(--gold-lt));
	color: var(--royal-ink);
}

/* --------------------------------------------------------------------------
   55. Parallax bands
   The section clips a viewport-fixed image. clip-path makes the section the
   containing block for the fixed child, so the effect works on iOS where
   background-attachment: fixed does not.
   -------------------------------------------------------------------------- */
.plx {
	position: relative;
	clip-path: inset(0);
	display: grid;
	align-items: center;
	min-height: clamp(460px, 62vh, 680px);
	padding-block: var(--band-y);
	color: var(--on-dark);
	overflow: hidden;
}

.plx__bg {
	position: fixed;
	inset: 0;
	z-index: 0;
}

.plx__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plx::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.plx--royal::after {
	background:
		linear-gradient(100deg,
			rgba(14, 2, 42, 0.94) 0%,
			rgba(20, 3, 58, 0.86) 34%,
			rgba(26, 4, 74, 0.55) 64%,
			rgba(28, 4, 80, 0.22) 100%);
}

.plx--deep::after {
	background: linear-gradient(180deg, rgba(10, 1, 32, 0.80), rgba(14, 2, 44, 0.92));
}

.plx--right::after {
	background:
		linear-gradient(260deg,
			rgba(14, 2, 42, 0.94) 0%,
			rgba(20, 3, 58, 0.86) 34%,
			rgba(26, 4, 74, 0.55) 64%,
			rgba(28, 4, 80, 0.20) 100%);
}

.plx__inner {
	position: relative;
	z-index: 2;
	max-width: var(--maxw);
}

.plx--left .plx__inner > *  { max-width: 42ch; }
.plx--right .plx__inner     { text-align: right; }
.plx--right .plx__inner > * { max-width: 42ch; margin-left: auto; }
.plx--center .plx__inner    { text-align: center; }
.plx--center .plx__inner > * { max-width: 56ch; margin-inline: auto; }

.plx__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--gold-lt);
}

.plx--right .plx__eyebrow   { flex-direction: row-reverse; }
.plx--center .plx__eyebrow  { justify-content: center; }

.plx__rule {
	display: block;
	flex: none;
	width: clamp(2rem, 5vw, 4rem);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold));
}

.plx--right .plx__rule { background: linear-gradient(270deg, transparent, var(--gold)); }

.plx__title {
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 2px 26px rgba(10, 1, 32, 0.5);
}

.plx__copy {
	margin-top: var(--s2);
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.75;
	color: var(--on-dark-muted);
}

.plx__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3.25rem);
	margin: var(--s4) 0 0;
	padding: 0;
	list-style: none;
	max-width: none !important;
}

.plx--right .plx__stats  { justify-content: flex-end; }
.plx--center .plx__stats { justify-content: center; }

.plx__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1;
	color: var(--gold-lt);
}

.plx__lab {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	color: var(--on-dark-faint);
}

.plx__cta { margin-top: var(--s4); }

.plx__strings {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(0.5rem, 2vw, 1.4rem);
	z-index: 2;
	pointer-events: none;
}

/* The fixed background cannot be clipped correctly inside a scroll container
   on some small screens, so the band falls back to a normal cover image. */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
	.plx { clip-path: none; min-height: 0; }
	.plx__bg { position: absolute; }
}

/* --------------------------------------------------------------------------
   56. Introduction — editorial spread
   The photograph runs off the left edge of the viewport, the year sits in the
   margin, and a framed detail overlaps the gutter. Nothing here is a card.
   -------------------------------------------------------------------------- */
.legacy {
	position: relative;
	padding-block: var(--section-y);
	background: var(--white);
	overflow: hidden;
}

.legacy__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
	/* The same measure as every other section's .wrap, so the introduction
	   does not sit wider than the content above and below it. */
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: 0;
}

/* ---- media ---- */
.legacy__media {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: end;
	gap: clamp(5px, 0.8vw, 11px);
	height: clamp(380px, 44vw, 560px);
	padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}

/* Each panel is a window onto the same photograph. Shifting the background
   position by the panel's own share of the width makes the five strips
   reassemble into one continuous image. */
.slice {
	display: block;
	background-repeat: no-repeat;
	background-size: calc(500% + 4 * clamp(5px, 0.8vw, 11px)) 100%;
}

.slice--1 { height: 68%;  background-position:   0%   50%; border-radius: 999px 999px 0 0; }
.slice--2 { height: 88%;  background-position:  25%   50%; border-radius: 999px 999px 0 0; }
.slice--3 { height: 100%; background-position:  50%   50%; border-radius: 999px 999px 0 0; }
.slice--4 { height: 88%;  background-position:  75%   50%; border-radius: 999px 999px 0 0; }
.slice--5 { height: 68%;  background-position: 100%   50%; border-radius: 999px 999px 0 0; }

/* The outer pair curve at the foot too, which is what gives the group its
   petal silhouette rather than a row of tombstones. */
.slice--1,
.slice--5 { border-radius: 999px 999px 999px 999px / 40% 40% 22% 22%; }

/* The product shot sits in front, straddling the panels. */
.legacy__bowl {
	position: absolute;
	left: 50%;
	bottom: clamp(-1.5rem, -2vw, -2.5rem);
	width: clamp(170px, 38%, 300px);
	height: auto;
	transform: translateX(-50%);
	filter: drop-shadow(0 22px 26px rgba(24, 6, 64, 0.28));
}

.legacy__since {
	position: absolute;
	left: clamp(-0.5rem, -1vw, -1.5rem);
	top: clamp(0.5rem, 2vw, 1.5rem);
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin: 0;
	padding: 0.5rem 1rem 0.55rem;
	background: var(--royal);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.legacy__sinceyear {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--gold-lt);
}

.legacy__sincelabel {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.74);
}

/* ---- copy ---- */
.legacy__title {
	max-width: 19ch;
	margin-bottom: var(--s2);
	font-size: clamp(1.8rem, 3.3vw, 2.7rem);
}

.legacy__lede {
	max-width: 52ch;
	font-size: clamp(1.02rem, 1.3vw, 1.14rem);
	line-height: 1.7;
	color: var(--ink);
	font-weight: 500;
}

.legacy__body {
	max-width: 54ch;
	margin-top: var(--s2);
	line-height: 1.8;
	color: var(--text);
}

/* Two columns of short lines, each led by a gold rule — no tick icons, no
   bullet list that reads like a feature table. */
.legacy__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0.55rem clamp(1rem, 2.5vw, 2rem);
	margin: var(--s4) 0 0;
	padding: 0;
	list-style: none;
}

.legacy__points li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--ink);
}

.legacy__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 1rem;
	height: 1px;
	background: var(--gold);
}

.legacy__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
}

.legacy__call {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.legacy__call .icon { color: var(--gold-dk); }
.legacy__call:hover { color: var(--royal); }

@media (max-width: 920px) {
	.legacy__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(3.5rem, 9vw, 5rem); }
	.legacy__media { height: clamp(300px, 62vw, 420px); gap: 5px; }
	.legacy__bowl { width: clamp(150px, 42%, 230px); }
	.legacy__since { left: 0; top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   57. Tone-on-tone paddy field, behind light sections
   Drawn rather than placed as an image, so there is never a visible edge and
   it scales to any section height.
   -------------------------------------------------------------------------- */
.earfield {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.earfield img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Enough to read as texture, never enough to fight the type. */
	opacity: 0.42;
}

/* A wash that strengthens toward the middle of the band, where the copy sits,
   and thins at the edges so the drawing still shows. */
.earfield::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		120% 90% at 50% 50%,
		rgba(255, 255, 255, 0.72) 0%,
		rgba(255, 255, 255, 0.38) 55%,
		rgba(255, 255, 255, 0) 100%);
}

/* Anything sitting on the field has to clear it. */
.has-earfield { position: relative; }
.has-earfield > .wrap,
.has-earfield > .legacy__inner { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   58. Ornamental ear frieze
   A seamless SVG pattern, so it tiles at any width and stays crisp at any
   size. Used as a divider between sections and as a gold rule on dark bands.
   -------------------------------------------------------------------------- */
.frieze {
	display: block;
	width: 100%;
	height: clamp(44px, 5vw, 72px);
	color: var(--gold);
}

/* A standalone divider strip between two sections. */
.friezeband {
	position: relative;
	padding-block: clamp(0.75rem, 1.6vw, 1.4rem);
	background: var(--husk-tint);
	border-block: 1px solid var(--husk-2);
	overflow: hidden;
}

.friezeband--dark {
	background: var(--royal-3);
	border-block-color: rgba(208, 160, 48, 0.28);
}

.friezeband--dark .frieze { color: var(--gold); opacity: 0.85; }

/* Masked so the band fades out at both ends instead of being cut off. */
.friezeband .frieze {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}


/* --------------------------------------------------------------------------
   59. Cleanup pass — one card recipe, one rhythm
   The page had four card treatments and nine background variations. These
   rules collapse them so the eye reads a single system.
   -------------------------------------------------------------------------- */
.variety,
.step,
.galcard,
.certcard,
.relcard,
.recipe,
.gonecard,
.loc,
.co,
.dir {
	border-radius: var(--radius-lg);
	box-shadow: none;
	border: 1px solid var(--line);
	background: var(--white);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.variety:hover,
.step:hover,
.galcard:hover,
.relcard:hover,
.recipe:hover,
.gonecard:hover,
.loc:hover,
.co:hover,
.dir:hover {
	transform: none;
	border-color: var(--gold);
	box-shadow: var(--shadow);
}

/* Consistent vertical rhythm. Sections were ranging from 3rem to 9rem. */
.section,
.legacy { padding-block: var(--section-y); }

/* Section heads were drifting apart from their content. */
.sechead { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }


/* --------------------------------------------------------------------------
   60. Brand punchline
   -------------------------------------------------------------------------- */
.punchline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.25rem);
	margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2.8vw, 2.1rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--gold-dk);
	text-align: center;
}

/* A gold rule either side, so the line reads as a mark rather than a caption. */
.punchline::before,
.punchline::after {
	content: "";
	flex: 0 1 clamp(2rem, 12vw, 9rem);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold));
}

.punchline::after { background: linear-gradient(270deg, transparent, var(--gold)); }

/* --------------------------------------------------------------------------
   61. Why us — leaf collage beside the reasons
   -------------------------------------------------------------------------- */
.whyus__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* ---- the collage ---- */
.collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.7rem, 1.4vw, 1.1rem);
}

.leafshot {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--gold);
	box-shadow: var(--shadow);
	aspect-ratio: 4 / 3;
}

.leafshot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease);
}

.leafshot:hover img { transform: scale(1.05); }

/* The leaf: two opposite corners rounded hard, the other two square. The four
   alternate so the group reads as petals turning around a centre. */
.leafshot--1 { border-radius: clamp(2.5rem, 5vw, 4.5rem) 6px clamp(2.5rem, 5vw, 4.5rem) 6px; }
.leafshot--2 { border-radius: 6px clamp(2.5rem, 5vw, 4.5rem) 6px clamp(2.5rem, 5vw, 4.5rem); }
.leafshot--3 { border-radius: 6px clamp(2.5rem, 5vw, 4.5rem) 6px clamp(2.5rem, 5vw, 4.5rem); }
.leafshot--4 { border-radius: clamp(2.5rem, 5vw, 4.5rem) 6px clamp(2.5rem, 5vw, 4.5rem) 6px; }

/* A slight stagger, so it is a composition rather than a 2x2 table. */
.leafshot--1 { margin-top: clamp(1rem, 2.5vw, 2.25rem); }
.leafshot--4 { margin-top: clamp(-1rem, -2.5vw, -2.25rem); }

/* ---- the reasons ---- */
.whyus__title {
	max-width: 20ch;
	margin-bottom: var(--s2);
	font-size: clamp(1.7rem, 3.1vw, 2.5rem);
}

.whyus__lead {
	max-width: 54ch;
	line-height: 1.8;
	color: var(--text);
}

.reasons {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: var(--s4) 0 0;
	padding: 0;
	list-style: none;
}

.reason {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--s2);
}

.reason__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--husk-tint);
	color: var(--royal);
}

.reason__body { display: grid; gap: 0.15rem; }

.reason__title {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--ink);
}

.reason__copy {
	font-size: 0.93rem;
	line-height: 1.65;
	color: var(--text);
}

@media (max-width: 960px) {
	.whyus__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 3.5rem); }
	.leafshot--1, .leafshot--4 { margin-top: 0; }
}

/* ==========================================================================
   REBUILT SECTIONS
   A slice taken while reworking the figures band removed eighteen blocks of
   stylesheet. These replace them, written in the current palette rather than
   restored from the older green-era rules.
   ========================================================================== */

/* --- accessibility and WordPress basics ------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--royal);
	color: #fff;
	border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus { left: 0; }

.site, .site-main { position: relative; }
.section--paper { background: var(--white); }
.lede { font-size: 1.08rem; line-height: 1.75; color: var(--text); }
.plants { display: block; width: 100%; height: auto; overflow: visible; }
.grainmark { display: block; width: 100%; height: auto; }

/* --- 12. Page hero ----------------------------------------------------- */
.phero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(260px, 34vw, 420px);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--royal-3);
	color: var(--on-dark);
	overflow: hidden;
}

.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }

.phero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(14,2,42,.94) 0%, rgba(20,3,58,.86) 40%, rgba(28,4,80,.44) 100%);
}

.phero__inner { position: relative; z-index: 2; }

.phero__title {
	max-width: 20ch;
	font-size: clamp(1.9rem, 4.6vw, 3.2rem);
	color: #fff;
}

.phero__lead {
	max-width: 58ch;
	margin-top: var(--s2);
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.75;
	color: var(--on-dark-muted);
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
	font-size: 0.82rem;
	color: var(--on-dark-faint);
}

.crumbs a { color: var(--gold-lt); }
.crumbs a:hover { color: #fff; }

/* --- 13. Variety cards ------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.variety { display: flex; flex-direction: column; overflow: hidden; }

.variety__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--husk-tint); }
.variety__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.variety:hover .variety__media img { transform: scale(1.05); }

.variety__kicker {
	position: absolute;
	left: 0.9rem;
	top: 0.9rem;
	padding: 0.3rem 0.7rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--royal-ink);
	background: var(--gold);
	border-radius: 999px;
}

.variety__body { display: flex; flex-direction: column; flex: 1; gap: 0.7rem; padding: var(--s3); }
.variety__name { font-size: 1.22rem; color: var(--royal); }

.variety__length { display: flex; align-items: baseline; gap: 0.45rem; margin: 0; }
.variety__lengthnum { font-family: var(--font-display); font-weight: 700; color: var(--gold-deep); }
.variety__lengthlabel { font-size: 0.72rem; color: var(--text-soft); }

.variety__copy { font-size: 0.94rem; line-height: 1.65; color: var(--text); }

.variety__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.4rem; }

/* --- 14. Process steps -------------------------------------------------- */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0; padding: 0; list-style: none;
}

.step { display: flex; flex-direction: column; overflow: hidden; }
.step__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--husk-tint); }
.step__media img { width: 100%; height: 100%; object-fit: cover; }
.step__media--contain { background: linear-gradient(150deg, var(--husk-tint), var(--white)); }
.step__media--contain img { object-fit: contain; padding: var(--s2); }

.step__body { position: relative; flex: 1; padding: var(--s3); }

.step__n {
	display: inline-grid;
	place-items: center;
	width: 2rem; height: 2rem;
	margin-bottom: 0.6rem;
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--royal-ink);
	background: var(--gold);
	border-radius: 50%;
}

.step__title { font-size: 1.12rem; color: var(--ink); }
.step__copy { margin-top: 0.5rem; font-size: 0.93rem; line-height: 1.65; color: var(--text); }
.step__spec { margin-top: 0.6rem; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-deep); }

/* --- 15. Markets and flags ---------------------------------------------- */
.markets { position: relative; overflow: hidden; }
.markets__leaf { position: absolute; right: -4%; top: 6%; width: min(300px, 24%); opacity: .5; pointer-events: none; }
.markets__top {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.markets__top .sechead { margin-bottom: 0; }
.markets__media { margin: 0; }
.markets__media img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.markets__cap { margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-soft); }

.flaggrid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.1rem);
	margin: 0; padding: 0; list-style: none;
}

.flagcard {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.2rem 0.65rem;
	padding: 0.7rem 0.9rem;
	text-align: left;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease);
}

/* Flag and name share the first row; the port runs underneath both. */
.flagcard__flag { grid-column: 1; grid-row: 1; }
.flagcard__name { grid-column: 2; grid-row: 1; }
.flagcard__port { grid-column: 1 / -1; grid-row: 2; }

.flagcard:hover { border-color: var(--gold); }

.flagcard__flag { display: block; width: 34px; line-height: 0; }
.flagcard__flag img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(24,6,64,.12); }
.flagcard__name {
	font-family: var(--font-display);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
	text-wrap: balance;
}

.flagcard__port {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.73rem;
	color: var(--text-soft);
}

.flagcard__port .icon { flex: none; }

.markets__note { margin-top: var(--s4); font-size: 0.95rem; color: var(--text); }

/* --- 16. FAQ ------------------------------------------------------------ */
.faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	/* Stretch, so the photograph column matches the accordion's height and
	   there is no void left under a short image. */
	align-items: stretch;
}

.faq__head {
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;
}

.faq__media {
	position: relative;
	margin: var(--s3) 0 0;
	min-height: 280px;
	overflow: hidden;
	border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}

.faq__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The prompt sits on the photograph, over a scrim dark enough to read on. */
.faq__help {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 0.4rem;
	padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.5rem);
	background: linear-gradient(180deg, rgba(12, 2, 36, 0) 0%, rgba(12, 2, 36, 0.78) 48%, rgba(12, 2, 36, 0.92) 100%);
	color: #fff;
}

.faq__helptitle {
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.faq__helpnum {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.faq__helpnum:hover { gap: 0.75rem; }

.faq__helpnum .icon { color: var(--gold-lt); }
.faq__helpnum:hover { color: var(--gold-lt); }

.faq__list { counter-reset: qa; }

.qa {
	position: relative;
	border: 1px solid var(--husk-2);
	border-radius: var(--radius-lg);
	background: var(--white);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.qa:hover { border-color: var(--gold); }

.qa[open] {
	border-color: var(--gold);
	box-shadow: var(--shadow);
}

/* A gold spine down the open question. */
.qa[open]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--gold-lt), var(--gold));
}

.qa__q {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	padding: 1.05rem clamp(1rem, 2vw, 1.5rem);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
}

/* The question number, set as a counter so the markup stays clean. */
.qa__q::before {
	counter-increment: qa;
	content: counter(qa, decimal-leading-zero);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--gold-dk);
}

.qa[open] .qa__q::before { color: var(--gold); }

.qa__a {
	padding: 0 clamp(1rem, 2vw, 1.5rem) var(--s3) calc(clamp(1rem, 2vw, 1.5rem) + 1.9rem);
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--text);
}

/* ==========================================================================
   RESTORED BLOCK
   A second over-wide slice removed everything between the FAQ and the footer.
   This replaces it in final form — the light enquiry, the light footer, the
   icon base, the arch shot and the showreel knockout all as they stood.
   ========================================================================== */

/* --- icon base ------------------------------------------------------------ */
.icon {
	display: inline-block;
	flex: none;
	vertical-align: -0.14em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- enquiry band (light) ------------------------------------------------- */
.enquiry {
	position: relative;
	background: var(--husk-tint);
	color: var(--text);
	overflow: hidden;
}

.enquiry__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.enquiry__aside { position: relative; z-index: 1; }
.enquiry .sechead__title { color: var(--royal); }
.enquiry .sechead__lead { color: var(--text); }
.enquiry .eyebrow { color: var(--gold-deep); }

.enquiry__points {
	display: grid;
	gap: 0.65rem;
	margin: var(--s3) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.94rem;
	color: var(--text);
}

.enquiry__points li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.6rem;
}

.enquiry__points .icon { margin-top: 0.1em; color: var(--gold-dk); }

.enquiry__direct {
	margin-top: var(--s4);
	padding-top: var(--s3);
	border-top: 1px solid var(--husk-2);
}

.enquiry__directlabel {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.enquiry__formwrap {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--white);
	border: 1px solid var(--husk-2);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

/* --- form ----------------------------------------------------------------- */
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.field { display: grid; gap: 0.35rem; grid-column: 1 / -1; }
.field--half { grid-column: span 1; }
.field__label { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.req { color: var(--gold-dk); }

.field__input, .field__select, .field__textarea {
	width: 100%;
	padding: 0.72rem 0.9rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--husk-tint);
	border: 1px solid var(--husk-2);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field__textarea { min-height: 110px; resize: vertical; }
.field__input::placeholder, .field__textarea::placeholder { color: var(--text-soft); }

.field__input:focus, .field__select:focus, .field__textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(208, 160, 48, 0.22);
}

.field__err { font-size: 0.78rem; color: #b3261e; }
.hp { position: absolute !important; left: -9999px; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.form__note { font-size: 0.8rem; color: var(--text-soft); }
.form__alert { margin-top: var(--s2); padding: 0.7rem 0.9rem; border-radius: var(--radius); font-size: 0.9rem; }
.form__alert[data-state="ok"] { background: rgba(208, 160, 48, 0.18); color: var(--gold-deep); }
.form__alert[data-state="err"] { background: rgba(179, 38, 30, 0.1); color: #b3261e; }

/* --- showreel: the knockout plate ----------------------------------------- */
.showreel { position: relative; padding-block: var(--section-y); background: var(--white); overflow: hidden; }

.showreel__stage { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.showreel__media { position: absolute; inset: 0; z-index: 0; }
.showreel__video, .showreel__still { width: 100%; height: 100%; object-fit: cover; }

/* White stays white; the dark letters drop out to reveal the footage. */
.showreel__plate {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	min-height: clamp(180px, 22vw, 300px);
	padding-block: clamp(0.9rem, 1.8vw, 1.5rem);
	background: #fff;
	mix-blend-mode: screen;
}

.showreel__title {
	margin: 0;
	text-align: center;
	font-size: clamp(2.1rem, 8.6vw, 6.6rem);
	font-weight: 800;
	line-height: 0.96;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	color: #000;
}

.showreel__title span { display: block; }

@supports not (mix-blend-mode: screen) {
	.showreel__plate { background: rgba(10, 2, 30, 0.55); }
	.showreel__title { color: #fff; }
}

.showreel__foot {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}

.showreel__lead { align-self: start; }
.showreel__body { font-size: 0.98rem; line-height: 1.8; color: var(--text); }

.showreel__sub {
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
	max-width: 18ch;
}

/* --- heritage ------------------------------------------------------------- */
.heritage { position: relative; overflow: hidden; }
.heritage__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.heritage__media { margin: 0; }
.heritage__media img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.heritage__cap { margin-top: 0.6rem; color: var(--text-soft); }
.heritage__copy { font-size: 1rem; line-height: 1.8; color: var(--text); }

/* --- packaging ------------------------------------------------------------ */
.packaging__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.packaging__media { position: relative; margin: 0; }
.packaging__pack { width: 100%; height: auto; }
.packaging__sacks { position: absolute; right: 0; bottom: 0; width: 44%; height: auto; border-radius: var(--radius-lg); }
.packaging__copy { font-size: 1rem; line-height: 1.8; color: var(--text); }

.packlist { display: grid; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.packitem { padding: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.packitem__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.packitem__copy { margin-top: 0.3rem; font-size: 0.93rem; line-height: 1.65; color: var(--text); }
.packitem__spec { margin-top: 0.5rem; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-deep); }

/* --- logistics and documents ---------------------------------------------- */
.logistics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.logistics__loads, .logistics__docs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.logistics__note { margin-top: var(--s3); font-size: 0.9rem; color: var(--text-soft); }

.docitem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: start; }
.docitem__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--husk-tint); color: var(--gold-deep); }
.docitem__title { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.docitem__copy { font-size: 0.9rem; line-height: 1.6; color: var(--text); }

/* --- specification tables -------------------------------------------------- */
.spec-section__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.spec-section__head { max-width: 60ch; }
.spec-section__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.spec-section__table th, .spec-section__table td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
.spec-section__table th { font-family: var(--font-display); color: var(--royal); }
.spectable--light th, .spectable--light td { border-color: var(--line); }
.spec-section__certs { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --- experience, and the years figure -------------------------------------- */
.experience__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.experience__media { position: relative; margin: 0; }
.experience__photo { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.experience__copy { font-size: 1rem; line-height: 1.8; color: var(--text); }

.years {
	position: absolute;
	right: clamp(-2rem, -3vw, -3.5rem);
	bottom: clamp(-1.5rem, -3vw, -2.5rem);
	display: grid;
	justify-items: center;
	padding: 1rem 1.4rem 1.1rem;
	background: var(--husk-tint);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	text-align: center;
}

.years__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(3.6rem, 8vw, 6.4rem);
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.055em;
	color: var(--royal);
	background-image: url("../img/harvest-lg.webp");
	background-size: cover;
	background-position: 50% 62%;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.years__num {
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-stroke: 1px rgba(40, 10, 90, 0.18);
	}
}

.years__label {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--royal);
}

/* --- certifications under the figures -------------------------------------- */
.proof__certs { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

.proof__certslabel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--s2);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.proof__certlist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- process cards: the Read more toggle ----------------------------------- */
.cap__more { margin-top: 0.7rem; }

.cap__more summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--gold-dk);
	transition: color var(--dur) var(--ease);
}

.cap__more summary::-webkit-details-marker { display: none; }
.cap__more summary:hover { color: var(--royal); }
.cap__more summary .icon { transition: transform var(--dur) var(--ease); }
.cap__more[open] summary .icon { transform: rotate(180deg); }

.cap__moreshut { display: none; }
.cap__more[open] .cap__moreopen { display: none; }
.cap__more[open] .cap__moreshut { display: inline; }

.cap__more p { margin-top: 0.55rem; font-size: 0.89rem; line-height: 1.65; color: var(--text); text-align: left; }

/* --- arch-framed photograph with a seal ------------------------------------ */
.archshot { position: relative; margin: 0; padding: 0; }

.archshot__frame {
	position: relative;
	display: block;
	aspect-ratio: 5 / 4;
	max-height: 520px;
	overflow: hidden;
	border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}

.archshot__frame img { width: 100%; height: 100%; object-fit: cover; }

.archshot__frame::after {
	content: "";
	position: absolute;
	inset: clamp(-0.55rem, -0.9vw, -0.85rem);
	border: 1px solid var(--gold);
	border-radius: inherit;
	opacity: 0.75;
	pointer-events: none;
}



.archshot .markets__cap { display: flex; align-items: center; gap: 0.4rem; margin-top: var(--s3); }

/* --- blog and widget basics ------------------------------------------------ */
.entry-header { margin-bottom: var(--s3); }
.entry-title { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--ink); }
.entry-title a { color: inherit; }
.entry-title a:hover { color: var(--gold-dk); }
.entry-meta, .entry-footer { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; color: var(--text-soft); }
.entry-meta a, .entry-footer a { color: var(--gold-dk); }
.entry-content > * + * { margin-top: var(--s2); }
.entry-summary { color: var(--text); }
.entry-date, .posted-on, .byline, .cat-links, .tags-links, .edit-link { display: inline-flex; align-items: center; gap: 0.3rem; }
.post-thumbnail { display: block; margin-bottom: var(--s3); }
.post-thumbnail img { width: 100%; height: auto; border-radius: var(--radius-lg); }

.page-header { margin-bottom: var(--s4); }
.page-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: var(--ink); }
.page-content > * + * { margin-top: var(--s2); }
.page-links { display: flex; gap: 0.5rem; margin-top: var(--s3); font-size: 0.9rem; }

.no-results, .not-found { max-width: 60ch; }

.widget-area { display: grid; gap: var(--s3); }
.widget { padding: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.widget-title { margin-bottom: var(--s2); font-size: 1rem; color: var(--ink); }
.widget ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: 0.92rem; }
.vcard, .fn, .url, .published, .updated { font-style: normal; }

/* --- odds and ends --------------------------------------------------------- */
.contactcards { position: relative; }
.certcard__desc { font-size: 0.86rem; line-height: 1.6; color: var(--text); }
.legacy__copy { position: relative; z-index: 1; }
.whyus__copy { position: relative; z-index: 1; }
.swidget--rice { background: var(--white); }
.eyebrow--onDark { color: var(--gold-lt); }
.sliderbtn--next .icon { transform: none; }
.ppanel__body { padding: var(--s3); }
.product__body { padding: var(--s3); }
.topbar__ports { display: inline-flex; align-items: center; gap: 0.4rem; }
.varieties { position: relative; }

/* --- footer (light, with the engraved panorama) ---------------------------- */
.footer {
	position: relative;
	background: var(--husk-tint);
	color: var(--text);
	overflow: hidden;
}

.footer__horizon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	height: auto;
	background-image: url("../img/bg/footer-scene.webp");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	opacity: 0.85;
	pointer-events: none;
}

/* One even wash across the whole panorama, so the drawing sits at the same
   strength behind every column rather than surging at the foot. */
.footer__horizon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(244, 239, 225, 0.82);
}

.footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: var(--section-y);
}

.footer__brand { display: grid; gap: var(--s2); align-content: start; }
.footer__mark { width: 64px; height: auto; }
.footer__blurb { font-size: 0.92rem; line-height: 1.7; color: var(--text); }
.footer__ports { font-size: 0.74rem; color: var(--text-soft); }

.footer__h {
	margin-bottom: var(--s2);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.footer__list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
.footer__list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem var(--s2); }
.footer__list li { display: flex; align-items: flex-start; gap: 0.45rem; }
.footer__list a { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--ink); overflow-wrap: anywhere; transition: color var(--dur) var(--ease); }
.footer__list a:hover { color: var(--royal); }
.footer__list .icon { margin-top: 0.18em; color: var(--gold-dk); }
.footer__list a .icon { margin-top: 0; }
.footer__nav .footer__list li, .footer__products .footer__list li { gap: 0; }

.footer__addr { display: flex; align-items: start; gap: 0.4rem; }
.footer__addr span { display: block; line-height: 1.55; text-wrap: pretty; }
.footer__hs { font-size: 0.74rem; color: var(--text-soft); }
.footer__quote { margin-top: var(--s2); }
.footer__nav, .footer__contact, .footer__products { display: grid; align-content: start; }

.footer__base {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s2);
	padding-block: var(--s3);
	border-top: 1px solid var(--husk-2);
	font-size: 0.78rem;
	color: var(--text);
}



/* --- responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
	.faq__inner,
	.enquiry__inner,
	.heritage__inner,
	.packaging__inner,
	.showreel__foot,
	.experience__inner,
	.markets__top { grid-template-columns: minmax(0, 1fr); }

	.archshot { padding-right: 0; max-width: 420px; }
	.footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.form__grid { grid-template-columns: minmax(0, 1fr); }
	.field--half { grid-column: 1 / -1; }
	.footer__inner { grid-template-columns: minmax(0, 1fr); }
	.years { right: 0; bottom: -1rem; }
}

/* --- blog cards, infrastructure units and certificate tiles ----------------
   These three blocks were lost in the first over-wide slice and went unnoticed
   because they live on the blog, infrastructure and certificates pages, which
   were never screenshotted. -------------------------------------------------- */

/* Blog cards */
.postgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.postcard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.postcard:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-3px); }

.postcard__link { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; }

.postcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--husk-tint); }
.postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.postcard:hover .postcard__media img { transform: scale(1.05); }

.postcard__body { display: grid; align-content: start; gap: 0.4rem; padding: var(--s3); }

.postcard__date {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.postcard__title {
	font-family: var(--font-display);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.postcard:hover .postcard__title { color: var(--royal); }

.postcard__excerpt { font-size: 0.9rem; line-height: 1.65; color: var(--text); }

.postcard__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.25rem;
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--gold-dk);
	transition: gap var(--dur) var(--ease);
}

.postcard:hover .postcard__more { gap: 0.6rem; }

.postempty { max-width: 56ch; color: var(--text); }

/* Infrastructure units — the two plants */
.units {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.unit {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.unit:hover { border-color: var(--gold); box-shadow: var(--shadow); }

.unit__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--husk-tint); }
.unit__media img { width: 100%; height: 100%; object-fit: cover; }

.unit__body { display: grid; align-content: start; gap: 0.3rem; padding: var(--s3); }

.unit__since {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-dk);
}

.unit__name { font-size: 1.15rem; color: var(--ink); }
.unit__place { font-size: 0.82rem; color: var(--text-soft); }
.unit__copy { margin-top: 0.4rem; font-size: 0.93rem; line-height: 1.65; color: var(--text); }

.infra__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--s2);
	margin: var(--s4) 0 0;
	padding: 0;
	list-style: none;
}

/* Certificate tiles */
.certgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.certtile {
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	padding: var(--s4) var(--s3) var(--s3);
	text-align: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.certtile:hover { border-color: var(--gold); box-shadow: var(--shadow); }

/* Memberships read a shade quieter than certifications. */
.certtile--member { background: var(--husk-tint); }

.certtile__logo {
	display: grid;
	place-items: center;
	width: clamp(64px, 8vw, 86px);
	aspect-ratio: 1;
	margin-bottom: 0.4rem;
}

.certtile__logo img { width: 100%; height: 100%; object-fit: contain; }

.certtile__name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); }
.certtile__desc { font-size: 0.88rem; line-height: 1.6; color: var(--text); }

.certwall__note { margin-top: var(--s4); font-size: 0.9rem; color: var(--text-soft); }

/* WordPress admin tables, carried by the base theme. */
.widefat, .striped { width: 100%; border-collapse: collapse; }

/* --------------------------------------------------------------------------
   35. FAQ — the heading and the contact prompt live on the photograph
   One tall panel beside the accordion, stretched to the same height, so the
   two columns finish level and no gap is left under either.
   -------------------------------------------------------------------------- */
.faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: stretch;
}

.faq__panel {
	position: relative;
	margin: 0;
	min-height: 440px;
	overflow: hidden;
	border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow);
	/* Stands in for the photograph until it loads, so the panel is never an
	   empty gradient over the page colour. */
	background: linear-gradient(180deg, var(--royal-2), var(--royal-ink));
}

/* A gold hairline just inside the arch, the same device as the export shot. */
.faq__panel::after {
	content: "";
	position: absolute;
	inset: 7px;
	z-index: 2;
	border: 1px solid rgba(232, 199, 106, 0.55);
	border-radius: inherit;
	pointer-events: none;
}

.faq__panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dark at both ends, clear through the middle, so the photograph still reads
   while the type at top and bottom stays legible. */
.faq__panelbody {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: end;
	gap: 0.6rem;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
	/* Weighted at the two ends where the type sits, and left open through the
	   middle so the photograph is not flattened. */
	background:
		linear-gradient(180deg,
			rgba(10, 1, 30, 0.12) 0%,
			rgba(10, 1, 30, 0.10) 32%,
			rgba(10, 1, 30, 0.58) 58%,
			rgba(10, 1, 30, 0.88) 80%,
			rgba(10, 1, 30, 0.95) 100%);
	color: #fff;
}

/* A gold rule closing the heading, before the prompt below. */
.faq__panelbody .faq__title::after {
	content: "";
	display: block;
	width: 3.25rem;
	height: 2px;
	margin-top: 0.75rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--gold-lt), rgba(208, 160, 48, 0));
}

.faq__eyebrow { color: var(--gold-lt); margin-bottom: 0.1rem; }
.faq__eyebrow .eyebrow__rule { background: linear-gradient(90deg, var(--gold), transparent); }

.faq__title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.14;
	color: #fff;
	text-wrap: balance;
}

.faq__helptitle {
	margin-top: 0.35rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.84);
}

.faq__helpnum {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	font-weight: 700;
	color: #fff;
	transition: color var(--dur) var(--ease);
}

.faq__helpnum .icon { color: var(--gold-lt); }
.faq__helpnum:hover { color: var(--gold-lt); }

/* The accordion fills its own column with no trailing gap. */
.faq__list {
	counter-reset: qa;
	display: grid;
	align-content: start;
	gap: 0.6rem;
}

@media (max-width: 980px) {
	.faq__inner { grid-template-columns: minmax(0, 1fr); }
	.faq__panel { min-height: 340px; }
}

/* The figure emblem: a wreath with its own glyph held in the opening. */
.figcard__emblem { position: relative; }

.figcard__glyph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-bottom: 0.5rem;
	color: var(--gold-deep);
}

/* --------------------------------------------------------------------------
   36. Icons draw themselves on
   The stroked parts are drawn with a dash sweep and the filled parts fade up
   behind them. Everything here is nested inside `.has-motion` and a
   reduced-motion guard, so if the script never runs — or the visitor asks for
   less motion — the icons are simply there, fully drawn.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.has-motion .hcard .icon > *,
	.has-motion .cap .icon > *,
	.has-motion .reason .icon > *,
	.has-motion .figcard__glyph .icon > *,
	.has-motion .route__icon .icon > *,
	.has-motion .docitem__icon .icon > * {
		stroke-dasharray: 90;
		stroke-dashoffset: 90;
	}

	.has-motion .hcard.is-in .icon > *,
	.has-motion .cap.is-in .icon > *,
	.has-motion .reason.is-in .icon > *,
	.has-motion .figcard.is-in .figcard__glyph .icon > *,
	.has-motion .route.is-in .route__icon .icon > *,
	.has-motion .docitem.is-in .docitem__icon .icon > * {
		animation: tansen-draw 1s var(--ease) forwards;
	}

	/* Each shape follows the one before it, so a single icon reads as being
	   drawn rather than every stroke appearing at once. */
	.has-motion .icon > *:nth-child(2) { animation-delay: 0.1s; }
	.has-motion .icon > *:nth-child(3) { animation-delay: 0.2s; }
	.has-motion .icon > *:nth-child(4) { animation-delay: 0.3s; }
	.has-motion .icon > *:nth-child(5) { animation-delay: 0.4s; }

	/* Filled shapes carry no stroke to sweep, so they fade instead. */
	.has-motion .hcard .icon > [fill="currentColor"],
	.has-motion .cap .icon > [fill="currentColor"],
	.has-motion .figcard__glyph .icon > [fill="currentColor"] {
		opacity: 0;
	}

	.has-motion .hcard.is-in .icon > [fill="currentColor"],
	.has-motion .cap.is-in .icon > [fill="currentColor"],
	.has-motion .figcard.is-in .figcard__glyph .icon > [fill="currentColor"] {
		animation: tansen-inkin 0.7s var(--ease) 0.25s forwards;
	}

	/* The emblem ring itself traces round as the icon lands. */
	.has-motion .hcard .hcard__emblem { --ring: 0; }
	.has-motion .hcard.is-in .hcard__emblem { animation: tansen-ring 0.8s var(--ease) forwards; }
}

@keyframes tansen-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes tansen-inkin {
	from { opacity: 0; transform: scale(0.88); }
	to   { opacity: 1; transform: none; }
}

@keyframes tansen-ring {
	from { box-shadow: inset 0 0 0 1px rgba(208, 160, 48, 0); transform: scale(0.94); }
	to   { box-shadow: inset 0 0 0 1px var(--gold); transform: none; }
}

/* Icons also respond to a pointer, which is motion that answers an action. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hcard .icon,
	.cap .icon,
	.route__icon .icon { transition: transform 0.45s var(--ease); }

	.hcard:hover .icon,
	.cap:hover .icon,
	.route:hover .route__icon .icon { transform: scale(1.08) rotate(-3deg); }
}

/* The sketch that heads each chapter of the family timeline. */
/* Fixed heights here, so the centre of the year marker lands at a known
   offset and the connecting rule can be placed on it exactly:
   52px sketch + 10px gap + 23px (half of the 46px marker) = 85px. */
.gen__sketch {
	display: block;
	height: 110px;
	margin-bottom: 12px;
	color: var(--gold-deep);
}

.gensketch {
	display: block;
	width: auto;
	height: 100%;
	overflow: visible;
}

/* The sketch draws itself as its chapter arrives — the stroke is swept in
   rather than faded, which suits a drawing. Guarded so the sketches are
   simply present if the motion layer never runs. */
@media (prefers-reduced-motion: no-preference) {
	.has-motion .gensketch path,
	.has-motion .gensketch circle {
		stroke-dasharray: 260;
		stroke-dashoffset: 260;
	}

	.has-motion .gen.is-in .gensketch path,
	.has-motion .gen.is-in .gensketch circle {
		animation: tansen-sketch 1.6s var(--ease) forwards;
	}

	.has-motion .gensketch > g > *:nth-child(2) { animation-delay: 0.18s; }
	.has-motion .gensketch > g > *:nth-child(3) { animation-delay: 0.36s; }
	.has-motion .gensketch > g > *:nth-child(4) { animation-delay: 0.54s; }
	.has-motion .gensketch > g > *:nth-child(5) { animation-delay: 0.72s; }
	.has-motion .gensketch > g > *:nth-child(6) { animation-delay: 0.9s; }
}

@keyframes tansen-sketch {
	to { stroke-dashoffset: 0; }
}

/* A larger drawing wants a lighter line. */
.gensketch g { stroke-width: 1.5; }

@media (max-width: 760px) {
	.gen__sketch { height: 84px; }
}

.gen__year {
	height: 46px;
	min-width: 5.4rem;
	padding-inline: 1rem;
	margin-bottom: 0.9rem;
}

.genline::before { top: 145px; }

/* The gallery sits over its ground. */
.gallery .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   37. Mobile header
   The bar carried four stacked rows, which cost a quarter of the screen before
   the visitor saw anything. On a phone it keeps the one thing worth tapping.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.topbar {
		padding-block: 0.5rem;
	}

	.topbar__inner {
		display: flex;
		justify-content: center;
	}

	.topbar__list {
		display: flex;
		justify-content: center;
		gap: 0;
		margin: 0;
		padding: 0;
	}

	/* Everything but the phone number steps aside. */
	.topbar__list > li { display: none; }
	.topbar__list > li:first-child { display: block; }
	.topbar__note { display: none; }

	.topbar__list > li:first-child a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-family: var(--font-display);
		font-size: 0.98rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		color: #fff;
	}

	.topbar__list > li:first-child .icon {
		width: 18px;
		height: 18px;
		color: var(--gold-lt);
	}

	/* The quote button is the widest thing in the bar below it; shrink it so
	   the logo and the menu toggle both keep their room. */
	.masthead__cta {
		padding-inline: 0.85rem;
		font-size: 0.8rem;
	}

	.masthead__cta .icon { display: none; }
}

/* Below this the quote button gives way entirely — the sticky call and
   WhatsApp buttons already cover that job on a phone. */
@media (max-width: 480px) {
	.masthead__cta { display: none; }
}

/* --------------------------------------------------------------------------
   38. Narrow screens
   Two-column sections stack here, and a left-aligned column in a narrow
   viewport reads as lopsided — so the copy centres, and the generous desktop
   spacing comes down to suit the screen.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	:root {
		--section-y: clamp(1.75rem, 7vw, 2.5rem);
		--band-y:    clamp(2rem, 8vw, 3rem);
	}

	/* Centre the copy in every section that has stacked. */
	.legacy__copy,
	.whyus__copy,
	.showreel__lead,
	.showreel__body,
	.heritage__copy,
	.packaging__copy,
	.enquiry__aside,
	.markets__note,
	.sechead {
		text-align: center;
	}

	.legacy__title,
	.legacy__lede,
	.legacy__body,
	.whyus__title,
	.whyus__lead,
	.showreel__sub,
	.sechead__title,
	.sechead__lead {
		max-width: none;
		margin-inline: auto;
	}

	/* Rules and eyebrows centre with the text they introduce. */
	.legacy__copy .eyebrow,
	.whyus__copy .eyebrow,
	.showreel__lead .eyebrow,
	.enquiry__aside .eyebrow { justify-content: center; }

	/* Lists and buttons follow. */
	.legacy__points { justify-items: center; text-align: center; }
	.legacy__points li { padding-left: 0; }
	.legacy__points li::before { display: none; }

	.legacy__foot,
	.ctapair,
	.showreel__foot .ctapair { justify-content: center; }

	.reason { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

	/* The video plate was holding a desktop-sized minimum on a phone. */
	.showreel__plate {
		min-height: 0;
		padding-block: clamp(2rem, 9vw, 3rem);
	}

	.showreel__title { font-size: clamp(1.6rem, 9vw, 2.6rem); }

	/* The arch columns do not need desktop heights here either. */
	.legacy__media { height: clamp(240px, 54vw, 340px); }
	.archshot__frame { aspect-ratio: 4 / 3; }
}


/* --------------------------------------------------------------------------
   39. Ambient motion in the family sketches
   Restrained on purpose: two of the four drawings carry a slow movement that
   says something about the subject, and the rest stay still.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.gensketch .sketch-sway {
		transform-box: fill-box;
		transform-origin: 20% 90%;
		animation: tansen-sway 5.5s ease-in-out infinite;
	}

	.gensketch .sketch-spin {
		transform-box: fill-box;
		transform-origin: 50% 50%;
		animation: tansen-meridian 9s linear infinite;
	}

	/* Hold the ambient motion until the drawing has finished being drawn. */
	.has-motion .gen:not(.is-in) .gensketch .sketch-sway,
	.has-motion .gen:not(.is-in) .gensketch .sketch-spin {
		animation: none;
	}
}

@keyframes tansen-sway {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(-5deg); }
}

/* Squashing the meridian horizontally reads as a globe turning, where a plain
   rotation would just look like the drawing spinning. */
@keyframes tansen-meridian {
	0%, 100% { transform: scaleX(1); }
	25%      { transform: scaleX(0.25); }
	50%      { transform: scaleX(1); }
	75%      { transform: scaleX(0.25); }
}