/*
Theme Name: TFA Motorsport
Theme URI: https://tfamotorsport.com/
Author: Gelani Ozdoyev
Author URI: https://ozdoyev.com
Description: TFA Motorsport theme for Wordpress
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tfamotorsport
Tags: motorsport
*/

@font-face {
	font-family: 'Blantic';
	src: url('assets/fonts/blanticdaf.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Ironmonger Black';
	src: url('assets/fonts/Ironmonger Black Regular.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IvyStyle Sans';
	src: url('assets/fonts/ivy-style-sans.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IvyStyle Sans';
	src: url('assets/fonts/ivy-style-sans-semi-bold.otf') format('opentype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IvyStyle Sans';
	src: url('assets/fonts/ivy-style-sans-bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Philly Sans';
	src: url('assets/fonts/PhillySans.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--red: #ce2128;
	--red-dk: #c7091d;
	--black: #0a0a0a;
	--white: #ffffff;
	--gray-light: #efefef;
	--gray-mid: #bbbbbb;
	--gray-dark: #555;
	--cyan: #2ee1c4;

	--font-title: 'Blantic', Impact, sans-serif; /* headings */
	--font-subtitle: 'IvyStyle Sans', Arial, sans-serif; /* eyebrows / subtitles, weight 700 */
	--font-nav: 'Blantic', Impact, sans-serif; /* navigation menu */
	--font-button: 'IvyStyle Sans', Arial, sans-serif; /* buttons, weight 400 */
	--font-body: 'IvyStyle Sans', Arial, sans-serif; /* body text, weight 600 */
	--font-special: 'Philly Sans', 'Ironmonger Black', Impact, sans-serif; /* distorted headings */
	--font-hashtag: 'Blantic', 'Philly Sans', Impact, sans-serif; /* hashtags */
	--font-impact: 'Ironmonger Black', Impact, sans-serif; /* heaviest distorted style */

	/* Legacy variable aliases — used throughout the file.
       They now point at the role tokens above. */
	--font-display: var(--font-body);
	--font-black: var(--font-title);
	--font-script: var(--font-special);

	--max: 1900px;
}

/* ============================================
   FONT ASSIGNMENTS
   - Title (Blantic): main display headings
   - Subtitle (IvyStyle Sans Bold): eyebrows / kickers
   - Navigation (Blantic): primary + mobile menus
   - Button (IvyStyle Sans Regular): all CTAs
   - Body (IvyStyle Sans SemiBold): default text
   - Special (Philly Sans + Ironmonger Black): distorted style
   - Hashtag (Blantic + Philly Sans): hashtags
   ============================================ */

/* Body / default */
body {
	font-family: var(--font-body);
	font-weight: 600; /* IvyStyle Sans SemiBold */
}

/*animation*/
.fadein {
	opacity: 0;
}
.appear {
	opacity: 0;
	transform: translateY(50px);
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadein:nth-child(1).appear {
	animation-delay: 0s;
}

.fadein:nth-child(2).appear {
	animation-delay: 0.1s;
}

/* Titles (headings) — Blantic */
.section-content-title,
.shop-title,
.oman-title,
.tribe-title,
.news-title {
	font-family: var(--font-title);
}

/* Subtitles / eyebrows — IvyStyle Sans Bold */
.event-label,
.news-sub,
.shop-sub,
.tribe-sub,
.collab-eyebrow,
.send-desc {
	font-family: var(--font-subtitle);
	font-weight: 700;
}

/* Navigation menu — Blantic */
.nav-links li a,
.mobile-links li a {
	font-family: var(--font-nav);
}

/* Buttons — IvyStyle Sans Regular */
.btn-brush,
.btn-brush-sm,
.btn-brush-red-thin,
.tribe-form button,
.search-strip button {
	font-family: var(--font-button);
	font-weight: 400;
}

/* Hero title is the most distorted/aggressive heading — Ironmonger Black */
.hero-title {
	font-family: var(--font-impact);
}

/* Distorted Philly Sans treatment — Send-It "STUFF WE LOVE" + Tribe description */
.arrow-accent,
.tribe-desc {
	font-family: var(--font-special);
}

/* Hashtag style — Blantic for the # text, Philly Sans for the script word */
.send-title {
	font-family: var(--font-hashtag);
}

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

html, body {
	width: 100%;
	overflow-x: hidden;
}

body {
	font-family: var(--font-display);
	background: #000;
	color: #fff;
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
	font-weight: 500;
}

a {
	color: inherit;
	text-decoration: none;
	outline: none;
}

img, svg {
	max-width: 100%;
	display: block;
	border: none;
}

button {
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
	outline: none;
}

ul {
	list-style: none;
}

.container {
	width: 100%;
	max-width: 1900px;
	padding: 0 50px;
	margin: 0 auto;
	position: relative;
	z-index: 22;
}

@media (max-width: 1100px) {
	.container {
		padding: 0 30px;
	}
	.news-section .container {
		padding: 0 0 0 30px;
	}
	.drivers-sl .container {
		padding: 0 30px!important;
	}
}

@media (max-width: 700px) {
	.container {
		padding: 0 15px;
	}
	.news-section .container {
		padding: 0 0 0 15px;
	}
	.drivers-sl .container {
		padding: 0 15px!important;
	}
}


/* =============================================================
   BRUSH BUTTONS (the painted-stroke CTA style used all over)
   ============================================================= */
.btn-brush {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 46px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 1.5px;
	color: #fff;
	text-transform: uppercase;
	position: relative;
	clip-path: polygon(
			3% 12%, 8% 6%, 18% 10%, 28% 4%, 40% 12%, 52% 5%,
			65% 11%, 78% 4%, 90% 10%, 97% 18%,
			96% 80%, 92% 92%, 82% 88%, 70% 96%, 58% 88%, 45% 95%,
			32% 88%, 20% 96%, 10% 90%, 4% 82%
	);
	transition: transform .2s ease, filter .2s ease;
}

.btn-brush:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
}

.btn-brush-red {
	background: var(--red);
}

.btn-brush-black {
	background: #111;
}

.btn-brush-sm {
	padding: 9px 30px;
	font-size: 13px;
	letter-spacing: 1px;
}

.btn-brush-red-thin {
	background: var(--red);
	padding: 10px 28px;
	font-size: 13px;
}

@media (max-width: 600px) {
	.btn-brush {
		padding: 12px 32px;
		font-size: 15px;
	}
}

/* =============================================================
   HEADER / NAV
   ============================================================= */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #050505;
}

.navbar {
	display: flex;
	align-items: center;
	padding: 25px 50px;
	max-width: var(--max);
	margin: 0 auto;
	gap: 20px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 26px;
}

.nav-right {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

.nav-right-links {
	gap: 22px;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nav-links li a {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1.5px;
	color: #fff;
	padding: 6px 2px;
	position: relative;
	white-space: nowrap;
	transition: color .2s;
}

.nav-links li a:hover {
	color: var(--red);
}

.nav-links li a.active {
	color: var(--cyan);
}

.nav-links li a.active::after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	bottom: 14px;
	height: 2px;
	background: var(--cyan);
}

/* Center logo */
.logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-svg {
	width: 200px;
	height: auto;
	display: block;
}

.icon-btn {
	width: 25px;
	height: 25px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.icon-btn img {
	width: 25px;
	height: 25px;
}

/* Hamburger (mobile only) */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 24px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.nav-toggle span {
	height: 2px;
	width: 100%;
	background: #fff;
	display: block;
	transition: transform .3s ease, opacity .2s ease;
	transform-origin: center;
}

.nav-toggle.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
	opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer (hidden by default) */
.mobile-menu {
	display: none;
	position: absolute;
	top: 65px;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, .96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 24px 28px 28px;
	flex-direction: column;
	gap: 18px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.mobile-menu.open {
	display: flex;
}

.mobile-links {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-links li a {
	display: block;
	padding: 14px 4px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 2px;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition: color .2s;
}

.mobile-links li a:hover,
.mobile-links li a.active {
	color: var(--cyan);
}

@media (max-width: 1700px) {
	.logo-svg {
		width: 170px;
	}
}

@media (max-width: 1200px) {
	.nav-links {
		gap: 18px;
	}

	.nav-right-links {
		gap: 18px;
	}

	.nav-links li a {
		font-size: 12px;
		letter-spacing: 1px;
	}
}

/* Switch to mobile/hamburger nav at 1050px */
@media (max-width: 1050px) {
	.navbar {
		gap: 12px;
	}

	.nav-right-links {
		display: none;
	}

	/* keep .nav-right and .nav-actions visible so search + cart stay on the right */
	.nav-toggle {
		display: flex;
	}

	.logo {
		flex: 1 1 auto;
		justify-content: flex-start;
	}

	.logo-svg {
		width: 150px;
	}
}

@media (max-width: 960px) {
	.navbar {
		padding: 20px 20px;
	}
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
	position: relative;
	height: 100vh;
	min-height: 700px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 120px 20px 0;
	overflow: hidden;
	margin-top: 80px;
}

.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
	z-index: 2;
	pointer-events: none;
	background-image: url(assets/img/home/intro/fade.png);
	background-size: cover;
	background-position: 50% 0%;
}

.sandstorm::after{
	display: none;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Show desktop video by default, swap at <=900px */
.hero-video-desktop {
	display: block;
}

.hero-video-mobile {
	display: none;
}

.hero-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: -300px;
}

.hero-title {
	font-family: var(--font-title);
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.1;
	margin-bottom: 38px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hero-title .red {
	color: var(--red);
	font-size: clamp(24px, 3.4vw, 65px);
	font-weight: 900;
}

.hero-title .white {
	color: #fff;
	font-size: clamp(24px, 3.4vw, 65px);
	font-weight: 900;
}

.hero-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 520px;
	width: 100%;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
}

.hero-cta-img {
	display: block;
	width: 100%;
	height: auto; /* keeps aspect ratio; no cropping or stretching */
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
	transition: transform 0.3s ease;
}

.hero-cta-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-subtitle);
	font-size: clamp(20px, 5vw, 40px);
	font-weight: 100;
	letter-spacing: 1px;
	color: #fff;
	text-align: center;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
	white-space: nowrap;
	pointer-events: none;
	text-transform: uppercase;
	transition: transform 0.3s ease;
}

.hero-cta:hover .hero-cta-img {
	transform: scale(1.03);
}

.hero-cta:hover .hero-cta-text {
	transform: translate(-50%, -50%) scale(1.03);
}

@media (max-width: 1100px) {
	.hero {
		min-height: auto;
		max-height: 800px;
	}

	.hero-video {
		max-height: 800px;
	}
}

@media (max-width: 900px) {
	.hero-video-desktop {
		display: none;
	}
	.hero-video-mobile {
		display: block;
	}
	.hero-cta {
		width: 70%;
	}
}

@media (max-width: 700px){
	.hero-cta {
		width: 85%;
	}
}

/* next event bar */
.next-event {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: start;
	margin-bottom: 50;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: -170px;
	z-index: 3;
}

.event-info {
	display: flex;
	flex-direction: column;
	margin-right: 50px;
}

.event-label {
	color: var(--red);
	font-weight: 600;
	font-size: 25px;
	padding-left: 40px;
}

.event-name {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 1.5px;
}

.bullet {
	width: 27px;
	height: 27px;
	border: 2px solid var(--cyan);
	display: inline-block;
	margin-bottom: 10px;
	border-radius: 8px;
}

.countdown {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 25px;
}

.cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
}

.cd-num {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 1px;
	color: #fff;
	line-height: 1;
}

.cd-lbl {
	font-size: 14px;
	letter-spacing: 1px;
	color: #fff;
	margin-top: 1px;
}

.cd-sep {
	font-size: 28px;
	color: #2ee1c4;
	font-weight: 800;
}

@media (max-width: 960px) {
	.hero {
		padding-top: 100px;
	}
	.hero-title .red, .hero-title .white {
		font-size: 28px;
	}
	.next-event {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 20px;
	}
	.event-name {
		font-size: 20px;
	}
	.event-label {
		font-size: 18px;
		padding-left: 30px;
	}
	.bullet {
		width: 22px;
		height: 22px;
		margin-bottom: 5px;
		border-radius: 5px;
	}
	.cd-num {
		font-size: 25px;
	}
	.cd-lbl {
		font-size: 12px;
	}
	.countdown {
		margin-top: 0;
		padding-left: 30px;
	}

}

@media (max-width: 600px) {
	.hero {
		margin-top: 70px;
		min-height: auto;
		max-height: 700px;
	}
	.hero-title .red, .hero-title .white {
		font-size: 25px;
		letter-spacing: 0;
	}
	.hero-title {
		gap: 2px;
	}
	.countdown {
		gap: 6px;
		flex-wrap: wrap;
	}
	.cd-sep {
		font-size: 20px;
	}
	.cd-unit {
		min-width: 36px;
	}
	.event-name {
		font-size: 15px;
		letter-spacing: 0;
	}
	.bullet {
		width: 17px;
		height: 17px;
		margin-bottom: 5px;
		border-radius: 4px;
	}
	.next-event {
		margin-bottom: 0;
		gap: 10px;

	}
	.event-label {
		font-size: 15px;
	}
}

/* =============================================================
   NEWS & VIDEOS
   ============================================================= */
.news-section {
	position: relative;
	padding: 70px 0;
}

.home .news-section:after {
	content: "";
	position: absolute;
	background-color: white;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 400px;
	z-index: 0;
}

.news-box{
	position: relative;
	width: 100%;
	height: 95vh;
	margin-top: 80px;
	background-position: 50% 100%;
	background-size: cover;
	background-repeat: no-repeat;
}

.rest-news {
	padding: 100px 0;
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ------------------------------------------------
   .rest-news slider (News Category page)
   Modeled after the Send It Habibi slider on Home.
   Cards-per-view breakpoints are easy to edit:
     >1400px  → 4 cards
     ≤1400px  → 3 cards
     ≤900px   → 2 cards
     ≤600px   → 1 card
   Gap between cards = 6px (formula on each rule).
   ------------------------------------------------ */
.rest-news-slider {
	position: relative;
	margin-top: 50px;
	width: 100%;
}

.rest-news-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	touch-action: pan-y;     /* allow vertical page scroll on touch */
}

.rest-news-track {
	display: flex;
	align-items: stretch;
	gap: 2px;
	will-change: transform;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
}

.rest-news-track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.rest-news-track.no-anim {
	transition: none;
}

/* Desktop default: 4 cards visible.
   4 cards → 3 gaps × 2px = 6px total gap. */
.rest-news-card {
	flex: 0 0 calc((100% - 6px) / 4);
	min-width: 0;            /* let flex-basis fully control width */
	aspect-ratio: 11 / 16;    /* portrait-style cards as in the design */
	background-color: #1b1b1b;
	position: relative;
	overflow: hidden;        /* clips the zoomed image to the card edges */
	-webkit-user-drag: none;
}

/* Background image layer — lives on a pseudo-element so we can scale
   only the image on hover without zooming the title/gradient/icon. The
   image URL is passed through the inline `--rnc-bg` custom property
   on each <article>. */
.rest-news-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--rnc-bg);
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 0;
	pointer-events: none;
}

.rest-news-card:hover::before {
	transform: scale(1.03);
}

.rest-news-card .rnc-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 60px 50px 30px;
	z-index: 2;
}

.rnc-body:hover .rnc-title {
	color: #00e2af;
}

.rest-news-card .rnc-title {
	font-family: var(--font-body);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 8px 0;
	color: #fff;
	display: block;
}

.rest-news-card .rnc-date {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: .3px;
	display: block;
}

/* Action icon at the bottom-right of each card.
   The SVG (read.svg or play.svg) lives inside the button as an <img>;
   the button just positions it. No frame, no background — bare icon. */
.rest-news-card .rnc-icon {
	position: absolute;
	right: 20px;
	bottom: 30px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: transform .15s ease;
}

.rest-news-card .rnc-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

/* Arrows row — sits BELOW the slider (not over the cards). */
.rest-news-arrows {
	display: flex;
	align-items: center;
	gap: 50px;
	margin-top: 50px;
	padding: 0 50px;
}

.rest-news-arrow {
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--cyan);
	border-radius: 8px;
	background: transparent;
	color: var(--cyan);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease, transform .15s ease;
}

.rest-news-arrow:hover {
	background: rgba(46, 225, 196, 0.12);
}

.rest-news-arrow:active {
	transform: scale(0.94);
}

.rest-news-arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}

