/* Bentley Tel Aviv — design preview
   Faithful to bentleymotors.com/en.html (July 2026):
   light chrome around a centred winged-B, inset cinematic hero with fraction +
   progress line, deep racing-green bands (#19331a sampled from the live site),
   sentence-case Bentley typeface, glass-panel feature captions, green mega footer. */

:root {
	--paper: #ffffff;
	--ink: #101210;
	--nav-ink: #565e57;
	--rail-hover: #f4f3ef;
	--band-black: #050a05;
	--band-deep: #0b140b;
	--band-green: #19331a;
	--btn-green: #2e4b38;
	--btn-green-hover: #3a5c46;
	--btn-border-light: #394d45;
	--white: #f5f4f1;
	--white-70: rgba(245, 244, 241, 0.72);
	--hairline-dark: rgba(245, 244, 241, 0.22);
	--hairline-light: rgba(16, 18, 16, 0.14);
	--font: "Bentley", "Heebo", arial, helvetica, sans-serif;
	--hebrew: "Heebo", "Bentley", arial, sans-serif;
	--gutter: 16px;
	--col-gutter: 8px;
	--header-h: 127px;
	--header-pad-top: 48px;
	/* measured top offset of the global site's hero panel: 148px (158px at >=1920) */
	--hero-pad-top: 148px;
}

/* Page gutter — bentleymotors.com's --bm-grid-margin ladder, copied exactly from
   their bm-platform.bm.app CSS. It steps (it does not scale), and the jump at
   1920 is the big one: 48px -> 112px. A clamp() that tops out at 48px matches
   only around 1440 and leaves everything glued to the edges on a large monitor.
   --col-gutter is the other half of that grid: their --bm-grid-gutter, the space
   between columns (8/16/16/24/32/52), which the card wall lays its cards on. */
/* --header-h must equal the real rendered height (pad-top + 55px logo row + 24px),
   because inner.css, the mega menu and the hero height calc all read it as
   "how tall is the fixed header". 40+55+24=119, 48+55+24=127, 56+55+24=135 —
   the same heights the global site reports at 1024/1440/1920. */
