/*
Theme Name: Shaagro
Theme URI: https://shaagro.com
Author: Khaled Bouikni
Description: Theme for Shaagro — aqua veterinary products, seed treatments, biostimulants and public health products. 2026-09 redesign: plum ink and orange on white with one aqua accent, set in Inter with regular-weight display headings.
Version: 3.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: shagro
*/

/* =====================================================================
   0. FONTS — self-hosted
   Served from the theme rather than Google's CDN: faster, and it removes
   the third-party request that raises a GDPR question for Italian traffic.
   Files are the same WOFF2 Google serves, taken from @fontsource (SIL OFL).

   One family, Inter, at 300 (pull-quotes only), 400 (body and every large
   heading), 500 (small headings, links, buttons) and 600 (labels).
   unicode-range keeps the download small: an English page pulls the latin
   subsets only; latin-ext arrives only if a page actually uses those glyphs.

   Anton is gone from the site. It lives on only inside the logo artwork.
   ===================================================================== */
@font-face{
	font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
	src:url('fonts/inter-latin-300.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
	src:url('fonts/inter-latin-400.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
	src:url('fonts/inter-latin-500.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
	src:url('fonts/inter-latin-600.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
	src:url('fonts/inter-latin-ext-300.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
	src:url('fonts/inter-latin-ext-400.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
	src:url('fonts/inter-latin-ext-500.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
	src:url('fonts/inter-latin-ext-600.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =====================================================================
   1. TOKENS
   Two brand colours, as the logo has them: plum ink and the orange of the
   beak's halftone. Aqua is a quiet focus-ring accent on dark sections only
   (never the home hero, which stays orange/plum/white). Everything else is
   white, with a plum-tinted mist for the alternate surface.
   ===================================================================== */
:root{
	/* ---- colour ---- */
	--ink:#300D37;          /* text, headings, dark bands — 16.96:1 on white */
	--ink-deep:#1E0823;     /* hero panel, deepest dark                       */
	--ink-soft:#4A2A51;     /* hover on ink                                    */
	--paper:#FFFFFF;
	--mist:#F5F1F6;         /* alternate surface, pack-shot tiles              */
	--mist-2:#E6DDE7;       /* footer gradient end, hairlines on mist          */
	--line:#E3DCE4;         /* 1px dividers                                    */
	--muted:#6B5A70;        /* secondary text — 6.32:1 on white, 5.66 on mist  */
	--cta:#FF7D00;          /* primary button fill. Plum text on it only (6.61:1) */
	--cta-hover:#E86F00;
	--cta-ink:#B35500;      /* orange as text on white — 4.98:1               */
	--aqua:#5FD3E0;         /* hero accent only — 10.9:1 on --ink-deep        */
	--aqua-ink:#0B6F7E;     /* aqua as text on white — 5.85:1                 */
	--on-dark:#FFFFFF;
	--on-dark-muted:#D5C9D8;/* body text on --ink-deep — 11.9:1               */

	/* Family markers: a 4px dot beside a family name, matching the pack cap.
	   Never used as fills. */
	--fam-aqua:#29B6D1;
	--fam-seed:#D8333B;
	--fam-bio:#F08A24;
	--fam-ph:#22325E;

	/* ---- states ---- */
	--success:#1E6B4A;
	--danger:#A8272F;

	/* ---- type ---- */
	--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	--font-display:var(--font);   /* kept for the Customizer and old rules */
	--font-body:var(--font);

	/* Scale: fluid between the phone (≤600) and desktop (≥1024) steps. */
	--fs-display:clamp(2.5rem,1.25rem + 3.33vw,4rem);      /* 40 → 64 */
	--fs-h2:clamp(1.875rem,1.15rem + 1.94vw,2.75rem);      /* 30 → 44 */
	--fs-h3:clamp(1.25rem,1.1rem + .42vw,1.5rem);          /* 20 → 24 */
	--fs-lead:clamp(1.125rem,1.05rem + .21vw,1.25rem);     /* 18 → 20 */
	--fs-link:clamp(1.0625rem,1.03rem + .1vw,1.125rem);    /* 17 → 18 */
	--fs-body:1rem;                                        /* 16      */
	--fs-fine:.875rem;                                     /* 14      */
	--fs-label:.8125rem;                                   /* 13      */

	--lh-display:1.09;
	--lh-h2:1.18;
	--lh-h3:1.33;
	--lh-lead:1.5;
	--lh-body:1.625;

	/* ---- space (8px base) ---- */
	--s-1:.25rem; --s-2:.5rem;  --s-3:.75rem;
	--s-4:1rem;   --s-5:1.5rem; --s-6:2rem;
	--s-7:3rem;   --s-8:4rem;   --s-9:6rem;
	--section-y:3.5rem;       /* 56 phone, 80 tablet, 112 desktop — see below */
	--gutter:20px;            /* 20 phone, 32 tablet, 40 desktop              */
	--maxw:1280px;
	--measure:65ch;

	--header-h:64px;

	/* ---- shape ---- */
	--radius:4px;             /* buttons and inputs only; everything else is square */

	/* ---- motion ---- */
	--ease:cubic-bezier(.2,.7,.2,1);
	--dur:240ms;
	--dur-slow:600ms;

	/* ---- legacy aliases ----
	   Only the draft pages (Aquaculture, Fish Tales, Ocean-Friendly Living,
	   Aziz) still use these names, through the block in §14. */
	--plum-900:var(--ink-deep);
	--plum-800:var(--ink);
	--plum-700:var(--ink-soft);
	--plum-200:var(--mist-2);
	--plum-100:var(--line);
	--gold:var(--cta);
	--gold-lite:var(--mist-2);
	--amber:var(--cta);
	--amber-ink:var(--cta-ink);
	--paper-tint:var(--mist);
	--paper-warm:var(--mist);
	--text:var(--ink);
	--text-muted:var(--muted);
	--border:var(--line);
	--coral:var(--cta);
	--radius-lg:0px;
	--radius-pill:var(--radius);
	--fs-3xs:var(--fs-label);
	--fs-xs:var(--fs-fine);
	--fs-sm:var(--fs-body);
	--fs-md:1.125rem;
	--fs-d4:var(--fs-h3);
	--tracking-caps:.04em;
	--tracking-d3:0;
	--shadow-sm:none;
	--shadow-md:0 12px 28px -12px rgba(48,13,55,.22);
	--shadow-lg:0 20px 40px -16px rgba(48,13,55,.28);
}
@media (min-width:700px){:root{--section-y:5rem;--gutter:32px;--header-h:72px}}
@media (min-width:1024px){:root{--section-y:7rem;--gutter:40px}}

/* =====================================================================
   2. BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.has-drawer{overflow:hidden}
body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--font-body);
	font-size:var(--fs-body);line-height:var(--lh-body);
	font-feature-settings:'cv11','ss01';   /* Inter's single-storey a and open digits */
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
	caret-color:var(--cta);
	overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
p{margin:0 0 1em}
b,strong{font-weight:600}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}

/* Headings. Large type is Inter Regular (400) — light (300) read too thin
   on the owner's screens, so this is quiet but not thin, in sentence case.
   Nothing on the site is set in capitals any more. */
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;color:inherit;text-wrap:balance}
p,li,dd{text-wrap:pretty}
h1,h2,.s-display,.chero__title,.s-close__title{font-family:var(--font-display)}
h1,.s-display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:600;letter-spacing:-.01em;max-width:22ch}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;letter-spacing:-.005em;max-width:28ch}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500}
h4{font-size:1.125rem;line-height:var(--lh-h3);font-weight:500}
h5{font-size:1rem;line-height:var(--lh-h3);font-weight:600}

/* Browser surfaces carry the palette too. */
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html{scrollbar-color:var(--mist-2) transparent}

.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ph{background:none;border:0;padding:0;color:inherit}

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.s-wrap{max-width:calc(var(--maxw) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.s-section{padding:var(--section-y) 0;position:relative}
.s-section--tight{padding:calc(var(--section-y) * .6) 0}
.s-section--mist,.s-section--alt,.s-section--tint{background:var(--mist)}
.s-section--line{border-top:1px solid var(--line)}
.s-section--dark{background:var(--ink-deep);color:var(--on-dark)}
.s-section--dark p,.s-section--dark .s-lead{color:var(--on-dark-muted)}
.s-section--dark :focus-visible{outline-color:var(--aqua)}
.s-center{text-align:center}
.s-center h1,.s-center h2,.s-center .s-lead{margin-left:auto;margin-right:auto}

.s-head{max-width:46rem;margin-bottom:var(--s-7)}
.s-head h2,.s-head h1{margin-bottom:var(--s-5)}
.s-head > :last-child{margin-bottom:0}
.s-center .s-head{margin-left:auto;margin-right:auto}

.s-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--muted);max-width:var(--measure)}
.s-muted{color:var(--muted)}
.s-fine{font-size:var(--fs-fine);line-height:1.57}

/* Small label: counts, formulation, "From the range". Sentence case — the
   tracking is there to give 13px type air, not to fake capitals. */
.s-label,.s-kicker{
	display:block;
	font-size:var(--fs-label);line-height:20px;font-weight:600;letter-spacing:.04em;
	color:var(--muted);margin:0 0 var(--s-3);
	font-variant-numeric:tabular-nums;
}
.s-section--dark .s-label,.s-section--dark .s-kicker{color:var(--on-dark-muted)}

.s-grid{display:grid;gap:var(--s-7) var(--s-5)}
.s-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.s-grid--3,.s-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.s-grid--2,.s-grid--3,.s-grid--4{grid-template-columns:1fr}}

/* Family marker: a small dot in the pack's cap colour. */
.s-dot{display:inline-block;flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--muted);vertical-align:.12em;margin-right:.45em}
.s-dot[data-fam="aqua"]{background:var(--fam-aqua)}
.s-dot[data-fam="seed"]{background:var(--fam-seed)}
.s-dot[data-fam="bio"]{background:var(--fam-bio)}
.s-dot[data-fam="ph"]{background:var(--fam-ph)}

/* =====================================================================
   4. ACTIONS
   One filled button per screen, orange with plum text. Everything else is
   a text link ending in an orange arrow.
   ===================================================================== */
.s-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
	min-height:48px;padding:0 var(--s-5);
	font-family:var(--font);font-size:1rem;font-weight:500;line-height:1.2;
	background:var(--cta);color:var(--ink);
	border:1px solid transparent;border-radius:var(--radius);
	text-decoration:none;cursor:pointer;white-space:nowrap;
	transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.s-btn:hover{background:var(--cta-hover)}
.s-btn .s-arrow{color:currentColor;transition:transform var(--dur) var(--ease)}
.s-btn:hover .s-arrow{transform:translateX(3px)}
.s-btn:disabled,.s-btn[disabled],.s-btn[aria-disabled="true"]{background:var(--mist-2);color:var(--muted);cursor:not-allowed}
.s-btn--sm{min-height:40px;padding:0 18px;font-size:.9375rem}
/* An outline, for the rare second action that has to look like a button
   (the newsroom's empty state). */
.s-btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.s-btn--secondary:hover{background:var(--ink);color:var(--paper)}
.s-section--dark .s-btn:focus-visible{outline-color:var(--aqua)}

.s-arrow{flex:none;width:1em;height:1em;color:var(--cta);transition:transform var(--dur) var(--ease)}

/* Text-link call to action: "See the range →". */
.s-more{
	display:inline-flex;align-items:center;gap:.4em;
	font-size:var(--fs-link);line-height:1.45;font-weight:500;
	color:var(--ink);text-decoration:none;
	min-height:44px;
}
a.s-more:hover,a:hover > .s-more,a:focus-visible > .s-more{text-decoration:underline}
a.s-more:hover .s-arrow,a:hover .s-more .s-arrow,a:focus-visible .s-more .s-arrow{transform:translateX(3px)}
.s-more--sm{font-size:var(--fs-fine);min-height:0}
.s-more--light{color:var(--on-dark)}
.s-more--light:focus-visible{outline-color:var(--aqua)}

/* Inline links in running text. */
.s-link,.s-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--cta);text-decoration-thickness:1px;text-underline-offset:.22em}
.s-link:hover,.s-prose a:hover{text-decoration-thickness:2px}