.subscr {
	position: relative;
}
.subscr-box h2{
	font-size: clamp(28px, 4vw, 65px);
	font-weight: 500;
	letter-spacing: 3px;
	color: var(--red-dk);
	font-family: var(--font-title);
	line-height: 1;
	text-align: center;
	margin-bottom: 15px;
}

.subscr-box h3{
	font-size: clamp(20px, 4vw, 35px);
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--white);
	font-family: var(--font-display);
	line-height: 1.3;
	text-align: center;
	margin-bottom: 50px;
}

.subscr-box a {
	width: fit-content;
	display: block;
	margin: auto;
}

/* ------------------------------------------------
   .rest-news cards-per-view breakpoints
   ------------------------------------------------ */
@media (max-width: 1700px) {
	.rest-news-card .rnc-body {
		padding: 0 40px 40px 20px;
		z-index: 2;
	}
	.rest-news-card .rnc-title {
		font-family: var(--font-body);
		font-size: 23px;
	}
}

@media (max-width: 1500px) {
	/* 3 cards: 2 gaps × 2px = 4px */
	.rest-news-card {
		flex: 0 0 calc((100% - 4px) / 3);
	}
}

@media (max-width: 1100px) {
	.news-box {
		max-height: 800px;
	}
}

@media (max-width: 900px) {
	/* 2 cards: 1 gap × 2px = 6px */
	.rest-news-card {
		flex: 0 0 calc((100% - 2px) / 2);
	}
	.rest-news-arrows {
		padding: 0 26px;
	}
	.rest-news-card .rnc-title {
		font-size: 20px;
	}
	.news-box {
		max-height: 700px;
	}
}

@media (max-width: 600px) {
	.news-box {
		max-height: 600px;
		margin-top: 50px;
	}
	.rest-news {
		padding: 70px 0;
		min-height: auto;
	}

	/* 1 card: no gaps */
	.rest-news-card {
		flex: 0 0 100%;
		aspect-ratio: 14 / 16;
	}
	.rest-news-arrows {
		padding: 0 20px;
		margin-top: 40px;
	}
	.rest-news-arrow {
		width: 40px;
		height: 40px;
	}
	.rest-news-card .rnc-body {
		padding: 22px 50px 30px 22px;
	}
	.subscr-box h3 {
		font-size: clamp(20px, 4vw, 35px);
		margin-bottom: 30px;
	}
}

.top-headline{
	position: absolute;
	max-width: 1900px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0 50px;
	z-index: 3;
}

.top-headline h1 {
	font-family: var(--font-title);
	font-size: clamp(28px, 7vw, 110px);
	font-weight: 500;
	letter-spacing: 5px;
	color: #fff;
	line-height: 1;
	text-shadow: -2px 5px 20px #000000;
}

.top-headline p {
	color: var(--red);
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 25px;
	margin-top: 10px;
}

.news-title {
	font-size: clamp(28px, 4vw, 65px);
	font-weight: 500;
	letter-spacing: 3px;
	color: #fff;
	line-height: 1;
}

.news-head {
	margin-bottom: 40px;
}

.news-title {
	font-size: clamp(28px, 4vw, 65px);
	font-weight: 500;
	letter-spacing: 2px;
	color: #fff;
	line-height: 1;
}

.news-sub {
	color: var(--red);
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 25px;
	margin-top: 10px;
}

.news-slider-wrap {
	position: relative;
	z-index: 1;
}

.news-viewport {
	position: relative;
	overflow: hidden;
	padding: 6px 0;
	touch-action: pan-y; /* allow vertical page scroll on touch */
}

.news-track {
	display: flex;
	gap: 20px;
	will-change: transform;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
}

.news-track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.news-track.no-anim {
	transition: none;
}

.news-card {
	flex: 0 0 calc((100% - 60px) / 4);
	min-width: 240px;
	height: 550px;
	position: relative;
	overflow: hidden;
	border-radius: 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.news-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .5s ease;
	-webkit-user-drag: none;
}

.news-card:hover .news-img {
	transform: scale(1.05);
}

.news-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .1) 55%);
}

.news-card-body {
	position: relative;
	z-index: 2;
	padding: 40px 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.news-card-body h3 {
	font-size: 25px;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.5px;
}

.btn-brush-sm {
	display: inline-flex;
	align-self: flex-start;
	padding: 8px 24px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	color: #fff;
	clip-path: polygon(
			3% 12%, 8% 6%, 22% 10%, 38% 4%, 55% 12%,
			72% 5%, 88% 10%, 97% 18%,
			96% 80%, 88% 92%, 72% 88%, 55% 96%, 38% 88%, 22% 96%, 8% 90%, 4% 82%
	);
}

.btn-brush-sm.btn-brush-red {
	background: var(--red);
}

/* Arrows pinned ON the first / last visible cards, inside the viewport */
.news-viewport .slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 50px;
	height: 50px;
	border: 2px solid var(--cyan);
	border-radius: 10px;
	color: var(--cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, color .2s;
}

.news-viewport .slider-arrow:hover {
	background: var(--cyan);
	color: #000;
}

.news-viewport .slider-arrow svg {
	width: 35px;
	height: 35px;
}

.news-viewport .news-prev {
	left: 14px;
}

.news-viewport .news-next {
	right: 14px;
}

.slider-arrow {
	width: 40px;
	height: 40px;
	border: 1px solid var(--red);
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background .2s;
}

.slider-arrow:hover {
	background: var(--red);
	color: #fff;
}

.slider-arrow svg {
	width: 18px;
	height: 18px;
}

.news-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 250px;
	width: 100%;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	margin-left: -30px;
}

.news-cta-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-subtitle);
	font-size: clamp(20px, 5vw, 22px);
	font-weight: 100;
	letter-spacing: 1px;
	color: #fff;
	text-align: center;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
	white-space: nowrap;
	pointer-events: none;
	text-transform: uppercase;
}

.news-cta-img {
	display: block;
	width: 100%;
	height: auto; /* keeps aspect ratio; no cropping or stretching */
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
	transition: all 0.3s;
}

.news-cta:hover .news-cta-img {
	opacity: 0.7;
}

/* single-news*/
.single-news {
	max-width: 2500px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	margin-top: 90px;
}

.single-news-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 105vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}

.single-news-headline{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 800px;
	max-width: 65%;
	padding: 50px 0 50px 100px;
	position: relative;
}
.single-news-headline h2{
	font-family: var(--font-subtitle);
	font-size: clamp(23px, 4.5vw, 80px);
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.1;
	text-shadow: -2px 5px 20px #000000;
}

.single-news-box{
	position: relative;
	width: 100%;
	max-width: 65%;
	background-color: #e9e9e9e6;
	padding: 50px 100px 100px 100px;
}

.single-news-box h2 {
	font-family: var(--font-subtitle);
	font-size: clamp(20px, 4.5vw, 70px);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	color: #1b1b1b;
	line-height: 1.1;
}

.single-news-info{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 50px;
	font-size: 20px;
}
.single-news-info p{
	color: black;
}
.single-news-info a{
	color: #15c9a1;
}

.single-news-content{
	padding: 50px 130px 0 130px;
	font-size: 20px;
	color: black;
}

.single-news-content strong {
	color: #ce2226;
}
.single-news-content h3{
	margin-bottom: 10px;
	margin-top: 10px;
}
.single-news-content p{
	margin-bottom: 20px;
}
.single-news-content p:last-child{
	margin-bottom: 0;
}
.single-news-content ul{
	list-style: disc;
	padding-left: 30px;
	line-height: 1.5;
}
.single-news-content a{
	text-decoration: underline;
	transition: all 0.3s;
}
.single-news-content a:hover{
	color: #15c9a1;
}

/* ---------- Share button + animated socials (single-news page) ---------- */

.single-news-share {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
}

.sn-share-toggle {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #0fbb95;
	font-family: inherit;
	font-size: 20px;
	letter-spacing: .5px;
	text-decoration: none;
	transition: color .2s ease;
}

.sn-share-toggle:hover {
	color: #38c3ac;
}

.sn-share-icon {
	width: 30px;
	height: 30px;
	display: block;
	transition: filter .5s ease;
}

.sn-share-toggle:hover .sn-share-icon {
	filter: brightness(0) saturate(100%)
	invert(63%) sepia(61%) saturate(420%) hue-rotate(120deg)
	brightness(92%) contrast(92%);
}

.sn-share-list {
	position: absolute;
	top: -20px;
	right: -40px;
	background-color: #dbdbdb;
	padding: 15px 20px;
	border-radius: 40px;

	list-style: none;
	margin: 0;
	display: none;
	align-items: center;
	gap: 10px;
	pointer-events: none;
	/* Closed: collapse horizontally so no space is reserved */
	max-width: 0;
	overflow: hidden;
	transition: max-width .45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each social pill — slides in from the left of the row, fades + scales up */
.sn-share-item {
	opacity: 0;
	transform: translateX(-12px) scale(.85);
	transition: opacity .35s ease, transform .35s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 0s;       /* overridden when revealed (see .is-open below) */
}

.sn-share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #1b1b1b;
	color: #fff;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.sn-share-btn:hover {
	transform: translateY(-2px);
}

.sn-share-btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Reveal — staggered using --i (set as inline style on each <li>) */
.single-news-share.is-open .sn-share-list {
	pointer-events: auto;
	max-width: 320px;
	opacity: 1;
}

.single-news-share.is-open .sn-share-item {
	opacity: 1;
	transform: translateX(0) scale(1);
	transition-delay: calc(var(--i, 0) * 60ms);
}

/* ---------- Image collage ---------- */

.news-collage {
	/* Sits inside .single-news-box, below the article text */
	margin-top: 70px;
	display: flex;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	/* Total collage height — tall left image dictates this */
	height: 520px;
}

/* Tall left column (image 1) */
.news-collage .nc-cell-1 {
	flex: 0 0 38%;
	height: 100%;
}

/* Right side: two stacked rows */
.news-collage .nc-right {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.news-collage .nc-row {
	display: flex;
	gap: 12px;
	flex: 1 1 50%;
	min-height: 0;          /* let flex children shrink properly */
}

/* Top row: two equal cells */
.news-collage .nc-row-top > .nc-cell {
	flex: 1 1 50%;
}

/* Bottom row: wide image + small column */
.news-collage .nc-row-bot > .nc-cell-4 {
	flex: 1 1 66%;
}
.news-collage .nc-col {
	flex: 0 0 33%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.news-collage .nc-col > .nc-cell {
	flex: 1 1 50%;
	min-height: 0;
}

/* Each cell is a button. Strip native button chrome and host the image. */
.news-collage .nc-cell {
	position: relative;
	border: 0;
	padding: 0;
	margin: 0;
	background: #ddd;
	cursor: pointer;
	overflow: hidden;
	display: block;
	width: 100%;
	transition: transform .25s ease;
}

.news-collage .nc-cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease, opacity .25s ease;
}

.news-collage .nc-cell:hover img {
	transform: scale(1.04);
}

.news-collage .nc-cell:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

/* +N "more" cell — white background with dashed red border + red number */
.news-collage .nc-more {
	background: #ffffff;
	border: 2px dashed #ce2226;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-collage .nc-more-text {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 28px;
	color: #ce2226;
	letter-spacing: 1px;
}

.news-collage .nc-more:hover {
	background: #fff5f5;
}

.news-collage {
	cursor: pointer;
}

.news-collage > .nc-cell-1:only-child {
	flex: 1 1 100%;
}

/* ---------- Lightbox ---------- */

.news-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.news-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Close (top-right) */
.news-lightbox .nl-close {
	position: absolute;
	top: 24px;
	right: 28px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s ease, transform .2s ease;
	opacity: 0.85;
}

.news-lightbox .nl-close:hover {
	opacity: 1;
	transform: rotate(90deg);
}

.news-lightbox .nl-close svg {
	width: 28px;
	height: 28px;
	display: block;
}

/* Prev / Next arrows */
.news-lightbox .nl-arrow {
	position: relative;
	width: 56px;
	height: 56px;
	border: 0;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 18px;
	flex: 0 0 auto;
	transition: background .2s ease, transform .2s ease;
	opacity: 0.9;
}

.news-lightbox .nl-arrow:hover {
	background: rgba(255, 255, 255, 0.18);
	opacity: 1;
}

.news-lightbox .nl-arrow:active {
	transform: scale(0.94);
}

.news-lightbox .nl-arrow svg {
	width: 26px;
	height: 26px;
	display: block;
}

/* Stage = the image area in the middle */
.news-lightbox .nl-stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100vw - 220px);
	max-height: 88vh;
	min-width: 0;
}

.news-lightbox .nl-img {
	max-width: 100%;
	max-height: 88vh;
	object-fit: contain;
	display: block;
	transition: opacity .2s ease;
}

.news-lightbox .nl-img.is-loading {
	opacity: 0;
}

/* Bottom counter "3 / 30" */
.news-lightbox .nl-counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 1px;
	opacity: 0.85;
	user-select: none;
}

/* When the lightbox is open, lock background scroll */
body.sn-lightbox-open {
	overflow: hidden;
}


.long-frame {
	width: 100%;
	height: 600px;
}

.short-frame {
	width: 100%;
	max-width: 360px;
	height: 655px;
	margin: 50px auto 0 auto;
}

@media (max-width: 1700px) {
	.single-news {
		margin-top: 70px;
	}
	.single-news-headline {
		min-height: 700px;
		padding: 0 0 50px 70px;
	}
	.single-news-box {
		padding: 50px 70px 100px 70px;
	}
	.single-news-content {
		padding: 50px 100px 0 100px;
	}
	.single-news-info {
		font-size: 18px;
	}
	.sn-share-icon {
		width: 25px;
		height: 25px;
	}
	.sn-share-toggle {
		font-size: 18px;
	}
	.single-news-content{
		font-size: 18px;
	}
	.news-card {
		height: 500px;
	}
	.news-card-body h3 {
		font-size: 22px;
	}
	.news-section:after {
		height: 400px;
	}
	.news-cta {
		max-width: 200px;
	}
	.news-cta-text {
		font-size: clamp(15px, 4vw, 18px);
	}
	.news-collage {
		height: 400px;
	}
	.top-headline p {
		font-size: 23px;
		margin-top: 10px;
	}
}

@media (max-width: 1500px) {
	.news-card {
		flex-basis: calc((100% - 40px) / 3.5);
	}
}

@media (max-width: 1400px) {
	.news-section:after {
		height: 400px;
	}
	.news-card {
		height: 450px;
	}
	.news-card-body h3 {
		font-size: 20px;
	}
	.long-frame {
		height: 500px;
	}
}

@media (max-width: 1200px) {
	.single-news-headline {
		min-height: 600px;
		padding: 0 0 50px 50px;
	}
	.single-news-box {
		padding: 50px 50px;
	}
	.single-news-content {
		padding: 50px 70px 0 70px;
	}
	.single-news-info {
		font-size: 16px;
	}
	.sn-share-icon {
		width: 23px;
		height: 23px;
	}
	.sn-share-toggle {
		font-size: 16px;
	}
	.single-news-content{
		font-size: 16px;
	}
	.news-card {
		flex-basis: calc((100% - 40px) / 3);
	}
	.news-collage {
		height: 360px;
		gap: 10px;
	}
}

@media (max-width: 1050px) {
	.single-news-bg {
		max-height: 900px;
	}
	.single-news-box {
		max-width: 80%;
	}
	.news-section:after {
		height: 350px;
	}
	.news-card {
		flex-basis: calc((100% - 20px) / 2.5);
	}

	.news-collage .nc-right { gap: 10px; }
	.news-collage .nc-row { gap: 10px; }
	.news-collage .nc-col { gap: 10px; }
}

@media (max-width: 950px) {
	.single-news-bg {
		max-height: 800px;
	}
	.single-news-content {
		padding: 50px 0;
	}
	.news-collage {
		height: 330px;
		gap: 5px;
	}
	.news-collage .nc-rowl,
	.news-collage .nc-right,
	.news-collage .nc-row,
	.news-collage .nc-col {
		gap: 5px;
	}
	.news-sub {
		font-size: 20px;
	}
	.top-headline{
		padding: 0 30px;
	}
	.top-headline p {
		font-size: 18px;
		margin-top: 15px;
	}
	.long-frame {
		height: 450px;
	}
}

@media (max-width: 850px) {
	.news-box br,
	.team-box br{
		display: none;
	}
	.single-news-bg {
		max-height: 700px;
	}
	.news-card {
		flex-basis: calc((100% - 20px) / 2);
	}
	.news-collage {
		height: auto;
		flex-direction: column;
		gap: 10px;
	}
	.news-collage .nc-cell-1 {
		flex: 0 0 auto;
		height: 280px;
	}
	.news-collage .nc-right {
		flex: 0 0 auto;
	}
	.news-collage .nc-row { height: 180px; }
	.news-collage .nc-more-text { font-size: 24px; }

	.news-lightbox .nl-arrow {
		width: 44px;
		height: 44px;
		margin: 0 8px;
	}
	.news-lightbox .nl-stage {
		max-width: calc(100vw - 130px);
	}
}