@media (min-width: 768px)  { :root { --gutter: 32px; --col-gutter: 16px; --header-pad-top: 40px; --header-h: 119px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }
@media (min-width: 1440px) { :root { --gutter: 48px; --col-gutter: 24px; --header-pad-top: 48px; --header-h: 127px; } }
@media (min-width: 1920px) { :root { --gutter: 112px; --col-gutter: 32px; --header-pad-top: 56px; --header-h: 135px; --hero-pad-top: 158px; } }
@media (min-width: 2560px) { :root { --gutter: 120px; --col-gutter: 52px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

[dir="rtl"] { font-family: var(--hebrew); }

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
	position: absolute; inset-inline-start: 1rem; top: -3rem;
	background: var(--btn-green); color: var(--white);
	padding: 0.5rem 1rem; z-index: 200; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- type ---------- */

.display {
	font-weight: 300;
	font-size: clamp(1.9rem, 3.4vw, 2.5rem);
	line-height: 1.18;
	letter-spacing: 0.01em;
}

.eyebrow {
	display: block;
	font-size: 0.8rem;
	font-weight: 400;
	color: inherit;
	opacity: 0.85;
	margin-bottom: 0.6rem;
}

.caps {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- buttons (global-site style: squared, quiet, icon + caps label) ---------- */

/* Bentley buttons: 16px caps in the brand face with near-zero tracking (measured 0.01em) */
.btn {
	display: inline-flex; align-items: center; gap: 0.7rem;
	font-size: 1rem; font-weight: 400;
	letter-spacing: 0.01em; text-transform: uppercase;
	padding: 1rem 1.375rem;
	border: 0.8px solid transparent;
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
	white-space: nowrap;
	line-height: 1.1;
}
.btn svg { width: 1rem; height: 1rem; flex: none; }
[dir="rtl"] .btn { letter-spacing: 0.04em; font-family: var(--hebrew); }

.btn-solid { background: #394d45; color: var(--white); border-color: #394d45; }
.btn-solid:hover { background: var(--btn-green-hover); border-color: var(--btn-green-hover); }

.btn-outline-dark { border-color: #394d45; color: var(--ink); background: transparent; padding: 0.6rem 1.375rem; }
.btn-outline-dark:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-outline-light { border-color: rgba(245, 244, 241, 0.6); color: var(--white); background: transparent; }
.btn-outline-light:hover { border-color: var(--white); background: rgba(245, 244, 241, 0.1); }

/* ---------- header (light chrome, centred brand) ---------- */

/* Transparent over the blurred hero backdrop (white text); solid white while a
   mega menu is open — as on the global site.

   NOT sticky. The global site's header sits absolutely at the top of the hero on
   the home page and in normal flow on inner pages (verified: bm-m-header is
   position:absolute inside bm-m-full-width-slider on /en.html and position:static
   on /en/your-bentley.html). Either way it scrolls off with the page and does not
   come back — so ours scrolls away too. absolute here rather than static because
   it has to overlay the hero, and it also gives .mega its containing block. */
.site-header {
	position: absolute; inset-inline: 0; top: 0; z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	color: var(--white);
	transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
/* Inner pages have no hero to overlay: the chrome is opaque and belongs in the
   flow, so the content starts below it instead of under it. relative, not static,
   so .mega still hangs off the header rather than the viewport. */
.site-header[data-static-solid] { position: relative; }
.site-header.is-solid, .site-header.is-open {
	background: var(--paper);
	border-bottom-color: var(--hairline-light);
	color: var(--ink);
}
/* logo.png is white artwork (the client's "Simplified Negative"), so it goes onto
   the hero untouched and inverts to black for the solid white chrome — the
   opposite way round from the black file this replaced. */
.site-header .brand-logo { transition: filter 0.3s; }
.site-header.is-solid .brand-logo, .site-header.is-open .brand-logo { filter: invert(1); }
.header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--header-h);
	/* the global site's header is not vertically centred: 48px above the logo row
	   (56px at >=1920) and a constant 24px below it, which puts the nav baseline
	   ~11px lower than a centred row would. */
	padding: var(--header-pad-top) var(--gutter) 24px;
	gap: 1rem;
}

.nav-group { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.8rem); }
.nav-group-right { justify-content: flex-end; }

.nav-link {
	background: none; border: 0; cursor: pointer;
	font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: inherit;
	padding: 0.5rem 0;
	/* No width cap. The global site uses max-width:none and lets a multi-word item
	   wrap only when the row actually runs out of space — at >=1920 its items all
	   sit on one line. The old 9em cap forced "About Bentley" / "Bentley Israel"
	   onto two lines at every width, which is what the client flagged. */
	text-align: center;
	line-height: 1.8;
	opacity: 0.92;
	transition: color 0.2s, opacity 0.2s;
}
.nav-boxed, .nav-phone { max-width: none; white-space: nowrap; }
.nav-link:hover, .nav-link[aria-expanded="true"] { opacity: 1; }
.site-header.is-solid .nav-link, .site-header.is-open .nav-link { color: var(--nav-ink); opacity: 1; }
.site-header.is-solid .nav-link:hover, .site-header.is-solid .nav-link[aria-expanded="true"],
.site-header.is-open .nav-link:hover { color: var(--ink); }

/* measured on the global site: 202.1 x 41.6 — 16px type on a 24px line box with
   8px/12px padding. Ours was 62.4 tall, which pushed the whole header row down. */
.nav-boxed { border: 0.8px solid currentColor; padding: 8px 12px; font-size: 1rem; line-height: 24px; letter-spacing: 0.01em; }
.site-header.is-solid .nav-boxed, .site-header.is-open .nav-boxed { border-color: var(--btn-border-light); }

.brand { display: flex; flex-direction: column; align-items: center; padding: 0 1.4rem; }
/* the global site pins the winged B to 55px (44px under 767px) via its
   css_overlay_logo_110x55 stylesheet; width follows the 2:1 artwork => 110x55. */
.brand-logo { height: 55px; width: auto; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.6rem 0.2rem; justify-self: end; }
.nav-toggle-bar { display: block; width: 1.5rem; height: 1px; background: currentColor; margin: 0.42rem 0; transition: transform 0.25s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(0.22rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-0.22rem) rotate(-45deg); }

/* ---------- mega menu (white full-width panel: model rail + detail pane) ---------- */

.mega {
	display: none;
	position: absolute; inset-inline: 0; top: 100%;
	background: var(--paper);
	border-bottom: 1px solid var(--hairline-light);
	box-shadow: 0 30px 40px rgba(0, 0, 0, 0.12);
	max-height: calc(100svh - var(--header-h));
	overflow-y: auto;
}
.mega.is-open { display: block; }

.mega-close {
	position: absolute; top: 1.9rem; inset-inline-end: var(--gutter);
	display: inline-flex; align-items: center; gap: 0.55rem;
	background: none; border: 0; cursor: pointer;
	font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase;
	color: #394d45; z-index: 2;
}
.mega-close:hover { color: var(--ink); }

/* Measured from bentleymotors.com at 1440: rail item 298px wide starting at the
   gutter, 150px thumbs, hairline separators, 16px/11px type, 40px detail title,
   collage 653x435 with accent overhanging +24px and cutout spilling 65px below. */
/* The rail's start edge aligns with the page gutter (as the global site does with
   padding-inline-start: var(--bm-grid-margin)), so the gutter must be ADDED to the
   column width rather than eaten out of both sides of it — at a 112px gutter the
   old `padding: 2rem var(--gutter)` left ~144px for the labels and wrapped them all. */
.mega-models { display: grid; grid-template-columns: minmax(calc(var(--gutter) + 310px), calc(var(--gutter) + 22rem)) 1fr; }

.model-rail {
	padding: 2rem 1.5rem 2rem var(--gutter);
	max-height: calc(100svh - var(--header-h) - 2rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(16, 18, 16, 0.3) transparent;
}
.rail-item {
	display: grid; grid-template-columns: 8.4rem 1fr; align-items: center; gap: 0.9rem;
	width: 100%;
	padding: 0.5rem 0;
	background: none; border: 0; border-bottom: 1px solid var(--hairline-light);
	cursor: pointer;
	text-align: start;
	transition: background-color 0.2s;
}
.rail-item:last-child { border-bottom: 0; }
/* Bentley's transparent side-profile nav cutouts */
.rail-item img { width: 8.4rem; height: 4.2rem; object-fit: contain; }
.rail-item.is-active, .rail-item:hover { background: var(--rail-hover); }
.rail-name { font-size: 1rem; font-weight: 300; line-height: 1.5; color: rgb(4, 4, 4); display: block; }
.rail-sub { font-size: 0.6875rem; color: rgb(4, 4, 4); display: block; margin-top: 0.1rem; }

.model-detail { display: none; padding: 2rem max(3rem, var(--gutter)) 3.4rem 1.4rem; }
.model-detail.is-active { display: grid; grid-template-columns: minmax(280px, 21.5rem) 1fr; gap: 1.5rem; min-height: 34rem; }
.detail-title { font-weight: 300; font-size: 2.5rem; line-height: 1.15; margin-bottom: 1.5rem; }
.detail-text { font-size: 1rem; line-height: 1.5; color: rgb(4, 4, 4); max-width: 34ch; margin-bottom: 1.7rem; }
.detail-links { display: flex; flex-direction: column; gap: 1.55rem; margin-top: 3.4rem; }
.detail-link {
	display: inline-flex; align-items: center; gap: 0.85rem;
	font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--ink);
}
.detail-link svg { width: 1.05rem; height: 1.05rem; color: var(--ink); }
.detail-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* collage: big background image, large front cutout spilling below it,
   accent texture peeking beyond the top-right corner — as on the global menu */
.detail-media {
	position: relative; align-self: start;
	margin-block-start: 4.2rem;
	padding-block-end: 4rem;
	padding-inline-end: 1.5rem;
}
/* bg is inset 1.5rem from the top and right so the accent texture peeks beyond
   its corner, exactly as on the global menu */
.detail-bg {
	display: block;
	width: calc(100% - 1.5rem);
	margin-block-start: 1.5rem;
	height: clamp(22rem, 48vh, 27.2rem);
	object-fit: cover;
	position: relative;
}
.detail-cutout {
	position: absolute; bottom: 0; inset-inline-start: -5%;
	width: 92%;
	max-width: 48rem;
	z-index: 1;
}
.detail-accent {
	position: absolute;
	top: 0; inset-inline-end: 0;
	width: 33%; aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	z-index: 0;
}
.detail-cutout, .detail-bg { z-index: 1; }

.mega-simple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding: 3rem var(--gutter) 3.4rem; }
.mega-simple-col { display: flex; flex-direction: column; gap: 0.9rem; }
.mega-simple-heading { font-weight: 300; font-size: 1.3rem; margin-bottom: 0.4rem; }
.mega-simple-col a { font-size: 0.85rem; color: var(--nav-ink); }
.mega-simple-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero (inset panel on black band, fraction + progress, top-right arrows) ---------- */

.hero-band {
	position: relative;
	background: var(--band-black);
	padding: var(--hero-pad-top) var(--gutter) 3.4rem;
	overflow: hidden;
}
/* blurred echo of the active slide, running edge-to-edge behind the transparent header */
.hero-backdrop {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	filter: blur(30px) brightness(0.75);
	transform: scale(1.12);
	transition: background-image 0.5s ease;
}
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(5, 10, 5, 0.3); }
.hero-band .hero { z-index: 1; }

.hero {
	position: relative;
	/* measured: 698px panel at 900px viewport (header 128 + gap 19 + bottom band 55) */
	height: calc(100svh - var(--header-h) - 4.6rem);
	min-height: 33rem;
	max-height: 50rem;
	overflow: hidden;
	background: #0a0d0a;
}
.hero:focus-visible { outline-offset: -3px; }
.hero-noscript { padding: 38% var(--gutter) 0; text-align: center; color: var(--white); }

.hero-track, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }

.hero-media, .hero-media picture, .hero-media img, .hero-media video {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}
.hero-media picture { display: block; }
.hero-media { position: absolute; inset: 0; }

.hero-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(5, 10, 5, 0.72) 0%, rgba(5, 10, 5, 0.18) 34%, rgba(5, 10, 5, 0.1) 100%);
}

