/* Core layout & components — aligned to Figma design system. */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.container--narrow { max-width: 56rem; }

/* Sections */
.section {
	position: relative;
	padding-block: var(--section-pad-y);
}
.section--banner {
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	color: #fff;
	/* Figma hero frame: 1920 × 950 → aspect ratio ~2.021:1.
	   Cap height so it doesn't exceed a short viewport; floor for mobile. */
	aspect-ratio: 1920 / 950;
	max-height: 100svh;
	min-height: min(70svh, 36rem);
	width: 100%;
	/* Reserve room for the fixed header so the title centres in the
	   space BELOW it, not behind it. */
	padding-top: clamp(4.5rem, 3.5rem + 1.5vw, 6.5rem);
	padding-bottom: 0;
}

.section-heading    { font-size: var(--fs-h2); font-weight: 600; margin-bottom: var(--sp-4); }
.section-heading--sm{ font-size: var(--fs-h4); }
.section-intro      { font-size: var(--fs-p); color: var(--c-muted); max-width: 60ch; margin-bottom: var(--sp-6); }
.section-body       { font-size: var(--fs-p); color: var(--c-muted); }

/* ─── Header ─────────────────────────────────────────── */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 40;
	color: #fff;
	transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.site-header.is-scrolled {
	background: rgba(0,0,0,0.94);
	/* No backdrop-filter here — it creates a containing block that
	   traps the mobile drawer (position: fixed) inside the header. */
}

/* 404 page only: header sits on a solid dark background so the
   white logo/nav/CTA stay readable against the 404's white canvas. */
body.error404 .site-header {
	background: #000 !important;
	color: #fff !important;
}
body.error404 .site-header__rule {
	background: rgba(255,255,255,0.18) !important;
	opacity: 1 !important;
}
body.error404 .site-main {
	padding-top: clamp(5rem, 4rem + 2vw, 7rem);
}
body.error404 .site-main--404 {
	min-height: calc(100svh - 7rem);
}
.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-5);
	padding-block: var(--sp-4);
}
/* Rule sits INSIDE the inner container so it starts at the same
   vertical line as the logo + banner headline + CTA button.
   Uses the Figma D9D9D9 neutral as a thin stroke. */
.site-header__rule {
	position: absolute;
	inset: auto var(--container-pad) 0 var(--container-pad);
	height: 1px;
	background: var(--c-line);
	opacity: 0.35;
	pointer-events: none;
}

/* Wordmark */
.site-header__brand {
	display: flex; flex-direction: column; align-items: flex-start;
	line-height: 1;
}
.site-wordmark {
	font-family: "Manrope", serif;
	font-weight: 300;
	font-size: clamp(1.75rem, 1rem + 2vw, 3rem);
	letter-spacing: 0.02em;
	color: inherit;
}
.site-wordmark__dot { opacity: 0.85; margin-inline: 0.15em; }
.site-wordmark__caption {
	font-size: clamp(0.688rem, 0.6rem + 0.15vw, 0.875rem);
	font-weight: 400;
	letter-spacing: 0.15em;
	margin-top: 0.35rem;
	opacity: 0.85;
}
.site-header__logo { width: auto; max-height: clamp(2.5rem, 2rem + 1vw, 3.75rem); }