@media (max-width: 700px) {
	.news-card {
		flex-basis: calc((100% - 20px) / 1.5);
	}
	.news-head {
		margin-bottom: 25px;
	}
	.long-frame {
		height: 400px;
	}
}
@media (max-width: 600px) {
	.top-headline h1 {
		font-size: clamp(28px, 8vw, 110px);
		line-height: 1.2;
		letter-spacing: 2px;
	}
	.top-headline p {
		font-size: 14px;
		letter-spacing: 0;
	}
	.single-news-bg {
		max-height: 450px;
	}
	.single-news-headline {
		max-width: 100%;
	}
	.single-news-box {
		max-width: 100%;
		padding: 50px 20px;
	}
	.single-news-content {
		padding: 20px 0 0 0;
	}
	.single-news-content p{
		font-size: 14px;
	}
	.single-news-headline {
		min-height: 450px;
		padding: 0 20px 30px 20px;
	}
	.single-news-headline h2 {
		letter-spacing: 1px;
		line-height: 1.2;
	}
	.single-news-box h2 {
		letter-spacing: 0;
	}
	.news-card-body h3 {
		font-size: 18px;
	}
	.news-sub {
		font-size: 14px;
	}
	.news-card {
		flex-basis: calc((100% - 20px) / 1.2);
		height: 400px;
	}
	.top-headline{
		padding: 0 20px;
	}
	.news-viewport .slider-arrow {
		width: 40px;
		height: 40px;
	}

	.news-collage { margin-top: 40px; }
	.news-collage .nc-cell-1 { height: 220px; }
	.news-collage .nc-row { height: 140px; }
	.news-collage .nc-more-text { font-size: 20px; }

	.sn-share-toggle { font-size: 18px; }
	.sn-share-btn { width: 34px; height: 34px; }
	.sn-share-btn svg { width: 16px; height: 16px; }
	.sn-share-list { gap: 8px; }

	.news-lightbox .nl-close { top: 14px; right: 14px; width: 38px; height: 38px; }
	.news-lightbox .nl-close svg { width: 22px; height: 22px; }
	.news-lightbox .nl-arrow { width: 38px; height: 38px; margin: 0 6px; }
	.news-lightbox .nl-arrow svg { width: 20px; height: 20px; }
	.news-lightbox .nl-stage { max-width: calc(100vw - 100px); }
	.news-lightbox .nl-counter { bottom: 14px; font-size: 12px; }
}

/* =============================================================
   MANIFESTO — 100vh
   ============================================================= */
.bg-animation {
	position: relative;
}

.bg-animation svg {
	display: block;
	max-width: none;
}

.bg-animation .button {
	mix-blend-mode: darken;
}

.bg-animation .car-brush {
	mix-blend-mode: lighten;
}

.bg-animation .car-brush-mask {
	animation: car-brush-anim 4s ease infinite;
}

.bg-animation .smoke-brush-mask-1 {
	animation: draw 0.5s ease infinite;
	animation-delay: 1.1s;
}

.bg-animation .smoke-brush-mask-2 {
	animation: draw 0.5s ease infinite;
	animation-delay: 1s;
}

.bg-animation .brush-mask {
	animation: brush-anim 4s ease infinite;
	animation-delay: 1s;
}

.bg-animation .wheel-blue {
	mix-blend-mode: color-dodge;
	filter: hue-rotate(10deg);
	animation: spin 200ms linear infinite;
	animation-delay: 1s;
	transform-origin: 973px 862px;
}

.bg-animation .wheel-red {
	mix-blend-mode: color-dodge;
	animation: spin 200ms linear infinite;
	animation-delay: 1s;
	transform-origin: 396px 808px;
}

.bg-animation .hand-mobile {
	display: none;
}

.bg-animation .manifesto-button {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	font-size: 35px;
	position: absolute;
	top: 7vw;
	width: auto;
	height: 200px;
	margin: 0 auto;
	left: 0;
	right: 0;
}

.bg-animation .manifesto-button:before {
	position: absolute;
	inset: 0;
	content: "";
	background: url("assets/img/anim/button-red.png") center center no-repeat;
	background-size: contain;
	animation: manifesto-button-anim 1s steps(1) infinite;
	mix-blend-mode: darken;
}

.bg-animation .manifesto-button span {
	position: relative;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes car-brush-anim {
	0% {
		stroke-dashoffset: 1584.7159423828;
	}
	25% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes brush-anim {
	0% {
		stroke-dashoffset: 3534.0378417969;
	}
	20% {
		stroke-dashoffset: 3534.0378417969;
	}
	30% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes manifesto-button-anim {
	0% {
		background-image: url("assets/img/anim/button-red.png");
	}
	33% {
		background-image: url("assets/img/anim/button-blue.png");
	}
	66% {
		background-image: url("assets/img/anim/button-black.png");
	}
}

@media (max-width: 1600px) {
	.bg-animation .manifesto-button {
		height: 160px;
		font-size: 30px;
	}
}

@media (max-width: 1400px) {
	.bg-animation .manifesto-button {
		height: 130px;
		font-size: 25px;
	}
}

@media (max-width: 1200px) {
	.bg-animation .manifesto-button {
		height: 110px;
		font-size: 20px;
	}
}

@media (max-width: 900px) {
	.bg-animation .manifesto-button {
		height: 100px;
		font-size: 18px;
	}
}

@media (max-width: 700px) {
	.bg-animation {
		overflow: hidden;
		position: relative;
	}
	.bg-animation svg {
		height: auto;
		width: 148%;
		aspect-ratio: 1;
		transform: translateX(-7%);
	}
	.bg-animation .manifesto-button {
		height: 90px;
		font-size: 16px;
		top: auto;
		bottom: 65px;
	}
	.bg-animation .bg-desktop {
		display: none;
	}
	.bg-animation .hand {
		display: none;
	}
	.bg-animation .hand-mobile {
		display: block;
	}
}

/* =============================================================
   CARS & DRIVERS — 100vh vertical slider
   ============================================================= */
.cars-section {
	position: relative;
	height: 100vh;
	max-height: 1500px;
	min-height: 600px;
	overflow: hidden;
	background: #000;
}

.cars-slider {
	position: relative;
	width: 100%;
	height: 100%;
}

.car-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: opacity .6s ease, transform .6s ease, visibility .6s;
}

.car-slide.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.car-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 0%) 45%, rgba(0, 0, 0, .65) 100%);
}

.section-content {
	position: absolute;
	left: 0;
	top: 100px;
	width: 100%;
	z-index: 2;
}

.section-content-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	font-family: var(--font-black);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 3px;
}

.car-make {
	color: #fff;
	font-size: clamp(30px, 4.5vw, 70px);
}

.car-spec {
	position: relative;
	z-index: 2;
	margin-right: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 220px;
	height: 100%;
}

.car-spec-box{
}

.car-spec-box .news-cta {
	margin-left: 0;
}

.spec-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 30px;
	text-transform: uppercase;
}

.spec-row:last-child {
	margin-bottom: 0;
}

.spec-lbl {
	font-size: 25px;
	color: #bbb;
	letter-spacing: 2px;
	font-weight: 100;
}

.spec-val {
	font-size: 22px;
	color: #fff;
	font-weight: 700;
	letter-spacing: 1px;
	max-width: 300px
}

.car-nav {
	position: absolute;

	display: flex;
	flex-direction: row;
	gap: 30px;
	z-index: 5;

	transform: none;
	top: 250px;
	width: 100%;
	max-width: 1900px;

	margin: 0 auto;
	left: 0;
	right: 0;
	padding: 0 50px;
}

.car-arrow {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	border: 2px solid #2ee1c4;
	color: #2ee1c4;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, border-color .2s;
}

.car-arrow:hover {
	background: var(--cyan);
	border-color: var(--cyan);
	color: white;
}

.car-arrow svg {
	width: 30px;
	height: 30px;
}

/* Chevron icons currently point up/down; rotate them so they
   point left/right on the side-mounted buttons. */
#carUp   svg { transform: rotate(-90deg); }
#carDown svg { transform: rotate(-90deg); }

@media (max-width: 2000px) {
	.cars-section {
		max-height: 900px;
	}
}
@media (max-width: 1500px) {
	.cars-section {
		max-height: 800px;
	}
	.car-slide {
		background-position: 70% 50%;
	}
	.car-nav {
		top: 200px;
	}
}

@media (max-width: 1400px) {
	.cars-section {
		max-height: 700px;
	}
	.car-slide {
		background-position: 100% 50%;
	}
}

@media (max-width: 1300px) {
	.cars-section {
		max-height: 650px;
	}
}

@media (max-width: 1100px) {
	.cars-section {
		max-height: 550px;
		min-height: auto;
	}
	.car-slide {
		background-position: 100% 50%;
	}
}

@media (max-width: 960px) {
	.section-content {
		top: 70px;
	}
	.cars-section {
		max-height: 700px;
	}
	.car-slide {
		flex-direction: column;
		justify-content: flex-start;
		padding: 80px 0 40px;
	}
	.section-content-title {
		font-size: 62px;
		gap: 12px;
	}
	.car-make {
		font-size: 34px;
	}
	.car-spec {
		margin: 20px 100px 0;
		background: rgba(0, 0, 0, .5);
		padding: 20px;
		align-self: flex-end;
		height: auto;
		border-radius: 30px;
	}
	.car-nav {
		right: 20px;
		transform: none;
		top: 100px;
	}
}

@media (max-width: 900px) {

	.cars-section {
		max-height: 90vh;
	}

	/* Per-slide background images (desktop AND mobile) are applied
       by JS reading data-bg-desktop / data-bg-mobile from each .car-slide.
       See the carsSlider IIFE in script.js. No CSS bg rules per slide
       are needed at any breakpoint; mobile images get swapped in via
       JS when the (max-width: 900px) media query matches. */

	/* Slide overlay — strengthen the bottom so spec + CTA stay legible
       over any background. */
	.car-overlay {
		background: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0)   0%,
				rgba(0, 0, 0, 0)   45%,
				rgba(0, 0, 0, 0.55) 75%,
				rgba(0, 0, 0, 0.88) 100%
		);
	}

	/* ----- Arrows on left + right edges, slightly above center -----
       The wrapper `.car-nav` is removed from the layout (display:contents)
       so its child buttons become effective children of `.cars-section`
       for absolute positioning. */
	.car-nav {
		display: contents;
	}

	/* Both buttons absolutely positioned against the section.
       `top: 42%` sits them just above vertical center, per the spec. */
	.car-arrow {
		position: absolute;
		top: 30%;
		transform: translateY(-50%);
		z-index: 5;
		width: 50px;
		height: 50px;
	}
	#carUp   { left: 20px;  right: auto; }     /* prev → left side */
	#carDown { right: 20px; left: auto; }      /* next → right side */

	/* ----- Spec block: bottom-left ----- */
	.car-slide {
		/* override the column / top alignment from the 960px block */
		flex-direction: row;
		justify-content: flex-start;
		padding: 0;
	}
	.car-spec {
		position: absolute;
		left: 50px;
		bottom: 50px;
		right: auto;
		top: auto;
		margin: 0;
		min-width: 0;
		height: auto;
		background: transparent;
		padding: 0;
		border-radius: 0;
		align-self: auto;
		max-width: 55%;
		z-index: 3;
	}
	.car-spec-box {
		display: contents;
	}
	.spec-row {
		margin-bottom: 15px;
		gap: 1px;
	}
	.spec-row:last-of-type {
		margin-bottom: 0;
	}
	.spec-lbl {
		font-size: 25px;
		letter-spacing: 1.5px;
		color: rgba(255, 255, 255, 0.7);
	}
	.spec-val {
		font-size: 30px;
		line-height: 1.15;
	}

	.home-car-slide-cta-desc{
		position: fixed;
		right: 50px;
		bottom: 50px;
		z-index: 4;
	}
}
@media (max-width: 800px) {
	.cars-section {
		height: 95vh;
	}
	.spec-val {
		font-size: 25px;
	}
	.spec-lbl {
		font-size: 23px;
	}
}

@media (max-width: 600px) {
	.cars-section {
		height: 750px;
	}
	.section-content {
		top: 50px;
	}
	.car-spec {
		left: 20px;
		bottom: 50px;
	}
	.car-arrow {
		top: 27%;
		width: 40px;
		height: 40px;
	}
	#carUp   { left: 15px;  right: auto; }     /* prev → left side */
	#carDown { right: 15px; left: auto; }      /* next → right side */

	.section-content-title {
		font-size: 46px;
	}
	.car-make {
		font-size: 26px;
		letter-spacing: 2px;
	}
	.spec-val {
		font-size: 18px;
	}
	.car-slide {
		justify-content: flex-end;
	}
	.spec-row {
		margin-bottom: 10px;
	}
	.spec-lbl {
		font-size: 18px;
	}
	.home-car-slide-cta-desc {
		right: 20px;
	}
}

/* =============================================================
   SHOP — 100vh
   ============================================================= */
.shop-section {
	position: relative;
	min-height: 90vh;
	background: var(--gray-light);
	display: flex;
	padding: 120px 50px;
	color: #111;
	gap: 40px;
}

.shop-left {
	flex: 0 0 450px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.shop-title {
	font-family: var(--font-black);
	font-size: 70px;
	font-weight: 500;
	color: #111;
	letter-spacing: 2px;
	margin-top: 15px;
	line-height: 1;
}

.shop-sub {
	color: var(--red);
	font-weight: 800;
	letter-spacing: 1px;
	font-size: 25px;
}

.shop-desc {
	font-weight: 600;
	letter-spacing: 0px;
	font-size: 40px;
	color: #111;
	line-height: 1.3;
	margin-top: auto;
}

.shop-arrows {
	display: flex;
	gap: 12px;
	margin-top: 30px;
}

.shop-arrow {
	width: 40px;
	height: 40px;
	border: 1px solid var(--red);
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .2s;
}

.shop-arrow:hover {
	background: var(--red);
	color: #fff;
}

.shop-arrow svg {
	width: 18px;
	height: 18px;
}

.shop-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 30px;
	position: relative;
}

.collection-tabs {
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
	margin-bottom: 30px;
	/* flex-wrap: wrap;*/
}

.col-tab {
	padding: 10px 15px;
	position: relative;
	transition: opacity .2s;
	/*opacity: .6;*/
	width: 25%;

}

.col-tab.active {
	opacity: 1;
}

.col-tab img{
	width: 100%;
	max-width: 270px;
}

.col-tab.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 15%;
	height: 4px;
	background: var(--cyan);
	border-radius: 3px;
}

.shop-products-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 10px;
	flex: 1;
	min-height: 340px;
}

.cart-badge {
	position: absolute;
	top: -10px;
	left: -10px;
	z-index: 5;
	width: 100px;
	height: 90px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(assets/img/home/shop/buy-now.svg);
	background-size: cover;
	background-position: bottom;
}

.cart-badge svg {
	width: 36px;
	height: 36px;
}

.shop-viewport {
	position: relative;
	flex: 1;
	align-self: stretch; /* fill the wrap's min-height vertically */
	overflow: hidden;
	touch-action: pan-y;
}

.shop-track {
	display: flex;
	align-items: stretch; /* cards stretch to fill the viewport height */
	gap: 14px;
	height: 100%;
	will-change: transform;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
}

.shop-track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.shop-track.no-anim {
	transition: none;
}

.product-card {
	/* Desktop default: 3 cards visible.
       3 cards → 2 gaps × 14px = 28px total gap. */
	flex: 0 0 calc((100% - 28px) / 3);
	min-width: 0; /* let flex-basis fully control width */
	background: #f3f3f3;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 1;
	transition: opacity .35s ease;
}

.product-img {
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	-webkit-user-drag: none;
}

.store-badge {
	position: absolute;
	bottom: -10px;
	right: -10px;
	width: 120px;
	height: 120px;

	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
	z-index: 6;

	background-image: url("assets/img/home/shop/check-out.svg");
	background-size: cover;
}


/* ------------------------------------------------
   SHOP cards-per-view breakpoints
   Edit these to change how many cards show at
   each viewport size. Gap between cards = 14px.

   formula: flex-basis = (100% − (n-1)*14px) / n
   ------------------------------------------------ */