/* Measured from bentleymotors.com at 1440: title 48/54 at 42px from panel edge,
   caption text column ~29% in, buttons stacked and right-aligned 56px from the
   panel edge, fraction chip 52px from top, 42px square arrows. */
.hero-caption {
	position: absolute; inset-inline: 0; bottom: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
	align-items: end; gap: clamp(1.2rem, 3vw, 3rem);
	padding: 0 3.5rem 2.8rem 2.6rem;
	z-index: 2;
	color: var(--white);
}
.hero-title {
	font-weight: 300;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.125;
	max-width: 14ch;
}
.hero-text { font-size: 0.875rem; line-height: 1.65; color: rgba(245, 244, 241, 0.92); max-width: 38ch; padding-bottom: 0.4rem; }
.hero-actions {
	display: flex; flex-direction: column; align-items: flex-end;
	gap: 0.9rem;
}
.btn-hero { background: #394d45; border-color: #394d45; color: var(--white); }
.btn-hero:hover { background: var(--btn-green-hover); border-color: var(--btn-green-hover); }
.btn-hero-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.9); }
.btn-hero-ghost:hover { background: rgba(245, 244, 241, 0.12); border-color: var(--white); }

.hero-meta {
	position: absolute; top: 3.25rem; inset-inline-start: 2.6rem;
	display: flex; align-items: center; gap: 1rem;
	z-index: 2; color: var(--white);
	font-size: 0.8125rem; letter-spacing: 0.1em;
	background: rgba(8, 11, 8, 0.45);
	padding: 0.35rem 0.9rem 0.35rem 0.75rem;
}
.hero-progress { width: clamp(9rem, 16vw, 15rem); height: 2px; background: rgba(245, 244, 241, 0.3); }
.hero-progress-fill { height: 100%; background: var(--white); transition: width 0.4s ease; }

