/* ==========================================================================
   ViaVolta In & Out Travel — shared stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
	--red: #a71c20;
	--red-bright: #ed1c24;
	--navy: #213745;
	--bg: #fdfdfd;
	--footer-bg: #171717;
	--footer-text: #a2a2a2;
	--font: 'Open Sans', Arial, sans-serif;
	--header-h: 96px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: #252525;
	line-height: 1.7;
	font-weight: 300;
}

img { max-width: 100%; display: block; }

a { color: var(--red-bright); text-decoration: none; transition: color .2s; }
a:hover { color: var(--red); }

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	color: var(--navy);
	margin: 0 0 1rem;
}

p { margin: 0 0 1.2rem; }

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.text-white { color: #fff; }

/* ---- buttons ---- */
.btn {
	display: inline-block;
	padding: 14px 34px;
	border: 1px solid var(--red);
	color: var(--red);
	background: transparent;
	font-size: .95rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background .25s, color .25s;
}
.btn:hover { background: var(--red); color: #fff; }
.btn-solid { background: var(--red); color: #fff; }
.btn-solid:hover { background: var(--navy); color: #fff; }
.btn-light { border-color: rgba(255,255,255,.8); color: #fff; }
.btn-light:hover { background: #fff; color: var(--navy); }

/* ==========================================================================
   Header
   ========================================================================== */
#site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(253, 253, 253, .98);
	box-shadow: 0 4px 8px rgba(0,0,0,.12), 0 6px 20px rgba(0,0,0,.1);
	transition: .3s;
}
#site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
}
#site-header .logo img { height: 64px; }

#site-nav { display: flex; }
#site-nav ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}
#site-nav a {
	color: var(--navy);
	font-size: 1.05rem;
	line-height: var(--header-h);
	position: relative;
	white-space: nowrap;
}
#site-nav a::before {
	content: "";
	position: absolute;
	bottom: 28px; left: 0;
	width: 0; height: 3px;
	background: var(--navy);
	transition: width .35s;
}
#site-nav a:hover, #site-nav a.active { color: var(--red); }
#site-nav a:hover::before, #site-nav a.active::before { width: 100%; background: var(--red); }
#site-nav a.active { font-weight: 700; }

#menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	width: 32px; height: 24px;
	position: relative;
	padding: 0;
}
#menu-toggle span {
	position: absolute; left: 0; right: 0; height: 2px;
	background: var(--navy); transition: .25s;
}
#menu-toggle span:nth-child(1) { top: 0; }
#menu-toggle span:nth-child(2) { top: 11px; }
#menu-toggle span:nth-child(3) { top: 22px; }

@media (max-width: 900px) {
	#site-nav { display: none; }
	#menu-toggle { display: block; }
}

/* mobile off-canvas */
#offcanvas {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: min(320px, 82vw);
	background: #fff;
	z-index: 1200;
	transform: translateX(100%);
	transition: transform .35s ease;
	box-shadow: -8px 0 24px rgba(0,0,0,.15);
	padding: 28px 28px;
	overflow-y: auto;
}
#offcanvas.open { transform: translateX(0); }
#offcanvas ul { list-style: none; margin: 40px 0 0; padding: 0; }
#offcanvas li { margin-bottom: 22px; }
#offcanvas a { color: var(--navy); font-size: 1.2rem; }
#offcanvas a:hover, #offcanvas a.active { color: var(--red); }
#offcanvas-close {
	background: none; border: none; cursor: pointer;
	width: 28px; height: 28px; position: relative;
}
#offcanvas-close span {
	position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--navy);
}
#offcanvas-close span:first-child { transform: rotate(45deg); }
#offcanvas-close span:last-child { transform: rotate(-45deg); }

#offcanvas-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.4);
	z-index: 1100; opacity: 0; pointer-events: none; transition: opacity .35s;
}
#offcanvas-overlay.open { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Hero slider (home)
   ========================================================================== */
