/* Gastronome — home.css
 * Homepage-only styles ported from `gastronome homepage.html`.
 * Sitewide chrome (nav, footer, menu overlay, base typography) lives in base.css.
 *
 * Sections: hero / brands / about-3-phase / partners marquee / locations carousel / news.
 */

/* ─── homepage layout extras ─── */
.gn-home { display: block; }

.gn-home :root,
.gn-home {
	--space-section: 120px;
	--space-card-pad: 40px;
}

.text-noise {
	background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.25"/%3E%3C/svg%3E'),
		linear-gradient(#fff, #fff);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.text-noise-gold {
	background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.2"/%3E%3C/svg%3E'),
		linear-gradient(#999, #999);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* ─── hero ─── */
.hero {
	position: relative; height: 100vh; height: 100svh; width: 100vw;
	display: flex; align-items: center; justify-content: center;
	text-align: center; overflow: hidden;
}
.hero-img-wrap { position: absolute; top: -15%; left: -10%; width: 120%; height: 130%; z-index: -2; }
.hero-img-wrap img,
.hero-img-wrap video { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.35) 70%, #000 100%);
}
.hero-content { position: relative; z-index: 1; max-width: 1100px; padding: 0 var(--page); }
.hero-overline {
	font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em;
	margin-bottom: 24px; display: block;
}
.hero-title {
	font-family: var(--font-display);
	font-size: clamp(38px, 5.5vw, 80px);
	line-height: 0.95; font-weight: 700;
	letter-spacing: 0.02em; margin-bottom: 28px; white-space: nowrap;
}
.hero-desc {
	font-family: var(--font-body);
	font-size: clamp(17px, 2vw, 22px);
	color: rgba(255,255,255,0.7);
	margin: 0 auto; max-width: 640px;
	line-height: 1.45; font-weight: 300;
}
.mask-wrap { display: block; overflow: hidden; padding-bottom: 4px; }
.mask-inner { display: inline-block; transform-origin: left top; }
/* No CSS pre-hide on .mask-inner — home.js owns the hide + reveal via
 * gsap.set / heroTl. If home.js never runs, the hero text stays visible
 * instead of getting stuck behind a CSS-driven mask. */
.gsap-reveal { opacity: 0; visibility: hidden; }

/* ─── brands ─── */
.brands-wrap { background: #000; position: relative; }
.brands { position: relative; z-index: 2; }
.brands-header { text-align: center; padding: clamp(40px, 6vh, 72px) var(--page) clamp(32px, 5vh, 56px); }
.brands-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 700; line-height: 1.1; color: #fff;
}
.brands-row {
	display: flex; width: 100%;
	height: 64vh; min-height: 440px; max-height: 640px;
	gap: 5px; padding: 0;
	font-size: 0;
}
.brand-col {
	flex: 1 1 0; position: relative; overflow: hidden; cursor: pointer;
	display: block; min-width: 0;
	transition: flex 0.7s var(--ease-brand);
}
.brand-col:hover { flex: 1.8; }
.brand-col-img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; filter: brightness(0.72);
	transition: filter 0.7s ease, transform 0.7s var(--ease-brand);
}
.brand-col:hover .brand-col-img { filter: brightness(0.95); transform: scale(1.02); }
.brand-col-overlay {
	position: absolute; inset: 0; z-index: 1;
	/* Lightened — softer scrim, just enough bottom fade for the white logo. */
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.38) 100%);
	transition: background 0.7s ease;
}
.brand-col:hover .brand-col-overlay {
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%);
}
.brand-col-logo {
	position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
	z-index: 2; height: 32px; width: auto; max-width: min(65%, 160px);
	object-fit: contain; opacity: 0.85;
	transition: opacity 0.5s ease, bottom 0.5s var(--ease-brand);
	filter: brightness(0) invert(1);
}
.brand-col:hover .brand-col-logo { opacity: 1; bottom: 52px; }
.brand-col-text {
	position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
	z-index: 2; color: #fff; font-family: var(--font-display);
	font-size: 18px; letter-spacing: 0.18em;
}

/* ─── about (fixed, two-column: video | quote, then headline + stats band) ───
 * No scroll-scrub, no pin. Left: a fixed video (or image fallback). Right:
 * the quote. Below both: a full-width band with the headline + stats.
 */
.about-section {
	background: #000; position: relative; z-index: 3;
	padding: clamp(72px, 12vh, 150px) 0 clamp(72px, 11vh, 130px);
}
.about-grid {
	max-width: 1440px; margin: 0 auto; padding: 0 var(--page);
	display: grid; grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(40px, 5vw, 96px); align-items: center;
}