@media (max-width: 1600px) {
	/* 3 cards: 2 gaps × 14px = 28px */
	.product-card {
		flex: 0 0 calc((100% - 28px) / 3);
	}
}

@media (max-width: 1300px) {
	/* 2 cards: 1 gap × 14px = 14px */
	.product-card {
		flex: 0 0 calc((100% - 14px) / 2);
	}
}

@media (max-width: 960px) {
	.shop-section {
		flex-direction: column;
		padding: 40px 20px;
		min-height: auto;
		gap: 30px;
	}

	.shop-left {
		flex: none;
	}

	.collection-tabs {
		gap: 20px;
	}

	.store-badge {
		width: 74px;
		height: 74px;
		font-size: 10px;
	}
}

/* =============================================================
   SHOP — Mobile layout (≤900px)
   Layout matches the mobile design reference:
   - Top row: SHOP / TRIBE GEAR on the left; "SHOP BY COLLECTION"
     heading + wide dropdown on the right
   - Cart icon: solid red square w/ white cart, top-left of slider area
   - Coming Soon: bottom-right of slider area
   - Arrows: cyan-outlined squares, side-by-side, below slider
   - Slider/card sizing is NOT customized here — cards fall through
     to the pre-existing @media 1300px / 600px responsive rules.
   Natural cascade order: this 900px block sits BEFORE the slim
   ≤600px tweaks that follow, so the smaller breakpoint can refine
   specific values without fighting source order.
   Desktop (>900px) layout is untouched.
   ============================================================= */

/* ----- Hidden on desktop by default; revealed in the 900px block. ----- */
.shop-collection-dd { display: none; }

@media (max-width: 900px) {

	/* Section becomes a relative positioning context so the arrows
       can be absolutely positioned at its bottom-left. */
	.shop-section {
		position: relative;
		flex-direction: column;
		padding: 70px 30px 150px 30px;
		gap: 20px;
		min-height: auto;
	}

	/* ----- TOP HEADER ROW -----
       Two columns side-by-side:
       - Left: SHOP / TRIBE GEAR
       - Right: SHOP BY COLLECTION heading + dropdown below it */
	.shop-left {
		flex: none;
		display: flex;
		align-items: flex-start;

		flex-direction: column;
		gap: 5px;
	}

	/* Left column: shrink to its content; right column grows. */
	.shop-title {
		font-size: 36px;
		margin-top: 0;
		line-height: 1;
	}
	.shop-sub {
		font-size: 14px;
		letter-spacing: 1.5px;
		margin-top: 2px;
	}

	/* Right column: SHOP BY COLLECTION + dropdown.
       .shop-desc gets the heading treatment; dropdown sits below. */
	.shop-desc {
		font-size: 25px;
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: uppercase;
		position: absolute;
		right: 30px;
	}
	.shop-desc br{
		display: none;
	}

	/* The original arrows row inside .shop-left moves to the bottom
       of the section via absolute positioning (see below). */
	.shop-arrows {
		position: absolute;
		bottom: 50px;
		left: 30px;
		margin-top: 0;
		gap: 12px;
		z-index: 4;
		order: 0;
	}
	.shop-arrow {
		width: 50px;
		height: 50px;
		border: 2px solid var(--cyan);
		color: var(--cyan);
		border-radius: 6px;
	}
	.shop-arrow:hover {
		background: var(--cyan);
		color: #fff;
	}
	.shop-arrow svg {
		width: 22px;
		height: 22px;
	}

	/* ----- Dropdown collection selector -----
       Wide white box with thin border. Inside the trigger:
       collection logo on the LEFT, chevron on the RIGHT. */
	.shop-collection-dd {
		display: block;
		flex: 1 1 auto;
		align-self: stretch;

		width: 60%;
		margin: 0 0 0 auto;
		position: absolute;
		top: -40px;
		z-index: 1;
		right: 0;
		max-width: 300px;
	}
	.shop-cdd-trigger {
		width: 100%;
		height: 52px;
		border: 1.5px solid #111;
		background: #fff;
		padding: 8px 18px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		cursor: pointer;
		transition: border-color .2s ease;
	}
	.shop-cdd-trigger:hover { border-color: #333; }

	/* Logo image takes the left side; let it grow horizontally
       without being squished. */
	.shop-cdd-current {
		flex: 1 1 auto;
		max-width: 100%;
		max-height: 32px;
		width: auto;
		object-fit: contain;
		object-position: left center;
		display: block;
	}
	.shop-cdd-chevron {
		width: 18px;
		height: 18px;
		flex: 0 0 18px;
		color: #111;
		transition: transform .2s ease;
	}
	.shop-collection-dd.is-open .shop-cdd-chevron {
		transform: rotate(180deg);
	}

	.shop-cdd-menu {
		position: absolute;
		top: calc(100% + 4px);
		right: 0;
		left: 0;
		margin: 0;
		padding: 6px;
		background: #fff;
		border: 1.5px solid #111;
		list-style: none;
		z-index: 20;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transition: max-height .2s ease, opacity .2s ease;
	}
	.shop-collection-dd.is-open .shop-cdd-menu {
		max-height: 400px;
		opacity: 1;
		pointer-events: auto;
	}
	.shop-cdd-option {
		height: 52px;
		padding: 8px 12px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		cursor: pointer;
		transition: background .15s ease;
	}
	.shop-cdd-option:hover  { background: #f3f3f3; }
	.shop-cdd-option.is-active { background: #ececec; }
	.shop-cdd-option img {
		max-height: 32px;
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
		display: block;
	}

	/* Hide the desktop horizontal tabs row — dropdown drives the
       filter at this breakpoint. */
	.collection-tabs {
		display: none;
	}

	/* Slider intentionally left untouched here. Cards fall through to
       the pre-existing @media (max-width: 1300px) and (max-width: 600px)
       rules: 2 cards / row at 601–900px and full-bleed at ≤600px.
       The user-requested revert: keep the new collection dropdown,
       cart icon, arrows, and Coming Soon badge — but stop overriding
       slider/card sizing on mobile. */

	/* ----- Cart badge: top-left, solid red square w/ white icon ----- */
	.cart-badge {
		top: -20px;
		left: -10px;
		right: auto;
		width: 78px;
		height: 78px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;
	}
	.cart-badge svg {
		width: 36px;
		height: 36px;
		color: #fff;
		stroke: #fff;
	}

	/* ----- Coming Soon badge: bottom-right of slider ----- */
	.store-badge {
		width: 110px;
		height: 110px;
		font-size: 13px;
		bottom: 0;
		right: 0;
		z-index: 5;
	}

	.shop-products-wrap {
		min-height: 350px;
		margin-top: 70px;
	}
}

/* SHOP — additional tweaks at ≤600px (sits AFTER the 900px block
   above so it can refine specific values for the smallest screens).
   Everything else from the original 600px block is gone:
   .collection-tabs are display:none at ≤900px (dead code at ≤600),
   .shop-title/min-height/store-badge values are set deliberately by
   the 900px design and need not be overridden again here. */
@media (max-width: 600px) {
	/* 1 card: no gaps */
	.product-card {
		flex: 0 0 70%;
	}
	.shop-products-wrap {
		min-height: 300px;
		margin-top: 50px;
	}
	.shop-section {
		padding: 60px 20px 150px 20px;
		gap: 20px;
	}
	.shop-desc {
		font-size: 19px;
		right: 20px;
		letter-spacing: 0;
	}
	.shop-collection-dd {
		top: -50px;
		max-width: 200px;
	}
}


/* =============================================================
   OUR COLLAB WORLD — 100vh, bottom content switcher
   ============================================================= */
.collab-section {
	position: relative;
	min-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.collab-slides {
	position: absolute;
	inset: 0;
}

.collab-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	/* Start slightly enlarged; the active state scales back to 1
       for a subtle zoom-out reveal. */
	transform: scale(1.08);
	transform-origin: center center;
	transition: opacity .8s ease,
	transform 1.2s cubic-bezier(.22, .61, .36, 1),
	visibility .8s;
	will-change: opacity, transform;
}

.collab-slide.active {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

.collab-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .75) 100%);
}

.collab-eyebrow {
	position: absolute;
	top: 40px;
	left: 50px;
	z-index: 3;
	color: var(--red);
	font-weight: 900;
	letter-spacing: 3px;
	font-size: 16px;
}

.collab-switcher {
	position: relative;
	z-index: 4;
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 30px 20px;
	gap: 10px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.collab-switcher::-webkit-scrollbar {
	display: none;
}

.collab-tab {
	flex: 1 1 0;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 6px;
	color: #fff;
	text-align: center;
	align-items: center;
	opacity: .55;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .25s ease, transform .25s ease;
}

.collab-img {
	max-width: 300px;
	max-height: 45px;
	display: none;
}

.collab-small {
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: 700;
	color: #ddd;
}

.collab-big {
	display: block;
	font-size: clamp(30px, 2.4vw, 34px);
	font-weight: 900;
	letter-spacing: 1px;
	color: #fff;
}

/* Hover-driven active state: the JS adds .active on pointerenter,
   so we don't need a separate :hover rule. Keeping :focus styling
   for keyboard users. */
.collab-tab.active,
.collab-tab:focus-visible {
	opacity: 1;
}

.collab-tab:focus-visible {
	outline: none;
}

.collab-tab.active .collab-big{
	display: none;
}

.collab-tab.active .collab-img{
	display: block;
}

@media (max-width: 960px) {
	.collab-eyebrow {
		top: 20px;
		left: 20px;
		font-size: 13px;
	}
	.collab-switcher {
		padding: 0 10px 16px;
		gap: 4px;
	}
	.collab-tab {
		min-width: 280px;
	}
	.collab-img {
		max-height: 41px;
	}
}

@media (max-width: 600px) {
	.collab-section {
		min-height: 70vh;
	}
	.collab-switcher {
		padding: 0 6px 12px;
	}
}

/* =============================================================
   OMAN DRIFT — 100vh
   ============================================================= */
.oman-section {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 200px;
}

.oman-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(240, 240, 240, .3) 0%, rgba(255, 255, 255, .05) 40%, rgba(230, 11, 35, .35) 90%),
	url('assets/img/home/oman/bg.jpg') center/cover no-repeat,
	#efefef;
}

.oman-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 60px 30px;
}

.oman-title {
	font-family: var(--font-black);
	font-size: clamp(55px, 10vw, 180px);
	font-weight: 700;
	letter-spacing: 4px;
	line-height: 1;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
}

.oman-title .red {
	color: var(--red);
}

.oman-title .white {
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.oman-buttons {
	display: flex;
	gap: 20px;
	margin-top: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.oman-buttons .news-cta {
	margin: 0;
}

@media (max-width: 1100px) {
	.oman-section {
		min-height: 800px;
	}
}

@media (max-width: 960px) {
	.oman-section {
		min-height: 700px;
	}
}

@media (max-width: 600px) {
	.oman-section {
		min-height: 600px;
		padding-top: 120px;
	}
	.oman-content {
		padding: 20px 20px;
	}
	.oman-buttons .news-cta {
		max-width: 160px;
	}
	.oman-title {
		letter-spacing: 1px;
	}

}

/* =============================================================
   SEND IT HABIBI — 5 visible cards
   ============================================================= */
.send-section {
	min-height: 900px;
	background: #0a0a0a;
	padding: 100px 0;
	display: flex;
	flex-direction: column;
	position: relative;
	background-image: url("assets/img/home/sendit/bg.jpg");
	background-size: cover;
	background-position: center;
}

.send-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
	padding: 0 50px 40px;
	flex-wrap: wrap;
}

.send-title-wrap {
	flex: 1 1 500px;
}

.send-title {
	font-family: var(--font-special);
	font-size: clamp(30px, 5vw, 70px);
	font-weight: 500;
	color: #fff;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	gap: 50px;
	flex-wrap: wrap;
	min-width: 900px;
	margin-right: 50px;
}

.crown-accent {
	position: relative;
}

.crown-accent::before {
	content: "";
	position: absolute;
	top: -30px;
	left: 116px;
	width: 60px;
	height: 83px;
	background-image: url(assets/img/home/sendit/Crown.svg);
	background-size: cover;
}

.arrow-accent {
	position: relative;
}

.arrow-accent::before {
	content: "";
	position: absolute;
	top: -30px;
	left: -80px;
	width: 167px;
	height: 83px;
	background-image: url(assets/img/home/sendit/arrow1.svg);
	background-size: cover;
}

.arrow-accent::after {
	content: "";
	position: absolute;
	top: 50px;
	left: 370px;
	width: 117px;
	height: 72px;
	background-image: url(assets/img/home/sendit/arrow2.svg);
	background-size: cover;
	z-index: 3;
}

.send-desc {
	flex: 1 1 380px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0;
	color: #fff;
	line-height: 1.2;
	margin-top: 27px;
	max-width: 800px;
	min-width: 370px;
	width: 100%;
}

/* ------------------------------------------------
   #SENDITHABIBI slider
   ------------------------------------------------ */
.send-slider-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	width: 100%;
	min-height: 420px;
}

.send-viewport {
	position: relative;
	flex: 1;
	width: 100%;
	align-self: stretch;
	overflow: hidden; /* hide partial cards on the sides */
	touch-action: pan-y;
}

.send-track {
	display: flex;
	align-items: stretch;
	gap: 6px;
	height: 100%;
	will-change: transform;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
}

.send-track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.send-track.no-anim {
	transition: none;
}

.send-card {
	/* Desktop default: 5 cards visible.
       5 cards → 4 gaps × 6px = 24px total gap. */
	flex: 0 0 calc((100% - 24px) / 5);
	min-width: 0; /* let flex-basis fully control width */
	background-size: cover;
	background-position: center;
	min-height: 400px;
	transition: transform .3s;
	-webkit-user-drag: none;
	position: relative;
}

.drivers .send-card {
	/* Desktop default: 5 cards visible.
       5 cards → 4 gaps × 6px = 24px total gap. */
	flex: 0 0 calc((100% - 12px) / 3);
	min-width: 0; /* let flex-basis fully control width */
	background-size: cover;
	background-position: center;
	min-height: 600px;
	transition: transform .3s;
	-webkit-user-drag: none;
	position: relative;
}

.send-card:hover {
	transform: translateY(-4px);
}

.send-box{
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	padding: 0 0 20px 0;
}

.send-box .news-cta{
	margin: 10px auto 10px auto;
}

.like {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	margin-top: 5px;
}

.like img {
	width: 22px;
	height: 22px;
}

.like span {
	font-size: 16px;
	font-weight: 500;
}


.position{
	position: absolute;
	bottom: 0;
	width: 100%;
	font-weight: bold;
	font-size: 30px;
	padding: 0 20px 20px 20px;
}

.position h3{
	font-weight: bold;
	font-size: 30px;
}
.position p{
	font-size: 16px;
	font-weight: 400;
}

.send-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 55px;
	height: 55px;
	border: 2px solid var(--cyan);
	color: var(--cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .2s;
	border-radius: 15px;
}

.send-arrow:hover {
	background: var(--cyan);
	color: #000;
}

.send-arrow.send-prev {
	left: 25px;
}

.send-arrow.send-next {
	right: 25px;
}

.send-arrow svg {
	width: 30px;
	height: 30px;
}

.drivers .send-arrow.send-prev {
	left: 0;
}

.drivers .send-arrow.send-next {
	right: 0;
}

/* ------------------------------------------------
   #SENDITHABIBI cards-per-view breakpoints
   ------------------------------------------------ */

@media (max-width: 1700px) {
	.send-section {
		min-height: 800px;
	}
}
@media (max-width: 1600px) {
	/* 4 cards: 3 gaps × 6px = 18px */
	.send-card {
		flex: 0 0 calc((100% - 18px) / 4);
	}
	.drivers .send-card {
		min-height: 610px;
	}
	.send-box,
	.position h3{
		font-size: 28px;
	}
}

@media (max-width: 1400px) {
	.drivers .send-card {
		min-height: 540px;
	}
	.send-box,
	.position h3{
		font-size: 25px;
	}
	.position p {
		font-size: 14px;
	}
	.arrow-accent::after {
		top: 0;
		left: auto;
		transform: scaleY(-1) rotate(310deg);
	}
}

@media (max-width: 1300px) {
	/* 3 cards: 2 gaps × 6px = 12px */
	.send-card {
		flex: 0 0 calc((100% - 12px) / 3);
	}
	.drivers .send-card {
		min-height: 400px;
	}
	.crown-accent::before {
		top: -50px;
	}
	.send-title-wrap {
		flex: 1 1 50px;
	}
	.send-desc {
		flex: 1 1 80px;
	}
	.send-head {
		gap: 20px;
	}
}