.hero-slider {
	position: relative;
	height: 900px;
	max-height: 100vh;
	overflow: hidden;
	background: var(--navy);
}
.hero-slide {
	position: absolute; inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
	display: flex;
	align-items: center;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide .hero-media {
	position: absolute; inset: 0;
	z-index: 0;
}
.hero-slide .hero-media img,
.hero-slide .hero-media video {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
}
.hero-slide .hero-media video {
	opacity: 0;
	transition: opacity .6s ease;
}
.hero-slide .hero-media video.video-ready {
	opacity: 1;
}
.hero-slide .hero-media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(20,26,36,.55) 0%, rgba(20,26,36,.15) 55%, rgba(20,26,36,.05) 100%);
}
.hero-content {
	position: relative; z-index: 1;
	color: #fff;
	max-width: 640px;
	padding: 0 60px;
}
.hero-content .eyebrow {
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: .9rem;
	opacity: 0;
	transform: translateY(40px);
}
.hero-content h2 {
	color: #fff;
	font-size: 3.2rem;
	line-height: 1.15;
	font-weight: 200;
	text-transform: uppercase;
	margin: 8px 0 28px;
	opacity: 0;
	transform: translateY(40px);
}
.hero-content .btn {
	opacity: 0;
	transform: translateY(40px);
}
.hero-slide.active .eyebrow { animation: heroUp .8s ease .5s forwards; }
.hero-slide.active h2 { animation: heroUp .8s ease .65s forwards; }
.hero-slide.active .btn { animation: heroUp .8s ease 1s forwards; }
@keyframes heroUp {
	to { opacity: 1; transform: translateY(0); }
}

.hero-dots {
	position: absolute; bottom: 28px; left: 0; right: 0;
	z-index: 2;
	display: flex; justify-content: center; gap: 10px;
}
.hero-dots button {
	width: 10px; height: 10px; border-radius: 50%;
	border: 1px solid #fff; background: transparent;
	cursor: pointer; padding: 0;
}
.hero-dots button.active { background: #fff; }

@media (max-width: 700px) {
	.hero-slider { height: 620px; }
	.hero-content { padding: 0 28px; }
	.hero-content h2 { font-size: 2.1rem; }
}

/* ==========================================================================
   Generic page hero (image banner with heading)
   ========================================================================== */
.page-hero {
	position: relative;
	height: 460px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.page-hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,26,36,.15) 0%, rgba(20,26,36,.55) 100%);
}
.page-hero .container { position: relative; z-index: 1; padding-bottom: 48px; }
.page-hero h1 {
	color: #fff;
	font-size: 2.75rem;
	font-weight: 200;
	text-transform: uppercase;
	margin: 0;
}
@media (max-width: 700px) {
	.page-hero { height: 320px; }
	.page-hero h1 { font-size: 1.9rem; }
}

/* ==========================================================================
   Sections / scroll reveal
   ========================================================================== */
section { padding: 90px 0; }
.section-tight { padding: 60px 0; }
.bg-navy { background: var(--navy); color: #dfe4e8; }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-white-card {
	background: #fff;
	box-shadow: 0 40px 70px -35px rgba(0,0,0,.15);
	padding: 45px 50px;
}

.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ==========================================================================
   Home — featured partner (full-bleed background)
   ========================================================================== */