/* Media — fixed, no scaling (autoplay/loop video or image fallback). */
.about-media {
	width: 100%; overflow: hidden;
	height: clamp(420px, 70vh, 760px);
	background: #0a0a0a;
}
.about-media img,
.about-media video {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Quote — left-aligned in its column. INLINE spans so editor `\n` breaks
 * become natural word spacing in one flowing paragraph. */
.about-quote { text-align: left; }
.about-quote-text { margin: 0; }
.about-line,
.about-line-inner {
	display: inline;
	font-family: var(--font-body);
	font-size: clamp(20px, 1.9vw, 32px);
	color: rgba(255,255,255,0.9);
	line-height: 1.55;
	font-weight: 300;
}
.about-attr {
	display: block; text-align: left; margin-top: 28px;
	font-family: var(--font-body);
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
	color: rgba(255,255,255,0.4);
}

/* Headline + stats — full-width band beneath the two columns. */
.about-foot {
	max-width: 1440px; margin: clamp(48px, 7vh, 90px) auto 0;
	padding: clamp(40px, 5vh, 64px) var(--page) 0;
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: clamp(28px, 5vw, 64px); flex-wrap: wrap;
}
.about-headline {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(32px, 4.5vw, 60px);
	font-weight: 700; color: #fff; line-height: 1.05;
}
.about-numbers { display: flex; flex-wrap: wrap; }
.about-stat { padding: 4px clamp(20px, 2.4vw, 40px); text-align: center; }
.about-stat:first-child { padding-left: 0; }
.about-stat + .about-stat { border-left: 1px solid rgba(255,255,255,0.12); }
.about-stat-num {
	display: block; margin-bottom: 6px;
	font-family: var(--font-display);
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 700; color: #fff; line-height: 1;
}
.about-stat-label {
	font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
	color: rgba(255,255,255,0.35);
}

/* ─── partners marquee ─── */
.partners-section {
	background: #000; position: relative; z-index: 3;
	padding: 120px 0 100px;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.partners-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--page); }