/* =====================================================================
   5. HEADER
   White, sticky, one height on every page.
   ===================================================================== */
.s-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;text-decoration:none}
.s-skip:focus{left:var(--s-3);top:var(--s-3)}

.s-header{
	position:sticky;top:0;z-index:100;
	background:var(--paper);border-bottom:1px solid var(--line);
}
.admin-bar .s-header{top:32px}
@media screen and (max-width:782px){.admin-bar .s-header{top:46px}}
@media screen and (max-width:600px){.admin-bar .s-header{top:0}}
.s-header__bar{display:flex;align-items:center;gap:var(--s-6);height:var(--header-h);position:relative;z-index:95}

.s-logo{display:inline-flex;align-items:center;flex:none;text-decoration:none;color:var(--ink)}
.s-logo__img{height:44px;width:auto}
@media (min-width:700px){.s-logo__img{height:52px}}

.s-nav{align-self:stretch}
.s-nav__list{display:flex;align-items:stretch;gap:var(--s-2);height:100%;list-style:none;margin:0;padding:0}
.s-nav__item{display:flex}
.s-nav__link{
	position:relative;display:inline-flex;align-items:center;gap:6px;
	padding:0 var(--s-3);
	font-size:1.0625rem;font-weight:400;color:var(--ink);text-decoration:none;
}
/* The active page carries a 3px orange rule on the header's bottom edge. */
.s-nav__link::after{
	content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:-1px;height:3px;
	background:var(--cta);transform:scaleX(0);transform-origin:left;
	transition:transform var(--dur) var(--ease);
}
.s-nav__link:hover::after,.s-nav__item--mega:hover .s-nav__link::after,.s-nav__item--mega.is-open .s-nav__link::after{transform:scaleX(1);background:var(--mist-2)}
.s-nav__link.is-current{font-weight:500}
.s-nav__link.is-current::after{transform:scaleX(1);background:var(--cta)}
.s-nav__link:focus-visible{outline-offset:-3px}
.s-nav__chev{transition:transform var(--dur) var(--ease)}
.s-nav__item--mega:hover .s-nav__chev,.s-nav__item--mega.is-open .s-nav__chev{transform:rotate(180deg)}

/* Products panel */
.s-mega{
	position:absolute;left:0;right:0;top:100%;
	background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
	box-shadow:0 24px 40px -24px rgba(48,13,55,.25);
	opacity:0;visibility:hidden;transform:translateY(-6px);
	transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);
}
.s-nav__item--mega:hover .s-mega,.s-nav__item--mega.is-open .s-mega,.s-nav__item--mega:focus-within .s-mega{
	opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.s-mega__inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s-7);padding-top:var(--s-7);padding-bottom:var(--s-7)}
@supports (grid-template-rows:subgrid){
	.s-mega__inner{grid-template-rows:auto auto 1fr auto}
	.s-mega__col{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
}
.s-mega__title{
	display:flex;align-items:baseline;
	font-size:1.125rem;font-weight:500;line-height:1.35;color:var(--ink);text-decoration:none;margin-bottom:var(--s-2);
}
.s-mega__title:hover{text-decoration:underline}
.s-mega__blurb{font-size:var(--fs-fine);line-height:1.5;color:var(--muted);margin:0 0 var(--s-4)}
.s-mega__col ul{list-style:none;margin:0 0 var(--s-4);padding:var(--s-2) 0 0;border-top:1px solid var(--line)}
.s-mega__col li a{
	display:block;padding:.45rem 0;
	font-size:.9375rem;color:var(--ink);text-decoration:none;
}
.s-mega__col li a:hover{color:var(--cta-ink);text-decoration:underline}

/* Header end: search, CTA, burger */
.s-header__end{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}

/* "Get in touch": a faint halftone dot texture over the flat orange fill,
   echoing the orange-to-gold dot-gradient on the logo's beak (images/
   logo.png) so the button reads as part of the same mark rather than a
   generic rectangle. Two dot grids at different scales, in warm gold, sit
   on top of the ordinary --cta orange — low alpha, so the button still
   reads flat/simple at a glance and "Get in touch" stays fully legible.
   Backgrounds always paint under an element's own text, so the dots never
   need to touch the label. Scoped to the header's two CTAs (the bar and
   the mobile drawer) only — every other .s-btn on the site is untouched.
   Longhand background-* properties throughout, because .s-btn(:hover) sets
   the shorthand `background`, which would otherwise reset these to none. */
.s-header__cta{
	position:relative;
	background-color:var(--cta);
	background-image:
		radial-gradient(circle, rgba(255,225,175,.4) .5px, transparent 1.1px),
		radial-gradient(circle, rgba(255,196,120,.28) .5px, transparent 1.1px);
	background-size:9px 9px, 13px 13px;
	background-position:0 0, 5px 8px;
	background-repeat:repeat, repeat;
	transition:background-color var(--dur) var(--ease),background-image var(--dur) var(--ease);
}
.s-header__cta:hover{
	background-color:var(--cta-hover);
	background-image:
		radial-gradient(circle, rgba(255,231,190,.6) .6px, transparent 1.2px),
		radial-gradient(circle, rgba(255,205,135,.45) .6px, transparent 1.2px);
	background-size:9px 9px, 13px 13px;
	background-position:0 0, 5px 8px;
	background-repeat:repeat, repeat;
}

.s-hsearch{position:relative;display:flex;align-items:center}
.s-hsearch__input{
	width:0;min-height:40px;padding:0;border:1px solid transparent;border-radius:var(--radius);
	background:var(--paper);color:var(--ink);font:inherit;font-size:.9375rem;
	opacity:0;transition:width var(--dur) var(--ease),opacity var(--dur) var(--ease),padding var(--dur) var(--ease);
}
.s-hsearch.is-open .s-hsearch__input,.s-hsearch:focus-within .s-hsearch__input{
	width:15rem;padding:0 44px 0 14px;opacity:1;border-color:var(--line);
}
.s-hsearch__input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.s-hsearch__input::placeholder{color:var(--muted);opacity:1}
.s-hsearch__btn{
	display:flex;align-items:center;justify-content:center;width:44px;height:44px;
	background:none;border:0;border-radius:var(--radius);color:var(--ink);cursor:pointer;padding:0;
}
.s-hsearch.is-open .s-hsearch__btn,.s-hsearch:focus-within .s-hsearch__btn{position:absolute;right:0}
.s-hsearch__btn:hover{color:var(--cta-ink)}

.s-burger{display:none;position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--ink);padding:0}
.s-burger__i{position:absolute;top:50%;left:50%;width:24px;height:24px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.s-burger__i--open{transform:translate(-50%,-50%)}
.s-burger__i--close{transform:translate(-50%,-50%) rotate(-90deg) scale(.6);opacity:0}
.s-burger[aria-expanded="true"] .s-burger__i--open{transform:translate(-50%,-50%) rotate(90deg) scale(.6);opacity:0}
.s-burger[aria-expanded="true"] .s-burger__i--close{transform:translate(-50%,-50%);opacity:1}

/* Mobile drawer — white, under the header bar */
.s-mobile{
	position:fixed;left:0;right:0;bottom:0;top:var(--header-h);z-index:90;
	background:var(--paper);color:var(--ink);border-top:1px solid var(--line);
	opacity:0;visibility:hidden;transform:translateY(-8px);
	transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);
	overflow-y:auto;overscroll-behavior:contain;
}
.admin-bar .s-mobile{top:calc(var(--header-h) + 46px)}
.s-mobile.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.s-mobile__inner{padding:var(--s-5) var(--gutter) var(--s-7)}
.s-mobile__search{display:flex;margin-bottom:var(--s-4);border:1px solid var(--line);border-radius:var(--radius)}
.s-mobile__search:focus-within{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.s-mobile__search input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:0;background:none;color:var(--ink);font:inherit}
.s-mobile__search input:focus{outline:none}
.s-mobile__search input::placeholder{color:var(--muted);opacity:1}
.s-mobile__search button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:0;color:var(--ink);cursor:pointer}
.s-mobile__list{list-style:none;margin:0;padding:0}
.s-mobile__list > li{border-bottom:1px solid var(--line)}
.s-mobile__list > li > a,.s-acc__btn{
	display:flex;align-items:center;justify-content:space-between;width:100%;
	min-height:56px;padding:var(--s-3) 0;
	background:none;border:0;cursor:pointer;
	font:inherit;font-size:1.25rem;font-weight:400;color:var(--ink);text-decoration:none;text-align:left;
}
.s-acc__btn svg{transition:transform var(--dur) var(--ease);flex:none}
.s-acc__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.s-acc__panel{display:none;padding:0 0 var(--s-5)}
.s-acc.is-open .s-acc__panel{display:block}
.s-acc__all{display:inline-flex;align-items:center;gap:.4em;min-height:44px;color:var(--ink);font-weight:500;text-decoration:none}
.s-acc__group{margin-top:var(--s-4)}
.s-acc__parent{display:flex;align-items:baseline;min-height:44px;padding:.6rem 0;font-weight:500;color:var(--ink);text-decoration:none}
.s-acc__child{display:flex;align-items:center;min-height:44px;padding:0 0 0 1.1em;color:var(--muted);text-decoration:none}
.s-acc__child:hover,.s-acc__parent:hover{color:var(--ink);text-decoration:underline}
.s-mobile__cta{margin-top:var(--s-6)}
.s-mobile__cta .s-btn{width:100%}