.kalestesia-feature {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	padding: 60px 0;
}
.kalestesia-feature::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(20,26,36,.65) 0%, rgba(20,26,36,.3) 45%, rgba(20,26,36,.08) 75%);
}
.kalestesia-feature .container { position: relative; z-index: 1; }
.kf-copy { max-width: 540px; color: #fff; }
.kf-copy h3 { color: #fff; font-size: 2.5rem; font-weight: 300; margin-bottom: 14px; }
.kf-copy p { font-size: 1.4rem; color: #fff; margin-bottom: 30px; }
@media (max-width: 700px) {
	.kalestesia-feature { min-height: 480px; }
	.kf-copy h3 { font-size: 1.9rem; }
	.kf-copy p { font-size: 1.15rem; }
}

/* ==========================================================================
   About page — cards floating over a full-bleed background photo
   ========================================================================== */
.about-feature {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: 90px 0 110px;
}
.about-copy {
	max-width: 620px;
}
.about-card {
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 30px 60px -25px rgba(0,0,0,.4);
	padding: 40px 50px;
	margin-bottom: 30px;
}
.about-title-card { padding: 30px 50px; }
.about-title-card h1 { margin: 0; }
.about-subtitle {
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .9rem;
	margin-top: 6px;
}
.about-card ul {
	padding-left: 22px;
	margin: 0;
}
.about-card li { margin-bottom: 10px; }
.about-card li:last-child { margin-bottom: 0; }
.about-lists {
	display: flex;
	gap: 24px;
}
.about-lists .about-card { flex: 1; padding: 32px 36px; margin-bottom: 0; }
.about-signoff-tag {
	display: inline-block;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 20px 40px -20px rgba(0,0,0,.35);
	color: var(--red);
	font-style: italic;
	font-size: 1.2rem;
	padding: 16px 30px;
	margin-top: 30px;
}
@media (max-width: 700px) {
	.about-feature { background-attachment: scroll; padding: 60px 0 80px; }
	.about-card { padding: 30px 28px; }
	.about-lists { flex-direction: column; gap: 20px; }
}

.logo-strip {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-strip .track {
	display: flex;
	width: max-content;
	gap: 64px;
	align-items: center;
	animation: scrollLogos 40s linear infinite;
}
.logo-strip .track img {
	height: 56px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: .6;
	transition: filter .25s, opacity .25s;
}
.logo-strip .track img:hover { filter: grayscale(0); opacity: 1; }
@keyframes scrollLogos {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   Transfers — vehicle cards
   ========================================================================== */
.vehicle-card { margin-bottom: 70px; }
.vehicle-card img { width: 100%; height: 420px; object-fit: cover; }
.vehicle-card .vc-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding-top: 36px;
}
.vehicle-card h3 { font-size: 2rem; margin-bottom: 6px; }
.vehicle-card .price { font-size: 1.3rem; color: var(--navy); }
.vehicle-card .vc-desc p { font-size: 1.05rem; }
@media (max-width: 800px) {
	.vehicle-card .vc-body { grid-template-columns: 1fr; gap: 16px; }
	.vehicle-card img { height: 280px; }
}

/* ==========================================================================
   Partners — hotel cards
   ========================================================================== */
.partner-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
	padding: 60px 0;
	border-bottom: 1px solid #ececec;
}
.partner-card:last-child { border-bottom: none; }
.partner-card:nth-child(even) .pc-image { order: 2; }
.partner-card .pc-image img { width: 100%; height: 340px; object-fit: cover; }
.partner-card .pc-name { font-size: 1.7rem; margin-bottom: 2px; }
.partner-card .pc-location {
	display: block;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .85rem;
	margin-bottom: 16px;
}
.partner-card .pc-desc p { font-size: .98rem; }
.partner-card .pc-actions { margin-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 800px) {
	.partner-card { grid-template-columns: 1fr; gap: 20px; }
	.partner-card:nth-child(even) .pc-image { order: 0; }
}

/* ==========================================================================
   School trips — form
   ========================================================================== */
.trip-form-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.trip-form { display: flex; flex-direction: column; gap: 18px; }
.trip-form input, .trip-form textarea {
	background: transparent;
	border: 1px solid rgba(255,255,255,.4);
	color: #fff;
	padding: 14px 16px;
	font-family: var(--font);
	font-size: 1rem;
	width: 100%;
}
.trip-form input::placeholder, .trip-form textarea::placeholder { color: rgba(255,255,255,.65); }
.trip-form textarea { resize: vertical; min-height: 110px; }
.trip-form label { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); margin-bottom: -10px; }
.trip-offer h3 { color: #fff; font-size: 2rem; margin-bottom: 6px; }
.trip-offer .contact-line { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 1.1rem; }
.trip-offer .contact-line a { color: #fff; }
.trip-offer .contact-line a:hover { color: var(--red-bright); }
@media (max-width: 800px) {
	.trip-form-section { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
#site-footer {
	background: var(--footer-bg);
	color: #fff;
	text-align: center;
	padding: 60px 24px 30px;
}
#site-footer img.footer-logo { height: 60px; margin: 0 auto 24px; }
#site-footer .footer-phone {
	display: inline-flex; align-items: center; gap: 10px;
	color: #fff; font-size: 1.3rem; margin-bottom: 20px;
}
#site-footer .footer-phone:hover { color: var(--red-bright); }
#site-footer .social-icons {
	display: flex; justify-content: center; gap: 22px;
	margin-bottom: 28px;
}
#site-footer .social-icons a {
	color: #fff;
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	filter: grayscale(60%);
	transition: .25s;
}
#site-footer .social-icons a:hover { filter: none; background: var(--red); }
#site-footer .footer-copyright { color: var(--footer-text); font-size: .85rem; }

/* ==========================================================================
   Scroll to top
   ========================================================================== */
#scroll-top {
	position: fixed;
	right: 24px; bottom: 24px;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.3rem;
	opacity: 0; visibility: hidden;
	transition: opacity .3s, visibility .3s;
	z-index: 900;
	border: none; cursor: pointer;
}
#scroll-top.show { opacity: 1; visibility: visible; }

/* utility */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }