:root {
--vp-red:#C10007;
--vp-red-hover:#A00006;
--vp-gray-dark:#2B2B31;
--vp-gray-secondary:#4B5563;
--vp-bg-main:#FFFFFF;
--vp-bg-alt:#F9FAFB;
--vp-border-light:#E5E7EB;
--shadow-sm:0 1px 3px rgba(0,0,0,0.05);
--shadow-md:0 4px 10px rgba(0,0,0,0.08);
--shadow-hover:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
--radius-sm:6px;
--radius-md:12px;
--radius-lg:24px;
--transition-fast:all 0.2s ease;
--transition-smooth:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html {
scroll-behavior:smooth;
}
@media (min-width:992px) {
html {
zoom:0.8;
}
}
body {
font-family:'Inter',system-ui,sans-serif;
color:var(--vp-gray-secondary);
background-color:var(--vp-bg-main);
line-height:1.7;
font-size:16px;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
font-family:'Outfit',sans-serif;
color:var(--vp-gray-dark);
font-weight:700;
line-height:1.2;
letter-spacing:-0.5px;
}
a {
color:var(--vp-gray-dark);
text-decoration:none;
transition:var(--transition-fast);
}
img {
max-width:100%;
height:auto;
display:block;
border-radius:var(--radius-sm);
}
ul {
list-style:none;
}
.container {
width:95%;
max-width:1920px;
margin:0 auto;
}
.text-red {
color:var(--vp-red);
}
.text-dark {
color:var(--vp-gray-dark);
}
.text-muted {
color:var(--vp-gray-secondary);
}
.bg-alt {
background-color:var(--vp-bg-alt);
}
.text-center {
text-align:center;
}
.mt-4 {
margin-top:2rem;
}
.mb-2 {
margin-bottom:1rem;
}
.mb-4 {
margin-bottom:2rem;
}
.w-100 {
width:100%;
}
.pr-30 {
padding-right:30px;
}
.fw-600 {
font-weight:600;
}
.text-underline {
text-decoration:underline;
}
.d-flex {
display:flex;
}
.align-center {
align-items:center;
}
.social-icons-top {
display:flex;
gap:10px;
margin-left:10px;
}
.skip-link {
position:absolute;
left:-9999px;
top:12px;
z-index:10000;
padding:12px 20px;
background:var(--vp-red);
color:#fff !important;
font-weight:600;
border-radius:var(--radius-sm);
font-family:'Inter',sans-serif;
box-shadow:var(--shadow-md);
}
.skip-link:focus {
left:12px;
outline:2px solid #fff;
outline-offset:2px;
}
.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:14px 32px;
font-family:'Outfit',sans-serif;
font-weight:600;
font-size:1.05rem;
border-radius:var(--radius-sm);
transition:var(--transition-smooth);
cursor:pointer;
border:none;
}
.btn-primary {
background-color:var(--vp-red);
color:#FFFFFF !important;
box-shadow:0 4px 14px rgba(193,0,7,0.3);
}
.btn-primary:hover {
background-color:var(--vp-red-hover);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(193,0,7,0.4);
}
.btn-outline {
background-color:transparent;
color:var(--vp-gray-dark) !important;
border:2px solid var(--vp-border-light);
}
.btn-outline:hover {
border-color:var(--vp-gray-dark);
transform:translateY(-2px);
}
.btn-outline-light {
border-color:#FFFFFF;
color:#FFFFFF !important;
}
.top-bar {
background-color:var(--vp-gray-dark);
color:#FFFFFF;
padding:10px 0;
font-size:0.85rem;
}
.top-bar-container {
display:flex;
justify-content:space-between;
align-items:center;
}
.top-bar-left,.top-bar-right {
display:flex;
gap:24px;
align-items:center;
font-weight:500;
letter-spacing:0.3px;
}
.top-bar a {
color:rgba(255,255,255,0.7);
display:flex;
align-items:center;
gap:8px;
transition:var(--transition-fast);
}
.top-bar a:hover {
color:#FFFFFF;
text-decoration:none;
transform:translateY(-1px);
}
header {
background-color:rgba(255,255,255,0.95);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
box-shadow:0 4px 20px rgba(0,0,0,0.04);
position:sticky;
top:0;
z-index:1000;
padding:16px 0;
border-bottom:1px solid rgba(0,0,0,0.03);
transition:var(--transition-smooth);
}
header.scrolled {
background-color:rgba(255,255,255,0.98);
box-shadow:0 4px 30px rgba(0,0,0,0.08);
padding:10px 0;
border-bottom:3px solid var(--vp-red);
}
header.scrolled .logo img {
height:50px;
}
.nav-container {
display:flex;
justify-content:space-between;
align-items:center;
}
.logo img {
height:65px;
width:auto;
border-radius:0;
transition:var(--transition-smooth);
}
.logo:hover img {
transform:scale(1.02);
}
.nav-links {
display:flex;
gap:38px;
align-items:center;
}
.nav-links > li {
position:relative;
padding:18px 0;
}
.nav-links > li > a {
font-family:'Outfit',sans-serif;
font-size:1.05rem;
font-weight:600;
color:var(--vp-gray-dark);
display:flex;
align-items:center;
gap:6px;
letter-spacing:-0.2px;
position:relative;
transition:color 0.3s;
}
.nav-links > li > a::after {
content:'';
position:absolute;
bottom:-5px;
left:0;
width:0;
height:3px;
background-color:var(--vp-red);
border-radius:2px;
transition:width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-links > li:hover > a::after,.nav-links > li > a.active::after {
width:100%;
}
.nav-links > li:hover > a,.nav-links > li > a.active {
color:var(--vp-red);
}
.nav-links .ph-caret-down {
transition:transform 0.3s ease;
font-size:0.9rem;
}
.nav-links li:hover .ph-caret-down {
transform:rotate(180deg);
color:var(--vp-red);
}
.dropdown-menu {
position:absolute;
top:calc(100%);
left:50%;
transform:translateX(-50%) translateY(15px);
min-width:260px;
background:#FFFFFF;
box-shadow:0 12px 40px rgba(0,0,0,0.1);
border-radius:var(--radius-md);
opacity:0;
visibility:hidden;
transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
z-index:100;
padding:12px 0;
border:1px solid rgba(0,0,0,0.04);
}
.dropdown-menu::before {
content:'';
position:absolute;
top:-6px;
left:50%;
margin-left:-6px;
width:12px;
height:12px;
background:#FFFFFF;
transform:rotate(45deg);
border-top:1px solid rgba(0,0,0,0.04);
border-left:1px solid rgba(0,0,0,0.04);
}
.nav-links li:hover .dropdown-menu {
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
.dropdown-menu li {
padding:4px 16px;
border:none;
}
.dropdown-menu li a {
padding:10px 18px;
font-family:'Inter',sans-serif;
font-weight:500;
font-size:0.95rem;
border-radius:var(--radius-sm);
color:var(--vp-gray-secondary);
transition:var(--transition-fast);
display:block;
}
.dropdown-menu li a:hover {
background-color:rgba(193,0,7,0.05);
color:var(--vp-red);
transform:translateX(4px);
}
.mobile-menu-btn {
display:none;
font-size:1.8rem;
border:none;
background:transparent;
cursor:pointer;
color:var(--vp-gray-dark);
transition:color 0.2s;
}
.mobile-menu-btn:hover {
color:var(--vp-red);
}
.ticker-wrap {
background-color:var(--vp-gray-dark);
color:#FFFFFF;
padding:6px 0;
overflow:hidden;
white-space:nowrap;
border-bottom:2px solid var(--vp-red);
}
.ticker-move {
display:flex;
white-space:nowrap;
animation:ticker 40s linear infinite;
}
.ticker-move:hover {
animation-play-state:paused;
}
.ticker-item {
display:inline-block;
margin-right:50px;
font-size:0.85rem;
font-weight:600;
font-family:'Inter',sans-serif;
letter-spacing:0.5px;
}
.ticker-item--placeholder {
color:rgba(255,255,255,0.38);
font-style:italic;
font-weight:500;
}
.trend-up {
color:#10B981;
margin-left:8px;
font-weight:700;
}
.trend-down {
color:#EF4444;
margin-left:8px;
font-weight:700;
}
@keyframes ticker {
0% {
transform:translate3d(0,0,0);
}
100% {
transform:translate3d(-50%,0,0);
}
}
.hero {
position:relative;
padding:100px 0 200px;
background-color:#111114;
display:flex;
align-items:center;
overflow:hidden;
}
.hero::before {
content:'';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:radial-gradient(circle at center,transparent 0%,rgba(17,17,20,0.85) 100%);
z-index:3;
}
.hero-bg {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
background:#0f0f12;
}
.hero-slideshow {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.hero-slideshow .slide {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
opacity:0;
animation:heroFade 24s infinite linear;
}
.hero-slideshow .slide:nth-child(1) {
animation-delay:0s;
}
.hero-slideshow .slide:nth-child(2) {
animation-delay:6s;
}
.hero-slideshow .slide:nth-child(3) {
animation-delay:12s;
}
.hero-slideshow .slide:nth-child(4) {
animation-delay:18s;
}
@keyframes heroFade {
0% {
opacity:0;
transform:scale(1.05);
}
10% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
transform:scale(1);
}
100% {
opacity:0;
transform:scale(1);
}
}
.hero-overlay-dark {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(90deg,rgba(16,16,20,0.85) 0%,rgba(16,16,20,0.3) 100%);
z-index:2;
}
.hero-video {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
opacity:0.6;
}
.hero-content {
position:relative;
z-index:10;
max-width:900px;
}
.hero-content h1 {
color:#FFFFFF;
font-size:clamp(3.5rem,6vw,5.5rem);
margin-bottom:24px;
line-height:1.1;
letter-spacing:-1.5px;
}
.hero-content p {
font-size:1.35rem;
margin-bottom:40px;
color:rgba(255,255,255,0.85);
line-height:1.6;
}
.hero-actions {
display:flex;
gap:20px;
}
.fuel-prices-widget {
position:relative;
margin-top:-80px;
z-index:10;
background:rgba(18,18,22,0.98);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-radius:var(--radius-md);
padding:40px;
border:1px solid rgba(255,255,255,0.14);
border-bottom:2px solid var(--vp-red);
box-shadow:
    0 24px 48px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    /* soft red glow — strongest under the card, corners pick up a hint */
    0 8px 22px rgba(193,0,7,0.32),
    0 16px 40px rgba(193,0,7,0.2),
    0 28px 56px -8px rgba(255,45,45,0.14);
}
.prices-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
align-items:center;
}
.price-item {
border-right:1px solid rgba(255,255,255,0.1);
padding-right:20px;
}
.price-item:last-child {
border-right:none;
padding-right:0;
}
.price-item h4 {
font-size:1rem;
color:rgba(255,255,255,0.6);
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:8px;
font-family:'Inter',sans-serif;
}
.price-item .price {
font-size:2.4rem;
font-family:'Outfit',sans-serif;
color:#FFFFFF;
font-weight:800;
}
/* --- PRICE WIDGET V2 (PIXEL PERFECT RESTORATION) --- */
.price-widget-v2 {
    background: #111114;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5);
    border-bottom: 4px solid var(--vp-red);
    position: relative;
    z-index: 20;
    max-width: 1300px;
    margin: -100px auto 0;
}
.prices-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 20px;
}
.prices-header-v2 h3 {
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    font-weight: 700;
}
.prices-updated-v2 {
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    font-weight: 600;
}
.prices-updated-v2 span {
    color: var(--vp-red);
}
.prices-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 40px;
}
.price-col-v2 {
    border-right: 1px solid rgba(255,255,255,0.08);
    position: relative;
}
.price-col-v2:nth-child(3) { border-right: none; }
.price-label-v2 {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 15px;
}
.price-value-v2 {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.price-unit-v2 {
    font-size: 1rem;
    color: var(--vp-red);
    font-weight: 800;
}
.price-actions-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.btn-price-primary {
    background: var(--vp-red);
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.btn-price-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

/* --- WHO WE ARE V2 --- */
.who-we-are-v2 {
    padding: 120px 0;
}
.who-content-v2 {
    max-width: 650px;
}
.who-badge-v2 {
    display: inline-block;
    background: rgba(193,0,7,0.08);
    color: var(--vp-red);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 25px;
}
.who-list-v2 {
    margin-top: 40px;
    display: grid;
    gap: 20px;
}
.who-item-v2 {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    transition: var(--transition-smooth);
}
.who-item-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: var(--vp-red-hover);
}
.who-item-icon-v2 {
    width: 60px;
    height: 60px;
    background: rgba(193,0,7,0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--vp-red);
}
.who-item-v2 h4 { font-size: 1.1rem; margin-bottom: 5px; }
.who-item-v2 p { font-size: 0.9rem; color: var(--vp-gray-secondary); }

/* --- JOURNEY TIMELINE V2 --- */
.journey-v2 {
    background: #fff;
    padding: 50px;
    border-radius: 30px;
    border: 1px solid #eee;
    box-shadow: 0 20px 50px rgba(0,0,0,0.03);
}
.journey-v2 h3 { font-size: 2.2rem; margin-bottom: 10px; }
.timeline-v2 {
    position: relative;
    padding-left: 30px;
    margin-top: 40px;
}
.timeline-line-v2 {
    position: absolute;
    left: 4px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: #f0f0f0;
}
.timeline-item-v2 {
    position: relative;
    margin-bottom: 40px;
}
.timeline-dot-v2 {
    position: absolute;
    left: -32px;
    top: 6px;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid var(--vp-red);
    border-radius: 50%;
}
.timeline-item-v2.active .timeline-dot-v2 {
    background: var(--vp-red);
}
.timeline-year-v2 {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}
.timeline-year-v2 span:first-child {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--vp-gray-dark);
}
.timeline-tag-v2 {
    font-size: 10px;
    font-weight: 800;
    background: var(--vp-gray-dark);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}
.timeline-content-v2 { font-size: 0.95rem; color: var(--vp-gray-secondary); line-height: 1.6; }

/* --- CERTIFICATION STRIPE V2 --- */
.cert-stripe-v2 {
    background: #252529;
    padding: 45px 0;
    border-top: 4px solid var(--vp-red);
}
.cert-grid-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}
.cert-item-v2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cert-item-v2 span:first-child {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}
.cert-item-v2 span:last-child {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cert-label-v2 {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-right: 1px solid rgba(255,255,255,0.1);
    padding-right: 40px;
}

/* --- NEWSLETTER CARD --- */
.newsletter-card-v2 {
    background: #fff;
    border-radius: 30px;
    padding: 60px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.03);
    border: 1px solid #f5f5f5;
    margin-bottom: -100px;
    position: relative;
    z-index: 20;
}
.newsletter-card-v2 h3 { font-size: 2.2rem; margin-bottom: 10px; font-weight: 800; }
.newsletter-card-v2 p { color: var(--vp-gray-secondary); margin-bottom: 30px; }
.newsletter-input-group-v2 {
    display: flex;
    gap: 15px;
    max-width: 550px;
    margin: 0 auto;
}
.newsletter-input-v2 {
    flex: 1;
    padding: 16px 24px;
    border: 1px solid #eee;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}
.newsletter-btn-v2 {
    background: var(--vp-red);
    color: #fff;
    padding: 16px 40px;
    border-radius: 8px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.newsletter-btn-v2:hover { background: var(--vp-red-hover); transform: translateY(-2px); }
    background: #111114;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5);
    border-bottom: 4px solid var(--vp-red);
    position: relative;
    z-index: 20;
    max-width: 1300px;
    margin: -100px auto 0;
}
.prices-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 20px;
}
.prices-header-v2 h3 {
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    font-weight: 700;
}
.prices-updated-v2 {
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    font-weight: 600;
}
.prices-updated-v2 span {
    color: var(--vp-red);
}
.prices-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 40px;
}
.price-col-v2 {
    border-right: 1px solid rgba(255,255,255,0.08);
    position: relative;
}
.price-col-v2:nth-child(3) { border-right: none; }
.price-label-v2 {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 15px;
}
.price-value-v2 {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.price-unit-v2 {
    font-size: 1rem;
    color: var(--vp-red);
    font-weight: 800;
}
.price-actions-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.btn-price-primary {
    background: var(--vp-red);
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.btn-price-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

/* --- WHO WE ARE V2 --- */
.who-we-are-v2 {
    padding: 120px 0;
}
.who-content-v2 {
    max-width: 650px;
}
.who-badge-v2 {
    display: inline-block;
    background: rgba(193,0,7,0.08);
    color: var(--vp-red);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 25px;
}
.who-list-v2 {
    margin-top: 40px;
    display: grid;
    gap: 20px;
}
.who-item-v2 {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    transition: var(--transition-smooth);
}
.who-item-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: var(--vp-red-hover);
}
.who-item-icon-v2 {
    width: 60px;
    height: 60px;
    background: rgba(193,0,7,0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--vp-red);
}
.who-item-v2 h4 { font-size: 1.1rem; margin-bottom: 5px; }
.who-item-v2 p { font-size: 0.9rem; color: var(--vp-gray-secondary); }

/* --- JOURNEY TIMELINE V2 --- */
.journey-v2 {
    background: #fff;
    padding: 50px;
    border-radius: 30px;
    border: 1px solid #eee;
    box-shadow: 0 20px 50px rgba(0,0,0,0.03);
}
.journey-v2 h3 { font-size: 2.2rem; margin-bottom: 10px; }
.timeline-v2 {
    position: relative;
    padding-left: 30px;
    margin-top: 40px;
}
.timeline-line-v2 {
    position: absolute;
    left: 4px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: #f0f0f0;
}
.timeline-item-v2 {
    position: relative;
    margin-bottom: 40px;
}
.timeline-dot-v2 {
    position: absolute;
    left: -32px;
    top: 6px;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid var(--vp-red);
    border-radius: 50%;
}
.timeline-item-v2.active .timeline-dot-v2 {
    background: var(--vp-red);
}
.timeline-year-v2 {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}
.timeline-year-v2 span:first-child {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--vp-gray-dark);
}
.timeline-tag-v2 {
    font-size: 10px;
    font-weight: 800;
    background: var(--vp-gray-dark);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}
.timeline-content-v2 { font-size: 0.95rem; color: var(--vp-gray-secondary); line-height: 1.6; }

