/* ==========================================================================
   כלכלית מלאכי · main.css
   Tokens trace to docs/02-art-direction.md. RTL first, logical properties throughout.
   ========================================================================== */

@font-face {
	font-family: "Google Sans";
	src: url("../fonts/google-sans-hebrew.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
	font-family: "Google Sans";
	src: url("../fonts/google-sans-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* brand */
	--navy: #0C263A;
	--navy-2: #12324A;
	--teal: #46BEA7;
	--blue: #4B74AF;
	--gray: #8F9C9E;
	--mist: #F3F6F6;
	--white: #FFFFFF;
	/* accessible ink variants (text on light) */
	--teal-ink: #137A69;
	--blue-ink: #3E66A1;
	--gray-ink: #5B6A6D;
	--ink: var(--navy);
	--ink-2: #3E5566;
	/* tone-on-tone */
	--tone-teal: #E4F4F0;
	--tone-blue: #E5ECF5;
	--tone-gray: #ECF0F0;
	--line: rgba(12, 38, 58, .1);
	/* type */
	--font: "Google Sans", "Heebo", "Segoe UI", system-ui, sans-serif;
	--fs-display: clamp(2.875rem, min(5.4vw, 9vh), 5.5rem);
	--fs-h2: clamp(2.125rem, 3.4vw, 3.5rem);
	--fs-h3: clamp(1.375rem, 1.7vw, 1.75rem);
	--fs-lead: clamp(1.125rem, 1.35vw, 1.3125rem);
	--fs-body: 1.125rem;
	--fs-small: .875rem;
	/* space */
	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
	--gutter: clamp(20px, 5vw, 84px);
	--maxw: 1360px;
	/* radius */
	--r-ribbon: 28px 28px 8px 8px;
	--r-card: 20px;
	--r-tile: 28px;
	--r-pill: 999px;
	/* motion */
	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--shadow: 0 18px 50px -18px rgba(12, 38, 58, .28);
	--shadow-soft: 0 8px 30px rgba(12, 38, 58, .08);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.a11y-big { font-size: 118.75%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
::selection { background: var(--teal); color: var(--navy); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
	position: fixed; z-index: 200; top: 12px; inset-inline-start: 12px;
	padding: 12px 20px; border-radius: var(--r-pill);
	background: var(--navy); color: #fff; font-weight: 500;
	transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

.h2 { font-size: var(--fs-h2); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }

/* eyebrow pill: the three-ribbon mark */
.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	margin-block-end: var(--s-5);
	padding: 6px 14px 6px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .7);
	font-size: var(--fs-small); font-weight: 500; line-height: 1.4;
	color: var(--ink-2);
}
.eyebrow__mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eyebrow__mark i { display: block; width: 3px; border-radius: 2px 2px 0 0; }
.eyebrow__mark i:nth-child(1) { height: 9px; background: var(--teal); }
.eyebrow__mark i:nth-child(2) { height: 12px; background: var(--blue); }
.eyebrow__mark i:nth-child(3) { height: 14px; background: var(--gray); }
.eyebrow--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .82); }

/* buttons */
.btn {
	--bh: 56px;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--bh); padding: 0 26px;
	border-radius: var(--r-pill);
	font-size: 1.0625rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
	transition: transform .5s var(--ease), background-color .3s, color .3s, box-shadow .5s var(--ease);
	will-change: transform;
}
.btn .ic { width: 20px; height: 20px; transition: transform .5s var(--ease); }
.btn:hover .ic { transform: translateX(-4px); }
.btn--sm { --bh: 44px; padding: 0 18px; font-size: .9375rem; }
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -10px rgba(12, 38, 58, .55); }
.btn--navy:hover { background: var(--navy-2); box-shadow: 0 16px 34px -12px rgba(12, 38, 58, .6); }
.btn--teal { background: var(--teal); color: var(--navy); }
.btn--teal:hover { background: #5BCBB5; }
.btn--ghost { background: rgba(255, 255, 255, .65); color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(12, 38, 58, .18); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); background: #fff; }
.btn__badge {
	display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
	border-radius: var(--r-pill); background: var(--teal); color: var(--navy); font-size: .8125rem; font-weight: 700;
}
.link { position: relative; font-weight: 500; color: var(--navy); padding-block: 4px; }
.link::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1.5px; background: currentColor;
	transform: scaleX(.0001); transform-origin: right; transition: transform .5s var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link--arrow { display: inline-flex; align-items: center; gap: 8px; }
.link--arrow .ic { width: 18px; height: 18px; }

.ic { width: 20px; height: 20px; flex: none; }
.nowrap { white-space: nowrap; unicode-bidi: isolate; }

.demo-tag {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; border-radius: var(--r-pill);
	background: #FFF3D6; color: #6B4D0F; font-size: .75rem; font-weight: 500; line-height: 1.5;
	vertical-align: middle;
}
.demo-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D99A1E; }

