/*
 * Surfact Horizon — «الأفق»
 * Navy-led corporate site: full-bleed steel and laboratory photography under navy shades, the logo's gold wave
 * and gold rules as the only ornaments, Alexandria for headings and IBM Plex Sans Arabic for reading.
 * Logical properties throughout, so Arabic (RTL) and English (LTR) mirror from one stylesheet.
 */

@layer reset, tokens, base, layout, components, pages, motion;

/* ---------- Fonts (self-hosted, SIL OFL 1.1) ---------- */
@font-face {
	font-family: "Alexandria";
	src: url("../fonts/alexandria-arabic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "Alexandria";
	src: url("../fonts/alexandria-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	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: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-arabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-arabic-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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: "IBM Plex Sans Arabic"; src: url("../fonts/plex-arabic-latin-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; 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; }

/* ---------- Reset ---------- */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
	ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
	img, svg, video, iframe { display: block; max-width: 100%; }
	img { height: auto; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { cursor: pointer; }
	a { color: inherit; }
	[hidden] { display: none !important; }
}

/* ---------- Tokens ---------- */
@layer tokens {
	:root {
		/* Colour, sampled from the official logo */
		--navy: #002B55;
		--navy-deep: #001E44;
		--abyss: #00142E;
		--gold: #BC9746;
		--gold-hi: #E2BB5E;
		--gold-ink: #876421;
		--pearl: #F5F7FA;
		--steel: #E6EBF1;
		--white: #FFFFFF;
		--ink: #0B1B33;
		--text: #22324A;
		--mute: #4D5B71;
		--line: #D9E0E8;
		--line-strong: #B9C5D3;
		--error: #B42318;
		--success: #0F6B43;

		/* Type */
		--font-display: "Alexandria", "Segoe UI", Tahoma, Arial, sans-serif;
		--font-text: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
		--fs-body: 1.0625rem;
		--lh-body: 1.75;
		--lh-head: 1.15;
		--lh-display: 1.08;
		--fs-display: clamp(1.75rem, .9rem + 4vw, 5.1rem);
		--fs-page: clamp(1.6rem, 1rem + 2.8vw, 3.9rem);
		--fs-h2: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
		--fs-h3: clamp(1.1rem, .95rem + .45vw, 1.4rem);
		--fs-lead: clamp(1.12rem, 1rem + .45vw, 1.4rem);
		--fs-small: .875rem;

		/* Layout */
		--container: 1320px;
		--gutter: clamp(16px, 4vw, 56px);
		--section: clamp(72px, 8.5vw, 136px);
		--radius: 6px;
		--radius-lg: 12px;
		--header-h: 104px;
		--ease: cubic-bezier(.2, .7, .2, 1);
	}
	[dir="rtl"] {
		--fs-body: 1.125rem;
		--lh-body: 1.95;
		--lh-head: 1.45;
		--lh-display: 1.32;
	}
}

/* ---------- Base ---------- */
@layer base {
	html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
	body {
		background: var(--white);
		color: var(--text);
		font-family: var(--font-text);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		font-weight: 400;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
	}
	html.menu-open body { overflow: hidden; }
	h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); line-height: var(--lh-head); font-weight: 700; text-wrap: balance; }
	p { text-wrap: pretty; }
	a { text-underline-offset: .2em; }
	bdi[dir="ltr"] { unicode-bidi: isolate; }
	::selection { background: var(--gold-hi); color: var(--abyss); }
	:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
	.section--dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .cta-band :focus-visible, .topbar :focus-visible, .site-footer__bar :focus-visible, .statement-band :focus-visible { outline-color: var(--gold-hi); }
	.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: var(--radius); font-weight: 600; text-decoration: none; }
	.skip-link:focus { top: 12px; }
	.site-main:focus { outline: none; }
	.core-missing { padding: 48px 24px; }
}

/* ---------- Layout ---------- */
@layer layout {
	.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
	.section { padding-block: var(--section); }
	.section--pearl { background: var(--pearl); }
	.section--dark { background: var(--abyss); color: rgba(255, 255, 255, .84); }
	.section--dark h2, .section--dark h3 { color: var(--white); }
}

