:root {

    --bg-color: #000000;

    --bg-alt: #050505;

    --bg-card: #080808;

    --bg-gradient: linear-gradient(180deg, #000000 0%, #050505 100%);

    --line: #151515;

    --line-strong: #252525;

    --text-white: #ffffff;

    --text-gray: #bbbbbb;

    --text-faded: #888888;

    --text-dim: #444444;

    --accent: #ffffff;

    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    background-color: var(--bg-color);

    color: var(--text-white);

    line-height: 1.5;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';

}



a {

    text-decoration: none;

    color: inherit;

    transition: var(--transition);

}



ul {

    list-style: none;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



.container {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 40px;

}



.section-padding {

    padding: 180px 0;

}



/* --- Typography --- */

.eyebrow {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--text-faded);

    margin-bottom: 28px;

    display: inline-block;

}



h1, h2, h3 {

    font-family: 'Inter', sans-serif;

    font-weight: 400;

    letter-spacing: -0.03em;

    line-height: 1.1;

}



p {

    font-size: 16px;

    line-height: 1.7;

    color: var(--text-gray);

}



/* --- Scroll Progress Bar --- */

#scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 3px;

    background: var(--text-white);

    z-index: 2000;

    transition: width 0.1s ease-out;

}



/* --- Header --- */

header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 20px 0;

    transition: var(--transition);

}



header.scrolled {

    background: rgba(0, 0, 0, 0.75);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    padding: 14px 0;

    border-bottom: 1px solid var(--line);

}



.header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 24px;

}



.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}



.logo img {

    height: 32px;

    width: auto;

}



.nav-pill {

    display: flex;

    align-items: center;

    gap: 8px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid var(--line);

    border-radius: 999px;

    padding: 6px 8px;

    backdrop-filter: blur(10px);

}



.nav-links {

    display: flex;

    gap: 4px;

    padding: 0 12px;

}



.nav-links a {

    font-weight: 500;

    text-transform: uppercase;

    font-size: 11px;

    letter-spacing: 0.15em;

    color: var(--text-white);

    padding: 8px 14px;

    border-radius: 999px;

    position: relative;

}



.nav-links a:hover {

    background: rgba(255, 255, 255, 0.08);

}



.lang-switch {

    display: flex;

    align-items: center;

    background: rgba(255, 255, 255, 0.04);

    border-radius: 999px;

    padding: 3px;

    gap: 2px;

    margin-left: 4px;

}



.lang-switch button {

    background: transparent;

    border: none;

    color: var(--text-faded);

    font-family: inherit;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.1em;

    padding: 6px 10px;

    border-radius: 999px;

    cursor: pointer;

    transition: var(--transition);

}



.lang-switch button.active {

    background: var(--text-white);

    color: var(--bg-color);

}



.lang-switch button:hover:not(.active) {

    color: var(--text-white);

}



.header-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}



.btn-icon {

    width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid var(--line);

    color: var(--text-white);

    font-size: 14px;

    transition: var(--transition);

}



.btn-icon:hover {

    background: var(--text-white);

    color: var(--bg-color);

}



.btn-icon.wa {

    background: #25d366;

    border-color: #25d366;

    color: #fff;

}



.btn-icon.wa:hover {

    background: #1ebe5a;

    border-color: #1ebe5a;

    color: #fff;

}



.btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 0 20px;

    height: 40px;

    background: var(--text-white);

    color: var(--bg-color);

    border: 1px solid var(--text-white);

    border-radius: 999px;

    font-weight: 600;

    font-size: 11px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    cursor: pointer;

    transition: var(--transition);

}



.btn-primary:hover {

    background: transparent;

    color: var(--text-white);

}



.mobile-toggle {

    display: none;

    width: 40px;

    height: 40px;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid var(--line);

    color: var(--text-white);

    font-size: 16px;

    cursor: pointer;

}



/* --- Mobile Menu Overlay --- */