@media (max-width:1023px){
	/* Scoped to the bar itself: .s-header__cta also names the mobile
	   drawer's own "Get in touch" button (style.css §5, ".s-header__cta"),
	   which must stay visible down here — the burger only replaces the
	   bar's nav/search/CTA, not the drawer. */
	.s-header__bar .s-nav,.s-header__bar .s-header__cta,.s-header__bar .s-hsearch{display:none}
	.s-burger{display:block}
	.s-header__bar{gap:var(--s-4)}
}
@media (min-width:1024px){.s-mobile{display:none}}

/* =====================================================================
   6. HOME HERO — split panel
   Deep plum all across: text at left; at right, a carousel of three product
   tiles (js/hero-carousel.js), each pack shot free-standing on the plum and,
   where the device can take it, a 3D bottle to turn (js/hero-3d.js).
   Content is centred vertically as one group.

   A small amount of entrance and hover motion lives here too, home hero
   only (js/hero-motion.js): the left panel fades/slides up in a quick
   stagger on load, the primary button pulls gently toward a nearby cursor,
   and a quiet "Drag to explore" hint sits over the 3D product. All three
   collapse under prefers-reduced-motion (§19), and the magnetic pull never
   runs without a real cursor (js/hero-motion.js checks hover/pointer).
   ===================================================================== */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.chero{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	min-height:min(760px,calc(100svh - var(--header-h)));
	background:var(--ink-deep);color:var(--on-dark);
}
.admin-bar .chero{min-height:min(760px,calc(100svh - var(--header-h) - 32px))}
.chero__panel{
	position:relative;overflow:hidden;
	display:flex;align-items:center;
	/* Left edge lines up with the page container's content edge. */
	padding:var(--s-8) clamp(var(--s-6),4vw,var(--s-8)) var(--s-8) max(var(--gutter),calc(50vw - var(--maxw) / 2));
}
/* A halftone dot field, the same motif as the logo's beak and the header's
   CTA button, so the panel reads as branded rather than a bare plum fill.
   It sits behind the copy, glowing from the panel's own right edge (nearest
   the product) and fading out before it reaches the text on the left. */
.chero__panel::before{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background-image:
		radial-gradient(circle,rgba(255,201,138,.55) .5px,transparent 1.1px),
		radial-gradient(circle,rgba(255,125,0,.4) .5px,transparent 1.1px);
	background-size:16px 16px,22px 22px;
	background-position:0 0,9px 9px;
	-webkit-mask-image:radial-gradient(circle at 100% 45%,#000 0%,transparent 58%);
	mask-image:radial-gradient(circle at 100% 45%,#000 0%,transparent 58%);
}
.chero__content{position:relative;z-index:1;max-width:36rem}
.chero__label{
	display:flex;align-items:center;gap:var(--s-3);
	font-size:var(--fs-label);line-height:20px;font-weight:500;letter-spacing:.04em;
	color:var(--cta);margin:0 0 var(--s-5);
	animation:fadeSlideUp .6s var(--ease) backwards;
}
.chero__label::before{content:"";flex:none;width:32px;height:1px;background:currentColor}
.chero__title{
	font-size:var(--fs-display);line-height:var(--lh-display);font-weight:600;letter-spacing:-.01em;
	color:var(--on-dark);margin:0 0 var(--s-5);max-width:none;
	animation:fadeSlideUp .6s var(--ease) .1s backwards;
}
/* Highlighted phrase: orange, the same accent as the CTA button below —
   no blue in the hero. */
.chero__hl{color:var(--cta)}
.chero__line{display:inline-block}
.chero__sub{
	font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--on-dark-muted);max-width:32rem;margin:0 0 var(--s-6);
	animation:fadeSlideUp .6s var(--ease) .2s backwards;
}
.chero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6)}
.chero__actions .s-btn{animation:fadeSlideUp .6s var(--ease) .3s backwards}
.chero__actions .s-more{animation:fadeSlideUp .6s var(--ease) .4s backwards}
/* The magnetic pull (js/hero-motion.js) only ever sets transform on this one
   button; the transition is what makes both the pull and its spring-back
   smooth. Real cursors only — the script never touches it otherwise. */
.chero__actions [data-hero-magnetic]{transition:transform .2s var(--ease)}
.chero :focus-visible{outline-color:var(--cta)}

.chero__products{
	display:flex;align-items:center;justify-content:center;
	padding:var(--s-8) clamp(var(--s-6),4vw,var(--s-8));
	background:var(--ink-deep);color:var(--on-dark);
}
.chero__products :focus-visible{outline-color:var(--cta)}
/* One tile wide. Sized to fit the hero's height as well as its width, so the
   tile, its text and the dots always sit inside the panel. */
.chero__carousel{position:relative;width:min(100%,max(240px,min(380px,calc((100svh - var(--header-h) - 15rem) * .8))))}
/* A scroll-snap strip: swipes on touch with no script. No visible scrollbar;
   the dots stand in for it. */
.chero__track{
	list-style:none;margin:0;padding:0;
	display:flex;overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;scrollbar-width:none;
}
.chero__track::-webkit-scrollbar{display:none}
.chero__slide{flex:0 0 100%;display:flex;scroll-snap-align:start;scroll-snap-stop:always}
/* No box behind the pack shot: the bottle stands on the plum itself. */
.chero__slide .s-tile__shot{position:relative;background:none}
.chero__slide .s-tile__name{font-size:var(--fs-h3)}
.chero__slide .s-tile__meta{color:var(--on-dark-muted)}
/* The strip clips anything outside it, so the focus ring goes inside. */
.chero__slide .s-tile:has(.s-tile__link:focus-visible){outline-color:var(--cta);outline-offset:-2px}
/* The hero's tiles skip "Datasheet →" — the carousel's own CTA already
   points at the products hub, and a second link per slide crowded the card.
   product-tile.php's markup is unchanged; the link still shows everywhere
   else the tile is used (the "From the range" strip, sub-category grids). */