/* ---------- Components ---------- */
@layer components {
	/* Icons and arrows: forward arrows point to the reading direction */
	.icon { width: 1.25em; height: 1.25em; flex: none; }
	[dir="rtl"] .icon--arrow { transform: scaleX(-1); }

	/* Buttons */
	.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding-inline: 28px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease); }
	.btn:hover { transform: translateY(-2px); }
	.btn:active { transform: translateY(0); }
	.btn--gold { background: var(--gold); color: var(--abyss); }
	.btn--gold:hover { background: var(--gold-hi); }
	.btn--navy { background: var(--navy); color: var(--white); }
	.btn--navy:hover { background: var(--navy-deep); }
	.btn--light { border-color: rgba(255, 255, 255, .72); color: var(--white); }
	.btn--light:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }
	.btn--line { border-color: var(--navy); color: var(--navy); }
	.btn--line:hover { background: var(--navy); color: var(--white); }
	.btn__arrow { transition: translate .25s var(--ease); }
	.btn:hover .btn__arrow { translate: 4px 0; }
	[dir="rtl"] .btn:hover .btn__arrow { translate: -4px 0; }

	.link-arrow { display: inline-flex; align-items: center; gap: .55em; margin-top: 28px; padding-block: 8px; font-family: var(--font-display); font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--gold); }
	.link-arrow .icon { transition: translate .25s var(--ease); }
	.link-arrow:hover .icon { translate: 4px 0; }
	[dir="rtl"] .link-arrow:hover .icon { translate: -4px 0; }
	.link-arrow--light { color: var(--white); }

	.kicker { display: block; width: 56px; height: 3px; background: var(--gold); margin-bottom: 22px; border-radius: 2px; }
	.section-title { font-size: var(--fs-h2); }
	.section-title--sm { font-size: clamp(1.45rem, 1.15rem + 1vw, 2.1rem); }
	.lead { font-size: var(--fs-lead); line-height: 1.85; color: var(--ink); font-weight: 500; }
	[dir="ltr"] .lead { line-height: 1.6; }
	.lead--xl { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.95rem); color: var(--navy); }
	.lead--wide { max-width: 64ch; margin-bottom: clamp(40px, 5vw, 64px); }
	.note { margin-top: 22px; font-size: var(--fs-small); color: var(--mute); }
	.note--light { color: rgba(255, 255, 255, .66); }

	.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }
	.section-head__side p { color: var(--mute); }
	.section-head__side .link-arrow { margin-top: 18px; }

	/* Statement (logo tagline) */
	.statement { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .22em; line-height: 1.4; }
	.statement__sep { width: 1px; height: 18px; background: var(--gold); }

	/* Contact strip */
	.topbar { background: var(--abyss); color: rgba(255, 255, 255, .8); font-size: 13.5px; }
	.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 40px; }
	.topbar__list { display: flex; align-items: center; gap: 28px; }
	.topbar__item { display: inline-flex; align-items: center; gap: 8px; line-height: 1.4; }
	.topbar__item .icon { color: var(--gold-hi); width: 16px; height: 16px; }
	.topbar a { text-decoration: none; }
	.topbar a:hover { color: var(--white); text-decoration: underline; }
	.topbar__social .social__link { width: 30px; height: 30px; border: 0; background: transparent; color: rgba(255, 255, 255, .8); }
	.topbar__social .social__link:hover { background: transparent; color: var(--gold-hi); }

	/* Header */
	.site-header { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease; }
	.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 30, 68, .08); }
	.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
	.site-header__brand { display: inline-flex; flex: none; }
	.site-header__logo { height: 82px; width: auto; transition: height .25s var(--ease); }
	.site-header.is-scrolled .site-header__logo { height: 62px; }
	.site-nav { display: flex; align-items: center; flex: 1; gap: 24px; }
	.site-nav__list { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 30px); margin-inline: auto; }
	.site-nav__link { position: relative; display: inline-block; padding-block: 10px; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none; white-space: nowrap; }
	.site-nav__link::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .25s var(--ease); }
	.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
	.site-nav__end { display: flex; align-items: center; gap: 16px; }
	.lang-switch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 6px; font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; }
	.lang-switch:hover { text-decoration: underline; }
	.lang-switch__icon { width: 18px; height: 18px; }
	.site-nav__cta { min-height: 48px; padding-inline: 24px; }
	.menu-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-inline-start: auto; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--white); color: var(--navy); }
	.menu-toggle .icon { width: 24px; height: 24px; }
	.menu-toggle__close { display: none; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

	/* Social */
	.social { display: flex; flex-wrap: wrap; gap: 10px; }
	.social__link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy); transition: background-color .2s ease, color .2s ease; }
	.social__link:hover { background: var(--navy); color: var(--white); }
	.social .icon--social { width: 20px; height: 20px; }

	/* Gold wave */
	.wave { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: clamp(56px, 8vw, 120px); pointer-events: none; z-index: 1; }
	.wave path { fill: none; vector-effect: non-scaling-stroke; }
	.wave__main { stroke: url(#ste-gold); stroke-width: 3; }
	.wave__echo { stroke: rgba(226, 187, 94, .38); stroke-width: 1.2; }

	/* Photo tiles (families on the home page) */
	.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.tile__link { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: var(--radius); isolation: isolate; color: var(--white); text-decoration: none; background: var(--navy-deep); }
	.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
	.tile__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 20, 46, .9) 0%, rgba(0, 20, 46, .2) 52%, rgba(0, 20, 46, 0) 100%); }
	.tile__link:hover .tile__img { transform: scale(1.05); }
	.tile__body { display: block; width: 100%; padding: clamp(18px, 2vw, 28px); }
	.tile__rule { display: block; width: 36px; height: 2px; background: var(--gold); margin-bottom: 14px; transition: width .4s var(--ease); }
	.tile__link:hover .tile__rule { width: 72px; }
	.tile__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.5; }
	[dir="ltr"] .tile__title { line-height: 1.25; }

	/* Industries strip */
	.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.strip__item { position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 4.3; overflow: hidden; isolation: isolate; background: var(--navy-deep); }
	.strip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85); transition: transform .9s var(--ease), filter .4s ease; }
	.strip__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 30, 68, .92), rgba(0, 30, 68, 0) 62%); }
	.strip__item:hover .strip__img { transform: scale(1.05); filter: none; }
	.strip__name { display: block; width: calc(100% - 44px); margin-inline: 22px; padding-block: 20px 24px; border-top: 2px solid var(--gold); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.5; }
	[dir="ltr"] .strip__name { line-height: 1.3; }

	/* Capability list */
	.caps { display: grid; border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 26px; }
	.caps li { display: flex; align-items: center; gap: 14px; padding-block: 15px; border-bottom: 1px solid rgba(255, 255, 255, .16); color: var(--white); font-family: var(--font-display); font-weight: 500; line-height: 1.5; }
	.caps li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(188, 151, 70, .2); }
	.caps--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }

	/* Pillars (quality, safety, sustainability) */
	.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
	.pillars__item { padding-top: 16px; border-top: 2px solid var(--gold); font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem); font-weight: 700; color: var(--navy); }
	.pillars--band { margin-top: 0; gap: clamp(18px, 3vw, 48px); }
	.pillars--band .pillars__item { color: var(--white); font-size: clamp(1.6rem, .8rem + 2.4vw, 3.4rem); padding-top: 26px; border-top-width: 3px; min-width: 0; overflow-wrap: anywhere; }

	/* Breadcrumb */
	.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .78); margin-bottom: 18px; }
	.crumbs__list li { display: inline-flex; align-items: center; gap: 10px; }
	.crumbs__list li + li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
	.crumbs a { text-decoration: none; }
	.crumbs a:hover { color: var(--white); text-decoration: underline; }
	.crumbs [aria-current="page"] { color: var(--white); }

	/* CTA band */
	.cta-band { background: var(--navy); color: var(--white); }
	.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; padding-block: clamp(48px, 6vw, 80px); flex-wrap: wrap; }
	.cta-band__title { color: var(--white); font-size: var(--fs-h2); }
	.cta-band__intro { margin-top: 12px; max-width: 58ch; color: rgba(255, 255, 255, .82); font-size: var(--fs-lead); }

	/* Footer */
	.site-footer { background: var(--pearl); color: var(--text); }
	.site-footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 3fr) minmax(0, 3.2fr); gap: 48px; padding-block: clamp(64px, 7vw, 96px) clamp(48px, 5vw, 72px); }
	.site-footer__logo { display: inline-flex; margin-bottom: 20px; }
	.site-footer__logo-img { width: 150px; height: auto; }
	.site-footer__about { color: var(--mute); max-width: 40ch; }
	.site-footer__title { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.4; }
	.site-footer__title::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--gold); }
	.site-footer__links { display: grid; gap: 12px; }
	.site-footer__links a { color: var(--text); text-decoration: none; line-height: 1.6; }
	.site-footer__links a:hover, .site-footer__links a[aria-current="page"] { color: var(--navy); text-decoration: underline; }
	.site-footer__contact { display: grid; gap: 14px; }
	.site-footer__contact li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; }
	.site-footer__contact .icon { color: var(--gold-ink); margin-top: .2em; width: 20px; height: 20px; }
	.site-footer__contact a { text-decoration: none; }
	.site-footer__contact a:hover { color: var(--navy); text-decoration: underline; }
	.site-footer__label { display: block; font-size: 13px; color: var(--mute); }
	.site-footer__social { margin-top: 24px; }
	.site-footer__bar { background: var(--navy); color: rgba(255, 255, 255, .8); font-size: 14px; }
	.site-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; min-height: 72px; padding-block: 14px; }
	.site-footer__statement { color: var(--gold-hi); font-size: 12px; }
	.site-footer__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
	.site-footer__bar .lang-switch { color: var(--white); }
	.to-top { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); color: var(--white); }
	.to-top:hover { background: var(--gold); border-color: var(--gold); color: var(--abyss); }
	.credits summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .2em; }
	.credits p { max-width: 52ch; padding-bottom: 8px; font-size: 13px; color: rgba(255, 255, 255, .75); }
	.credits a { color: var(--gold-hi); }

	/* Contact values */
	.contact-value { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
	a.contact-value:hover { text-decoration: underline; }
	.contact-value.is-pending { color: var(--mute); }

	/* Page banner */
	.page-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(380px, 50vh, 540px); overflow: hidden; background: var(--abyss); color: var(--white); }
	.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
	.page-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 20, 46, .92) 0%, rgba(0, 20, 46, .62) 46%, rgba(0, 20, 46, .3) 100%); }
	.page-hero__inner { position: relative; z-index: 2; padding-block: clamp(96px, 11vw, 150px) clamp(84px, 9vw, 128px); }
	.page-hero__title { color: var(--white); font-size: var(--fs-page); line-height: var(--lh-display); max-width: 22ch; }
	.page-hero__lead { max-width: 60ch; margin-top: 20px; color: rgba(255, 255, 255, .86); font-size: var(--fs-lead); line-height: 1.85; }
	[dir="ltr"] .page-hero__lead { line-height: 1.6; }

	/* Explore rows */
	.explore__list { margin-top: 28px; border-top: 1px solid var(--navy); }
	.explore__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; gap: 16px 40px; align-items: center; padding-block: 26px; border-bottom: 1px solid var(--line-strong); text-decoration: none; color: var(--text); }
	.explore__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); color: var(--navy); line-height: 1.45; transition: color .2s ease; }
	.explore__text { color: var(--mute); }
	.explore__arrow { width: 28px; height: 28px; color: var(--gold-ink); transition: translate .25s var(--ease); }
	.explore__row:hover .explore__name { color: var(--gold-ink); }
	.explore__row:hover .explore__arrow { translate: 6px 0; }
	[dir="rtl"] .explore__row:hover .explore__arrow { translate: -6px 0; }

	/* Contact list */
	.contact-list { display: grid; gap: 4px; margin-top: 26px; }
	.contact-list__item { display: flex; gap: 16px; align-items: flex-start; padding-block: 16px; border-bottom: 1px solid var(--line); }
	.contact-list__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--pearl); color: var(--navy); }
	.contact-list__icon .icon { width: 22px; height: 22px; }
	.contact-list__text { display: grid; gap: 2px; min-width: 0; }
	.contact-list__label { font-size: 13.5px; color: var(--mute); }
	.contact-list .contact-value { font-weight: 500; color: var(--navy); }

	/* Inquiry form */
	.inquiry { background: var(--pearl); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 48px); }
	.inquiry__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin-bottom: 24px; }
	.inquiry__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 22px; }
	.inquiry__hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
	.field { display: grid; gap: 7px; align-content: start; min-width: 0; }
	.field--full, .field--checkbox, .field--textarea { grid-column: 1 / -1; }
	.field__label { font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.5; }
	.field__opt { margin-inline-start: 6px; font-weight: 400; color: var(--mute); font-size: 13px; }
	.field__control { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--ink); line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease; }
	.field__control:hover { border-color: #93A3B8; }
	.field__control:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(188, 151, 70, .3); }
	.field__control[aria-invalid="true"] { border-color: var(--error); }
	textarea.field__control { min-height: 150px; resize: vertical; }
	select.field__control { appearance: none; padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23002B55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
	[dir="rtl"] select.field__control { background-position: left 16px center; }
	[dir="rtl"] .field__control[dir="ltr"] { text-align: right; }
	.field__help { font-size: 13.5px; color: var(--mute); line-height: 1.6; }
	.field__error { font-size: 13.5px; color: var(--error); font-weight: 500; line-height: 1.6; }
	.field--checkbox { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; }
	.field--checkbox input { width: 24px; height: 24px; margin-top: .25em; accent-color: var(--navy); }
	.field--checkbox label { line-height: 1.7; }
	.field--checkbox .field__error { grid-column: 1 / -1; }
	.inquiry__actions { margin-top: 28px; }
	.inquiry__submit { min-width: 220px; }
	.inquiry.is-sending .inquiry__submit { opacity: .7; pointer-events: none; }
	.inquiry__status { margin-bottom: 20px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); font-weight: 500; }
	.inquiry__status.is-success { border-color: #9BD3B5; background: #ECF8F1; color: var(--success); }
	.inquiry__status.is-error { border-color: #F1B5AE; background: #FDF1EF; color: var(--error); }
	.inquiry__status.is-info { color: var(--navy); }
	.cf-turnstile { margin-top: 20px; }
	.inquiry .wpcf7-form-control-wrap { display: block; }
	.inquiry .wpcf7-not-valid { border-color: var(--error); }
	.inquiry .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13.5px; color: var(--error); font-weight: 500; line-height: 1.6; }
	.inquiry .wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); font-weight: 500; }
	.inquiry .wpcf7 form.sent .wpcf7-response-output { border-color: #9BD3B5; background: #ECF8F1; color: var(--success); }
	.inquiry .wpcf7 form.invalid .wpcf7-response-output, .inquiry .wpcf7 form.unaccepted .wpcf7-response-output, .inquiry .wpcf7 form.failed .wpcf7-response-output, .inquiry .wpcf7 form.aborted .wpcf7-response-output { border-color: #F1B5AE; background: #FDF1EF; color: var(--error); }

	/* Generic page and 404 */
	.page-shell__inner { padding-block: var(--section); max-width: 860px; }
	.entry__title { font-size: var(--fs-page); margin-bottom: 28px; }
	.entry__content > * + * { margin-top: 1em; }
	.not-found__inner { padding-block: var(--section); text-align: center; display: grid; justify-items: center; gap: 22px; }
	.not-found__logo { width: 140px; height: auto; }
	.not-found__title { font-size: var(--fs-page); }
	.not-found__text { max-width: 52ch; color: var(--mute); }
}

/* ---------- Pages ---------- */
@layer pages {
	/* Home hero */
	.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(600px, 80vh, 820px); overflow: hidden; background: var(--abyss); color: var(--white); }
	.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
	.hero__shade { position: absolute; inset: 0; z-index: -1; }
	[dir="rtl"] .hero__shade { background: linear-gradient(to left, rgba(0, 20, 46, .95) 0%, rgba(0, 20, 46, .84) 34%, rgba(0, 30, 68, .38) 64%, rgba(0, 30, 68, .06) 100%), linear-gradient(0deg, rgba(0, 20, 46, .72) 0%, rgba(0, 20, 46, 0) 42%); }
	[dir="ltr"] .hero__shade { background: linear-gradient(to right, rgba(0, 20, 46, .95) 0%, rgba(0, 20, 46, .84) 34%, rgba(0, 30, 68, .38) 64%, rgba(0, 30, 68, .06) 100%), linear-gradient(0deg, rgba(0, 20, 46, .72) 0%, rgba(0, 20, 46, 0) 42%); }
	.hero__inner { position: relative; z-index: 2; padding-block: clamp(120px, 13vw, 180px) clamp(130px, 13vw, 170px); }
	.hero__title { color: var(--white); font-size: var(--fs-display); line-height: var(--lh-display); max-width: 18ch; }
	[dir="ltr"] .hero__title { font-size: clamp(1.55rem, .75rem + 4.1vw, 5.1rem); }
	.hero__line { display: block; }
	.hero__line--gold { color: var(--gold-hi); }
	.hero__intro { max-width: 46ch; margin-block: 26px 38px; color: rgba(255, 255, 255, .88); font-size: var(--fs-lead); line-height: 1.95; }
	[dir="ltr"] .hero__intro { line-height: 1.65; }
	.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

	.statement-band { background: var(--navy); color: var(--white); }
	.statement-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; min-height: 96px; padding-block: 20px; }
	.statement-band__line { color: rgba(255, 255, 255, .76); max-width: 56ch; }

	/* Home: about */
	.intro__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
	.intro__text .lead { margin-block: 24px 18px; }
	.intro__text p:not(.lead) { color: var(--mute); }
	.intro__media { position: relative; padding-bottom: clamp(48px, 6vw, 80px); padding-inline-start: clamp(36px, 5vw, 72px); }
	.intro__photo--main img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; border-radius: var(--radius); }
	.intro__photo--inset { position: absolute; inset-inline-start: 0; bottom: 0; width: 44%; border: 8px solid var(--white); border-radius: var(--radius); box-shadow: 0 24px 50px rgba(0, 30, 68, .18); overflow: hidden; }
	.intro__photo--inset img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

	.families-home { padding-top: 0; }
	.industries-home { background: var(--pearl); padding-bottom: 0; }
	.industries-home .note { padding-block: 18px 24px; margin: 0; }

	/* Home: manufacturing */
	.mfg-home__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
	.mfg-home__text p { margin-top: 22px; }
	.mfg-home__text .section-title { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.5rem); }
	.mfg-home__main img { width: 100%; aspect-ratio: 7 / 4.6; object-fit: cover; border-radius: var(--radius); }
	.mfg-home__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
	.mfg-home__row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

	/* Home: quality */
	.quality-home__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
	.quality-home__photo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--radius); }
	.quality-home__text .lead { margin-top: 24px; }

	/* About page */
	.about-page__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
	.about-page__body { margin-top: 26px; color: var(--mute); max-width: 62ch; }
	.about-page__statement { margin-top: 40px; color: var(--navy); }
	.about-page__media { display: grid; gap: 16px; }
	.about-page__photo img { width: 100%; object-fit: cover; border-radius: var(--radius); }
	.about-page__photo--a img { aspect-ratio: 4 / 3; }
	.about-page__photo--b { width: 72%; margin-inline-start: auto; margin-top: -64px; border: 8px solid var(--white); border-radius: var(--radius); box-shadow: 0 24px 50px rgba(0, 30, 68, .16); }
	.about-page__photo--b img { aspect-ratio: 16 / 10; }

	/* Products page */
	.families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); }
	.family { scroll-margin-top: calc(var(--header-h) + 24px); }
	.family__media { overflow: hidden; border-radius: var(--radius); background: var(--steel); }
	.family__img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; transition: transform .9s var(--ease); }
	.family:hover .family__img { transform: scale(1.04); }
	.family__body { padding-top: 22px; }
	.family__name { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.75rem); line-height: 1.45; }
	[dir="ltr"] .family__name { line-height: 1.2; }
	.family__alt { margin-block: 6px 20px; color: var(--mute); font-size: 14.5px; }
	.family .btn { min-height: 46px; padding-inline: 22px; font-size: 15px; }

	/* Industries page */
	.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
	.mosaic__item { position: relative; grid-column: span 2; display: flex; align-items: flex-end; aspect-ratio: 4 / 4.2; overflow: hidden; border-radius: var(--radius); isolation: isolate; background: var(--navy-deep); scroll-margin-top: calc(var(--header-h) + 24px); }
	.mosaic__item--lg { grid-column: span 3; aspect-ratio: 16 / 11; }
	.mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
	.mosaic__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 20, 46, .9) 0%, rgba(0, 20, 46, .15) 55%, rgba(0, 20, 46, 0) 100%); }
	.mosaic__item:hover .mosaic__img { transform: scale(1.04); }
	.mosaic__body { padding: clamp(20px, 2.4vw, 32px); }
	.mosaic__name { color: var(--white); font-size: clamp(1.15rem, 1rem + .7vw, 1.7rem); line-height: 1.45; }
	[dir="ltr"] .mosaic__name { line-height: 1.2; }

	/* Manufacturing page */
	.mfg-page__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
	.mfg-page__text p + p { margin-top: 22px; color: var(--mute); }
	.mfg-page__main img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius); }
	.mfg-caps__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
	.mfg-caps__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.mfg-caps__row img { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; border-radius: var(--radius); }
	.mfg-more__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
	.mfg-more__photo img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--radius); }
	.mfg-more__text p + p { margin-top: 20px; }

	/* Quality page */
	.quality-page__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
	.quality-page__text p:not(.lead) { margin-top: 26px; color: var(--mute); max-width: 62ch; }
	.quality-page__photo img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--radius); }
	.pillars-band__statement { margin-top: 48px; color: var(--gold-hi); }

	/* Contact page */
	.contact-page__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
	.contact-page__social-title { margin-block: 30px 14px; font-size: 1.05rem; }
	#inquiry { scroll-margin-top: calc(var(--header-h) + 24px); }
	.map-band { background: var(--steel); }
	.map-band__frame { width: 100%; height: clamp(320px, 40vw, 480px); border: 0; filter: saturate(.85); }
	.map-band__link, .map-band__pending { padding-block: 40px; }
	.map-band__pending p { color: var(--mute); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
	:root { --header-h: 80px; }
	.site-header__logo { height: 60px; }
	.site-header.is-scrolled .site-header__logo { height: 52px; }
	.menu-toggle { display: inline-flex; }
	.js .site-nav { position: fixed; inset: 0; z-index: -1; display: none; flex-direction: column; align-items: stretch; gap: 28px; padding: calc(var(--header-h) + 64px) var(--gutter) 40px; background: var(--white); overflow-y: auto; }
	.js .site-nav.is-open { display: flex; }
	.js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
	.js .site-nav__link { display: block; padding-block: 16px; border-bottom: 1px solid var(--line); font-size: 1.2rem; }
	.js .site-nav__link::after { display: none; }
	.js .site-nav__link[aria-current="page"] { color: var(--gold-ink); }
	.js .site-nav__end { flex-direction: column; align-items: stretch; }
	.js .site-nav__cta { min-height: 54px; }
	html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
	html:not(.js) .site-nav { flex-wrap: wrap; }
	html:not(.js) .site-nav__list { flex-wrap: wrap; margin-inline: 0; }
	html:not(.js) .menu-toggle { display: none; }
	.topbar__item--hours { display: none; }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.site-footer__brand { grid-column: 1 / -1; }
	.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.strip__item:nth-child(n+4) { aspect-ratio: 16 / 9; }
	.strip__item:nth-child(5) { grid-column: span 2; }
	.mfg-home__grid, .mfg-caps__grid { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
	.section-head, .intro__grid, .quality-home__grid, .about-page__grid, .mfg-page__grid, .mfg-more__grid, .quality-page__grid, .contact-page__grid { grid-template-columns: 1fr; }
	.section-head { align-items: start; }
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mosaic__item, .mosaic__item--lg { grid-column: span 1; aspect-ratio: 4 / 4.4; }
	.mosaic__item:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
	.quality-home__photo { order: 2; }
	.quality-page__photo img { aspect-ratio: 16 / 10; }
	.explore__row { grid-template-columns: minmax(0, 1fr) auto; }
	.explore__text { grid-column: 1 / 2; grid-row: 2; }
	.explore__arrow { grid-row: 1 / 3; grid-column: 2; }
}

@media (max-width: 759px) {
	.topbar { display: none; }
	.hero { min-height: 660px; }
	.hero__img { object-position: 30% center; }
	[dir="rtl"] .hero__shade, [dir="ltr"] .hero__shade { background: linear-gradient(0deg, rgba(0, 20, 46, .96) 0%, rgba(0, 20, 46, .86) 46%, rgba(0, 20, 46, .3) 100%); }
	.hero__inner { padding-block: 210px 110px; }
	.hero__actions .btn { flex: 1 1 100%; }
	.statement-band__inner { justify-content: center; text-align: center; }
	.statement-band .statement { letter-spacing: .08em; gap: 8px; font-size: 12px; justify-content: center; }
	.families { grid-template-columns: 1fr; }
	.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.strip__item, .strip__item:nth-child(n+4) { aspect-ratio: 3 / 3.7; grid-column: span 1; }
	.strip__item:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
	.strip__name { width: calc(100% - 28px); margin-inline: 14px; padding-block: 14px 18px; font-size: 1rem; }
	.tile__link { aspect-ratio: 3 / 3.9; }
	.tile__body { padding: 14px; }
	.tile__title { font-size: 1rem; }
	.caps--two { grid-template-columns: 1fr; }
	.pillars { grid-template-columns: 1fr; gap: 12px; }
	.pillars--band .pillars__item { font-size: 2.2rem; }
	.mfg-home__row, .mfg-caps__row { gap: 10px; }
	.intro__media { padding-inline-start: 24px; }
	.about-page__photo--b { width: 82%; margin-top: -40px; }
	.inquiry__grid { grid-template-columns: 1fr; }
	.inquiry__submit { width: 100%; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
	.site-footer__bar-inner { justify-content: center; text-align: center; }
	.site-footer__statement { letter-spacing: .08em; font-size: 12px; gap: 8px; justify-content: center; }
	.site-footer__meta { justify-content: center; }
	.cta-band__inner .btn { width: 100%; }
}

/* ---------- Motion: one settle on the banner photograph, the wave drawn once, quiet feedback elsewhere ---------- */
@layer motion {
	@media (prefers-reduced-motion: no-preference) {
		.hero__img, .page-hero__img { animation: ste-settle 2.4s var(--ease) both; }
		@keyframes ste-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
		.wave__main { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: ste-draw 2s .3s var(--ease) forwards; }
		@keyframes ste-draw { to { stroke-dashoffset: 0; } }
	}
	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
		*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
		.btn:hover, .tile__link:hover .tile__img, .strip__item:hover .strip__img, .family:hover .family__img, .mosaic__item:hover .mosaic__img { transform: none; }
	}
}