/* --- CERTIFICATION STRIPE V2 --- */
.cert-stripe-v2 {
    background: #252529;
    padding: 45px 0;
    border-top: 4px solid var(--vp-red);
}
.cert-grid-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}
.cert-item-v2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cert-item-v2 span:first-child {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}
.cert-item-v2 span:last-child {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cert-label-v2 {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-right: 1px solid rgba(255,255,255,0.1);
    padding-right: 40px;
}

/* --- NEWSLETTER CARD --- */
.newsletter-card-v2 {
    background: #fff;
    border-radius: 30px;
    padding: 60px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.03);
    border: 1px solid #f5f5f5;
    margin-bottom: -100px;
    position: relative;
    z-index: 20;
}
.newsletter-card-v2 h3 { font-size: 2.2rem; margin-bottom: 10px; font-weight: 800; }
.newsletter-card-v2 p { color: var(--vp-gray-secondary); margin-bottom: 30px; }
.newsletter-input-group-v2 {
    display: flex;
    gap: 15px;
    max-width: 550px;
    margin: 0 auto;
}
.newsletter-input-v2 {
    flex: 1;
    padding: 16px 24px;
    border: 1px solid #eee;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}
.newsletter-btn-v2 {
    background: var(--vp-red);
    color: #fff;
    padding: 16px 40px;
    border-radius: 8px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.newsletter-btn-v2:hover { background: var(--vp-red-hover); transform: translateY(-2px); }
.price-item .unit {
font-size:0.9rem;
color:var(--vp-red);
font-weight:700;
}
.fuel-prices-widget .prices-header {
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:35px;
}
.fuel-prices-widget .prices-title {
color:#fff;
font-family:'Inter',sans-serif;
margin:0;
font-size:1.35rem;
font-weight:800;
letter-spacing:0.5px;
}
.fuel-prices-widget .prices-updated {
color:rgba(255,255,255,0.4);
font-size:0.85rem;
margin:0;
font-weight:600;
}
.fuel-prices-widget #price-date {
color:var(--vp-red);
}
.fuel-prices-widget .price-label {
font-size:0.65rem;
color:rgba(255,255,255,0.3);
text-transform:uppercase;
letter-spacing:1.5px;
margin-bottom:12px;
font-family:'Inter',sans-serif;
font-weight:800;
}
.fuel-prices-widget .price-figure {
display:flex;
align-items:baseline;
gap:2px;
font-size:3.2rem;
font-family:'Inter',system-ui,sans-serif;
color:#fff;
font-weight:900;
line-height:1;
letter-spacing:-1px;
}
.fuel-prices-widget .price-col {
border-right:1px solid rgba(255,255,255,0.06);
padding-right:30px;
}
.fuel-prices-widget .price-actions {
display:flex;
flex-direction:column;
gap:10px;
justify-content:center;
}
.fuel-prices-widget .btn-pdf {
padding:12px;
margin:0;
font-size:0.8rem;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
border-radius:4px;
justify-content:center;
background-color:#d10000;
box-shadow:none;
}
.fuel-prices-widget .btn-price-history {
padding:10px;
margin:0;
font-size:0.75rem;
border:1px solid rgba(255,255,255,0.1);
color:rgba(255,255,255,0.9) !important;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
border-radius:4px;
background:transparent;
display:flex;
justify-content:center;
gap:8px;
align-items:center;
box-shadow:none;
}
.journey-panel {
background:#fff;
padding:36px;
border-radius:var(--radius-lg);
box-shadow:0 10px 40px rgba(0,0,0,0.06);
border:1px solid var(--vp-border-light);
position:relative;
overflow:hidden;
}
.journey-panel-glow {
position:absolute;
top:0;
right:0;
width:250px;
height:250px;
background:radial-gradient(circle,rgba(193,0,7,0.03) 0%,transparent 70%);
border-radius:50%;
transform:translate(30%,-30%);
}
.journey-panel h3 {
font-size:1.9rem;
margin-bottom:8px;
position:relative;
}
.journey-intro {
color:var(--vp-gray-secondary);
line-height:1.65;
margin-bottom:18px;
max-width:100%;
font-size:0.95rem;
}
.journey-timeline {
position:relative;
padding-left:35px;
}
.journey-timeline-line {
position:absolute;
left:0;
top:10px;
bottom:10px;
width:2px;
background:linear-gradient(to bottom,var(--vp-border-light) 0%,var(--vp-border-light) 80%,transparent 100%);
}
.journey-milestone {
position:relative;
margin-bottom:14px;
transition:transform 0.3s ease,box-shadow 0.3s ease,background-color 0.3s ease;
padding:12px 12px 10px 4px;
border-radius:14px;
border:1px solid transparent;
}
.journey-milestone:last-child {
margin-bottom:0;
}
.journey-milestone:hover {
transform:translateX(8px);
background-color:rgba(193,0,7,0.03);
border-color:rgba(193,0,7,0.18);
}
.journey-dot {
position:absolute;
left:-42px;
top:6px;
width:16px;
height:16px;
border-radius:50%;
background:var(--vp-bg-main);
border:3px solid var(--vp-red);
box-shadow:0 0 0 5px rgba(193,0,7,0.08);
}
.journey-dot--active {
background:var(--vp-red);
border-color:var(--vp-red);
box-shadow:0 0 0 5px rgba(193,0,7,0.15);
}
.journey-year {
font-size:1.3rem;
font-weight:800;
font-family:'Outfit',sans-serif;
line-height:1;
display:flex;
align-items:center;
gap:12px;
color:var(--vp-gray-dark);
}
.journey-year--accent {
color:var(--vp-red);
}
.journey-badge {
font-size:0.65rem;
font-weight:700;
color:#fff;
background-color:var(--vp-gray-dark);
padding:4px 10px;
border-radius:50px;
letter-spacing:1px;
font-family:'Inter',sans-serif;
}
.journey-badge--soft {
color:var(--vp-red);
background-color:rgba(193,0,7,0.1);
}
.journey-copy {
font-size:0.9rem;
color:var(--vp-gray-secondary);
margin:12px 0 0;
line-height:1.7;
}
.journey-meta {
margin-top:10px;
display:inline-flex;
align-items:center;
gap:8px;
font-size:0.68rem;
font-weight:700;
letter-spacing:0.4px;
text-transform:uppercase;
color:#6b7280;
background:#f9fafb;
border:1px solid var(--vp-border-light);
border-radius:999px;
padding:5px 9px;
}
.newsletter-block {
margin-top:80px;
padding:50px;
background:var(--vp-bg-alt);
border-radius:var(--radius-lg);
text-align:center;
border:1px solid var(--vp-border-light);
}
.newsletter-block h3 {
font-size:2rem;
margin-bottom:15px;
}
.newsletter-block .newsletter-intro {
color:var(--vp-gray-secondary);
margin-bottom:25px;
}
.newsletter-block form {
display:flex;
max-width:500px;
margin:0 auto;
gap:10px;
flex-wrap:wrap;
justify-content:center;
}
.newsletter-block .newsletter-email {
flex:1;
min-width:200px;
padding:12px 20px;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-sm);
font-family:'Inter',sans-serif;
}
.newsletter-block .btn-subscribe {
padding:12px 30px;
font-weight:600;
}
.newsletter-block #newsletter-status {
margin-top:16px;
font-size:0.95rem;
color:var(--vp-gray-secondary);
}
.fleet-cta-row {
display:flex;
gap:13px;
flex-wrap:wrap;
}
section {
padding:140px 0;
}
.section-header {
margin-bottom:60px;
text-align:center;
}
.section-tag {
display:inline-block;
padding:6px 16px;
border-radius:50px;
background-color:rgba(193,0,7,0.1);
color:var(--vp-red);
font-weight:600;
font-size:0.9rem;
margin-bottom:20px;
}
.section-tag.light {
background-color:rgba(255,255,255,0.1);
color:#FFFFFF;
border:1px solid rgba(255,255,255,0.2);
}
.section-header h2 {
font-size:2.8rem;
margin-bottom:20px;
}
.section-header p {
color:var(--vp-gray-secondary);
max-width:700px;
margin:0 auto;
font-size:1.1rem;
}
.usps-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}
.usp-card {
display:flex;
gap:20px;
align-items:flex-start;
background:var(--vp-bg-main);
padding:35px;
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
border:1px solid var(--vp-border-light);
transition:var(--transition-smooth);
}
.usp-card:hover {
transform:translateY(-8px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.3);
}
.usp-icon {
width:70px;
height:70px;
border-radius:var(--radius-sm);
background:linear-gradient(135deg,rgba(193,0,7,0.1),rgba(193,0,7,0.05));
color:var(--vp-red);
display:flex;
align-items:center;
justify-content:center;
font-size:2.2rem;
flex-shrink:0;
}
.usp-content h3 {
font-size:1.4rem;
margin-bottom:12px;
}
.usp-content p {
font-size:1rem;
color:var(--vp-gray-secondary);
line-height:1.7;
}
.services-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}
.service-card {
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.28);
border-radius:var(--radius-lg);
overflow:hidden;
transition:var(--transition-smooth);
display:flex;
flex-direction:column;
box-shadow:var(--shadow-sm);
}
.service-card:hover {
transform:translateY(-10px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.55);
}
.service-img {
width:100%;
height:260px;
background-color:var(--vp-bg-alt);
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.service-img img {
width:100%;
height:100%;
object-fit:contain;
transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
padding:10px;
}
.service-card:hover .service-img img {
transform:scale(1.04);
}
.service-content {
padding:35px;
flex-grow:1;
display:flex;
flex-direction:column;
}
.service-content h3 {
font-size:1.5rem;
margin-bottom:15px;
color:var(--vp-gray-dark);
}
.service-content p {
margin-bottom:25px;
flex-grow:1;
color:var(--vp-gray-secondary);
line-height:1.6;
}
.service-content a {
color:var(--vp-red);
font-weight:700;
display:inline-flex;
align-items:center;
gap:8px;
font-family:'Outfit',sans-serif;
transition:var(--transition-fast);
}
.service-content a:hover {
gap:15px;
color:var(--vp-red);
text-decoration:none;
}
.split-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:140px;
align-items:center;
}
.split-grid.reverse .content-block {
order:2;
}
.split-grid.reverse .image-block {
order:1;
}
.about-highlight {
background:linear-gradient(180deg,#ffffff 0%,#fcfcfd 100%);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:36px;
box-shadow:var(--shadow-sm);
}
.about-title {
font-size:clamp(1.9rem,3.2vw,2.4rem);
margin-bottom:12px;
color:var(--vp-gray-dark);
}
.about-lead {
font-size:1rem;
line-height:1.75;
margin-bottom:16px;
color:#374151;
}
.about-copy {
font-size:1rem;
line-height:1.85;
margin-bottom:26px;
color:var(--vp-gray-secondary);
}
.about-focus-strip {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:16px;
}
.about-focus-item {
display:inline-flex;
align-items:center;
gap:8px;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.4px;
text-transform:uppercase;
color:#374151;
border:1px solid var(--vp-border-light);
background:#fff;
border-radius:999px;
padding:7px 10px;
}
.about-focus-item i {
color:var(--vp-red);
font-size:0.9rem;
}
.about-pillars {
display:none;
}
.about-pillar {
display:flex;
gap:14px;
align-items:flex-start;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-sm);
padding:14px 16px;
background:#fff;
}
.about-pillar i {
width:38px;
height:38px;
min-width:38px;
border-radius:10px;
color:var(--vp-red);
background:rgba(193,0,7,0.1);
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
}
.about-pillar h3 {
font-size:1.05rem;
margin-bottom:4px;
}
.about-pillar p {
margin:0;
color:var(--vp-gray-secondary);
font-size:0.93rem;
line-height:1.6;
}
.about-metrics {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-bottom:18px;
}
.about-metric {
border:1px solid var(--vp-border-light);
background:var(--vp-bg-alt);
border-radius:var(--radius-sm);
padding:14px 12px;
text-align:center;
}
.about-metric strong {
display:block;
color:var(--vp-red);
font-family:'Outfit',sans-serif;
letter-spacing:-0.4px;
font-size:1.15rem;
margin-bottom:2px;
}
.about-metric span {
color:var(--vp-gray-secondary);
font-size:0.74rem;
font-weight:600;
}
.image-block {
background-color:var(--vp-bg-alt);
height:650px;
border-radius:var(--radius-lg);
position:relative;
overflow:hidden;
box-shadow:var(--shadow-sm);
display:flex;
align-items:center;
justify-content:center;
}
.image-block img {
width:100%;
height:100%;
object-fit:cover;
}
.image-block i.placeholder-icon {
font-size:8rem;
color:var(--vp-border-light);
}
.feature-list li {
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
font-weight:600;
color:var(--vp-gray-dark);
font-size:0.95rem;
}
.feature-list li::before {
content:'';
width:7px;
height:7px;
min-width:7px;
border-radius:50%;
background:var(--vp-red);
}
.feature-list i {
color:var(--vp-red);
font-size:1.5rem;
}
.feature-list-v2 {
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
list-style:none;
padding:0;
margin:0;
}
.feature-list-v2 li {
display:flex;
align-items:center;
gap:14px;
padding:12px 16px;
border-radius:var(--radius-sm);
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
font-weight:600;
color:var(--vp-gray-dark);
font-size:0.95rem;
transition:all 0.2s ease;
}
.feature-list-v2 li:hover {
background:rgba(193,0,7,0.04);
border-color:rgba(193,0,7,0.15);
transform:translateX(4px);
}
.fl-icon {
width:40px;
height:40px;
min-width:40px;
border-radius:var(--radius-sm);
background:linear-gradient(135deg,rgba(193,0,7,0.1),rgba(193,0,7,0.05));
color:var(--vp-red);
font-size:1.3rem;
display:flex;
align-items:center;
justify-content:center;
}
.feature-list-v2 li span {
line-height:1.3;
}
.facility-note {
margin:-6px 0 14px;
font-size:0.78rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.9px;
color:#6b7280;
}
.facility-list-pro {
display:grid;
grid-template-columns:1fr 1fr;
column-gap:24px;
row-gap:0;
list-style:none;
margin:0;
padding:0;
}
.facility-list-pro li {
display:flex;
align-items:center;
gap:12px;
padding:13px 2px;
border-bottom:1px solid var(--vp-border-light);
font-size:0.95rem;
font-weight:600;
color:var(--vp-gray-dark);
transition:color 0.2s ease;
}
.facility-list-pro li:hover {
color:var(--vp-red);
}
.facility-list-pro li:last-child {
grid-column:1 / 2;
}
.facility-marker {
width:8px;
height:8px;
min-width:8px;
border-radius:50%;
background:var(--vp-red);
box-shadow:0 0 0 4px rgba(193,0,7,0.12);
}
.convenience-section {
padding-top:90px;
}
.convenience-layout {
gap:70px;
align-items:center;
}
.convenience-content-card {
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
padding:34px;
box-shadow:var(--shadow-sm);
}
.convenience-content-card h2 {
font-size:2.1rem;
margin-bottom:14px;
}
.convenience-content-card p {
color:var(--vp-gray-secondary);
line-height:1.7;
}
.responsibility-card {
background:#fff;
border:1px solid rgba(15,23,42,0.08);
border-radius:var(--radius-md);
padding:34px;
box-shadow:var(--shadow-sm);
}
.responsibility-card .mb-3 {
margin-bottom:16px;
color:var(--vp-gray-secondary);
line-height:1.75;
}
.responsibility-pillars {
display:grid;
gap:10px;
margin-bottom:16px;
}
.r-item {
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid var(--vp-border-light);
border-radius:10px;
background:#fff;
font-size:0.92rem;
font-weight:600;
color:var(--vp-gray-dark);
}
.r-item i {
color:var(--vp-red);
font-size:1.1rem;
}
.responsibility-meta {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:18px;
}
.r-chip {
display:inline-flex;
padding:7px 10px;
border-radius:999px;
font-size:0.74rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
background:#fff;
border:1px solid var(--vp-border-light);
color:#4b5563;
}
.responsibility-actions {
display:flex;
gap:10px;
flex-wrap:wrap;
}
.convenience-collage-wrap {
height:auto;
padding:12px;
background:#fff;
border:1px solid var(--vp-border-light);
box-shadow:var(--shadow-sm);
}
.convenience-collage {
display:block;
width:100%;
border-radius:10px;
overflow:hidden;
}
.convenience-collage img {
width:100%;
display:block;
height:auto;
max-height:620px;
object-fit:cover;
border-radius:8px;
border:1px solid rgba(0,0,0,0.06);
}