.mobile-menu {

    position: fixed;

    inset: 0;

    background: var(--bg-color);

    z-index: 999;

    display: flex;

    flex-direction: column;

    padding: 100px 32px 40px;

    transform: translateY(-100%);

    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.mobile-menu.open {

    transform: translateY(0);

}



.mobile-menu .mobile-nav {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-bottom: 40px;

}



.mobile-menu .mobile-nav a {

    font-size: 32px;

    font-weight: 500;

    letter-spacing: -0.01em;

    padding: 12px 0;

    border-bottom: 1px solid var(--line);

}



.mobile-menu .mobile-actions {

    margin-top: auto;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.mobile-menu .mobile-actions .btn-primary {

    width: 100%;

    height: 52px;

    justify-content: center;

    font-size: 12px;

}



.mobile-menu .lang-row {

    display: flex;

    justify-content: center;

    padding-top: 24px;

    border-top: 1px solid var(--line);

}



/* --- Hero Section --- */

/* Wrapper che dà "spazio di scroll" al video. .hero resta sticky

   dentro, per 100vh, mentre il video scrub-ba in base allo scroll. */

.hero-scroll-wrap {

    position: relative;

    height: 220vh; /* <-- lunghezza dello scrub: aumenta/diminuisci per rallentare/velocizzare */

    background: #000;

}



.hero {

    position: sticky;

    top: 0;

    height: 100vh;

    min-height: 720px;

    display: flex;

    align-items: center;

    padding-bottom: 0;

    overflow: hidden;

    justify-content: flex-start;

}



.hero-video-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

}



/* Loader mostrato finché il video hero non è pronto, poi svanisce. */

.hero-loader {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--bg-color);

    transition: opacity 0.6s ease;

}



.hero-loader.is-hidden {

    opacity: 0;

    pointer-events: none;

}



.hero-spinner {

    width: 44px;

    height: 44px;

    border-radius: 999px;

    border: 2px solid rgba(255, 255, 255, 0.15);

    border-top-color: var(--text-white);

    animation: hero-spin 0.9s linear infinite;

}



@keyframes hero-spin {

    to { transform: rotate(360deg); }

}



.hero::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg,

        rgba(0,0,0,0.55) 0%,

        rgba(0,0,0,0.2) 35%,

        rgba(0,0,0,0.4) 65%,

        rgba(0,0,0,0.85) 100%);

    z-index: 1;

}



/* Il container della hero deve occupare tutta la larghezza come nelle altre

   sezioni: dentro un contesto flex, senza width:100% si restringerebbe al

   contenuto e verrebbe centrato (spingendo il testo verso destra e

   disallineandolo dalle sezioni sottostanti). */

.hero .container {

    width: 100%;

}



.hero-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

    text-align: left;

}



.hero h1 {

    font-size: clamp(40px, 6.5vw, 88px);

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -0.03em;

    margin-bottom: 28px;

    opacity: 0;

    transform: translateY(40px);

    animation: heroIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;

    text-align: left;

}



.hero p {

    font-size: 16px;

    color: var(--text-gray);

    margin-bottom: 40px;

    max-width: 520px;

    line-height: 1.6;

    opacity: 0;

    transform: translateY(40px);

    animation: heroIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;

    text-align: left;

}



.hero-ctas {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    opacity: 0;

    transform: translateY(40px);

    animation: heroIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;

    justify-content: flex-start;

}



.hero-cta-secondary {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 0 20px;

    height: 44px;

    background: transparent;

    color: var(--text-white);

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 999px;

    font-weight: 500;

    font-size: 11px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    transition: var(--transition);

}



.hero-cta-secondary:hover {

    background: var(--text-white);

    color: var(--bg-color);

    border-color: var(--text-white);

}



.hero-cta-primary {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 0 24px;

    height: 44px;

    background: var(--text-white);

    color: var(--bg-color);

    border: 1px solid var(--text-white);

    border-radius: 999px;

    font-weight: 600;

    font-size: 11px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    transition: var(--transition);

}