.chero__slide .s-tile__more{display:none}
/* The 3D bottle (js/hero-3d-scene.js), laid over the photo, which fades out
   once the first frame is drawn. Narrower than the shot, so on touch a
   swipe either side of the bottle still changes product; on the bottle a
   sideways drag turns it and an up/down swipe still scrolls the page. Above
   the tile's stretched link, so a drag is not a click (the script turns a
   plain tap into one). */
.chero__3d{
	position:absolute;top:0;left:18%;z-index:2;width:64%;height:100%;
	opacity:0;transition:opacity var(--dur-slow) var(--ease);
	touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;
}
.chero__3d.is-dragging{cursor:grabbing}
.chero__3d--still{pointer-events:none}
.chero__slide.is-3d .chero__3d{opacity:1}
.chero__slide .s-tile__shot img{transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.chero__slide.is-3d .s-tile__shot img{opacity:0}

.chero__controls{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-5)}
.chero__controls[hidden]{display:none}
.chero__dots{display:flex;align-items:center;gap:var(--s-1);margin-left:-11px}
/* 32px targets, 10px dots. */
.chero__dot{
	display:flex;align-items:center;justify-content:center;width:32px;height:32px;
	padding:0;border:0;background:none;cursor:pointer;
}
.chero__dot::before{
	content:"";width:10px;height:10px;border-radius:50%;
	box-shadow:inset 0 0 0 1.5px var(--on-dark-muted);
	transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.chero__dot:hover::before{box-shadow:inset 0 0 0 1.5px var(--on-dark)}
.chero__dot[aria-current="true"]::before{background:var(--cta);box-shadow:none}

@media (min-width:1024px){
	/* Headline on two lines, as set. */
	.chero__line{display:block}
}
@media (max-width:1023px) and (min-width:700px){
	.chero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
	.chero__panel{padding-top:var(--s-7);padding-bottom:var(--s-7)}
}
@media (max-width:699px){
	.chero{grid-template-columns:1fr;min-height:0}
	.chero__panel{padding:var(--s-7) var(--gutter) var(--s-7)}
	.chero__products{padding:var(--s-7) var(--gutter)}
	.chero__carousel{width:min(100%,320px)}
	.chero__label{margin-bottom:var(--s-4)}
	.chero__sub{margin-bottom:var(--s-5)}
}

/* =====================================================================
   7. PRODUCT FAMILIES (home) and the pack-shot trio
   ===================================================================== */
.s-fams{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:699px){.s-fams{grid-template-columns:1fr;gap:var(--s-4)}}
.s-fams > li{display:flex}
.s-fam{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:var(--s-5);
	width:100%;padding:var(--s-6) var(--s-6) var(--s-6) var(--s-4);
	background:var(--mist);color:var(--ink);text-decoration:none;
	transition:background-color var(--dur) var(--ease);
}
.s-fam:hover{background:#EFE8F0}
.s-fam__title{display:flex;align-items:baseline;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500;margin:0 0 var(--s-2)}
.s-fam__text{color:var(--muted);margin:0 0 var(--s-3);max-width:34ch}
.s-fam .s-more{min-height:0}
@media (max-width:1023px){.s-fam{grid-template-columns:1fr;padding:var(--s-5) var(--s-5) var(--s-6)}}
@media (max-width:699px){.s-fam{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);padding:var(--s-4) var(--s-4) var(--s-4) 0;gap:var(--s-3)}}

/* Three pack shots, the middle one in front. Every shot is the same
   600×800 canvas with the bottle centred, so the overlap is a fixed
   fraction of the height. */
.s-trio{
	--h:clamp(170px,19vw,250px);
	display:flex;justify-content:center;align-items:flex-end;height:var(--h);
}
.s-trio__img{height:var(--h);width:auto;max-width:none;flex:none;margin:0 calc(var(--h) * -.2);transition:transform var(--dur-slow) var(--ease)}
.s-trio__img--1,.s-trio__img--3{height:calc(var(--h) * .86)}
.s-trio__img--2{position:relative;z-index:1}
.s-trio__img--1{transform:translateX(4%)}
.s-trio__img--3{transform:translateX(-4%)}
a:hover .s-trio__img--2{transform:scale(1.03)}
a:hover .s-trio__img--1{transform:translateX(0) scale(1.03)}
a:hover .s-trio__img--3{transform:translateX(0) scale(1.03)}
@media (max-width:1023px){.s-trio{--h:clamp(160px,28vw,220px)}}
@media (max-width:699px){.s-trio{--h:clamp(120px,34vw,150px)}}

/* =====================================================================
   8. FIND A PRODUCT + PRODUCT TILES
   ===================================================================== */
.s-qsearch{display:flex;gap:var(--s-3);max-width:40rem;margin-top:var(--s-5)}
.s-qsearch__input,.s-finder__input{
	flex:1;min-width:0;min-height:56px;padding:0 18px;
	background:var(--paper);color:var(--ink);
	border:1px solid var(--mist-2);border-radius:var(--radius);
	font:inherit;font-size:var(--fs-link);
}
.s-qsearch__input:focus,.s-finder__input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.s-qsearch__input::placeholder,.s-finder__input::placeholder{color:var(--muted);opacity:1}
.s-qsearch__btn{min-height:56px}
@media (max-width:699px){
	.s-qsearch{flex-direction:column}
	.s-qsearch__input{font-size:1rem}
}

.s-strip-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-3)}
.s-strip-head .s-label{margin:0}
.s-strip{
	list-style:none;margin:0;padding:0 0 var(--s-5);
	display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,21%,260px);gap:var(--s-5);
	overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
	scrollbar-width:thin;scrollbar-color:var(--mist-2) transparent;
}
.s-strip::-webkit-scrollbar{height:6px}
.s-strip::-webkit-scrollbar-thumb{background:var(--mist-2)}
.s-strip__item{scroll-snap-align:start;display:flex}
@media (max-width:699px){.s-strip{grid-auto-columns:46%;gap:var(--s-4)}}

/* One product: pack shot on mist, name, formulation, "Datasheet →". */
.s-tile{position:relative;display:flex;flex-direction:column;width:100%}
.s-tile__shot{
	aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;
	background:var(--mist);margin-bottom:var(--s-4);
}
.s-section--mist .s-tile__shot{background:var(--paper)}
.s-tile__shot img{height:92%;width:auto;object-fit:contain;transition:transform var(--dur-slow) var(--ease)}
.s-tile:hover .s-tile__shot img{transform:scale(1.03)}
.s-tile__name{font-size:1.125rem;line-height:1.35;font-weight:500;margin:0 0 var(--s-1)}
.s-tile__link{color:inherit;text-decoration:none}
/* The name's link covers the whole tile. */
.s-tile__link::after{content:"";position:absolute;inset:0;z-index:1}
.s-tile:hover .s-tile__link{text-decoration:underline}
.s-tile__link:focus-visible{outline:none}
.s-tile:has(.s-tile__link:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.s-tile__meta{font-size:var(--fs-fine);line-height:1.45;color:var(--muted);margin:0 0 var(--s-3)}
.s-tile__more{display:inline-flex;align-items:center;gap:.4em;margin-top:auto;font-size:var(--fs-fine);font-weight:500}
.s-tile:hover .s-tile__more .s-arrow{transform:translateX(3px)}

/* =====================================================================
   9. WHO WE SUPPLY
   Three across, then two wider. No boxes: space does the separating.
   ===================================================================== */
.s-segs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-7) var(--s-5)}
.s-segs__item{grid-column:span 2;display:flex}
.s-segs__item--wide{grid-column:span 3}
.s-seg{display:flex;flex-direction:column;width:100%;color:var(--ink);text-decoration:none}
.s-seg__media{display:block;aspect-ratio:3/2;overflow:hidden;margin-bottom:var(--s-5);background:var(--mist)}
.s-segs__item--wide .s-seg__media{aspect-ratio:2/1}
.s-seg__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.s-seg:hover .s-seg__media img{transform:scale(1.03)}
.s-seg__title{margin-bottom:var(--s-2)}
.s-seg__text{color:var(--muted);margin:0 0 var(--s-2);max-width:48ch}
.s-seg .s-more{margin-top:auto}
@media (max-width:1023px){
	.s-segs{grid-template-columns:repeat(2,minmax(0,1fr))}
	.s-segs__item,.s-segs__item--wide{grid-column:span 1}
	.s-segs__item:last-child{grid-column:span 2}
	.s-segs__item:last-child .s-seg__media{aspect-ratio:21/9}
	.s-segs__item--wide:not(:last-child) .s-seg__media{aspect-ratio:3/2}
}
/* Phone: five full-width photos cost five screens, so each card becomes a
   row — a square thumbnail beside the text. */
@media (max-width:699px){
	.s-segs{grid-template-columns:1fr;gap:var(--s-5)}
	.s-segs__item:last-child{grid-column:auto}
	.s-seg{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--s-4);align-items:start}
	.s-seg__media,.s-segs__item .s-seg__media,.s-segs__item:last-child .s-seg__media{grid-row:span 3;aspect-ratio:1;margin:0}
	.s-seg__title{font-size:1.125rem;margin-bottom:var(--s-1)}
	.s-seg__text{font-size:var(--fs-fine);line-height:1.5;margin-bottom:0}
	.s-seg .s-more{font-size:var(--fs-fine);min-height:36px}
}