/* Unified subtle border language across key cards/boxes */
.service-card,
.news-card,
.about-highlight,
.journey-panel,
.image-block,
.convenience-content-card,
.recent-social-card,
.newsletter-block,
.locator-layout,
.about-metric,
.titem,
.facility-list-pro li {
border:1px solid rgba(15,23,42,0.08);
}
.news-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.news-card {
background:var(--vp-bg-main);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
border:1px solid var(--vp-border-light);
}
.news-card:hover {
box-shadow:var(--shadow-hover);
transform:translateY(-5px);
}
.news-img {
width:100%;
height:220px;
object-fit:cover;
background:var(--vp-bg-alt);
display:block;
}
.news-content {
padding:25px;
}
.news-meta {
font-size:0.85rem;
color:var(--vp-red);
font-weight:600;
margin-bottom:10px;
text-transform:uppercase;
}
.news-content h3 {
font-size:1.25rem;
margin-bottom:15px;
line-height:1.4;
}
.news-content p {
font-size:0.95rem;
margin-bottom:20px;
}
.ogra-news-section {
padding:clamp(64px,8vw,96px) 0;
background:var(--vp-bg-main);
border-top:1px solid var(--vp-border-light);
}
.ogra-news-mount {
display:flex;
flex-direction:column;
gap:clamp(24px,4vw,40px);
}
.ogra-news-empty {
margin:0;
color:var(--vp-gray-secondary);
font-size:1rem;
}
.ogra-news-card {
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-sm);
}
.ogra-news-card-head {
padding:20px 24px 16px;
border-bottom:1px solid var(--vp-border-light);
}
.ogra-news-card-head .ogra-meta {
font-size:0.8rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--vp-red);
margin-bottom:8px;
}
.ogra-news-card-head h3 {
margin:0;
font-size:clamp(1.15rem,2.5vw,1.35rem);
font-family:'Outfit',sans-serif;
color:var(--vp-gray-dark);
line-height:1.35;
}
.ogra-news-summary {
margin:0;
padding:16px 24px;
font-size:0.95rem;
line-height:1.65;
color:var(--vp-gray-secondary);
background:var(--vp-bg-alt);
border-bottom:1px solid var(--vp-border-light);
}
.ogra-pdf-wrap {
background:#1a1a1f;
position:relative;
}
.ogra-pdf-embed {
width:100%;
height:min(68vh,560px);
min-height:320px;
border:0;
display:block;
}
.ogra-news-actions {
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
padding:14px 18px;
background:var(--vp-bg-alt);
border-top:1px solid var(--vp-border-light);
}
.ogra-news-actions a {
font-weight:700;
font-size:0.88rem;
}
@media (max-width:768px) {
.ogra-pdf-embed {
height:52vh;
min-height:240px;
}
.fuel-prices-widget {
margin-left:12px;
margin-right:12px;
}
}
.recent-social-block {
margin-top:42px;
padding:28px;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
background:var(--vp-bg-alt);
}
.recent-social-block h3 {
font-size:1.35rem;
margin-bottom:18px;
}
.recent-social-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.recent-social-card {
border:1px solid var(--vp-border-light);
border-radius:var(--radius-sm);
padding:14px;
background:#fff;
transition:var(--transition-fast);
}
.recent-social-card:hover {
transform:translateY(-3px);
border-color:rgba(193,0,7,0.25);
}
.recent-social-meta {
font-size:0.8rem;
font-weight:700;
color:var(--vp-gray-dark);
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
}
.recent-social-meta i {
color:var(--vp-red);
font-size:1rem;
}
.recent-social-card p {
margin:0;
color:var(--vp-gray-secondary);
font-size:0.9rem;
line-height:1.55;
}
.trust-bar {
background-color:var(--vp-gray-dark);
padding:35px 0;
border-top:2px solid var(--vp-red);
}
.trust-bar .container {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:30px;
}
.trust-lbl {
font-family:'Outfit',sans-serif;
color:rgba(255,255,255,0.6);
font-size:0.9rem;
text-transform:uppercase;
letter-spacing:2px;
font-weight:700;
border-right:1px solid rgba(255,255,255,0.1);
padding-right:30px;
}
.trust-row {
display:flex;
flex-wrap:wrap;
gap:30px;
flex:1;
justify-content:space-between;
}
.titem {
display:flex;
align-items:center;
gap:12px;
color:#ffffff;
}
.titem i {
font-size:2.4rem;
color:var(--vp-red);
}
.titem-t {
display:flex;
flex-direction:column;
}
.titem-t strong {
font-size:1.1rem;
font-family:'Inter',sans-serif;
font-weight:800;
line-height:1.1;
letter-spacing:-0.2px;
}
.titem-t small {
font-size:0.75rem;
color:rgba(255,255,255,0.6);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}
.partners-section {
position:relative;
padding:96px 0 104px;
background:var(--vp-bg-main);
border-top:1px solid var(--vp-border-light);
border-bottom:1px solid var(--vp-border-light);
}
.partners-section .section-header--partners {
margin-bottom:52px;
}
.partners-section .section-header--partners h2 {
font-size:clamp(2rem,3.6vw,2.65rem);
letter-spacing:-0.04em;
font-weight:800;
}
.partners-section .section-header--partners p {
max-width:52ch;
font-size:1.05rem;
line-height:1.65;
color:#5b6570;
}
.partners-logos {
list-style:none;
margin:0 auto;
padding:0;
max-width:1120px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:24px;
}
.partner-logo-card {
position:relative;
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:0;
min-height:0;
padding:0;
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.22);
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.partner-logo-card:hover {
transform:translateY(-8px);
border-color:rgba(193,0,7,0.48);
box-shadow:var(--shadow-hover);
}
.partner-logo-frame {
flex:1;
display:flex;
align-items:center;
justify-content:center;
min-height:148px;
width:100%;
padding:32px 28px 28px;
background:var(--vp-bg-alt);
border-bottom:1px solid var(--vp-border-light);
}
.partner-logo-frame img {
max-width:100%;
max-height:96px;
width:auto;
height:auto;
object-fit:contain;
border-radius:0;
transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.partner-logo-card:hover .partner-logo-frame img {
transform:scale(1.04);
}
.partner-name {
display:block;
padding:18px 16px 20px;
font-family:'Outfit',sans-serif;
font-size:0.9375rem;
font-weight:700;
letter-spacing:-0.015em;
color:var(--vp-gray-dark);
text-align:center;
line-height:1.35;
background:var(--vp-bg-main);
}
@media (max-width:900px) {
.partners-logos {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}
}
@media (max-width:480px) {
.partners-logos {
grid-template-columns:1fr;
max-width:400px;
gap:20px;
}
.partner-logo-frame {
min-height:132px;
padding:28px 24px 24px;
}
.partner-logo-frame img {
max-height:84px;
}
}
@media (prefers-reduced-motion:reduce) {
.partner-logo-card,
.partner-logo-frame img {
transition:none;
}
.partner-logo-card:hover {
transform:none;
}
.partner-logo-card:hover .partner-logo-frame img {
transform:none;
}
}
.services-offer-section {
scroll-margin-top:96px;
}
.fleet-section {
background-color:#0b0b0d;
color:#fff;
padding:120px 0;
position:relative;
overflow:hidden;
}
.fleet-section::before {
content:'';
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle,rgba(209,0,0,0.12) 0%,transparent 70%);
top:50%;
right:-100px;
transform:translateY(-50%);
border-radius:50%;
z-index:0;
}
.fleet-grid {
position:relative;
z-index:1;
display:grid;
grid-template-columns:1.15fr 1fr;
gap:80px;
align-items:center;
}
.fleet-body h2 {
font-size:3.5rem;
line-height:1.1;
margin-bottom:25px;
font-family:'Outfit',sans-serif;
font-weight:800;
letter-spacing:-1px;
background:linear-gradient(135deg,#ffffff 0%,#a0a0a0 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fleet-body p {
font-size:1.15rem;
color:rgba(255,255,255,0.65);
margin-bottom:40px;
line-height:1.8;
}
.pill {
display:inline-block;
padding:8px 18px;
border-radius:50px;
font-size:0.75rem;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:30px;
font-family:'Inter',sans-serif;
}
.pill-white {
background:rgba(255,255,255,0.05);
color:#fff;
border:1px solid rgba(255,255,255,0.1);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.fleet-perks {
display:grid;
grid-template-columns:1fr 1fr;
gap:12px 30px;
margin-bottom:50px;
}
.fperk {
display:flex;
align-items:center;
gap:12px;
font-size:0.94rem;
font-weight:600;
color:#fff;
font-family:'Inter',sans-serif;
padding:8px 2px;
transition:all 0.2s ease;
}
.fperk:hover {
transform:translateX(3px);
}
.fperk-dot {
width:8px;
height:8px;
min-width:8px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--vp-red);
box-shadow:0 0 0 4px rgba(209,0,0,0.2);
}
.fleet-body .btn {
padding:14px 28px;
font-size:0.9rem;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
border-radius:8px;
transition:all 0.3s ease;
}
.btn-red {
background:var(--vp-red);
color:#fff;
box-shadow:0 10px 20px rgba(209,0,0,0.25);
border:2px solid transparent;
}
.btn-red:hover {
background:#b00005;
transform:translateY(-3px);
box-shadow:0 15px 30px rgba(209,0,0,0.35);
}
.btn-ghost {
background:transparent;
color:#fff;
border:2px solid rgba(255,255,255,0.2);
}
.btn-ghost:hover {
background:#ffffff;
color:#000;
border-color:#ffffff;
transform:translateY(-3px);
}
.card-wrapper {
position:relative;
padding:25px;
background:rgba(255,255,255,0.02);
border-radius:35px;
border:1px solid rgba(255,255,255,0.04);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:0 40px 80px rgba(0,0,0,0.6);
margin:0 auto;
}
.card3d {
background:linear-gradient(135deg,#1f1f23 0%,#0a0a0c 100%);
border-radius:20px;
padding:40px;
box-shadow:inset 0 2px 2px rgba(255,255,255,0.08),inset 0 -2px 5px rgba(0,0,0,0.5);
width:100%;
max-width:450px;
aspect-ratio:1.58;
position:relative;
overflow:hidden;
transform:perspective(1500px) rotateY(-12deg) rotateX(8deg);
transition:transform 0.6s cubic-bezier(0.16,1,0.3,1),box-shadow 0.6s ease;
margin:0 auto;
}
.card-wrapper:hover .card3d {
transform:perspective(1500px) rotateY(0deg) rotateX(0deg) scale(1.02);
box-shadow:inset 0 2px 5px rgba(255,255,255,0.15),0 20px 40px rgba(0,0,0,0.8);
}
.card3d::before {
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,0.04) 50%,transparent 60%);
animation:shine 4s linear infinite;
pointer-events:none;
z-index:2;
}
@keyframes shine {
0% {
transform:translateX(-100%) translateY(-100%);
}
100% {
transform:translateX(100%) translateY(100%);
}
}
.card-grid-bg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
background-size:20px 20px;
opacity:0.5;
z-index:0;
pointer-events:none;
}
.chip {
width:45px;
height:32px;
background:linear-gradient(135deg,#e3c15d,#ab8a31);
border-radius:6px;
margin-bottom:35px;
position:relative;
z-index:1;
}
.chip::after {
content:'';
position:absolute;
top:4px;
bottom:4px;
left:12px;
right:12px;
border:1px solid rgba(0,0,0,0.3);
border-radius:2px;
}
.chip::before {
content:'';
position:absolute;
top:15px;
bottom:15px;
left:0;
right:0;
border-top:1px solid rgba(0,0,0,0.3);
border-bottom:1px solid rgba(0,0,0,0.3);
}
.cbrand {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
position:relative;
z-index:1;
}
.cbrand-n {
font-family:'Outfit',sans-serif;
font-size:1.4rem;
font-weight:800;
letter-spacing:3px;
color:#fff;
}
.cbrand-n em {
color:var(--vp-red);
font-style:normal;
}
.cwifi {
font-size:1.8rem;
color:rgba(255,255,255,0.3);
transform:rotate(90deg) translateY(-5px);
}
.cnum {
font-family:'Courier New',Courier,monospace;
font-size:1.6rem;
letter-spacing:4px;
font-weight:600;
color:rgba(255,255,255,0.9);
text-shadow:0 2px 4px rgba(0,0,0,0.8);
margin-bottom:30px;
position:relative;
z-index:1;
}
.cfoot {
display:flex;
justify-content:space-between;
align-items:flex-end;
position:relative;
z-index:1;
}
.cfl {
display:flex;
flex-direction:column;
gap:6px;
}
.clbl {
font-size:0.65rem;
color:rgba(255,255,255,0.3);
text-transform:uppercase;
letter-spacing:1.5px;
}
.cval {
font-size:0.95rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:2px;
color:#fff;
}
.ccirc {
display:flex;
align-items:center;
}
.cc {
width:30px;
height:30px;
border-radius:50%;
opacity:0.85;
}
.cc:first-child {
background:var(--vp-red);
margin-right:-12px;
z-index:2;
border:2px solid #0a0a0c;
}
.cc:last-child {
background:#ff9800;
z-index:1;
border:2px solid #0a0a0c;
}
footer {
background-color:var(--vp-gray-dark);
color:#FFFFFF;
padding:100px 0 30px;
}
.footer-grid {
display:grid;
grid-template-columns:2fr 1fr 1fr 1.5fr;
gap:50px;
margin-bottom:60px;
}
.footer-logo-link {
display:block;
margin-bottom:25px;
}
.footer-logo-img {
height:80px;
width:auto;
}
.footer-desc {
color:rgba(255,255,255,0.7);
margin-bottom:30px;
font-size:0.95rem;
line-height:1.8;
}
.social-links-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.social-logo-link {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.social-logo-link:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}
.social-logo-svg {
    width: 18px;
    height: 18px;
    display: block;
}

.brand-box {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Rounded square from image */
    color: #FFFFFF;
    font-size: 1.4rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.brand-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    filter: brightness(1.1);
}

/* Brand Backgrounds */
.brand-facebook { background-color: #1877F2; }
.brand-linkedin { background-color: #0A66C2; }
.brand-instagram { background-color: #E4405F; }
.brand-youtube { background-color: #FF0000; }
.brand-tiktok { background-color: #000000; }
.brand-upwork { background-color: #6fda44; } /* Preserved just in case */

@media (max-width: 768px) {
    .social-links-v2 { justify-content: center; }
}
.social-btn i {
font-size:1.15rem;
transition:transform 0.3s ease;
}
.social-btn span {
font-size:0.8rem;
}
.social-btn:hover {
background:var(--vp-red);
border-color:var(--vp-red);
color:#FFFFFF;
transform:translateY(-3px);
box-shadow:0 8px 25px rgba(193,0,7,0.35);
}
.social-btn:hover i {
transform:scale(1.15);
}
.social-links {
display:flex;
gap:15px;
}
.social-icon {
width:45px;
height:45px;
background-color:rgba(255,255,255,0.1);
color:#FFFFFF;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:1.2rem;
transition:var(--transition-fast);
}
.social-icon:hover {
background-color:var(--vp-red);
transform:translateY(-3px);
}
.footer-col h4 {
color:#FFFFFF;
font-size:1.3rem;
margin-bottom:30px;
font-family:'Outfit',sans-serif;
position:relative;
padding-bottom:15px;
}
.footer-col h4::after {
content:'';
position:absolute;
bottom:0;
left:0;
width:40px;
height:3px;
background-color:var(--vp-red);
}
.footer-links {
display:flex;
flex-direction:column;
gap:15px;
}
.footer-links a {
color:rgba(255,255,255,0.7);
font-weight:500;
font-size:0.95rem;
transition:var(--transition-fast);
display:inline-flex;
align-items:center;
gap:6px;
}
.footer-links a::before {
content:'';
width:0;
height:2px;
background:var(--vp-red);
transition:width 0.3s ease;
display:inline-block;
}
.footer-links a:hover {
color:#FFFFFF;
transform:translateX(5px);
}
.footer-links a:hover::before {
width:12px;
}
.contact-item {
display:flex;
gap:0;
margin-bottom:25px;
align-items:flex-start;
}
.contact-item i {
color:var(--vp-red);
font-size:1.5rem;
background:rgba(255,255,255,0.05);
padding:10px;
border-radius:50%;
}
.contact-item span {
color:rgba(255,255,255,0.7);
font-size:0.95rem;
line-height:1.5;
margin-top:0;
}
.footer-bottom {
display:flex;
justify-content:space-between;
align-items:center;
padding-top:30px;
border-top:1px solid rgba(255,255,255,0.1);
color:rgba(255,255,255,0.5);
font-size:0.9rem;
flex-wrap:wrap;
gap:15px;
}
.footer-bottom-links {
display:flex;
gap:25px;
}
.footer-bottom-links a {
color:rgba(255,255,255,0.5);
font-size:0.85rem;
font-weight:500;
transition:var(--transition-fast);
}
.footer-bottom-links a:hover {
color:var(--vp-red);
}
.reveal {
opacity:0;
transform:translateY(40px);
transition:var(--transition-smooth);
}
.reveal.active {
opacity:1;
transform:translateY(0);
}
.prices-grid {
display:grid;
grid-template-columns:1fr 1fr 1fr 180px;
gap:40px;
align-items:center;
}
@media (max-width:1200px) {
.prices-grid {
grid-template-columns:1fr 1fr;
gap:30px;
}
.price-item {
border-right:none !important;
border-bottom:1px solid rgba(255,255,255,0.06);
padding-bottom:20px;
padding-right:0 !important;
}
.price-item:last-child {
border-bottom:none;
padding-bottom:0;
}
}
@media (max-width:992px) {
.usps-grid {
grid-template-columns:1fr;
}
.split-grid {
grid-template-columns:1fr;
gap:40px;
}
.split-grid.reverse .content-block {
order:1;
}
.split-grid.reverse .image-block {
order:2;
height:400px;
}
.news-grid {
grid-template-columns:repeat(2,1fr);
}
.recent-social-grid {
grid-template-columns:1fr;
}
.footer-grid {
grid-template-columns:repeat(2,1fr);
}
section {
padding:80px 0;
}
.fleet-grid {
grid-template-columns:1fr;
gap:50px;
text-align:center;
}
.fleet-perks {
text-align:left;
max-width:500px;
margin:0 auto 40px;
}
.fleet-body h2 {
font-size:2.5rem;
}
.card3d {
transform:none !important;
}
.fleet-body > div[style*="display:flex"] {
justify-content:center;
}
.about-highlight {
padding:28px 24px;
}
.about-metrics {
grid-template-columns:repeat(3,1fr);
}
.about-focus-strip {
gap:8px;
}
.trust-bar .container {
flex-direction:column;
text-align:center;
}
.trust-lbl {
border-right:none;
border-bottom:1px solid rgba(255,255,255,0.1);
padding-right:0;
padding-bottom:15px;
width:100%;
}
.trust-row {
justify-content:center;
width:100%;
gap:20px;
}
.titem {
width:calc(50% - 20px);
justify-content:center;
}
.prices-header {
flex-direction:column;
align-items:center !important;
gap:15px;
text-align:center;
}
.top-bar {
display:none;
}
.nav-links {
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:rgba(255,255,255,0.98);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
flex-direction:column;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
padding:15px 0;
border-top:1px solid var(--vp-border-light);
gap:0;
}
.nav-links.show {
display:flex;
}
.nav-links > li {
padding:0;
width:100%;
}
.nav-links > li > a {
padding:15px 24px;
border-bottom:1px solid rgba(0,0,0,0.04);
font-size:1.1rem;
}
.nav-links > li > a::after {
display:none;
}
.dropdown-menu {
position:static;
box-shadow:none;
border:none;
transform:none;
visibility:visible;
opacity:1;
display:none;
padding-left:20px;
background:transparent;
}
.dropdown-menu::before {
display:none;
}
.nav-links > li:hover .dropdown-menu {
display:block;
transform:none;
}
.mobile-menu-btn {
display:block;
}
}
@media (max-width:768px) {
.hero {
padding:120px 0 160px;
}
.fuel-prices-widget {
padding:30px 20px;
}
.prices-grid {
grid-template-columns:1fr;
gap:20px;
text-align:center;
}
.price-item {
border-right:none !important;
padding-right:0 !important;
border-bottom:1px solid rgba(255,255,255,0.1) !important;
padding-bottom:20px;
}
.price-item:last-child {
border-bottom:none !important;
padding-bottom:0;
}
.footer-grid {
grid-template-columns:1fr;
gap:30px;
}
.news-grid {
grid-template-columns:1fr;
}
.recent-social-block {
padding:20px;
}
section {
padding:60px 0;
}
.about-highlight {
padding:22px 18px;
}
.about-metrics {
grid-template-columns:1fr;
}
.journey-intro {
max-width:100%;
margin-bottom:14px;
font-size:0.9rem;
}
.journey-meta {
font-size:0.68rem;
padding:5px 8px;
}
.journey-year {
font-size:1.15rem;
gap:8px;
flex-wrap:wrap;
}
.journey-badge {
font-size:0.68rem;
}
.about-focus-item {
width:100%;
justify-content:center;
}
.journey-panel {
padding:24px 18px;
}
}
@media (max-width:576px) {
.titem {
width:100%;
}
.fleet-perks {
grid-template-columns:1fr;
}
}
.locator-section {
background:var(--vp-bg-alt);
padding:100px 0 120px;
}
.locator-section .section-header p a {
color:var(--vp-red);
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
}
.locator-section .section-header p a:hover {
color:var(--vp-red-hover);
}
.locator-layout {
display:grid;
grid-template-columns:380px 1fr;
gap:0;
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,0.12);
border:1px solid var(--vp-border-light);
height:600px;
}
.locator-sidebar {
background:var(--vp-gray-dark);
color:#fff;
display:flex;
flex-direction:column;
overflow:hidden;
}
.locator-search-box {
display:flex;
align-items:center;
gap:12px;
padding:20px 24px;
border-bottom:1px solid rgba(255,255,255,0.08);
background:rgba(0,0,0,0.2);
}
.locator-search-box i {
color:rgba(255,255,255,0.4);
font-size:1.2rem;
flex-shrink:0;
}
.locator-search-box input {
background:transparent;
border:none;
color:#fff;
font-family:'Inter',sans-serif;
font-size:0.95rem;
font-weight:500;
width:100%;
outline:none;
}
.locator-search-box input::placeholder {
color:rgba(255,255,255,0.35);
}
.locator-quick-cities {
display:flex;
flex-wrap:wrap;
gap:8px;
padding:14px 16px 10px;
border-bottom:1px solid rgba(255,255,255,0.06);
}
.quick-city-btn {
border:1px solid rgba(255,255,255,0.18);
background:rgba(255,255,255,0.04);
color:rgba(255,255,255,0.9);
font-size:0.72rem;
font-weight:700;
letter-spacing:0.5px;
text-transform:uppercase;
border-radius:999px;
padding:6px 10px;
cursor:pointer;
transition:all 0.2s ease;
}
.quick-city-btn:hover {
background:rgba(193,0,7,0.22);
border-color:rgba(193,0,7,0.4);
}
.locator-search-status {
padding:10px 16px 8px;
font-size:0.75rem;
font-weight:700;
letter-spacing:0.4px;
text-transform:uppercase;
color:rgba(255,255,255,0.72);
border-bottom:1px solid rgba(255,255,255,0.06);
}
.locator-results {
flex:1;
overflow-y:auto;
padding:8px 0;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.locator-results::-webkit-scrollbar {
width:5px;
}
.locator-results::-webkit-scrollbar-track {
background:transparent;
}
.locator-results::-webkit-scrollbar-thumb {
background:rgba(255,255,255,0.15);
border-radius:10px;
}
.station-item {
display:flex;
align-items:flex-start;
gap:14px;
padding:13px 20px;
cursor:pointer;
transition:all 0.2s ease;
border-left:3px solid transparent;
border-bottom:1px solid rgba(255,255,255,0.05);
}
.station-item:hover,.station-item.active {
background:rgba(255,255,255,0.06);
border-left-color:var(--vp-red);
}
.station-item-icon {
width:36px;
height:36px;
border-radius:50%;
background:#fff;
border:2px solid var(--vp-red);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:
    0 1px 6px rgba(0,0,0,0.28),
    0 0 12px rgba(193,0,7,0.32);
}
.station-item-icon img {
width:24px;
height:24px;
border-radius:0;
object-fit:contain;
}
.station-item-name {
font-size:0.9rem;
font-weight:600;
color:rgba(255,255,255,0.9);
line-height:1.3;
}
.station-item-sub {
font-size:0.75rem;
color:rgba(255,255,255,0.4);
margin-top:2px;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.5px;
}
.locator-no-results {
padding:40px 24px;
text-align:center;
color:rgba(255,255,255,0.35);
font-size:0.95rem;
}
.locator-no-results i {
font-size:2.5rem;
margin-bottom:10px;
display:block;
}
.locator-stats-bar {
display:flex;
justify-content:space-around;
padding:18px 24px;
border-top:1px solid rgba(255,255,255,0.08);
background:rgba(0,0,0,0.15);
}
.lstat {
text-align:center;
}
.lstat-val {
display:block;
font-size:1.1rem;
font-weight:800;
color:var(--vp-red);
font-family:'Outfit',sans-serif;
line-height:1;
margin-bottom:4px;
}
.lstat-lbl {
display:block;
font-size:0.7rem;
color:rgba(255,255,255,0.45);
text-transform:uppercase;
letter-spacing:1px;
font-weight:600;
}
.locator-actions {
padding:10px 14px 14px;
border-top:1px solid rgba(255,255,255,0.08);
background:rgba(0,0,0,0.18);
}
.locator-reset-btn {
width:100%;
padding:10px 12px;
border:1px solid rgba(255,255,255,0.18);
border-radius:10px;
background:rgba(255,255,255,0.04);
color:#fff;
font-weight:700;
font-size:0.78rem;
letter-spacing:0.5px;
text-transform:uppercase;
cursor:pointer;
transition:all 0.2s ease;
}
.locator-reset-btn:hover {
background:rgba(193,0,7,0.2);
border-color:rgba(193,0,7,0.4);
}

.locator-value-strip {
background:var(--vp-bg-alt);
padding:clamp(28px,4vw,44px) 0;
border-bottom:1px solid var(--vp-border-light);
}
.locator-value-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(14px,2vw,22px);
list-style:none;
margin:0;
padding:0;
}
.locator-value-card {
display:flex;
gap:14px;
align-items:flex-start;
padding:16px 18px;
background:#fff;
border-radius:var(--radius-md);
border:1px solid var(--vp-border-light);
box-shadow:var(--shadow-sm);
}
.locator-value-card i {
font-size:1.65rem;
color:var(--vp-red);
flex-shrink:0;
margin-top:2px;
}
.locator-value-card strong {
display:block;
font-size:0.92rem;
color:var(--vp-gray-dark);
margin-bottom:4px;
font-family:'Outfit',sans-serif;
}
.locator-value-card span {
font-size:0.82rem;
color:var(--vp-gray-secondary);
line-height:1.45;
}
.locator-value-card a {
color:var(--vp-red);
font-weight:600;
}
.locator-value-card a:hover {
text-decoration:underline;
}
@media (max-width:992px) {
.locator-value-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:576px) {
.locator-value-grid {
grid-template-columns:1fr;
}
}

.locator-toolbar {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-top:14px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,0.06);
}
.locator-tool-btn {
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 12px;
border-radius:10px;
border:1px solid rgba(193,0,7,0.45);
background:rgba(193,0,7,0.2);
color:#fff;
font-size:0.78rem;
font-weight:700;
letter-spacing:0.4px;
text-transform:uppercase;
cursor:pointer;
font-family:'Inter',sans-serif;
transition:all 0.2s ease;
}
.locator-tool-btn:hover:not(:disabled) {
background:rgba(193,0,7,0.35);
}
.locator-tool-btn:disabled {
opacity:0.55;
cursor:not-allowed;
}
.locator-tool-btn--ghost {
background:rgba(255,255,255,0.06);
border-color:rgba(255,255,255,0.2);
}
.locator-tool-btn--ghost:hover:not(:disabled) {
background:rgba(255,255,255,0.1);
border-color:rgba(255,255,255,0.28);
}
.locator-radius-label {
font-size:0.68rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
color:rgba(255,255,255,0.45);
margin-left:4px;
}
.locator-radius-select {
margin-left:auto;
padding:7px 10px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.15);
background:#2a2a30;
color:#fff;
font-size:0.78rem;
font-family:'Inter',sans-serif;
cursor:pointer;
}

.locator-toolbar--embed {
margin-top:0;
padding:12px 16px 14px;
border-top:1px solid rgba(255,255,255,0.06);
}
.locator-home-more {
padding:14px 16px 16px;
border-top:1px solid rgba(255,255,255,0.08);
text-align:center;
background:rgba(0,0,0,0.12);
}
.locator-home-more-link {
display:inline-flex;
align-items:center;
gap:8px;
font-size:0.82rem;
font-weight:700;
color:rgba(255,255,255,0.92);
text-decoration:none;
letter-spacing:0.3px;
transition:color 0.2s ease;
}
.locator-home-more-link:hover {
color:#fff;
text-decoration:underline;
text-underline-offset:3px;
}
.locator-home-more-link i {
font-size:1rem;
color:var(--vp-red);
}

.locator-directory-section {
background:var(--vp-bg-alt);
padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px);
border-top:1px solid var(--vp-border-light);
}
.locator-directory-section h2 {
font-size:clamp(1.5rem,3vw,2rem);
margin-bottom:12px;
color:var(--vp-gray-dark);
}
.locator-directory-lead {
max-width:720px;
margin:0 0 24px;
color:var(--vp-gray-secondary);
font-size:1rem;
line-height:1.65;
}
.locator-directory-controls {
margin-bottom:16px;
}
.locator-directory-filter {
width:100%;
max-width:420px;
padding:12px 16px;
border-radius:10px;
border:1px solid var(--vp-border-light);
font-family:'Inter',sans-serif;
font-size:0.95rem;
color:var(--vp-gray-dark);
background:#fff;
box-shadow:var(--shadow-sm);
}
.locator-directory-filter:focus {
outline:none;
border-color:rgba(193,0,7,0.45);
box-shadow:0 0 0 3px rgba(193,0,7,0.12);
}
.locator-directory-count {
margin-top:10px;
font-size:0.85rem;
font-weight:600;
color:var(--vp-gray-secondary);
}
.locator-directory-scroll {
max-height:min(70vh,720px);
overflow:auto;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
background:#fff;
box-shadow:var(--shadow-sm);
}
.locator-station-directory {
list-style:decimal;
margin:0;
padding:8px 16px 8px 2.5rem;
}
.locator-directory-item {
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;
gap:12px 16px;
align-items:center;
padding:14px 8px 14px 4px;
border-bottom:1px solid var(--vp-border-light);
cursor:pointer;
transition:background 0.15s ease;
}
.locator-directory-item__name {
font-weight:600;
color:var(--vp-gray-dark);
font-size:0.92rem;
line-height:1.35;
}
.locator-directory-item__coords {
font-size:0.78rem;
font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
color:var(--vp-gray-secondary);
}
.locator-directory-item__actions {
display:flex;
flex-wrap:wrap;
gap:10px 14px;
justify-content:flex-end;
}
.locator-directory-item__actions a {
font-size:0.75rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.4px;
color:var(--vp-red);
}
.locator-directory-item__actions a:hover {
text-decoration:underline;
text-underline-offset:3px;
}
.locator-directory-copy {
font-size:0.75rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.4px;
color:var(--vp-gray-dark);
background:transparent;
border:none;
padding:0;
cursor:pointer;
text-decoration:underline;
text-underline-offset:3px;
font-family:'Inter',sans-serif;
}
.locator-directory-copy:hover {
color:var(--vp-red);
}
.locator-directory-item:hover {
background:var(--vp-bg-alt);
}
.locator-directory-item:last-child {
border-bottom:none;
}
@media (max-width:768px) {
.locator-directory-item {
grid-template-columns:1fr;
gap:8px;
}
.locator-directory-item__actions {
justify-content:flex-start;
}
}

.station-item-body {
flex:1;
min-width:0;
}
.station-item-meta {
font-size:0.72rem;
color:rgba(255,255,255,0.55);
margin-top:4px;
font-weight:600;
letter-spacing:0.2px;
}
.station-item-actions {
display:flex;
flex-wrap:wrap;
gap:10px 14px;
margin-top:8px;
}
.station-action-link {
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.4px;
color:var(--vp-red);
background:none;
border:none;
padding:0;
cursor:pointer;
font-family:'Inter',sans-serif;
text-decoration:underline;
text-underline-offset:3px;
}
a.station-action-link {
text-decoration:underline;
}
.station-action-link:hover {
color:#fff;
}

.locator-load-more-wrap {
padding:12px 16px 18px;
border-top:1px solid rgba(255,255,255,0.06);
}
.locator-load-more-btn {
width:100%;
padding:10px 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.14);
background:rgba(255,255,255,0.05);
color:rgba(255,255,255,0.88);
font-weight:700;
font-size:0.78rem;
letter-spacing:0.4px;
text-transform:uppercase;
cursor:pointer;
font-family:'Inter',sans-serif;
transition:all 0.2s ease;
}
.locator-load-more-btn:hover {
border-color:rgba(193,0,7,0.45);
background:rgba(193,0,7,0.15);
}

.popup-coords {
font-size:0.78rem;
color:var(--vp-gray-secondary);
margin:8px 0 4px;
font-family:ui-monospace,monospace;
}
.popup-actions {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}
.popup-btn {
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:8px;
font-size:0.78rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.4px;
border:1px solid var(--vp-border-light);
color:var(--vp-gray-dark);
background:#fff;
}
.popup-btn:hover {
border-color:var(--vp-red);
color:var(--vp-red);
}
.popup-btn--primary {
background:var(--vp-red);
border-color:var(--vp-red);
color:#fff;
}
.popup-btn--primary:hover {
background:var(--vp-red-hover);
border-color:var(--vp-red-hover);
color:#fff;
}

.locator-map-panel {
position:relative;
background:#e8e0d8;
}
.locator-map-panel #map {
width:100%;
height:100%;
min-height:600px;
}
.leaflet-div-icon.vital-leaflet-divicon {
background:transparent !important;
border:none !important;
}
.vital-leaflet-pin {
box-sizing:border-box;
width:36px;
height:36px;
border-radius:50%;
background:#fff;
border:2px solid var(--vp-red);
box-shadow:
    0 2px 8px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.35) inset,
    0 0 14px rgba(193,0,7,0.35);
display:flex;
align-items:center;
justify-content:center;
padding:4px;
}
.vital-leaflet-pin img {
display:block;
width:24px;
height:24px;
object-fit:contain;
}
.vital-marker {
background:transparent;
border:none;
}
.vital-marker-icon {
width:32px;
height:32px;
border-radius:50%;
border:2px solid var(--vp-red);
box-shadow:0 3px 10px rgba(0,0,0,0.35),0 0 0 3px rgba(193,0,7,0.15);
transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
background:#fff;
object-fit:cover;
}
.vital-marker-icon:hover {
transform:scale(1.35);
}
.leaflet-popup-content {
margin:0 !important;
font-family:'Inter',sans-serif !important;
}
.leaflet-popup-content-wrapper {
background:#fff !important;
color:var(--vp-gray-dark) !important;
border-radius:var(--radius-md) !important;
box-shadow:0 12px 40px rgba(0,0,0,0.18) !important;
padding:0 !important;
overflow:hidden;
}
.popup-inner {
padding:18px 22px;
}
.popup-inner strong {
font-size:1rem;
display:block;
margin-bottom:6px;
color:var(--vp-gray-dark);
font-family:'Outfit',sans-serif;
}
.popup-inner .popup-badge {
display:inline-flex;
align-items:center;
gap:5px;
font-size:0.7rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--vp-red);
background:rgba(193,0,7,0.08);
padding:4px 10px;
border-radius:50px;
}
.popup-inner .popup-badge i {
font-size:0.8rem;
}
.leaflet-popup-tip {
background:#fff !important;
}
.leaflet-container a.leaflet-popup-close-button {
color:var(--vp-gray-secondary) !important;
padding:8px 10px !important;
font-size:20px;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color:var(--vp-red) !important;
}
@media (max-width:992px) {
.locator-layout {
grid-template-columns:1fr;
min-height:auto;
}
.locator-sidebar {
max-height:350px;
}
.locator-map-panel #map {
min-height:450px;
}
}
@media (max-width:576px) {
.locator-layout {
border-radius:var(--radius-sm);
}
.locator-map-panel #map {
min-height:350px;
}
.locator-sidebar {
max-height:300px;
}
.footer-bottom {
justify-content:center;
text-align:center;
}
.footer-bottom-links {
justify-content:center;
}
.social-links-v2 {
justify-content:center;
}
}
/* Homepage locator only: map first, comfortable list height on phones */
@media (max-width:992px) {
#locator .locator-layout {
display:flex;
flex-direction:column;
height:auto;
min-height:0;
}
#locator .locator-map-panel {
order:-1;
}
#locator .locator-map-panel #map {
min-height:min(42vh,360px);
height:42vh;
}
#locator .locator-sidebar {
max-height:min(52vh,480px);
flex:1;
min-height:240px;
}
#locator .locator-toolbar--embed {
flex-wrap:wrap;
gap:8px;
}
#locator .locator-radius-select {
margin-left:0;
flex:1 1 120px;
min-width:100px;
}
}
@media (max-width:576px) {
#locator .locator-map-panel #map {
min-height:260px;
height:38vh;
}
#locator .locator-sidebar {
max-height:50vh;
}
}

