/* =========================================================
   CORAL EXPORTS v3
   Eight full-viewport scenes, each with its own structure.
   Accent: logo teal (light tint on dark scenes).
   Shape rule: interactive = pill, images = 1.25rem, nothing boxed.
   Z scale: grain 20, menu 30, nav + brandmark 40, skip link 50.
   Performance: only transform and opacity animate in the pinned
   scenes; no blend modes; images are WebP.
   ========================================================= */

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/bricolage.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geist';
	src: url('../fonts/geist.woff2') format('woff2');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--cx-deep: #071c27;
	--cx-ink: #0a2230;
	--cx-ink-2: #2b4350;
	--cx-muted: #4f6671;
	--cx-mist: #edf2f2;
	--cx-ice: #dfeaea;
	--cx-white: #f6f9f9;
	--cx-line: rgba(10, 34, 48, 0.14);
	--cx-line-strong: rgba(10, 34, 48, 0.4);
	--cx-accent: #0f746f;
	--cx-accent-ink: #0b5955;
	--cx-accent-lt: #7fd8cd;
	--cx-danger: #b3261e;

	--cx-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
	--cx-body: 'Geist', 'Segoe UI', system-ui, sans-serif;

	--cx-r: 1.25rem;
	--cx-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--cx-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--cx-wrap: 86rem;

	--cx-z-grain: 20;
	--cx-z-menu: 30;
	--cx-z-nav: 40;
	--cx-z-skip: 50;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.cx-ready { scroll-behavior: auto; }

body {
	margin: 0;
	font-family: var(--cx-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--cx-ink);
	background: var(--cx-mist);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}


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

h1, h2, h3 {
	margin: 0;
	font-family: var(--cx-display);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: fixed; left: 1rem; top: -4rem; z-index: var(--cx-z-skip);
	padding: 0.75rem 1.25rem; border-radius: 999px;
	background: var(--cx-ink); color: #fff;
	transition: top 0.3s var(--cx-ease);
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--cx-accent-lt); outline-offset: 3px; }
.ct :focus-visible, .doc :focus-visible, .su :focus-visible, .story :focus-visible { outline-color: var(--cx-accent); }

.eyebrow {
	display: inline-block; margin: 0; padding: 0.5rem 0.9rem;
	border-radius: 999px; background: rgba(15, 116, 111, 0.12); color: var(--cx-accent-ink);
	font-size: 0.72rem; font-weight: 500; line-height: 1;
	letter-spacing: 0.18em; text-transform: uppercase;
}
.prod .eyebrow { background: rgba(255, 255, 255, 0.1); color: var(--cx-accent-lt); }