@media (max-width: 960px) {
	.send-section {
		background: #0a0a0a;
		padding: 70px 0;
	}
	/* 2 cards: 1 gap × 6px = 6px */
	.send-card {
		flex: 0 0 calc((100% - 6px) / 2);
	}
	.drivers .send-card {
		min-height: 500px;
		flex: 0 0 calc((100% - 6px) / 2);
	}
	.arrow-accent::before {
		top: -30px;
		left: -60px;
		width: 107px;
		height: 53px;
	}
	.crown-accent::before {
		top: -32px;
		left: 36px;
		width: 40px;
		height: 53px;
	}
	.arrow-accent::after {
		width: 70px;
		height: 44px;
		transform: scaleY(-1) rotate(310deg);
	}
	.send-desc {
		font-size: 16px;
		line-height: 1.3;
		margin-top: 0;
		flex: 1 1 50px;
	}
	.send-head {
		padding: 0 20px 30px;
		flex-direction: column;
	}

	.send-slider-wrap {
		min-height: 340px;
	}
	.send-box,
	.position h3{
		font-size: 22px;
	}
}

@media (max-width: 800px) {
	.drivers .send-card {
		min-height: 450px;
	}
	.drivers .send-arrow {
		width: 45px;
		height: 45px;
	}
}

@media (max-width: 600px) {
	/* 1 card: no gaps */
	.send-card {
		flex: 0 0 100%;
		min-height: 500px;
	}
	.drivers .send-card {
		flex: 0 0 100%;
		min-height: 400px;
	}
	.arrow-accent::before {
		top: -20px;
		left: -30px;
		width: 75px;
		height: 37px;
	}
	.arrow-accent::after {
		width: 40px;
		height: 25px;
		transform: scaleY(-1) rotate(310deg);
		top: auto;
		bottom: -15px;
		right: -30px;
	}
	.send-title {
		font-size: 28px;
		gap: 10px;
	}
	.send-section {
		padding: 50px 0;
	}
	.send-desc {
		font-size: 14px;
	}
}

/* =============================================================
   JOIN THE TRIBE — two-column layout
   Left:  title + red sub-line + email form
   Right: multi-line description in distorted Philly Sans style
   Background: light-gray grunge swirl pattern.
   ============================================================= */
.tribe-section {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #111;
	padding: 150px 0;
	display: flex;
	justify-content: center;
}

.tribe-inner {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.tribe-left {
	display: flex;
	flex-direction: column;
	justify-content: start;
	width: 45%;
}

.tribe-title {
	font-family: var(--font-title);

	font-size: clamp(28px, 4.2vw, 65px);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1;

	color: #111;
	text-align: left;
}

.tribe-sub {
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: 25px;
	color: var(--red);
	margin-bottom: 60px;
}

.tribe-left-form{
	padding: 8px;
	border: 3px solid #272727;;
	border-radius: 10px;
}

.tribe-form {
	display: flex;
	width: 100%;
	height: 80px;
	background: #fff;
}

.tribe-form input {
	flex: 1;
	padding: 0 24px;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 20px;
	letter-spacing: 1px;
	color: #555;
	outline: none;
}

.tribe-form input::placeholder {
	color: #888;
	letter-spacing: 1.5px;
}

.tribe-form button {
	flex: 0 0 180px;
	background: #111;
	color: #fff;
	font-weight: 500;
	font-size: 20px;
	transition: background .2s;
	font-family: var(--font-display);
}

.tribe-form button:hover { background: #000; }

.tribe-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 45%;
}

.tribe-desc {
	font-family: var(--font-special);
	font-size: clamp(30px, 4vw, 70px);
	color: #9a9a9a;
	text-align: center;
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.tribe-desc-bold{
	font-family: var(--font-impact);
	font-size: clamp(23px, 4vw, 48px);

}

.tribe-form-message {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.4;
	color: red;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.tribe-form-message.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 1200px) {
	.tribe-section {
		padding: 100px 0
	}
	.tribe-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 70px;
	}
	.tribe-left {
		width: 100%;
	}
	.tribe-form button {
		flex: 0 0 140px;
		font-size: 13px;
	}
	.tribe-right {
		justify-content: center;
		width: 100%;
	}
	.tribe-desc {
		text-align: center;
	}
}

@media (max-width: 600px) {
	.tribe-section {
		padding: 70px 0;
	}
	.tribe-inner {
		gap: 40px;
	}
	.tribe-form {
		height: 60px;
	}
	.tribe-sub {
		font-size: 16px;
		margin-bottom: 30px;
		margin-top: 5px;
	}
	.tribe-form input {
		padding: 0 15px;
		font-size: 16px;
	}

	.tribe-form button {
		flex: 0 0 100px;
		font-size: 13px;
	}
}

/* =============================================================
   PARTNERS (logos strip, dark bg)
   ============================================================= */
.backed-section {
	position: relative;
	padding: 150px 0 500px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.backed-logo-main {
	display: flex;
	align-items: center;
	justify-content: center;
}

.backed-logo-main img {
	height: 56px;
	width: auto;
	display: block;
}

/* ---------- Partner logos marquee ----------
   .backed-logos is the viewport (overflow:hidden, full-width).
   .bl-track is the moving flex row that holds the unique logos
   TWICE — the second copy is appended by JS so we can translate
   by exactly -50% and loop seamlessly. Each logo is wrapped in a
   .bl-link <a> so it's clickable; the link is the flex item.
   The .bl <img> keeps the original white-tint visual treatment. */
.backed-logos {
	width: 100%;
	margin-top: 80px;
	margin-bottom: 100px;
	overflow: hidden;
	/* No flex on this container — the .bl-track inside is the flex row. */
}

.bl-track {
	display: flex;
	flex-direction: row;
	align-items: center;
	will-change: transform;
	cursor: grab;
	/* Allow vertical page scrolling on touch while we capture horizontal
       drags ourselves via Pointer Events. */
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.bl-track.is-dragging {
	cursor: grabbing;
}

.bl-link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-right: 80px;             /* spacing between logos */
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	/* Disable the browser's native link-drag behavior. Without this,
       mousing-down on a link and moving the cursor starts a native
       drag-and-drop operation (the browser's "drag this link to your
       bookmarks" feature), which intercepts our Pointer Events and
       breaks the desktop mouse drag. Belt-and-suspenders with the
       JS `dragstart` preventDefault in script.js. */
	user-drag: none;
	-webkit-user-drag: none;
}

/* Keep the existing logo treatment: rendered white, slightly dimmed,
   brightens on hover. */
.backed-logos .bl {
	height: auto;
	width: 170px;
	max-height: 80px;
	flex: 0 0 auto;
	object-fit: contain;
	filter: brightness(0) invert(1); /* render any provided logo as white */
	opacity: .7;
	transition: opacity .2s ease;
	-webkit-user-drag: none;
	pointer-events: none;            /* let drag events hit the <a> parent */
}

.bl-link:hover .bl,
.backed-logos .bl:hover {
	opacity: 1;
}

@media (max-width: 960px) {
	.backed-section {
		padding: 100px 0;
	}
	.backed-logo-main img { height: 44px; }

	.bl-link { padding-right: 56px; }
	.backed-logos .bl { width: 130px; max-height: 60px; }
}

@media (max-width: 600px) {
	.backed-section {
		padding: 50px 0;
	}
	.bl-link { padding-right: 40px; }
	.backed-logos .bl { width: 110px; max-height: 48px; }
	.backed-logos {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.backed-section {
		background-position: 100% 85%;
	}
	.backed-logo-main img {
		height: 30px;
	}
}

/* =============================================================
   SEARCH STRIP — dark, full-width, white text
   ============================================================= */
.search-strip-box{
	width: 100%;
	padding: 10px 0;
	border-bottom: 2px solid;
	border-top: 2px solid;
}
.search-strip {
	display: flex;
	align-items: center;
	background: #c7c7c7;
	color: #656565;;
	padding: 0 50px;
	height: 100px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.search-strip input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 27px;
	letter-spacing: 2px;
	color: #656565;
}

.search-strip input::placeholder {
	color: #656565;
}

.search-strip button {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #656565;;
	font-family: inherit;
	font-size: 30px;
	letter-spacing: 3px;
	font-weight: 500;
	text-transform: uppercase;
}

.search-strip button svg {
	width: 35px;
	height: 35px;
}

@media (max-width: 960px) {
	.search-strip { padding: 0 30px; height: 60px; }
	.search-strip input {
		font-size: 16px;
	}
	.search-strip button {
		font-size: 20px;
	}
}

@media (max-width: 600px) {
	.search-strip {
		padding: 0 10px;
		height: 50px;
		font-size: 13px;
	}
	.search-strip input {
		font-size: 14px;
		letter-spacing: 1px;
	}
	.search-strip button {
		font-size: 14px;
		gap: 6px;
		letter-spacing: 1px;
	}
	.search-strip button svg {
		width: 30px;
		height: 30px;
	}
}

/* =============================================================
   FOOTER — dark with grunge texture + faded TFA car bleed
   ============================================================= */
.site-footer {
	position: relative;
	margin-top: 150px;
	width: 100%;
	color: #fff;
	padding: 0;
}

/* The faded car bleeds in from the right; sits behind the content */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.footer-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	/*gap: 30px 50px;*/
	flex-direction: row;
	justify-content: space-between;
}

.footer-links > a {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 2px;
	color: #fff;
	text-transform: uppercase;
	transition: color .2s;
}

.footer-links > a:hover { color: var(--red); }

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-col a {
	font-size: 20px;
	letter-spacing: 1.5px;
	color: #d8d8d8;
	text-transform: uppercase;
	transition: color .2s;
}

.footer-col a:hover { color: var(--red); }

.footer-col .fc-head {
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 2px;
}

/* Social icons row */
.footer-socials {
	display: flex;
	align-items: center;
	gap: 18px;
}

.footer-social {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	border: 2px solid var(--cyan);
	color: var(--cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, color .2s;
}

.footer-social:hover {
	background: var(--cyan);
	color: #0a0a0a;
}

.footer-social svg {
	width: 30px;
	height: 30px;
}

.footer-copy {
	font-size: 20px;
	color: #cfcfcf;
	line-height: 1.3;
	margin-top: 100px;
}

.bottom-logo-icon {
	position: absolute;
	bottom: 100px;
	right: 0;
	display: block;
	width: 300px;
	z-index: 22;
}

.bottom-logo-icon img {
	display: block;
	width: 300px;
	height: auto;
	transition: opacity 0.45s ease;
}

.bottom-logo-icon .logo-default {
	opacity: 1;
}

.bottom-logo-icon .logo-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.bottom-logo-icon:hover .logo-default {
	opacity: 0;
}

.bottom-logo-icon:hover .logo-hover {
	opacity: 1;
}

.fml-box{
	display: none;
}

@media (max-width: 1400px) {
	.footer-links {
		gap: 30px 50px;
		justify-content: left;
	}
}

@media (max-width: 900px) {
	.footer-inner { padding: 40px 30px 30px; }
	.footer-links { gap: 22px 32px; }
	.bottom-logo-icon {
		bottom: 80px;
		width: 200px;
	}
	.footer-col {
		min-width: 300px;
	}
	.site-footer {
		margin-top: 100px;
	}
	.footer-socials {
		display: flex;
		align-items: center;
		gap: 18px;
		flex-direction: row;
		justify-content: right;
	}
	.footer-copy {
		margin-top: -55px;
		font-size: 18px;
		width: 50%;
	}
}

@media (max-width: 600px) {
	.footer-links {
		gap: 18px 0;
		justify-content: space-between;
	}
	.hide-m{
		display: none;
	}
	.fml-box{
		width: 30%;
		display: flex;
		flex-direction: column;
		gap: 10px 0;
	}

	.fml-box > a {
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 0.5px;
		color: #fff;
		text-transform: uppercase;
		transition: color .2s;
	}
	.footer-col {
		min-width: auto;
		width: 30%;
		flex-direction: column;
	}
	.bottom-logo-icon {
		bottom: 60px;
		width: 120px;
		right: 10px;
	}
	.site-footer {
		margin-top: 50px;
		margin-bottom: 200px;
	}
	.footer-col .fc-head {
		font-size: 13px;
	}
	.footer-col a {
		font-size: 13px;
	}
	.footer-copy {
		margin-top: -55px;
		font-size: 14px;
		text-shadow: 7px 8px 20px #000000;
		width: 60%;
	}
	.footer-inner { padding: 0; }
	.footer-links > a { font-size: 13px; letter-spacing: 0.5px;}
	.footer-social {
		width: 30px;
		height: 30px;
		border-radius: 6px;
	}
	.footer-social svg {
		width: 20px;
		height: 20px;
	}
	.footer-socials {
		display: flex;
		align-items: center;
		gap: 18px;
		flex-direction: row;
		justify-content: right;
	}

}

/* =============================================================
   FULL-WIDTH WHITE SPACER
   Used between Manifesto / Collab World / Oman Drift sections.
   ============================================================= */
.spacer-white {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: white;
}

@media (max-width: 600px) {
	.spacer-white {
		height: 70px;
	}
}

.spacer-black {
	width: 100%;
	height: 100px;
	background: #000;
}

@media (max-width: 600px) {
	.spacer-black {
		height: 70px;
	}
}

/* =============================================================
   MANIFESTO / ABOUT US PAGE (manifesto.html)
   Two full-bleed content blocks, each with a background image.
   All selectors prefixed with `page-` so they cannot clash with
   the home page's locked `.manifesto` baseline.
   ============================================================= */

/* ---------- Manifesto block ---------- */

.manifesto-intro {
	position: relative;
	width: 100%;
	height: 90vh;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: 70px;
}

.page-manifesto {
	position: relative;
	overflow: hidden;
	background: #0a0a0a;
	display: flex;
	align-items: center;
	padding: 120px 0 80px; /* top padding clears the fixed header */

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.page-manifesto-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1900px;
	margin: 0 auto;
	padding: 0 60px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	color: #fff;
}

.page-manifesto-title {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: clamp(40px, 8vw, 150px);
	letter-spacing: 4px;
	line-height: .95;
	color: #c8c8c8;             /* muted gray as in the reference */
	text-transform: uppercase;
}

.page-manifesto-body {
	max-width: 45%;
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(16px, 2.1vw, 34px);
	line-height: 1.45;
	color: #c8c8c8;
}

.page-manifesto-body p { margin: 0; }

.page-manifesto-sign {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(22px, 2.1vw, 50px);
	color: #fff;
	letter-spacing: .5px;
	margin-top: 14px;
}

/* ---------- About Us block ---------- */
.page-about {
	position: relative;
	overflow: hidden;
	background: #0a0a0a;
	display: flex;
	align-items: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 150px 0;
}

.page-about-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1900px;
	margin: 0 auto;
	padding: 0 60px;
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Empty spacer that pushes text to the right column.
   Using a plain flex spacer keeps us inside the
   "no display:grid" project rule. */
.page-about-spacer {
	flex: 1 1 40%;
}

.page-about-content {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	gap: 22px;
	color: #fff;
	max-width: 50%;
}

.page-about-title {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: clamp(40px, 8vw, 150px);
	letter-spacing: 4px;

	line-height: .95;
	color: #c8c8c8;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.page-about-content p {
	font-family: var(--font-body);
	font-weight: 600;
	margin: 0;

	font-size: clamp(15px, 2.1vw, 40px);
	line-height: 1.45;
	color: #c8c8c8;
}

.page-about-content h3 {
	font-family: var(--font-body);
	font-weight: 700;

	font-size: clamp(22px, 2.1vw, 50px);
	color: #fff;
	letter-spacing: .5px;
	margin-top: 14px;
}

.page-about-mission {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(16px, 1.2vw, 20px);
	line-height: 1.45;
	color: #fff;
	margin: 0;
}

.about-news {
	padding-top: 100px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.about-news:after {
	display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.about-news {
		padding-top: 80px;
	}
}

@media (max-width: 1100px) {
	.manifesto-intro {
		max-height: 800px;
	}
	.page-manifesto-inner,
	.page-about-inner { padding: 0 40px; gap: 40px; }
}

@media (max-width: 900px) {
	.manifesto-intro {
		max-height: 700px;
	}
	.page-manifesto,
	.page-about { padding: 100px 0; }
}

@media (max-width: 600px) {
	.page-about-content {
		flex: 1 1 70%;
		max-width: 70%;
		gap: 16px;
	}
	.page-about-spacer {
		flex: 1 1 30%;
	}
	.about-news {
		padding-top: 60px;
	}
	.manifesto-intro {
		height: 40vh;
	}
	.page-manifesto {
		padding: 70px 0;
	}
	.page-manifesto-inner,
	.page-about-inner {
		padding: 0 20px;
	}
	.page-manifesto-body {
		gap: 16px;
		max-width: 68%;
		font-size: clamp(18px, 2.1vw, 34px);
	}
	.page-about-content p {
		font-size: clamp(18px, 2.1vw, 40px);
	}
	.top-headline {
		padding: 0 20px;
	}
}

/* =============================================================
   Team
   ============================================================= */
.team-box{
	position: relative;
	width: 100%;
	height: 95vh;
	margin-top: 80px;
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
}

.team-box:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 400px;
	background: linear-gradient(to top, rgb(0 0 0), /* снизу тёмно */ rgb(0 0 0 / 67%), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 1;
}

.team {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.team-item{
	position: relative;
	width: 33%;
	height: 600px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin-bottom: 50px;
}

.become-team{
	height: 100vh;
	min-height: 1300px;
	width: 100%;
	position: relative;
	padding: 100px 0;
	background-position: center;
	background-size: cover;
}

.become-team-cta{
	position: absolute;
	bottom: 100px;
	width: 100%;
	text-align: center;
}

.become-team-cta h3 {
	color: #929497;
	font-family: var(--font-special);
	font-size: 60px;
	line-height: 1.1;
}

.bt-title{
	font-family: var(--font-impact);
	font-size: 55px;
}

.become-team-cta .news-cta{
	margin: 40px auto 0 auto;
	max-width: 400px;
}


/* ---------- Responsive ---------- */
@media (max-width: 1700px) {
	.become-team {
		min-height: 1200px;
	}
}

@media (max-width: 1400px) {
	.become-team {
		min-height: 1000px;
	}
	.become-team-cta h3 {
		font-size: 50px;
	}
	.bt-title {
		font-size: 45px;
	}
}

@media (max-width: 1200px) {
	.become-team {
		height: auto;
		padding: 80px 0;
	}
	.become-team-cta {
		bottom: 80px;
	}
}

@media (max-width: 1100px) {
	.team-box {
		max-height: 800px;
	}
}

@media (max-width: 900px) {
	.team-box {
		max-height: 700px;
	}
	.become-team-cta h3 {
		font-size: 40px;
	}
	.bt-title {
		font-size: 35px;
	}
	.become-team-cta .news-cta {
		margin: 30px auto 0 auto;
		max-width: 350px;
	}
}

@media (max-width: 800px) {
	.team {
		flex-wrap: wrap;
	}
	.team-item{
		width: 100%;
		max-width: 350px;
		height: 500px;
		margin: 0 auto;
	}
}

@media (max-width: 600px) {
	.team-box {
		max-height: 600px;
	}
	.become-team {
		min-height: 950px;
		padding: 60px 0;
	}
	.team-box {
		margin-top: 50px;
	}
	.bt-title {
		font-size: 30px;
	}
	.become-team-cta .news-cta {
		margin: 30px auto 0 auto;
		max-width: 320px;
	}
	.become-team-cta {
		bottom: 60px;
	}
}



/* =============================================================
   EVENTS & RACES PAGE  (races.php)
   ============================================================= */
.races-section {
	position: relative;
	width: 100%;
	min-height: 100vh;
	margin-top: 90px;
	overflow: hidden;
	background: var(--black);
	color: var(--white);
	display: flex;
	flex-direction: column;
}

/* Background image layer */
.races-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: opacity .45s ease, background-image .45s ease;
	z-index: 0;
}

/* Dark left gradient overlay — heavy on the left, fades out toward the right */
.races-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			to right,
			rgba(0, 0, 0, 0.95) 0%,
			rgba(0, 0, 0, 0.85) 22%,
			rgba(0, 0, 0, 0.55) 45%,
			rgba(0, 0, 0, 0.15) 70%,
			rgba(0, 0, 0, 0) 100%
	);
	z-index: 1;
	pointer-events: none;
}

/* Heading block (top-left) */
.races-heading {
	position: relative;
	z-index: 2;
	padding: 100px 50px 0 100px;
}

.races-title {
	font-family: var(--font-title);
	font-size: clamp(40px, 5.5vw, 84px);
	font-weight: 500;
	letter-spacing: 1.5px;
	line-height: 0.95;
	color: var(--white);
	text-transform: uppercase;
	margin: 0;
}

.races-subtitle {
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: clamp(13px, 1.05vw, 16px);
	letter-spacing: 2px;
	color: var(--red);
	text-transform: uppercase;
	margin: 8px 0 0 0;
}

/* Body wrapper — timeline (left) + info (right) */
.races-body {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: 70px 50px;
	min-height: 0;
}

/* ---------- LEFT: vertical date timeline ---------- */

.races-timeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 200px;
	flex: 0 0 200px;
}

.races-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--cyan);
	border-radius: 6px;
	background: transparent;
	color: var(--cyan);
	cursor: pointer;
	padding: 0;
	transition: background .2s ease, color .2s ease, transform .15s ease;
}