/* =====================================================================
   9b. SUPPLIED FROM MALAYSIA — the globe (home)
   A plum band, copy left and the globe right (stacked on a phone, copy
   first). The band is --ink rather than --ink-deep so the globe's night
   side (--ink-deep) still reads as a sphere against it, and so it parts
   cleanly from the darker about band that follows. A recorded loop of the
   globe turning from Malaysia out to the markets we ship to (the GCC
   states, Iraq and Italy) — the poster (images/globe/globe-poster.webp)
   is a real <img> shown immediately, and js/main.js copies the <video>'s
   data-src across once the page has loaded, same pattern as
   template-parts/page-hero.php and section-about-band.php. This used to
   be a live, drag-to-turn Three.js scene; see section-global.php's
   header comment for why it's a film now. Warm gold and orange only on
   the globe — no blue.
   ===================================================================== */
.s-globe{position:relative;background:var(--ink);overflow-x:clip}
/* An irregular scatter of small points, like distant stars — quiet enough
   not to compete with the globe's own lit detail, but dense enough across
   the whole band that it reads as a sky, not a handful of specks. Back to
   CSS radial-gradient dots (was a background-image SVG for a round —
   images/starfield.svg is still on disk, just unreferenced): 10 of the
   30 points are flat layers here, at zero JS cost, and the other 20 (the
   brighter/larger ones) are real DOM elements instead (.s-globe__star,
   printed by template-parts/section-global.php at the same
   positions/sizes/colours) so js/starfield-motion.js can actually
   animate them — a background-image can't be reached by JS. Keep any
   position/size/colour edited here in sync with the PHP array in
   section-global.php if the two sets are ever reshuffled. Warm gold/paper
   tones only, matching the globe's own night-light colour. */
.s-globe::before{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background-image:
		radial-gradient(1px 1px at 23% 62%,rgba(255,201,138,.7),transparent 100%),
		radial-gradient(1px 1px at 58% 78%,rgba(255,201,138,.6),transparent 100%),
		radial-gradient(1px 1px at 5% 50%,rgba(255,201,138,.5),transparent 100%),
		radial-gradient(1px 1px at 71% 34%,rgba(255,201,138,.5),transparent 100%),
		radial-gradient(1px 1px at 96% 82%,rgba(255,225,175,.55),transparent 100%),
		radial-gradient(1px 1px at 37% 72%,rgba(255,201,138,.5),transparent 100%),
		radial-gradient(1px 1px at 88% 92%,rgba(255,225,175,.6),transparent 100%),
		radial-gradient(1px 1px at 45% 55%,rgba(255,225,175,.5),transparent 100%),
		radial-gradient(1px 1px at 30% 8%,rgba(255,201,138,.5),transparent 100%),
		radial-gradient(1px 1px at 60% 5%,rgba(255,225,175,.55),transparent 100%);
	background-repeat:no-repeat;background-size:100% 100%;
}
/* The ~20 brighter/larger stars promoted to real elements so
   js/starfield-motion.js (Motion, npm) can animate their opacity between a
   dim and bright value on a loop — see that file for the twinkle timings.
   Position/size/colour are set inline per star from section-global.php's
   PHP array, matching the point they replace out of .s-globe::before above.
   The 0.5 opacity here is only the pre-JS/no-JS/reduced-motion fallback;
   js/starfield-motion.js overrides it (a fixed opacity under reduced
   motion, an animated one otherwise). */
.s-globe__star{
	position:absolute;z-index:0;pointer-events:none;border-radius:50%;
	width:var(--star-size);height:var(--star-size);
	background:rgba(var(--star-color),1);
	box-shadow:0 0 6px 1px rgba(var(--star-color),.7);
	transform:translate(-50%,-50%) scale(1);
	opacity:.5;
}
.s-globe__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,530px);gap:var(--s-8);align-items:center}
.s-globe__copy{max-width:32rem}
.s-globe__copy .s-kicker{color:#FFC98A}
.s-globe__copy h2{color:var(--on-dark);margin-bottom:var(--s-5)}
.s-globe__copy .s-lead{color:var(--on-dark-muted);margin:0}
/* The globe sits beside the copy as a calm companion, not a full-bleed
   feature (the owner found the 700px version too dominant, then asked for
   ~50px back once it was small): 530px across on desktop, 485px on a
   tablet, 355px on a phone — the ball itself is about 84% of that, the
   rest of the frame is the soft glow around it. It reaches a little into
   the section's own padding so the band doesn't grow tall around it. The
   film is rendered on this band's exact --ink, and the stage's round mask
   feathers the last few per cent of the frame into the band anyway, so no
   square edge can ever show around it. */
.s-globe__figure{margin:calc(var(--section-y) * -.2) 0;width:100%;max-width:530px;justify-self:end}
.s-globe__stage{
	position:relative;width:100%;aspect-ratio:1/1;
	-webkit-mask-image:radial-gradient(closest-side,#000 88%,transparent 100%);
	mask-image:radial-gradient(closest-side,#000 88%,transparent 100%);
}
.s-globe__poster,.s-globe__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.s-globe__video{opacity:0;transition:opacity var(--dur-slow) var(--ease)}
.s-globe__video.is-playing{opacity:1}
@media (max-width:899px){
	.s-globe__grid{grid-template-columns:1fr;gap:var(--s-5)}
	.s-globe__copy{max-width:none}
	.s-globe__figure{max-width:485px;margin:0 auto calc(var(--section-y) * -.3);justify-self:center}
}
@media (max-width:699px){
	.s-globe__figure{max-width:355px;margin:0 auto calc(var(--section-y) * -.3)}
}

/* =====================================================================
   10. BANDS AND THE CLOSE
   ===================================================================== */
/* Full-bleed photo (or film) with a centred light heading. The scrim is a
   plum wash rather than black, and it is what keeps the white text above
   4.5:1 — darkened a touch further than a plain photo needs, since a moving
   background reads lighter than a still one.
   A compact band, not another hero: short enough that the video reads as a
   texture behind three lines of copy, not a second full-bleed section. */
.s-band{
	position:relative;display:flex;align-items:center;overflow:hidden;
	min-height:clamp(220px,24vw,340px);padding:clamp(1.5rem,4vw,2.75rem) 0;
	background:var(--ink-deep);color:var(--on-dark);text-align:center;
}
.s-band__img,.s-band__poster,.s-band__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* The poster is the still everyone gets first (and the whole experience
   under reduced motion, §19); the film fades in over it once it is
   actually playing (js/main.js), same as the About header's own video. */
.s-band__video{opacity:0;transition:opacity 1.2s var(--ease)}
.s-band__video.is-playing{opacity:1}
.s-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(30,8,35,.6),rgba(30,8,35,.68))}
.s-band__inner{position:relative;z-index:2;width:100%}
.s-band h2{margin:0 auto var(--s-5);color:var(--on-dark)}
.s-band p{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:40rem;margin:0 auto var(--s-4);color:#F1EAF2}

.s-close__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.s-close__cat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-5);align-items:start;padding-right:var(--s-8)}
.s-close__ask{padding-left:var(--s-8);border-left:1px solid var(--line)}
.s-close__cover{display:block;width:clamp(120px,12vw,168px);background:var(--mist)}
.s-close__cover img{width:100%;height:auto;transition:transform var(--dur-slow) var(--ease)}
.s-close__cover:hover img{transform:scale(1.03)}
.s-close__title{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);line-height:1.25;font-weight:400;margin:0 0 var(--s-3)}
.s-close__text{color:var(--muted);margin:0 0 var(--s-4);max-width:40ch}
.s-close__meta{font-size:var(--fs-fine);color:var(--muted);margin:0}
.s-close .s-more{min-height:0;margin-bottom:var(--s-2)}
@media (max-width:899px){
	.s-close__grid{grid-template-columns:1fr;gap:var(--s-7)}
	.s-close__cat{padding-right:0}
	.s-close__ask{padding-left:0;border-left:0;padding-top:var(--s-7);border-top:1px solid var(--line)}
}
@media (max-width:480px){.s-close__cat{grid-template-columns:1fr}}

/* =====================================================================
   11. INNER PAGE HEROES
   ===================================================================== */