.hero-arrows {
	position: absolute; top: 1.9rem; inset-inline-end: 3.5rem;
	display: flex; gap: 0.45rem; z-index: 2;
}
.hero-arrow {
	width: 2.625rem; height: 2.625rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(8, 11, 8, 0.4); border: 0; cursor: pointer;
	color: var(--white); font-size: 1.25rem; line-height: 1;
	transition: background-color 0.2s;
}
.hero-arrow:hover { background: rgba(8, 11, 8, 0.65); }

/* ---------- intro band ---------- */

.intro {
	background: var(--band-black);
	color: var(--white);
	text-align: center;
	padding: clamp(3.6rem, 8vw, 6rem) var(--gutter);
}
.intro .display { margin-bottom: 1.8rem; }
.intro p { max-width: 72rem; margin: 0 auto 1.4rem; font-size: 0.98rem; line-height: 1.85; color: var(--white-70); }
.intro-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* ---------- explore card wall ---------- */

/* Portrait cards on a snap track with a progress line and thin arrows — the
   global site's bm-m-card-wall, measured at 768/1280/1440/1920. Every ladder
   here is theirs; none of it is eyeballed:

     card ratio     224/321 -> 304/458 (1024) -> 318/459 (1440) -> 400/674 (1920)
     columns of 12  10      -> 4       (768)  -> 3         (1440)
     card padding   16      -> 24      (768)  -> 32        (1440) -> 48 (1920)
     title          20/24                     -> 24/28     (1440) -> 28/32 (1920)
     body           14/20                     -> 16/24     (1440) -> 18/26 (1920)
     band padding   48      -> 56      (768)  -> 64        (1024)
     track gap      24                -> 32   (1024)-> 48  (1440) -> 64 (1920)

   The arrows advance exactly one card (item width + column gutter), smooth,
   snapping to the card's start edge — measured off their slider at 338.4px
   for a 314.2px card at 1440. */

.cardwall {
	background: linear-gradient(to bottom, var(--band-black), var(--band-deep));
	color: var(--white);
	padding: 48px 0;
	overflow: clip;
}

.cardwall-track {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0 0 24px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* each item carries half a column gutter as margin, so the track sheds that
	   half here — otherwise the first card sits a gutter inside the page margin */
	padding-inline: calc(var(--gutter) - var(--col-gutter) / 2);
}
.cardwall-track::-webkit-scrollbar { display: none; }

.cardwall-item {
	flex: 0 0 calc(83.33333% - var(--col-gutter)); /* 10 of 12 columns */
	min-width: 0;
	margin-inline: calc(var(--col-gutter) / 2);
	scroll-snap-align: start;
	scroll-margin: var(--gutter);
}
.cardwall-item:last-child { scroll-snap-align: end; }

.cardwall-card {
	position: relative;
	display: block;
	aspect-ratio: 224 / 321;
	color: var(--white);
	overflow: hidden;
}
.cardwall-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Their card scrim, copied verbatim: an eased wash under the top edge and a
   heavier one behind the copy, both hand-tuned in ~10 stops rather than a
   linear fade. Approximating it is what made the round-1 logo look wrong. */
