/*
 * The frame every page sits in: header, mobile menu, breadcrumbs, footer.
 *
 * Colours come from tokens.css. No hex values below.
 */

/* =========================================================
   Header
   =========================================================
   Two elements. The outer one reserves the full height and never changes,
   so the page below it never shifts. The inner white bar is what shrinks.
   The outer is pointer-events:none so the transparent strip beside the bar
   does not swallow clicks meant for the page.
   ========================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--header-h);
	pointer-events: none;
}

.site-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	height: var(--header-h);
	background: var(--page);
	pointer-events: auto;
	transition: height var(--dur) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.site-header.is-scrolled .site-header__in { box-shadow: var(--shadow-header); }
.site-header.is-compact .site-header__in { height: var(--header-h-scrolled); }

html { scroll-padding-top: calc(var(--header-h) + var(--space-sm)); }

/* ---- Logo ----------------------------------------------------------- */
/*
 * The mark keeps its proportions while the words beside it fade, so the
 * logo narrows rather than squashing.
 */
.site-logo {
	display: block;
	width: var(--logo-w);
	min-width: 90px;
	aspect-ratio: 159 / 59;
	overflow: hidden;
	line-height: 0;
	color: var(--text);
	transition: width var(--dur) var(--ease), aspect-ratio var(--dur) var(--ease);
}

.site-logo svg { display: block; width: 100%; height: auto; }

/* The logo is the same full mark, with the tagline, at every scroll position. */

/* ---- Primary nav ---------------------------------------------------- */
/*
 * Hover draws a rule from the right, the direction the language reads.
 * The current page keeps it drawn.
 */
.site-nav__list {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	font-weight: var(--w-bold);
}

.site-nav a {
	position: relative;
	display: block;
	white-space: nowrap;
}

.site-nav a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -4px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform var(--dur) var(--ease);
}

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

/* Keep the text blue on hover. The rule is the whole signal. */
.site-nav a:hover { color: var(--text); }

/* =========================================================
   The header, on every page
   =========================================================
   Drawn on the home page and, since 21.10.2026, the header of every page
   (Rivki: all screens like the home page). The bar carries no white until
   the page scrolls, the logo keeps its own spot 98 from the left edge, and
   the nav sits top-aligned in the comp's type.
   ========================================================= */

.site-header__in {
	padding-inline-end: max(16px, 98 * var(--u));
	background: transparent;
	transition: background-color .25s, height var(--dur) var(--ease),
		padding-top var(--dur) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.site-header.is-scrolled .site-header__in { background: var(--page); }

/*
 * The bar is the home page's, `01-home_1.html`: top-aligns it and pushes it down 49u, drops the nav a
 * further 25u, and sets the links at 18u on a 1.31 line box rather than the
 * 17px on 1.7 the rest of the site uses.
 *
 * All four belong together. An earlier pass took the placement without the
 * type, and our taller line box then handed the nav an extra half-leading of
 * its own and left it low, which is why the bar was centred instead. The type
 * is ported here too, so flex-start lands where the comp draws it.
 */
@media (min-width: 1024px) {
	.site-header__in {
		align-items: flex-start;
		padding-top: calc(49 * var(--u));
	}

	/*
	 * The comp has no scrolled state, so the shorter bar keeps the same
	 * balance rather than inventing one: the top padding gives back half of
	 * what the bar loses, and transitions with it instead of snapping.
	 */
	.site-header.is-compact .site-header__in {
		padding-top: calc(49 * var(--u) - (var(--header-h) - var(--header-h-scrolled)) / 2);
	}

	.site-nav { padding-top: calc(25 * var(--u)); }

	.site-nav__list { gap: max(14px, 32 * var(--u)); }

	.site-nav a {
		font-size: max(12px, 18 * var(--u));
		line-height: 1.31;
	}
}

/*
 * An open menu needs its own backdrop, or the links sit on the hero.
 */
.site-header.is-open .site-header__in { background: var(--page); }

/* Below the comp's desktop composition the bar is the shared centred one. */
@media (max-width: 1023px) {
	.site-header__in { align-items: center; padding-inline-end: var(--gutter); }
	.site-nav { padding-top: 0; }
}


/* The 390 comp keeps the tagline under the logo, and the burger sits 52 from the edge. */
@media (max-width: 1023px) {
	/* Comp: the burger's centre is at x 338 (52 from the right edge), the logo starts at x 25. */
	.burger { margin-inline-start: calc(17 * var(--m)); }
	.site-logo { margin-inline-end: calc(8 * var(--m)); }
}

/* ---- Burger and mobile menu ----------------------------------------- */

.burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: none;
	color: var(--text);
	cursor: pointer;
}