/* Compact white hero: About, Contact, News, legal pages. */
.s-phero{padding:var(--s-8) 0 var(--s-7);border-bottom:1px solid var(--line);background:var(--paper)}
.s-phero__glow{display:none}
.s-phero__inner{position:relative}
.s-phero h1{margin-bottom:var(--s-4)}
.s-phero .s-lead{margin:0}
.s-phero--split .s-phero__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-7);align-items:center}
.s-phero__media{aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.s-phero__media img{width:100%;height:100%;object-fit:cover}
/* A film in place of the photo (About): the poster still under the video,
   which fades in once it is actually playing (js/main.js). */
.s-phero__media--video{position:relative;background:var(--ink-deep)}
.s-phero__poster,.s-phero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.s-phero__video{opacity:0;transition:opacity 1.2s var(--ease)}
.s-phero__video.is-playing{opacity:1}
@media (max-width:899px){.s-phero--split .s-phero__grid{grid-template-columns:1fr;gap:var(--s-6)}}
@media (min-width:1024px){.s-phero{padding:var(--s-9) 0 var(--s-8)}}

/* Full-bleed backdrop mode (Contact): a photo/graphic fills the whole hero
   behind the breadcrumb/title/lead instead of sitting beside them, with the
   same plum-wash scrim as .s-fhero/.s-band so white text stays legible
   wherever the artwork's own lighter areas fall. */
.s-phero--bg{position:relative;overflow:hidden;border-bottom:0;background:var(--ink-deep);color:var(--on-dark);min-height:clamp(280px,32vw,420px);display:flex;align-items:center}
.s-phero__bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.s-phero--bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(30,8,35,.62),rgba(30,8,35,.74))}
.s-phero--bg .s-phero__inner{position:relative;z-index:2;width:100%}
.s-phero--bg h1{color:var(--on-dark)}
.s-phero--bg .s-lead{color:#EEE6EF}
.s-phero--bg .s-label{color:var(--on-dark)}
.s-phero--bg .s-crumbs,.s-phero--bg .s-crumbs a{color:#EEE6EF}
.s-phero--bg .s-crumbs a:hover{color:var(--on-dark)}
.s-phero--bg :focus-visible{outline-color:var(--aqua)}

/* Family page: full-bleed graded photo, white type over a plum wash. */
.s-fhero{
	position:relative;display:flex;align-items:flex-end;overflow:hidden;
	min-height:clamp(360px,34vw,480px);padding:var(--s-8) 0 var(--s-7);
	background:var(--ink-deep);color:var(--on-dark);
}
.s-fhero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-fhero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(30,8,35,.86) 0%,rgba(30,8,35,.5) 55%,rgba(30,8,35,.25) 100%)}
.s-fhero__inner{position:relative;z-index:2;width:100%}
.s-fhero h1{color:var(--on-dark);margin-bottom:var(--s-4)}
.s-fhero .s-lead{color:#EEE6EF;margin:0 0 var(--s-4)}
.s-fhero .s-label{color:var(--on-dark);margin:0;display:flex;align-items:baseline}
.s-fhero .s-crumbs,.s-fhero .s-crumbs a{color:#EEE6EF}
.s-fhero :focus-visible{outline-color:var(--aqua)}

/* Sub-category: compact, the photo as a right-hand panel. */
.s-shero{padding:var(--s-6) 0 var(--s-7);border-bottom:1px solid var(--line)}
.s-shero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7);align-items:center}
.s-shero h1{margin-bottom:var(--s-3)}
.s-shero .s-label{display:flex;align-items:baseline;margin-bottom:var(--s-4)}
.s-shero .s-lead{margin:0}
.s-shero__media{aspect-ratio:3/2;max-height:320px;overflow:hidden;background:var(--mist)}
.s-shero__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:699px){.s-shero__grid{grid-template-columns:1fr}.s-shero__media{display:none}}

/* Breadcrumbs */
.s-crumbs{font-size:var(--fs-fine);color:var(--muted);margin:0 0 var(--s-5);display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-2)}
.s-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;margin:-10px 0}
.s-crumbs a:hover{color:var(--ink);text-decoration:underline}
.s-crumbs > span[aria-hidden]{opacity:.6}

/* =====================================================================
   12. PRODUCTS HUB, FAMILY AND RANGE PAGES
   ===================================================================== */
/* Finder (the hub's hero). data-* hooks live in js/product-finder.js. */
.s-finder{max-width:44rem;margin-top:var(--s-6)}
.s-finder__label{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;color:var(--muted);margin-bottom:var(--s-2)}
.s-finder__input{width:100%}
.s-finder__status{margin:var(--s-2) 0 0;font-size:var(--fs-fine);color:var(--muted);min-height:1.5em}
.s-finder__results{list-style:none;margin:var(--s-4) 0 0;padding:0;border-top:1px solid var(--line)}
.s-finder__result a{
	display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-1) var(--s-4);
	padding:var(--s-4) 0;border-bottom:1px solid var(--line);
	color:var(--ink);text-decoration:none;
}
.s-finder__result a:hover .s-finder__result-name{text-decoration:underline}
.s-finder__result-name{font-size:1.125rem;font-weight:500}
.s-finder__result-meta{font-size:var(--fs-fine);color:var(--muted)}
.s-finder__ranges{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.s-finder__ranges a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--cta);text-underline-offset:.22em}
.s-finder__empty{margin-top:var(--s-4);padding:var(--s-5);background:var(--mist);color:var(--ink)}
.s-finder__empty p{margin:0}
.s-finder__ask{margin-top:var(--s-3) !important}
.s-finder__ask a{font-weight:500}

/* Hub: one row per family, alternating. */
.s-famrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:center}
.s-famrow + .s-famrow{margin-top:var(--section-y);padding-top:var(--section-y);border-top:1px solid var(--line)}
.s-famrow--flip .s-famrow__media{order:2}
.s-famrow__media{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/3;padding:var(--s-6) 0 var(--s-5);background:var(--mist);text-decoration:none}
.s-famrow__media .s-trio{--h:clamp(170px,24vw,300px)}
.s-famrow__title{margin-bottom:var(--s-3)}
.s-famrow__title a{color:inherit;text-decoration:none}
.s-famrow__title a:hover{text-decoration:underline;text-decoration-thickness:1px}
.s-famrow .s-label{display:flex;align-items:baseline}
.s-famrow .s-lead{margin-bottom:var(--s-5)}
@media (max-width:899px){
	.s-famrow{grid-template-columns:1fr;gap:var(--s-5)}
	.s-famrow--flip .s-famrow__media{order:0}
	.s-famrow__media{aspect-ratio:16/9}
	.s-famrow__media .s-trio{--h:clamp(150px,36vw,240px)}
}

/* A list of ranges with their counts: the hub rows and the sibling list. */
.s-ranges{list-style:none;margin:0 0 var(--s-5);padding:0;border-top:1px solid var(--line)}
.s-ranges a{
	display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
	min-height:52px;padding:var(--s-2) 0;border-bottom:1px solid var(--line);
	color:var(--ink);text-decoration:none;
}
.s-ranges a:hover .s-ranges__name{text-decoration:underline}
.s-ranges__count{flex:none;font-size:var(--fs-fine);color:var(--muted);font-variant-numeric:tabular-nums}
.s-ranges a[aria-current] .s-ranges__name{font-weight:500}

/* Catalogue downloads on the hub. */
.s-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
.s-cats a{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.s-cats__cover{display:block;aspect-ratio:1;overflow:hidden;background:var(--mist);margin-bottom:var(--s-4)}
.s-cats__cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.s-cats a:hover .s-cats__cover img{transform:scale(1.03)}
.s-cats__title{font-size:1.0625rem;font-weight:500;line-height:1.35;margin:0 0 var(--s-1)}
.s-cats a:hover .s-cats__title{text-decoration:underline}
.s-cats__meta{font-size:var(--fs-fine);color:var(--muted);margin:0 0 var(--s-2)}
.s-cats .s-more{min-height:0;font-size:var(--fs-fine);margin-top:auto}
@media (max-width:1023px){.s-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.s-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-4)}}

/* Family page: the ranges as tiles. */
.s-rtiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--s-5)}
.s-rtiles > li{display:flex}
.s-rtile{display:flex;flex-direction:column;width:100%;color:var(--ink);text-decoration:none}
.s-rtile__shot{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--mist);margin-bottom:var(--s-4)}
.s-rtile__shot img{height:82%;width:auto;transition:transform var(--dur-slow) var(--ease)}
.s-rtile:hover .s-rtile__shot img{transform:scale(1.03)}
.s-rtile__shot--empty{flex-direction:column;gap:var(--s-2);padding:var(--s-5);text-align:center;color:var(--muted);font-size:var(--fs-fine)}
.s-rtile__name{font-size:1.125rem;line-height:1.35;font-weight:500;margin:0 0 var(--s-1)}
.s-rtile:hover .s-rtile__name{text-decoration:underline}
.s-rtile__meta{font-size:var(--fs-fine);color:var(--muted);margin:0 0 var(--s-2)}
.s-rtile .s-more{min-height:0;font-size:var(--fs-fine);margin-top:auto}
@media (max-width:699px){.s-rtiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}}

/* Two-column copy: heading at left, text at right. */
.s-twocol{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7)}
.s-twocol > :first-child h2{margin:0}
.s-twocol--text{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8)}
.s-twocol--text > :first-child h2{margin:0 0 var(--s-4)}
@media (max-width:899px){.s-twocol{grid-template-columns:1fr;gap:var(--s-5)}}

/* Range page: products grid, 4 / 3 / 2. */
.s-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-7) var(--s-5)}
@media (max-width:1023px){.s-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.s-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-4)}}
.s-tiles .s-tile[hidden]{display:none}

.s-subfilter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-6)}
.s-subfilter__label{flex-basis:100%;font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;color:var(--muted)}
.s-subfilter__input{
	flex:0 1 24rem;min-width:0;min-height:48px;padding:0 14px;
	background:var(--paper);color:var(--ink);border:1px solid var(--mist-2);border-radius:var(--radius);font:inherit;
}
.s-subfilter__input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.s-subfilter__input::placeholder{color:var(--muted);opacity:1}
.s-subfilter__count{margin:0;font-size:var(--fs-fine);color:var(--muted)}
.s-subfilter__empty{margin-top:var(--s-5)}
.s-subfilter__empty a{font-weight:500}