/* ==========================================================================
   Header · three floating capsules
   ========================================================================== */
.hdr { position: fixed; z-index: 100; top: 14px; inset-inline: 0; pointer-events: none; }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 16px; }
.cap {
	pointer-events: auto;
	background: rgba(255, 255, 255, .74);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
	border: 1px solid rgba(12, 38, 58, .07);
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-soft);
	transition: box-shadow .4s, background-color .4s, transform .6s var(--ease);
}
.hdr.is-scrolled .cap { background: rgba(255, 255, 255, .86); box-shadow: 0 10px 34px rgba(12, 38, 58, .12); }
.hdr.is-hidden .cap { transform: translateY(-130%); }
.hdr.is-hidden .nav:focus-within, .hdr.is-hidden .cap:focus-within { transform: none; }

.hdr__logo { display: flex; align-items: center; height: 64px; padding: 0 22px 0 26px; }
.hdr__logo-svg { width: 148px; height: auto; }

.nav { position: relative; display: flex; align-items: center; height: 56px; padding: 0 6px; }
.nav__list { display: flex; align-items: center; gap: 2px; position: relative; z-index: 1; }
.nav__link {
	display: inline-flex; align-items: center; gap: 6px;
	height: 44px; padding: 0 15px; border-radius: var(--r-pill);
	font-size: .9375rem; font-weight: 500; color: var(--navy); white-space: nowrap;
	transition: color .3s;
}
.nav__link .ic--chev { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.nav__link[aria-expanded="true"] .ic--chev { transform: rotate(180deg); }
.nav__link.is-soon { color: #7C8A8D; cursor: default; }
.nav__link small { font-size: .6875rem; font-weight: 500; padding: 1px 7px; border-radius: var(--r-pill); background: var(--mist); color: var(--gray-ink); }
.nav__count {
	display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: var(--r-pill); background: var(--teal); color: var(--navy); font-size: .75rem; font-weight: 700;
}
.nav__pill {
	position: absolute; z-index: 0; top: 6px; height: 44px; width: 0; left: 0;
	border-radius: var(--r-pill); background: rgba(12, 38, 58, .07);
	opacity: 0; transition: opacity .3s, transform .5s var(--ease), width .5s var(--ease);
	pointer-events: none;
}
.nav__pill.is-on { opacity: 1; }

.sub {
	position: absolute; top: calc(100% + 12px); inset-inline-start: 50%;
	width: min(720px, 92vw);
	transform: translateX(50%);
	padding: 14px; border-radius: 28px; background: #fff;
	box-shadow: 0 30px 80px -20px rgba(12, 38, 58, .35), 0 0 0 1px rgba(12, 38, 58, .06);
	opacity: 0; translate: 0 -8px; transition: opacity .35s var(--ease), translate .5s var(--ease);
}
.sub[hidden] { display: block; visibility: hidden; pointer-events: none; }
.sub.is-open { opacity: 1; translate: 0 0; visibility: visible; }
.sub__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px; }
.sub__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sub__list a { display: block; padding: 14px 16px; border-radius: 16px; transition: background-color .25s; }
.sub__list a:hover, .sub__list a:focus-visible { background: var(--mist); }
.sub__list strong { display: block; font-size: 1rem; font-weight: 500; line-height: 1.3; }
.sub__list span { display: block; margin-top: 3px; font-size: .8125rem; color: var(--gray-ink); line-height: 1.4; }
.sub__card {
	position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
	min-height: 220px; padding: 22px; border-radius: 20px; background: var(--navy); color: #fff;
}
.sub__ribbons { position: absolute; top: -10%; inset-inline-end: -14%; height: 120%; width: auto; opacity: .95; transition: transform .8s var(--ease); }
.sub__card:hover .sub__ribbons { transform: translateY(-6%); }
.sub__card-k { position: relative; font-size: .8125rem; color: var(--teal); font-weight: 500; }
.sub__card-t { position: relative; font-size: 1.25rem; line-height: 1.2; font-weight: 700; max-width: 12ch; }
.sub__card-go { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: rgba(255, 255, 255, .8); }
.sub__card-go .ic { width: 16px; height: 16px; }

.hdr__actions { display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 10px; }
.hdr__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--navy); transition: background-color .25s; }
.hdr__icon:hover { background: rgba(12, 38, 58, .07); }
.hdr__icon .ic { width: 22px; height: 22px; }
.hdr__burger { display: none; }