/* Nav */
.site-nav { justify-self: center; }
.site-nav__menu {
	display: flex;
	gap: clamp(1.25rem, 0.8rem + 2vw, 3.5rem);
	font-size: var(--fs-p);
	font-weight: 500;
}
.site-nav__menu a {
	position: relative;
	padding-block: var(--sp-2);
	color: inherit;
	opacity: 0.88;
	transition: opacity var(--dur-1), color var(--dur-1);
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a {
	opacity: 1;
	font-weight: 600;
}

.site-nav__toggle {
	display: none;
	width: 2.5rem; height: 2.5rem;
	flex-direction: column; gap: 0.3rem;
	align-items: center; justify-content: center;
	color: inherit;
}
.site-nav__toggle-bar { display: block; width: 1.4rem; height: 0.125rem; background: currentColor; transition: transform var(--dur-1), opacity var(--dur-1); }

/* Header CTA is a touch smaller than the hero pill per Figma. */
.site-header__cta {
	justify-self: end;
	padding: clamp(0.55rem, 0.4rem + 0.35vw, 0.85rem) clamp(1rem, 0.75rem + 0.85vw, 1.85rem);
	font-size: var(--fs-sm);
	font-weight: 500;
}

/* ─── Buttons ─────────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	padding: clamp(0.7rem, 0.55rem + 0.5vw, 1.1rem) clamp(1.25rem, 0.9rem + 1.2vw, 2.25rem);
	border-radius: var(--r-pill);
	font-weight: 500; font-size: var(--fs-p);
	transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
	letter-spacing: 0.01em;
}
.btn--pill        { border-radius: var(--r-pill); }
.btn--primary     { background: #000; color: #fff; border: 1px solid #000; }
.btn--primary:hover { background: #fff; color: #000; border-color: #fff; }
.btn--pill-light  { background: #fff; color: #000; border: 1px solid #fff; }
.btn--pill-light:hover { background: #000; color: #fff; border-color: #000; }
.btn--ghost       { background: transparent; color: inherit; border: 1px solid currentColor; }
.btn--ghost:hover { background: currentColor; color: var(--c-bg); }

/* ─── Banner ──────────────────────────────────────────── */
.section--banner__media   { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.section--banner__bg      {
	width: 100%; height: 100%; object-fit: cover;
	animation: ffb-ken-burns 18s ease-in-out infinite alternate;
	transform-origin: 60% 50%;
}
@keyframes ffb-ken-burns {
	0%   { transform: scale(1.04) translateX(0);  }
	100% { transform: scale(1.12) translateX(-1.5%); }
}
.section--banner__inner > * {
	opacity: 0;
	transform: translateY(1.5rem);
	animation: ffb-banner-in 1.1s var(--ease-out-quint) both;
}
.section--banner__inner > *:nth-child(1) { animation-delay: 0.15s; }
.section--banner__inner > *:nth-child(2) { animation-delay: 0.35s; }
.section--banner__inner > *:nth-child(3) { animation-delay: 0.55s; }
.section--banner__inner > *:nth-child(4) { animation-delay: 0.75s; }
@keyframes ffb-banner-in {
	to { opacity: 1; transform: translateY(0); }
}
.section--banner__ctas .btn {
	animation: ffb-pill-pulse 2.6s ease-in-out infinite;
}
@keyframes ffb-pill-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
	50%      { box-shadow: 0 0 0 0.75rem rgba(255,255,255,0); }
}
.section--banner__overlay {
	position: absolute; inset: 0;
	/* Vertical-only darkening across the top band where the logo + menu
	   sit — the rest of the ship photo stays fully visible. */
	background: linear-gradient(180deg,
		rgba(0,0,0,0.7) 0%,
		rgba(0,0,0,0.35) 10%,
		rgba(0,0,0,0.08) 18%,
		transparent 28%
	);
}
/* .section--banner__inner also has class .container: it therefore inherits
   max-width / margin-inline: auto / padding-inline from .container, so the
   logo (also in .container), the header rule (absolute inside the same
   container), the headline and the CTA all share the exact same left edge. */
.section--banner__inner {
	position: relative;
	z-index: 1;
	padding-block: 0;
	width: 100%;
}
.section--banner__headline,
.section--banner__sub,
.section--banner__ctas { max-width: min(65%, 42rem); }
.section--banner__headline{ font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--sp-5); max-width: 18ch; }
.section--banner__sub     { font-size: var(--fs-h4); max-width: 38ch; margin: 0 0 var(--sp-6); opacity: 0.9; font-weight: 400; }
.section--banner__ctas    { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ─── About ──────────────────────────────────────────── */
.section--about__head    { margin-bottom: var(--sp-6); }
.section--about__eyebrow { font-size: var(--fs-p); color: #000104; margin-bottom: var(--sp-3); font-weight: 400; }
.section--about__heading { font-size: var(--fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; max-width: 22ch; color: #000104; }
.section--about__grid    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.section--about__media   { border-radius: var(--r-lg); overflow: hidden; }
.section--about__image   { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }
.section--about__copy    { font-size: var(--fs-p); color: #000104; line-height: 1.7; }
.section--about__copy p + p { margin-top: 1.2em; }
.section--about__copy strong { color: #000104; font-weight: 700; }

/* ─── Grid components ────────────────────────────────── */
.service-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--sp-5);
	align-items: start;
}
.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
	list-style: none;
	padding: 0;
	margin: 0;
}
.channel-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
	list-style: none;
	padding: 0;
	margin: 0;
}
.reason-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(14rem, 24vw, 20rem), 1fr));
	gap: var(--sp-5);
}
.partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(9rem, 14vw, 12rem), 1fr));
	gap: var(--sp-5);
	align-items: center;
}