.s-onrequest{max-width:40rem}
.s-onrequest .s-lead{margin-bottom:var(--s-5)}

.s-askline{padding:var(--s-6) 0;border-top:1px solid var(--line);text-align:center}
.s-askline p{margin:0;font-size:var(--fs-lead);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-1) var(--s-3)}

/* =====================================================================
   13. DATASHEET PAGE
   ===================================================================== */
.s-sheet{padding:var(--s-6) 0 var(--section-y)}
.s-sheet__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
.s-sheet__media{position:sticky;top:calc(var(--header-h) + var(--s-5));aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:var(--mist)}
.s-sheet__media img{height:88%;width:auto}
.s-sheet h1{margin-bottom:var(--s-3)}
.s-sheet .s-label{display:flex;align-items:baseline;margin-bottom:var(--s-5)}
.s-sheet__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);margin:0 0 var(--s-2)}
.s-sheet__size{font-size:var(--fs-fine);color:var(--muted);margin:0}
.s-sheetfacts{margin:var(--s-7) 0 0;border-top:1px solid var(--line)}
.s-sheetfacts__row{display:grid;grid-template-columns:minmax(8rem,11rem) minmax(0,1fr);gap:var(--s-5);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.s-sheetfacts dt{font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;color:var(--muted);padding-top:2px}
.s-sheetfacts dd{margin:0;line-height:var(--lh-body);overflow-wrap:anywhere}
.s-sheetnote{margin:var(--s-5) 0 0;font-size:var(--fs-fine);line-height:1.57;color:var(--muted);max-width:60ch}
.s-sheetnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-4);margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line)}
.s-sheetnav__link{display:inline-flex;align-items:center;gap:var(--s-3);min-height:48px;color:var(--ink);text-decoration:none;max-width:100%}
.s-sheetnav__link:hover{text-decoration:underline}
.s-sheetnav__link--next{justify-self:end;text-align:right}
.s-sheetnav__link small{display:block;font-size:var(--fs-label);color:var(--muted)}
.s-sheetnav__link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.s-sheetnav__link svg{flex:none;color:var(--cta)}
.s-sheetnav__all{justify-self:center;text-align:center;font-size:var(--fs-fine);color:var(--muted);text-decoration:none}
.s-sheetnav__all:hover{color:var(--ink);text-decoration:underline}
@media (max-width:899px){
	.s-sheet__grid{grid-template-columns:1fr;gap:var(--s-6)}
	.s-sheet__media{position:static;aspect-ratio:auto;height:clamp(260px,70vw,380px)}
}
@media (max-width:699px){
	.s-sheetfacts__row{grid-template-columns:1fr;gap:var(--s-1)}
	.s-sheetnav{grid-template-columns:1fr 1fr}
	.s-sheetnav__all{grid-column:1 / -1;order:3;padding-top:var(--s-2)}
}

/* =====================================================================
   14. ABOUT PAGE
   ===================================================================== */
.s-supply{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.s-supply li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;gap:var(--s-5);align-items:baseline;padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.s-supply h3{display:flex;align-items:baseline;margin:0;font-size:1.25rem}
.s-supply p{margin:0;color:var(--muted)}
.s-supply .s-more{min-height:0;font-size:var(--fs-fine)}
@media (max-width:899px){.s-supply li{grid-template-columns:1fr;gap:var(--s-2)}}

.s-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7)}
.s-ways h3{margin-bottom:var(--s-3)}
.s-ways p{color:var(--muted);margin:0;max-width:34ch}
@media (max-width:899px){.s-ways{grid-template-columns:1fr;gap:var(--s-6)}}

.s-partner{display:grid;grid-template-columns:minmax(0,7fr) auto;gap:var(--s-6);align-items:end}
.s-partner h2{margin-bottom:var(--s-4)}
.s-partner p{margin:0;color:var(--muted);max-width:52ch;font-size:var(--fs-lead);line-height:var(--lh-lead)}
@media (max-width:699px){.s-partner{grid-template-columns:1fr}}

/* =====================================================================
   15. CONTACT PAGE AND FORMS
   ===================================================================== */
.s-contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8);align-items:start}
@media (max-width:899px){.s-contact{grid-template-columns:1fr;gap:var(--s-7)}}
.s-contact h2{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);margin-bottom:var(--s-5)}
.s-contact__aside{display:grid;gap:var(--s-6)}
.s-contact__details{padding:var(--s-6);background:var(--mist)}
.s-contact__dtitle{font-size:1.25rem;font-weight:500;margin:0 0 var(--s-4)}
.s-contact__list{margin:0;display:grid;gap:var(--s-4)}
.s-contact__list dt{font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;color:var(--muted)}
.s-contact__list dd{margin:0;white-space:pre-line}
.s-contact__list a{color:var(--ink)}
.s-contact__social{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--mist-2)}
/* Card treatment matching .s-contact__details, so the aside reads as one
   consistent set of boxes rather than the details card floating alone. */
.s-useful{padding:var(--s-6);background:var(--mist)}
.s-useful h2{font-size:1.25rem;font-weight:500;margin:0 0 var(--s-3)}
.s-useful ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--mist-2)}
.s-useful li{padding:var(--s-3) 0;border-bottom:1px solid var(--mist-2);color:var(--muted)}

/* A hairline frame around the form gives it the same quiet structure as the
   aside cards, instead of the fields floating loose on bare white. */
.s-contact__form{padding:var(--s-6);border:1px solid var(--mist-2)}
@media (max-width:599px){.s-contact__form{padding:var(--s-5)}}

.s-form{display:grid;gap:var(--s-5)}
.s-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:599px){.s-field-row{grid-template-columns:1fr}}
.s-field label{display:block;font-size:.9375rem;font-weight:500;margin-bottom:var(--s-2)}
.s-field input,.s-field select,.s-field textarea{
	width:100%;min-height:48px;padding:0 14px;
	background:var(--paper);color:var(--ink);
	border:1px solid var(--mist-2);border-radius:var(--radius);
	font:inherit;
}
.s-field textarea{padding:12px 14px;min-height:10rem;resize:vertical;line-height:1.5}
.s-field select{
	appearance:none;-webkit-appearance:none;padding-right:44px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23300D37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;
}
.s-field input:hover,.s-field select:hover,.s-field textarea:hover{border-color:var(--muted)}
.s-field input:focus,.s-field select:focus,.s-field textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.s-field input:user-invalid,.s-field textarea:user-invalid{border-color:var(--danger)}
.s-field input::placeholder,.s-field textarea::placeholder{color:var(--muted);opacity:1}
.s-field__hint{display:block;margin-top:var(--s-1);font-size:var(--fs-fine);color:var(--muted)}
.s-req{color:var(--cta-ink)}
.s-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.s-form__foot p{margin:0}
.s-form__foot a{color:var(--ink)}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.s-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.s-note{padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5);border-left:2px solid;font-size:.9375rem;line-height:1.5}
.s-note--ok{background:#EEF6F1;border-color:var(--success);color:var(--success)}
.s-note--bad{background:#FBEFF0;border-color:var(--danger);color:var(--danger)}

.s-search{display:flex;gap:var(--s-3);max-width:32rem}
.s-search input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--mist-2);border-radius:var(--radius);font:inherit;color:var(--ink);background:var(--paper)}
.s-search input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.s-search input::placeholder{color:var(--muted);opacity:1}

/* =====================================================================
   16. NEWS, PROSE, CARDS, PAGINATION
   ===================================================================== */
.s-prose{max-width:var(--measure)}
.s-prose p,.s-prose ul,.s-prose ol{color:var(--ink)}
.s-prose h2{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);margin-top:1.6em}
.s-prose h3{margin-top:1.5em}
.s-prose ul,.s-prose ol{margin:0 0 1.1em 1.15em;padding:0}
.s-prose li{margin:.3em 0}
.s-prose strong{font-weight:600}
.s-post__cover{aspect-ratio:21/9;overflow:hidden;margin-bottom:var(--s-7);background:var(--mist)}
.s-post__cover img{width:100%;height:100%;object-fit:cover}

/* A card is space, not a box: a hairline on top, or a photo. */
.s-card{position:relative;display:flex;flex-direction:column;padding-top:var(--s-5);border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.s-card:has(.s-card__media){padding-top:0;border-top:0}
.s-card__media{display:block;aspect-ratio:3/2;overflow:hidden;margin-bottom:var(--s-4);background:var(--mist)}
.s-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
a.s-card:hover .s-card__media img{transform:scale(1.03)}
a.s-card:hover h2,a.s-card:hover h3{text-decoration:underline;text-decoration-thickness:1px}
.s-card h2,.s-card h3{font-size:1.25rem;line-height:1.35;font-weight:500;margin:0 0 var(--s-2)}
.s-card p{color:var(--muted);margin:0 0 var(--s-3)}
.s-card__n{font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;color:var(--muted);margin-bottom:var(--s-2);font-variant-numeric:tabular-nums}
.s-card__more{display:inline-flex;align-items:center;gap:.35em;margin-top:auto;font-weight:500;color:var(--ink)}
.s-card__more::after{content:"";width:.9em;height:.9em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--cta)}
.s-card__title--sm{font-size:1.125rem}