.hero-cta-primary:hover {

    background: transparent;

    color: var(--text-white);

}



@keyframes heroIn {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Reduced motion: skip animations entirely */

@media (prefers-reduced-motion: reduce) {

    .hero h1, .hero p, .hero-ctas,

    .reveal, .manifesto .word {

        animation: none !important;

        transition: none !important;

        opacity: 1 !important;

        transform: none !important;

    }

    .manifesto .word { opacity: 0.4 !important; }

}



/* --- Manifesto / Quote strip --- */

.manifesto {

    padding: 80px 0;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    text-align: left;

}



.manifesto p {

    font-size: clamp(22px, 3vw, 36px);

    font-weight: 400;

    line-height: 1.35;

    letter-spacing: -0.01em;

    max-width: 900px;

    color: var(--text-white);

    opacity: 0.85;

}



.manifesto .word {

    display: inline-block;

    margin-right: 0.25em;

    opacity: 0.4;

    transition: opacity 0.6s ease;

}



.manifesto .word.in {

    opacity: 1;

}



/* --- Services --- */

.services {

    background: var(--bg-gradient);

}



.section-header {

    margin-bottom: 80px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 24px;

}



.section-header h2 {

    font-size: clamp(36px, 5vw, 64px);

    font-weight: 500;

    letter-spacing: -0.04em;

    line-height: 1.05;

    max-width: 800px;

}



.section-header .eyebrow-block {

    max-width: 500px;

    text-align: left;

}



.section-header .eyebrow-block p {

    color: var(--text-faded);

    font-size: 14px;

    line-height: 1.6;

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1px;

    background: var(--line);

    border: 1px solid var(--line);

}



.service-card {

    background-color: var(--bg-color);

    padding: 48px 40px;

    position: relative;

    min-height: 280px;

    display: flex;

    flex-direction: column;

}



.service-card::after {

    content: '→';

    position: absolute;

    top: 48px;

    right: 40px;

    font-size: 20px;

    color: var(--text-faded);

    opacity: 1;

    transform: translateX(0);

}



.service-num {

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.15em;

    color: var(--text-dim);

    margin-bottom: auto;

}



.service-card h3 {

    font-size: 26px;

    font-weight: 500;

    letter-spacing: -0.01em;

    margin-bottom: 12px;

    line-height: 1.15;

}



.service-card p {

    color: var(--text-faded);

    font-size: 14px;

    line-height: 1.6;

    max-width: 340px;

}



/* --- Fleet --- */

.fleet {

    background: var(--bg-gradient);

    border-top: 1px solid var(--line);

}



.fleet-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.fleet-card {

    position: relative;

    overflow: hidden;

    background: var(--bg-card);

    border-radius: 8px;

    aspect-ratio: 4 / 5;

    cursor: pointer;

    transition: var(--transition);

}



.fleet-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.6);

}



.fleet-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

}



.fleet-card:hover img {

    transform: scale(1.06);

}



.fleet-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 32px 28px;

    transition: var(--transition);

}



.fleet-overlay h3 {

    font-size: 22px;

    font-weight: 500;

    letter-spacing: -0.01em;

    margin-bottom: 6px;

}



.fleet-overlay p {

    color: var(--text-faded);

    font-size: 13px;

    margin-bottom: 16px;

    line-height: 1.5;

}



.fleet-specs {

    display: flex;

    gap: 16px;

    padding-top: 16px;

    border-top: 1px solid rgba(255,255,255,0.15);

}



.spec-item {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    color: var(--text-gray);

    letter-spacing: 0.05em;

}



.spec-item i {

    color: var(--text-white);

    font-size: 11px;

}



/* --- Quote Form --- */

.quote {

    background-color: var(--bg-alt);

    border-top: 1px solid var(--line);

}



.quote-form-container {

    max-width: 960px;

    margin: 0 auto;

    background-color: var(--bg-card);

    padding: 56px;

    border-radius: 12px;

    border: 1px solid var(--line);

}