.races-arrow svg {
	width: 22px;
	height: 22px;
	display: block;
}

.races-arrow:hover {
	background: rgba(46, 225, 196, 0.12);
}

.races-arrow:active {
	transform: scale(0.95);
}

/* Wheel viewport — fixed height, hides items outside the visible 3-row window.
   The track inside translates vertically to bring the active item to center.
   overflow-y hides off-screen rows; overflow-x stays visible so the active
   row's dash can extend slightly past the timeline column toward the content. */
.races-wheel {
	position: relative;
	width: 100%;
	/* 3 rows × ITEM_HEIGHT (110px) = 330px window for prev / active / next */
	height: 330px;
	overflow-x: visible;
	overflow-y: hidden;
	/* Soft fade at top + bottom edges so prev/next ease out into darkness */
	-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 0%,
			rgba(0, 0, 0, 0.5) 14%,
			#000 30%,
			#000 70%,
			rgba(0, 0, 0, 0.5) 86%,
			transparent 100%
	);
	mask-image: linear-gradient(
			to bottom,
			transparent 0%,
			rgba(0, 0, 0, 0.5) 14%,
			#000 30%,
			#000 70%,
			rgba(0, 0, 0, 0.5) 86%,
			transparent 100%
	);
}

.races-wheel-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Animated by JS via inline transform */
	transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* While the JS is doing an instant "loop reset" jump (last → first or first → last),
   transitions are temporarily disabled so the snap-back is invisible. */
.races-wheel-track.is-snapping {
	transition: none !important;
}

/* Each date entry — fixed height so wheel translation math is precise */
.races-date {
	display: flex;
	align-items: center;
	gap: 0;
	cursor: pointer;
	user-select: none;
	width: 100%;
	height: 110px;          /* ITEM_HEIGHT — keep in sync with .races-wheel height/3 and JS */
	flex: 0 0 110px;
	padding: 0;
	transition: opacity .45s ease, transform .45s ease;

	flex-direction: row;
	justify-content: center;
	position: relative;
}

/* Items more than 1 step from the active one: hide.
   Only previous, active, next are visible. */
.races-date.is-far {
	opacity: 0;
	pointer-events: none;
}

/* Stack: day on top, flag+month below */
.rd-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.rd-day {
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: 56px;
	color: #4a4a4a;          /* inactive — dim gray */
	letter-spacing: 1px;
	transition: color .25s ease, font-size .25s ease;
	line-height: 0.8;
}

/* Flag and 3-letter month sit side-by-side under the day */
.rd-meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin: 0 auto;
}

.rd-flag {
	width: 22px;
	height: 16px;
	object-fit: cover;
	display: block;
	border-radius: 1px;
}

.rd-month {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 1.5px;
	color: #6a6a6a;          /* inactive — dim gray */
	text-transform: uppercase;
	transition: color .25s ease;
}

/* Dash separator — sits to the right of the active row's stack and visually
   bridges the timeline to the content panel on the right */
.rd-dash {
	display: none;
	width: 46px;
	height: 3px;
	background: var(--cyan);
	margin-left: 18px;
	flex: 0 0 auto;
	align-self: center;       /* vertically centered against the stack */
	position: absolute;
	top: 50%;
	right: 0;
}

/* ACTIVE state — bigger, brighter, with cyan dash */
.races-date.is-active .rd-day {
	color: var(--white);
	font-size: 76px;
}

.races-date.is-active .rd-month {
	color: var(--white);
}

.races-date.is-active .rd-dash {
	display: block;
}

/* Non-active (but visible) prev/next items — softer presence */
.races-date:not(.is-active):not(.is-far) {
	opacity: 0.55;
}

.races-date:hover .rd-day {
	color: #c9c9c9;
}

.races-date.is-active:hover .rd-day {
	color: var(--white);
}

/* ---------- RIGHT: race info ---------- */

.races-info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-left: 30px;
	max-width: 900px;
}

.races-track {
	width: 240px;
	height: auto;
	max-height: 140px;
	object-fit: contain;
	margin-bottom: 18px;
	display: block;
	transition: opacity .3s ease;
}

.races-name {
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: clamp(30px, 5vw, 65px);
	line-height: 0.95;
	letter-spacing: 0;
	color: var(--white);
	text-transform: uppercase;
	margin: 0 0 15px 0;
}

.races-location {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.races-loc-flag {
	width: 28px;
	height: 20px;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}

.races-loc-text {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: clamp(20px, 2.4vw, 30px);
	letter-spacing: 1.5px;
	color: var(--white);
	text-transform: uppercase;
}

.races-loc-date {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(15px, 1.1vw, 18px);
	color: #cccccc;
	letter-spacing: 0.5px;
	margin-left: 8px;
}

.races-cta {
	margin-top: 4px;
}

.races-bg {
	transition: opacity .9s ease;
}

.races-bg.is-fading {
	opacity: 0;
}

.races-info {
	opacity: 1;
	transform: translateX(0);
	transition: opacity .45s ease, transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Outgoing — slides slightly left and fades */
.races-info.is-leaving {
	opacity: 0;
	transform: translateX(-30px);
}

/* Incoming start position — snapped to the right with no transition.
   The JS strips this class on the next frame so the element animates back. */
.races-info.is-entering {
	opacity: 0;
	transform: translateX(80px);
	transition: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1600px) {
	.races-heading {
		padding: 70px 50px 0 70px;
	}
	.races-body {
		padding: 70px 30px;
	}
}
@media (max-width: 1400px) {
	.races-heading {
		padding: 50px 50px;
	}
	.races-body {
		padding: 0 30px 50px 30px;
	}
}

@media (max-width: 1100px) {
	.races-section {
		height: 800px;
		min-height: auto;
		margin-top: 80px;
	}
	.races-body {
		padding: 0 20px 50px 0px;
	}
	.races-timeline { width: 170px; flex-basis: 170px; }
	.rd-day { font-size: 48px; }
	.races-date.is-active .rd-day { font-size: 64px; }
	.races-track { width: 200px; max-height: 120px; }

	/* Smaller wheel item / viewport on tablets — keep ratio 3 × item height */
	.races-wheel { height: 285px; }
	.races-date { height: 95px; flex-basis: 95px; }
}

@media (max-width: 800px) {
	.races-section {
		height: 700px;
	}
	.races-heading { padding: 40px 26px 0 26px; }

	/* Reorder: info on top, timeline below. */
	.races-body {
		padding: 30px 26px 50px 26px;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 28px;
	}
	.races-info     { order: 1; }
	.races-timeline { order: 2; }

	/* Timeline becomes a horizontal row: [prev arrow][wheel][next arrow]. */
	.races-timeline {
		width: 100%;
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	/* The chevron SVGs in the arrows point up/down by default —
       rotate them 90° to point left/right for the horizontal wheel. */
	.races-arrow-up   svg { transform: rotate(-90deg); }
	.races-arrow-down svg { transform: rotate(-90deg); }

	/* Wheel viewport: 3 items wide, 1 item tall.
       Replace the vertical fade mask with a horizontal one. */
	.races-wheel {
		width: 330px;
		height: 100px;
		max-width: calc(100vw - 110px);  /* leave room for the two arrows */
		overflow-x: hidden;
		overflow-y: visible;
		-webkit-mask-image: linear-gradient(
				to right,
				transparent 0%,
				rgba(0, 0, 0, 0.5) 14%,
				#000 30%,
				#000 70%,
				rgba(0, 0, 0, 0.5) 86%,
				transparent 100%
		);
		mask-image: linear-gradient(
				to right,
				transparent 0%,
				rgba(0, 0, 0, 0.5) 14%,
				#000 30%,
				#000 70%,
				rgba(0, 0, 0, 0.5) 86%,
				transparent 100%
		);
	}

	/* Track is a row now; items become narrow vertical-stacked cells. */
	.races-wheel-track { flex-direction: row; }

	.races-date {
		flex: 0 0 110px;        /* ITEM_WIDTH — keep in sync with .races-wheel width/3 */
		width: 110px;
		height: 100px;
		gap: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* Inner stack layout: day on top, small flag+month below (already
       the case via .rd-stack — just tighten alignment for the compact cell). */
	.rd-stack {
		align-items: center;
		gap: 4px;
	}
	.rd-meta { justify-content: center; }

	.rd-day { font-size: 36px; }
	.races-date.is-active .rd-day { font-size: 50px; }
	.rd-month { font-size: 11px; }

	/* The "connector" dash to the right-side info doesn't apply in
       horizontal mode — hide it. */
	.rd-dash { display: none !important; }

	/* Keep .races-info visually the same as the existing mobile state. */
	.races-info {
		padding-left: 0;
		max-width: 100%;
		align-items: center;
		text-align: center;
	}
	.races-location { justify-content: center; }
	.races-track { width: 170px; max-height: 100px; margin-bottom: 12px; }
	.races-overlay {
		background: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0.25) 0%,
				rgba(0, 0, 0, 0.55) 50%,
				rgba(0, 0, 0, 0.82) 100%
		);

	}
}

@media (max-width: 700px) {
	.races-section {
		height: 610px;
	}
}
@media (max-width: 600px) {
	.races-heading { padding: 30px 18px 0 18px; }
	.races-body {
		padding: 25px 20px 50px 20px;
	}
	.races-subtitle {
		letter-spacing: 1px;
	}

	/* Narrower wheel + smaller items for tight screens.
       width = 3 × item width (3 × 95 = 285). */
	.races-wheel {
		width: 285px;
		height: 88px;
		max-width: calc(100vw - 100px);
	}
	.races-date {
		flex: 0 0 95px;
		width: 95px;
		height: 88px;
	}
	.rd-day { font-size: 30px; }
	.races-date.is-active .rd-day { font-size: 42px; }
	.rd-month { font-size: 10px; }

	.races-track { width: 140px; max-height: 80px; }
	.races-loc-date { margin-left: 0; flex-basis: 100%; }
}

/* =============================================================
   CARS & DRIVERS PAGE  (cars-drivers/cars-drivers.php)
   5 sections:
     1. Hero (.cd-hero)
     2. Car spec with animated callouts (.cd-spec)
     3. Why It Rocks band (.cd-rocks)
     4. Driver hero (.cd-driver-hero)
     5. Driver details w/ rounded card (.cd-driver)
   All classes are prefixed with `.cd-` to avoid clashing with the
   home-page CARS & DRIVERS slider (.cars-section / .car-slide).
   ============================================================= */

/* ----- Shared horizontal nav (used in sections 1 & 4) ----- */
.cd-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.cd-nav-list > li {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

/* Vertical pipe separator between items (skip after the last one) */
.cd-nav-list > li:not(:last-child)::after {
	content: "|";
	color: rgba(255, 255, 255, 0.55);
	margin: 0 18px;
	font-weight: 400;
}

.cd-nav-link {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: color .2s ease;
}

.cd-nav-link:hover {
	color: var(--cyan);
}

/* Active state: cyan strikethrough + dimmed gray text */
.cd-nav-link.is-active {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: line-through;
	text-decoration-color: var(--cyan);
	text-decoration-thickness: 2px;
}


/* ===================== SECTION 1: HERO ===================== */
.cd-hero {
	position: relative;
	width: 100%;
	background-color: #000;
	color: #fff;
	overflow: hidden;
	padding: 200px 0 0 0;
}

.cd-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-size: cover;
	background-position: 50% 100%;
	background-repeat: no-repeat;
}

.cd-driver-hero .cd-hero-bg {
	background-position: 50% 0;
}


.show-desc{
	display: block;
}
.show-mob {
	display: none;
}

.cd-hero-inner {
	position: relative;
	width: 100%;
	max-width: 1900px;
	margin: 0 auto;
	padding: 0 50px 50px 50px;
	z-index: 3;
}

.cd-hero-title {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: clamp(40px, 9vw, 130px);
	letter-spacing: 2px;
	line-height: 0.95;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 18px 0;
}

.cd-hero-nav {
	display: block;
}


/* ===================== SECTION 2: CAR SPEC ===================== */
.cd-spec {
	position: relative;
	width: 100%;
	background-color: #050505;
	color: #fff;
	padding: 60px 0 100px 0;
	display: flex;
	flex-direction: column;
}

.cd-spec-inner {
	position: relative;
	width: 100%;
	max-width: 1900px;
	margin: 0 auto;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 0 50px;
}

.cd-spec-title {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: clamp(25px, 5vw, 70px);
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 100px 0;
}

.cd-spec-title-make {
	color: #fff;
}

.cd-spec-title-model {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--red);
	margin-left: 10px;
	letter-spacing: -2px;
}

/* The stage holds the car PNG + callouts + connecting lines.
   It's positioned so the callouts can be placed via percentages and
   stay roughly aligned with the car at any reasonable width. */
.cd-spec-stage {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: 760px;
}

.cd-spec-car {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: 1300px;
	height: auto;
	margin: auto;
	object-fit: contain;
	pointer-events: none;
	z-index: 2;
	/* Soft entrance — fades in once the section is in view */
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s ease .15s, transform .8s ease .15s;
}

.cd-spec.is-in-view .cd-spec-car {
	opacity: 1;
	transform: translateY(0);
}

/* ----- Connecting lines -----
   Each line is a CSS pseudo-element drawn FROM the marker's center.
   - Direction: rotated by `--cd-line-angle` (degrees), set per callout
     by JS so the line points toward the stage center.
   - Length: `--cd-line-length` (px), set per callout below — easy to
     tweak individually.
   - The line is anchored to the marker's center via transform-origin,
     so `transform: rotate(...)` pivots cleanly around the start. */
.cd-marker {
	flex: 0 0 auto;
	position: relative;        /* anchor for the ::after line */
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--cyan);
	border-radius: 5px;
	background: transparent;
	margin-top: 6px;
	/* Defaults — overridden per callout below. JS writes --cd-line-angle. */
	--cd-line-angle: 0deg;
	--cd-line-length: 80px;
}