.cardwall-text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 16px;
	row-gap: 16px;
	background: linear-gradient(180deg, rgba(0,0,0,.5), color-mix(in srgb, transparent 2.8%, rgba(0,0,0,.5)) 1.785%, color-mix(in srgb, transparent 10.4%, rgba(0,0,0,.5)) 3.375%, color-mix(in srgb, transparent 21.6%, rgba(0,0,0,.5)) 4.83%, color-mix(in srgb, transparent 35.2%, rgba(0,0,0,.5)) 6.18%, color-mix(in srgb, transparent 50%, rgba(0,0,0,.5)) 7.5%, color-mix(in srgb, transparent 64.8%, rgba(0,0,0,.5)) 8.805%, color-mix(in srgb, transparent 78.4%, rgba(0,0,0,.5)) 10.17%, color-mix(in srgb, transparent 89.6%, rgba(0,0,0,.5)) 11.625%, color-mix(in srgb, transparent 97.2%, rgba(0,0,0,.5)) 13.215%, color-mix(in srgb, transparent 100%, rgba(0,0,0,.5)) 15%, transparent 40%, color-mix(in srgb, rgba(0,0,0,.75) 2.8%, transparent) 47.14%, color-mix(in srgb, rgba(0,0,0,.75) 10.4%, transparent) 53.5%, color-mix(in srgb, rgba(0,0,0,.75) 21.6%, transparent) 59.32%, color-mix(in srgb, rgba(0,0,0,.75) 35.2%, transparent) 64.72%, color-mix(in srgb, rgba(0,0,0,.75) 50%, transparent) 70%, color-mix(in srgb, rgba(0,0,0,.75) 64.8%, transparent) 75.22%, color-mix(in srgb, rgba(0,0,0,.75) 78.4%, transparent) 80.68%, color-mix(in srgb, rgba(0,0,0,.75) 89.6%, transparent) 86.5%, color-mix(in srgb, rgba(0,0,0,.75) 97.2%, transparent) 92.86%, color-mix(in srgb, rgba(0,0,0,.75) 100%, transparent));
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.cardwall-text { background: linear-gradient(180deg, rgba(0,0,0,.5), transparent 15%, transparent 40%, rgba(0,0,0,.75)); }
}

.cardwall-title { font-size: 20px; line-height: 24px; font-weight: 300; letter-spacing: normal; }
.cardwall-text p { font-size: 14px; line-height: 20px; letter-spacing: 0.14px; font-weight: 300; }

/* Pagination row: progress line left, arrow pair right (48px tall, 8px apart) */
.cardwall-pagination {
	display: flex;
	align-items: center;
	column-gap: 8px;
	height: 48px;
	padding-inline: var(--gutter);
}

/* A native range input, restyled the way they do it: the track is a 2px rule at
   30% and the *thumb* is the same rule at full strength, as wide a share of the
   track as the viewport is of the scrollable width (--visible-fraction, set by
   site.js). Dragging it scrubs the track. */
.cardwall-range {
	--track-color: rgba(245, 244, 241, 0.3);
	-webkit-appearance: none;
	appearance: none;
	width: 284px;
	height: 6px;
	margin: 2px;
	background: transparent;
	color: inherit;
	cursor: grab;
}
.cardwall-range::-webkit-slider-runnable-track {
	height: 6px;
	background: linear-gradient(180deg, transparent 2px, var(--track-color) 2px, var(--track-color) 4px, transparent 4px);
}
.cardwall-range::-moz-range-track {
	height: 6px;
	background: linear-gradient(180deg, transparent 2px, var(--track-color) 2px, var(--track-color) 4px, transparent 4px);
}
.cardwall-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: calc(var(--visible-fraction, 1) * 100%);
	height: 6px;
	background: linear-gradient(180deg, transparent 2px, currentColor 2px, currentColor 4px, transparent 4px);
	box-shadow: none;
	cursor: grab;
}
.cardwall-range::-moz-range-thumb {
	width: calc(var(--visible-fraction, 1) * 100%);
	height: 6px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(180deg, transparent 2px, currentColor 2px, currentColor 4px, transparent 4px);
	box-shadow: none;
	cursor: grab;
}
/* on hover the rule thickens 2px -> 4px, as on the global site */
.cardwall-range:hover::-webkit-slider-thumb,
.cardwall-range:active::-webkit-slider-thumb,
.cardwall-range:focus-visible::-webkit-slider-thumb {
	background: linear-gradient(180deg, transparent 1px, currentColor 1px, currentColor 5px, transparent 5px);
}
.cardwall-range:hover::-moz-range-thumb,
.cardwall-range:active::-moz-range-thumb,
.cardwall-range:focus-visible::-moz-range-thumb {
	background: linear-gradient(180deg, transparent 1px, currentColor 1px, currentColor 5px, transparent 5px);
}

.cardwall-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px;
	padding: 12px 16px;
	border: 0.8px solid transparent;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.3s, background-color 0.2s;
}
.cardwall-prev { margin-inline-start: auto; }
.cardwall-arrow svg { width: 16px; height: 16px; display: block; }
/* The end state is aria-disabled, not :disabled — a disabled button drops out
   of the tab order and stole focus at the end of the track. */
.cardwall-arrow:hover:not([aria-disabled="true"]) { background-color: rgba(255, 255, 255, 0.2); }
.cardwall-arrow:active:not([aria-disabled="true"]) { background-color: rgba(255, 255, 255, 0.3); }
.cardwall-arrow[aria-disabled="true"] { opacity: 0.3; cursor: default; }