/* ---------- CSS-drawn arrow (no icon files) ---------- */
.arr { position: relative; display: inline-block; flex: none; width: 1em; height: 1em; transition: transform 0.5s var(--cx-ease); }
.arr::before { content: ''; position: absolute; left: 0.05em; right: 0.02em; top: 50%; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.arr::after {
	content: ''; position: absolute; right: 0.04em; top: 50%; width: 0.46em; height: 0.46em;
	border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 1.1rem;
	padding: 0.38rem 0.38rem 0.38rem 1.5rem; border-radius: 999px;
	font-size: 0.95rem; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
	transition: background-color 0.5s var(--cx-ease), color 0.5s var(--cx-ease), box-shadow 0.5s var(--cx-ease);
}
.btn__icon {
	display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: 50%;
	font-size: 1.05rem; overflow: hidden;
	transition: transform 0.5s var(--cx-ease), background-color 0.5s var(--cx-ease);
}
.btn .arr { transform: rotate(-45deg); }
.btn:hover .btn__icon { transform: scale(1.08); }
.btn:hover .arr { transform: rotate(0deg); }
.btn:active { scale: 0.98; }
.btn--light { background: var(--cx-white); color: var(--cx-ink); }
.btn--light .btn__icon { background: var(--cx-ink); color: var(--cx-white); }
.btn--light:hover { background: #fff; }
.btn--teal { background: var(--cx-accent); color: #fff; }
.btn--teal .btn__icon { background: rgba(255, 255, 255, 0.2); }
.btn--teal:hover { background: #12857f; }
.btn--ink { background: var(--cx-ink); color: var(--cx-white); }
.btn--ink .btn__icon { background: rgba(255, 255, 255, 0.16); }
.btn--ink:hover { background: var(--cx-accent); }
.btn--line { color: var(--cx-ink); box-shadow: inset 0 0 0 1.5px var(--cx-ink); }
.btn--line .btn__icon { background: var(--cx-ink); color: var(--cx-white); }
.btn--line:hover { background: var(--cx-ink); color: var(--cx-white); }
.btn--line:hover .btn__icon { background: var(--cx-accent); }

.textlink {
	display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 0.2rem;
	font-weight: 500; text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
	transition: background-size 0.6s var(--cx-ease);
}
.textlink:hover { background-size: 100% 1.5px; }
.textlink:hover .arr { transform: translateX(4px); }

/* ---------- brand mark: its own element, top-left, scrolls away with the page ---------- */
.brandmark { position: absolute; top: 0.9rem; left: var(--cx-gutter); z-index: var(--cx-z-nav); display: block; line-height: 0; }
.admin-bar .brandmark { top: calc(0.9rem + 32px); }
.brandmark__img { width: auto; height: clamp(3.6rem, 5.2vw, 5.4rem); }
.brandmark--dark { z-index: 25; }

/* ---------- navigation: dark glass pill, right aligned ---------- */
.nav {
	position: fixed; top: 1rem; left: 0; right: 0; z-index: var(--cx-z-nav);
	display: flex; justify-content: flex-end; padding-inline: var(--cx-gutter);
	pointer-events: none;
}
.admin-bar .nav { top: calc(1rem + 32px); }
.nav { transition: transform 0.6s var(--cx-ease); will-change: transform; }
.nav.is-hidden { transform: translateY(-140%); }
.nav:focus-within { transform: none; }
.nav__bar {
	pointer-events: auto; display: flex; align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem); height: 4.25rem; padding: 0.45rem 0.5rem 0.45rem 0.75rem;
	border-radius: 999px; color: var(--cx-white);
	background: rgba(7, 28, 39, 0.74);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 40px -22px rgba(0, 0, 0, 0.55);
	transition: background-color 0.6s var(--cx-ease);
}
.nav.is-scrolled .nav__bar { background: rgba(7, 28, 39, 0.92); }
.nav__links { display: flex; align-items: center; gap: 0.1rem; }
.nav__links a {
	padding: 0.6rem 0.95rem; border-radius: 999px; font-size: 0.92rem; font-weight: 500; white-space: nowrap;
	text-decoration: none; color: rgba(246, 249, 249, 0.78);
	transition: color 0.4s var(--cx-ease), background-color 0.4s var(--cx-ease);
}
.nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nav__links a.is-active { color: #fff; background: rgba(255, 255, 255, 0.16); }
.nav__cta .btn__icon { width: 2.5rem; height: 2.5rem; }
.nav__toggle {
	display: none; place-items: center; width: 3.3rem; height: 3.3rem; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
}
.nav__bars { position: relative; width: 1.3rem; height: 1rem; }
.nav__bars i { position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 0.6s var(--cx-ease); }
.nav__bars i:first-child { transform: translateY(-4px); }
.nav__bars i:last-child { transform: translateY(4px); }
.nav__toggle[aria-expanded='true'] .nav__bars i:first-child { transform: rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__bars i:last-child { transform: rotate(-45deg); }

.menu {
	position: fixed; inset: 0; z-index: var(--cx-z-menu); display: flex; align-items: center;
	padding: 7rem var(--cx-gutter) 2rem; background: rgba(7, 28, 39, 0.96); color: var(--cx-white);
	opacity: 0; transition: opacity 0.6s var(--cx-ease); overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__inner { display: grid; gap: 0.25rem; width: 100%; }
.menu__link {
	font-family: var(--cx-display); font-size: clamp(2.3rem, 10vw, 3.6rem); font-weight: 600;
	letter-spacing: -0.035em; line-height: 1.15; text-decoration: none;
	opacity: 0; transform: translateY(2.5rem);
	transition: opacity 0.7s var(--cx-ease), transform 0.8s var(--cx-ease);
	transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}
.menu__cta { margin-top: 1.75rem; opacity: 0; transform: translateY(2.5rem); transition: opacity 0.7s var(--cx-ease), transform 0.8s var(--cx-ease); transition-delay: calc(var(--i, 0) * 60ms + 120ms); }
.menu.is-open .menu__link, .menu.is-open .menu__cta { opacity: 1; transform: none; }

/* ---------- motion start states (only when scripts are driving) ---------- */
.js:not(.no-motion) [data-rv] { opacity: 0; transform: translateY(2rem); }
.js:not(.no-motion) .ln__in { transform: translateY(118%); }
.js:not(.no-motion) .su__body .w { opacity: 0.16; }
.js:not(.no-motion) [data-su-p] { opacity: 0; transform: translateY(1.5rem); }

/* ---------- 1. HERO ---------- */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 100dvh; overflow: hidden; background: var(--cx-deep); color: var(--cx-white); }
.hero__media { position: absolute; inset: 0; will-change: transform; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; transition: opacity 1.2s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(7, 28, 39, 0.55) 0%, rgba(7, 28, 39, 0) 24%),
		linear-gradient(90deg, rgba(7, 28, 39, 0.86) 0%, rgba(7, 28, 39, 0.52) 40%, rgba(7, 28, 39, 0) 72%),
		linear-gradient(0deg, rgba(7, 28, 39, 0.8) 0%, rgba(7, 28, 39, 0) 48%);
}
.hero__inner { position: relative; width: min(100% - 2 * var(--cx-gutter), 92rem); margin: 0 auto; padding: 8rem 0 clamp(2.25rem, 6vh, 4rem); }
.hero__title { font-size: clamp(3rem, min(8.6vw, 16vh), 10rem); line-height: 0.9; letter-spacing: -0.05em; }
.ln { display: block; overflow: hidden; padding: 0.04em 0 0.1em; }
.ln__in { display: block; }
.hero__title em { font-style: normal; color: var(--cx-accent-lt); }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.75rem 3rem; margin-top: clamp(1.25rem, 4vh, 2.75rem); }
.hero__sub { max-width: 34ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); color: rgba(246, 249, 249, 0.9); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.hero__actions .textlink { color: var(--cx-white); }

/* ---------- 2. STORY ---------- */
.story { display: flex; flex-direction: column; min-height: 100dvh; background: var(--cx-mist); }
.story__main { flex: 1; display: flex; align-items: center; padding: clamp(6.5rem, 12vh, 8.5rem) var(--cx-gutter) clamp(1.5rem, 4vh, 3rem); }
.story__grid {
	width: min(100%, var(--cx-wrap)); margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
	gap: clamp(2rem, 6vw, 6.5rem);
}
.story__portrait {
	position: relative; margin: 0; justify-self: center;
	width: min(100%, 29rem, 54vh); aspect-ratio: 4 / 5;
	border-radius: 50% 50% var(--cx-r) var(--cx-r) / 34% 34% var(--cx-r) var(--cx-r);
	background: radial-gradient(120% 90% at 50% 12%, #1d8f89 0%, #0b4a4c 55%, #082f36 100%);
	overflow: hidden;
}
.story__img { position: absolute; left: 50%; bottom: 0; width: auto; height: 90%; max-width: none; transform: translateX(-50%); }
.story__text { max-width: 36rem; }
.story__title { max-width: 9ch; font-size: clamp(2.8rem, min(5.6vw, 10.5vh), 6rem); line-height: 0.92; letter-spacing: -0.05em; }
.story__copy { display: grid; gap: 1rem; max-width: 46ch; margin-top: clamp(1.25rem, 3vh, 2rem); font-size: clamp(0.95rem, 0.55rem + 1.1vh, 1.06rem); line-height: 1.65; color: var(--cx-ink-2); }
.sign { display: grid; gap: 0.1rem; margin-top: clamp(1.25rem, 3vh, 2rem); }
.sign strong { font-family: var(--cx-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--cx-ink); }
.sign span { font-size: 0.88rem; color: var(--cx-muted); }

/* credentials: a full-bleed teal band that carries the arch's colour across the page */
.story__band {
	position: relative; padding: clamp(1.25rem, 3.2vh, 2.1rem) var(--cx-gutter); color: var(--cx-white);
	background: radial-gradient(42rem 14rem at 10% 0%, rgba(127, 216, 205, 0.24), transparent 70%), linear-gradient(100deg, #0b4a4c 0%, #082f36 100%);
}
.story__creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, var(--cx-wrap)); margin: 0 auto; }
.story__creds > div { padding: 0 clamp(1rem, 2vw, 2rem); border-left: 1px solid rgba(246, 249, 249, 0.18); }
.story__creds > div:first-child { padding-left: 0; border-left: 0; }
.story__creds dt { font-family: var(--cx-display); font-size: clamp(1.8rem, min(3.2vw, 6vh), 3.2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.story__creds dd { margin: 0.45rem 0 0; max-width: 18ch; font-size: 0.86rem; line-height: 1.4; color: rgba(246, 249, 249, 0.74); }

/* ---------- 3. PRODUCTS ---------- */
.prod { --pw: clamp(15rem, min(21vw, 32vh), 21rem); background: var(--cx-deep); color: var(--cx-white); }
.prod__frame { position: relative; display: flex; align-items: center; height: 100dvh; overflow: hidden; }
.prod__top { position: absolute; z-index: 2; left: var(--cx-gutter); right: var(--cx-gutter); top: 6.75rem; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.prod__now { font-family: var(--cx-display); font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; color: var(--cx-accent-lt); }
.prod__track { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); width: max-content; height: 100%; padding: 7rem var(--cx-gutter) 4.5rem; will-change: transform; }
.prod__intro { flex: none; width: clamp(21rem, 32vw, 32rem); }
.prod__intro h2 { font-size: clamp(2.3rem, min(4.5vw, 8.5vh), 4.6rem); letter-spacing: -0.045em; }
.prod__intro p { margin-top: 1.4rem; max-width: 34ch; color: rgba(246, 249, 249, 0.74); font-size: 1.05rem; }
.prod__group { flex: none; display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.prod__cat { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.prod__catname {
	font-family: var(--cx-display); font-size: clamp(4.5rem, min(10vw, 20vh), 10rem); font-weight: 600;
	letter-spacing: -0.055em; line-height: 0.85; color: transparent; -webkit-text-stroke: 1.5px rgba(246, 249, 249, 0.55);
}
.prod__catcount { padding-left: 0.4rem; font-size: 1rem; color: var(--cx-accent-lt); }
.prod__row { display: flex; align-items: flex-start; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.prod__item { flex: none; width: var(--pw); }
.prod__fig { position: relative; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: var(--cx-r); background: #0d2a38; }
.prod__img { position: absolute; left: -9%; top: 0; width: 118%; height: 100%; max-width: none; object-fit: cover; }
.prod__name { margin: 1.1rem 0 0.45rem; font-size: clamp(1.35rem, 1.7vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.05; }
.prod__spec { min-height: 3.1em; margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.55; color: rgba(246, 249, 249, 0.72); }
.prod__item .textlink { color: var(--cx-accent-lt); font-size: 0.92rem; }
.prod__end { flex: none; width: 4vw; }
.prod__bar { position: absolute; left: var(--cx-gutter); right: var(--cx-gutter); bottom: 1.75rem; height: 2px; background: rgba(246, 249, 249, 0.14); }
.prod__bar i { display: block; height: 100%; background: var(--cx-accent-lt); transform: scaleX(0); transform-origin: left; }

/* ---------- 4. JOURNEY ---------- */
.jr { background: var(--cx-deep); }
.jr__stage { position: relative; height: 100dvh; overflow: hidden; color: var(--cx-white); }
.jr__step { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.jr__in { position: absolute; inset: 0; }
.jr__bg { position: absolute; inset: 0; overflow: hidden; }
.jr__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 28, 39, 0.92) 0%, rgba(7, 28, 39, 0.35) 52%, rgba(7, 28, 39, 0.6) 100%); }
.jr__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.jr__copy { position: absolute; z-index: 2; left: var(--cx-gutter); right: var(--cx-gutter); bottom: clamp(3.5rem, 9vh, 5.5rem); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 2rem; }
.jr__name { font-size: clamp(4.5rem, min(13vw, 25vh), 14rem); line-height: 0.84; letter-spacing: -0.06em; }
.jr__text { max-width: 27rem; padding-bottom: 0.9rem; font-size: 1.02rem; color: rgba(246, 249, 249, 0.88); }
.jr__lead { margin-bottom: 0.6rem; font-family: var(--cx-display); font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.jr__title { position: absolute; z-index: 3; left: var(--cx-gutter); top: 7.8rem; max-width: 15ch; font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; color: rgba(246, 249, 249, 0.9); }
.jr__nav { position: absolute; z-index: 3; right: var(--cx-gutter); top: 7.8rem; display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; text-align: right; }
.jr__nav li { font-family: var(--cx-display); font-size: 1.1rem; letter-spacing: -0.02em; color: rgba(246, 249, 249, 0.4); transition: color 0.5s var(--cx-ease), transform 0.5s var(--cx-ease); }
.jr__nav li.is-on { color: #fff; transform: translateX(-0.5rem); }
.jr__bar { position: absolute; z-index: 3; left: var(--cx-gutter); right: var(--cx-gutter); bottom: 1.75rem; height: 2px; background: rgba(255, 255, 255, 0.16); }
.jr__bar i { display: block; height: 100%; background: var(--cx-accent-lt); transform: scaleX(0); transform-origin: left; }

/* ---------- 5. SUSTAINABILITY ---------- */
.su { position: relative; display: flex; align-items: center; min-height: 100dvh; overflow: hidden; background: #f3f7f7; }
.su__media { position: absolute; top: 0; right: 0; bottom: 0; width: 68%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 10%, #000 56%); mask-image: linear-gradient(90deg, transparent 0%, transparent 10%, #000 56%); }
.su__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 60% 50%; }
.su__body { position: relative; z-index: 2; width: min(100% - 2 * var(--cx-gutter), 92rem); margin: 0 auto; padding: 8rem 0 3.5rem; }
.su__title { max-width: 9.5ch; margin-top: 1.4rem; font-size: clamp(3rem, min(7.4vw, 14vh), 8rem); line-height: 0.9; letter-spacing: -0.055em; color: var(--cx-ink); }
.su__lead { max-width: 34ch; margin-top: clamp(1.25rem, 3vh, 2.25rem); font-family: var(--cx-display); font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--cx-ink); }
.su__text { max-width: 44ch; margin-top: 1rem; font-size: 0.98rem; color: var(--cx-ink-2); }
.su__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: clamp(1.25rem, 3vh, 2.25rem) 0 0; padding: 0; list-style: none; font-family: var(--cx-display); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--cx-accent-ink); }
.su__tags li + li::before { content: ''; display: inline-block; width: 2.2rem; height: 1.5px; margin-right: 1.25rem; vertical-align: middle; background: var(--cx-accent); }

/* ---------- 6. TRUST ---------- */
.wy { position: relative; display: flex; flex-direction: column; min-height: 100dvh; overflow: hidden; padding: 8rem var(--cx-gutter) 3.25rem; background: #082c33; color: var(--cx-white); }
.wy__bgs { position: absolute; inset: 0; }
.wy__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--cx-ease); }
.wy__bg.is-on { opacity: 1; }
.wy__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 8s linear; }
.wy__bg.is-on .wy__img { will-change: transform; }
.wy__bg.is-on .wy__img { transform: scale(1); }
.wy__shade {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(5, 32, 38, 0.94) 0%, rgba(5, 32, 38, 0.62) 42%, rgba(5, 32, 38, 0.5) 100%), linear-gradient(90deg, rgba(5, 32, 38, 0.72) 0%, rgba(5, 32, 38, 0) 65%);
}
.wy__inner { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 3rem; width: min(100%, 92rem); margin: 0 auto; }
.wy__head { max-width: 40rem; }
.wy__head h2 { font-size: clamp(2.6rem, min(6vw, 11vh), 6.2rem); line-height: 0.92; letter-spacing: -0.055em; }
.wy__head p { max-width: 38ch; margin-top: 1.1rem; font-size: 1.1rem; color: rgba(246, 249, 249, 0.82); }
.wy__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); }
.wy__pt { all: unset; position: relative; display: block; box-sizing: border-box; padding-top: 1.25rem; cursor: pointer; }
.wy__pt:focus-visible { outline: 2px solid var(--cx-accent-lt); outline-offset: 6px; }
.wy__pt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(246, 249, 249, 0.22); }
.wy__fill { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--cx-accent-lt); transform: scaleX(0); transform-origin: left; }
.wy__pt.is-on .wy__fill { animation: cx-fill 6s linear forwards; }
.wy.is-paused .wy__pt.is-on .wy__fill { animation-play-state: paused; }
@keyframes cx-fill { to { transform: scaleX(1); } }
.wy__title { display: block; font-family: var(--cx-display); font-size: clamp(1.4rem, 2.2vw, 2.15rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: rgba(246, 249, 249, 0.58); transition: color 0.6s var(--cx-ease); }
.wy__pt:hover .wy__title { color: rgba(246, 249, 249, 0.85); }
.wy__pt.is-on .wy__title { color: #fff; }
.wy__txt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.8s var(--cx-ease); }
.wy__pt.is-on .wy__txt { grid-template-rows: 1fr; }
.wy__txt > span { display: block; min-height: 0; overflow: hidden; color: rgba(246, 249, 249, 0.86); font-size: 0.98rem; line-height: 1.6; }
.wy__pt.is-on .wy__txt > span { padding-top: 0.85rem; }

/* ---------- 7. MARKETS ---------- */
.mk { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100dvh; overflow: hidden; background: #04131c; color: var(--cx-white); }
.mk__media { position: absolute; inset: -6% 0; }
.mk__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.mk__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 19, 28, 0.88) 0%, rgba(4, 19, 28, 0.5) 50%, rgba(4, 19, 28, 0.15) 100%), linear-gradient(0deg, rgba(4, 19, 28, 0.9) 0%, rgba(4, 19, 28, 0) 40%); }
.mk__main { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: 'h num' 'v num'; align-items: end; gap: 1.5rem 3rem; padding: 8.5rem var(--cx-gutter) 2.5rem; }
.mk__main h2 { grid-area: h; max-width: 9ch; align-self: start; font-size: clamp(2.8rem, min(6.6vw, 12.5vh), 7rem); line-height: 0.9; letter-spacing: -0.055em; }
.mk__num { grid-area: num; display: grid; justify-items: end; gap: 0.6rem; text-align: right; }
.mk__n { font-family: var(--cx-display); font-size: clamp(8rem, min(24vw, 42vh), 24rem); font-weight: 600; line-height: 0.78; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; color: var(--cx-accent-lt); }
.mk__lbl { max-width: 18ch; font-size: 1.1rem; color: rgba(246, 249, 249, 0.84); }
.mk__vision { grid-area: v; max-width: 36ch; font-family: var(--cx-display); font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: rgba(246, 249, 249, 0.92); }
.mk__strip {
	position: relative; z-index: 2; display: flex; overflow: hidden; padding: 1.4rem 0 1.7rem; border-top: 1px solid rgba(246, 249, 249, 0.16);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mk__track { display: flex; flex: none; gap: 3rem; min-width: 100%; margin: 0; padding: 0 3rem 0 0; list-style: none; animation: cx-marquee 70s linear infinite; will-change: transform; }
.mk__strip:hover .mk__track { animation-play-state: paused; }
@keyframes cx-marquee { to { transform: translateX(-100%); } }
.mk__chip { display: flex; align-items: center; gap: 1rem; font-family: var(--cx-display); font-size: clamp(1.6rem, 3vw, 2.7rem); font-weight: 600; letter-spacing: -0.035em; white-space: nowrap; }
.mk__flag { width: 2.7rem; height: 2.7rem; border-radius: 50%; object-fit: cover; }

/* ---------- 8. CONTACT ---------- */
.ct { display: flex; align-items: center; min-height: 100dvh; padding: 8rem var(--cx-gutter) 4rem; background: linear-gradient(180deg, var(--cx-mist), var(--cx-ice)); }
.ct__grid { width: min(100%, 92rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.ct__title { max-width: 8ch; margin-top: 1.1rem; font-size: clamp(3rem, min(7.4vw, 14vh), 8rem); line-height: 0.9; letter-spacing: -0.055em; }
.ct__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; margin: clamp(1.25rem, 3.5vh, 2.5rem) 0; }
.ct__details div:first-child { grid-row: span 2; }
.ct__details dt { font-size: 0.85rem; color: var(--cx-muted); }
.ct__details dd { margin: 0.25rem 0 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.ct__details address { font-style: normal; line-height: 1.5; }
.ct__details a { text-decoration: underline; text-decoration-color: var(--cx-line-strong); text-underline-offset: 0.3em; transition: text-decoration-color 0.4s var(--cx-ease), color 0.4s var(--cx-ease); }
.ct__details a:hover { color: var(--cx-accent-ink); text-decoration-color: var(--cx-accent); }
.ct__wa { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.ct__wa p { max-width: 28ch; font-size: 0.95rem; color: var(--cx-ink-2); }
.ct__wa strong { color: var(--cx-ink); }

/* Fluent Forms, restyled as open fields (plugin CSS is dequeued on the homepage) */
.ct__form .fluentform .ff-el-group { margin-bottom: 1.15rem; }
.ct__form .fluentform label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--cx-muted); }
.ct__form .fluentform .ff-el-is-required.asterisk-right label::after { content: ' *'; color: var(--cx-accent-ink); }
.ct__form .fluentform .ff-el-form-control {
	display: block; width: 100%; padding: 0.55rem 0 0.7rem; border: 0; border-bottom: 1.5px solid var(--cx-line-strong); border-radius: 0;
	background: transparent; color: var(--cx-ink); font: inherit; font-size: 1.2rem;
	transition: border-color 0.4s var(--cx-ease), box-shadow 0.4s var(--cx-ease);
}
.ct__form .fluentform textarea.ff-el-form-control { min-height: 5.5rem; resize: vertical; }
.ct__form .fluentform .ff-el-form-control::placeholder { color: #5f7480; opacity: 1; }
.ct__form .fluentform .ff-el-form-control:focus { outline: none; border-bottom-color: var(--cx-accent); box-shadow: 0 1.5px 0 var(--cx-accent); }
.ct__form .fluentform .ff-el-is-error .ff-el-form-control { border-bottom-color: var(--cx-danger); }
.ct__form .fluentform .error, .ct__form .fluentform .text-danger { margin-top: 0.4rem; font-size: 0.85rem; color: var(--cx-danger); }
.ct__form .fluentform .ff-btn-submit {
	display: inline-flex; align-items: center; margin-top: 0.5rem; padding: 1.1rem 2.2rem; border: 0; border-radius: 999px;
	background: var(--cx-ink); color: var(--cx-white); font: 500 0.95rem/1 var(--cx-body); cursor: pointer;
	transition: background-color 0.5s var(--cx-ease), scale 0.4s var(--cx-ease);
}
.ct__form .fluentform .ff-btn-submit:hover { background: var(--cx-accent); }
.ct__form .fluentform .ff-btn-submit:active { scale: 0.98; }
.ct__form .fluentform .ff-btn-submit:disabled, .ct__form .fluentform .ff-btn-submit.disabled { opacity: 0.6; cursor: progress; }
.ct__form .fluentform .ff-message-success { font-family: var(--cx-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; color: var(--cx-accent-ink); }
.ct__form .fluentform .ff-errors-in-stack { margin-top: 1rem; font-size: 0.9rem; color: var(--cx-danger); }

/* ---------- footer: a proper closing statement, not a second header ---------- */
.ft { position: relative; overflow: hidden; padding: clamp(4rem, 9vh, 6.5rem) var(--cx-gutter) 0; background: var(--cx-deep); color: var(--cx-white); }
.ft::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50rem 28rem at 8% 0%, rgba(15, 116, 111, 0.28), transparent 65%); }
.ft__wrap { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.2fr)); gap: clamp(2rem, 4vw, 4rem); width: min(100%, 92rem); margin: 0 auto; }
.ft__brand { display: inline-block; line-height: 0; }
.ft__logo { width: auto; height: clamp(5rem, 7vw, 7.25rem); }
.ft__line { max-width: 15ch; margin-top: 1.75rem; font-family: var(--cx-display); font-size: clamp(1.9rem, 3vw, 2.9rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; }
.ft__text { max-width: 34ch; margin: 1rem 0 1.75rem; color: rgba(246, 249, 249, 0.7); }
.ft__h { margin: 0 0 1.1rem; font-family: var(--cx-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: var(--cx-accent-lt); }
.ft__col ul { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.ft__col a { text-decoration: none; color: rgba(246, 249, 249, 0.86); background: linear-gradient(var(--cx-accent-lt), var(--cx-accent-lt)) 0 100% / 0 1px no-repeat; padding-bottom: 0.15rem; transition: color 0.4s var(--cx-ease), background-size 0.6s var(--cx-ease); }
.ft__col a:hover { color: #fff; background-size: 100% 1px; }
.ft__addr { margin-bottom: 1rem; font-style: normal; line-height: 1.65; color: rgba(246, 249, 249, 0.7); }
.ft__plain li { color: rgba(246, 249, 249, 0.7); }
.ft__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; width: min(100%, 92rem); margin: 0 auto; padding: 1.5rem 0 1.75rem; border-top: 1px solid rgba(246, 249, 249, 0.16); font-size: 0.85rem; color: rgba(246, 249, 249, 0.62); }
.ft__links { display: flex; gap: 1.5rem; }
.ft__links a { text-underline-offset: 0.3em; }
.ft__links a:hover { color: #fff; }

/* ---------- documents (privacy, 404) ---------- */
.doc { min-height: 100dvh; padding: 9rem var(--cx-gutter) 5rem; background: var(--cx-mist); }
.doc__wrap { max-width: 48rem; margin: 0 auto; }
.doc__title { margin-bottom: 2rem; font-size: clamp(2.4rem, 5vw, 4rem); }
.doc__lede { max-width: 40ch; margin-bottom: 2rem; font-size: 1.15rem; color: var(--cx-ink-2); }
.prose { font-size: 1.05rem; line-height: 1.75; color: var(--cx-ink-2); }
.prose h2, .prose h3 { margin: 2.5rem 0 0.75rem; font-size: 1.6rem; color: var(--cx-ink); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; }
.prose a { color: var(--cx-accent-ink); text-underline-offset: 0.25em; }
.doc__back { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 3rem; font-weight: 500; text-decoration: none; color: var(--cx-accent-ink); }
.doc__back:hover .arr { transform: translateX(4px); }

/* =========================================================
   RESPONSIVE
   <= 1279: nav drops the CTA so logo and links never touch
   <= 1023: menu button, no pinned scenes, stacked layouts
   <= 767 : single column
   ========================================================= */
@media (max-width: 1279px) {
	.nav__cta { display: none; }
	.nav__bar { padding-right: 0.75rem; }
}

@media (max-width: 1023px) {
	.nav__links { display: none; }
	.nav__toggle { display: grid; }
	.nav__bar { height: 3.6rem; padding: 0.15rem; background: rgba(7, 28, 39, 0.82); }
	.nav__toggle { width: 3.3rem; height: 3.3rem; }
	.brandmark { top: 0.85rem; }
	.brandmark__img { height: 3.9rem; }

	.hero { min-height: 100svh; }
	.hero__inner { padding-top: 7rem; }
	.hero__title { font-size: clamp(2.9rem, 12.5vw, 6rem); }
	.hero__img { object-position: 62% 50%; }
	.hero__scrim { background: linear-gradient(180deg, rgba(7, 28, 39, 0.55) 0%, rgba(7, 28, 39, 0) 22%), linear-gradient(0deg, rgba(7, 28, 39, 0.92) 0%, rgba(7, 28, 39, 0.35) 55%, rgba(7, 28, 39, 0.5) 100%); }

	.story { min-height: 0; }
	.story__main { padding: 4.5rem var(--cx-gutter) 3rem; }
	.story__grid { gap: 2.25rem clamp(1.5rem, 4vw, 3rem); }
	.story__portrait { width: min(100%, 22rem); }

	/* products and journey stay pinned on tablets and phones, sized for the screen */
	.prod { --pw: clamp(15rem, 34vw, 19rem); }
	.prod__top { top: 5.6rem; }
	.prod__track { gap: 2rem; padding-top: 6.75rem; }
	.prod__intro { width: clamp(18rem, 50vw, 26rem); }
	.prod__catname { font-size: clamp(3.6rem, 13vw, 7rem); }
	.prod__end { width: 2vw; }
	.jr__title { top: 5.75rem; }
	.jr__copy { grid-template-columns: minmax(0, 1fr); gap: 1rem; bottom: 3.25rem; }
	.jr__name { font-size: clamp(3.4rem, 15vw, 8rem); }
	.jr__nav { display: none; }

	.su { min-height: 0; align-items: flex-start; flex-direction: column; }
	.su__media { position: relative; width: 100%; height: 44svh; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%); mask-image: linear-gradient(0deg, transparent 0%, #000 45%); }
	.su__body { padding: 1rem 0 3.5rem; }
	.su__title { font-size: clamp(2.8rem, 12vw, 5rem); max-width: 10ch; }

	.wy { min-height: 100svh; padding: 5.5rem var(--cx-gutter) 2.5rem; }
	.wy__head h2 { font-size: clamp(2.6rem, 11vw, 4.6rem); }
	.wy__rail { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
	.wy__pt { padding: 1rem 0 0.9rem; }
	.wy__title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
	.wy__txt > span { font-size: 0.95rem; }

	.mk { min-height: 100svh; }
	.mk__main { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'h' 'num' 'v'; padding-top: 6rem; gap: 1.25rem; }
	.mk__num { justify-items: start; text-align: left; }
	.mk__n { font-size: clamp(6.5rem, 30vw, 11rem); }

	.ct { min-height: 0; padding: 4.5rem var(--cx-gutter) 3.5rem; }
	.ct__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

	.ft__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
	.ft__lead { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
	.story__grid { grid-template-columns: minmax(0, 1fr); }
	.story__portrait { width: min(82%, 20rem); }
	.story__text { max-width: none; }
	.story__creds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; }
	.story__creds > div:nth-child(odd) { padding-left: 0; border-left: 0; }
	.story__creds > div:nth-child(even) { padding-left: 1.25rem; }
	.ct__details { grid-template-columns: minmax(0, 1fr); }
	.ct__details div:first-child { grid-row: auto; }
	.prod { --pw: clamp(13.5rem, 58vw, 17rem); }
	.prod__intro { width: min(78vw, 22rem); }
	.prod__top { top: 5.4rem; }
	.ft__wrap { grid-template-columns: minmax(0, 1fr); }
	.ft__base { flex-direction: column; }
}

@media (max-width: 599px) {
	.brandmark__img { height: 3.1rem; }
	.hero__actions { gap: 1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mk__strip { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
	.mk__track { flex-wrap: wrap; animation: none; min-width: 0; gap: 1rem 2rem; padding-bottom: 1rem; }
	.mk__track[aria-hidden='true'] { display: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* =========================================================
   NO-MOTION FALLBACK ON DESKTOP
   Visitors who prefer reduced motion, or whose script fails, get the same
   stacked reading layout as tablets: products as swipeable rows per category,
   the journey as four stacked photographs. Nothing is hidden or pinned.
   ========================================================= */
:is(html.no-motion, html:not(.js)) .prod__frame { display: block; height: auto; overflow: visible; padding: 4.5rem 0 3rem; }
:is(html.no-motion, html:not(.js)) .prod__top { position: static; margin: 0 0 1.5rem; padding: 0 var(--cx-gutter); }
:is(html.no-motion, html:not(.js)) .prod__now, :is(html.no-motion, html:not(.js)) .prod__bar, :is(html.no-motion, html:not(.js)) .prod__end { display: none; }
:is(html.no-motion, html:not(.js)) .prod__track { display: block; width: auto; height: auto; padding: 0; }
:is(html.no-motion, html:not(.js)) .prod__intro { width: auto; max-width: 36rem; padding: 0 var(--cx-gutter); }
:is(html.no-motion, html:not(.js)) .prod__group { display: block; margin-top: 3rem; }
:is(html.no-motion, html:not(.js)) .prod__cat { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 1rem; padding: 0 var(--cx-gutter); margin-bottom: 1.25rem; }
:is(html.no-motion, html:not(.js)) .prod__catname { font-size: clamp(3.2rem, 8vw, 5.5rem); }
:is(html.no-motion, html:not(.js)) .prod__row { overflow-x: auto; gap: 1.5rem; padding: 0 var(--cx-gutter) 0.5rem; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cx-gutter); }
:is(html.no-motion, html:not(.js)) .prod__item { width: min(34vw, 20rem); scroll-snap-align: start; }
:is(html.no-motion, html:not(.js)) .prod__img { left: 0; width: 100%; }
:is(html.no-motion, html:not(.js)) .jr__stage { display: flex; flex-direction: column; height: auto; overflow: visible; }
:is(html.no-motion, html:not(.js)) .jr__title { position: static; order: -1; max-width: none; padding: 5rem var(--cx-gutter) 1.5rem; background: var(--cx-deep); font-size: 1.8rem; }
:is(html.no-motion, html:not(.js)) .jr__step { position: relative; min-height: 84vh; }
:is(html.no-motion, html:not(.js)) .jr__nav, :is(html.no-motion, html:not(.js)) .jr__bar { display: none; }

/* short laptop screens: keep every scene inside one viewport */
@media (min-width: 1024px) and (max-height: 800px) {
	.story__main { padding-top: 5.75rem; padding-bottom: 1.25rem; }
	.story__portrait { width: min(100%, 29rem, 46vh); }
	.story__title { font-size: clamp(2.6rem, min(5vw, 9.5vh), 5rem); }
	.story__copy { gap: 0.8rem; margin-top: 1rem; font-size: 0.92rem; line-height: 1.55; }
	.sign { margin-top: 1rem; }
	.story__band { padding-block: 1rem; }
	.hero__inner { padding-top: 6.5rem; }
}

@media (max-width: 767px) {
	:is(html.no-motion, html:not(.js)) .prod__item { width: min(72vw, 18rem); }
	:is(html.no-motion, html:not(.js)) .jr__step { min-height: 84svh; }
}