.burger svg { width: 100%; height: 100%; }

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 49;
	display: none;
	/* The links start 120 from the top of the screen, under the header bar. */
	padding: 120px var(--gutter) var(--space-md);
	text-align: center;
	background: var(--page);
	overflow-y: auto;
}

.mobile-nav__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 24px;
	font-weight: var(--w-ultrabold);
}

.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { display: block; }


/* =========================================================
   Breadcrumbs
   ========================================================= */

.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	padding-top: var(--space-xs);
	font-size: 15px;
	color: var(--text-soft);
}

.crumbs a { color: var(--text-soft); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text); font-weight: var(--w-bold); }

/* =========================================================
   Newsletter strip. Straddles the edge between page and footer:
   the background turns navy at the strip's midline.
   ========================================================= */

.nlb {
	margin-top: 112px;
	padding-inline: var(--gutter);
	background: linear-gradient(to bottom, transparent 50%, var(--footer-bg) 50%);
}

.nlb + .footer { margin-top: 0; }

.nlb__card {
	padding: 56px clamp(24px, 5vw, 72px) 44px;
	background: var(--surface);
	color: var(--c-blue);
	text-align: center;
}

.nlb__title {
	margin: 0;
	font-size: 30px;
	font-weight: var(--w-ultrabold);
	line-height: 1.2;
	text-wrap: balance;
}


.nlb__form { max-width: 1000px; margin: 28px auto 0; }
.nlb__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.nlb__field { min-width: 0; text-align: start; }

.nlb__field input {
	width: 100%;
	height: 56px;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--c-blue);
	font: inherit;
	font-size: 18px;
}

.nlb__field input::placeholder { color: var(--text-soft); }
.nlb__field input:focus { outline: 2px solid var(--accent); outline-offset: 0; }

.nlb__btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	height: 56px;
	border: 0;
	background: var(--accent);
	color: var(--text-invert);
	font: inherit;
	font-size: 18px;
	font-weight: var(--w-bold);
	cursor: pointer;
}

.nlb__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--c-blue);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.nlb__btn:hover::before,
.nlb__btn:focus-visible::before { transform: scaleX(1); }

.nlb__err {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: var(--w-bold);
}

.nlb__err::before {
	content: "!";
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--text-invert);
	font-size: 13px;
	font-weight: 800;
}

.nlb__field.is-invalid .nlb__err { display: flex; }
.nlb__field.is-invalid input { box-shadow: inset 0 -3px 0 var(--accent); }

.nlb__note { margin: 16px 0 0; font-size: 15px; line-height: 1.5; }
.nlb__note[hidden] { display: none; }
.nlb__note a { text-decoration: underline; text-underline-offset: 3px; }
.nlb__note a:hover { color: var(--accent); }

/* A field for bots only. Off the page, not display:none, which some fill anyway. */
.nlb__trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.nlb__done {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 24px 0 0;
	font-size: 19px;
	line-height: 1.5;
}

.nlb__done span {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--text-invert);
}

.nlb__done svg { width: 20px; height: 20px; }
.nlb.is-done .nlb__form { display: none; }
.nlb.is-done .nlb__done { display: flex; }