/* --- FLEET SECTION V2 (PIXEL PERFECT RESTORATION) --- */
.fleet-section-v2 {
    background: #111114;
    padding: 120px 0;
    color: #fff;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.fleet-badge-v2 {
    display: inline-block;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.4);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
}
.fleet-section-v2 h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 30px;
    font-weight: 800;
    color: #fff;
}
.fleet-section-v2 p {
    color: rgba(255,255,255,0.5);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 600px;
}
.fleet-features-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 40px;
    margin-bottom: 50px;
    max-width: 600px;
}
.fleet-feature-item-v2 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fleet-feature-item-v2 i { color: var(--vp-red); font-size: 1rem; }

.fleet-actions-v2 {
    display: flex;
    gap: 15px;
}
.btn-fleet-primary {
    background: var(--vp-red);
    color: #fff;
    padding: 16px 30px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    transition: var(--transition-fast);
}
.btn-fleet-primary:hover {
    background: var(--vp-red-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(193,0,7,0.3);
}
.btn-fleet-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 16px 30px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.btn-fleet-outline:hover {
    background: rgba(255,255,255,0.05);
    border-color: #fff;
}

.fleet-visual-v2 {
    position: relative;
    padding: 40px;
    background: radial-gradient(circle at center, rgba(193,0,7,0.1) 0%, transparent 70%);
    border-radius: 30px;
}
.fleet-card-img-v2 {
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 50px 100px rgba(0,0,0,0.8);
    transform: perspective(1200px) rotateY(-15deg) rotateX(10deg);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fleet-visual-v2:hover .fleet-card-img-v2 {
    transform: perspective(1200px) rotateY(-5deg) rotateX(5deg) scale(1.05);
}

/* --- STATION LOCATOR V2 (PIXEL PERFECT RESTORATION) --- */
.locator-badge {
    display: inline-block;
    background: #FFEDED;
    color: var(--vp-red);
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.map-layout-v2 {
    display: grid;
    grid-template-columns: 350px 1fr;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.08);
    margin-top: 60px;
    height: 700px;
}
.map-sidebar-v2 {
    background: #2B2B31;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.map-search-v2 {
    padding: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.map-search-v2 input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 15px 20px;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
}
.map-search-v2 input::placeholder { color: rgba(255,255,255,0.3); }

.station-list-v2 {
    flex: 1;
    overflow-y: auto;
}
.station-list-v2::-webkit-scrollbar { width: 4px; }
.station-list-v2::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

.station-item-v2 {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}
.station-item-v2:hover { background: rgba(255,255,255,0.03); }
.station-item-v2.active {
    background: rgba(193,0,7,0.1);
    border-left: 4px solid var(--vp-red);
}
.station-icon-v2 {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: rgba(193,0,7,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vp-red);
    font-size: 14px;
}
.station-info-v2 { flex: 1; }
.station-name-v2 {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.station-brand-v2 {
    display: block;
    color: rgba(255,255,255,0.4);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-sidebar-footer-v2 {
    background: #1F1F23;
    padding: 20px 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-stat-v2 { display: flex; flex-direction: column; gap: 2px; }
.stat-num-v2 { color: var(--vp-red); font-weight: 800; font-size: 16px; }
.stat-label-v2 { color: rgba(255,255,255,0.4); font-size: 10px; font-weight: 700; text-transform: uppercase; }

.map-canvas-v2 { height: 100%; }

/* Marker Style Updates */
.vital-marker-icon {
    filter: drop-shadow(0 4px 10px rgba(193,0,7,0.4));
}

/* --- LEGACY 3D FLEET CARD UI --- */
.fleet-preview {
    background-color: #ffffff;
    padding: 100px 0;
    overflow: hidden;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.content-left {
    z-index: 10;
}
.section-tag {
    display: inline-block;
    color: var(--vp-red);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.card-3d-wrapper {
    perspective: 1500px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card3d {
    width: 100%;
    max-width: 450px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card3d-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
}
.card3d-front {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.3);
    transform: rotateY(-15deg) rotateX(10deg);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}
.card-3d-wrapper:hover .card3d-front {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05);
    box-shadow: 0 50px 120px rgba(0,0,0,0.4);
}
.card-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 2;
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.card-3d-wrapper:hover .card-shine {
    transform: translateX(100%);
}
.card3d-front img {
    width: 100%;
    display: block;
}

.top-bar {
    background: #252529;
    padding: 10px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-bar-container { display: flex; justify-content: space-between; align-items: center; }
.top-bar-left, .top-bar-right { display: flex; gap: 25px; align-items: center; }
.top-bar a { color: inherit; transition: color 0.2s; display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; }
.top-bar a:hover { color: #fff; }
.social-icons-top { display: flex; gap: 15px; border-left: 1px solid rgba(255,255,255,0.1); padding-left: 15px; }

/* --- RESTORATION: TRUST BAR --- */
.trust-bar {
    padding: 58px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, #141417 0%, #0f1013 100%);
}
.trust-lbl {
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    text-align: center;
    margin-bottom: 22px;
}
.trust-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.titem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    transition: all 0.25s ease;
}
.titem:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(193,0,7,0.45);
}
.titem i {
    font-size: 1.5rem;
    color: var(--vp-red);
    opacity: 1;
}
.titem-t strong {
    display: block;
    font-size: 1rem;
    color: #fff;
    line-height: 1.2;
}
.titem-t small {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* --- RESTORATION: NEWS GRID --- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.news-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #eee; transition: all 0.3s ease; }
.news-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: var(--vp-red); }
.news-img { width: 100%; height: 220px; object-fit: cover; }
.news-content { padding: 30px; }
.news-meta { font-size: 12px; font-weight: 700; color: var(--vp-red); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.news-content h3 { font-size: 1.25rem; margin-bottom: 15px; color: var(--vp-gray-dark); }
.news-content p { font-size: 0.95rem; color: var(--vp-gray-secondary); line-height: 1.6; margin-bottom: 20px; }

/* --- RESTORATION: LOCATOR STATS BAR --- */
.locator-stats-bar {
    background: #1a1a1c;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.lstat { text-align: center; }
.lstat-val { display: block; font-size: 1.2rem; font-weight: 800; color: var(--vp-red); }
.lstat-lbl { display: block; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-top: 2px; }

/* --- HERO SLIDESHOW LOGIC --- */
.hero-slideshow { position: absolute; top:0; left:0; width:100%; height:100%; z-index: 1; }
.slide { position: absolute; top:0; left:0; width:100%; height:100%; opacity: 0; transition: opacity 1.5s ease-in-out; background-size: cover; background-position: center; }
.slide.active { opacity: 1; }
.bg-zoom { animation: bgZoom 15s linear infinite alternate; }
@keyframes bgZoom {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.1); }
}

/* --- MODERNIZATION: GLOBAL SUBPAGE SYSTEM --- */

/* Standard Sub-Hero */
.sub-hero {
    padding: 160px 0 100px;
    min-height: 480px;
    background-color: #111114;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.sub-hero .hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
.sub-hero .hero-bg .slide {
    background-size: cover;
    background-position: center;
    opacity: 0.4;
}
.sub-hero .hero-overlay-dark {
    background: linear-gradient(0deg, rgba(16,16,20,1) 0%, rgba(16,16,20,0.4) 100%);
}
.sub-hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}
.sub-hero p {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.8);
    max-width: 700px;
    margin: 0 auto;
}

/* --- About page layout --- */
.about-page > section {
scroll-margin-top:96px;
}
.about-page-split.split-grid {
gap:clamp(40px,5vw,88px);
align-items:stretch;
}
.about-page-hero-img {
min-height:420px;
height:auto;
max-height:560px;
}
.about-page-hero-img img {
object-fit:cover;
object-position:center;
}
.about-metrics--prominent {
margin-top:8px;
gap:12px;
}
.about-metrics--prominent .about-metric {
padding:18px 14px;
}
.about-metrics--prominent .about-metric strong {
font-size:clamp(1.35rem,2.4vw,1.85rem);
margin-bottom:4px;
}
.about-metrics--prominent .about-metric span {
font-size:0.72rem;
letter-spacing:0.06em;
text-transform:uppercase;
}
.about-prose-wide {
max-width:820px;
margin:0 auto 40px;
text-align:center;
}
.about-prose-wide p {
font-size:1.05rem;
line-height:1.75;
color:var(--vp-gray-secondary);
margin:0;
}
.about-timeline-shell {
position:relative;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:clamp(36px,5vw,56px) clamp(24px,4vw,48px);
box-shadow:var(--shadow-sm);
overflow:hidden;
}
.about-timeline-decor {
position:absolute;
right:-40px;
bottom:-60px;
font-size:clamp(10rem,28vw,16rem);
color:rgba(193,0,7,0.06);
line-height:1;
pointer-events:none;
transform:rotate(-12deg);
}
.about-timeline {
list-style:none;
margin:0;
padding:0 0 0 0;
max-width:720px;
position:relative;
}
.about-timeline::before {
content:'';
position:absolute;
left:11px;
top:8px;
bottom:8px;
width:3px;
border-radius:999px;
background:linear-gradient(180deg,#e5e7eb 0%,var(--vp-red) 48%,#e5e7eb 100%);
}
.about-timeline-item {
position:relative;
padding:0 0 40px 48px;
margin:0;
}
.about-timeline-item:last-child {
padding-bottom:0;
}
.about-timeline-dot {
position:absolute;
left:0;
top:8px;
width:18px;
height:18px;
border-radius:50%;
background:var(--vp-bg-main);
border:4px solid var(--vp-red);
box-shadow:0 0 0 4px rgba(193,0,7,0.12);
}
.about-timeline-dot--current {
width:20px;
height:20px;
left:-1px;
top:6px;
background:var(--vp-red);
border-color:#fff;
box-shadow:0 0 0 5px rgba(193,0,7,0.2);
}
.about-timeline-year {
font-family:'Outfit',sans-serif;
font-size:clamp(1.75rem,3vw,2.25rem);
font-weight:800;
letter-spacing:-0.03em;
color:var(--vp-gray-dark);
line-height:1.1;
}
.about-timeline-item--current .about-timeline-year {
color:var(--vp-red);
}
.about-timeline-title {
font-size:1.15rem;
margin:10px 0 8px;
color:var(--vp-gray-dark);
font-weight:700;
}
.about-timeline-item--current .about-timeline-title {
color:var(--vp-red);
}
.about-timeline-text {
margin:0;
font-size:1rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.about-checklist {
list-style:none;
margin:24px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
}
.about-checklist li {
display:flex;
align-items:flex-start;
gap:12px;
font-size:0.98rem;
line-height:1.55;
color:#374151;
font-weight:500;
}
.about-checklist i {
flex-shrink:0;
margin-top:2px;
color:var(--vp-red);
font-size:1.25rem;
}
.about-mv-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
max-width:960px;
margin:0 auto;
}
.about-mv-card {
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.22);
border-radius:var(--radius-lg);
padding:36px 32px;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.about-mv-card:hover {
transform:translateY(-6px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.45);
}
.about-mv-icon {
width:48px;
height:48px;
border-radius:12px;
background:rgba(193,0,7,0.1);
color:var(--vp-red);
display:flex;
align-items:center;
justify-content:center;
font-size:1.35rem;
margin-bottom:18px;
}
.about-mv-card h3 {
font-size:1.35rem;
margin-bottom:12px;
color:var(--vp-gray-dark);
}
.about-mv-card p {
margin:0;
font-size:1.02rem;
line-height:1.7;
color:var(--vp-gray-secondary);
}
.about-mv-card q {
quotes:'\201c''\201d';
}
.about-ceo-card {
max-width:900px;
margin:0 auto;
background:linear-gradient(135deg,#fafbfc 0%,#ffffff 100%);
border:1px solid var(--vp-border-light);
border-left:4px solid var(--vp-red);
border-radius:var(--radius-lg);
padding:clamp(28px,4vw,44px) clamp(24px,4vw,48px);
box-shadow:var(--shadow-sm);
}
.about-ceo-body {
display:grid;
grid-template-columns:minmax(120px,140px) 1fr;
gap:clamp(20px,3vw,32px);
align-items:start;
}
.about-ceo-portrait {
width:clamp(120px,22vw,140px);
height:clamp(120px,22vw,140px);
border-radius:50%;
overflow:hidden;
flex-shrink:0;
border:3px solid rgba(193,0,7,0.2);
box-shadow:0 8px 24px rgba(43,43,49,0.1);
}
.about-ceo-portrait img {
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
border-radius:0;
display:block;
}
.about-ceo-quote {
margin:0;
padding:0;
border:none;
}
.about-ceo-quote p {
font-size:clamp(1.05rem,2vw,1.2rem);
line-height:1.75;
color:#374151;
font-style:italic;
margin:0;
}
.about-ceo-meta {
display:flex;
flex-direction:column;
gap:4px;
margin-top:24px;
padding-top:22px;
border-top:1px solid var(--vp-border-light);
}
.about-ceo-name {
font-family:'Outfit',sans-serif;
font-weight:800;
font-size:1.1rem;
color:var(--vp-gray-dark);
}
.about-ceo-role {
font-size:0.82rem;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--vp-gray-secondary);
}
.about-board-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}
.about-board-card {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:32px 26px 28px;
text-align:center;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.about-board-card:hover {
transform:translateY(-4px);
box-shadow:var(--shadow-md);
border-color:rgba(193,0,7,0.25);
}
.about-board-photo {
width:112px;
height:112px;
margin:0 auto 16px;
border-radius:50%;
overflow:hidden;
border:3px solid rgba(193,0,7,0.15);
box-shadow:0 6px 20px rgba(43,43,49,0.08);
background:var(--vp-bg-alt);
}
.about-board-card:nth-child(2) .about-board-photo,
.about-board-card:nth-child(3) .about-board-photo {
border-color:rgba(43,43,49,0.12);
}
.about-board-photo img {
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
border-radius:0;
display:block;
}
.about-board-card h3 {
font-size:1.15rem;
margin-bottom:6px;
color:var(--vp-gray-dark);
}
.about-board-role {
font-size:0.72rem;
font-weight:800;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--vp-red);
margin-bottom:14px;
}
.about-board-card:nth-child(2) .about-board-role,
.about-board-card:nth-child(3) .about-board-role {
color:var(--vp-gray-secondary);
}
.about-board-bio {
font-size:0.94rem;
line-height:1.6;
color:var(--vp-gray-secondary);
margin:0;
text-align:left;
}
.about-cert-bar {
margin-top:56px;
padding-top:40px;
border-top:1px solid var(--vp-border-light);
text-align:center;
}
.about-cert-label {
font-size:0.72rem;
font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--vp-gray-secondary);
margin:0 0 22px;
}
.about-cert-logos {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:clamp(16px,3vw,40px);
}
.about-cert-logos li {
font-family:'Outfit',sans-serif;
font-weight:800;
font-size:clamp(1rem,2vw,1.25rem);
color:var(--vp-gray-dark);
opacity:0.85;
}
@media (max-width:992px) {
.about-mv-grid {
grid-template-columns:1fr;
}
.about-board-grid {
grid-template-columns:1fr;
max-width:440px;
margin-left:auto;
margin-right:auto;
}
}
@media (max-width:768px) {
.about-timeline-item {
padding-left:28px;
}
.about-page-hero-img {
min-height:280px;
max-height:none;
height:320px;
}
.about-ceo-body {
grid-template-columns:1fr;
justify-items:center;
text-align:center;
}
.about-ceo-quote {
text-align:left;
width:100%;
}
.about-ceo-portrait {
margin-bottom:4px;
}
}

/* --- Retail network page --- */
.retail-page > section {
scroll-margin-top:96px;
}
.retail-page-section {
padding-top:clamp(72px,10vw,100px);
padding-bottom:clamp(72px,10vw,100px);
}
.retail-pillar-strip {
list-style:none;
margin:8px auto 0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
max-width:900px;
}
.retail-pillar-item {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
padding:22px 16px;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
font-family:'Outfit',sans-serif;
font-weight:800;
font-size:0.95rem;
letter-spacing:0.04em;
text-transform:uppercase;
color:var(--vp-gray-dark);
}
.retail-pillar-item i {
font-size:1.75rem;
color:var(--vp-red);
}
.retail-fuel-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
margin-bottom:28px;
}
.retail-fuel-card {
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.2);
border-radius:var(--radius-lg);
padding:28px 24px 26px;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.retail-fuel-card:hover {
transform:translateY(-5px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.45);
}
.retail-fuel-icon {
width:48px;
height:48px;
border-radius:12px;
background:rgba(193,0,7,0.1);
color:var(--vp-red);
display:flex;
align-items:center;
justify-content:center;
font-size:1.35rem;
margin-bottom:14px;
}
.retail-fuel-card h3 {
font-size:1.2rem;
margin-bottom:10px;
color:var(--vp-gray-dark);
}
.retail-fuel-card p {
margin:0;
font-size:0.98rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.retail-inline-link {
display:inline-flex;
align-items:center;
gap:6px;
font-weight:700;
color:var(--vp-red);
margin-top:6px;
}
.retail-inline-link:hover {
color:var(--vp-red-hover);
}
.retail-fuel-badges {
list-style:none;
margin:0 auto 20px;
padding:0;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px 18px;
max-width:920px;
}
.retail-fuel-badges li {
display:inline-flex;
align-items:center;
gap:8px;
font-size:0.88rem;
font-weight:600;
color:#374151;
background:#fff;
border:1px solid var(--vp-border-light);
padding:8px 14px;
border-radius:999px;
}
.retail-fuel-badges i {
color:var(--vp-red);
font-size:1.1rem;
}
.retail-prose-note {
text-align:center;
max-width:56ch;
margin:0 auto 36px;
font-size:1.02rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.retail-page-split.split-grid {
gap:clamp(36px,5vw,72px);
align-items:center;
}
.retail-page-hero-img {
min-height:360px;
height:auto;
max-height:520px;
}
.retail-page-hero-img img {
width:100%;
height:100%;
min-height:360px;
object-fit:cover;
object-position:center;
border-radius:0;
}
.retail-aside-title {
font-family:'Outfit',sans-serif;
font-size:1.5rem;
margin-bottom:14px;
color:var(--vp-gray-dark);
}
.retail-prose-center {
text-align:center;
max-width:52ch;
margin:-12px auto 28px;
font-size:1.02rem;
color:var(--vp-gray-secondary);
line-height:1.65;
}
.retail-amenity-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:20px;
}
.retail-amenity-card {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:24px 20px 22px;
text-align:center;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast);
}
.retail-amenity-card:hover {
border-color:rgba(193,0,7,0.25);
box-shadow:var(--shadow-md);
}
.retail-amenity-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
margin:0 auto 14px;
border-radius:14px;
background:rgba(193,0,7,0.08);
color:var(--vp-red);
font-size:1.4rem;
}
.retail-amenity-card h3 {
font-size:1.08rem;
margin-bottom:8px;
color:var(--vp-gray-dark);
}
.retail-amenity-card p {
margin:0;
font-size:0.92rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.retail-availability-note {
margin-top:28px;
text-align:center;
font-size:0.86rem;
color:var(--vp-gray-secondary);
font-weight:600;
}
.retail-beyond-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
align-items:stretch;
}
.retail-beyond-card {
display:flex;
flex-direction:column;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.retail-beyond-card:hover {
box-shadow:var(--shadow-md);
border-color:rgba(193,0,7,0.2);
}
.retail-beyond-img {
position:relative;
min-height:200px;
background:var(--vp-bg-alt);
}
.retail-beyond-img img {
width:100%;
height:100%;
min-height:220px;
object-fit:cover;
display:block;
border-radius:0;
}
.retail-beyond-img--accent {
display:flex;
align-items:center;
justify-content:center;
min-height:220px;
background:linear-gradient(145deg,#2B2B31 0%,#1a1a1f 100%);
}
.retail-beyond-img--accent i {
font-size:4.5rem;
color:rgba(255,255,255,0.2);
}
.retail-beyond-body {
padding:26px 24px 28px;
flex:1;
}
.retail-beyond-body h3 {
font-size:1.25rem;
margin-bottom:10px;
color:var(--vp-gray-dark);
}
.retail-beyond-body p {
margin:0;
font-size:0.98rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.retail-cta-section {
padding-bottom:clamp(80px,12vw,120px);
}
.retail-cta-panel {
max-width:720px;
margin:0 auto;
padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px);
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.retail-cta-panel h2 {
font-size:clamp(1.75rem,3vw,2.25rem);
margin-bottom:12px;
}
.retail-cta-panel > p {
margin:0 0 28px;
color:var(--vp-gray-secondary);
font-size:1.05rem;
line-height:1.65;
}
.retail-cta-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
align-items:center;
}
@media (max-width:992px) {
.retail-fuel-grid {
grid-template-columns:1fr;
max-width:480px;
margin-left:auto;
margin-right:auto;
}
.retail-beyond-grid {
grid-template-columns:1fr;
}
.retail-pillar-strip {
grid-template-columns:1fr;
max-width:420px;
}
}
@media (max-width:768px) {
.retail-page-hero-img {
min-height:260px;
max-height:none;
}
.retail-page-hero-img img {
min-height:260px;
}
}

/* --- Lubricants (ENEOS) page --- */
.lube-page > section {
scroll-margin-top:96px;
}
.lube-page-section {
padding-top:clamp(72px,10vw,100px);
padding-bottom:clamp(72px,10vw,100px);
}
.lube-page-split.split-grid {
gap:clamp(36px,5vw,72px);
align-items:center;
}
.lube-page-hero-img {
min-height:320px;
height:auto;
max-height:520px;
}
.lube-page-hero-img img {
width:100%;
height:100%;
min-height:320px;
object-fit:cover;
object-position:center;
border-radius:0;
display:block;
}
.lube-page-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:8px;
}
.lube-why-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}
.lube-why-card {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:26px 22px 24px;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast);
}
.lube-why-card:hover {
border-color:rgba(193,0,7,0.22);
box-shadow:var(--shadow-md);
}
.lube-why-icon {
display:inline-flex;
width:56px;
height:56px;
align-items:center;
justify-content:center;
border-radius:14px;
background:linear-gradient(145deg,rgba(193,0,7,0.14) 0%,rgba(193,0,7,0.06) 100%);
color:var(--vp-red);
font-size:1.65rem;
line-height:1;
margin-bottom:14px;
box-shadow:0 1px 0 rgba(255,255,255,0.65) inset;
flex-shrink:0;
}
.lube-why-icon.ph-fill::before {
display:block;
line-height:1;
}
.lube-why-card:nth-child(2) .lube-why-icon {
color:#b91c1c;
background:linear-gradient(145deg,rgba(185,28,28,0.12) 0%,rgba(193,0,7,0.05) 100%);
}
.lube-why-card:nth-child(3) .lube-why-icon {
color:#1d4ed8;
background:linear-gradient(145deg,rgba(29,78,216,0.12) 0%,rgba(59,130,246,0.06) 100%);
}
.lube-why-card:nth-child(4) .lube-why-icon {
color:#15803d;
background:linear-gradient(145deg,rgba(21,128,61,0.14) 0%,rgba(34,197,94,0.07) 100%);
}
.lube-why-card h3 {
font-size:1.05rem;
margin-bottom:8px;
color:var(--vp-gray-dark);
}
.lube-why-card p {
margin:0;
font-size:0.92rem;
line-height:1.6;
color:var(--vp-gray-secondary);
}
.lube-product-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:22px;
}
.lube-product-card {
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.18);
border-radius:var(--radius-lg);
padding:26px 22px 22px;
box-shadow:var(--shadow-sm);
display:flex;
flex-direction:column;
gap:12px;
transition:var(--transition-smooth);
}
.lube-product-card:hover {
transform:translateY(-4px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.4);
}
.lube-product-grade {
font-size:0.72rem;
font-weight:800;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--vp-red);
}
.lube-product-card h3 {
font-size:1.2rem;
margin:0;
color:var(--vp-gray-dark);
line-height:1.25;
}
.lube-product-points {
margin:0;
padding:0 0 0 1.15rem;
color:var(--vp-gray-secondary);
font-size:0.95rem;
line-height:1.65;
}
.lube-product-points li {
margin-bottom:4px;
}
.lube-product-pack {
display:flex;
align-items:center;
gap:10px;
margin-top:auto;
padding:12px 14px;
background:var(--vp-bg-alt);
border-radius:10px;
font-size:0.82rem;
font-weight:700;
color:var(--vp-gray-dark);
border:1px solid var(--vp-border-light);
}
.lube-product-pack i {
color:var(--vp-red);
font-size:1.1rem;
}
.lube-product-ideal {
margin:0;
font-size:0.88rem;
line-height:1.5;
color:var(--vp-gray-secondary);
}
.lube-product-ideal span {
font-weight:800;
color:var(--vp-gray-dark);
margin-right:6px;
}
.lube-disclaimer {
max-width:720px;
margin:28px auto 0;
text-align:center;
font-size:0.8rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
@media (max-width:992px) {
.lube-why-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:600px) {
.lube-why-grid {
grid-template-columns:1fr;
}
.lube-page-hero-img {
min-height:260px;
max-height:none;
}
.lube-page-hero-img img {
min-height:260px;
}
}

/* --- Commercial / B2B page --- */
.commercial-page > section {
scroll-margin-top:96px;
}
.commercial-page-section {
padding-top:clamp(72px,10vw,100px);
padding-bottom:clamp(72px,10vw,100px);
}
.commercial-page-split.split-grid {
gap:clamp(36px,5vw,72px);
align-items:center;
}
.commercial-page-hero-img {
min-height:320px;
height:auto;
max-height:520px;
}
.commercial-page-hero-img img {
width:100%;
height:100%;
min-height:320px;
object-fit:cover;
object-position:center;
border-radius:0;
display:block;
}
.commercial-mini-stats {
list-style:none;
margin:20px 0 0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.commercial-mini-stats li {
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
padding:14px 12px;
text-align:center;
}
.commercial-mini-stats strong {
display:block;
font-family:'Outfit',sans-serif;
font-size:1.05rem;
color:var(--vp-red);
margin-bottom:4px;
}
.commercial-mini-stats span {
font-size:0.72rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--vp-gray-secondary);
line-height:1.35;
}
.commercial-why-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.commercial-why-card {
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.2);
border-radius:var(--radius-lg);
padding:28px 24px 26px;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.commercial-why-card:hover {
transform:translateY(-5px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.45);
}
.commercial-why-icon {
display:inline-flex;
width:56px;
height:56px;
align-items:center;
justify-content:center;
border-radius:14px;
margin-bottom:16px;
font-size:1.65rem;
line-height:1;
color:var(--vp-red);
background:linear-gradient(145deg,rgba(193,0,7,0.14) 0%,rgba(193,0,7,0.06) 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.65) inset;
}
.commercial-why-icon.ph-fill::before {
display:block;
line-height:1;
}
.commercial-why-card:nth-child(2) .commercial-why-icon {
color:#1d4ed8;
background:linear-gradient(145deg,rgba(29,78,216,0.12) 0%,rgba(59,130,246,0.06) 100%);
}
.commercial-why-card:nth-child(3) .commercial-why-icon {
color:#0f766e;
background:linear-gradient(145deg,rgba(15,118,110,0.12) 0%,rgba(45,212,191,0.07) 100%);
}
.commercial-why-card h3 {
font-size:1.15rem;
margin-bottom:10px;
color:var(--vp-gray-dark);
}
.commercial-why-card p {
margin:0;
font-size:0.96rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.commercial-industry-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.commercial-industry-card {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:26px 22px 24px;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast);
}
.commercial-industry-card:hover {
border-color:rgba(193,0,7,0.22);
box-shadow:var(--shadow-md);
}
.commercial-industry-head {
display:flex;
align-items:center;
gap:14px;
margin-bottom:12px;
}
.commercial-industry-icon {
display:inline-flex;
width:48px;
height:48px;
flex-shrink:0;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:1.4rem;
line-height:1;
color:var(--vp-red);
background:rgba(193,0,7,0.1);
}
.commercial-industry-icon.ph-fill::before {
display:block;
line-height:1;
}
.commercial-industry-card:nth-child(2) .commercial-industry-icon {
color:#b45309;
background:rgba(180,83,9,0.12);
}
.commercial-industry-card:nth-child(3) .commercial-industry-icon {
color:#4338ca;
background:rgba(67,56,202,0.1);
}
.commercial-industry-head h3 {
margin:0;
font-size:1.2rem;
color:var(--vp-gray-dark);
line-height:1.25;
}
.commercial-industry-card p {
margin:0;
font-size:0.95rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.commercial-excellence {
background:linear-gradient(180deg,var(--vp-bg-alt) 0%,#f3f4f6 100%);
}
.commercial-excellence-panel {
max-width:960px;
margin:0 auto;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:clamp(32px,4vw,48px) clamp(24px,4vw,40px);
box-shadow:var(--shadow-sm);
}
.commercial-excellence-header {
margin-bottom:32px;
}
.commercial-excellence-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
}
.commercial-excellence-grid li {
display:flex;
gap:16px;
align-items:flex-start;
padding:20px 18px;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
}
.commercial-excellence-icon {
display:inline-flex;
width:48px;
height:48px;
flex-shrink:0;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:1.35rem;
line-height:1;
color:var(--vp-red);
background:#fff;
border:1px solid var(--vp-border-light);
}
.commercial-excellence-icon.ph-fill::before {
display:block;
line-height:1;
}
.commercial-excellence-grid h3 {
font-size:1.05rem;
margin:0 0 6px;
color:var(--vp-gray-dark);
}
.commercial-excellence-grid p {
margin:0;
font-size:0.92rem;
line-height:1.6;
color:var(--vp-gray-secondary);
}
.commercial-cta-section {
padding-bottom:clamp(80px,12vw,120px);
}
.commercial-cta-panel {
max-width:720px;
margin:0 auto;
padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px);
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.commercial-cta-panel h2 {
font-size:clamp(1.75rem,3vw,2.25rem);
margin-bottom:12px;
}
.commercial-cta-panel > p {
margin:0 0 26px;
font-size:1.05rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.commercial-cta-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
align-items:center;
}
@media (max-width:992px) {
.commercial-why-grid,
.commercial-industry-grid {
grid-template-columns:1fr;
max-width:520px;
margin-left:auto;
margin-right:auto;
}
.commercial-mini-stats {
grid-template-columns:1fr;
}
.commercial-excellence-grid {
grid-template-columns:1fr;
}
}
@media (max-width:768px) {
.commercial-page-hero-img {
min-height:260px;
max-height:none;
}
.commercial-page-hero-img img {
min-height:260px;
}
}

/* --- Logistics page --- */
.logistics-page > section {
scroll-margin-top:96px;
}
.logistics-page-section {
padding-top:clamp(72px,10vw,100px);
padding-bottom:clamp(72px,10vw,100px);
}
.logistics-stats-wrap {
padding-top:clamp(48px,6vw,64px);
padding-bottom:clamp(48px,6vw,64px);
}
.logistics-stat-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.logistics-stat-card {
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:clamp(22px,3vw,32px) 20px;
text-align:center;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast);
}
.logistics-stat-card:hover {
border-color:rgba(193,0,7,0.25);
box-shadow:var(--shadow-md);
}
.logistics-stat-card strong {
display:block;
font-family:'Outfit',sans-serif;
font-size:clamp(2rem,4vw,2.75rem);
font-weight:800;
color:var(--vp-red);
line-height:1.1;
margin-bottom:8px;
}
.logistics-stat-card span {
display:block;
font-size:0.78rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.07em;
color:var(--vp-gray-secondary);
line-height:1.45;
max-width:200px;
margin:0 auto;
}
.logistics-page-split.split-grid {
gap:clamp(36px,5vw,72px);
align-items:center;
}
.logistics-page-hero-img {
min-height:300px;
height:auto;
max-height:480px;
}
.logistics-page-hero-img img {
width:100%;
height:100%;
min-height:300px;
object-fit:cover;
object-position:center;
border-radius:0;
display:block;
}
.logistics-pill-list {
list-style:none;
margin:22px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
}
.logistics-pill-list li {
display:flex;
align-items:flex-start;
gap:12px;
font-size:0.95rem;
line-height:1.55;
color:var(--vp-gray-dark);
padding:12px 14px;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
}
.logistics-pill-icon {
flex-shrink:0;
display:inline-flex;
width:36px;
height:36px;
align-items:center;
justify-content:center;
border-radius:10px;
font-size:1.05rem;
color:var(--vp-red);
background:rgba(193,0,7,0.08);
margin-top:1px;
}
.logistics-pill-icon.ph-fill::before {
display:block;
line-height:1;
}
.logistics-services-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.logistics-service-card {
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.18);
border-radius:var(--radius-lg);
padding:28px 24px 26px;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.logistics-service-card:hover {
transform:translateY(-5px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.42);
}
.logistics-service-icon {
display:inline-flex;
width:56px;
height:56px;
align-items:center;
justify-content:center;
border-radius:14px;
margin-bottom:16px;
font-size:1.65rem;
line-height:1;
color:var(--vp-red);
background:linear-gradient(145deg,rgba(193,0,7,0.14) 0%,rgba(193,0,7,0.06) 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.65) inset;
}
.logistics-service-icon.ph-fill::before {
display:block;
line-height:1;
}
.logistics-service-card:nth-child(2) .logistics-service-icon {
color:#1d4ed8;
background:linear-gradient(145deg,rgba(29,78,216,0.12) 0%,rgba(59,130,246,0.06) 100%);
}
.logistics-service-card:nth-child(3) .logistics-service-icon {
color:#0f766e;
background:linear-gradient(145deg,rgba(15,118,110,0.12) 0%,rgba(45,212,191,0.07) 100%);
}
.logistics-service-card h3 {
font-size:1.12rem;
margin-bottom:10px;
color:var(--vp-gray-dark);
}
.logistics-service-card p {
margin:0;
font-size:0.96rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.logistics-innovation {
background:linear-gradient(180deg,var(--vp-bg-alt) 0%,#eef0f3 100%);
}
.logistics-innovation-inner {
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,0.85fr);
gap:clamp(28px,4vw,48px);
align-items:stretch;
}
.logistics-innovation-copy p {
max-width:520px;
font-size:1.02rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.logistics-innovation-points {
list-style:none;
margin:24px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:14px;
}
.logistics-innovation-points li {
display:flex;
gap:14px;
align-items:flex-start;
padding:16px 18px;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
}
.logistics-innovation-point-icon {
flex-shrink:0;
display:inline-flex;
width:44px;
height:44px;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:1.25rem;
color:var(--vp-red);
background:rgba(193,0,7,0.08);
}
.logistics-innovation-point-icon.ph-fill::before {
display:block;
line-height:1;
}
.logistics-innovation-points strong {
display:block;
font-size:0.98rem;
color:var(--vp-gray-dark);
margin-bottom:4px;
}
.logistics-innovation-points span {
font-size:0.88rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.logistics-innovation-panel {
border-radius:var(--radius-lg);
background:linear-gradient(135deg,#1e293b 0%,#0f172a 55%,#1a1a20 100%);
border:1px solid rgba(255,255,255,0.08);
box-shadow:var(--shadow-md);
min-height:220px;
display:flex;
align-items:center;
justify-content:center;
padding:32px 24px;
position:relative;
overflow:hidden;
}
.logistics-innovation-panel::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse 80% 60% at 80% 20%,rgba(193,0,7,0.35) 0%,transparent 55%);
pointer-events:none;
}
.logistics-innovation-panel-inner {
position:relative;
z-index:1;
text-align:center;
padding:8px;
}
.logistics-innovation-quote {
font-family:'Outfit',sans-serif;
font-weight:700;
font-size:clamp(1.15rem,2.2vw,1.45rem);
color:#f8fafc;
line-height:1.35;
letter-spacing:0.02em;
}
.logistics-commitment-panel {
display:flex;
gap:clamp(20px,3vw,32px);
align-items:flex-start;
max-width:920px;
margin:0 auto;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:clamp(28px,4vw,40px) clamp(22px,4vw,36px);
box-shadow:var(--shadow-sm);
border-left:4px solid var(--vp-red);
}
.logistics-commitment-icon-wrap {
flex-shrink:0;
}
.logistics-commitment-icon {
display:inline-flex;
width:56px;
height:56px;
align-items:center;
justify-content:center;
border-radius:14px;
font-size:1.6rem;
line-height:1;
color:var(--vp-red);
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
}
.logistics-commitment-icon.ph-fill::before {
display:block;
line-height:1;
}
.logistics-commitment-body .section-tag {
margin-bottom:10px;
}
.logistics-commitment-body h2 {
margin:0 0 12px;
font-size:clamp(1.35rem,2.5vw,1.75rem);
color:var(--vp-gray-dark);
line-height:1.25;
}
.logistics-commitment-body p {
margin:0;
font-size:1rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.logistics-cta-section {
padding-bottom:clamp(80px,12vw,120px);
}
.logistics-cta-panel {
max-width:720px;
margin:0 auto;
padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px);
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.logistics-cta-panel h2 {
font-size:clamp(1.75rem,3vw,2.25rem);
margin-bottom:12px;
}
.logistics-cta-panel > p {
margin:0 0 26px;
font-size:1.05rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.logistics-cta-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
align-items:center;
}
@media (max-width:992px) {
.logistics-stat-grid,
.logistics-services-grid {
grid-template-columns:1fr;
max-width:480px;
margin-left:auto;
margin-right:auto;
}
.logistics-services-grid {
max-width:520px;
}
.logistics-innovation-inner {
grid-template-columns:1fr;
}
.logistics-innovation-panel {
min-height:180px;
}
.logistics-commitment-panel {
flex-direction:column;
align-items:flex-start;
}
}
@media (max-width:768px) {
.logistics-page-hero-img {
min-height:240px;
max-height:none;
}
.logistics-page-hero-img img {
min-height:240px;
}
}

/* --- Storage & terminals page --- */
.storage-page > section {
scroll-margin-top:96px;
}
.storage-page-section {
padding-top:clamp(72px,10vw,100px);
padding-bottom:clamp(72px,10vw,100px);
}
.storage-page-split.split-grid {
gap:clamp(36px,5vw,72px);
align-items:center;
}
.storage-page-hero-img {
min-height:300px;
height:auto;
max-height:520px;
}
.storage-page-hero-img img {
width:100%;
height:100%;
min-height:300px;
object-fit:cover;
object-position:center;
border-radius:0;
display:block;
}
.storage-capacity-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
max-width:900px;
margin-left:auto;
margin-right:auto;
}
.storage-capacity-card {
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:28px 24px 26px;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.storage-capacity-card:hover {
border-color:rgba(193,0,7,0.28);
box-shadow:var(--shadow-md);
transform:translateY(-3px);
}
.storage-capacity-icon {
display:inline-flex;
width:52px;
height:52px;
align-items:center;
justify-content:center;
border-radius:14px;
margin-bottom:14px;
font-size:1.55rem;
line-height:1;
color:var(--vp-red);
background:linear-gradient(145deg,rgba(193,0,7,0.14) 0%,rgba(193,0,7,0.06) 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.65) inset;
}
.storage-capacity-icon.ph-fill::before {
display:block;
line-height:1;
}
.storage-capacity-card:nth-child(2) .storage-capacity-icon {
color:#1d4ed8;
background:linear-gradient(145deg,rgba(29,78,216,0.12) 0%,rgba(59,130,246,0.06) 100%);
}
.storage-capacity-card h3 {
font-size:1.12rem;
margin-bottom:10px;
color:var(--vp-gray-dark);
}
.storage-capacity-card p {
margin:0;
font-size:0.95rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.storage-terminal-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.storage-terminal-card {
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.16);
border-radius:var(--radius-lg);
padding:28px 22px 24px;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast);
}
.storage-terminal-card:hover {
border-color:rgba(193,0,7,0.38);
box-shadow:var(--shadow-hover);
}
.storage-terminal-icon {
display:inline-flex;
width:52px;
height:52px;
align-items:center;
justify-content:center;
border-radius:14px;
margin-bottom:16px;
font-size:1.5rem;
line-height:1;
color:var(--vp-red);
background:rgba(193,0,7,0.1);
}
.storage-terminal-icon.ph-fill::before {
display:block;
line-height:1;
}
.storage-terminal-card:nth-child(2) .storage-terminal-icon {
color:#0369a1;
background:rgba(3,105,161,0.1);
}
.storage-terminal-card:nth-child(3) .storage-terminal-icon {
color:#7c3aed;
background:rgba(124,58,237,0.1);
}
.storage-terminal-card h3 {
font-size:1.15rem;
margin:0 0 10px;
color:var(--vp-gray-dark);
}
.storage-terminal-card > p {
margin:0 0 18px;
font-size:0.94rem;
line-height:1.62;
color:var(--vp-gray-secondary);
}
.storage-terminal-features {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}
.storage-terminal-features li {
display:flex;
align-items:center;
gap:10px;
font-size:0.88rem;
font-weight:600;
color:var(--vp-gray-dark);
padding:10px 12px;
background:var(--vp-bg-alt);
border-radius:var(--radius-md);
border:1px solid var(--vp-border-light);
}
.storage-terminal-features .ph-fill {
font-size:1.1rem;
color:var(--vp-red);
flex-shrink:0;
line-height:1;
}
.storage-terminal-features .ph-fill::before {
display:block;
}
.storage-leadership-panel {
display:flex;
gap:clamp(20px,3vw,28px);
align-items:flex-start;
max-width:920px;
margin:0 auto;
background:linear-gradient(135deg,var(--vp-bg-alt) 0%,#f1f5f9 100%);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:clamp(28px,4vw,44px) clamp(22px,4vw,36px);
box-shadow:var(--shadow-sm);
border-left:4px solid var(--vp-red);
}
.storage-leadership-icon {
flex-shrink:0;
display:inline-flex;
width:56px;
height:56px;
align-items:center;
justify-content:center;
border-radius:14px;
font-size:1.55rem;
line-height:1;
color:var(--vp-red);
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
}
.storage-leadership-icon.ph-fill::before {
display:block;
line-height:1;
}
.storage-leadership-body .section-tag {
margin-bottom:10px;
}
.storage-leadership-body h2 {
margin:0 0 12px;
font-size:clamp(1.35rem,2.5vw,1.8rem);
color:var(--vp-gray-dark);
line-height:1.25;
}
.storage-leadership-body p {
margin:0;
font-size:1.02rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.storage-tech-points {
list-style:none;
margin:22px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:14px;
}
.storage-tech-points li {
display:flex;
gap:14px;
align-items:flex-start;
padding:18px 16px;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
}
.storage-tech-point-icon {
flex-shrink:0;
display:inline-flex;
width:44px;
height:44px;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:1.25rem;
line-height:1;
color:var(--vp-red);
background:rgba(193,0,7,0.08);
}
.storage-tech-point-icon.ph-fill::before {
display:block;
line-height:1;
}
.storage-tech-points h3 {
font-size:1rem;
margin:0 0 6px;
color:var(--vp-gray-dark);
}
.storage-tech-points p {
margin:0;
font-size:0.9rem;
line-height:1.58;
color:var(--vp-gray-secondary);
}
.storage-cta-section {
padding-bottom:clamp(80px,12vw,120px);
}
.storage-cta-panel {
max-width:720px;
margin:0 auto;
padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px);
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.storage-cta-panel h2 {
font-size:clamp(1.75rem,3vw,2.25rem);
margin-bottom:12px;
}
.storage-cta-panel > p {
margin:0 0 26px;
font-size:1.05rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.storage-cta-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
align-items:center;
}
@media (max-width:992px) {
.storage-capacity-grid,
.storage-terminal-grid {
grid-template-columns:1fr;
max-width:520px;
margin-left:auto;
margin-right:auto;
}
.storage-leadership-panel {
flex-direction:column;
}
}
@media (max-width:768px) {
.storage-page-hero-img {
min-height:240px;
max-height:none;
}
.storage-page-hero-img img {
min-height:240px;
}
}

/* --- Fleet card & Vital Fuel app page --- */
.fleet-page > section {
scroll-margin-top:96px;
}
.fleet-page-section {
padding-top:clamp(72px,10vw,100px);
padding-bottom:clamp(72px,10vw,100px);
}
.fleet-page-split.split-grid {
gap:clamp(36px,5vw,64px);
align-items:center;
}
.fleet-pos-highlights {
list-style:none;
margin:22px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
}
.fleet-pos-highlights li {
display:flex;
align-items:flex-start;
gap:12px;
font-size:0.95rem;
line-height:1.55;
color:var(--vp-gray-dark);
padding:12px 14px;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
}
.fleet-pos-icon {
flex-shrink:0;
display:inline-flex;
width:36px;
height:36px;
align-items:center;
justify-content:center;
border-radius:10px;
font-size:1.05rem;
color:var(--vp-red);
background:rgba(193,0,7,0.08);
margin-top:1px;
}
.fleet-pos-icon.ph-fill::before {
display:block;
line-height:1;
}
.fleet-card-visual-wrap {
display:flex;
align-items:center;
justify-content:center;
perspective:1000px;
}
.fleet-card-mock {
width:100%;
max-width:420px;
aspect-ratio:1.58;
border-radius:20px;
padding:36px 32px 32px;
background:linear-gradient(135deg,#2b2b31 0%,#1a1a1e 100%);
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 28px 56px rgba(0,0,0,0.45);
position:relative;
display:flex;
flex-direction:column;
transition:transform 0.45s ease,box-shadow 0.45s ease;
}
.fleet-card-mock:hover {
transform:translateY(-6px) rotateX(2deg);
box-shadow:0 36px 70px rgba(0,0,0,0.5);
}
.fleet-card-mock__logo {
height:34px;
width:auto;
margin-bottom:28px;
opacity:0.92;
display:block;
}
.fleet-card-mock__label {
font-family:'Inter',sans-serif;
color:rgba(255,255,255,0.42);
font-size:0.72rem;
letter-spacing:0.18em;
text-transform:uppercase;
margin:0 0 6px;
}
.fleet-card-mock__pan {
font-family:'Outfit',sans-serif;
color:#fff;
font-size:clamp(1.15rem,2.5vw,1.45rem);
letter-spacing:0.12em;
font-weight:700;
margin:0;
}
.fleet-card-mock__foot {
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-top:auto;
padding-top:36px;
}
.fleet-card-mock__muted {
display:block;
font-size:0.62rem;
text-transform:uppercase;
letter-spacing:0.08em;
color:rgba(255,255,255,0.55);
margin-bottom:4px;
}
.fleet-card-mock__name {
display:block;
color:#fff;
opacity:0.88;
font-size:0.95rem;
font-weight:600;
}
.fleet-card-mock__chip {
font-size:2rem;
color:var(--vp-red);
line-height:1;
}
.fleet-card-mock__chip.ph-fill::before {
display:block;
}
.fleet-benefits-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
}
.fleet-benefit-card {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:24px 20px 22px;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast);
}
.fleet-benefit-card:hover {
border-color:rgba(193,0,7,0.28);
box-shadow:var(--shadow-md);
transform:translateY(-3px);
}
.fleet-benefit-icon {
display:inline-flex;
width:48px;
height:48px;
align-items:center;
justify-content:center;
border-radius:12px;
margin-bottom:12px;
font-size:1.35rem;
line-height:1;
color:var(--vp-red);
background:rgba(193,0,7,0.1);
}
.fleet-benefit-icon.ph-fill::before {
display:block;
line-height:1;
}
.fleet-benefit-card:nth-child(2) .fleet-benefit-icon {
color:#1d4ed8;
background:rgba(29,78,216,0.1);
}
.fleet-benefit-card:nth-child(3) .fleet-benefit-icon {
color:#0f766e;
background:rgba(15,118,110,0.1);
}
.fleet-benefit-card:nth-child(4) .fleet-benefit-icon {
color:#b45309;
background:rgba(180,83,9,0.1);
}
.fleet-benefit-card:nth-child(5) .fleet-benefit-icon {
color:#4338ca;
background:rgba(67,56,202,0.1);
}
.fleet-benefit-card h3 {
font-size:1.02rem;
margin:0 0 8px;
color:var(--vp-gray-dark);
}
.fleet-benefit-card p {
margin:0;
font-size:0.9rem;
line-height:1.58;
color:var(--vp-gray-secondary);
}
.fleet-why-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.fleet-why-card {
background:var(--vp-bg-alt);
border:1px solid rgba(193,0,7,0.18);
border-radius:var(--radius-lg);
padding:28px 22px 24px;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.fleet-why-card:hover {
transform:translateY(-5px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.4);
}
.fleet-why-icon {
display:inline-flex;
width:54px;
height:54px;
align-items:center;
justify-content:center;
border-radius:14px;
margin-bottom:14px;
font-size:1.55rem;
line-height:1;
color:var(--vp-red);
background:linear-gradient(145deg,rgba(193,0,7,0.14) 0%,rgba(193,0,7,0.06) 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.65) inset;
}
.fleet-why-icon.ph-fill::before {
display:block;
line-height:1;
}
.fleet-why-card:nth-child(2) .fleet-why-icon {
color:#1d4ed8;
background:linear-gradient(145deg,rgba(29,78,216,0.12) 0%,rgba(59,130,246,0.06) 100%);
}
.fleet-why-card:nth-child(3) .fleet-why-icon {
color:#0f766e;
background:linear-gradient(145deg,rgba(15,118,110,0.12) 0%,rgba(45,212,191,0.07) 100%);
}
.fleet-why-card h3 {
font-size:1.1rem;
margin-bottom:8px;
color:var(--vp-gray-dark);
}
.fleet-why-card p {
margin:0;
font-size:0.94rem;
line-height:1.62;
color:var(--vp-gray-secondary);
}
.fleet-deletion-panel {
display:flex;
gap:clamp(18px,3vw,26px);
align-items:flex-start;
max-width:860px;
margin:0 auto;
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:var(--radius-lg);
padding:clamp(24px,4vw,36px) clamp(20px,3vw,32px);
box-shadow:var(--shadow-sm);
border-left:4px solid #64748b;
}
.fleet-deletion-icon {
flex-shrink:0;
display:inline-flex;
width:52px;
height:52px;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:1.45rem;
color:#475569;
background:#fff;
border:1px solid #e2e8f0;
}
.fleet-deletion-icon.ph-fill::before {
display:block;
line-height:1;
}
.fleet-deletion-body h2 {
font-size:clamp(1.2rem,2.2vw,1.5rem);
margin:0 0 10px;
color:var(--vp-gray-dark);
line-height:1.3;
}
.fleet-deletion-body > p {
margin:0 0 16px;
font-size:0.95rem;
line-height:1.6;
color:var(--vp-gray-secondary);
}
.fleet-deletion-steps {
margin:0 0 20px;
padding-left:1.25rem;
color:var(--vp-gray-dark);
font-size:0.92rem;
line-height:1.65;
}
.fleet-deletion-steps li {
margin-bottom:8px;
}
.fleet-deletion-note {
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
padding:18px 18px 16px;
}
.fleet-deletion-note h3 {
font-size:0.88rem;
text-transform:uppercase;
letter-spacing:0.06em;
margin:0 0 10px;
color:var(--vp-gray-dark);
}
.fleet-deletion-note ul {
margin:0;
padding-left:1.1rem;
font-size:0.88rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.fleet-deletion-note li {
margin-bottom:6px;
}
.fleet-deletion-support {
margin:14px 0 0;
font-size:0.88rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.fleet-app-intro {
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,0.5fr);
gap:clamp(24px,4vw,40px);
align-items:stretch;
}
.fleet-app-tight {
margin-top:12px;
}
.fleet-app-chips {
list-style:none;
margin:18px 0 22px;
padding:0;
display:flex;
flex-wrap:wrap;
gap:10px;
}
.fleet-app-chips li {
font-size:0.82rem;
font-weight:600;
padding:8px 14px;
border-radius:999px;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
color:var(--vp-gray-dark);
}
.fleet-app-downloads {
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.fleet-store-btn {
display:inline-flex;
align-items:center;
gap:12px;
padding:12px 18px;
border-radius:12px;
text-decoration:none;
font-weight:600;
color:#fff;
transition:var(--transition-fast);
min-height:52px;
}
.fleet-store-btn__icon {
font-size:1.75rem;
line-height:1;
flex-shrink:0;
}
.fleet-store-btn__icon.ph-fill::before {
display:block;
}
.fleet-store-btn__text {
display:flex;
flex-direction:column;
align-items:flex-start;
line-height:1.2;
text-align:left;
}
.fleet-store-btn__small {
font-size:0.65rem;
font-weight:500;
opacity:0.85;
text-transform:uppercase;
letter-spacing:0.04em;
}
.fleet-store-btn--android {
background:#0f172a;
border:1px solid rgba(255,255,255,0.12);
box-shadow:0 4px 14px rgba(15,23,42,0.35);
}
.fleet-store-btn--android:hover {
background:#1e293b;
color:#fff;
}
.fleet-store-btn--ios {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
color:var(--vp-gray-dark);
box-shadow:var(--shadow-sm);
}
.fleet-store-btn--ios:hover {
border-color:rgba(193,0,7,0.35);
color:var(--vp-gray-dark);
}
.fleet-app-ios-note {
margin:14px 0 0;
font-size:0.82rem;
color:var(--vp-gray-secondary);
max-width:520px;
line-height:1.5;
}
.fleet-app-aside {
border-radius:var(--radius-lg);
background:linear-gradient(160deg,#1e293b 0%,#0f172a 100%);
border:1px solid rgba(255,255,255,0.08);
display:flex;
align-items:center;
justify-content:center;
padding:32px 24px;
position:relative;
overflow:hidden;
}
.fleet-app-aside::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse 70% 50% at 20% 0%,rgba(193,0,7,0.35) 0%,transparent 55%);
pointer-events:none;
}
.fleet-app-aside-quote {
position:relative;
z-index:1;
font-family:'Outfit',sans-serif;
font-weight:700;
font-size:clamp(1.05rem,2vw,1.35rem);
color:#f8fafc;
line-height:1.4;
text-align:center;
margin:0;
}
.fleet-manage-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.fleet-manage-card {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:22px 18px 20px;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast);
}
.fleet-manage-card:hover {
border-color:rgba(193,0,7,0.22);
box-shadow:var(--shadow-md);
}
.fleet-manage-icon {
display:inline-flex;
width:44px;
height:44px;
align-items:center;
justify-content:center;
border-radius:12px;
margin-bottom:12px;
font-size:1.25rem;
line-height:1;
color:var(--vp-red);
background:rgba(193,0,7,0.08);
}
.fleet-manage-icon.ph-fill::before {
display:block;
line-height:1;
}
.fleet-manage-card h3 {
font-size:0.98rem;
margin:0 0 6px;
color:var(--vp-gray-dark);
}
.fleet-manage-card p {
margin:0;
font-size:0.86rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.fleet-how-steps {
list-style:none;
counter-reset:fleethow;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
max-width:820px;
}
.fleet-how-steps li {
counter-increment:fleethow;
position:relative;
padding:16px 18px 16px 52px;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
font-size:0.92rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.fleet-how-steps li::before {
content:counter(fleethow);
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
font-family:'Outfit',sans-serif;
font-weight:800;
font-size:0.78rem;
color:#fff;
background:var(--vp-red);
border-radius:8px;
}
.fleet-how-steps strong {
color:var(--vp-gray-dark);
}
.fleet-how-foot {
max-width:720px;
margin-top:32px;
padding-top:28px;
border-top:1px solid var(--vp-border-light);
}
.fleet-how-foot h3 {
font-size:1.02rem;
margin:20px 0 8px;
color:var(--vp-gray-dark);
}
.fleet-how-foot h3:first-child {
margin-top:0;
}
.fleet-how-foot p {
margin:0;
font-size:0.94rem;
line-height:1.62;
color:var(--vp-gray-secondary);
}
.fleet-cta-section {
padding-bottom:clamp(80px,12vw,120px);
}
.fleet-cta-panel {
max-width:760px;
margin:0 auto;
padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px);
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.fleet-cta-panel h2 {
font-size:clamp(1.65rem,3vw,2.15rem);
margin-bottom:12px;
}
.fleet-cta-panel > p {
margin:0 0 24px;
font-size:1.05rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.fleet-cta-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
align-items:center;
}
@media (max-width:992px) {
.fleet-why-grid,
.fleet-manage-grid {
grid-template-columns:1fr;
max-width:480px;
margin-left:auto;
margin-right:auto;
}
.fleet-manage-grid {
max-width:520px;
}
.fleet-app-intro {
grid-template-columns:1fr;
}
.fleet-deletion-panel {
flex-direction:column;
}
}
@media (max-width:768px) {
.fleet-card-mock {
padding:28px 22px 24px;
}
}

/* --- HSE policy page --- */
.hse-page > section {
scroll-margin-top:96px;
}
.hse-page-section {
padding-top:clamp(72px,10vw,100px);
padding-bottom:clamp(72px,10vw,100px);
}
.hse-page-split.split-grid {
gap:clamp(36px,5vw,72px);
align-items:center;
}
.hse-page-hero-img {
min-height:300px;
height:auto;
max-height:520px;
}
.hse-page-hero-img img {
width:100%;
height:100%;
min-height:300px;
object-fit:cover;
object-position:center;
border-radius:0;
display:block;
}
.hse-framework-list {
list-style:none;
margin:22px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
}
.hse-framework-list li {
display:flex;
align-items:flex-start;
gap:12px;
font-size:0.95rem;
line-height:1.55;
color:var(--vp-gray-dark);
padding:12px 14px;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
}
.hse-framework-icon {
flex-shrink:0;
display:inline-flex;
width:36px;
height:36px;
align-items:center;
justify-content:center;
border-radius:10px;
font-size:1.05rem;
color:var(--vp-red);
background:rgba(193,0,7,0.08);
margin-top:1px;
}
.hse-framework-icon.ph-fill::before {
display:block;
line-height:1;
}
.hse-pillar-grid {
list-style:none;
margin:0 auto;
padding:0;
display:grid;
gap:22px;
}
.hse-pillar-grid--two {
grid-template-columns:repeat(2,minmax(0,1fr));
max-width:900px;
}
.hse-pillar-card {
background:var(--vp-bg-main);
border:1px solid rgba(193,0,7,0.16);
border-radius:var(--radius-lg);
padding:28px 24px 26px;
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.bg-alt .hse-pillar-card {
background:var(--vp-bg-main);
}
.hse-pillar-card:hover {
transform:translateY(-4px);
box-shadow:var(--shadow-hover);
border-color:rgba(193,0,7,0.38);
}
.hse-pillar-icon {
display:inline-flex;
width:54px;
height:54px;
align-items:center;
justify-content:center;
border-radius:14px;
margin-bottom:14px;
font-size:1.55rem;
line-height:1;
color:var(--vp-red);
background:linear-gradient(145deg,rgba(193,0,7,0.14) 0%,rgba(193,0,7,0.06) 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.65) inset;
}
.hse-pillar-icon.ph-fill::before {
display:block;
line-height:1;
}
.hse-pillar-card:nth-child(2) .hse-pillar-icon {
color:#1d4ed8;
background:linear-gradient(145deg,rgba(29,78,216,0.12) 0%,rgba(59,130,246,0.06) 100%);
}
.hse-pillar-card h3 {
font-size:1.12rem;
margin:0 0 10px;
color:var(--vp-gray-dark);
}
.hse-pillar-card p {
margin:0;
font-size:0.95rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.hse-unified-section {
padding-bottom:clamp(80px,11vw,104px);
}
.hse-unified-panel {
max-width:880px;
margin:0 auto;
display:flex;
gap:clamp(20px,3vw,28px);
align-items:flex-start;
padding:clamp(28px,4vw,40px) clamp(24px,4vw,36px);
border-radius:var(--radius-lg);
background:linear-gradient(145deg,#1e293b 0%,#0f172a 55%,#1a1a20 100%);
border:1px solid rgba(255,255,255,0.1);
box-shadow:var(--shadow-md);
position:relative;
overflow:hidden;
}
.hse-unified-panel::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse 70% 55% at 100% 0%,rgba(193,0,7,0.32) 0%,transparent 50%);
pointer-events:none;
}
.hse-unified-icon {
flex-shrink:0;
position:relative;
z-index:1;
display:inline-flex;
width:56px;
height:56px;
align-items:center;
justify-content:center;
border-radius:14px;
font-size:1.6rem;
line-height:1;
color:#f8fafc;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.12);
}
.hse-unified-icon.ph-fill::before {
display:block;
line-height:1;
}
.hse-unified-body {
position:relative;
z-index:1;
}
.hse-unified-body h2 {
margin:0 0 12px;
font-size:clamp(1.35rem,2.5vw,1.75rem);
color:#f8fafc;
line-height:1.25;
}
.hse-unified-body p {
margin:0;
font-size:1.02rem;
line-height:1.65;
color:rgba(248,250,252,0.88);
}
.hse-cta-section {
padding-bottom:clamp(80px,12vw,120px);
}
.hse-cta-panel {
max-width:720px;
margin:0 auto;
padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px);
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.hse-cta-panel h2 {
font-size:clamp(1.65rem,3vw,2.1rem);
margin-bottom:12px;
}
.hse-cta-panel > p {
margin:0 0 24px;
font-size:1.05rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.hse-cta-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
align-items:center;
}
@media (max-width:992px) {
.hse-pillar-grid--two {
grid-template-columns:1fr;
max-width:520px;
}
.hse-unified-panel {
flex-direction:column;
align-items:flex-start;
}
}
@media (max-width:768px) {
.hse-page-hero-img {
min-height:240px;
max-height:none;
}
.hse-page-hero-img img {
min-height:240px;
}
}

/* --- CSR page --- */
.csr-page > section {
scroll-margin-top:96px;
}
.csr-page-section {
padding-top:clamp(72px,10vw,100px);
padding-bottom:clamp(72px,10vw,100px);
}
.csr-pillar-strip {
list-style:none;
margin:0 auto clamp(28px,4vw,40px);
padding:0;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
max-width:800px;
}
.csr-pillar-strip__link {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
padding:20px 18px;
height:100%;
text-decoration:none;
color:inherit;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
transition:var(--transition-smooth);
}
.csr-pillar-strip__link:hover {
border-color:rgba(193,0,7,0.35);
box-shadow:var(--shadow-md);
transform:translateY(-3px);
}
.csr-pillar-strip__icon {
font-size:1.75rem;
line-height:1;
color:var(--vp-red);
margin-bottom:4px;
}
.csr-pillar-strip__icon.ph-fill::before {
display:block;
}
.csr-pillar-strip__label {
font-family:'Outfit',sans-serif;
font-weight:700;
font-size:1.15rem;
color:var(--vp-gray-dark);
}
.csr-pillar-strip__hint {
font-size:0.82rem;
font-weight:600;
color:var(--vp-gray-secondary);
line-height:1.4;
}
.csr-topic-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.csr-topic-card {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:26px 22px 22px;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast);
}
.bg-alt .csr-topic-card {
background:var(--vp-bg-main);
}
.csr-topic-card:hover {
border-color:rgba(193,0,7,0.25);
box-shadow:var(--shadow-md);
}
.csr-topic-icon {
display:inline-flex;
width:50px;
height:50px;
align-items:center;
justify-content:center;
border-radius:12px;
margin-bottom:14px;
font-size:1.45rem;
line-height:1;
color:var(--vp-red);
background:rgba(193,0,7,0.1);
}
.csr-topic-icon.ph-fill::before {
display:block;
line-height:1;
}
.csr-topic-card:nth-child(2) .csr-topic-icon {
color:#047857;
background:rgba(4,120,87,0.1);
}
.csr-topic-card:nth-child(3) .csr-topic-icon {
color:#1d4ed8;
background:rgba(29,78,216,0.1);
}
.csr-topic-card h3 {
font-size:1.08rem;
margin:0 0 10px;
color:var(--vp-gray-dark);
}
.csr-topic-card > p {
margin:0 0 14px;
font-size:0.9rem;
line-height:1.58;
color:var(--vp-gray-secondary);
}
.csr-topic-list {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}
.csr-topic-list li {
display:flex;
align-items:flex-start;
gap:10px;
font-size:0.86rem;
line-height:1.5;
color:var(--vp-gray-dark);
font-weight:500;
padding:10px 11px;
background:var(--vp-bg-alt);
border-radius:var(--radius-md);
border:1px solid var(--vp-border-light);
}
.csr-topic-list .ph-fill {
flex-shrink:0;
font-size:1rem;
color:var(--vp-red);
line-height:1.35;
margin-top:1px;
}
.csr-topic-list .ph-fill::before {
display:block;
}
.csr-together-section {
padding-bottom:clamp(72px,10vw,96px);
}
.csr-together-panel {
max-width:880px;
margin:0 auto;
display:flex;
gap:clamp(20px,3vw,28px);
align-items:flex-start;
padding:clamp(28px,4vw,40px) clamp(24px,4vw,36px);
background:linear-gradient(135deg,#ecfdf5 0%,#f0fdf4 45%,#f8fafc 100%);
border:1px solid #bbf7d0;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
border-left:4px solid #059669;
}
.csr-together-icon {
flex-shrink:0;
display:inline-flex;
width:54px;
height:54px;
align-items:center;
justify-content:center;
border-radius:14px;
font-size:1.55rem;
line-height:1;
color:#047857;
background:#fff;
border:1px solid #bbf7d0;
}
.csr-together-icon.ph-fill::before {
display:block;
line-height:1;
}
.csr-together-body h2 {
margin:0 0 12px;
font-size:clamp(1.35rem,2.5vw,1.75rem);
color:var(--vp-gray-dark);
line-height:1.25;
}
.csr-together-body p {
margin:0;
font-size:1.02rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.csr-cta-section {
padding-bottom:clamp(80px,12vw,120px);
}
.csr-cta-panel {
max-width:720px;
margin:0 auto;
padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px);
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.csr-cta-panel h2 {
font-size:clamp(1.65rem,3vw,2.1rem);
margin-bottom:12px;
}
.csr-cta-panel > p {
margin:0 0 24px;
font-size:1.05rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.csr-cta-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
align-items:center;
}
@media (max-width:992px) {
.csr-pillar-strip,
.csr-topic-grid {
grid-template-columns:1fr;
max-width:520px;
margin-left:auto;
margin-right:auto;
}
.csr-pillar-strip {
margin:0 auto clamp(24px,4vw,32px);
}
.csr-together-panel {
flex-direction:column;
}
}

/* --- Contact page --- */
.contact-page > section {
scroll-margin-top:96px;
}
.contact-page-section {
padding-top:clamp(56px,8vw,88px);
padding-bottom:clamp(56px,8vw,88px);
}
.contact-intro-band {
padding-top:clamp(28px,4vw,40px);
padding-bottom:clamp(28px,4vw,40px);
}
.contact-intro-line {
margin:0;
text-align:center;
font-size:1.05rem;
font-weight:600;
color:var(--vp-gray-dark);
max-width:720px;
margin-left:auto;
margin-right:auto;
line-height:1.55;
}
.contact-page-split.split-grid {
gap:clamp(36px,5vw,64px);
align-items:flex-start;
}
.contact-info-cards {
list-style:none;
margin:24px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:14px;
}
.contact-info-card {
display:flex;
gap:16px;
align-items:flex-start;
padding:18px 16px;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.contact-info-card__icon {
flex-shrink:0;
display:inline-flex;
width:46px;
height:46px;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:1.3rem;
line-height:1;
color:var(--vp-red);
background:rgba(193,0,7,0.1);
}
.contact-info-card__icon.ph-fill::before {
display:block;
line-height:1;
}
.contact-info-card h3 {
margin:0 0 6px;
font-size:0.78rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.07em;
color:var(--vp-gray-secondary);
}
.contact-info-card p {
margin:0;
font-size:0.95rem;
line-height:1.55;
color:var(--vp-gray-dark);
}
.contact-info-card a {
color:var(--vp-red);
font-weight:600;
text-decoration:none;
}
.contact-info-card a:hover {
text-decoration:underline;
}
.contact-info-card__link {
display:inline-block;
margin-top:10px;
font-size:0.88rem;
}
.contact-form-panel {
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:clamp(28px,4vw,40px) clamp(22px,3vw,36px);
box-shadow:var(--shadow-md);
}
.contact-form-panel__title {
margin:8px 0 10px;
font-size:clamp(1.35rem,2.5vw,1.65rem);
color:var(--vp-gray-dark);
}
.contact-form-panel__lede {
margin:0;
font-size:0.94rem;
line-height:1.6;
color:var(--vp-gray-secondary);
}
.contact-required {
color:var(--vp-red);
font-weight:700;
}
.contact-form {
margin-top:22px;
display:flex;
flex-direction:column;
gap:18px;
}
.contact-form__row--two {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.contact-field {
display:flex;
flex-direction:column;
gap:6px;
}
.contact-field label {
font-size:0.82rem;
font-weight:600;
color:var(--vp-gray-dark);
}
.contact-field__optional {
font-weight:500;
color:var(--vp-gray-secondary);
font-size:0.78rem;
}
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field select,
.contact-field textarea {
width:100%;
padding:12px 14px;
border-radius:var(--radius-md);
border:1px solid var(--vp-border-light);
background:var(--vp-bg-alt);
font-family:'Inter',sans-serif;
font-size:0.95rem;
color:var(--vp-gray-dark);
transition:border-color 0.2s ease,box-shadow 0.2s ease;
}
.contact-field textarea {
min-height:140px;
resize:vertical;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
outline:none;
border-color:rgba(193,0,7,0.45);
box-shadow:0 0 0 3px rgba(193,0,7,0.12);
}
.contact-field-hint {
margin:6px 0 0;
font-size:0.78rem;
line-height:1.45;
color:var(--vp-gray-secondary);
}
.contact-file {
font-size:0.85rem;
}
.contact-form__submit {
align-self:flex-start;
margin-top:4px;
}
.contact-help-strip {
border-top:1px solid var(--vp-border-light);
border-bottom:1px solid var(--vp-border-light);
}
.contact-help-strip__title {
text-align:center;
font-size:clamp(1.4rem,2.5vw,1.85rem);
margin:0 0 28px;
color:var(--vp-gray-dark);
}
.contact-help-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
}
.contact-help-item {
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:12px;
padding:22px 16px;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
}
.contact-help-item__icon {
font-size:1.75rem;
color:var(--vp-red);
line-height:1;
}
.contact-help-item__icon.ph-fill::before {
display:block;
}
.contact-help-item__label,
.contact-help-item a {
font-size:0.92rem;
line-height:1.5;
color:var(--vp-gray-dark);
font-weight:600;
}
.contact-help-item a {
color:var(--vp-red);
text-decoration:none;
}
.contact-help-item a:hover {
text-decoration:underline;
}
.contact-map-section {
background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
padding:clamp(48px,8vw,80px) 0;
border-top:1px solid rgba(255,255,255,0.06);
}
.contact-map-inner {
display:flex;
justify-content:center;
}
.contact-map-card {
max-width:520px;
text-align:center;
padding:clamp(28px,4vw,40px) clamp(22px,3vw,36px);
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
border-radius:var(--radius-lg);
}
.contact-map-card__icon {
display:inline-flex;
font-size:2.25rem;
color:#f8fafc;
margin-bottom:14px;
line-height:1;
}
.contact-map-card__icon.ph-fill::before {
display:block;
}
.contact-map-card h3 {
margin:0 0 10px;
font-size:1.35rem;
color:#f8fafc;
}
.contact-map-card p {
margin:0 0 22px;
font-size:0.95rem;
line-height:1.6;
color:rgba(248,250,252,0.85);
}
.contact-quick-heading {
text-align:center;
font-size:clamp(1.35rem,2.5vw,1.65rem);
margin:0 0 28px;
color:var(--vp-gray-dark);
}
.contact-quick-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(28px,4vw,48px);
max-width:720px;
margin:0 auto;
}
.contact-quick-col h3 {
font-size:0.82rem;
text-transform:uppercase;
letter-spacing:0.08em;
margin:0 0 14px;
color:var(--vp-gray-secondary);
}
.contact-quick-list {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}
.contact-quick-list a {
font-weight:600;
font-size:0.95rem;
color:var(--vp-gray-dark);
text-decoration:none;
}
.contact-quick-list a:hover {
color:var(--vp-red);
}

/* --- Legal pages (privacy, terms) --- */
.legal-page > section {
scroll-margin-top:96px;
}
.legal-page-section {
padding-top:clamp(56px,8vw,88px);
padding-bottom:clamp(72px,11vw,110px);
}
.legal-hero-lede {
max-width:720px;
margin:16px auto 0;
font-size:1.05rem;
line-height:1.65;
color:rgba(255,255,255,0.92);
}
.legal-hero-lede a {
color:#fff;
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
}
.legal-hero-lede a:hover {
opacity:0.9;
}
.legal-prose {
max-width:760px;
margin:0 auto;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-lg);
padding:clamp(28px,4vw,44px) clamp(22px,4vw,40px);
box-shadow:var(--shadow-sm);
}
.legal-prose h2 {
font-family:'Outfit',sans-serif;
font-size:clamp(1.15rem,2vw,1.35rem);
margin:2rem 0 0.75rem;
color:var(--vp-gray-dark);
line-height:1.3;
}
.legal-prose h2:first-of-type {
margin-top:0;
}
.legal-prose p,
.legal-prose li {
font-size:0.95rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
.legal-prose p {
margin:0 0 1rem;
}
.legal-prose ul {
margin:0 0 1rem;
padding-left:1.25rem;
}
.legal-prose li {
margin-bottom:0.45rem;
}
.legal-prose a {
color:var(--vp-red);
font-weight:600;
text-decoration:none;
}
.legal-prose a:hover {
text-decoration:underline;
}
.legal-updated {
font-size:0.88rem;
padding:14px 16px;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
margin-bottom:1.5rem;
color:var(--vp-gray-dark);
}
.legal-cross {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
align-items:center;
margin-top:clamp(32px,5vw,48px);
}

.sitemap-page-section {
padding-block:clamp(48px,8vw,88px);
}
.sitemap-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(24px,4vw,40px);
align-items:start;
}
.sitemap-col h2 {
font-family:'Outfit',sans-serif;
font-size:clamp(1.05rem,2.2vw,1.25rem);
font-weight:700;
color:var(--vp-gray-dark);
margin:0 0 1rem;
letter-spacing:0.02em;
}
.sitemap-list {
list-style:none;
margin:0;
padding:0;
}
.sitemap-list li {
margin:0 0 0.65rem;
}
.sitemap-list a {
color:var(--vp-gray-secondary);
text-decoration:none;
font-size:0.95rem;
transition:color 0.2s ease;
}
.sitemap-list a:hover {
color:var(--vp-red);
text-decoration:underline;
text-underline-offset:3px;
}
@media (max-width:900px) {
.sitemap-grid {
grid-template-columns:1fr;
}
}

@media (max-width:992px) {
.contact-form__row--two,
.contact-help-grid {
grid-template-columns:1fr;
}
.contact-help-grid {
max-width:400px;
margin-left:auto;
margin-right:auto;
}
.contact-quick-grid {
grid-template-columns:1fr;
max-width:400px;
}
}

/* Glass Card & Premium Components */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.3s ease;
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(193, 0, 7, 0.3);
    transform: translateY(-5px);
}

.feature-list-v3 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.feature-list-v3 li {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--vp-bg-alt);
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid var(--vp-border-light);
    font-weight: 700;
    color: var(--vp-gray-dark);
    transition: all 0.2s ease;
}
.feature-list-v3 li:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transform: translateX(5px);
}
.feature-list-v3 i {
    color: var(--vp-red);
    font-size: 1.5rem;
}

/* --- MOBILE RESPONSIVENESS FIXES --- */

@media (max-width: 991px) {
    .top-bar { display: none; } /* Hide heavy top bar on mobile */
    .ticker-wrap { height: 30px; }
    .ticker-item { font-size: 10px; padding: 0 20px; }
    
    header { padding: 10px 0; }
    .nav-container { padding: 0 20px; }
    .logo img { height: 40px; }
    
    .hero { min-height: auto; padding: 100px 0 60px; }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    
    .split-grid { grid-template-columns: 1fr; gap: 40px; }
    .split-grid.reverse .content-block { order: 1; }
    .split-grid.reverse .image-block { order: 2; }
    
    .image-block { height: 300px; }
    .news-grid, .services-grid, .usps-grid { grid-template-columns: 1fr; gap: 20px; }
    .convenience-content-card { padding: 26px 22px; }
    .responsibility-card { padding: 26px 22px; }
    .convenience-collage-wrap { padding: 10px; }
    .convenience-collage img { max-height: 520px; }
    .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    
    .newsletter-block { padding: 30px 20px; }
    .newsletter-block form { flex-direction: column; }
    
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 480px) {
    .ticker-wrap { display: none; } /* Extra clean mobile */
    section { padding: 60px 0; }
    .section-header h2 { font-size: 1.8rem; }
    .btn { width: 100%; text-align: center; justify-content: center; }
    .convenience-content-card h2 { font-size: 1.7rem; }
    .convenience-collage img { max-height: none; }
    .responsibility-actions { flex-direction: column; }
    .facility-list-pro { grid-template-columns: 1fr; }
    .facility-list-pro li:last-child { grid-column: auto; }
    .trust-row { grid-template-columns: 1fr; }
    .trust-bar { padding: 36px 0; }
}

/* Home page only — first main section is .hero (index) */
@media (max-width: 768px) {
    main:has(> section.hero) .reveal.active {
        margin-top: -35px;
    }
    main:has(> section.hero) .btn {
        padding: 14px 15px;
    }
}