: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;
}
/* Phosphor: avoid inherited heading/body styles breaking icon font (glyphs use ::before) */
i.ph,
i.ph-bold,
i.ph-fill,
i.ph-thin,
i.ph-light,
i.ph[class*=" ph-"] {
font-style:normal;
line-height:1;
speak:never;
-webkit-font-smoothing:antialiased;
}
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-main {
background-color:var(--vp-bg-main);
}
.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:15px;
margin-left:10px;
padding-left:15px;
border-left:1px solid rgba(255,255,255,0.1);
}
.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;
background-repeat:no-repeat;
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;
}
/* ——— Homepage hero (v2) — full-bleed rail, framed media, type + slide dots ——— */
.home-hero-rail {
position:relative;
width:100%;
background:linear-gradient(180deg, #050506 0%, #0a0a0c 50%, #0b0b0d 100%);
padding:0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.home-hero-rail::before {
content:'';
position:absolute;
left:0;
right:0;
top:0;
height:3px;
z-index:4;
background:linear-gradient(90deg, var(--vp-red) 0%, #e85555 38%, rgba(255, 120, 100, 0.15) 72%, transparent 100%);
pointer-events:none;
}
.home-hero {
padding:0;
margin:0;
overflow:visible;
background:transparent;
min-height:0;
}
.home-hero::before {
display:none;
}
.home-hero__frame {
position:relative;
max-width:none;
margin:0;
width:100%;
min-height:clamp(19rem, 48vw, 50rem);
max-height:min(88vh, 50rem);
border-radius:0 0 clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px);
overflow:hidden;
box-shadow:
    0 4px 0 rgba(255, 255, 255, 0.04) inset,
    0 32px 80px -12px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.home-hero__media {
position:absolute;
inset:0;
z-index:0;
}
.home-hero .home-hero__media .hero-bg {
position:absolute;
inset:0;
z-index:0;
}
.home-hero .home-hero__media .hero-slideshow {
z-index:1;
}
/* Cinematic: cover + smooth cross-fade; primary slide still LCP */
.home-hero .hero-slideshow .slide {
animation:none;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transform:scale(1.02);
transition:opacity 0.9s ease, transform 1.1s ease;
}
.home-hero .hero-slideshow .slide.active {
opacity:1;
z-index:1;
transform:scale(1);
}
.home-hero-slide-img {
display:none;
}
/* First hero slide (Vital Fuel Station): keep left side visible under cover crop */
.home-hero .hero-slideshow .slide:first-child {
background-position:left center;
}
.home-hero .hero-slideshow .slide:first-child .home-hero-slide-img {
object-position:left center;
}
@media (prefers-reduced-motion:reduce) {
.home-hero .hero-slideshow .slide {
transform:none !important;
transition:opacity 0.4s ease;
}
}
/* Light touch: old heavy scrim was for headline contrast; keep a small bottom wash so slide dots stay visible on bright photos */
.home-hero__scrim {
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:linear-gradient(180deg, transparent 0%, transparent 62%, rgba(8,8,10,0.22) 100%);
}
.home-hero__shell {
position:absolute;
inset:0;
z-index:3;
display:flex;
align-items:flex-end;
padding:clamp(1.5rem, 4.5vw, 3.25rem);
pointer-events:none;
}
.home-hero__inner {
pointer-events:auto;
max-width:min(100%, 34rem);
}
.home-hero__kicker {
font-family:'Inter', system-ui, sans-serif;
font-size:clamp(0.68rem, 1.4vw, 0.78rem);
font-weight:800;
text-transform:uppercase;
letter-spacing:0.16em;
color:rgba(255,255,255,0.55);
margin:0 0 0.6rem;
}
.home-hero__headline {
font-family:'Outfit', sans-serif;
font-size:clamp(1.85rem, 4.2vw, 3.1rem);
font-weight:800;
line-height:1.08;
letter-spacing:-0.03em;
color:#fff;
margin:0 0 0.65rem;
text-shadow:0 2px 24px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.home-hero__headline-accent {
color:#ffb8b8;
font-weight:800;
}
.home-hero__lede {
font-size:clamp(0.95rem, 1.6vw, 1.1rem);
line-height:1.55;
color:rgba(255,255,255,0.9);
text-shadow:0 1px 12px rgba(0,0,0,0.4);
max-width:30rem;
margin:0 0 1.25rem;
}
.home-hero__dots {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.home-hero__dot {
width:2.1rem;
height:0.32rem;
border-radius:99px;
border:0;
padding:0;
cursor:pointer;
background:rgba(255,255,255,0.2);
transition:transform 0.2s ease, background 0.2s ease, width 0.25s ease;
}
.home-hero__dot:hover {
background:rgba(255,255,255,0.45);
}
.home-hero__dot.is-active {
width:2.5rem;
background:linear-gradient(90deg, var(--vp-red), #ff6b4a);
box-shadow:0 0 16px rgba(193,0,7,0.5);
}
.home-hero__dot:focus-visible {
outline:2px solid #fff;
outline-offset:3px;
}
/* Fuel card lift into hero */
.home-hero-fuel {
position:relative;
z-index:20;
width:100%;
max-width:none;
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
box-sizing:border-box;
}
.home-hero-fuel .fuel-prices-widget {
border-radius:0;
border-left:0;
border-right:0;
}
.fuel-prices-widget {
position:relative;
margin-top:0;
z-index:10;
background:rgba(14,14,18,0.97);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-radius:var(--radius-md);
padding:40px;
border:1px solid rgba(255,255,255,0.07);
box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.18);
overflow:hidden;
}
main:has(.home-hero) .home-hero-fuel {
margin-top:clamp(-2.5rem, -3vw, -1.5rem);
}
@media (min-width:900px) {
    main:has(.home-hero) .home-hero-fuel {
    margin-top:clamp(-2.75rem, -3.2vw, -2rem);
    }
}
.fuel-prices-widget::before,
.fuel-prices-widget::after {
content:'';
position:absolute;
left:0;right:0;
height:2px;
background:linear-gradient(90deg, var(--vp-red) 0%, rgba(193,0,7,0.35) 55%, transparent 100%);
}
.fuel-prices-widget::before { top:0; }
.fuel-prices-widget::after  { bottom:0; }
.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;
}

/* Index homepage — trust bar reveal stagger, who-we-are, journey, fleet CTA */
.trust-row .titem.reveal:nth-child(1) { transition-delay: 0s; }
.trust-row .titem.reveal:nth-child(2) { transition-delay: 0.05s; }
.trust-row .titem.reveal:nth-child(3) { transition-delay: 0.1s; }
.trust-row .titem.reveal:nth-child(4) { transition-delay: 0.15s; }
.trust-row .titem.reveal:nth-child(5) { transition-delay: 0.2s; }
.who-block--home h2 {
font-size:2.8rem;
margin-bottom:20px;
}
.who-block--home .who-lead {
font-size:1.15rem;
line-height:1.8;
margin-bottom:25px;
}
.who-block--home .who-sub {
font-size:1.1rem;
line-height:1.8;
color:var(--vp-gray-secondary);
margin-bottom:30px;
}
.home-journey .journey-year {
font-size:1.8rem;
}
.home-journey .journey-badge {
font-size:0.75rem;
}
.home-journey .journey-milestone:not(:last-child) {
margin-bottom:2.5rem;
}
.home-journey .journey-milestone:last-child {
margin-bottom:0;
}
.home-journey .journey-copy {
font-size:1.05rem;
line-height:1.6;
}
.fleet-cta-row {
display:flex;
gap:13px;
flex-wrap:wrap;
}
.fleet-section .btn-ghost--fleet {
border-color:rgba(255,255,255,0.2) !important;
}
.card3d-reveal-delay {
transition-delay:0.2s;
}

.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;
}
.home-journey.journey-panel {
padding:50px;
}
.home-journey.journey-panel > h3 {
font-size:2.2rem;
margin-bottom:40px;
}
.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 6px;
font-size:0.78rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.9px;
color:#6b7280;
}
.facility-note-meta {
margin:0 0 14px;
font-size:0.88rem;
line-height:1.55;
color:var(--vp-gray-secondary);
max-width:40rem;
}
.convenience-actions {
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
justify-content:flex-start;
margin-top:auto;
padding-top:16px;
}
.convenience-actions .btn {
white-space:normal;
text-align:center;
}
.convenience-btn {
border-radius:14px;
padding:12px 20px;
font-weight:600;
}
.convenience-btn--primary {
box-shadow:0 4px 16px rgba(193,0,7,0.2);
}
.convenience-btn--primary:hover {
box-shadow:0 6px 20px rgba(193,0,7,0.26);
}
.convenience-btn--outline {
border-width:1.5px;
border-color:rgba(15,23,42,0.12);
background:#fff;
box-shadow:0 1px 3px rgba(15,23,42,0.04);
}
.convenience-btn--outline:hover {
border-color:rgba(193,0,7,0.35);
background:#fffdfb;
}
.convenience-collage-link {
display:block;
width:100%;
min-height:0;
text-decoration:none;
color:inherit;
border-radius:12px;
transition:box-shadow 0.22s ease, opacity 0.2s ease;
}
.convenience-collage-link:hover {
opacity:0.98;
box-shadow:0 4px 16px rgba(15,23,42,0.06);
}
.convenience-collage-link:focus-visible {
outline:2px solid var(--vp-red);
outline-offset:4px;
}
.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:nth-last-child(odd):first-child,
.facility-list-pro li:last-child:nth-child(odd) {
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);
}
.facility-marker--new {
background:#16a34a;
box-shadow:0 0 0 4px rgba(22,163,74,0.15);
}
.facility-badge-new {
display:inline-block;
margin-left:7px;
padding:2px 8px;
font-size:0.62rem;
font-weight:700;
letter-spacing:0.6px;
text-transform:uppercase;
color:#16a34a;
background:rgba(22,163,74,0.1);
border:1px solid rgba(22,163,74,0.25);
border-radius:999px;
vertical-align:middle;
}
.convenience-section {
padding-top:48px !important;
padding-bottom:48px !important;
}
.split-grid.convenience-layout,
.convenience-layout {
gap:clamp(20px,2.8vw,40px);
align-items:start;
}
.convenience-content-card {
display:flex;
flex-direction:column;
height:auto;
min-height:0;
align-self:start;
background:#fff;
border:1px solid rgba(15,23,42,0.07);
border-radius:14px;
padding:24px 26px 22px;
box-shadow:0 4px 22px rgba(15,23,42,0.055);
}
.convenience-content-card h2 {
font-size:2.05rem;
margin-bottom:12px;
}
.convenience-content-card p {
color:var(--vp-gray-secondary);
line-height:1.7;
}
.convenience-content-card .facility-list-pro li {
border-bottom:1px solid rgba(15,23,42,0.06);
border-left:1px solid rgba(15,23,42,0.09);
padding:12px 10px 12px 14px;
}
.convenience-content-card .facility-list-pro {
column-gap:18px;
}
.convenience-content-card .mb-4 {
margin-bottom:1.1rem !important;
}
.convenience-facility-list {
flex:1 1 auto;
margin-bottom:0;
min-height:0;
}
/* Convenience: desktop — collage height balanced with text card (does not change left copy/styles) */
@media (min-width:992px) {
.convenience-section > .container {
min-width:0;
}
.split-grid.convenience-layout {
gap:clamp(20px,2.4vw,36px);
}
.convenience-section .convenience-collage-link {
display:block;
width:100%;
/* Visually line up with the text card: similar band to 46–50vh on typical viewports, capped */
height:min(36rem,max(46vh,30rem));
max-height:min(36rem,max(46vh,30rem));
overflow:hidden;
border-radius:12px;
}
.convenience-section .convenience-collage-grid--mosaic {
height:100%;
min-height:0;
max-height:100%;
grid-template-rows:1.6fr 1fr;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.convenience-section .convenience-collage-grid--mosaic .convenience-collage__cell--feature {
min-height:0;
}
.convenience-section .convenience-collage__cell img {
min-height:0;
}
}
/* Homepage — Responsibility / HSE · CSR (editorial split) */
.responsibility-showcase {
position:relative;
padding:clamp(72px,10vw,104px) 0;
overflow:hidden;
background:
    radial-gradient(1200px 480px at 12% 20%, rgba(193,0,7,0.07), transparent 55%),
    radial-gradient(900px 400px at 88% 80%, rgba(27,27,31,0.06), transparent 50%),
    linear-gradient(165deg, #f0f1f5 0%, #e6e7ec 45%, #f4f5f8 100%);
}
.responsibility-showcase::before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:0.45;
background-image:radial-gradient(rgba(15,23,42,0.045) 1px, transparent 1px);
background-size:22px 22px;
}
.responsibility-showcase .container {
position:relative;
z-index:1;
}
.responsibility-showcase__grid {
display:grid;
grid-template-columns:minmax(0, 1.08fr) minmax(0, 0.92fr);
grid-template-areas:
    "resfig resintro"
    "resfig resbody";
gap:clamp(28px,5vw,56px);
align-items:start;
min-width:0;
}
.responsibility-showcase__figure {
grid-area:resfig;
align-self:center;
margin:0;
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
}
.responsibility-showcase__intro {
grid-area:resintro;
padding:clamp(8px,2vw,12px) 0 0;
min-width:0;
}
.responsibility-showcase__body {
grid-area:resbody;
padding:0 0 clamp(8px,2vw,12px);
min-width:0;
}
.responsibility-showcase__frame {
position:relative;
border-radius:22px;
overflow:hidden;
box-shadow:
    0 4px 0 0 rgba(193,0,7,0.35),
    0 28px 56px rgba(17,17,20,0.18),
    0 0 0 1px rgba(255,255,255,0.5) inset;
transform:rotate(-0.35deg);
transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.responsibility-showcase__frame:hover {
transform:rotate(0deg) scale(1.01);
box-shadow:
    0 4px 0 0 rgba(193,0,7,0.5),
    0 36px 64px rgba(17,17,20,0.22),
    0 0 0 1px rgba(255,255,255,0.55) inset;
}
.responsibility-showcase__frame::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg, transparent 55%, rgba(17,17,20,0.22) 100%);
border-radius:inherit;
}
.responsibility-showcase__frame img {
display:block;
width:100%;
height:clamp(320px, 42vw, 520px);
object-fit:cover;
object-position:center 38%;
}
.responsibility-showcase__caption {
margin:0;
padding:0 6px;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.14em;
text-transform:uppercase;
color:#6b7280;
}
.responsibility-showcase__eyebrow {
display:inline-flex;
margin:0 0 6px;
padding:5px 12px;
font-size:0.72rem;
font-weight:800;
letter-spacing:0.12em;
text-transform:uppercase;
color:#fff;
background:linear-gradient(90deg, var(--vp-red), #9a0208);
border-radius:999px;
box-shadow:0 6px 20px rgba(193,0,7,0.28);
}
.responsibility-showcase__tracks {
margin:0 0 14px;
font-size:0.82rem;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:#6b7280;
}
.responsibility-showcase__tracks span {
color:#9ca3af;
padding:0 4px;
}
.responsibility-showcase__title {
margin:0 0 16px;
font-family:'Outfit',sans-serif;
font-size:clamp(2rem,4.6vw,3.15rem);
font-weight:800;
line-height:1.08;
letter-spacing:-0.035em;
color:var(--vp-gray-dark);
max-width:16ch;
}
.responsibility-showcase__lede {
margin:0 0 22px;
max-width:36rem;
font-size:1.06rem;
line-height:1.72;
color:var(--vp-gray-secondary);
}
.responsibility-showcase__intro .responsibility-showcase__lede {
margin-bottom:0;
}
.responsibility-showcase__lede strong {
color:var(--vp-gray-dark);
font-weight:700;
}
@media (max-width:991px) {
.responsibility-showcase {
padding:clamp(52px,9vw,88px) 0;
}
.responsibility-showcase .container {
min-width:0;
}
.responsibility-showcase__grid {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
    "resintro"
    "resfig"
    "resbody";
gap:clamp(18px,4.5vw,28px);
}
.responsibility-showcase__figure {
align-self:stretch;
}
.responsibility-showcase__frame img {
height:min(280px,64vw);
max-height:360px;
}
.responsibility-showcase__title {
max-width:none;
}
.responsibility-showcase__lede {
max-width:none;
}
}
.responsibility-showcase__pillars {
list-style:none;
margin:0 0 20px;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
}
.responsibility-showcase__pillars li {
min-width:0;
display:grid;
grid-template-columns:auto auto minmax(0,1fr);
align-items:center;
gap:14px 16px;
padding:16px 18px;
border-radius:16px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.85);
box-shadow:0 10px 32px rgba(15,23,42,0.07);
transition:transform 0.22s ease, box-shadow 0.22s ease;
}
.responsibility-showcase__pillars li:hover {
transform:translateX(4px);
box-shadow:0 14px 40px rgba(15,23,42,0.1);
}
.responsibility-showcase__num {
font-family:'Outfit',sans-serif;
font-size:1.2rem;
font-weight:800;
color:rgba(193,0,7,0.88);
line-height:1;
min-width:2rem;
}
.responsibility-showcase__icon {
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:12px;
background:rgba(193,0,7,0.1);
color:var(--vp-red);
font-size:1.25rem;
}
.responsibility-showcase__pillar-body {
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.responsibility-showcase__pillar-title {
font-size:0.98rem;
font-weight:700;
color:var(--vp-gray-dark);
line-height:1.25;
}
.responsibility-showcase__pillar-sub {
font-size:0.82rem;
line-height:1.45;
color:var(--vp-gray-secondary);
}
.responsibility-showcase__tags {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:22px;
}
.responsibility-showcase__tags span {
padding:8px 14px;
font-size:0.68rem;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:#4b5563;
background:rgba(255,255,255,0.65);
border:1px solid rgba(15,23,42,0.1);
border-radius:999px;
}
.responsibility-showcase__actions {
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}
.responsibility-showcase__btn {
border-radius:14px;
padding:13px 22px;
font-weight:700;
white-space:normal;
text-align:center;
}
.responsibility-showcase__btn--ghost {
border-width:1.5px;
border-color:rgba(15,23,42,0.14);
background:rgba(255,255,255,0.9);
box-shadow:0 2px 12px rgba(15,23,42,0.06);
}
.responsibility-showcase__btn--solid {
box-shadow:0 6px 24px rgba(193,0,7,0.28);
}
.convenience-collage-wrap {
display:flex;
flex-direction:column;
height:auto;
min-height:0;
width:100%;
padding:8px;
background:#fff;
border:1px solid rgba(15,23,42,0.08);
border-left:2px solid var(--vp-red);
border-radius:16px;
box-shadow:0 8px 32px rgba(15,23,42,0.07);
align-self:start;
}
.convenience-section .convenience-collage-wrap.image-block {
height:auto !important;
min-height:0 !important;
background:#fff;
box-shadow:0 8px 32px rgba(15,23,42,0.07);
}
.convenience-collage-grid {
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-rows:minmax(120px, 1fr);
gap:8px;
width:100%;
flex:0 1 auto;
min-height:0;
}
/* Convenience collage: 4 images — full-width hero + one balanced triptych row (fewer tiles = calmer UI) */
.convenience-collage-grid--mosaic {
grid-template-columns:repeat(3, minmax(0, 1fr));
grid-template-rows:minmax(min(300px, 36vw), auto) minmax(148px, 18vw);
gap:12px;
min-height:0;
max-height:none;
aspect-ratio:unset;
align-items:stretch;
}
.convenience-collage-grid--mosaic .convenience-collage__cell--feature {
grid-column:1 / -1;
grid-row:1;
border-radius:16px;
padding:0;
background:#f1f3f5;
border:1px solid rgba(15,23,42,0.08);
box-shadow:0 10px 36px rgba(15,23,42,0.09);
transition:box-shadow 0.28s ease;
min-height:min(300px, 36vw);
}
.convenience-collage-link:hover .convenience-collage-grid--mosaic .convenience-collage__cell--feature {
box-shadow:0 14px 40px rgba(15,23,42,0.12);
}
.convenience-collage-grid--mosaic .convenience-collage__cell--feature::after {
display:none;
}
.convenience-collage-grid--mosaic .convenience-collage__cell--feature img {
min-height:0;
border-radius:0;
object-fit:cover;
object-position:center 42%;
}
.convenience-collage-grid--mosaic .convenience-collage__cell:not(.convenience-collage__cell--feature) {
border-radius:14px;
border:1px solid rgba(15,23,42,0.08);
box-shadow:none;
transition:transform 0.25s ease, border-color 0.25s ease;
background:#fff;
padding:0;
min-height:0;
}
.convenience-collage-link:hover .convenience-collage-grid--mosaic .convenience-collage__cell:not(.convenience-collage__cell--feature) {
transform:translateY(-2px);
border-color:rgba(193,0,7,0.22);
}
.convenience-collage-grid--mosaic .convenience-collage__cell img {
min-height:0;
max-height:none;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:0;
border:none;
box-sizing:border-box;
}
.convenience-collage-grid--mosaic .convenience-collage__cell--mosque {
grid-column:1;
grid-row:2;
}
.convenience-collage-grid--mosaic .convenience-collage__cell--ev {
grid-column:2;
grid-row:2;
}
.convenience-collage-grid--mosaic .convenience-collage__cell--food {
grid-column:3;
grid-row:2;
}
.convenience-collage-grid--mosaic .convenience-collage__cell--mosque img {
object-position:center 38%;
}
.convenience-collage-grid--mosaic .convenience-collage__cell--ev img {
object-position:center 45%;
}
.convenience-collage-grid--mosaic .convenience-collage__cell--food img {
object-position:center 40%;
}
.convenience-collage__cell {
position:relative;
min-height:0;
overflow:hidden;
border-radius:12px;
background:rgba(15,23,42,0.04);
isolation:isolate;
}
.convenience-collage__cell img {
width:100%;
height:100%;
min-height:140px;
display:block;
object-fit:cover;
border-radius:12px;
border:1px solid rgba(15,23,42,0.06);
transition:transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.convenience-collage__cell--span {
grid-column:1 / -1;
min-height:clamp(120px, 22vw, 200px);
max-height:240px;
}
.convenience-collage__cell--span img {
min-height:120px;
max-height:240px;
object-fit:cover;
}
.convenience-collage-link:hover .convenience-collage-grid--mosaic .convenience-collage__cell--feature img {
transform:scale(1.02);
}
.convenience-collage-link:hover .convenience-collage-grid--mosaic .convenience-collage__cell:not(.convenience-collage__cell--feature) img {
transform:scale(1.03);
}
/* Legacy single-image collage (other pages) */
.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,
.recent-social-card,
.newsletter-block,
.locator-layout,
.about-metric,
.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;
margin-top:50px;
}
.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;
}
#media-center .container > .text-center {
margin-bottom:clamp(28px,4vw,48px);
}
.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.ogra-news-section .ogra-news-mount--row {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2.5vw,24px);
align-items:stretch;
}
#ogra-news.ogra-news-section .ogra-news-mount--row .ogra-news-card {
height:100%;
display:flex;
flex-direction:column;
}
#ogra-news.ogra-news-section .ogra-news-mount--row .ogra-news-actions {
margin-top:auto;
}
@media (max-width:992px) {
#ogra-news.ogra-news-section .ogra-news-mount--row {
grid-template-columns:1fr;
}
}
.vital-ogra-reader-page .vital-ogra-hero-text {
line-height:1.65;
}
.vital-regulatory-sub {
margin:0;
max-width:720px;
font-size:1.02rem;
line-height:1.6;
color:var(--vp-gray-secondary);
}
.ogra-news-mount--blog-archive {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
gap:clamp(20px,3vw,28px);
align-items:stretch;
}
.ogra-news-mount--blog-archive .ogra-news-card {
height:100%;
display:flex;
flex-direction:column;
}
.ogra-news-mount--blog-archive .ogra-news-card-head {
flex-shrink:0;
}
.ogra-news-mount--blog-archive .ogra-news-summary {
flex-grow:1;
}
.ogra-news-mount--blog-archive .ogra-news-actions {
margin-top:auto;
}
.ogra-news-card--has-blog {
transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.ogra-news-card--has-blog:hover {
box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,0.08));
}
.ogra-news-card--text-only .ogra-news-summary {
border-bottom:none;
border-radius:0 0 var(--radius-md) var(--radius-md);
}
.ogra-news-card--text-only .ogra-news-card-head {
border-bottom:1px solid var(--vp-border-light);
}
a.ogra-news-title-link,
a.ogra-news-image-link {
color:inherit;
text-decoration:none;
}
a.ogra-news-title-link:hover,
a.ogra-news-image-link:hover,
a.blog-inline-title:hover,
a.blog-read-more:hover,
a.blog-card-image-link:hover .blog-card-cover img {
opacity:0.92;
}
a.ogra-news-title-link:hover {
text-decoration:underline;
text-decoration-color:var(--vp-red);
text-underline-offset:3px;
}
.ogra-no-external {
margin:0;
padding:12px 16px;
font-size:0.88rem;
color:var(--vp-gray-secondary);
}
.vital-blog-post-card {
max-width:100%;
}
.vital-article-h {
margin:0;
font-size:clamp(1.15rem,2.2vw,1.4rem);
line-height:1.35;
}
a.blog-inline-title {
color:var(--vp-gray-dark);
text-decoration:none;
}
a.blog-inline-title:hover {
text-decoration:underline;
text-decoration-color:var(--vp-red);
}
.blog-card-excerpt {
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);
flex-grow:1;
}
.blog-card-read {
margin:0;
padding:12px 24px 18px;
background:var(--vp-bg-alt);
}
a.blog-read-more {
font-weight:700;
font-size:0.9rem;
color:var(--vp-red);
text-decoration:none;
}
a.blog-read-more::after {
content:" \2192";
}
.vital-article-body {
padding:0 0 24px;
max-width:40rem;
margin:0 auto;
}
.vital-article-para {
margin:0 0 1.1em;
padding:0 24px;
font-size:1.04rem;
line-height:1.75;
color:var(--vp-gray-dark);
}
.vital-article-para:first-of-type {
padding-top:8px;
}
.ogra-news-card.vital-blog-post-card .vital-article-para {
padding-left:clamp(1rem,3vw,1.5rem);
padding-right:clamp(1rem,3vw,1.5rem);
}
.vital-blog-article-list {
display:flex;
flex-direction:column;
gap:clamp(40px,6vw,56px);
max-width:min(100%, 880px);
margin:0 auto;
}
.vital-blog-article-list .vital-blog-post-card {
box-shadow:var(--shadow-sm);
}
@media (min-width:900px) {
.ogra-news-mount--blog-archive .vital-article-para,
.vital-article-body .vital-article-para {
font-size:1.05rem;
}
}
.ogra-news-empty {
margin:0;
color:var(--vp-gray-secondary);
font-size:1rem;
}
/* ——— Blog index grid + article page ——— */
.vital-blog-index-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
gap:clamp(20px,3vw,28px);
align-items:stretch;
max-width:1200px;
margin:0 auto;
}
.vital-blog-index-grid .vital-blog-post-card {
box-shadow:var(--shadow-sm);
max-width:none;
}
.blog-card-category {
display:inline-block;
margin:0 0 6px;
padding:4px 10px;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--vp-red);
background:rgba(200,32,40,0.08);
border-radius:999px;
}
.blog-card-cover--placeholder {
min-height:220px;
background:linear-gradient(135deg,#2b2b31 0%,#4a4a52 100%);
}
.blog-card-image-link--empty .blog-card-cover--placeholder {
border-bottom:1px solid var(--vp-border-light);
}
.blog-article-page {
padding-bottom:clamp(48px,8vw,80px);
}
.blog-breadcrumb {
padding:24px 16px 8px;
max-width:1200px;
}
.blog-breadcrumb__list {
display:flex;
flex-wrap:wrap;
gap:8px 6px;
margin:0;
padding:0;
list-style:none;
font-size:0.88rem;
color:var(--vp-gray-secondary);
}
.blog-breadcrumb__list li:not(:last-child)::after {
content:"/";
margin-left:6px;
opacity:0.45;
}
.blog-breadcrumb__list a {
color:var(--vp-red);
text-decoration:none;
font-weight:600;
}
.blog-breadcrumb__list a:hover {
text-decoration:underline;
}
.blog-article-hero {
position:relative;
color:#fff;
margin-bottom:clamp(28px,5vw,48px);
}
.blog-article-hero--no-image {
background:linear-gradient(160deg,#1a1a1f 0%,#2b2b31 100%);
padding-bottom:clamp(24px,4vw,40px);
}
.blog-article-hero__media {
position:relative;
max-height:min(72vh,560px);
overflow:hidden;
}
.blog-article-hero__img {
display:block;
width:100%;
height:min(72vh,560px);
object-fit:cover;
}
.blog-article-hero__overlay {
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(17,17,20,0.92) 0%,rgba(17,17,20,0.35) 55%,transparent 100%);
pointer-events:none;
}
.blog-article-hero__text {
position:relative;
z-index:2;
max-width:880px;
padding:clamp(24px,4vw,40px) 16px 32px;
}
.blog-article-hero:not(.blog-article-hero--no-image) .blog-article-hero__text {
margin-top:-clamp(80px,14vw,140px);
padding-bottom:8px;
}
.blog-article-hero__text--plain {
padding-top:clamp(32px,5vw,48px);
}
.blog-article-kicker {
display:inline-block;
margin-bottom:12px;
font-size:0.8rem;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
opacity:0.9;
}
.blog-article-title {
margin:0;
font-family:'Outfit',sans-serif;
font-size:clamp(1.75rem,4.5vw,2.75rem);
font-weight:800;
line-height:1.15;
letter-spacing:-0.02em;
text-shadow:0 2px 24px rgba(0,0,0,0.35);
}
.blog-article-hero--no-image .blog-article-title {
text-shadow:none;
}
.blog-article-meta {
margin-top:16px;
font-size:0.95rem;
opacity:0.92;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 4px;
}
.blog-article-meta__sep {
opacity:0.55;
}
.blog-article-layout {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:clamp(28px,4vw,40px);
max-width:1100px;
padding:0 16px;
}
@media (min-width:1024px) {
.blog-article-layout:has(.blog-article-aside) {
grid-template-columns:minmax(200px,240px) minmax(0,680px);
align-items:start;
gap:40px 48px;
}
}
.blog-article-aside {
position:relative;
}
@media (min-width:1024px) {
.blog-article-aside {
position:sticky;
top:100px;
}
}
.blog-toc {
padding:20px 18px;
background:var(--vp-bg-alt,#f6f6f7);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
}
.blog-toc__title {
margin:0 0 12px;
font-size:0.78rem;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--vp-gray-secondary);
}
.blog-toc__list {
margin:0;
padding:0 0 0 1.1rem;
font-size:0.9rem;
line-height:1.45;
color:var(--vp-gray-dark);
}
.blog-toc__item {
margin-bottom:8px;
}
.blog-toc__item--h3 {
list-style-type:circle;
}
.blog-toc__list a {
color:var(--vp-gray-dark);
text-decoration:none;
font-weight:500;
}
.blog-toc__list a:hover {
color:var(--vp-red);
text-decoration:underline;
}
.blog-article-main {
min-width:0;
}
.blog-share {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 12px;
margin-bottom:28px;
padding-bottom:20px;
border-bottom:1px solid var(--vp-border-light);
}
.blog-share__label {
font-size:0.78rem;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--vp-gray-secondary);
margin-right:4px;
}
.blog-share__btn {
display:inline-block;
padding:8px 14px;
font-size:0.82rem;
font-weight:600;
color:var(--vp-gray-dark);
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:8px;
text-decoration:none;
transition:background 0.15s ease,border-color 0.15s ease;
}
.blog-share__btn:hover {
border-color:var(--vp-red);
color:var(--vp-red);
}
.blog-prose {
font-size:1.05rem;
line-height:1.78;
color:var(--vp-gray-dark);
}
.blog-prose > *:first-child {
margin-top:0;
}
.blog-prose h2 {
margin:2.2em 0 0.75em;
font-family:'Outfit',sans-serif;
font-size:clamp(1.35rem,2.8vw,1.65rem);
font-weight:800;
line-height:1.25;
letter-spacing:-0.02em;
color:var(--vp-gray-dark);
scroll-margin-top:96px;
}
.blog-prose h3 {
margin:1.6em 0 0.55em;
font-family:'Outfit',sans-serif;
font-size:1.18rem;
font-weight:700;
line-height:1.3;
scroll-margin-top:96px;
}
.blog-prose p {
margin:0 0 1.15em;
}
.blog-prose ul,.blog-prose ol {
margin:0 0 1.15em;
padding-left:1.35em;
}
.blog-prose li {
margin-bottom:0.45em;
}
.blog-prose blockquote {
margin:1.4em 0;
padding:16px 20px;
border-left:4px solid var(--vp-red);
background:var(--vp-bg-alt);
font-style:italic;
color:var(--vp-gray-secondary);
}
.blog-prose pre {
margin:1.4em 0;
padding:16px 18px;
overflow-x:auto;
font-size:0.88rem;
line-height:1.55;
background:#1a1a1f;
color:#e8e8ea;
border-radius:10px;
}
.blog-prose code {
font-size:0.9em;
background:rgba(43,43,49,0.08);
padding:2px 6px;
border-radius:4px;
}
.blog-prose pre code {
background:transparent;
padding:0;
font-size:inherit;
}
.blog-prose a.blog-prose__a--internal {
color:var(--vp-red);
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
}
.blog-prose a.blog-prose__a--external {
color:var(--vp-red);
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
}
.blog-prose a.blog-prose__a--external::after {
content:" \2197";
font-size:0.85em;
opacity:0.75;
text-decoration:none;
}
.blog-author-card {
margin-top:clamp(40px,6vw,56px);
padding:28px 24px;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
}
.blog-author-card__h {
margin:0 0 8px;
font-size:0.82rem;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--vp-gray-secondary);
}
.blog-author-card__name {
margin:0 0 8px;
font-family:'Outfit',sans-serif;
font-size:1.2rem;
font-weight:700;
}
.blog-author-card__note {
margin:0;
font-size:0.95rem;
line-height:1.6;
color:var(--vp-gray-secondary);
}
.blog-author-card__note a {
color:var(--vp-red);
font-weight:600;
}
.blog-related {
margin-top:clamp(48px,8vw,72px);
padding:clamp(40px,6vw,56px) 0;
}
.blog-related__h {
margin:0 0 24px;
font-family:'Outfit',sans-serif;
font-size:clamp(1.35rem,3vw,1.6rem);
}
.blog-related__grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
gap:24px;
}
.blog-related-card {
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-sm);
display:flex;
flex-direction:column;
}
.blog-related-card__img-link {
display:block;
}
.blog-related-card__img {
width:100%;
height:180px;
object-fit:cover;
}
.blog-related-card__body {
padding:18px 20px 22px;
flex-grow:1;
}
.blog-related-card__date {
font-size:0.78rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--vp-red);
margin-bottom:8px;
}
.blog-related-card__title {
margin:0;
font-size:1.05rem;
font-family:'Outfit',sans-serif;
line-height:1.35;
}
.blog-related-card__title a {
color:var(--vp-gray-dark);
text-decoration:none;
}
.blog-related-card__title a:hover {
color:var(--vp-red);
text-decoration:underline;
}
.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-image img {
display:block;
width:100%;
height:220px;
object-fit:cover;
border-bottom:1px solid var(--vp-border-light);
}
.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;
}
.home-hero-fuel .fuel-prices-widget {
margin-left:0;
margin-right:0;
}
}
.recent-social-block {
margin-top:48px;
padding:32px 28px 36px;
border:1px solid var(--vp-border-light);
border-radius:16px;
background:linear-gradient(165deg,#f1f1f4 0%,#e8e8ed 100%);
box-shadow:0 4px 24px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.5);
}
.recent-social-block__head {
margin-bottom:24px;
max-width:40rem;
}
.recent-social-block h3 {
font-size:1.5rem;
font-weight:800;
letter-spacing:-0.02em;
margin:0 0 8px;
color:var(--vp-gray-dark);
}
.recent-social-block__lede {
margin:0;
font-size:0.95rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.recent-social-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.recent-social-fb-hint {
font-size:0.8rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--vp-gray-dark);
margin:0 0 10px;
}
.recent-social-fb-embed {
min-width:0;
max-width:100%;
width:100%;
margin:0;
}
.recent-social-fb-embed .fb-page,
.recent-social-fb-embed .fb_iframe_widget,
.recent-social-fb-embed .fb_iframe_widget span,
.recent-social-fb-embed .fb_iframe_widget iframe {
max-width:100% !important;
width:100% !important;
}
.connect-with-us-grid {
display:grid;
align-items:stretch;
gap:18px 20px;
margin-top:0;
min-width:0;
}
.connect-with-us-grid--3 {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.connect-with-us-grid--2 {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.connect-with-us-col {
min-width:0;
display:flex;
flex-direction:column;
}
.connect-pillar {
flex:1;
display:flex;
flex-direction:column;
min-width:0;
min-height:100%;
padding:20px 18px 22px;
background:#fff;
border:1px solid rgba(15,23,42,0.08);
border-radius:14px;
box-shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 22px rgba(0,0,0,0.07);
}
.connect-pillar__kicker {
font-size:0.7rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.1em;
color:#6b7080;
margin:0 0 10px;
line-height:1.2;
}
.connect-pillar__body--fb {
flex:0 0 auto;
min-width:0;
padding:6px 6px 0;
background:#f3f4f6;
border-radius:12px;
border:1px solid rgba(15,23,42,0.07);
overflow:hidden;
}
.connect-pillar__fill {
flex:1 1 auto;
min-height:4px;
margin-top:6px;
}
.connect-pillar--feed .fb-latest-block--in-connect,
.fb-latest-block--in-connect {
margin:0 0 16px;
padding:14px 12px 16px;
background:#fafbfc;
border:1px solid rgba(15,23,42,0.07);
border-radius:12px;
box-shadow:none;
}
.connect-pillar--feed .fb-latest-block--in-connect h3 {
font-size:1rem;
font-weight:800;
letter-spacing:-0.01em;
margin:0 0 8px;
}
.connect-pillar--feed .fb-latest-block--in-connect .fb-latest-intro {
margin:0 0 12px;
font-size:0.88rem;
}
.connect-pillar--showcase > h3#partnership-showcase-title,
.connect-pillar--showcase > h3 {
font-size:1.1rem;
font-weight:800;
letter-spacing:-0.02em;
line-height:1.3;
margin:0 0 8px;
}
.connect-pillar--showcase .showcase-lead {
margin:0 0 14px;
font-size:0.9rem;
line-height:1.5;
max-width:none;
}
.connect-pillar--showcase .showcase-empty {
margin:0;
font-size:0.88rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.connect-pillar--showcase .showcase-empty a {
font-weight:700;
color:var(--vp-red);
text-decoration:underline;
text-underline-offset:0.15em;
}
.connect-pillar--video .connect-videos-title {
font-size:1.1rem;
}
.connect-videos-title {
margin:0 0 8px;
font-size:1.1rem;
font-weight:800;
line-height:1.3;
color:var(--vp-gray-dark);
}
.connect-videos-lead {
margin:0 0 14px;
font-size:0.9rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
.connect-videos-btn {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
width:100%;
padding:12px 16px;
margin-bottom:10px;
border-radius:var(--radius-sm);
text-decoration:none;
font-weight:800;
line-height:1.25;
transition:var(--transition-fast,transform 0.2s ease,box-shadow 0.2s ease);
}
.connect-videos-btn-lbl {
font-size:1rem;
}
.connect-videos-btn-sub {
font-size:0.78rem;
font-weight:600;
opacity:0.92;
}
.connect-videos-btn--yt {
background:#c00;
border:1px solid #a00;
color:#fff;
}
.connect-videos-btn--yt .connect-videos-btn-sub {
color:rgba(255,255,255,0.9);
}
.connect-videos-btn--tt {
background:#111;
border:1px solid #1a1a1a;
color:#f5f5f5;
}
.connect-videos-btn--tt .connect-videos-btn-sub {
color:rgba(255,255,255,0.8);
}
.connect-videos-btn:hover {
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}
.connect-videos-btn--tt:hover,
.connect-videos-btn--yt:hover {
color:#fff;
}
.connect-videos-all {
display:inline-block;
margin-top:4px;
font-size:0.9rem;
font-weight:800;
color:var(--vp-red);
text-decoration:underline;
}
.connect-videos-all:hover {
color:var(--vp-gray-dark);
}
.fb-latest-block--in-connect {
margin-top:0;
}
.fb-latest-block--in-connect .fb-latest-grid {
grid-template-columns:1fr;
gap:12px;
}
@media (min-width:1025px) {
.connect-with-us-col--feed .fb-latest-block--in-connect + .recent-social-fb-hint,
.connect-with-us-col--feed .recent-social-fb-hint {
margin-top:0;
}
}
@media (max-width:1024px) {
.connect-with-us-grid--3,
.connect-with-us-grid--2 {
grid-template-columns:1fr;
}
}
.showcase-carousel {
width:100%;
min-width:0;
}
.showcase-carousel-viewport {
width:100%;
overflow:hidden;
border-radius:12px;
position:relative;
background:linear-gradient(180deg,#f0f0f2 0%,#e8e8ec 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}
.showcase-carousel-track {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:row;
align-items:stretch;
transition:transform 0.45s ease;
will-change:transform;
}
.showcase-carousel-slide {
position:relative;
}
.showcase-tile-in--slide {
min-height:0;
height:100%;
background:#fff;
border:1px solid rgba(15,23,42,0.08);
}
.connect-pillar--showcase .showcase-featured-card {
border-color:rgba(15,23,42,0.08);
}
.showcase-carousel-nav {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
gap:8px 12px;
margin-top:16px;
padding-top:4px;
width:100%;
min-width:0;
}
.showcase-carousel-nav .showcase-carousel-btn {
flex:0 0 auto;
}
.showcase-carousel-nav .showcase-carousel-dots {
flex:1 1 auto;
min-width:0;
justify-content:center;
}
.showcase-carousel-btn {
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
min-width:44px;
min-height:44px;
padding:0;
border:1px solid #c4c6cf;
border-radius:999px;
background:linear-gradient(180deg,#fff 0%,#f6f6f7 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 2px 4px rgba(0,0,0,0.07);
color:#2a2d36;
cursor:pointer;
line-height:0;
flex-shrink:0;
transition:color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease,transform 0.15s ease;
}
.showcase-carousel-btn:hover {
border-color:var(--vp-red);
color:var(--vp-red);
background:#fff;
box-shadow:0 2px 8px rgba(193,0,7,0.12);
}
.showcase-carousel-btn:active {
transform:scale(0.97);
}
.showcase-carousel-ico {
display:block;
pointer-events:none;
}
.showcase-carousel-dots {
display:flex;
align-items:center;
justify-content:center;
gap:7px;
flex-wrap:wrap;
min-width:0;
padding:0 4px;
}
.showcase-carousel-dot {
width:8px;
height:8px;
padding:0;
border:0;
border-radius:999px;
background:#d0d2d8;
cursor:pointer;
transition:background 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;
}
.showcase-carousel-dot.is-active {
background:var(--vp-red);
transform:scale(1.2);
box-shadow:0 0 0 2px rgba(193,0,7,0.2);
}
.showcase-carousel-dot:hover {
background:rgba(193,0,7,0.45);
}
@media (prefers-reduced-motion:reduce) {
.showcase-carousel-track {
transition:none;
}
}
.showcase-block {
margin-top:40px;
padding:28px;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
background:var(--vp-bg-alt);
}
.showcase-block--connect {
margin-top:0;
}
.showcase-block--connect.connect-pillar {
padding:20px 18px 22px;
background:#fff;
border:1px solid rgba(15,23,42,0.08);
box-shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 22px rgba(0,0,0,0.07);
}
.showcase-block--connect:not(.connect-pillar) {
padding:20px 18px;
}
.showcase-block--connect .showcase-carousel-nav {
margin-top:14px;
gap:6px 8px;
}
.showcase-block--connect .showcase-carousel-btn {
width:40px;
height:40px;
min-width:40px;
min-height:40px;
}
.showcase-block--connect .showcase-carousel-ico {
width:20px;
height:20px;
}
.showcase-block--connect .showcase-mosaic {
grid-template-columns:1fr;
grid-auto-rows:auto;
gap:10px;
}
.showcase-block--connect .showcase-mosaic-tile--wide {
grid-column:1;
}
.showcase-block--connect .showcase-tile-in {
min-height:0;
}
.showcase-block--connect .showcase-featured {
grid-template-columns:1fr;
gap:12px;
}
.showcase-block h3 {
font-size:1.35rem;
margin:0 0 10px;
}
.showcase-lead {
margin:0 0 20px;
font-size:0.95rem;
line-height:1.55;
color:var(--vp-gray-secondary);
max-width:50rem;
}
.showcase-lead a {
color:var(--vp-red);
font-weight:700;
text-decoration:underline;
}
.fb-latest-block {
margin-top:36px;
padding:28px;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
background:var(--vp-bg-alt);
}
.fb-latest-block h3 {
font-size:1.35rem;
margin:0 0 8px;
}
.fb-latest-intro {
margin:0 0 20px;
font-size:0.95rem;
line-height:1.55;
color:var(--vp-gray-secondary);
max-width:50rem;
}
.fb-latest-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.fb-latest-item {
min-width:0;
}
.fb-latest-card {
height:100%;
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-sm);
overflow:hidden;
box-shadow:var(--shadow-sm);
display:flex;
flex-direction:column;
transition:var(--transition-fast,transform 0.2s ease,box-shadow 0.2s ease);
}
.fb-latest-card:hover {
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(0,0,0,0.08);
}
.fb-latest-media {
position:relative;
aspect-ratio:16/10;
min-height:160px;
background:#e8e8ec;
}
.fb-latest-img {
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.fb-latest-img--svg {
object-fit:contain;
padding:10px;
background:#f2f2f4;
}
.fb-latest-body {
padding:16px 18px 20px;
flex:1;
display:flex;
flex-direction:column;
gap:8px;
}
.fb-latest-date {
font-size:0.72rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.05em;
color:var(--vp-gray-secondary);
}
.fb-latest-title {
margin:0;
font-size:1.05rem;
font-weight:800;
line-height:1.3;
color:var(--vp-gray-dark);
}
.fb-latest-excerpt {
margin:0;
font-size:0.9rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
@media (max-width:900px) {
.fb-latest-grid {
grid-template-columns:1fr;
}
}
.showcase-mosaic {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:minmax(120px,auto);
gap:12px;
}
.showcase-mosaic-tile--wide {
grid-column:span 2;
}
.showcase-tile-in {
height:100%;
min-height:200px;
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-sm);
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow:var(--shadow-sm);
transition:var(--transition-fast,transform 0.2s ease,box-shadow 0.2s ease);
}
.showcase-tile-in:hover {
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.showcase-tile-img {
position:relative;
aspect-ratio:4/3;
min-height:140px;
background:#e8e8ec;
}
.showcase-tile-img img {
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.showcase-tile-cap {
padding:12px 14px 16px;
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}
.showcase-time {
font-size:0.72rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.05em;
color:var(--vp-gray-secondary);
}
.showcase-tile-title {
margin:0;
font-size:0.9rem;
font-weight:800;
line-height:1.35;
color:var(--vp-gray-dark);
}
.showcase-tile-sum {
margin:0;
font-size:0.8rem;
line-height:1.45;
color:var(--vp-gray-secondary);
}
.showcase-featured {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
}
.showcase-featured-card {
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-sm);
display:flex;
flex-direction:column;
}
.showcase-featured-card-img {
aspect-ratio:16/10;
min-height:200px;
background:#e8e8ec;
}
.showcase-featured-card-img img {
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.showcase-featured-card-body {
padding:16px 18px 20px;
}
.showcase-card-title {
margin:8px 0 0;
font-size:1.1rem;
font-weight:800;
line-height:1.35;
}
.showcase-card-summary {
margin:10px 0 0;
font-size:0.9rem;
line-height:1.55;
color:var(--vp-gray-secondary);
}
@media (max-width:860px) {
.showcase-mosaic {
grid-template-columns:repeat(2,1fr);
}
.showcase-mosaic-tile--wide {
grid-column:span 2;
}
.showcase-featured {
grid-template-columns:1fr;
}
}
.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;
}
.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:clamp(168px, 22vw, 198px);
width:100%;
padding:clamp(14px, 2.2vw, 20px) clamp(12px, 2vw, 18px);
background:var(--vp-bg-alt);
border-bottom:1px solid var(--vp-border-light);
}
.partner-logo-frame img {
max-width:min(100%, 280px);
max-height:clamp(118px, 14vw, 152px);
width:auto;
height:auto;
object-fit:contain;
object-position:center;
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:clamp(150px, 42vw, 172px);
padding:14px 12px;
}
.partner-logo-frame img {
max-width:min(100%, 260px);
max-height:clamp(102px, 26vw, 132px);
}
}
@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 {
display:block;
width:100%;
text-align:left;
}
.trust-bar .trust-lbl {
border-right:none;
border-bottom:none;
padding-right:0;
padding-bottom:0;
width:auto;
max-width:11rem;
margin-bottom:0;
text-align:left;
}
.trust-bar .trust-row {
width:auto;
flex:1;
min-width:0;
margin-left:0;
margin-right:0;
}
.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:not(.home-hero) {
padding:120px 0 160px;
}
.sub-hero .hero-bg .slide {
background-size:contain;
background-position:center center;
}
.sub-hero {
min-height:400px;
padding:120px 0 72px;
}
.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 16px 22px;
}
.showcase-block {
padding:20px;
}
.connect-pillar {
padding:16px 14px 18px;
}
.fb-latest-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) {
.fleet-perks {
grid-template-columns:1fr;
}
}
.locator-section {
background:var(--vp-bg-alt);
padding:80px 0 36px;
}
.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:12px;
padding:11px 14px 11px 13px;
cursor:pointer;
transition:background 0.15s ease, border-left-color 0.15s ease, border-color 0.15s ease;
border:1px solid rgba(255,255,255,0.07);
border-left:3px solid transparent;
border-radius:8px;
margin-bottom:5px;
background:rgba(255,255,255,0.022);
}
.station-item:last-child {margin-bottom:0;}
.station-item:hover {
background:rgba(255,255,255,0.05);
border-color:rgba(255,255,255,0.11);
border-left-color:rgba(193,0,7,0.65);
}
.station-item.active {
background:rgba(193,0,7,0.09);
border-color:rgba(193,0,7,0.28);
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-name-wrap {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.station-co-badge,
.locator-directory-co-badge,
.popup-badge--co {
display:inline-flex;
align-items:center;
justify-content:center;
padding:2px 8px;
border-radius:999px;
font-size:0.68rem;
font-weight:800;
letter-spacing:0.2px;
text-transform:uppercase;
background:#ffe8a3;
color:#6b4700;
border:1px solid #e6c66c;
}
.station-fuel-prices {
font-size:0.72rem;
color:rgba(255,255,255,0.82);
margin-top:6px;
font-weight:600;
line-height:1.45;
display:flex;
flex-wrap:wrap;
gap:8px 12px;
}
.station-fuel-updated {
font-size:0.68rem;
color:rgba(255,255,255,0.52);
font-weight:500;
margin-top:2px;
width:100%;
}
.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--co {
background:linear-gradient(90deg, rgba(255,232,163,0.35), rgba(255,255,255,0));
}
.locator-directory-item__prices {
grid-column:1 / -1;
font-size:0.76rem;
color:var(--vp-gray-dark);
opacity:0.86;
margin-top:-4px;
}
.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-leaflet-pin.is-co {
box-shadow:
    0 0 0 2px #f4cd63,
    0 0 0 5px rgba(244,205,99,0.35),
    0 8px 20px rgba(193,0,7,0.3);
}
.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--co {
color:#6b4700;
background:#ffe8a3;
border:1px solid #e6c66c;
margin-right:6px;
}
.popup-inner .station-fuel-prices {
color:var(--vp-gray-dark);
font-size:0.78rem;
margin-top:8px;
gap:6px 10px;
}
.popup-inner .station-fuel-updated {
color:var(--vp-gray-secondary);
}
.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;
}
.station-co-badge,
.locator-directory-co-badge {
font-size:0.62rem;
padding:2px 6px;
}
.station-fuel-prices {
font-size:0.7rem;
gap:6px 10px;
}
.locator-directory-item__prices {
font-size:0.72rem;
}
}
/* 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(45vh,380px);
height:45vh;
}
#locator .locator-sidebar {
max-height:none;
height:auto;
min-height:0;
overflow-y:auto;
}
#locator .locator-results {
flex:none;
height:auto;
max-height:42vh;
overflow-y:auto;
min-height:160px;
}
#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:40vh;
}
#locator .locator-results {
max-height:38vh;
min-height:140px;
}
}

/* --- LOCATOR ENHANCEMENTS --- */
/* Cluster icon */
.vital-cluster-wrap{background:transparent!important;border:none!important;}
.vital-cluster{width:38px;height:38px;background:var(--vp-red);border:2.5px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(193,0,7,0.45),0 0 0 5px rgba(193,0,7,0.15);font-family:'Inter',sans-serif;font-size:0.76rem;font-weight:800;color:#fff;cursor:pointer;transition:transform 0.15s ease;}
.vital-cluster:hover{transform:scale(1.12);}
/* Pulsing user location dot */
.user-loc-wrap{background:transparent!important;border:none!important;}
.user-loc-dot{width:22px;height:22px;background:#2563eb;border:3px solid #fff;border-radius:50%;position:relative;box-shadow:0 2px 8px rgba(37,99,235,0.55);}
.user-loc-ring{position:absolute;inset:-9px;border:2px solid rgba(37,99,235,0.5);border-radius:50%;animation:vp-loc-ring 2s ease-out infinite;}
@keyframes vp-loc-ring{0%{transform:scale(0.5);opacity:1;}100%{transform:scale(1.9);opacity:0;}}
/* Spin for loading states */
@keyframes vp-spin{to{transform:rotate(360deg);}}
.vp-spin{display:inline-block;animation:vp-spin 0.75s linear infinite;}
/* Near me button states */
.locator-tool-btn.is-active{background:rgba(37,99,235,0.22);border-color:rgba(37,99,235,0.5);color:#93c5fd;}
.locator-tool-btn.is-active:hover{background:rgba(37,99,235,0.32);}

/* ---- UNIFIED LOCATOR SHELL (homepage + locator page shared base) ---- */
.locator-page-map-shell {
    display:flex;
    flex-direction:row;
    background:#0a0a0c;
    overflow:hidden;
    height:min(72vh,680px);
    min-height:480px;
    margin-top:32px;
    margin-left:40px;
    margin-right:40px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,0.06);
}
.locator-page-map-shell .locator-sidebar {
    width:min(400px,100%);
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-height:0;
}
.locator-page-map-shell .locator-results {
    flex:1;
    min-height:0;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,0.15) transparent;
    padding:10px 12px;
}
.locator-page-map-shell .locator-results::-webkit-scrollbar{width:5px;}
.locator-page-map-shell .locator-results::-webkit-scrollbar-track{background:transparent;}
.locator-page-map-shell .locator-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:10px;}
.locator-page-map-shell #map {
    flex:1;
    height:100%;
    min-height:320px;
    z-index:1;
}
/* Shared search-wrap + search-inner (both pages) */
.locator-search-wrap {
    padding:16px 18px 12px;
    background:rgba(0,0,0,0.22);
    border-bottom:1px solid rgba(255,255,255,0.06);
    flex-shrink:0;
}
.search-inner {position:relative;}
.search-inner i {
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(255,255,255,0.4);
    pointer-events:none;
    font-size:1rem;
}
.search-inner input {
    width:100%;
    padding:11px 12px 11px 38px;
    background:#2a2a30;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:0.92rem;
}
.search-inner input:focus {
    outline:none;
    border-color:rgba(193,0,7,0.5);
    box-shadow:0 0 0 2px rgba(193,0,7,0.13);
}
.locator-count-line {
    margin-top:8px;
    font-size:0.74rem;
    color:rgba(255,255,255,0.35);
    padding:0 2px;
}
.locator-count-line span {
    color:var(--vp-red);
    font-weight:700;
}
/* Locator page compact header */
.locator-page-header {
    background:linear-gradient(135deg,#111114 0%,#18181f 100%);
    padding:44px 0 32px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.locator-page-header__inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
}
.locator-page-header h1 {
    font-size:clamp(1.6rem,2.5vw,2.2rem);
    color:#fff;
    margin:6px 0 8px;
    line-height:1.1;
}
.locator-page-header p {
    color:rgba(255,255,255,0.48);
    font-size:0.9rem;
    max-width:520px;
    line-height:1.55;
    margin:0;
}
.locator-page-header__stats {
    display:flex;
    gap:20px;
    list-style:none;
    padding:0;
    margin:0;
    flex-shrink:0;
}
.lph-stat {
    text-align:center;
    min-width:90px;
    padding:14px 20px;
    background:rgba(255,255,255,0.04);
    border-radius:var(--radius-sm);
    border:1px solid rgba(255,255,255,0.08);
}
.lph-stat strong {
    display:block;
    font-size:1.6rem;
    font-weight:800;
    color:var(--vp-red);
    font-family:'Outfit',sans-serif;
    line-height:1;
    margin-bottom:5px;
}
.lph-stat span {
    font-size:0.66rem;
    color:rgba(255,255,255,0.45);
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:600;
}
/* Homepage locator network stats strip */
.locator-network-stats {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    list-style:none;
    padding:0;
    margin:32px 0 0;
    background:var(--vp-gray-dark);
    border-radius:var(--radius-md);
    overflow:hidden;
}
.lns-item {
    flex:1;
    min-width:120px;
    text-align:center;
    padding:20px 16px;
}
.lns-val {
    display:block;
    font-size:1.6rem;
    font-weight:800;
    color:var(--vp-red);
    font-family:'Outfit',sans-serif;
    line-height:1;
    margin-bottom:6px;
}
.lns-lbl {
    display:block;
    font-size:0.68rem;
    color:rgba(255,255,255,0.45);
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:600;
}
.lns-sep {
    width:1px;
    align-self:stretch;
    background:rgba(255,255,255,0.07);
    flex:none;
}

/* Mobile overrides for homepage shell */
@media (max-width:992px) {
    .locator-section {padding-top:56px;}
    .locator-page-header {padding:32px 0 24px;}
    .locator-page-header__stats {gap:10px;}
    .lph-stat {padding:10px 14px;min-width:72px;}
    .lph-stat strong {font-size:1.3rem;}
    .locator-network-stats {margin-top:24px;}
    .lns-item {padding:16px 12px;}
    .lns-val {font-size:1.3rem;}
    #locator .locator-page-map-shell {
        flex-direction:column;
        height:auto;
        min-height:0;
        margin-top:24px;
        margin-left:20px;
        margin-right:20px;
        border-radius:12px;
    }
    #locator .locator-page-map-shell #map {
        order:-1;
        height:min(45vh,380px);
        min-height:240px;
    }
    #locator .locator-page-map-shell .locator-sidebar {
        width:100%;
        height:auto;
        max-height:none;
        overflow-y:auto;
    }
    #locator .locator-page-map-shell .locator-results {
        flex:none;
        height:auto;
        max-height:44vh;
        min-height:150px;
    }
}
@media (max-width:576px) {
    #locator .locator-page-map-shell #map {
        height:min(42vh,260px);
        min-height:200px;
    }
    #locator .locator-page-map-shell .locator-results {
        max-height:38vh;
        min-height:130px;
    }
    .locator-page-header__stats {display:none;}
    .locator-network-stats {border-radius:var(--radius-sm);}
    .lns-sep {display:none;}
    .lns-item {flex:1 1 45%;}
    .locator-toolbar {flex-wrap:wrap;}
    .locator-radius-select {flex:1 1 110px;min-width:90px;margin-left:0;}
}