.cd-marker::after {
	content: "";
	position: absolute;
	/* Start at the marker's center */
	top: 50%;
	left: 50%;
	width: var(--cd-line-length);
	height: 1.2px;
	background: var(--cyan);
	opacity: 0.7;
	/* Pivot the line around its start (marker center) */
	transform-origin: 0 50%;
	transform: rotate(var(--cd-line-angle)) scaleX(0);
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	z-index: -1;               /* sits behind the marker box */
}

.cd-spec.is-in-view .cd-marker::after {
	transform: rotate(var(--cd-line-angle)) scaleX(1);
}


.cd-callout--engine {left: 16%; top: 21%;}
.cd-callout--weight {left: 23%;top: 11%;}
.cd-callout--power {left: 31%;top: 7%;}
.cd-callout--body {left: 72%;top: 0;}
.cd-callout--drivetrain {left: 76%;top: 75%;}
.cd-callout--angle {left: 66%; top: 84%;}
.cd-callout--chassis {left: 54%;top: 94%;}



/* Stagger each line so they draw in sequence — paired with the
   .is-in-view callout stagger below. */
.cd-spec.is-in-view .cd-callout--engine     .cd-marker::after { transition-delay: .35s; }
.cd-spec.is-in-view .cd-callout--weight     .cd-marker::after { transition-delay: .55s; }
.cd-spec.is-in-view .cd-callout--power      .cd-marker::after { transition-delay: .75s; }
.cd-spec.is-in-view .cd-callout--body       .cd-marker::after { transition-delay: .95s; }
.cd-spec.is-in-view .cd-callout--drivetrain .cd-marker::after { transition-delay: 1.15s; }
.cd-spec.is-in-view .cd-callout--angle      .cd-marker::after { transition-delay: 1.35s; }
.cd-spec.is-in-view .cd-callout--chassis    .cd-marker::after { transition-delay: 1.55s; }

/* ----- Per-callout line length (tune individually as needed) ----- */
.cd-callout--engine     .cd-marker { --cd-line-length: 230px; }
.cd-callout--weight     .cd-marker { --cd-line-length: 230px; }
.cd-callout--power      .cd-marker { --cd-line-length: 150px; }
.cd-callout--body       .cd-marker { --cd-line-length: 130px; }
.cd-callout--drivetrain .cd-marker { --cd-line-length: 200px; }
.cd-callout--angle      .cd-marker { --cd-line-length: 150px; }
.cd-callout--chassis    .cd-marker { --cd-line-length: 120px; }

/* ----- Callouts ----- */
.cd-callout {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .55s ease, transform .55s ease;
}

.cd-spec.is-in-view .cd-callout { opacity: 1; transform: translateY(0); }
.cd-spec.is-in-view .cd-callout--engine     { transition-delay:  .35s }
.cd-spec.is-in-view .cd-callout--weight     { transition-delay:  .55s }
.cd-spec.is-in-view .cd-callout--power      { transition-delay:  .75s }
.cd-spec.is-in-view .cd-callout--body       { transition-delay:  .95s }
.cd-spec.is-in-view .cd-callout--drivetrain { transition-delay: 1.15s }
.cd-spec.is-in-view .cd-callout--angle      { transition-delay: 1.35s }
.cd-spec.is-in-view .cd-callout--chassis    { transition-delay: 1.55s }

.cd-callout-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.cd-callout-label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--red);
	text-transform: uppercase;
}

.cd-callout-value {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	margin-top: 2px;
	max-width: 200px;
}

.cd-callout--body .cd-callout-value,
.cd-callout--chassis .cd-callout-value
{
	max-width: 400px;
}


/* ===================== SECTION 3: WHY IT ROCKS ===================== */
.cd-rocks {
	position: relative;
	width: 100%;
	min-height: 220px;
	padding: 150px 50px;
	background-color: #0a0a0a;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cd-rocks-inner {
	max-width: 1100px;
}

.cd-rocks-inner h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(25px, 3vw, 45px);
	letter-spacing: 2px;
	color: var(--red);
	text-transform: uppercase;
}

.cd-rocks-inner p {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 45px);
	line-height: 1.25;
	color: #fff;
	margin: 0;
}


/* ===================== SECTION 4: DRIVER HERO ===================== */
.cd-driver-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #000;
	color: #fff;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.cd-driver-hero:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 400px;
	background: linear-gradient(to top, rgb(0 0 0), /* Ñнизу тёмно */ rgb(0 0 0 / 67%), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 1;
}

.cd-driver-nav {
	position: relative;
	width: 100%;
	max-width: 1900px;
	margin: 0 auto;
	padding: 0 50px 200px 50px;
	z-index: 3;
}


/* ===================== SECTION 5: DRIVER DETAILS ===================== */
.cd-driver {
	position: relative;
	width: 100%;
	color: #fff;
	padding: 0 0 100px 0;
}
.cd-driver-id {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 40px;

	margin-top: -150px;
	position: relative;
	z-index: 1;
}
.cd-driver-id-img{
	width: 25%;
}

.cd-driver-id-txt {
	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 50px;
}

.cd-driver-inner {
	max-width: 75%;
	margin: 0 0 0 auto;       /* aligned to the right with left spacing */
}

.cd-driver-name {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: clamp(34px, 5vw, 64px);
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}

.cd-driver-first {
	color: var(--red);
}

.cd-driver-last {
	color: #fff;
	margin-left: 5px;
}

.cd-driver-meta {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 10px;
}

.cd-driver-flag {
	width: 100px;
	height: auto;
	display: block;
}

.cd-driver-role {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 25px;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
}

.cd-driver-quote {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(16px, 2.4vw, 35px);
	line-height: 1.45;
	color: #fff;
	margin-top: 70px;

	width: 100%;
	max-width: 900px;
}

/* Large rounded info card */
.cd-driver-card {
	position: relative;
	width: 100%;
	border-radius: 22px;
	overflow: hidden;
	background-color: #1b1b1b;
	background-size: cover;
	background-position: center;
	padding: 70px;
}

.cd-driver-facts {
	margin: 0;
	padding: 0;
}

.cd-fact {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cd-driver-facts h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 25px;
	letter-spacing: 1.5px;
	color: var(--red);
	text-transform: uppercase;
	margin-bottom: 10px;
	margin-top: 50px;
}

.cd-driver-facts h3:first-of-type {
	margin-top: 0;
}

.cd-driver-facts p {
	position: relative;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.4;
	color: #fff;
	padding-left: 40px;
	margin-bottom: 15px;
}

.cd-driver-facts p:before {
	content: "";
	position: absolute;
	left: 0;
	width: 25px;
	height: 25px;
	border: 1.5px solid var(--cyan);
	border-radius: 6px;
	background: transparent;
	margin-top: 6px;
}

.cd-callout--engine     {flex-direction: column;}
.cd-callout--weight     {flex-direction: column;}
.cd-callout--power      {flex-direction: column;}
.cd-callout--body       {flex-direction: column;}
.cd-callout--drivetrain {flex-direction: column-reverse;}
.cd-callout--angle      {flex-direction: column-reverse;}
.cd-callout--chassis    {flex-direction: column-reverse;}


/* ===================== RESPONSIVE ===================== */

/* Stack callouts to a list under the car at narrow viewports.
   The absolute layout doesn't survive when the stage shrinks past
   ~900px without the labels overlapping the car. */
@media (max-width: 1700px) {
	.cd-callout--engine {left: 11%; top: 21%;}
	.cd-callout--weight {left: 23%;top: 11%;}
	.cd-callout--power {left: 31%;top: 7%;}
	.cd-callout--body {left: 75%;top: 0;}
	.cd-callout--drivetrain {left: 76%;top: 75%;}
	.cd-callout--angle {left: 66%; top: 84%;}
	.cd-callout--chassis {left: 54%;top: 94%;}

	.cd-callout--engine     .cd-marker { --cd-line-length: 230px; }
	.cd-callout--weight     .cd-marker { --cd-line-length: 230px; }
	.cd-callout--power      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--body       .cd-marker { --cd-line-length: 130px; }
	.cd-callout--drivetrain .cd-marker { --cd-line-length: 140px; }
	.cd-callout--angle      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--chassis    .cd-marker { --cd-line-length: 120px; }

	.cd-driver-facts p {
		font-size: 30px;
		line-height: 1.3;
	}
}

@media (max-width: 1600px) {
	.cd-driver-nav {
		padding: 0 50px 150px 50px;
	}
	.cd-driver-id {
		margin-top: -100px;
	}
}

@media (max-width: 1500px) {
	.cd-callout--engine {left: 9%; top: 21%;}
	.cd-callout--weight {left: 23%;top: 11%;}
	.cd-callout--power {left: 31%;top: 7%;}
	.cd-callout--body {left: 75%;top: 0;}
	.cd-callout--drivetrain {left: 76%;top: 75%;}
	.cd-callout--angle {left: 66%; top: 84%;}
	.cd-callout--chassis {left: 54%;top: 94%;}

	.cd-callout--engine     .cd-marker { --cd-line-length: 230px; }
	.cd-callout--weight     .cd-marker { --cd-line-length: 190px; }
	.cd-callout--power      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--body       .cd-marker { --cd-line-length: 130px; }
	.cd-callout--drivetrain .cd-marker { --cd-line-length: 140px; }
	.cd-callout--angle      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--chassis    .cd-marker { --cd-line-length: 120px; }

	.cd-driver-facts p {
		font-size: 25px;
	}
	.cd-driver-facts p:before {
		margin-top: 0px;
	}
}

@media (max-width: 1400px) {
	.cd-driver-nav {
		padding: 0 50px 120px 50px;
	}
	.cd-driver-id {
		margin-top: -80px;
	}
	.cd-fact-list > li {
		font-size: 30px;
	}
}

@media (max-width: 1300px) {
	.cd-spec-stage {
		height: 670px;
	}
	.cd-callout-value {
		font-size: 16px;
	}
	.cd-driver-hero {
		max-height: 700px;
	}

	.cd-callout--engine     {left: 10%; top: 21%;}
	.cd-callout--weight     {left: 20%;top: 13%;}
	.cd-callout--power      {left: 31%;top: 3%;}
	.cd-callout--body       {left: 75%; top: -20px;}
	.cd-callout--drivetrain {left: 81%;top: 78%;}
	.cd-callout--angle      {left: 71%; top: 88%;}
	.cd-callout--chassis    {left: 58%;top: 97%;}

	.cd-callout--engine     .cd-marker { --cd-line-length: 140px; }
	.cd-callout--weight     .cd-marker { --cd-line-length: 130px; }
	.cd-callout--power      .cd-marker { --cd-line-length: 110px; }
	.cd-callout--body       .cd-marker { --cd-line-length: 125px; }
	.cd-callout--drivetrain .cd-marker { --cd-line-length: 170px; }
	.cd-callout--angle      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--chassis    .cd-marker { --cd-line-length: 120px; }
}

@media (max-width: 1200px) {
	.cd-driver-nav {
		padding: 0 50px 90px 50px;
	}
	.cd-driver-id {
		margin-top: -50px;
	}
	.cd-driver-flag {
		width: 80px;
	}
	.cd-driver-facts h3{
		font-size: 20px;
	}

	.cd-driver-facts p {
		font-size: 18px;
		line-height: 1.4;
	}
	.cd-driver-facts p:before {
		width: 20px;
		height: 20px;
		border-radius: 4px;
		margin-top: 3px;
	}

	.cd-fact-list > li {
		font-size: 22px;
	}
	.cd-fact-bullet {
		width: 20px;
		height: 20px;
		margin-top: 3px;
	}
	.cd-driver-card {
		padding: 50px;
	}
	.cd-callout--body {left: 75%; top: 0px;}
	.cd-hero {
		padding: 150px 0 0 0;
	}
	.cd-driver-facts p {
		font-size: 25px;
	}

	.cd-callout--engine {left: 7%; top: 21%;}
	.cd-callout--weight {left: 20%;top: 10%;}
	.cd-callout--power {left: 31%;top: 7%;}
	.cd-callout--body {left: 75%;top: 0;}
	.cd-callout--drivetrain {left: 76%;top: 75%;}
	.cd-callout--angle {left: 66%; top: 84%;}
	.cd-callout--chassis {left: 54%;top: 94%;}

	.cd-callout--engine     .cd-marker { --cd-line-length: 170px; }
	.cd-callout--weight     .cd-marker { --cd-line-length: 190px; }
	.cd-callout--power      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--body       .cd-marker { --cd-line-length: 130px; }
	.cd-callout--drivetrain .cd-marker { --cd-line-length: 140px; }
	.cd-callout--angle      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--chassis    .cd-marker { --cd-line-length: 120px; }
}

@media (max-width: 1100px) {
	.cd-spec-stage {
		height: 570px;
	}

	.cd-callout--engine {left: 3%; top: 21%;}
	.cd-callout--weight {left: 20%;top: 10%;}
	.cd-callout--power {left: 31%;top: 7%;}
	.cd-callout--body {left: 75%;top: 0;}
	.cd-callout--drivetrain {left: 76%;top: 75%;}
	.cd-callout--angle {left: 66%; top: 84%;}
	.cd-callout--chassis {left: 54%;top: 94%;}

	.cd-callout--engine     .cd-marker { --cd-line-length: 170px; }
	.cd-callout--weight     .cd-marker { --cd-line-length: 190px; }
	.cd-callout--power      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--body       .cd-marker { --cd-line-length: 130px; }
	.cd-callout--drivetrain .cd-marker { --cd-line-length: 140px; }
	.cd-callout--angle      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--chassis    .cd-marker { --cd-line-length: 120px; }
}