.partners-overline {
	text-align: center; font-size: 11px;
	text-transform: uppercase; letter-spacing: 0.2em;
	color: #666; margin-bottom: 32px; display: block;
}
.partners-heading {
	text-align: center; font-family: var(--font-body);
	font-size: clamp(28px, 2vw, 52px);
	color: #fff; line-height: 1.35; font-weight: 300;
	max-width: 800px; margin: 0 auto 72px;
}
.partners-heading em { font-style: italic; }
.partners-carousel { position: relative; overflow: hidden; }
.partners-carousel::before,
.partners-carousel::after {
	content: ''; position: absolute; top: 0; bottom: 0;
	width: 120px; z-index: 2; pointer-events: none;
}
.partners-carousel::before { left: 0; background: linear-gradient(90deg, #000, transparent); }
.partners-carousel::after  { right: 0; background: linear-gradient(270deg, #000, transparent); }
.partners-track {
	display: flex; align-items: center; width: max-content;
	will-change: transform; padding: 24px 0;
}
.partners-logo {
	flex-shrink: 0; padding: 0 48px;
	display: flex; align-items: center; justify-content: center;
	height: 44px; user-select: none;
}
.partners-logo img {
	height: 100%; width: auto; max-width: 130px; object-fit: contain;
	opacity: 0.3; transition: opacity 0.5s ease;
	filter: brightness(0) invert(1);
}
.partners-logo:hover img { opacity: 0.7; }
.partners-dot {
	width: 3px; height: 3px; border-radius: 50%;
	background: rgba(255,255,255,0.15); flex-shrink: 0;
}

/* ─── locations carousel ─── */
.locations-section { background: #000; padding: 0 0 80px; position: relative; z-index: 3; overflow: hidden; }
.locations-header { text-align: center; padding: 64px var(--page) 48px; }
.loc-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 700; color: #fff; line-height: 1.05;
}

.carousel-viewport {
	position: relative; overflow: hidden;
	cursor: grab;
	-webkit-user-select: none; user-select: none;
}
.carousel-viewport.is-grabbing { cursor: grabbing; }

.carousel-track {
	display: flex; gap: 20px;
	padding: 0 max(var(--page), calc((100vw - 1440px) / 2 + var(--page)));
	will-change: transform;
}

/* ─── card: title top-left, address bottom-left, arrow bottom-right.
 *   Subtle hover: image lifts brightness, title gets a hairline rule
 *   draw underneath, arrow slides into view. ─── */
.loc-card {
	flex-shrink: 0; width: 400px; height: 520px;
	position: relative; overflow: hidden;
	display: block;
	background: #0a0a0a;
}
.loc-card-img-wrap {
	position: absolute; inset: -20%; width: 140%; height: 140%;
	will-change: transform;
}
.loc-card-img {
	width: 100%; height: 100%; object-fit: cover;
	filter: brightness(0.5) saturate(0.85);
	transform: scale(1.02);
	transition: filter 0.8s var(--ease-brand), transform 1s var(--ease-brand);
}
.loc-card:hover .loc-card-img {
	filter: brightness(0.7) saturate(1);
	transform: scale(1.06);
}
/* Overlay removed (test) — location cards show the full bright image. */
.loc-card-overlay {
	display: none;
}

/* TOP-LEFT: title block */
.loc-card-head {
	position: absolute; top: 28px; left: 28px; right: 28px; z-index: 2;
	display: flex; flex-direction: column; gap: 8px;
}
.loc-card-name {
	font-family: var(--font-display);
	font-size: clamp(22px, 1.8vw, 28px); font-weight: 700;
	color: #fff; line-height: 1.05;
	letter-spacing: -0.005em;
	max-width: 320px;
	position: relative;
}
/* Hairline rule below the title — draws on hover. */
.loc-card-name::after {
	content: ''; position: absolute; left: 0; bottom: -8px;
	width: 18px; height: 1px; background: rgba(255,255,255,0.55);
	transition: width 0.6s var(--ease-brand), background 0.4s ease;
}
.loc-card:hover .loc-card-name::after {
	width: 56px; background: #fff;
}

/* BOTTOM ROW: address (left) + arrow (right) */
.loc-card-foot {
	position: absolute; bottom: 28px; left: 28px; right: 28px; z-index: 2;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px;
}
.loc-card-address {
	font-family: var(--font-body);
	font-size: 13px; line-height: 1.5;
	color: rgba(255,255,255,0.7);
	max-width: 260px;
	transition: color 0.4s ease;
}
.loc-card:hover .loc-card-address { color: rgba(255,255,255,0.92); }

.loc-card-arrow {
	flex-shrink: 0;
	width: 36px; height: 36px;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,0.85);
	opacity: 0; transform: translate(-6px, 6px);
	transition: opacity 0.5s var(--ease-brand),
	            transform 0.6s var(--ease-brand),
	            background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.loc-card-arrow svg { width: 14px; height: 14px; }
.loc-card:hover .loc-card-arrow {
	opacity: 1; transform: translate(0, 0);
	background: rgba(255,255,255,0.92);
	border-color: rgba(255,255,255,0.92);
	color: #000;
}

/* ─── news ─── */
.news-section {
	background: #000; padding: 100px 0;
	position: relative; z-index: 3;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.news-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--page); }
.news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.news-title {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700; color: #fff; line-height: 1.1;
}
.news-view-all {
	font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
	color: #666; display: inline-flex; align-items: center; gap: 8px;
	transition: color 0.3s ease, gap 0.3s ease;
}
.news-view-all:hover { color: #fff; gap: 14px; }
.news-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.news-card { display: block; }
.news-card-img {
	position: relative; overflow: hidden;
	aspect-ratio: 4/3; margin-bottom: 20px;
}
/* `.news-card-img-wrap` is the parallax inner layer — was previously only
 * styled in news.css (loaded on single/archive news pages, NOT on the
 * homepage), so on the homepage the wrap had no size and the img inside
 * collapsed to 0×0. Mirror the news.css rules here. The 120% size + -10%
 * inset reserve room for the parallax translate without revealing the
 * frame edge on desktop; on touch the parallax is disabled (boot.js
 * `bootParallax` early-returns under coarse pointer) and the img just
 * sits centered + scaled cover, which still looks correct. */
.news-card-img-wrap {
	position: absolute; inset: -10%;
	width: 120%; height: 120%;
	will-change: transform;
}
.news-card-img-wrap img,
.news-card-img img {
	width: 100%; height: 100%; object-fit: cover;
	filter: brightness(0.85);
	transition: transform 0.8s var(--ease-brand), filter 0.5s ease;
}
.news-card:hover .news-card-img-wrap img,
.news-card:hover .news-card-img img { transform: scale(1.04); filter: brightness(1); }
.news-card-img::after {
	content: ''; position: absolute; bottom: 0; left: 0;
	width: 0; height: 1px; background: #fff;
	transition: width 0.6s var(--ease-brand);
}
.news-card:hover .news-card-img::after { width: 100%; }
.news-card-date {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
	color: #555; margin-bottom: 10px; display: block;
}
.news-card-title {
	font-family: var(--font-display);
	font-size: clamp(16px, 1.5vw, 22px);
	font-weight: 700; color: #fff;
	line-height: 1.15; transition: color 0.3s ease;
}
.news-card:hover .news-card-title { color: #999; }

/* ─── responsive ─── */
@media (max-width: 1024px) {
	.brands-row { height: 55vh; min-height: 380px; max-height: 560px; }
	.brand-col-logo { height: 28px; bottom: 32px; }
	.partners-section { padding: 80px 0 72px; }
	.partners-logo { padding: 0 36px; height: 38px; }
	.loc-card { width: 340px; height: 460px; }
	.carousel-track { gap: 16px; }
	.loc-card-name { font-size: 22px; }
	.loc-card-head { top: 22px; left: 22px; right: 22px; }
	.loc-card-foot { bottom: 22px; left: 22px; right: 22px; }
	.locations-section { padding: 64px 0 64px; }
	/* About: stack the video | quote columns below tablet width. */
	.about-grid { grid-template-columns: 1fr; gap: clamp(32px, 5vh, 56px); }
	.about-quote { text-align: center; }
	.about-attr { text-align: center; }
	.about-media { height: clamp(360px, 56vh, 560px); }
	.news-grid { grid-template-columns: 1fr 1fr; }
	.news-card:nth-child(3) { display: none; }
	.news-section { padding: 72px 0; }
}

@media (max-width: 767px) {
	.hero-title { margin-bottom: 16px; white-space: normal; }
	.hero-desc { max-width: 100%; }

	/* Bigger section titles — Our Brands, Our Locations, Journal.
	 * Desktop's `clamp(28px, 3.5vw, 44px)` floors at 28px on phones (since
	 * 3.5vw of 400px = 14px), which read as cramped/small relative to the
	 * carousels below. Bump the mobile floor to 36px with a 9vw stretch
	 * so the heading scales up gracefully on wider phones. */
	.brands-title,
	.loc-title { font-size: clamp(36px, 9vw, 56px); }
	.news-title { font-size: clamp(32px, 8vw, 48px); }

	/* ── BRANDS — mobile horizontal carousel ─────────────────────
	 *
	 * Modeled on the working locations carousel pattern: native
	 * `overflow-x: auto` with fixed-width portrait cards. No
	 * scroll-snap-mandatory (the earlier attempt's source of
	 * jumping). Cards keep their image + gradient overlay + logo.
	 *
	 * Why this works where the previous horizontal carousel didn't:
	 *   - no scroll-snap-type at all → no fight with iOS gestures
	 *   - no per-card hover/active transforms → no flicker on tap
	 *   - `-webkit-overflow-scrolling: touch` engages native
	 *     momentum decay → feels like stock iOS horizontal scroll
	 *   - tap-highlight-color: transparent → no grey flash on tap
	 * ─────────────────────────────────────────────────────────── */
	.brands-row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 10px;
		padding: 0 var(--page);
		width: 100%;
		height: auto; min-height: 0; max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.brands-row::-webkit-scrollbar { display: none; }
	.brand-col,
	.brand-col:first-child,
	.brand-col:last-child {
		flex: 0 0 auto;
		width: 68vw;
		max-width: 320px;
		height: auto;
		aspect-ratio: 4 / 5;
		min-height: 0;
		margin: 0;
		scroll-snap-align: none;
		transition: none;
		-webkit-tap-highlight-color: transparent;
	}
	.brand-col:hover { flex: 0 0 auto; }
	/* Touch feedback — iOS doesn't fire `:hover` reliably on tap, so
	 * `:active` carries the visual feedback. Image brightens briefly while
	 * the finger is down, logo nudges up 2px. The short `transition` is
	 * scoped so it only animates filter/opacity/bottom (cheap to interpolate
	 * during a finger drag) — no transforms, no per-frame scroll work. */
	.brand-col-img {
		filter: brightness(0.75);
		transition: filter 0.25s ease;
	}
	.brand-col:active .brand-col-img,
	.brand-col:hover .brand-col-img {
		filter: brightness(0.92);
		transform: none;
	}
	.brand-col-overlay {
		background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.42) 100%);
		transition: background 0.25s ease;
	}
	.brand-col:active .brand-col-overlay,
	.brand-col:hover .brand-col-overlay {
		background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 100%);
	}
	.brand-col-logo {
		bottom: 24px;
		height: 30px;
		max-width: min(60%, 150px);
		opacity: 1;
		transition: bottom 0.25s ease, opacity 0.25s ease;
	}
	.brand-col:active .brand-col-logo,
	.brand-col:hover .brand-col-logo {
		bottom: 28px;
		opacity: 1;
	}
	.brand-col-text {
		bottom: 24px;
		font-size: 15px;
		letter-spacing: 0.2em;
	}
	.partners-section { padding: 64px 0 56px; }
	.partners-logo { padding: 0 28px; height: 34px; }
	.partners-heading { font-size: clamp(15px, 4vw, 20px); line-height: 1.5; margin-bottom: 40px; max-width: 320px; }
	.partners-carousel::before,
	.partners-carousel::after { width: 60px; }
	.loc-card { width: 280px; height: 400px; }
	.carousel-track { gap: 12px; padding: 0 var(--page); }
	.loc-card-head { top: 20px; left: 20px; right: 20px; }
	.loc-card-foot { bottom: 20px; left: 20px; right: 20px; gap: 12px; }
	.loc-card-name { font-size: 20px; max-width: 220px; }
	.loc-card-address { font-size: 12px; max-width: 180px; }
	.loc-card-arrow { width: 32px; height: 32px; }
	.loc-card-arrow svg { width: 12px; height: 12px; }
	.locations-section { padding: 48px 0 48px; }
	.about-section { padding: 64px 0 64px; }
	.about-line { font-size: clamp(22px, 6vw, 32px); }
	.about-media { height: clamp(300px, 52vh, 480px); }
	.about-foot { flex-direction: column; align-items: flex-start; gap: 28px; margin-top: 12px; }
	/* Stats → equal 2×2 grid on mobile (was a flex row with left dividers). */
	.about-numbers { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 22px 12px; }
	.about-stat { padding: 0; }
	.about-stat + .about-stat { border-left: none; }
	.about-stat-num { font-size: clamp(24px, 6vw, 32px); }
	.about-stat-label { font-size: 9px; }
	.news-grid { grid-template-columns: 1fr; gap: 40px; }
	.news-card:nth-child(3) { display: block; }
	.news-section { padding: 56px 0; }
	.news-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
}

@media (max-width: 480px) {
	.hero-overline { font-size: 11px; letter-spacing: 0.15em; margin-bottom: 16px; }
	.hero-title { line-height: 1; }
	.hero-desc { line-height: 1.5; }
	/* Brands carousel — small phones get slightly wider cards (74vw) so
	   only one full card + a peek of the next is visible, signalling that
	   the row scrolls horizontally. */
	.brand-col,
	.brand-col:first-child,
	.brand-col:last-child {
		width: 74vw; max-width: 280px;
		aspect-ratio: 4 / 5;
	}
	.brand-col-logo { height: 26px; bottom: 18px; max-width: min(65%, 130px); }
	.brand-col-text { bottom: 18px; font-size: 14px; }
	.partners-logo { padding: 0 20px; height: 28px; }
	.partners-heading { font-size: clamp(14px, 4.5vw, 18px); max-width: 280px; }
	.loc-card { width: 250px; height: 360px; }
	.carousel-track { gap: 12px; }
	.loc-card-name { font-size: 18px; }
	.loc-card-address { font-size: 12px; }
	.about-line { font-size: clamp(20px, 7vw, 28px); }
	.about-headline { font-size: clamp(24px, 9vw, 32px); }
	.about-numbers { gap: 18px 10px; }
}

@media (hover: none) and (pointer: coarse) {
	/* Brands stack (mobile rebuild): horizontal scroll-snap carousel was
	 * replaced with a vertical card stack in the ≤767px media query, so
	 * the scroll-snap / overflow / hover-flex patches are no longer needed.
	 * Keep the touch defensives: kill the tap-flash highlight + disable
	 * image/logo transitions so any momentary :hover from touchstart can't
	 * trigger a 700ms filter/transform animation. */
	.brand-col { -webkit-tap-highlight-color: transparent; }
	.brand-col-img,
	.brand-col-logo { transition: none !important; }

	/* Touch devices: arrow always visible, no hover dependency. */
	.loc-card-arrow { opacity: 1; transform: none; }
	.loc-card-name::after { width: 32px; }
}