/* mobile menu */
.mnav {
	position: fixed; z-index: 90; inset: 0; overflow-y: auto;
	padding: 110px var(--gutter) 40px; background: #fff;
	opacity: 0; transition: opacity .4s var(--ease);
}
.mnav[hidden] { display: block; visibility: hidden; pointer-events: none; }
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav__ribbons { position: absolute; bottom: 0; inset-inline-end: -40px; height: 46%; width: auto; opacity: .16; pointer-events: none; }
.mnav__in { position: relative; }
.mnav__k { font-size: .875rem; color: var(--gray-ink); margin-bottom: 8px; }
.mnav__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.mnav__sub a { display: block; padding: 8px 0; font-size: 1.0625rem; font-weight: 500; }
.mnav__main li { border-bottom: 1px solid var(--line); }
.mnav__main a, .mnav__main span { display: flex; align-items: center; gap: 10px; padding: 16px 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.mnav__main .is-soon { color: #8A9799; }
.mnav__main small { font-size: .75rem; font-weight: 500; padding: 2px 8px; border-radius: var(--r-pill); background: var(--mist); color: var(--gray-ink); }

/* accessibility panel */
.a11y {
	position: fixed; z-index: 110; top: 92px; inset-inline-end: 16px;
	width: min(300px, calc(100vw - 32px)); padding: 18px; border-radius: 24px; background: #fff;
	box-shadow: 0 30px 80px -20px rgba(12, 38, 58, .4), 0 0 0 1px rgba(12, 38, 58, .06);
}
.a11y[hidden] { display: none; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.a11y__head h2 { font-size: 1.125rem; }
.a11y__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y__opts button {
	min-height: 64px; padding: 10px; border-radius: 16px; background: var(--mist);
	font-size: .875rem; font-weight: 500; line-height: 1.3; text-align: center;
	box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background-color .2s;
}
.a11y__opts button[aria-pressed="true"] { background: var(--tone-teal); box-shadow: inset 0 0 0 2px var(--teal-ink); }
.a11y__statement { display: block; margin-top: 12px; font-size: .875rem; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Hero · "יוצאים מהמסגרת"
   ========================================================================== */
.hero {
	--hv: max(100svh, 640px);
	position: relative; height: var(--hv); overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #fff 55%, var(--mist) 100%);
}
.hero__stage { position: absolute; inset: 0; }
.hero__layer {
	position: absolute; bottom: 0;
	left: calc(var(--hv) * -0.1066);
	height: calc(var(--hv) * 1.3251);
	width: calc(var(--hv) * 1.2407);
	max-width: none; overflow: visible;
	will-change: transform;
}
.hero__photos image { image-rendering: auto; }
.hero__fig { opacity: 0; }
.hero__fig.is-on { opacity: 1; }
.no-js .hero__fig.is-on, .hero__fig.is-on { opacity: 1; }

.hero__caption {
	position: absolute; z-index: 3; bottom: 28px; left: 28px;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 18px 10px 16px; border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: var(--shadow-soft);
	font-size: .9375rem; font-weight: 500; color: var(--navy);
}
.hero__caption-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); transition: background-color .5s; }

.hero__copy {
	position: absolute; z-index: 4;
	top: 0; bottom: 12%;
	inset-inline-start: var(--gutter);
	width: min(640px, calc(100vw - var(--hv) * .95 - var(--gutter) * 1.1));
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	padding-top: 90px;
}
.live {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 6px 14px 6px 6px; margin-bottom: 26px;
	border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-soft);
	font-size: .875rem; color: var(--ink-2);
	transition: box-shadow .4s var(--ease), transform .5s var(--ease);
}
.live:hover { box-shadow: 0 0 0 1px rgba(12, 38, 58, .2), var(--shadow); transform: translateY(-2px); }
.live__tag { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--navy); color: #fff; font-weight: 500; }
.live__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.live__pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; animation: kk-pulse 2.4s var(--ease) 3; }
.live__go { width: 16px; height: 16px; color: var(--gray-ink); }
@keyframes kk-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.hero__title { display: block; }
.hero__kicker { display: block; margin-bottom: 14px; font-size: var(--fs-lead); font-weight: 500; color: var(--ink-2); line-height: 1.3; }
.hero__sub { display: block; margin-top: 14px; font-size: clamp(1.375rem, 2.3vw, 2.125rem); font-weight: 500; line-height: 1.2; color: var(--teal-ink); }
.hero__display { display: block; font-size: var(--fs-display); line-height: 1.02; font-weight: 700; letter-spacing: -.015em; color: var(--navy); }
.hero__display .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__display .line > span { display: inline-block; }
.hero__display em { color: var(--teal); }
.hero__lead { margin-top: 24px; max-width: 40ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.scenes { display: flex; gap: 10px; margin-top: 40px; }
.scenes__btn { display: flex; flex-direction: column; gap: 8px; width: 104px; padding: 6px 0; text-align: start; }
.scenes__bar { position: relative; display: block; height: 4px; border-radius: 4px; background: rgba(12, 38, 58, .1); overflow: hidden; }
.scenes__bar i { position: absolute; inset: 0; border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform .9s var(--ease); }
.scenes__btn--teal i { background: var(--teal); }
.scenes__btn--blue i { background: var(--blue); }
.scenes__btn--gray i { background: var(--gray); }
.scenes__btn.is-on i, .scenes__btn.is-past i { transform: scaleX(1); }
.scenes__label { font-size: .875rem; font-weight: 500; color: var(--gray-ink); transition: color .3s; }
.scenes__btn.is-on .scenes__label { color: var(--navy); }

.hero__scroll {
	position: absolute; z-index: 4; bottom: 28px; inset-inline-start: var(--gutter);
	display: block; width: 26px; height: 42px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(12, 38, 58, .3);
}
.hero__scroll span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--navy); animation: kk-wheel 2s var(--ease) 4; }
@keyframes kk-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* JS intro states (removed after the intro runs) */
.js .hero:not(.is-ready) [data-hero-in],
.js .hero:not(.is-ready) [data-hero-line],
.js .hero:not(.is-ready) .hero__caption { opacity: 0; }
.js .hero:not(.is-ready) .hero__ribbons .rb { transform: translateY(70px); }