/* --- 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;
}

/* Trust bar (homepage) — one row: label left, five badges right; full-bleed dark strip */
.trust-bar {
    width: 100%;
    max-width: none;
    padding: clamp(32px, 5vw, 56px) clamp(18px, 4.5vw, 56px);
    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%);
    box-sizing: border-box;
}
.trust-bar .container {
    display: block;
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.trust-bar-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    gap: clamp(14px, 2.2vw, 26px);
    box-sizing: border-box;
    padding-left: clamp(0px, 0.5vw, 8px);
    padding-right: clamp(0px, 0.5vw, 8px);
}
.trust-lbl {
    font-size: clamp(0.72rem, 1.5vw, 0.82rem);
    font-weight: 800;
    color: rgba(255,255,255,0.92);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    text-align: left;
    margin: 0;
    flex: 0 0 auto;
    align-self: center;
    max-width: min(12.5rem, 32vw);
    line-height: 1.3;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.trust-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 1.4vw, 14px);
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    justify-items: stretch;
    align-items: stretch;
    padding-left: clamp(8px, 1.2vw, 15px);
    padding-right: clamp(8px, 1.2vw, 15px);
    box-sizing: border-box;
}
.titem-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.titem {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.2vw, 12px);
    padding: clamp(10px, 1.8vw, 14px) clamp(8px, 1.2vw, 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;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
}
.trust-bar .titem {
    border-radius: 10px;
    justify-content: flex-start;
}
.titem:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(193,0,7,0.45);
}
.titem i {
    font-size: clamp(1.05rem, 2.8vw, 1.5rem);
    color: var(--vp-red);
    opacity: 1;
    flex-shrink: 0;
}
.trust-bar .titem i {
    display: none;
}
.titem-t strong {
    display: block;
    font-size: clamp(0.7rem, 2.1vw, 1rem);
    color: #fff;
    line-height: 1.2;
    word-break: break-word;
}
.titem-t small {
    font-size: clamp(0.55rem, 1.6vw, 0.72rem);
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.25;
    word-break: break-word;
}

/* Trust bar: tablet — single row, tighter gaps */
@media (max-width: 992px) {
    .trust-bar {
        padding: clamp(28px, 4vw, 48px) clamp(14px, 4vw, 32px);
    }
    .trust-bar-inner {
        max-width: 100%;
        gap: clamp(10px, 2vw, 18px);
        padding-left: 0;
        padding-right: 0;
    }
    .trust-lbl {
        max-width: min(10rem, 38vw);
    }
    .trust-bar .trust-row {
        gap: clamp(6px, 1.5vw, 10px);
        flex: 1 1 auto;
        min-width: 0;
        padding-left: clamp(6px, 1.5vw, 12px);
        padding-right: clamp(6px, 1.5vw, 12px);
    }
    .trust-bar .titem {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        padding: 10px 8px;
    }
}
/* Trust bar: phone — label on top, badges in 2 columns (no edge-hugging horizontal scroll) */
@media (max-width: 540px) {
    .trust-bar {
        padding: clamp(24px, 6vw, 40px) clamp(12px, 5vw, 22px);
    }
    .trust-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        overflow-x: visible;
    }
    .trust-lbl {
        position: static;
        max-width: none;
        text-align: center;
        align-self: center;
        padding-right: 0;
        padding-bottom: 12px;
        margin-bottom: 2px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        box-shadow: none;
    }
    .trust-bar .trust-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        flex: none;
        min-width: 0;
        gap: 10px;
        padding-left: 4px;
        padding-right: 4px;
    }
    .trust-bar .trust-row .titem:last-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 400px) {
    .trust-bar {
        padding: 22px clamp(10px, 4vw, 18px);
    }
    .trust-bar .titem {
        padding: 8px 6px;
        border-radius: 10px;
    }
    .trust-bar .trust-row {
        gap: 8px;
        padding-left: 2px;
        padding-right: 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; background-repeat: no-repeat; }
.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;
    background-repeat: no-repeat;
    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;
}
.sub-hero .retail-hero-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 0.2em;
    white-space: nowrap;
}
.sub-hero .retail-hero-link:hover {
    text-decoration-color: rgba(255, 255, 255, 0.95);
    color: #fff;
}
@media (max-width: 480px) {
    .sub-hero .retail-hero-link {
        white-space: normal;
    }
}

/* --- About page layout (full page shell) --- */
main.about-page {
--about-section-y:clamp(56px,6.5vw,96px);
--about-prose:min(100%,40rem);
}
main.about-page > section:not(.sub-hero) {
padding-top:var(--about-section-y);
padding-bottom:var(--about-section-y);
}
main.about-page > section.sub-hero.about-page-hero {
position:relative;
padding-top:clamp(120px,16vw,168px);
padding-bottom:clamp(72px,10vw,100px);
min-height:min(58vh,560px);
}
.sub-hero.about-page-hero::after {
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3px;
z-index:6;
background:linear-gradient(90deg,transparent 0%,rgba(193,0,7,0.5) 50%,transparent 100%);
pointer-events:none;
}
.about-page .section-header {
margin-bottom:clamp(36px,4vw,52px);
}
.about-page .section-header h2 {
font-size:clamp(1.85rem,3.2vw,2.45rem);
letter-spacing:-0.03em;
}
.about-page .section-header p {
max-width:46rem;
}
.about-page #about-welcome .content-block p,
.about-page #about-customer .content-block p {
max-width:var(--about-prose);
}
.about-page #about-welcome .about-lead {
font-size:1.08rem;
line-height:1.75;
}
.about-page-hero-img {
border-radius:4px;
overflow:hidden;
box-shadow:0 12px 40px rgba(15,23,42,0.1);
}
.about-page-hero-img img {
border-radius:0;
}
.about-trust-strip__inner {
text-align:center;
}
.about-trust-strip__kicker {
font-size:0.65rem;
font-weight:800;
letter-spacing:0.2em;
text-transform:uppercase;
color:#64748b;
margin:0 0 16px;
}
#milestones .section-header p {
max-width:52rem;
margin-left:auto;
margin-right:auto;
}
.about-page .about-checklist {
border-top:1px solid var(--vp-border-light);
padding-top:20px;
margin-top:8px;
}
.about-page > section {
scroll-margin-top:96px;
}
.about-page h2[id] {
scroll-margin-top:96px;
}
#media-partnership-showcase .showcase-block {
margin-top:0;
}
#media-partnership-showcase .showcase-carousel {
max-width:min(100%,640px);
margin-left:auto;
margin-right:auto;
}
#media-partnership-showcase .showcase-featured-card-img,
#media-partnership-showcase .showcase-tile-img {
min-height:0;
height:auto;
max-height:min(38vh,320px);
aspect-ratio:16/9;
}
#media-partnership-showcase .showcase-tile-in--slide,
#media-partnership-showcase .showcase-featured-card {
box-shadow:0 4px 16px rgba(0,0,0,0.07);
}
#media-partnership-showcase .showcase-carousel-slide {
padding:0 2px;
}
#media-partnership-showcase .showcase-lead {
max-width:36rem;
}
/* Media page: one stacked block per partnership; gallery grid, no carousel */
#media-partnership-showcase .media-showcase-block {
max-width:min(100%,960px);
margin:0 auto;
}
#media-partnership-showcase .media-showcase-entries {
display:flex;
flex-direction:column;
gap:clamp(2rem,4vw,3rem);
margin-top:1.5rem;
}
#media-partnership-showcase .media-showcase-item {
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
background:var(--vp-bg-main);
box-shadow:var(--shadow-sm);
overflow:hidden;
}
#media-partnership-showcase .media-showcase-item__head {
padding:clamp(1rem,2.5vw,1.5rem) clamp(1.1rem,2.5vw,1.75rem) 0.75rem;
}
#media-partnership-showcase .media-showcase-item__title {
font-family:'Outfit',sans-serif;
font-size:clamp(1.1rem,2.2vw,1.35rem);
line-height:1.25;
margin:0.35rem 0 0.25rem;
color:var(--vp-gray-dark);
}
#media-partnership-showcase .media-showcase-item__summary {
margin:0.5rem 0 0;
font-size:0.95rem;
line-height:1.55;
color:var(--vp-gray-secondary);
max-width:52rem;
}
#media-partnership-showcase .media-showcase-item__grid {
list-style:none;
margin:0;
padding:clamp(0.75rem,2vw,1.25rem);
display:grid;
grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr));
gap:clamp(10px,2vw,14px);
}
#media-partnership-showcase .media-showcase-item__cell {
margin:0;
min-width:0;
}
#media-partnership-showcase .media-showcase-figure {
margin:0;
border-radius:var(--radius-sm);
overflow:hidden;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
}
#media-partnership-showcase .media-showcase-figure__img {
display:block;
width:100%;
height:auto;
object-fit:contain;
vertical-align:bottom;
}
/* --- Career page --- */
.career-page {
--career-rail:4px;
}
.career-hero .career-hero__inner {
max-width:min(100%,36rem);
margin:0 auto;
}
.career-hero h1 {
font-size:clamp(1.9rem,4.2vw,2.6rem);
line-height:1.12;
margin:12px 0 16px;
}
.career-hero__lede {
font-size:1.1rem;
line-height:1.6;
max-width:34rem;
margin:0 auto;
color:rgba(255,255,255,0.9);
}
.career-hero__lede strong {
color:#fff;
font-weight:800;
}
.career-section--roles {
padding:clamp(48px,6vw,88px) 0;
background:linear-gradient(180deg, #f7f7f8 0%, #fff 32%, #fff 100%);
}
.career-section--apply {
padding:clamp(40px,5vw,72px) 0;
}
.section-header--career {
text-align:center;
max-width:min(100%,40rem);
margin:0 auto 40px;
}
.section-header--career h2 {
font-size:clamp(1.5rem,2.8vw,1.9rem);
margin:10px 0 12px;
color:var(--vp-gray-dark);
}
.section-header--career p {
font-size:1.02rem;
line-height:1.65;
color:var(--vp-gray-secondary);
margin:0;
}
.career-page .hr-jobs-list {
display:grid;
grid-template-columns:1fr;
align-items:stretch;
gap:clamp(20px,2.5vw,32px) clamp(20px,2.2vw,28px);
max-width:min(100%,1240px);
margin:0 auto;
}
@media (min-width:720px) {
.career-page .hr-jobs-list {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.career-page .hr-jobs-list > *:only-child {
grid-column:1 / -1;
}
}
.hr-job-card {
position:relative;
display:flex;
flex-direction:column;
min-width:0;
min-height:100%;
}
.hr-job-card__shell {
container-type:inline-size;
container-name:hr-job;
flex:1;
display:flex;
flex-direction:column;
min-width:0;
min-height:100%;
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
box-shadow:0 2px 12px rgba(0,0,0,0.05);
overflow:hidden;
border-left:3px solid var(--vp-red);
transition:box-shadow 0.22s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hr-job-card:hover .hr-job-card__shell,
.hr-job-card:focus-within .hr-job-card__shell {
box-shadow:0 10px 28px rgba(0,0,0,0.08);
transform:translateY(-1px);
}
.hr-job-card__grid {
display:grid;
grid-template-columns:1fr;
min-width:0;
flex:1;
}
@container hr-job (min-width:32rem) {
.hr-job-card__grid:has(.hr-job-card__media) {
/* Compact thumb (left) — text main focus */
grid-template-columns:11.25rem minmax(0,1fr);
align-items:start;
column-gap:1rem;
}
}
.hr-job-card__grid:has(.hr-job-card__media) {
row-gap:0.75rem;
}
.hr-job-card__grid--text-only {
min-height:0;
}
.hr-job-card__media {
min-width:0;
width:100%;
align-self:stretch;
background:linear-gradient(160deg, #0d0d10 0%, #1a1a1f 100%);
}
@container hr-job (min-width:32rem) {
.hr-job-card__media {
max-width:11.25rem;
align-self:start;
}
}
.hr-job-card__fig {
position:relative;
margin:0;
min-height:0;
background:#0d0d10;
}
.hr-job-card__img {
position:relative;
width:100%;
min-height:0;
background:#1a1a1f;
overflow:hidden;
border-radius:10px;
aspect-ratio:4/3;
max-height:11rem;
}
.hr-job-card__imgel {
width:100%;
height:100%;
min-height:0;
object-fit:cover;
object-position:center;
display:block;
}
@container hr-job (min-width:32rem) {
.hr-job-card__grid:has(.hr-job-card__media) .hr-job-card__img {
max-height:10.5rem;
aspect-ratio:1;
border-radius:10px;
}
}
.hr-job-card__magnify {
position:absolute;
right:8px;
bottom:8px;
width:40px;
height:40px;
border:0;
border-radius:999px;
background:rgba(0,0,0,0.55);
color:#fff;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
box-shadow:0 4px 20px rgba(0,0,0,0.28);
transition:background 0.2s ease,transform 0.15s ease, box-shadow 0.2s ease;
z-index:2;
}
.hr-job-card__magnify:hover {
background:var(--vp-red);
color:#fff;
transform:scale(1.06);
box-shadow:0 8px 24px rgba(193,0,7,0.4);
}
.hr-career-apply-row {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:10px 12px;
}
.hr-lightbox[hidden] {
display:none;
}
.hr-lightbox {
position:fixed;
inset:0;
z-index:10050;
background:rgba(8,8,10,0.9);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:12px;
cursor:pointer;
}
.hr-lightbox__sheet {
position:relative;
z-index:1;
display:flex;
flex-direction:column;
max-width:min(96vw,1280px);
max-height:96vh;
width:100%;
min-height:0;
cursor:default;
pointer-events:auto;
}
.hr-lightbox__toolbar {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:10px 12px;
background:rgba(0,0,0,0.45);
border-radius:10px 10px 0 0;
flex-shrink:0;
}
.hr-lightbox__iconbtn {
width:40px;
height:40px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.1);
color:#fff;
font-size:1.2rem;
font-weight:800;
line-height:1;
cursor:pointer;
}
.hr-lightbox__iconbtn:hover {
background:rgba(255,255,255,0.2);
}
.hr-lightbox__closebtn {
margin-left:12px;
width:40px;
height:40px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.1);
color:#fff;
font-size:1.4rem;
line-height:1;
cursor:pointer;
}
.hr-lightbox__closebtn:hover {
background:rgba(193,0,7,0.6);
}
.hr-lightbox__zoomlabel {
min-width:3.2rem;
text-align:center;
font-size:0.9rem;
font-weight:700;
color:#e2e2e5;
}
.hr-lightbox__stage {
flex:1;
min-height:0;
overflow:auto;
display:flex;
align-items:center;
justify-content:center;
padding:10px 10px 20px;
background:rgba(0,0,0,0.25);
border-radius:0 0 10px 10px;
-webkit-overflow-scrolling:touch;
}
.hr-lightbox__img {
max-width:100%;
max-height:min(75vh,880px);
width:auto;
height:auto;
object-fit:contain;
transform:scale(1);
transform-origin:center center;
transition:transform 0.12s ease;
box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.hr-job-card__body {
padding:18px 18px 20px;
min-width:0;
}
@container hr-job (min-width:32rem) {
.hr-job-card__grid:has(.hr-job-card__media) .hr-job-card__body {
padding:6px 16px 18px 0;
}
}
.hr-job-card__title {
margin:0 0 10px;
font-size:1.1rem;
font-weight:800;
line-height:1.35;
color:var(--vp-gray-dark);
}
.hr-job-card__meta {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 10px;
margin-bottom:14px;
}
.hr-job-pill {
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:999px;
font-size:0.8rem;
font-weight:700;
line-height:1.3;
border:1px solid var(--vp-border-light);
background:#f3f3f5;
color:var(--vp-gray-dark);
}
.hr-job-pill--date {
background:rgba(193,0,7,0.06);
border-color:rgba(193,0,7,0.2);
}
.hr-job-pill--mail {
text-decoration:none;
color:var(--vp-red);
background:#fff;
border-color:rgba(193,0,7,0.18);
}
.hr-job-pill--mail:hover {
background:rgba(193,0,7,0.08);
}
.hr-job-pill i {
font-size:1.05em;
opacity:0.9;
}
.hr-job-card__desc-block {
margin-bottom:14px;
}
.hr-job-card__desc {
font-size:0.9rem;
line-height:1.62;
color:var(--vp-gray-dark);
white-space:pre-line;
}
.hr-job-card__desc--clamped {
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
overflow:hidden;
}
.hr-job-card__desc-more {
display:inline-flex;
align-items:center;
margin-top:6px;
padding:0;
border:0;
background:transparent;
font-size:0.84rem;
font-weight:800;
color:var(--vp-red);
cursor:pointer;
text-decoration:underline;
text-underline-offset:0.12em;
}
.hr-job-card__desc-more:hover {
color:#a00006;
}
.hr-job-card__actions {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 12px;
}
.hr-job-card__actions .btn-outline {
font-weight:700;
}
.hr-job-card__social {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 10px;
margin-top:18px;
padding-top:16px;
border-top:1px solid var(--vp-border-light);
}
.hr-job-card__social-label {
font-size:0.72rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--vp-gray-secondary);
width:100%;
margin-bottom:2px;
}
.hr-job-link-si {
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:8px;
font-size:0.82rem;
font-weight:700;
text-decoration:none;
border:1px solid var(--vp-border-light);
color:var(--vp-gray-dark);
background:#fafafa;
transition:var(--transition-fast);
}
.hr-job-link-si i {
font-size:1.1rem;
}
.hr-job-link-si--fb:hover {
color:#1877f2;
border-color:rgba(24,119,242,0.35);
background:rgba(24,119,242,0.08);
}
.hr-job-link-si--li:hover {
color:#0a66c2;
border-color:rgba(10,102,194,0.35);
background:rgba(10,102,194,0.08);
}
@container hr-job (max-width:31.9375rem) {
.hr-job-card__grid:has(.hr-job-card__media) .hr-job-card__img {
max-height:9rem;
aspect-ratio:2/1;
}
.hr-job-card__media {
padding:12px 12px 0;
}
}
.career-apply {
background:#fff;
border:1px solid var(--vp-border-light);
border-radius:var(--radius-md);
box-shadow:var(--shadow-md);
padding:clamp(24px,4vw,40px) clamp(22px,3vw,36px);
max-width:min(100%,900px);
margin:0 auto;
}
.career-apply__intro {
text-align:center;
max-width:36rem;
margin:0 auto 28px;
}
.career-apply__intro h2 {
font-size:clamp(1.35rem,2.4vw,1.75rem);
margin:8px 0 12px;
color:var(--vp-gray-dark);
}
.career-apply__intro p {
font-size:1.02rem;
line-height:1.65;
color:var(--vp-gray-secondary);
margin:0;
}
.career-apply__channels {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.career-apply__channel {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
padding:16px 18px;
min-height:100%;
border-radius:12px;
text-decoration:none;
border:1px solid var(--vp-border-light);
background:linear-gradient(180deg, #fafafa 0%, #fff 100%);
color:inherit;
transition:var(--transition-fast);
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.career-apply__channel:hover {
border-color:rgba(193,0,7,0.3);
box-shadow:0 12px 28px rgba(0,0,0,0.08);
}
.career-apply__channel--outline {
background:transparent;
box-shadow:none;
}
.career-apply__channel--outline:hover {
background:rgba(193,0,7,0.04);
}
.career-apply__ch-ico {
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:rgba(193,0,7,0.1);
color:var(--vp-red);
font-size:1.35rem;
}
.career-apply__ch-t {
font-size:0.8rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--vp-gray-secondary);
}
.career-apply__ch-e {
font-size:0.95rem;
font-weight:700;
color:var(--vp-red);
}
.career-apply__channel--outline .career-apply__ch-e {
color:var(--vp-gray-dark);
}
@media (max-width:768px) {
.career-apply__channels {
grid-template-columns:1fr;
}
}
.about-quick-nav-wrap {
padding: 0 0 24px;
position: relative;
z-index: 3;
}
.about-quick-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding: 14px;
margin-top: -34px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
border: 1px solid var(--vp-border-light);
border-radius: 999px;
box-shadow: 0 18px 44px rgba(0,0,0,0.09);
}
.about-quick-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--vp-gray-dark);
background: #fff;
border: 1px solid transparent;
transition: var(--transition-fast);
}
.about-quick-nav a:hover {
color: var(--vp-red);
border-color: rgba(193,0,7,0.2);
background: rgba(193,0,7,0.04);
}
.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:14px;
}
.about-metrics--prominent .about-metric {
padding:22px 16px 20px;
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-radius:16px;
box-shadow:0 2px 14px rgba(15,23,42,0.06);
transition:var(--transition-fast);
}
.about-metrics--prominent .about-metric:hover {
border-color:rgba(193,0,7,0.22);
box-shadow:0 8px 28px rgba(15,23,42,0.1);
transform:translateY(-2px);
}
.about-metric-icon {
width:48px;
height:48px;
border-radius:12px;
background:linear-gradient(145deg,rgba(193,0,7,0.14) 0%,rgba(193,0,7,0.06) 100%);
color:var(--vp-red);
display:flex;
align-items:center;
justify-content:center;
font-size:1.35rem;
margin-bottom:6px;
box-shadow:0 1px 0 rgba(255,255,255,0.75) inset;
}
.about-metric-icon i {
display:block;
line-height:1;
}
.about-metrics--prominent .about-metric strong {
font-size:clamp(1.35rem,2.4vw,1.85rem);
margin-bottom:2px;
}
.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-trust-strip {
padding:clamp(20px,2.5vw,28px) 0;
border-top:1px solid var(--vp-border-light);
border-bottom:1px solid var(--vp-border-light);
background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
}
.about-trust-list {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
border:1px solid #d1d5db;
border-radius:4px;
overflow:hidden;
background:var(--vp-bg-main);
box-shadow:0 2px 10px rgba(15,23,42,0.04);
}
.about-trust-list li {
display:flex;
align-items:flex-start;
justify-content:flex-start;
gap:10px;
padding:16px 14px;
border-radius:0;
background:transparent;
border:none;
border-right:1px solid #e2e8f0;
font-size:0.8rem;
font-weight:600;
color:var(--vp-gray-dark);
text-align:left;
}
.about-trust-list li:last-child {
border-right:none;
}
.about-trust-list li i {
color:var(--vp-red);
font-size:1.05rem;
flex-shrink:0;
}
@media (max-width:1100px) {
.about-trust-list {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.about-trust-list li {
border-right:1px solid #e2e8f0;
border-bottom:1px solid #e2e8f0;
}
.about-trust-list li:nth-child(2n) {
border-right:none;
}
.about-trust-list li:nth-child(n+3) {
border-bottom:none;
}
}
@media (max-width:600px) {
.about-trust-list {
grid-template-columns:1fr;
}
.about-trust-list li {
border-right:none;
border-bottom:1px solid #e2e8f0;
}
.about-trust-list li:last-child {
border-bottom:none;
}
}
/* Core values: corporate “register” (single panel, hairline grid) */
.about-corp-lede {
max-width:40rem;
margin:0.35rem auto 0;
font-size:1.02rem;
line-height:1.7;
color:var(--vp-gray-secondary);
}
.about-values-corp {
max-width:1120px;
margin:0 auto;
}
.about-values-corp__grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
background:#c8ced6;
border:1px solid #b8c0cc;
border-top:3px solid var(--vp-red);
box-shadow:0 4px 20px rgba(15,23,42,0.07);
}
.about-value-tile {
background:var(--vp-bg-main);
padding:28px 22px 32px 24px;
min-height:100%;
text-align:left;
position:relative;
display:flex;
flex-direction:column;
align-items:stretch;
}
.about-value-tile__idx {
font-family:'Outfit',sans-serif;
font-size:2.1rem;
font-weight:800;
line-height:1;
color:rgba(15,23,42,0.07);
position:absolute;
top:16px;
right:16px;
letter-spacing:-0.04em;
pointer-events:none;
}
.about-value-tile__icon {
width:40px;
height:40px;
border:1px solid rgba(15,23,42,0.1);
border-radius:2px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.15rem;
color:var(--vp-red);
background:#f8f9fa;
margin-bottom:16px;
flex-shrink:0;
}
.about-value-tile__icon i {
display:block;
line-height:1;
}
.about-value-tile__title {
font-family:'Outfit',sans-serif;
font-size:0.8rem;
font-weight:800;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--vp-gray-dark);
margin:0 0 12px;
padding-bottom:10px;
border-bottom:1px solid #e5e7eb;
}
.about-value-tile__text {
font-size:0.92rem;
line-height:1.75;
color:#4b5563;
margin:0;
}
.about-timeline-shell {
position:relative;
background:var(--vp-bg-main);
border:1px solid var(--vp-border-light);
border-top:3px solid var(--vp-red);
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;
}
/* Striping: pair with .bg-main / .bg-alt on the section */
.about-mv-block {
border-top:1px solid var(--vp-border-light);
border-bottom:1px solid var(--vp-border-light);
}
.about-ceo-intro,
.about-board-intro {
max-width:44rem;
margin:0.25rem auto 0;
font-size:1.05rem;
line-height:1.65;
color:var(--vp-gray-secondary);
}
/* Vision & mission: formal dual-column statement (annual-report tone) */
.about-mv-corp {
max-width:1000px;
margin:0 auto;
background:var(--vp-bg-main);
border:1px solid #b8c0cc;
border-top:3px solid #0f172a;
box-shadow:0 4px 24px rgba(15,23,42,0.08);
}
.about-mv-corp__head {
padding:12px 24px 10px;
border-bottom:1px solid #e2e8f0;
background:linear-gradient(180deg,#f1f5f9 0%,#e8edf2 100%);
}
.about-mv-corp__meta {
display:block;
font-size:0.65rem;
font-weight:800;
letter-spacing:0.22em;
text-transform:uppercase;
color:#64748b;
}
.about-mv-corp__body {
display:grid;
grid-template-columns:1fr 1px 1fr;
align-items:stretch;
min-height:0;
}
.about-mv-corp__divider {
background:#cbd5e1;
width:1px;
min-height:100%;
}
.about-mv-corp__col {
padding:32px 28px 36px 32px;
}
.about-mv-corp__label {
display:flex;
align-items:center;
gap:10px;
font-family:'Outfit',sans-serif;
font-size:0.72rem;
font-weight:800;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--vp-red);
margin:0 0 16px;
line-height:1.2;
}
.about-mv-corp__label i {
font-size:1.1rem;
font-style:normal;
line-height:1;
opacity:0.95;
}
.about-mv-corp__label--vision {
color:#0f172a;
}
.about-mv-corp__label--vision i {
color:#334155;
}
.about-mv-corp__statement {
font-size:1.05rem;
line-height:1.82;
color:#334155;
margin:0;
}
.about-mv-corp__statement q {
quotes:'\201c''\201d';
}
.about-ceo-block {
border-top:1px solid var(--vp-border-light);
}
.about-ceo-card {
max-width:920px;
margin:0 auto;
background:var(--vp-bg-main);
border:1px solid rgba(15,23,42,0.08);
border-left:3px solid var(--vp-red);
border-radius:20px;
padding:clamp(32px,4vw,48px) clamp(28px,4vw,52px);
box-shadow:0 8px 40px rgba(15,23,42,0.09);
position:relative;
overflow:hidden;
}
.about-ceo-card::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,var(--vp-red),#f87171);
border-radius:20px 20px 0 0;
}
.about-ceo-body {
display:grid;
grid-template-columns:minmax(130px,150px) 1fr;
gap:clamp(24px,3vw,40px);
align-items:start;
}
.about-ceo-portrait-wrap {
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}
.about-ceo-portrait {
width:clamp(120px,22vw,148px);
height:clamp(120px,22vw,148px);
border-radius:50%;
overflow:hidden;
flex-shrink:0;
border:3px solid rgba(193,0,7,0.25);
box-shadow:0 8px 28px rgba(43,43,49,0.12);
}
.about-ceo-portrait img {
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
border-radius:0;
display:block;
}
.about-ceo-portrait-badge {
display:inline-flex;
align-items:center;
gap:5px;
background:rgba(193,0,7,0.08);
color:var(--vp-red);
border:1px solid rgba(193,0,7,0.2);
border-radius:999px;
font-size:0.68rem;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
padding:4px 10px;
white-space:nowrap;
}
.about-ceo-portrait-badge i {
font-size:0.75rem;
}
.about-ceo-quote {
margin:0;
padding:0;
border:none;
position:relative;
}
.about-ceo-quote-icon {
display:block;
font-size:2.8rem;
color:rgba(193,0,7,0.22);
line-height:1;
margin-bottom:10px;
opacity:0.95;
}
.about-ceo-quote p {
font-size:clamp(1.05rem,2vw,1.2rem);
line-height:1.82;
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-block {
border-top:1px solid var(--vp-border-light);
}
.about-board-grid {
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(20px,2.5vw,28px);
}
.about-board-card {
background:var(--vp-bg-main);
border:1px solid rgba(15,23,42,0.08);
border-radius:20px;
padding:36px 24px 32px;
text-align:center;
box-shadow:0 2px 18px rgba(15,23,42,0.06);
transition:var(--transition-smooth);
display:flex;
flex-direction:column;
align-items:center;
position:relative;
overflow:hidden;
}
.about-board-card::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:linear-gradient(90deg,transparent,rgba(193,0,7,0.45),transparent);
opacity:0.7;
}
.about-board-card:hover {
transform:translateY(-6px);
box-shadow:0 16px 48px rgba(15,23,42,0.11);
border-color:rgba(193,0,7,0.2);
}
.about-board-photo {
width:128px;
height:128px;
margin:0 auto 20px;
border-radius:50%;
overflow:hidden;
border:4px solid rgba(193,0,7,0.2);
box-shadow:0 8px 32px rgba(15,23,42,0.12),0 0 0 1px rgba(255,255,255,0.8) inset;
background:var(--vp-bg-alt);
flex-shrink:0;
}
.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-info {
width:100%;
}
.about-board-card h3 {
font-size:1.12rem;
margin-bottom:6px;
color:var(--vp-gray-dark);
}
.about-board-role {
display:inline-block;
font-size:0.68rem;
font-weight:800;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--vp-red);
background:rgba(193,0,7,0.07);
border:1px solid rgba(193,0,7,0.15);
border-radius:999px;
padding:3px 10px;
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);
background:rgba(43,43,49,0.05);
border-color:rgba(43,43,49,0.12);
}
.about-board-bio {
font-size:0.92rem;
line-height:1.62;
color:var(--vp-gray-secondary);
margin:0;
text-align:left;
}
.about-cert-bar {
margin-top:48px;
padding:28px 24px 32px;
background:rgba(15,23,42,0.02);
border:1px solid var(--vp-border-light);
border-radius:10px;
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:10px;
}
.about-cert-logos li {
display:inline-flex;
align-items:center;
gap:6px;
font-family:'Outfit',sans-serif;
font-weight:700;
font-size:0.88rem;
color:var(--vp-gray-dark);
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
border-radius:999px;
padding:8px 18px;
}
.about-cert-logos li i {
color:var(--vp-red);
font-size:1rem;
}
@media (max-width:1100px) {
.about-values-corp__grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:992px) {
.about-quick-nav {
margin-top: -26px;
border-radius: 20px;
}
.about-mv-corp__body {
grid-template-columns:1fr;
}
.about-mv-corp__divider {
width:100%;
height:1px;
min-height:0;
}
.about-mv-corp__col {
padding:28px 24px 32px;
}
.about-board-grid {
grid-template-columns:1fr;
max-width:440px;
margin-left:auto;
margin-right:auto;
}
}
@media (max-width:768px) {
.about-quick-nav-wrap {
padding-bottom: 16px;
}
.about-quick-nav {
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
padding: 10px;
gap: 8px;
margin-top: -20px;
scrollbar-width: thin;
}
.about-quick-nav a {
white-space: nowrap;
}
.about-trust-list {
grid-template-columns: 1fr;
}
.about-timeline-item {
padding-left:28px;
}
.about-page-hero-img {
min-height:280px;
max-height:none;
height:320px;
}
.about-values-corp__grid {
grid-template-columns:1fr;
}
.about-ceo-body {
grid-template-columns:1fr;
justify-items:center;
text-align:center;
}
.about-ceo-portrait-wrap {
align-items: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:start;
}
.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);
min-height:0;
}
.retail-beyond-card:hover {
box-shadow:var(--shadow-md);
border-color:rgba(193,0,7,0.2);
}
.retail-beyond-img {
position:relative;
aspect-ratio:3/2;
width:100%;
background:var(--vp-bg-alt);
overflow:hidden;
}
.retail-beyond-img img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
border-radius:0;
}
.retail-beyond-body {
padding:24px 22px 26px;
flex:0 0 auto;
}
.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-experience .container > .section-header {
margin-bottom:clamp(8px,2vw,16px);
}
.retail-experience-band {
padding-top:clamp(44px,6vw,72px);
padding-bottom:clamp(44px,6vw,72px);
}
.retail-experience-band:first-child {
padding-top:clamp(12px,2vw,24px);
}
.retail-offering-row {
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
gap:clamp(28px,4vw,52px);
align-items:center;
}
.retail-offering-row--reverse {
direction:rtl;
}
.retail-offering-row--reverse > * {
direction:ltr;
}
.retail-offering__media {
position:relative;
aspect-ratio:4/3;
width:100%;
max-height:min(70vh,520px);
border-radius:var(--radius-lg);
overflow:hidden;
background:var(--vp-bg-alt);
border:1px solid var(--vp-border-light);
box-shadow:var(--shadow-sm);
}
.retail-offering__media img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
.retail-offering__text h3 {
font-family:'Outfit',sans-serif;
font-size:clamp(1.25rem,2.2vw,1.5rem);
margin:0 0 12px;
color:var(--vp-gray-dark);
}
.retail-offering__text .about-copy {
margin:0;
font-size:1.02rem;
line-height:1.7;
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;
}
.retail-cta-related {
margin:28px auto 0;
padding-top:20px;
border-top:1px solid var(--vp-border-light);
font-size:0.9rem;
line-height:1.75;
color:var(--vp-gray-secondary);
max-width:640px;
}
.retail-cta-related a {
color:var(--vp-gray-dark);
font-weight:600;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.1);
transition:var(--transition-fast);
}
.retail-cta-related a:hover {
color:var(--vp-red);
border-bottom-color:rgba(193,0,7,0.35);
}
.retail-cta-related__sep {
display:inline;
margin:0 0.4em;
color:#9ca3af;
user-select:none;
}
@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;
}
.retail-offering-row,
.retail-offering-row--reverse {
grid-template-columns:1fr;
direction:ltr;
gap:22px;
}
.retail-offering__media {
order:-1;
max-height:none;
}
}
@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;
}
}