@media (prefers-reduced-motion: reduce) { .nlb__btn::before { transition: none; } }

/* =========================================================
   Footer
   ========================================================= */

.footer {
	margin-top: 112px;
	padding-block: var(--space-xl) var(--space-lg);
	background: var(--footer-bg);
	color: var(--text-invert);
}

.footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-lg);
}

.footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-xl); }

.footer__label { font-size: 15px; color: var(--c-sky); margin: 0; }

/*
 * No outline and no background on these. The icon itself takes the accent
 * on hover, which is the whole of the interaction.
 */
.f-icons {
	display: flex;
	gap: 10px;
	margin: 12px 0 0;
	margin-inline-start: -11px;
	padding: 0;
	list-style: none;
}

.f-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--text-invert);
	/* The footer is the navy, so that is what shows through a punched glyph. */
	--icon-punch: var(--footer-bg);
	transition: color var(--dur-fast) var(--ease);
}

.f-icons a:hover { color: var(--accent); }
.f-icons svg { width: 24px; height: 24px; }

.footer__logo {
	display: block;
	width: 170px;
	line-height: 0;
	color: var(--text-invert);
}

.footer__logo svg { width: 100%; height: auto; }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: var(--space-lg);
	padding-top: 18px;
	border-top: 1px solid var(--rule-invert);
	font-size: 14px;
	color: var(--c-sky);
}

.footer__bottom small { font-size: inherit; color: inherit; }

.footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__list a,
.footer__list button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.footer__list a:hover,
.footer__list button:hover { color: var(--accent); }
.footer__list a[aria-current] { color: var(--text-invert); }

/* =========================================================
   Below 1024: the nav folds into the burger
   ========================================================= */

@media (max-width: 1023px) {
	.site-nav { display: none; }
	.burger { display: inline-flex; }
}

@media (max-width: 767px) {
	.crumbs { padding-top: 4px; font-size: 14px; }
	.footer { margin-top: 80px; }
	.nlb { margin-top: 80px; background: linear-gradient(to bottom, transparent 70%, var(--footer-bg) 70%); }
	.nlb__card { padding: 36px 20px 32px; }
	.nlb__title { font-size: 25px; }
	.nlb__row { grid-template-columns: 1fr; gap: 12px; }
	.nlb__done { font-size: 17px; }
	.footer__logo { width: 140px; }
	.footer__top { gap: 32px; }
	.footer__cols { gap: 28px; }
}

/* =========================================================
   Page not found
   ========================================================= */

.nf {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-md) var(--gutter) var(--space-2xl);
	text-align: center;
}

/* Faded into the page on all four sides, so it has no visible frame. */
.nf__img {
	display: block;
	width: min(880px, 100%);
	height: auto;
	aspect-ratio: 1440 / 586;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 10%, #000 85%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 10%, #000 85%, transparent);
	mask-composite: intersect;
}

.nf__title {
	margin: var(--space-xs) 0 0;
	font-size: clamp(34px, 3.4vw, 56px);
	font-weight: var(--w-ultrabold);
	line-height: 1.1;
}

.nf__lead { margin: 14px auto 0; font-size: 21px; line-height: 1.6; }
.nf .btn { margin-top: 32px; }

@media (max-width: 767px) {
	.nf { padding: 56px 20px 72px; }
	.nf__img { width: calc(100% + 40px); max-width: none; margin: 0 -20px; aspect-ratio: 1.9; object-fit: cover; }
	.nf__title { font-size: 32px; }
	.nf__lead { font-size: 18px; }
	.nf .btn { width: 100%; }
}

/* =========================================================
   Promo banner above the footer. Absent unless an image is set.
   ========================================================= */

.promo { margin-block: var(--space-xl, 64px) 0; }
.promo__link { display: block; }
.promo img { display: block; width: 100%; height: auto; }