/* Transizione del form quando viene sostituito dalla conferma */

#booking-form {

    transition: opacity 0.3s ease, transform 0.3s ease;

}



#booking-form.is-hidden {

    opacity: 0;

    transform: translateY(8px);

    pointer-events: none;

}



/* Messaggio d'errore inline (sostituisce l'alert nativo) */

.form-error {

    margin-top: 20px;

    padding: 14px 18px;

    border-radius: 10px;

    background: rgba(220, 60, 60, 0.08);

    border: 1px solid rgba(220, 60, 60, 0.35);

    color: #ff8a8a;

    font-size: 14px;

    line-height: 1.5;

}



/* Pannello di conferma inline, in tema con il sito */

.form-success {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 24px 16px;

    opacity: 0;

    transform: translateY(12px);

    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),

                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);

}



.form-success.is-visible {

    opacity: 1;

    transform: translateY(0);

}



.form-success-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    margin-bottom: 24px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid var(--line-strong);

    color: var(--text-white);

}



.form-success-icon svg {

    width: 32px;

    height: 32px;

}



.form-success h3 {

    font-size: 26px;

    font-weight: 600;

    letter-spacing: -0.01em;

    color: var(--text-white);

    margin-bottom: 12px;

}



.form-success p {

    max-width: 440px;

    color: var(--text-gray);

    font-size: 15px;

    line-height: 1.6;

    margin-bottom: 28px;

}



/* Honeypot anti-bot: nascosto agli utenti ma presente nel DOM (i bot lo

   compilano). Off-screen invece di display:none, che alcuni bot ignorano. */

.hp-field {

    position: absolute;

    left: -9999px;

    top: 0;

    width: 1px;

    height: 1px;

    overflow: hidden;

}



/* CAPTCHA Turnstile (reso solo se configurato) */

.form-turnstile {

    margin-top: 24px;

}



/* Presa visione informativa privacy (art. 13 GDPR) */

.form-consent {

    margin-top: 28px;

}



.consent-label {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;

    font-size: 14px;

    line-height: 1.5;

    color: var(--text-gray);

}



.consent-label input[type="checkbox"] {

    flex: 0 0 auto;

    width: 18px;

    height: 18px;

    margin-top: 1px;

    accent-color: var(--text-white);

    cursor: pointer;

}



.consent-label a {

    color: var(--text-white);

    text-decoration: underline !important; /* iubenda azzera la sottolineatura: la ripristiniamo */

    text-underline-offset: 2px;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

}



.form-group {

    position: relative;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    color: var(--text-faded);

    font-weight: 500;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    background-color: transparent;

    border: none;

    border-bottom: 1px solid var(--line-strong);

    padding: 12px 0;

    color: var(--text-white);

    font-family: inherit;

    font-size: 15px;

    transition: var(--transition);

    border-radius: 0;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-bottom-color: var(--text-white);

}



/* Input data: i controlli nativi ignorano il tema scuro del sito. Con

   color-scheme: dark il browser li renderizza in dark mode, così il valore

   resta chiaro su mobile e l'icona del calendario diventa visibile su desktop. */

.form-group input[type="date"] {

    color-scheme: dark;

}



.form-group input[type="date"]::-webkit-calendar-picker-indicator {

    cursor: pointer;

    opacity: 0.9;

}



.form-group select {

    appearance: none;

    -webkit-appearance: none;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 0 center;

    background-size: 14px;

    cursor: pointer;

}



.form-group select option {

    background-color: var(--bg-card);

    color: var(--text-white);

}



.full-width {

    grid-column: span 2;

}



.submit-btn {

    width: 100%;

    margin-top: 40px;

    cursor: pointer;

    border: none;

    height: 52px;

    font-size: 12px;

}



/* --- Footer --- */

footer {

    background-color: var(--bg-color);

    padding: 80px 0 32px;

    border-top: 1px solid var(--line);

}