@media (min-width: 768px) {
	.cardwall { padding: 56px 0; }
	.cardwall-item { flex-basis: calc(33.33333% - var(--col-gutter)); } /* 4 of 12 */
	.cardwall-text { padding: 24px; }
}
@media (min-width: 1024px) {
	.cardwall { padding: 64px 0; }
	.cardwall-track { margin-bottom: 32px; }
	.cardwall-card { aspect-ratio: 304 / 458; }
}
@media (min-width: 1440px) {
	.cardwall-track { margin-bottom: 48px; }
	.cardwall-item { flex-basis: calc(25% - var(--col-gutter)); } /* 3 of 12 */
	.cardwall-card { aspect-ratio: 318 / 459; }
	.cardwall-text { padding: 32px; }
	.cardwall-title { font-size: 24px; line-height: 28px; }
	.cardwall-text p { font-size: 16px; line-height: 24px; letter-spacing: 0.16px; }
}
@media (min-width: 1920px) {
	.cardwall-track { margin-bottom: 64px; }
	.cardwall-card { aspect-ratio: 400 / 674; }
	.cardwall-text { padding: 48px; }
	.cardwall-title { font-size: 28px; line-height: 32px; }
	.cardwall-text p { font-size: 18px; line-height: 26px; letter-spacing: 0.18px; }
}
/* below 768 the progress line fills the row instead of sitting at 284px */
@media (max-width: 767.98px) {
	.cardwall-range { width: auto; flex-grow: 1; }
}

/* With four cards the row is exactly full at 1440+ (4 x 3/12), so there is
   nothing to scroll. Rather than show two dead arrows, site.js flags the
   section and the control row drops out — its 48px and the track's bottom gap
   go with it, leaving the band's own padding as the spacing. */
.cardwall.is-static .cardwall-pagination { display: none; }
.cardwall.is-static .cardwall-track { margin-bottom: 0; }

/* ---------- full-bleed feature bands (Mulliner / Ownership) ---------- */

.feature {
	position: relative;
	min-height: clamp(28rem, 64vh, 38rem);
	display: flex; align-items: center;
	overflow: hidden;
	color: var(--white);
}
.feature-bg { position: absolute; inset: 0; }
.feature-bg img { width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; background: rgba(5, 10, 5, 0.25); }

.feature-panel {
	position: relative; z-index: 1;
	margin: clamp(2rem, 6vw, 4rem) var(--gutter);
	max-width: 26rem;
	padding: clamp(1.6rem, 3.4vw, 2.6rem);
	background: rgba(20, 26, 20, 0.55);
	backdrop-filter: blur(6px);
}
.feature-panel-end { margin-inline-start: auto; }
.feature-title { font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 0.9rem; }
.feature-title-caps { letter-spacing: 0.12em; text-transform: uppercase; }
.feature-panel p { font-size: 0.93rem; line-height: 1.7; color: var(--white-70); margin-bottom: 1.6rem; }

/* ---------- Bentley Israel band (green, bilingual) ---------- */

.israel {
	background: var(--band-green);
	color: var(--white);
	padding: clamp(3.4rem, 8vw, 5.5rem) var(--gutter);
}
.israel-grid {
	display: grid; grid-template-columns: 1.1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	max-width: 82rem; margin: 0 auto;
}
.israel-lede { color: var(--white-70); margin: 1rem 0 1.8rem; max-width: 42ch; }
.israel-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.israel-details { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-content: center; }
.israel-heading { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.8rem; }
.israel-details p { color: var(--white-70); font-size: 0.95rem; }
.israel-details a { color: var(--white); }
/* White on white-70 is 1.72:1 against the text around it, so colour alone can
   not mark these as links (WCAG 1.4.1). The nav pair below carries a border
   already; the inline ones take an underline. */
.israel-details p:not(.israel-nav-links) a { text-decoration: underline; text-underline-offset: 3px; }
.israel-nav-links { display: flex; gap: 1.4rem; margin-top: 0.9rem; }
.israel-nav-links a { border-bottom: 1px solid var(--hairline-dark); padding-bottom: 2px; }
.israel-nav-links a:hover { border-bottom-color: var(--white); }

.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--hairline-dark); }
.hours dt { color: var(--white-70); }
/* Time ranges are LTR content inside an RTL block — isolate so 9:00–18:00 doesn't flip */
.hours dd { direction: ltr; unicode-bidi: isolate; }

/* recall sub-block */
.recall {
	max-width: 82rem; margin: clamp(2.6rem, 6vw, 4rem) auto 0;
	padding-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid var(--hairline-dark);
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
}
.recall-copy p { color: var(--white-70); margin-top: 0.8rem; max-width: 44ch; }
.recall-form { display: flex; flex-direction: column; gap: 1.1rem; }
.field label { display: block; font-size: 0.9rem; margin-bottom: 0.4rem; }
.field-hint { color: var(--white-70); font-size: 0.78rem; }
.field input {
	width: 100%;
	background: transparent;
	border: 1px solid var(--hairline-dark);
	color: var(--white);
	font-family: inherit; font-size: 1rem;
	padding: 0.75rem 0.9rem;
	transition: border-color 0.2s;
}
/* Keep the border cue for every focus, but never suppress the ring a keyboard
   user depends on — the old `outline: none` here outranked :focus-visible. */