/* What We Do — grey section, icon + title only, single row. */
.section--whatwedo {
	background: var(--c-surface);
}
.section--whatwedo__head    { margin-bottom: var(--sp-6); }
.section--whatwedo__eyebrow { font-size: var(--fs-p); color: #000104; margin-bottom: var(--sp-3); font-weight: 400; }
.section--whatwedo__heading { font-size: var(--fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: #000104; }

.service-item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	transition: transform var(--dur-2) var(--ease-out-quint);
}
.service-item:hover { transform: translateY(-0.25rem); }
.service-item__icon {
	display: inline-grid; place-items: center;
	width: clamp(2.25rem, 1.5rem + 1vw, 3rem);
	height: clamp(2.25rem, 1.5rem + 1vw, 3rem);
}
.service-item__icon img { width: 100%; height: 100%; object-fit: contain; }
.service-item__title {
	font-size: var(--fs-p);
	font-weight: 500;
	color: #000104;
	line-height: 1.4;
	max-width: 20ch;
}

/* Why Choose Us — heading + image stretch to match reason-list height. */
.section--why__grid   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: stretch; }
.section--why__left   { display: flex; flex-direction: column; gap: var(--sp-5); min-height: 0; }
.section--why__heading{ font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #000104; max-width: 18ch; }
.section--why__media  { flex: 1; min-height: 0; overflow: hidden; border-radius: var(--r-lg); }
.section--why__image  { width: 100%; height: 100%; object-fit: cover; display: block; }

.reason-list { display: grid; gap: var(--sp-5); list-style: none; padding: 0; margin: 0; }
.reason-row  { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.reason-row__icon {
	display: inline-grid; place-items: center;
	width: clamp(2.75rem, 2rem + 1vw, 3.5rem);
	height: clamp(2.75rem, 2rem + 1vw, 3.5rem);
	flex-shrink: 0;
}
.reason-row__icon img { width: 100%; height: 100%; object-fit: contain; }
.reason-row__title { font-size: var(--fs-h4); font-weight: 600; color: #000104; margin-bottom: var(--sp-2); line-height: 1.25; }
.reason-row__desc  { color: var(--c-ink-soft, #333); font-size: var(--fs-p); line-height: 1.5; max-width: 38ch; }

/* Our Products heading */
.section--products__head    { margin-bottom: var(--sp-6); }
.section--products__eyebrow { font-size: var(--fs-p); color: #000104; margin-bottom: var(--sp-3); font-weight: 400; }
.section--products__heading {
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #000104;
	text-transform: capitalize;
}

/* Product card — full-bleed image with overlaid title at bottom-centre. */
.product-card {
	list-style: none;
}
.product-card__inner {
	position: relative;
	display: block;
	border-radius: var(--r-sm);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	text-decoration: none;
	color: #fff;
	transition: transform var(--dur-2) var(--ease-out-quint), box-shadow var(--dur-2);
}
.product-card__inner:hover {
	transform: translateY(-0.4rem);
	box-shadow: var(--shadow-md);
}
.product-card__media {
	position: absolute; inset: 0;
	display: block;
	background: var(--c-surface);
}
.product-card__image {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--dur-3) var(--ease-out-quint);
}
.product-card__inner:hover .product-card__image { transform: scale(1.05); }
.product-card__shade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
	pointer-events: none;
}
.product-card__title {
	position: absolute;
	left: 0; right: 0; bottom: var(--sp-5);
	text-align: center;
	color: #fff;
	font-size: var(--fs-h5);
	font-weight: 600;
	letter-spacing: -0.005em;
	padding-inline: var(--sp-3);
	margin: 0;
	line-height: 1.2;
}

/* Channels We Serve — full-bleed dark section, 3-col card grid with overlaid titles */
.section--channels {
	background: #000;
	color: #fff;
}
.section--channels__head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: var(--sp-5);
	margin-bottom: var(--sp-6);
	flex-wrap: wrap;
}
.section--channels__eyebrow { font-size: var(--fs-p); color: rgba(255,255,255,0.65); margin-bottom: var(--sp-3); font-weight: 400; }
.section--channels__heading { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.section--channels__cta     { align-self: center; }

.channel-card {
	list-style: none;
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 4/3;
	transition: transform var(--dur-2) var(--ease-out-quint), box-shadow var(--dur-2);
	color: #fff;
}
.channel-card:hover {
	transform: translateY(-0.4rem);
	box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.5);
}
.channel-card__media {
	position: absolute; inset: 0; display: block; background: #222;
}
.channel-card__image {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--dur-3) var(--ease-out-quint);
}
.channel-card:hover .channel-card__image { transform: scale(1.05); }
.channel-card__shade {
	position: absolute; inset: 0;
	/* Continuous transparent → dark gradient that matches the
	   provided overlay.png (smooth fade across full card height). */
	background: linear-gradient(180deg,
		rgba(0,0,0,0)    0%,
		rgba(0,0,0,0.18) 35%,
		rgba(0,0,0,0.5)  75%,
		rgba(0,0,0,0.7)  100%
	);
	pointer-events: none;
}
/* Faint 1px inner stroke so the card outline reads against black. */
.channel-card::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255,255,255,0.08);
	pointer-events: none;
}
.channel-card__title {
	position: absolute;
	left: 0; right: 0; bottom: var(--sp-4);
	text-align: center;
	font-size: var(--fs-h5);
	font-weight: 500;
	letter-spacing: 0;
	padding-inline: var(--sp-3);
	margin: 0;
	line-height: 1.25;
	color: #fff;
}

/* Why Choose Us → Partners: tighten the gap and draw a container-wide
   hairline between them, matching the Figma flow. */
.section--why {
	padding-bottom: clamp(3rem, 2rem + 2vw, 5rem);
}
.section--partners {
	padding-top: 0;
}
.section--partners > .container {
	padding-top: clamp(3rem, 2rem + 2vw, 5rem);
	position: relative;
}
/* Hairline rule above Partners — drawn as a child div via ::before,
   sized to the container's CONTENT box (i.e. starts where the
   heading text starts, ends where the heading text ends). Using
   inset values that explicitly include the container's padding
   means the line cannot bleed into the padding gutter regardless
   of which section precedes Partners. */
.section--partners > .container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	margin-inline: var(--container-pad);
	background: var(--c-line);
	pointer-events: none;
}