@media (max-width: 950px) {
	.cd-driver-nav {
		padding: 0 50px 20px 50px;
	}
	.cd-hero-inner {
		padding: 0 30px 30px 30px;
	}
	.cd-driver-hero {
		max-height: 600px;
	}
	.cd-spec-stage {
		height: 500px;
	}
	.show-desc{
		display: none;
	}
	.show-mob {
		display: block;
	}
	.cd-rocks {
		padding: 100px 50px;
	}
	.cd-callout-value {
		max-width: 150px;
	}
	.cd-callout--body .cd-callout-value, .cd-callout--chassis .cd-callout-value {
		max-width: 250px;
	}

	.cd-callout--drivetrain {left: 79%;top: 75%;}
	.cd-callout--angle {left: 51%; top: 90%;}
	.cd-callout--chassis {left: 4%;top: 90%;}

	.cd-callout--drivetrain .cd-marker { --cd-line-length: 170px; }
	.cd-callout--angle      .cd-marker { --cd-line-length: 150px; }
	.cd-callout--chassis    .cd-marker { --cd-line-length: 120px; }

	.cd-driver-hero:after {
		height: 250px;
	}
	.cd-driver-id {
		margin-top: 20px;
	}
	.cd-driver-flag {
		width: 60px;
	}
	.cd-driver-role {
		font-size: 20px;
	}
	.cd-driver-quote {
		margin-top: 50px;
	}
	.cd-fact-list > li {
		font-size: 20px;
	}
	.cd-fact-bullet {
		width: 18px;
		height: 18px;
	}
	.cd-driver-facts p {
		font-size: 20px;
	}

	.cd-driver-facts h3 {
		font-size: 18px;
		margin-top: 30px;
	}
	.cd-driver-facts p {
		font-size: 18px;
		line-height: 1.4;
		padding-left: 30px;
		margin-bottom: 15px;
	}
	.cd-driver-facts p:before {
		width: 18px;
		height: 18px;
		border-radius: 4px;
	}
}

@media (max-width: 700px) {
	/* Section 1 / 4 nav — wraps cleaner with smaller pipes */
	.cd-nav-list > li:not(:last-child)::after {
		margin: 0 12px;
	}
	.cd-nav-link {
		font-size: 14px;
		letter-spacing: 1px;
	}
	.cd-driver-nav {
		padding: 0 30px 30px 30px;
	}

	/* Section 5 — content fills width */
	.cd-driver {
		padding: 0 0 60px 0;
	}
	.cd-driver-inner {
		margin: 0 auto;
	}
	.cd-driver-card {
		padding: 36px 32px;
	}
	.cd-fact-list > li {
		font-size: 16px;
	}

	.cd-spec-title {
		margin: 0 0 50px 0;
	}
	.cd-callout-label {
		font-size: 12px;
		letter-spacing: 0;
	}
	.cd-callout-value {
		font-size: 12px;
		line-height: 1;
	}


	.cd-callout--engine {left: 0; top: 0%;}
	.cd-callout--weight {left: 13%;top: 12%;}
	.cd-callout--power {left: 36%;top: 12%;}
	.cd-callout--body {left: 59%; top: 12%;}
	.cd-callout--drivetrain {left: 62%;top: 70%;}
	.cd-callout--angle {left: 30%; top: 79%;}
	.cd-callout--chassis {left: 2%;top: 87%;}

	.cd-callout--engine     .cd-marker { --cd-line-length: 200px; }
	.cd-callout--weight     .cd-marker { --cd-line-length: 120px; }
	.cd-callout--power      .cd-marker { --cd-line-length: 80px; }
	.cd-callout--body       .cd-marker { --cd-line-length: 70px; }
	.cd-callout--drivetrain .cd-marker { --cd-line-length: 70px; }
	.cd-callout--angle      .cd-marker { --cd-line-length: 90px; }
	.cd-callout--chassis    .cd-marker { --cd-line-length: 160px; }

	.cd-spec.is-in-view .cd-callout--engine .cd-marker::after {
		transform: rotate(80deg) scaleX(1);
	}
	.cd-spec.is-in-view .cd-callout--weight .cd-marker::after {
		transform: rotate(80deg) scaleX(1);
	}
	.cd-spec.is-in-view .cd-callout--power .cd-marker::after {
		transform: rotate(80deg) scaleX(1);
	}

	.cd-driver-id {
		flex-direction: column-reverse;
	}
	.cd-driver-id-img {
		width: 100%;
		max-width: 280px;
		margin: auto;
	}
	.cd-driver-id-txt {
		width: 100%;
		padding-top: 30px;
		margin-bottom: 50px;
		text-align: center;
	}
	.cd-driver-meta {
		gap: 15px;
		margin-top: 10px;
		flex-direction: column-reverse;
	}
	.cd-driver-flag {
		width: 85px;
	}
	.cd-driver-inner {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.cd-hero-inner {
		padding: 0 20px 10px 20px;
	}
	.cd-hero-title {
		font-size: clamp(32px, 8vw, 60px);
	}
	.cd-spec {
		padding: 50px 0 50px 0px;
	}
	.cd-spec-inner {
		padding: 0 20px;
	}
	.cd-rocks {
		padding: 40px 18px;
	}
	.cd-driver-hero {
		height: auto;
		min-height: 60vh;
	}
	.cd-driver-nav {
		padding: 0 20px 10px 20px;
	}

	.cd-driver {
		padding: 0 0 50px 0;
	}
	.cd-driver-card {
		padding: 40px 20px;
		border-radius: 20px;
	}
	.cd-fact-list > li {
		font-size: 15px;
	}
	.cd-driver-role {
		font-size: 12px;
	}

	.cd-driver-facts p {
		font-size: 16px;
	}
	.cd-driver-facts h3 {
		font-size: 16px;
		margin-top: 30px;
	}
}

/* =============================================================
   SINGLE RACE EVENT PAGE  (races/single-race/index.php)
   3 sections + a lightbox that reuses .news-lightbox styles.
   Classes are all prefixed `.sr-` so this page can't collide
   with the existing .races-* (race detail) or .news-* styles.
   ============================================================= */

/* ---------- Section 1: HERO ---------- */
.sr-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #050505;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

/* Dark gradient anchored at the bottom — fades into the image upward,
   so the bottom-left meta block always reads cleanly regardless of
   the underlying photo. */
.sr-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.55) 25%,
			rgba(0, 0, 0, 0.10) 55%,
			rgba(0, 0, 0, 0)    80%
	);
	pointer-events: none;
	z-index: 1;
}

.sr-hero-meta {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1900px;
	margin: 0 auto;
	padding: 0 50px 50px 50px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.sr-hero-track {
	width: 110px;
	height: auto;
	max-height: 70px;
	object-fit: contain;
	display: block;
	margin-bottom: 6px;
	opacity: 0.95;
}

.sr-hero-date {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 3px;
	color: var(--cyan);
	text-transform: uppercase;
	margin: 0;
}

.sr-hero-title {
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: clamp(40px, 6vw, 90px);
	line-height: 0.95;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.sr-hero-location {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.sr-hero-flag {
	width: 28px;
	height: 20px;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}

.sr-hero-place {
	font-family: var(--font-title);
	font-weight: 800;
	font-size: clamp(16px, 1.5vw, 22px);
	letter-spacing: 1.5px;
	color: #fff;
	text-transform: uppercase;
}


/* ---------- Section 2: DESCRIPTION ---------- */
.sr-desc {
	position: relative;
	width: 100%;
	background: #363535;
	color: #fff;
	padding: 140px 0;
	background-size: cover;
	background-position: center;
}

.sr-desc-inner {
	width: 100%;
	max-width: 1000px;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 80px;
}

.sr-desc-text {
	flex: 1 1 70%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Light asymmetric vertical offset for a more editorial feel */
}

.sr-desc-eyebrow {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 3px;
	color: var(--red);
	text-transform: uppercase;
	margin: 0 0 22px 0;
	/* Small horizontal accent line before the label */
	display: flex;
	align-items: center;
	gap: 14px;
}

.sr-desc-eyebrow::before {
	content: "";
	width: 40px;
	height: 2px;
	background: var(--red);
	flex: 0 0 auto;
}

.sr-desc-text h2 {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: clamp(30px, 3.8vw, 56px);
	line-height: 1.05;
	letter-spacing: 1px;
	color: #fff;
	margin: 0 0 32px 0;
}

.sr-desc-text p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 22px 0;
}

.sr-desc-text p:last-child { margin-bottom: 0; }

/* ---------- Section 3: GALLERY MARQUEE ----------
   Full-bleed slider. The track contains the unique image set twice
   in a row (the second set is appended by JS). A CSS keyframe
   translates the track from 0 to -50%, which is exactly one full
   set width, so the loop is seamless. */
.sr-gallery-box {
	background-size: cover;
	background-position: center;
	padding: 120px 0;
}
.sr-gallery {
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
	background: #050505;
}

.sr-gallery-track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 2px;
	height: 100%;
	/* Translate by -50% (one full set) over 60s. Speed is the
       wall-clock duration — increase for slower, decrease for faster.
       Linear timing keeps the motion smooth and never accelerates. */
	animation: sr-marquee 60s linear infinite;
	will-change: transform;
}

.sr-gallery-track:hover {
	/* Pause on hover so users can click an image without chasing it */
	animation-play-state: paused;
}

.sr-gallery-img {
	width: 400px;
	height: 100%;
	flex: 0 0 400px;
	object-fit: cover;
	display: block;
	cursor: pointer;
	background-color: #1b1b1b;
	transition: filter .35s ease, transform .35s ease;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

.sr-gallery-img:hover {
	filter: brightness(1.08);
}

@keyframes sr-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}


/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
	.sr-desc-text p {font-size: 18px;}
	.sr-gallery-box {
		padding: 80px 0;
	}
}

@media (max-width: 1100px) {
	.sr-desc     { padding: 120px 0; }
	.sr-desc-inner { gap: 50px; }
	.sr-gallery   { height: 480px; }
	.sr-gallery-img { width: 320px; flex: 0 0 320px; }
	.sr-hero { max-height: 700px; }
}

@media (max-width: 950px) {
	.sr-hero-meta {padding: 0 30px 50px 30px;}
}

@media (max-width: 800px) {
	.sr-hero-track { width: 90px; max-height: 56px; }

	.sr-desc-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 50px;
	}
	.sr-desc-text { padding-top: 0; }
	.sr-desc-media img { max-height: 420px; }
	.sr-desc-text  p{ font-size: 16px; }

	.sr-gallery { height: 400px; }
	.sr-gallery-img { width: 260px; flex: 0 0 260px; }
	.sr-gallery-track { animation-duration: 45s; }   /* keep speed feel similar */
}

@media (max-width: 600px) {
	.sr-hero-meta {
		padding: 0 20px 36px 20px;
	}
	.sr-gallery-box {
		padding: 50px 0;
	}
	.sr-desc {padding: 60px 0;}
	.sr-desc-eyebrow::before { width: 28px; }

	.sr-gallery { height: 320px; }
	.sr-gallery-img { width: 220px; flex: 0 0 220px; }
	.sr-gallery-track { animation-duration: 35s; }
}

/* =============================================================
   SEARCH MODAL  (triggered by header's Search button)
   - Hidden by default. Toggled open via `.is-open` from JS.
   - Smooth fade + scale entry / exit (300ms).
   - Closes on close-button click and Escape key only.
   - Body scroll lock via body.search-modal-open.
   ============================================================= */
.search-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility .3s ease;
}

.search-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.search-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
}

.search-modal-panel {
	position: relative;
	width: 100%;
	max-width: 720px;
	background: #fff;
	color: #111;
	padding: 56px 48px 48px 48px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	/* Subtle scale-up animation paired with the opacity fade. */
	transform: scale(0.96);
	transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}

.search-modal.is-open .search-modal-panel {
	transform: scale(1);
}

.search-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #111;
	cursor: pointer;
	padding: 0;
	border-radius: 4px;
	transition: background .15s ease;
}
.search-modal-close:hover {
	background: rgba(0, 0, 0, 0.06);
}
.search-modal-close svg {
	width: 22px;
	height: 22px;
}

.search-modal-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.search-modal-input {
	width: 100%;
	height: 60px;
	padding: 0 18px;
	background: #fff;
	border: 2px solid #2ee1c4;
	color: #111;
	font-family: var(--font-body);
	font-size: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	outline: none;
	transition: border-color .15s ease;
}
.search-modal-input::placeholder {
	color: #999;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}
.search-modal-input:focus {
	border-color: var(--cyan);
}

.search-modal-submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 26px;
	background: var(--red);
	border: none;
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}
.search-modal-submit:hover {
	background: var(--red-dk, #c7091d);
}
.search-modal-submit svg {
	width: 18px;
	height: 18px;
}

/* Body scroll lock while modal is open. Overrides the global
   html, body { overflow-x: hidden } rule and adds overflow-y: hidden. */
body.search-modal-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.search-modal-panel {
		padding: 50px 24px 32px 24px;
	}
	.search-modal-input {
		height: 52px;
		font-size: 14px;
	}
	.search-modal-submit {
		height: 46px;
		font-size: 13px;
		align-self: stretch;
		justify-content: center;
	}
}

/* =============================================================
   SEARCH RESULTS PAGE  (search.php)
   - .srch-hero        — big dark title section
   - .srch-query-bar   — neutral strip showing what was searched
   - .srch-results     — list of clickable result cards
   - .srch-hl          — highlighted keyword inside snippets
   - .srch-empty       — empty-state messaging
   Class prefix .srch-* chosen to avoid collision with .sr-*
   (single-race-event page).
   ============================================================= */

/* ----- Hero section ----- */
.srch-hero {
	background: var(--black);
	color: var(--white);
	/* Top padding accounts for the fixed header (~100px tall). */
	padding: 200px 0 100px 0;
}

.srch-hero .container {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.srch-eyebrow {
	font-family: var(--font-subtitle);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--red-dk);
	margin: 0;
}

.srch-title {
	font-family: var(--font-title);
	font-size: clamp(40px, 8vw, 110px);
	line-height: 0.95;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0;
	font-weight: normal;
}

/* ----- Query echo bar ----- */
.srch-query-bar {
	background: var(--gray-light);
	color: var(--black);
	padding: 28px 0;
	border-bottom: 1px solid #ddd;
}

.srch-query-bar .container {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px 24px;
}

.srch-query-line {
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	font-family: var(--font-body);
	font-size: 18px;
}

.srch-query-label {
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--gray-dark);
}

.srch-query-text {
	font-family: var(--font-subtitle);
	font-size: clamp(22px, 2.4vw, 32px);
	color: var(--black);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: bold;
}

.srch-query-count {
	margin: 0;
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--gray-dark);
}

/* ----- Results list ----- */
.srch-results {
	background: var(--black);
	color: var(--white);
	padding: 80px 0 140px 0;
	min-height: 50vh;
}

.srch-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.srch-item {
	margin: 0;
	padding: 0;
}

.srch-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 40px;
	background: #111;
	border: 1px solid #222;
	color: var(--white);
	text-decoration: none;
	transition:
			background .25s ease,
			border-color .25s ease,
			transform .25s cubic-bezier(.22,.61,.36,1);
}

.srch-card:hover {
	background: #161616;
	border-color: var(--cyan);
	transform: translateY(-2px);
}

.srch-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.srch-type {
	font-family: var(--font-subtitle);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cyan);
	padding: 8px 12px 6px 12px;
	border: 1px solid currentColor;
	border-radius: 6px;
	line-height: 1;
	margin-bottom: 10px;
}

.srch-card-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--gray-mid);
	transition: color .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}

.srch-card:hover .srch-card-arrow {
	color: var(--cyan);
	transform: translateX(6px);
}

.srch-card-arrow svg {
	width: 22px;
	height: 22px;
}

.srch-card-title {
	margin: 0;
	font-family: var(--font-subtitle);
	font-size: clamp(20px, 2.6vw, 36px);
	line-height: 1.15;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	font-weight: bold;
}

.srch-card-snippet {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--gray-mid);
	max-width: 95ch;
}

/* ----- Highlighted keyword ----- */
.srch-hl {
	background: transparent;
	color: var(--cyan);
	font-weight: 600;
	/* The <mark> default yellow background would clash with the dark
       cards; switch to a cyan accent color + bold weight instead. */
}

/* ----- Empty state ----- */
.srch-empty {
	text-align: center;
	padding: 60px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.srch-empty-text {
	margin: 0;
	font-family: var(--font-title);
	font-size: clamp(28px, 3.2vw, 44px);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.srch-empty-hint {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--gray-mid);
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
	.srch-hero {
		padding: 160px 0 70px 0;
	}
	.srch-results {
		padding: 60px 0 100px 0;
	}
	.srch-card {
		padding: 26px 24px;
	}
	.srch-query-bar .container {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	.srch-hero {
		padding: 140px 0 50px 0;
	}
	.srch-query-bar {
		padding: 22px 0;
	}
	.srch-results {
		padding: 50px 0 80px 0;
	}
	.srch-card {
		padding: 22px 20px;
		gap: 12px;
	}
	.srch-card-arrow {
		width: 30px;
		height: 30px;
	}
	.srch-card-arrow svg {
		width: 18px;
		height: 18px;
	}
	.srch-card-snippet {
		font-size: 15px;
	}
}