.field input:focus { border-color: var(--white); }
.field input:focus:not(:focus-visible) { outline: none; }
.recall-form .btn { align-self: flex-start; }
.form-note { font-size: 0.85rem; color: var(--white-70); min-height: 1.2em; }
/* The wording carries the outcome — these only reinforce it, so colour is
   never the sole indicator (WCAG 1.4.1). */
.form-note.is-success { color: var(--white); }
.form-note.is-warning { color: #ffd166; font-weight: 600; }
.form-note.is-error { color: #ffd9d9; }

/* ---------- footer (green mega footer, centred brand) ---------- */

.site-footer { background: var(--band-green); color: var(--white); }
.footer-brand {
	display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
	padding: clamp(2.6rem, 6vw, 4rem) var(--gutter) 2rem;
}
/* already white, so no inversion needed on the green band (the old black file
   needed invert(1) brightness(1.4) to get here) */
.footer-logo { height: 3rem; width: auto; }
.footer-social { display: flex; gap: 2rem; }
.footer-social a { opacity: 0.8; transition: opacity 0.2s; }
.footer-social a:hover { opacity: 1; }
.footer-social svg { width: 1.2rem; height: 1.2rem; }

.footer-cols {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2rem;
	max-width: 82rem; margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.4rem) var(--gutter);
	border-top: 1px solid var(--hairline-dark);
}
.footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-heading { font-weight: 300; font-size: 1.25rem; margin-bottom: 0.6rem; }
.footer-col a { font-size: 0.85rem; color: var(--white-70); transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }

.footer-orchid-row { display: flex; justify-content: center; padding: 0 var(--gutter) 1.8rem; }
.footer-orchid { height: 2.6rem; width: auto; background: var(--white); padding: 0.45rem 0.75rem; box-sizing: content-box; }

.footer-legal {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem 2rem;
	padding: 1.4rem var(--gutter) 2rem;
	border-top: 1px solid var(--hairline-dark);
	font-size: 0.78rem; color: var(--white-70);
	text-align: center;
}

/* ---------- responsive ---------- */

/* The global site collapses its inline nav to a burger below 1440 — at both 1280
   and 1024 it shows only the burger, the centred winged B and Request Test Drive.
   Matching that is also what guarantees no nav item ever wraps: the inline row is
   only shown at widths where it genuinely fits on one line. */
/* Below 1440 the row tightens, so shed what the global site sheds from this slot
   (it drops "Locate Dealer" here) and tighten the spacing a little. Together these
   free ~45px in the side columns, which is what lets the inline nav hold to 1320.
   Note the columns are `1fr auto 1fr`, so BOTH side columns are sized to the wider
   of the two — the left nav's width is what sets the limit, not the total. */
@media (max-width: 1439.98px) {
	.nav-phone { display: none; }
	.nav-group { gap: clamp(0.9rem, 2vw, 1.25rem); }
	.brand { padding: 0 0.9rem; }
}

/* Collapse to the burger below 1320, not below 1440.
   The global site collapses below 1440, but its left nav carries five longer items
   than our four, so ours still fits on one line lower down. Measured: clean at
   1320 (no wrapping, 15px spare in the column before the tweaks above), wrapping
   at 1280. Holding the inline menu to 1320 keeps it on 1366x768 laptops — common
   with this client — where a 1440 breakpoint would show a hamburger and read as
   "the menu disappeared". */
@media (max-width: 1319.98px) {
	.nav-toggle { display: block; order: -1; justify-self: start; }
	.nav-group-left { display: none; }
	.nav-group-right > :not(.nav-boxed) { display: none; }

	/* Open drawer: the nav groups become extra rows of the header grid instead of
	   fixed overlays. The previous fixed-overlay version put the right-hand group
	   back into the header row and floated the whole panel across the hero. */
	.site-header.is-open .header-inner {
		grid-template-areas:
			"toggle brand ."
			"menuL  menuL menuL"
			"menuR  menuR menuR";
		max-height: 100svh; overflow-y: auto;
	}
	.site-header.is-open .nav-toggle      { grid-area: toggle; }
	.site-header.is-open .brand           { grid-area: brand; }
	.site-header.is-open .nav-group-left  { grid-area: menuL; }
	.site-header.is-open .nav-group-right { grid-area: menuR; }
	.site-header.is-open .nav-group {
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
	}
	.site-header.is-open .nav-group-right > * { display: block; }
	.site-header.is-open .nav-link {
		text-align: start; padding: 0.95rem 0;
		border-bottom: 1px solid var(--hairline-light);
	}
	/* touch-sized target in the drawer — the 8px desktop padding is for the
	   header row only */
	.site-header.is-open .nav-boxed {
		border: 1px solid var(--btn-border-light); margin-top: 1rem;
		text-align: center; padding: 0.95rem 1.1rem;
	}

	/* Stays viewport-pinned even though the header no longer is: here the panel is
	   a full-screen overlay that has to cover the open drawer, and it can only be
	   opened at scroll 0 (the header is gone by the time you scroll), so pinned
	   and header-relative land in the same place. */
	.mega { position: fixed; inset: var(--header-h) 0 auto 0; }
	.mega-models { grid-template-columns: 1fr; }
	.model-rail { border-inline-end: 0; border-bottom: 1px solid var(--hairline-light); display: flex; overflow-x: auto; padding: 0.6rem var(--gutter); }
	.rail-item { grid-template-columns: 4.4rem 1fr; min-width: 15rem; }
	.rail-item img { width: 4.4rem; height: 2.6rem; }
	.model-detail.is-active { grid-template-columns: 1fr; }
	.detail-media { display: none; }
	.mega-simple { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* Below 768 the global site drops to the compact header: 44px logo, and only the
   burger and the winged B in the row — Request Test Drive moves into the drawer.
   Keeping the CTA in the row squeezes the centre column and distorts the logo. */
@media (max-width: 767.99px) {
	:root { --header-h: 4.6rem; --header-pad-top: 15px; }
	.header-inner { padding-bottom: 15px; }
	.brand-logo { height: 44px; }
	.nav-group-right { display: none; }
}

@media (max-width: 920px) {

	/* tablet: keep the desktop overlay, but stack the caption and keep the
	   arrows top-right so they cannot land on top of the stacked CTAs */
	.hero-band { padding: calc(var(--header-h) + 0.8rem) 1.2rem 2.4rem; }
	.hero-caption {
		grid-template-columns: 1fr;
		align-items: start; gap: 0.9rem;
		padding: 0 2.2rem 2.4rem;
	}
	.hero-text { max-width: none; }
	.hero-arrows { inset-inline-end: 2.2rem; }
	.hero { min-height: 28rem; height: 70svh; }

	.israel-grid, .recall { grid-template-columns: 1fr; }
	.footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- phone hero — matches bentleymotors.com's mobile slider ----------
   Measured at 406px: square media panel 299x299 centred (~74vw), caption BELOW
   it on the band (title 32/38, copy 14/20, both centred), buttons stacked
   full-width with a 16px gap, thin fraction+progress line above the panel,
   arrows hidden (swipe only). The slides stay overlaid for the crossfade by
   sharing one grid cell, so the band height follows the tallest slide. */
/* 767, not 760: this must be the same breakpoint as the <picture> source in
   slider.js, or 761-767 gets the square 1:1 crop inside the landscape panel. */
@media (max-width: 767.99px) {
	/* the global site's mobile slider item is padded 128px / 16px / 44px */
	.hero-band { padding: 128px 16px 44px; }

	.hero {
		display: flex; flex-direction: column;
		height: auto; min-height: 0; max-height: none;
		overflow: visible; background: transparent;
	}

	/* fraction + progress line, above the panel, across the gutter. The arrows
	   share this row (absolute, against .hero) so they never sit on the photo
	   or the CTAs; the padding-inline-end reserves their space so the progress
	   line stops short of them. Swipe still works — these are the affordance. */
	.hero-meta {
		order: -1;
		position: static;
		background: none;
		padding: 0; padding-inline-end: 5.6rem;
		margin-bottom: 0.7rem;
		min-height: 2.5rem;
		gap: 0.85rem;
	}
	.hero-progress { flex: 1; width: auto; }

	.hero-arrows {
		display: flex;
		top: 0; inset-inline-end: 0;
		gap: 0.35rem;
	}
	.hero-arrow {
		width: 2.5rem; height: 2.5rem;
		background: rgba(8, 11, 8, 0.35);
	}

	.hero-track { position: static; display: grid; }
	/* the square panel runs the full width between the gutters on the global site
	   (343x343 at a 390px viewport) — it is not inset inside the band */
	.hero-slide {
		position: relative; inset: auto; grid-area: 1 / 1;
		width: 100%; margin-inline: auto;
	}

	/* media becomes a square panel in normal flow — height must be released
	   from the shared `height: 100%` rule or it wins over aspect-ratio */
	.hero-media {
		position: static;
		width: 100%; height: auto; aspect-ratio: 1 / 1;
	}
	.hero-media picture, .hero-media img, .hero-media video { height: 100%; }
	/* the copy is no longer over the image, so the scrim has nothing to do */
	.hero-scrim { display: none; }

	.hero-caption {
		position: static;
		display: flex; flex-direction: column; align-items: center;
		text-align: center;
		gap: 0; padding: 0.75rem 0 0;
	}
	.hero-title {
		font-size: 2rem; line-height: 1.19;
		max-width: none; margin-bottom: 1rem;
	}
	.hero-text {
		display: block;
		max-width: none; margin-bottom: 1.9rem; padding-bottom: 0;
	}
	.hero-actions {
		width: 100%;
		align-items: stretch; gap: 1rem;
	}
	/* global site uses a 14px button here; allow wrapping so long labels
	   ("Create Your Own Bentley") cannot overflow the narrow panel */
	.hero-actions .btn {
		width: 100%; justify-content: center;
		white-space: normal; text-align: center;
		font-size: 0.875rem; padding: 0.9rem 1.1rem;
	}
}

@media (max-width: 520px) {
	.israel-details { grid-template-columns: 1fr; }
	.footer-cols { grid-template-columns: 1fr; }
}