/* Partners — section heading + infinite marquee (pauses on hover). */
.section--partners__head    { margin-bottom: var(--sp-6); }
.section--partners__eyebrow { font-size: var(--fs-p); color: #000104; margin-bottom: var(--sp-3); font-weight: 400; }
.section--partners__heading { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #000104; }
.section--partners__intro   { color: var(--c-muted); font-size: var(--fs-p); margin-top: var(--sp-3); max-width: 60ch; }

.partners-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	padding-block: var(--sp-2);
}
.partners-marquee__track {
	display: flex;
	width: max-content;
	list-style: none;
	padding: 0; margin: 0;
	animation: ffb-marquee 40s linear infinite;
	will-change: transform;
}
.partners-marquee:hover .partners-marquee__track,
.partners-marquee:focus-within .partners-marquee__track { animation-play-state: paused; }
/* Use margin-right (not flex gap) so every item carries its own
   trailing space — including the last item of each set. CSS gap
   skips the trailing edge, which makes the track 2N items + 2N-1
   gaps wide; translateX(-50%) then falls short of one set by half
   a gap and the marquee visibly stutters every loop. With margin
   the track is exactly 2 sets * (item + gap), so -50% lands cleanly
   on the duplicate's start. */
.partners-marquee__item { display: block; margin-right: var(--sp-4); }
.partners-tile {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	width: clamp(10rem, 12vw, 14rem);
	aspect-ratio: 16/9;
	padding: clamp(1rem, 0.75rem + 0.75vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 2rem);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	transition: border-color var(--dur-1), transform var(--dur-1) var(--ease-out-quint);
	overflow: hidden;
}
.partners-tile:hover { border-color: #000104; transform: translateY(-0.15rem); }
/* Force every logo into the same bounding box so a wide mark (Mars,
   Heineken) and a tall portrait one (Jack Daniels) read at the same
   visual weight. The single 1fr cell stretches the <img> to fill the
   tile's content area; object-fit: contain centres + scales each
   logo inside that shared box without changing the tile's size. */
.partners-tile__logo {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	filter: grayscale(0);
	opacity: 1;
	align-self: stretch;
	justify-self: stretch;
}
.partners-tile__link { display: block; text-decoration: none; }

/* ─── Hub ─────────────────────────────────────────────── */
.section--hub {
	background: #000;
	color: #fff;
}
.section--hub__head    { margin-bottom: var(--sp-6); max-width: 70ch; margin-inline: auto; text-align: center; }
.section--hub__eyebrow { font-size: var(--fs-p); color: rgba(255,255,255,0.6); margin-bottom: var(--sp-3); font-weight: 400; }
.section--hub__heading { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.section--hub__intro   { color: rgba(255,255,255,0.78); font-size: var(--fs-p); margin-top: var(--sp-3); line-height: 1.6; }

/* Two-row opposing-direction auto-slider. Top row drifts right → left,
   bottom row drifts left → right at a different speed — creates a
   parallax-ish rhythm that's more engaging than a flat marquee.
   Hover anywhere on the slider pauses both rows. */
.hub-slider {
	margin-top: var(--sp-6);
	display: grid;
	gap: var(--sp-4);
	padding-block: var(--sp-3);
}
.hub-slider__row {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.hub-slider__track {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0; margin: 0;
	width: max-content;
	will-change: transform;
}
/* margin-right instead of gap, so the trailing space of each set
   exists on the duplicate too — keeps the -50% loop seamless. */
.hub-slider__item { margin-right: var(--sp-4); }
.hub-slider__row--forward .hub-slider__track { animation: ffb-marquee 55s linear infinite; }
.hub-slider__row--reverse .hub-slider__track { animation: ffb-marquee-reverse 42s linear infinite; }
.hub-slider:hover .hub-slider__track,
.hub-slider:focus-within .hub-slider__track { animation-play-state: paused; }

@keyframes ffb-marquee-reverse {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.hub-slider__item {
	flex-shrink: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.08);
	/* Transparent so the rounded-corner anti-alias edges blend with
	   whatever is behind the slider instead of revealing a white
	   sliver where the image's pixels can't perfectly hit the mask
	   curve. */
	background: transparent;
	transition: transform var(--dur-2) var(--ease-out-quint), box-shadow var(--dur-2);
}
.hub-slider__item:hover {
	transform: translateY(-0.4rem) scale(1.03);
	box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.18);
	z-index: 2;
}
.hub-slider__row--forward .hub-slider__item--regular { height: clamp(12rem, 18vw, 18rem); }
.hub-slider__row--forward .hub-slider__item--tall    { height: clamp(16rem, 24vw, 24rem); }
.hub-slider__row--forward .hub-slider__item--wide    { height: clamp(10rem, 15vw, 15rem); }
.hub-slider__row--reverse .hub-slider__item--regular { height: clamp(10rem, 15vw, 15rem); }
.hub-slider__row--reverse .hub-slider__item--tall    { height: clamp(14rem, 20vw, 20rem); }
.hub-slider__row--reverse .hub-slider__item--wide    { height: clamp(9rem,  13vw, 13rem); }

.hub-slider__image {
	height: 100%;
	width: auto;
	display: block;
	object-fit: cover;
}

/* Optional highlight list under the slider. */
.feature-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 24vw, 22rem), 1fr));
	gap: var(--sp-4);
	margin-top: var(--sp-6);
	list-style: none;
	padding: 0;
}
.feature-list__item  { padding: var(--sp-4); border-left: 2px solid var(--c-ink); background: #fff; border-radius: 0 var(--r-md) var(--r-md) 0; }
.feature-list__title { font-size: var(--fs-h5); font-weight: 600; margin-bottom: var(--sp-1); color: #000104; }
.feature-list__desc  { color: var(--c-muted); font-size: var(--fs-p); }

/* ─── Testimonials ───────────────────────────────────── */
.section--testimonials__head    { margin-bottom: var(--sp-6); }
.section--testimonials__eyebrow { font-size: var(--fs-p); color: #000104; margin-bottom: var(--sp-3); font-weight: 400; }
.section--testimonials__heading { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #000104; }

.testimonial-carousel {
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
	margin: 0 auto;
}
.testimonial-carousel__viewport {
	position: relative;
	display: grid;
	isolation: isolate;
}
.testimonial-card {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(11rem, 16rem) 1fr;
	column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: stretch;
	color: #000104;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
	will-change: opacity;
	/* Outgoing card: fade out promptly so two cards aren't visible
	   at the same opacity. */
	transition: opacity 350ms ease-out,
	            visibility 0s linear 350ms;
}
.testimonial-card.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	/* Incoming card: wait for the outgoing one to mostly clear,
	   then fade in. The 250 ms delay + 400 ms fade keeps the swap
	   feeling smooth without ghost-text overlap. */
	transition: opacity 400ms ease-out 250ms,
	            visibility 0s;
}

.testimonial-card__person {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-2);
	padding-right: clamp(1rem, 0.5rem + 1vw, 2rem);
	border-right: 1px solid var(--c-line);
}
.testimonial-card__logo {
	display: grid;
	place-items: center;
	width: clamp(5rem, 4rem + 2vw, 7rem);
	height: clamp(5rem, 4rem + 2vw, 7rem);
	border-radius: var(--r-md);
	overflow: hidden;
	margin-bottom: var(--sp-3);
}
.testimonial-card__logo-img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__logo--placeholder {
	background: #000;
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-family: "Manrope", sans-serif;
	letter-spacing: 0.04em;
}
.testimonial-card__initials {
	font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	line-height: 1;
}
.testimonial-card__name { font-size: var(--fs-p); font-weight: 700; color: #000104; }
.testimonial-card__role { font-size: var(--fs-sm); color: #1A1A1A; margin-top: 0.1rem; }
.testimonial-card__org  { font-size: var(--fs-sm); color: #1A1A1A; }

.testimonial-card__body-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}
.testimonial-card__body {
	font-size: var(--fs-h5);
	color: #000104;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: 500;
	letter-spacing: -0.005em;
}

.testimonial-carousel__nav {
	display: flex;
	gap: var(--sp-3);
}
.testimonial-carousel__btn {
	width: 2.5rem; height: 2.5rem;
	border-radius: 50%;
	border: 1px solid var(--c-line);
	background: transparent;
	color: #000104;
	cursor: pointer;
	display: grid; place-items: center;
	transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.testimonial-carousel__btn:hover { background: #000; color: #fff; border-color: #000; transform: translateY(-0.1rem); }
.testimonial-carousel__btn--next { background: #000; color: #fff; border-color: #000; }
.testimonial-carousel__btn--next:hover { background: #fff; color: #000; }
.testimonial-carousel__btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: transparent; color: #000104; border-color: var(--c-line); }

.testimonial-carousel__dots {
	display: none;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: var(--sp-4) 0 0;
}
.testimonial-carousel__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(0, 1, 4, 0.2);
	cursor: pointer;
	transition: background var(--dur-1) var(--ease-out-quint),
	            transform var(--dur-1) var(--ease-out-quint),
	            width var(--dur-1) var(--ease-out-quint);
}
.testimonial-carousel__dot:hover { background: rgba(0, 1, 4, 0.45); }
.testimonial-carousel__dot.is-active {
	background: #000104;
	width: 1.5rem;
	border-radius: 0.25rem;
}

/* ─── Logos marquee ──────────────────────────────────── */
.logos-marquee { overflow: hidden; margin-top: var(--sp-5); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos-marquee__track { display: flex; animation: ffb-marquee 40s linear infinite; width: max-content; }
.logos-marquee__item { display: grid; place-items: center; padding-inline: var(--sp-3); margin-right: var(--sp-6); }
.logos-marquee__img { max-height: clamp(2rem, 4vw, 4rem); width: auto; filter: grayscale(1); opacity: 0.7; }
@keyframes ffb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── Contact (Get in Touch) ──────────────────────────── */
.section--contact {
	background: #000;
	color: #fff;
}
.section--contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 1.5rem + 3vw, 6rem); align-items: start; }
.section--contact__eyebrow { font-size: var(--fs-p); color: rgba(255,255,255,0.7); margin-bottom: var(--sp-3); font-weight: 400; }
.section--contact__heading { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.section--contact__lead    { font-size: var(--fs-p); color: rgba(255,255,255,0.75); margin-top: var(--sp-3); max-width: 42ch; }

.contact-meta {
	display: grid; gap: var(--sp-3);
	margin-top: var(--sp-5);
	font-size: var(--fs-p);
	list-style: none;
	padding: 0;
}
.contact-meta__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; color: rgba(255,255,255,0.9); }
.contact-meta__item--address { align-items: start; }
.contact-meta__icon { display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; color: rgba(255,255,255,0.8); }
.contact-meta__link { color: #fff; border-bottom: 1px solid rgba(255,255,255,0); transition: border-color var(--dur-1); padding-bottom: 0.15rem; }
.contact-meta__link:hover { border-color: rgba(255,255,255,0.6); }
.contact-meta__address { font-style: normal; line-height: 1.5; color: rgba(255,255,255,0.8); }

/* Banking details card */
.bank-card {
	margin-top: var(--sp-5);
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(255,255,255,0.12);
}
.bank-card__label { font-size: var(--fs-sm); color: rgba(255,255,255,0.55); margin-bottom: var(--sp-3); }
.bank-card__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	background: #161616;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--r-md);
	align-items: start;
}
.bank-card__logo { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; }
.bank-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.bank-card__name    { font-size: var(--fs-p); font-weight: 600; color: #fff; }
.bank-card__holder  { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); margin-top: 0.15rem; }
.bank-card__ibans   { list-style: none; padding: 0; margin-top: var(--sp-3); display: grid; gap: 0.3rem; font-size: var(--fs-sm); color: rgba(255,255,255,0.8); font-variant-numeric: tabular-nums; }
.bank-card__iban-label { color: rgba(255,255,255,0.55); margin-right: 0.25rem; }

/* Form */
.contact-form { display: grid; gap: var(--sp-4); }
.contact-form__row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.contact-form__field { display: grid; gap: var(--sp-2); }
.contact-form__label { font-size: var(--fs-sm); color: rgba(255,255,255,0.75); font-weight: 400; }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea {
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: var(--r-md);
	background: rgba(255,255,255,0.03);
	color: #fff;
	font-size: var(--fs-p);
	font-family: inherit;
	transition: border-color var(--dur-1), background var(--dur-1);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.35); }

/* intl-tel-input dark skin */
.contact-form .iti { width: 100%; }
.contact-form .iti__tel-input {
	width: 100%;
	padding-inline-start: clamp(5rem, 4rem + 2vw, 6.5rem) !important;
}
.iti__country-list {
	background: #111 !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: var(--r-md) !important;
	box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.5) !important;
	max-height: 18rem !important;
}
.iti__country:hover, .iti--show-flags-selector .iti__country.iti__highlight { background: rgba(255,255,255,0.08) !important; }
.iti__selected-country, .iti__selected-country-primary { background: transparent !important; color: #fff !important; }
.iti__search-input { background: #000 !important; color: #fff !important; border-color: rgba(255,255,255,0.2) !important; }
.iti__dial-code { color: rgba(255,255,255,0.7) !important; }
.contact-form input:focus, .contact-form textarea:focus {
	outline: none;
	border-color: rgba(255,255,255,0.45);
	background: rgba(255,255,255,0.06);
}
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: #ff6b6b; }
.contact-form__hp { position: absolute; left: -9999px; }
.contact-form__submit {
	justify-self: start;
	margin-top: var(--sp-2);
	color: #000104;
	font-weight: 500;
	padding: clamp(0.85rem, 0.65rem + 0.7vw, 1.2rem) clamp(2rem, 1.4rem + 2vw, 3.5rem);
	font-size: var(--fs-p);
}
.contact-form__status { font-size: var(--fs-sm); min-height: 1.5rem; color: rgba(255,255,255,0.75); }
.contact-form__status.is-success { color: #58d68d; }
.contact-form__status.is-error   { color: #ff6b6b; }

.section--contact__map { margin-top: var(--sp-6); aspect-ratio: 16/6; border-radius: var(--r-lg); overflow: hidden; }
.section--contact__map iframe { width: 100%; height: 100%; border: 0; }

/* ─── Footer ──────────────────────────────────────────── */
.site-footer {
	background: #fff;
	color: #000104;
	padding-block: var(--sp-6);
	margin-top: 0;
	border-top: 1px solid var(--c-line);
}

.footer-top {
	display: grid;
	grid-template-columns: 1.1fr 1.1fr 1.2fr;
	gap: var(--sp-6);
	align-items: start;
}
.footer-top__brand-link { display: block; margin-bottom: var(--sp-3); }
.footer-top__logo { max-height: clamp(2.5rem, 2rem + 1vw, 3.5rem); width: auto; display: block; }
.footer-top__registered { font-size: var(--fs-sm); color: #000104; max-width: 28ch; line-height: 1.5; margin-bottom: var(--sp-4); }

.site-wordmark--dark                 { color: #000104; font-weight: 300; font-size: clamp(1.75rem, 1rem + 2vw, 3rem); letter-spacing: 0.02em; display: inline-block; }
.site-wordmark__caption--dark        { color: #000104; }

.footer-nav { display: flex; justify-content: center; align-self: center; }
.footer-nav__menu {
	display: flex;
	gap: clamp(0.75rem, 0.4rem + 1vw, 2rem);
	font-size: var(--fs-p);
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: nowrap;
	justify-content: center;
	white-space: nowrap;
}
.footer-nav__menu li { white-space: nowrap; }
.footer-nav__menu a { color: #000104 !important; transition: opacity var(--dur-1); white-space: nowrap; }
.footer-nav__menu a:hover { opacity: 0.65; }

.footer-partner { text-align: right; }
.footer-partner__label   { font-size: var(--fs-sm); color: #000104; margin-bottom: var(--sp-2); text-transform: capitalize; }
.footer-partner__logo    { max-height: clamp(1.75rem, 1.25rem + 1vw, 2.5rem); width: auto; margin-left: auto; display: block; }
.footer-partner__address { font-size: var(--fs-sm); color: #000104; line-height: 1.5; margin-top: var(--sp-3); font-style: normal; max-width: 32ch; margin-left: auto; }

.footer-social { display: flex; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.footer-social__link {
	width: clamp(2.5rem, 2rem + 1vw, 3rem);
	height: clamp(2.5rem, 2rem + 1vw, 3rem);
	border-radius: 50%;
	display: grid; place-items: center;
	color: #000104;
	transition: color var(--dur-1), transform var(--dur-1), background var(--dur-1);
}
.footer-social__link:hover { color: #fff; background: #000104; transform: translateY(-0.15rem); }
.footer-social__link svg { width: clamp(1.6rem, 1.2rem + 0.7vw, 2rem); height: clamp(1.6rem, 1.2rem + 0.7vw, 2rem); }

.footer-divider {
	border: 0;
	height: 1px;
	background: var(--c-line);
	margin-block: var(--sp-5);
	margin-inline: 0;
	width: 100%;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	font-size: var(--fs-sm);
	color: #000104;
	flex-wrap: wrap;
}
.footer-bottom__copy  { color: #000104; font-size: var(--fs-sm); }
.footer-bottom__legal { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-4); flex-wrap: wrap; color: #000104; }
.footer-bottom__legal li { position: relative; padding-right: var(--sp-4); color: #000104; }
.footer-bottom__legal li:not(:last-child)::after {
	content: "|";
	position: absolute;
	right: 0;
	color: var(--c-line);
}
.footer-bottom__legal li:last-child { padding-right: 0; }
.footer-bottom__legal-label { color: #000104; margin-right: 0.25rem; }

/* ─── Scroll-to-top button ───────────────────────────── */
.scroll-top {
	position: fixed;
	right: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
	bottom: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
	width: clamp(2.75rem, 2.25rem + 1vw, 3.25rem);
	height: clamp(2.75rem, 2.25rem + 1vw, 3.25rem);
	border-radius: 50%;
	background: #000;
	color: #fff;
	border: 1px solid #000;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translateY(0.75rem) scale(0.85);
	pointer-events: none;
	z-index: 45;
	transition: opacity var(--dur-2) var(--ease-out-quint),
	            transform var(--dur-2) var(--ease-out-quint),
	            background var(--dur-1), color var(--dur-1);
	box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2);
}
.scroll-top[hidden] { display: grid !important; }
.scroll-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top:hover { background: #fff; color: #000; border-color: #000; transform: translateY(-0.2rem) scale(1.05); }
/* When sitting on the white footer band, invert so the button
   reads as a black-on-white tile against the surrounding white. */
.scroll-top.is-on-footer { background: #000; color: #fff; border-color: #000; }
.scroll-top.is-on-footer:hover { background: #fff; color: #000; border-color: #000; }
.scroll-top svg { display: block; }

/* ─── 404 ─────────────────────────────────────────────── */
.site-main--404 {
	min-height: 80svh;
	display: grid;
	place-items: center;
	padding-block: var(--sp-8);
	position: relative;
	overflow: hidden;
}
.site-main--404::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 20% 30%, rgba(0,0,0,0.03), transparent 70%),
		radial-gradient(45% 40% at 85% 75%, rgba(0,0,0,0.04), transparent 70%);
	pointer-events: none;
}
.section--404 {
	position: relative;
	text-align: center;
}
.section--404__code {
	font-size: clamp(8rem, 6rem + 10vw, 20rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.9;
	background: linear-gradient(180deg, #000 0%, #000 35%, rgba(0,0,0,0.08) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: var(--sp-4);
}
.section--404__title {
	font-size: var(--fs-h2);
	font-weight: 700;
	color: #000104;
	margin-bottom: var(--sp-3);
}
.section--404__desc  {
	font-size: var(--fs-p);
	color: var(--c-muted);
	max-width: 48ch;
	margin: 0 auto var(--sp-6);
	line-height: 1.6;
}
.section--404__actions {
	display: flex;
	gap: var(--sp-3);
	justify-content: center;
	flex-wrap: wrap;
}
.section--404__links {
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: var(--fs-sm);
}
.section--404__links-title { margin-bottom: var(--sp-3); color: #000104; font-weight: 500; }
.section--404__links ul { display: inline-flex; gap: var(--sp-4); list-style: none; padding: 0; flex-wrap: wrap; justify-content: center; }
.section--404__links a { color: #000104; border-bottom: 1px solid transparent; padding-bottom: 0.15rem; transition: border-color var(--dur-1); }
.section--404__links a:hover { border-bottom-color: #000104; }