/* --- Vital Fuel Cash Card (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;
grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);
}
.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-photos {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(16px,2.8vw,28px);
width:100%;
max-width:min(100%,760px);
margin:0 auto;
}
.fleet-card-photos__fig {
margin:0;
padding:0;
border-radius:16px;
overflow:hidden;
background:#1a1a1e;
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 22px 50px rgba(0,0,0,0.38);
transition:transform 0.4s ease,box-shadow 0.4s ease;
}
.fleet-card-photos__fig:hover {
transform:translateY(-5px);
box-shadow:0 30px 60px rgba(0,0,0,0.45);
}
.fleet-card-photos__fig img {
width:100%;
height:auto;
display:block;
vertical-align:top;
object-fit:cover;
}
@media (max-width:768px) {
.fleet-card-photos {
grid-template-columns:1fr;
max-width:min(100%,480px);
}
}
.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:not(.home-hero) { min-height: auto; padding: 100px 0 60px; }
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    .hero.home-hero {
        padding: 0 !important;
        background: transparent;
    }
    /* Homepage hero ≤991px: compact height (avoid overly tall crop); images still cover inside frame */
    .home-hero-rail {
        padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
    }
    .home-hero__frame {
        min-height: clamp(14rem, 42svh, 20rem);
        max-height: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .home-hero__media {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        z-index: 0;
    }
    .home-hero .home-hero__media .hero-bg {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        min-height: 0;
    }
    .home-hero .home-hero__media .hero-slideshow {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        min-height: 0;
        z-index: 1;
        overflow: hidden;
    }
    .home-hero-slide-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .home-hero .hero-slideshow .slide {
        background-image: none !important;
        background-size: unset;
        transform: none !important;
        transition: opacity 0.9s ease;
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
    }
    .home-hero .hero-slideshow .slide.active {
        opacity: 1;
        z-index: 2;
        transform: none !important;
    }
    .home-hero .hero-slideshow .slide:not(.active) {
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }
    .home-hero .home-hero__shell.container {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
    .home-hero__shell {
        padding: 1.1rem 1rem 1.25rem;
    }
    .home-hero__headline {
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
    }
    main:has(.home-hero) .home-hero-fuel {
        margin-top: 0;
    }

    .split-grid { grid-template-columns: 1fr; gap: 40px; }
    .split-grid.convenience-layout { gap: 26px; }
    .split-grid.reverse .content-block { order: 1; }
    .split-grid.reverse .image-block { order: 2; }
    
    .image-block:not(.convenience-collage-wrap) { height: auto; min-height: 240px; padding: 0 4px; }
    .image-block:not(.convenience-collage-wrap) img {
        width: 100%;
        height: auto;
        max-height: min(420px, 70vh);
        object-fit: contain;
        object-position: center;
    }
    .convenience-section .convenience-collage-wrap.image-block {
        height: auto !important;
        min-height: 0;
        padding: 0;
    }
    .news-img {
        height: auto;
        min-height: 200px;
        max-height: min(340px, 48vh);
        object-fit: contain;
        object-position: center;
    }
    .service-img {
        height: auto;
        min-height: 220px;
        aspect-ratio: 16 / 10;
    }
    .service-img img {
        height: auto;
        max-height: min(300px, 42vh);
        object-fit: contain;
        padding: 10px;
    }
    
    .news-grid, .services-grid, .usps-grid { grid-template-columns: 1fr; gap: 20px; }
    .convenience-content-card { padding: 22px 20px 20px; }
    .convenience-collage-wrap { padding: 7px; }
    .convenience-collage-grid {
        min-height: 0;
        grid-auto-rows: minmax(100px, 1fr);
    }
    .convenience-collage-grid--mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: minmax(148px, 38vw);
        gap: 10px;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
    }
    .convenience-collage-grid--mosaic .convenience-collage__cell--feature {
        grid-column: 1;
        grid-row: 1;
        min-height: min(240px, 52vw);
    }
    .convenience-collage-grid--mosaic .convenience-collage__cell--mosque {
        grid-column: 1;
        grid-row: 2;
    }
    .convenience-collage-grid--mosaic .convenience-collage__cell--ev {
        grid-column: 1;
        grid-row: 3;
    }
    .convenience-collage-grid--mosaic .convenience-collage__cell--food {
        grid-column: 1;
        grid-row: 4;
    }
    .convenience-collage img { max-height: 520px; }
    /* (trust bar: .trust-bar-inner is flex row — label + .trust-row grid; do not override .trust-row to column here) */
    
    .newsletter-block { padding: 30px 20px; }
    .newsletter-block form { flex-direction: column; }
    
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Convenience collage: tablet — same hero + triptych as desktop (only phones use stacked column above) */
@media (min-width: 640px) and (max-width: 991px) {
    .convenience-collage-grid--mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(min(260px, 42vw), auto) minmax(128px, 20vw);
        grid-auto-rows: unset;
        gap: 10px;
    }
    .convenience-collage-grid--mosaic .convenience-collage__cell--feature {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: min(260px, 42vw);
    }
    .convenience-collage-grid--mosaic .convenience-collage__cell--mosque {
        grid-column: 1;
        grid-row: 2;
    }
    .convenience-collage-grid--mosaic .convenience-collage__cell--ev {
        grid-column: 2;
        grid-row: 2;
    }
    .convenience-collage-grid--mosaic .convenience-collage__cell--food {
        grid-column: 3;
        grid-row: 2;
    }
}

@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-showcase__actions { flex-direction: column; align-items: stretch; }
    .facility-list-pro { grid-template-columns: 1fr; }
    .facility-list-pro li:last-child { grid-column: auto; }
    .trust-bar { padding: 24px clamp(10px, 5vw, 22px); }
}

/* Home: hero text reveal only — do NOT use main .reveal (breaks trust bar & other rows with stacked boxes) */
@media (max-width: 768px) {
    section.hero .reveal.active {
        margin-top: -35px;
    }
    main:has(> section.hero) .btn {
        padding: 14px 15px;
    }
}