/* ==========================================================================
   Quick access · bento
   ========================================================================== */
.access { padding: var(--s-10) 0 var(--s-9); background: linear-gradient(180deg, var(--mist) 0, #fff 260px); }
.access__head { margin-bottom: var(--s-7); }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.tile {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; gap: 10px;
	padding: 28px; border-radius: var(--r-tile); background: var(--mist);
	transition: transform .7s var(--ease), box-shadow .7s var(--ease);
	transform-style: preserve-3d;
}
a.tile:hover, .tile--tenders:hover { box-shadow: var(--shadow); }
.tile__k { font-size: .9375rem; font-weight: 500; color: var(--gray-ink); }
.tile__title { display: block; font-size: clamp(1.75rem, 2.5vw, 2.5rem); font-weight: 700; line-height: 1.1; }
.tile__lead { display: block; margin-top: 8px; font-size: 1.0625rem; line-height: 1.45; max-width: 30ch; }
.tile--tenders .tile__lead { color: rgba(255, 255, 255, .78); }
.tile__demo { position: relative; z-index: 1; margin-top: 12px; }
.tile__big { font-size: clamp(3.5rem, 6vw, 6rem); line-height: .9; font-weight: 700; letter-spacing: -.02em; }
.tile__mid { font-size: 1.375rem; line-height: 1.3; font-weight: 500; }
.tile__mid b { font-weight: 700; }
.tile__list { display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; color: var(--ink-2); }
.tile__note { margin-top: auto; font-size: .875rem; color: var(--gray-ink); }
.tile__go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 1rem; }
.tile__go .ic { transition: transform .5s var(--ease); }
.tile:hover .tile__go .ic { transform: translateX(-5px); }

.tile--tenders { grid-column: span 5; grid-row: span 2; background: var(--navy); color: #fff; padding: 32px; }
.tile--tenders .tile__k { color: rgba(255, 255, 255, .7); }
.tile--tenders .tile__top { display: flex; align-items: flex-end; justify-content: space-between; position: relative; z-index: 1; }
.tile--tenders .tile__big { color: var(--teal); }
.tile--tenders .tile__go { position: relative; z-index: 1; color: #fff; padding-top: 18px; }
.tile__ribbons { position: absolute; z-index: 0; bottom: -18%; inset-inline-end: -16%; height: 112%; width: auto; pointer-events: none; transition: transform 1.2s var(--ease); }
.tile--tenders:hover .tile__ribbons { transform: translateY(-4%); }
.tenders { position: relative; z-index: 1; margin-top: 18px; }
.tenders__item a {
	display: grid; gap: 4px; padding: 16px 14px; margin-inline: -14px; border-radius: 16px;
	border-top: 1px solid rgba(255, 255, 255, .1); transition: background-color .3s;
}
.tenders__item:first-child a { border-top-color: transparent; }
.tenders__item a:hover, .tenders__item a:focus-visible { background: rgba(255, 255, 255, .06); }
.tenders__no { font-size: .8125rem; color: rgba(255, 255, 255, .62); }
.tenders__title { font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.tenders__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .875rem; color: rgba(255, 255, 255, .75); }
.tenders__meta > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.tenders__meta .ic { width: 16px; height: 16px; }
.tenders__left { padding: 2px 10px; border-radius: var(--r-pill); background: rgba(70, 190, 167, .16); color: var(--teal); font-weight: 500; white-space: nowrap; }
.tenders__bar { display: block; height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tenders__bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--teal); transform-origin: right; }
.js .tenders__bar i { transform: scaleX(0); transition: transform 1.6s var(--ease) .3s; }
.js .tile.is-in .tenders__bar i { transform: scaleX(1); }

.tile--projects { grid-column: span 4; grid-row: span 2; padding: 0; color: #fff; justify-content: flex-end; background: var(--navy); }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); z-index: -2; }
.tile--projects:hover .tile__img { transform: scale(1.06); }
.tile__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 38, 58, 0) 32%, rgba(12, 38, 58, .92) 76%); }
.tile__body { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.tile--projects .tile__k { color: rgba(255, 255, 255, .85); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 12px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 500; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tile--projects .tile__go { color: #fff; margin-top: 8px; }

.tile--jobs { grid-column: span 3; background: var(--tone-teal); }
.tile--reports { grid-column: span 3; background: var(--tone-blue); }
.tile--news { grid-column: span 4; }
.tile--soon { grid-column: span 4; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(12, 38, 58, .14); }
.tile--talk { grid-column: span 4; background: var(--tone-gray); }

.docs { position: relative; display: block; height: 96px; margin-top: 4px; }
.docs__sheet {
	position: absolute; top: 0; inset-inline-start: 0;
	display: flex; flex-direction: column; justify-content: space-between;
	width: 70px; height: 90px; padding: 8px 9px; border-radius: 6px 14px 6px 6px;
	background: #fff; box-shadow: 0 6px 16px rgba(12, 38, 58, .12);
	font-size: .8125rem; font-weight: 700; color: var(--navy);
	transition: transform .7s var(--ease);
}
.docs__sheet b { align-self: flex-start; padding: 1px 5px; border-radius: 4px; background: var(--blue); color: #fff; font-size: .625rem; }
.docs__sheet:nth-child(1) { transform: translateX(-36px) rotate(5deg); }
.docs__sheet:nth-child(2) { transform: translateX(-18px) rotate(2deg); }
.tile--reports:hover .docs__sheet:nth-child(1) { transform: translateX(-104px) rotate(9deg) translateY(4px); }
.tile--reports:hover .docs__sheet:nth-child(2) { transform: translateX(-52px) rotate(4deg); }
.tile--reports:hover .docs__sheet:nth-child(3) { transform: rotate(-2deg) translateY(-3px); }

.soon { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.soon__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--mist); }
.soon__row b { font-weight: 500; }
.soon__row small { font-size: .75rem; color: var(--gray-ink); }

.talk { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.talk a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill); font-weight: 500; transition: transform .5s var(--ease), background-color .3s; }
.talk a:hover { transform: translateY(-2px); }
.talk__wa { background: var(--teal); color: var(--navy); }
.talk__ph { background: #fff; color: var(--navy); }

/* ==========================================================================
   About · manifesto
   ========================================================================== */
.about { position: relative; overflow: hidden; padding: var(--s-11) 0 var(--s-10); background: #fff; }
.about__tone { position: absolute; z-index: 0; bottom: -2px; left: -6vw; height: 118%; width: auto; max-width: none; pointer-events: none; }
.about__in { position: relative; z-index: 1; }
.manifesto { max-width: 26ch; font-size: clamp(1.875rem, 3.3vw, 3.375rem); line-height: 1.22; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
.manifesto b { font-weight: 700; }
.manifesto .k-teal { color: var(--teal-ink); }
.manifesto .k-blue { color: var(--blue-ink); }
.manifesto .k-gray { color: var(--gray-ink); }
.js .manifesto .w { opacity: .14; transition: opacity .35s linear; }
.js .manifesto .w.is-on { opacity: 1; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); margin-top: var(--s-9); max-width: 1120px; }
.pillar { display: grid; grid-template-columns: 8px 1fr; grid-template-rows: auto 1fr; column-gap: 20px; }
.pillar__bar { grid-row: span 2; width: 8px; height: 100%; min-height: 96px; border-radius: 6px 6px 2px 2px; transform-origin: bottom; }
.pillar--teal .pillar__bar { background: var(--teal); }
.pillar--blue .pillar__bar { background: var(--blue); }
.pillar--gray .pillar__bar { background: var(--gray); }
.js .pillar__bar { transform: scaleY(0); transition: transform 1.2s var(--ease) .15s; }
.js .pillar.is-in .pillar__bar { transform: scaleY(1); }
.pillar__t { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.pillar__d { margin-top: 6px; color: var(--ink-2); font-size: 1.0625rem; max-width: 30ch; }
.about__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: var(--s-8); }

/* ==========================================================================
   Numbers · ribbons as a growth graph
   ========================================================================== */
.numbers {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	min-height: max(100svh, 720px);
	background: var(--navy); color: #fff;
}
.numbers__copy { grid-column: 1; grid-row: 1; align-self: center; padding: var(--s-10) var(--gutter); max-width: 620px; }
.numbers__copy .h2 { font-size: clamp(2.75rem, 5vw, 5rem); line-height: 1; }
.numbers__lead { margin-top: var(--s-5); font-size: var(--fs-lead); color: rgba(255, 255, 255, .78); max-width: 32ch; }
.numbers__list { margin-top: var(--s-6); }
.numbers__note { margin-top: var(--s-6); font-size: var(--fs-small); color: rgba(255, 255, 255, .6); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.numbers__graph { grid-column: 2; grid-row: 1; position: relative; min-height: 100%; }
.numbers__svg { position: absolute; bottom: 0; left: 0; height: 94%; width: auto; max-width: none; overflow: visible; }
.numbers__v { font-size: 13px; font-weight: 700; fill: #fff; letter-spacing: -.02em; }
.numbers__pre { font-size: 9px; fill: rgba(255, 255, 255, .85); }
.numbers__l { font-size: 4.2px; font-weight: 500; fill: rgba(255, 255, 255, .72); }
/* desktop: the graph carries the numbers; the list stays for screen readers */
@media (min-width: 900px) {
	.numbers__list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.numbers__item { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.numbers__item dt { color: rgba(255, 255, 255, .72); }
.numbers__item dd { font-size: 1.75rem; font-weight: 700; }
.numbers__item--teal dd { color: var(--teal); }

/* ==========================================================================
   Projects · rail
   ========================================================================== */
.projects { padding: var(--s-10) 0 var(--s-8); background: var(--mist); overflow: hidden; }
.projects__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: var(--s-7); }
.projects__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filters { display: flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.filters__btn { height: 40px; padding: 0 16px; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 500; color: var(--ink-2); transition: background-color .3s, color .3s; }
.filters__btn:hover { color: var(--navy); }
.filters__btn.is-on { background: var(--navy); color: #fff; }
.rail-nav { display: flex; gap: 6px; }
.rail-nav__btn { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: background-color .3s, color .3s, opacity .3s; }
.rail-nav__btn:hover { background: var(--navy); color: #fff; }
.rail-nav__btn:disabled { opacity: .35; pointer-events: none; }
.rail {
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; cursor: grab; outline-offset: -3px;
	padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
	scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail.is-drag .pcard__a { pointer-events: none; }
.rail__track { display: flex; gap: 20px; padding-bottom: 8px; width: max-content; }
.pcard { flex: none; width: clamp(272px, 25vw, 380px); scroll-snap-align: start; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.pcard.is-out { display: none; }
.pcard__a { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.pcard__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-ribbon); overflow: hidden; background: #DDE5E6; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); user-select: none; -webkit-user-drag: none; }
.pcard__a:hover .pcard__media img { transform: scale(1.06); }
.pcard__status { position: absolute; top: 16px; inset-inline-start: 16px; padding: 6px 14px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 500; }
.pcard__status--doing { background: var(--blue); color: #fff; }
.pcard__status--plan { background: #fff; color: var(--navy); }
.pcard__status--done { background: var(--teal); color: var(--navy); }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding-inline: 4px; }
.pcard__t { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.pcard__d { font-size: 1rem; color: var(--ink-2); line-height: 1.55; }
.pcard--all .pcard__a {
	position: relative; overflow: hidden; justify-content: flex-end; aspect-ratio: 4 / 5; height: auto;
	padding: 28px; border-radius: var(--r-ribbon); background: var(--navy); color: #fff;
}
.pcard--all svg { position: absolute; top: -6%; inset-inline-end: -10%; height: 86%; width: auto; transition: transform 1s var(--ease); }
.pcard--all .pcard__a:hover svg { transform: translateY(-5%); }
.pcard--all .pcard__t { position: relative; font-size: 1.75rem; max-width: 9ch; }
.pcard__go { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-top: 16px; border-radius: 50%; background: var(--teal); color: var(--navy); }
.projects__note { margin-top: var(--s-6); }

/* ==========================================================================
   News · editorial
   ========================================================================== */
.news { padding: var(--s-10) 0; background: #fff; }
.news__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 24px; margin-bottom: var(--s-7); }
.news__head .eyebrow { grid-column: 1 / -1; justify-self: start; }
.news__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.lead__a { display: block; }
.lead__media { display: block; aspect-ratio: 16 / 11; border-radius: var(--r-ribbon); overflow: hidden; background: var(--mist); }
.lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.lead__a:hover .lead__media img { transform: scale(1.05); }
.lead__body { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.meta { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--gray-ink); }
.lead__t { font-size: clamp(1.625rem, 2.2vw, 2.25rem); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.lead__d { color: var(--ink-2); max-width: 46ch; }
.nlist { border-top: 1px solid var(--line); }
.nlist__item { border-bottom: 1px solid var(--line); }
.nlist__a { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px 20px; padding: 28px 4px; }
.nlist__a .meta { grid-column: 1; }
.nlist__t { grid-column: 1; font-size: 1.375rem; font-weight: 500; line-height: 1.3; transition: color .3s; }
.nlist__a:hover .nlist__t { color: var(--blue-ink); }
.nlist__thumb {
	grid-column: 2; grid-row: 1 / span 2; align-self: center;
	width: 0; height: 84px; border-radius: 16px 16px 4px 4px; overflow: hidden; opacity: 0;
	transition: width .7s var(--ease), opacity .5s;
}
.nlist__thumb img { width: 112px; height: 84px; max-width: none; object-fit: cover; }
.nlist__a:hover .nlist__thumb, .nlist__a:focus-visible .nlist__thumb { width: 112px; opacity: 1; }
.nlist__go { position: absolute; inset-inline-end: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: opacity .4s, transform .5s var(--ease); }
.nlist__a:hover .nlist__go { opacity: 0; transform: translateX(-10px); }
.news__note { margin-top: var(--s-6); }

/* ==========================================================================
   Contact · "במה לעיר"
   ========================================================================== */
.contact { position: relative; overflow: hidden; min-height: max(86svh, 640px); background: var(--mist); display: flex; align-items: center; }
.contact__stage { position: absolute; inset: 0; pointer-events: none; }
.contact__svg { position: absolute; bottom: 0; left: -3vw; height: 100%; width: auto; max-width: none; overflow: visible; }
.contact__fig, .contact__birds { will-change: transform; }
.contact__in { position: relative; z-index: 1; display: flex; justify-content: flex-start; padding-block: var(--s-10); }
.contact__copy { max-width: 520px; }
.contact__lead { margin-top: var(--s-4); font-size: var(--fs-lead); color: var(--ink-2); }
.contact__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-6); }
.contact__ctas .ic { width: 22px; height: 22px; }
.contact__list { display: grid; gap: 10px; margin-top: var(--s-6); color: var(--ink-2); }
.contact__list li { display: flex; align-items: center; gap: 10px; }
.contact__list .ic { color: var(--teal-ink); }
.contact__list a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.contact__note { margin-top: var(--s-5); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { position: relative; overflow: hidden; padding: var(--s-10) 0 var(--s-6); background: var(--navy); color: rgba(255, 255, 255, .82); }
.ftr__tone { position: absolute; z-index: 0; top: -10%; right: -8vw; height: 135%; width: auto; max-width: none; pointer-events: none; }
.ftr__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-7); }
.ftr__logo { display: block; width: 210px; }
.ftr__legal { margin-top: var(--s-4); font-size: var(--fs-small); color: rgba(255, 255, 255, .6); }
.ftr__contact { display: grid; gap: 10px; margin-top: var(--s-5); font-size: 1rem; }
.ftr__contact li { display: flex; align-items: center; gap: 10px; }
.ftr__contact .ic { color: var(--teal); }
.ftr__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ftr__h { margin-bottom: var(--s-4); font-size: var(--fs-small); font-weight: 500; color: var(--teal); }
.ftr__col li + li { margin-top: 8px; }
.ftr__col a { transition: color .25s; }
.ftr__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ftr__slogan {
	position: relative; z-index: 1;
	margin: var(--s-9) 0 var(--s-5); padding-inline: var(--gutter);
	font-size: clamp(4.5rem, 15.5vw, 17rem); line-height: .9; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; text-align: center;
	user-select: none;
}
/* the slogan fills with the brand colors as the footer scrolls in (right to left, teal → blue → gray), and stays filled */
.ftr__slogan span {
	--fill: 0%;
	display: inline-block; padding-bottom: .08em;
	background-image:
		linear-gradient(to left, var(--teal) 0%, var(--blue) 50%, var(--gray) 100%),
		linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08));
	background-size: var(--fill) 100%, 100% 100%;
	background-position: right top, 0 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.no-js .ftr__slogan span, .a11y-still .ftr__slogan span { --fill: 100%; }
@media (prefers-reduced-motion: reduce) { .ftr__slogan span { --fill: 100%; } }
.ftr__base { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-small); color: rgba(255, 255, 255, .55); }
.ftr__top { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); }
.ftr__top .ic { width: 16px; height: 16px; }
.ftr__top:hover { color: #fff; }

/* ==========================================================================
   Quick contact · dial + WhatsApp, docked to the right edge on every page
   ========================================================================== */
.qc {
	--qc-y: -50%;
	position: fixed; z-index: 80; top: 50%; inset-inline-start: 0;
	display: flex; flex-direction: column; gap: 6px; padding: 6px;
	translate: 0 var(--qc-y);
	background: #fff;
	border-start-end-radius: 18px; border-end-end-radius: 18px;
	box-shadow: -8px 12px 32px rgba(12, 38, 58, .18), 0 0 0 1px rgba(12, 38, 58, .06);
	animation: kk-qc-in .9s var(--ease) 1.2s backwards;
}
@keyframes kk-qc-in { from { translate: 100% var(--qc-y); } }
.qc__a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; transition: background-color .25s; }
.qc__a .ic { width: 22px; height: 22px; }
.qc__a--phone { background: var(--navy); color: #fff; }
.qc__a--phone:hover { background: var(--navy-2); }
.qc__a--wa { background: var(--teal); color: var(--navy); }
.qc__a--wa:hover { background: #5BCBB5; }
.qc__tip {
	position: absolute; top: 50%; inset-inline-start: calc(100% + 16px);
	display: inline-flex; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill);
	background: var(--navy); color: #fff; font-size: .9375rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
	box-shadow: var(--shadow-soft);
	opacity: 0; translate: 10px -50%; pointer-events: none;
	transition: opacity .3s, translate .5s var(--ease);
}
.qc__a:hover .qc__tip, .qc__a:focus-visible .qc__tip { opacity: 1; translate: 0 -50%; }
@media (hover: none) { .qc__tip { display: none; } }
@media (max-width: 1100px) { .qc { --qc-y: 0%; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); } }
@media print { .qc { display: none; } }

/* inner-page placeholder */
.page-soon { padding: 200px 0 140px; background: var(--mist); }
.page-soon p { margin: 16px 0 28px; color: var(--ink-2); }

/* ==========================================================================
   Reveal
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(36px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }

/* ==========================================================================
   Accessibility modes
   ========================================================================== */
.a11y-links a:not(.btn):not(.tile):not(.cap) { text-decoration: underline !important; text-underline-offset: 3px; }
.a11y-links a:focus-visible, .a11y-links button:focus-visible { outline-width: 4px; }
.a11y-contrast { --ink-2: #0C263A; --gray-ink: #26383B; --teal-ink: #0B5A4D; --blue-ink: #234A82; --line: rgba(12, 38, 58, .4); }
.a11y-contrast .js .manifesto .w, .a11y-contrast .manifesto .w { opacity: 1 !important; }
.a11y-contrast .tile__shade { background: rgba(12, 38, 58, .82); }
.a11y-contrast .cap { background: #fff; }
.a11y-still *, .a11y-still *::before, .a11y-still *::after { animation: none !important; transition-duration: .01ms !important; }
.a11y-still [data-reveal] { opacity: 1 !important; transform: none !important; }
.a11y-still .manifesto .w { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.js [data-reveal] { opacity: 1; transform: none; }
	.js .manifesto .w { opacity: 1; }
	.js .hero:not(.is-ready) [data-hero-in], .js .hero:not(.is-ready) [data-hero-line], .js .hero:not(.is-ready) .hero__caption { opacity: 1; }
	.js .hero:not(.is-ready) .hero__ribbons .rb { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
	.nav { display: none; }
	.hdr__burger { display: grid; }
	.bento { grid-template-columns: repeat(6, 1fr); }
	.tile--tenders { grid-column: span 6; grid-row: span 1; }
	.tile--projects { grid-column: span 3; grid-row: span 2; min-height: 460px; }
	.tile--jobs, .tile--reports { grid-column: span 3; }
	.tile--news, .tile--soon, .tile--talk { grid-column: span 2; }
}

/* stacked hero: tablets, portrait screens, phones */
@media (max-width: 1100px), (max-aspect-ratio: 5/4) {
	.hero { --hv: 60svh; height: auto; display: flex; flex-direction: column; }
	.hero__copy { position: relative; inset: auto; width: auto; padding: 128px var(--gutter) 28px; order: 1; }
	.hero__stage { position: relative; order: 2; height: var(--hv); flex: none; overflow: hidden; }
	.hero__scroll { display: none; }
	.scenes { margin-top: 28px; }
}

@media (max-width: 900px) {
	.numbers { grid-template-columns: 1fr; }
	.numbers__copy { grid-column: 1; padding-bottom: 0; }
	.numbers__graph { grid-column: 1; grid-row: 2; height: 70svh; min-height: 420px; }
	.numbers__svg { left: -6%; height: 100%; }
	.news__grid { grid-template-columns: 1fr; }
	.pillars { grid-template-columns: 1fr; gap: var(--s-6); }
	.ftr__in { grid-template-columns: 1fr 1fr; }
	.ftr__brand { grid-column: 1 / -1; }
	.contact { flex-direction: column; align-items: stretch; min-height: 0; }
	.contact__in { order: 1; padding-block: var(--s-9) var(--s-5); }
	.contact__stage { order: 2; position: relative; height: 56svh; min-height: 340px; overflow: hidden; }
	.contact__svg { left: -28vw; }
}

@media (max-width: 640px) {
	.hdr { top: 10px; }
	.hdr__in { padding-inline: 10px; }
	.hdr__logo { height: 56px; padding: 0 16px 0 18px; }
	.hdr__logo-svg { width: 126px; }
	.hdr__actions { height: 56px; padding: 0 6px; }
	.hdr__actions .btn { display: none; }
	.bento { grid-template-columns: 1fr; }
	.tile--tenders, .tile--projects, .tile--jobs, .tile--reports, .tile--news, .tile--soon, .tile--talk { grid-column: auto; grid-row: auto; }
	.tile--projects { min-height: 420px; }
	.hero__caption { left: 12px; bottom: 12px; font-size: .8125rem; }
	.hero__ctas .btn { flex: 1 1 auto; }
	.scenes__btn { width: auto; flex: 1; }
	.manifesto { font-size: 1.75rem; }
	.nlist__thumb { display: none; }
	.nlist__go { display: none; }
	.ftr__in { grid-template-columns: 1fr; }
	.ftr__slogan { font-size: 26vw; line-height: .92; white-space: normal; }
	.live { padding: 5px 12px 5px 5px; gap: 8px; font-size: .8125rem; }
	.live__go { display: none; }
}