.footer-top {

    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr 1fr;

    gap: 60px;

    margin-bottom: 80px;

}



.footer-brand .footer-logo {

    margin-bottom: 24px;

}



.footer-brand .footer-logo img {

    height: 28px;

}



.footer-brand p {

    color: var(--text-faded);

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 24px;

    max-width: 320px;

}



.social-links {

    display: flex;

    gap: 8px;

}



.social-links a {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    border: 1px solid var(--line-strong);

    color: var(--text-faded);

    font-size: 13px;

    transition: var(--transition);

}



.social-links a:hover {

    background: var(--text-white);

    color: var(--bg-color);

    border-color: var(--text-white);

}



.footer-col h4 {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    margin-bottom: 24px;

    color: var(--text-white);

}



.footer-col ul li {

    margin-bottom: 12px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: var(--text-faded);

    font-size: 13px;

}



.footer-col ul li i {

    color: var(--text-faded);

    margin-top: 3px;

    font-size: 11px;

    width: 14px;

}



.footer-col ul a {

    color: var(--text-faded);

}



.footer-col ul a:hover {

    color: var(--text-white);

}



.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 32px;

    border-top: 1px solid var(--line);

    color: var(--text-dim);

    font-size: 12px;

    flex-wrap: wrap;

    gap: 16px;

}



.footer-bottom a {

    color: var(--text-dim);

    margin-left: 16px;

}



.footer-bottom a:hover {

    color: var(--text-white);

}



/* --- Floating WhatsApp --- */

/* Alzato a 88px su tutti i dispositivi (desktop, tablet, mobile) per non

   sovrapporsi al badge iubenda in basso a destra. */

.whatsapp-float {

    position: fixed;

    bottom: 88px;

    right: 24px;

    background-color: #25d366;

    color: white;

    width: 52px;

    height: 52px;

    border-radius: 999px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    z-index: 998;

    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);

    transition: var(--transition);

}



.whatsapp-float:hover {

    transform: scale(1.05);

}



/* --- Reveal --- */

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);

}



.reveal.active {

    opacity: 1;

    transform: translateY(0);

}



/* --- Responsive --- */

@media (max-width: 1024px) {

    .nav-pill { display: none; }

    .mobile-toggle { display: flex; }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }

    .services-grid { grid-template-columns: 1fr; }

    .fleet-grid { grid-template-columns: 1fr 1fr; }

    .section-header { flex-direction: column; align-items: flex-start; }

    .section-header .eyebrow-block { text-align: left; }



    /* Enlarge mobile logo */

    .logo img { height: 40px; }



    /* Enlarge mobile menu items */

    .mobile-menu .mobile-nav a { font-size: 40px; padding: 20px 0; }

}



@media (max-width: 640px) {

    .container { padding: 0 20px; }

    .section-padding { padding: 100px 0; }

    .hero { min-height: 100vh; padding-bottom: 80px; }

    .hero-scroll-wrap { height: 180vh; }

    .form-grid { grid-template-columns: 1fr; }

    .full-width { grid-column: auto; }

    .quote-form-container { padding: 32px 24px; }

    .footer-top { grid-template-columns: 1fr; gap: 40px; }



    /* Fleet Mobile Carousel */

    .fleet-grid {

        grid-template-columns: none;

        grid-auto-flow: column;

        grid-auto-columns: 85%;

        overflow-x: auto;

        gap: 16px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        -ms-overflow-style: none;

        padding-bottom: 20px;

        padding-left: 20px;

    }

    .fleet-grid::-webkit-scrollbar { display: none; }

    .fleet-card { scroll-snap-align: start; }



    .service-card { padding: 36px 28px; min-height: 220px; }

    .service-card::after { display: none; }

    .footer-bottom { flex-direction: column; align-items: flex-start; }

    .footer-bottom a { margin-left: 0; margin-right: 16px; }



    /* Hero text alignment to side */

    .hero-content { text-align: left; padding-left: 0; }

}