/* Newsroom resources: three text blocks on mist. */
.s-segs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s-seg--dark{padding:var(--s-6);background:var(--mist)}
.s-seg--dark .s-seg__n{display:none}
.s-seg__cta{display:inline-flex;align-items:center;gap:.4em;margin-top:auto;padding-top:var(--s-3);font-weight:500}
.s-seg__cta svg{color:var(--cta)}
@media (max-width:899px){.s-segs--3{grid-template-columns:1fr}}

/* Catalogue bar (newsroom). */
.s-catbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5) var(--s-6);padding:var(--s-6);background:var(--mist)}
.s-catbar__cover{flex:none;width:112px}
.s-catbar__cover img{width:100%;height:auto}
.s-catbar__body{flex:1 1 16rem;min-width:0}
.s-catbar__title{font-size:1.25rem;font-weight:500;margin:0 0 var(--s-1)}
.s-catbar__text{color:var(--muted);margin:0}
.s-catbar__meta{font-size:var(--fs-fine);color:var(--muted);margin:var(--s-2) 0 0}
.s-catbar__action{flex:none}

.s-empty{max-width:40rem}
.s-empty__title{margin-bottom:var(--s-4)}
.s-empty__text{color:var(--muted)}
.s-empty__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

.s-pagination{margin-top:var(--s-7)}
.s-pagination .nav-links{display:flex;gap:var(--s-2);flex-wrap:wrap}
.s-pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 var(--s-3);
	border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;
}
.s-pagination .page-numbers:hover{border-color:var(--ink)}
.s-pagination .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* =====================================================================
   17. FOOTER — plum-tinted mist
   ===================================================================== */
.s-footer{background:linear-gradient(to bottom,var(--mist),var(--mist-2));color:var(--ink)}
.s-footer__cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--s-7);padding-top:var(--s-8);padding-bottom:var(--s-7)}
.s-logo--footer .s-logo__img{height:64px}
.s-footer__col--brand p{color:var(--muted);max-width:38ch;margin:var(--s-5) 0 var(--s-4)}
.s-footer__h{font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;color:var(--muted);margin:0 0 var(--s-3)}
.s-footer__col ul{list-style:none;margin:0;padding:0}
.s-footer__col li{margin:0}
.s-footer__col li a,.s-footer__col li > span{display:inline-flex;align-items:center;min-height:36px;color:var(--ink);text-decoration:none}
.s-footer__col li a:hover{text-decoration:underline;text-decoration-color:var(--cta)}
.s-footer__contact li{color:var(--ink);white-space:pre-line}
.s-social{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.s-social a{color:var(--ink)}
.s-footer__bar{border-top:1px solid rgba(48,13,55,.12)}
.s-footer__bar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);padding-top:var(--s-4);padding-bottom:var(--s-4)}
.s-footer__bar small{font-size:var(--fs-fine);color:var(--muted)}
.s-footer__legal{display:flex;flex-wrap:wrap;gap:0 var(--s-5);margin-left:auto}
.s-footer__legal a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-fine);color:var(--muted);text-decoration:none}
.s-footer__legal a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:1023px){.s-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}.s-footer__col--brand{grid-column:1 / -1}}
@media (max-width:599px){.s-footer__cols{grid-template-columns:1fr 1fr;gap:var(--s-6)}.s-footer__legal{margin-left:0}}

/* =====================================================================
   18. UTILITIES
   Last on purpose: single classes that win by coming after the components.
   ===================================================================== */
.s-mt-3{margin-top:var(--s-3)}
.s-mt-5{margin-top:var(--s-5)}
.s-mt-6{margin-top:var(--s-6)}
.s-mt-7{margin-top:var(--s-7)}
.s-mb-5{margin-bottom:var(--s-5)}
.s-mb-7{margin-bottom:var(--s-7)}
.s-plain-link{color:inherit;text-decoration:none}

/* =====================================================================
   19. REDUCED MOTION
   The About header, the home "about, briefly" band and the "Supplied from
   Malaysia" globe all show their still (js/main.js never loads the video),
   the home carousel does not advance by itself (js/hero-carousel.js), and
   every transition collapses to an instant change.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
	.s-phero__video,.s-band__video,.s-globe__video{display:none}
	a:hover img,.s-tile:hover img{transform:none !important}
	/* The hero's entrance (§6) keeps its end state but skips the stagger's
	   wait too, or the text would sit invisible while its delay ran down. */
	.chero__label,.chero__title,.chero__sub,.chero__actions .s-btn,.chero__actions .s-more{animation-delay:0ms !important}
}

/* =====================================================================
   20. LEGACY OCEAN COMPONENTS
   Used only by the draft pages (Aziz, Aquaculture, Ocean-Friendly Living,
   Fish Tales), which are not in the sitemap. Reskinned via the aliases in
   §1. Delete this block once those pages are retired for good.
   ===================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.btn{
	display:inline-block;background:var(--cta);color:var(--ink);
	font-family:var(--font);font-weight:500;font-size:1rem;
	padding:.75rem 1.5rem;border-radius:var(--radius);text-decoration:none;border:none;cursor:pointer;
	transition:background var(--dur) var(--ease);
}
.btn:hover{background:var(--cta-hover)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.section{position:relative;padding:var(--section-y) 0;background:var(--paper)}
.section--alt{background:var(--mist)}
.section--center{text-align:center}
.kicker{display:inline-block;color:var(--muted);font-weight:600;letter-spacing:.04em;font-size:var(--fs-label);margin-bottom:var(--s-3)}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:var(--measure);margin-left:auto;margin-right:auto}
.wave-divider{display:block;width:100%;height:70px;margin-bottom:-1px;fill:var(--mist)}
.wave-divider--flip{transform:scaleY(-1)}
.deco{position:absolute;pointer-events:none;opacity:.35}
.deco--left{left:-30px;top:60px;width:150px}
.deco--right{right:-30px;bottom:60px;width:150px}
@media (max-width:820px){.deco{display:none}}
.hero{padding:var(--s-9) 0 var(--s-8);text-align:center;position:relative;background:var(--mist)}
.hero .lead{margin-top:var(--s-2)}
.hero h1{margin-left:auto;margin-right:auto}
.hero__video{margin:var(--s-7) auto 0;max-width:820px;overflow:hidden;aspect-ratio:16/9;background:var(--ink-deep)}
.hero__video iframe{width:100%;height:100%;border:0;display:block}
.quiz-card{max-width:640px;margin:var(--s-7) auto 0;background:var(--paper);border:1px solid var(--line);padding:var(--s-6);text-align:center}
.quiz-card__q{font-size:1.125rem;min-height:4.5em}
.quiz-card__answers{display:flex;gap:var(--s-4);justify-content:center;margin:var(--s-5) 0}
.quiz-card__answers .btn{min-width:120px}
.quiz-card__feedback{min-height:2.2em;font-weight:600}
.quiz-card__feedback.ok{color:var(--success)}
.quiz-card__feedback.no{color:var(--danger)}
.quiz-card__meta{color:var(--muted);font-size:var(--fs-fine);margin-top:var(--s-3)}
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.teaser--flip .teaser__art{order:2}
.teaser__art{display:flex;justify-content:center}
.teaser__art svg,.teaser__art img{width:min(380px,80%)}
@media (max-width:820px){.teaser{grid-template-columns:1fr;gap:var(--s-6);text-align:center}.teaser--flip .teaser__art{order:0}}
.dyk{background:var(--mist);padding:var(--s-6);max-width:760px;margin:var(--s-7) auto 0;text-align:center}
.dyk h3{color:var(--cta-ink);margin-bottom:.4em}
.grid{display:grid;gap:var(--s-5);margin-top:var(--s-7)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--3,.grid--4{grid-template-columns:1fr}}
.stat{background:var(--paper);padding:var(--s-6) var(--s-5);text-align:center;border-top:1px solid var(--line)}
.stat svg,.stat img{width:74px;height:74px;margin:0 auto var(--s-4)}
.stat h4{margin-bottom:.3em}
.stat p{margin:0;color:var(--muted)}
.bigquote{max-width:720px;margin:0 auto;text-align:center;font-weight:300;font-size:var(--fs-h3);line-height:1.3}
.bigquote cite{display:block;margin-top:var(--s-4);font-size:1rem;color:var(--muted);font-style:normal}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-7)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:var(--paper);overflow:hidden;border-top:1px solid var(--line);display:flex;flex-direction:column}
.card__img{aspect-ratio:4/3;background:var(--mist);display:flex;align-items:center;justify-content:center}
.card__img svg{width:55%}
.card__body{padding:var(--s-5) 0;flex:1;display:flex;flex-direction:column}
.card__loc{color:var(--muted);font-weight:600;font-size:var(--fs-label);letter-spacing:.04em;margin-bottom:var(--s-3)}
.card__body p{color:var(--muted)}
.card__facts{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line);font-size:var(--fs-fine);color:var(--muted)}
.card__facts span{display:block}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.floaty{animation:floaty 5s ease-in-out infinite}