/* CPetro Management — designed & developed by Nabil Imran (nabilimran.com) */
:root{
  --navy:#13213A; --navy-2:#0D1829; --blue:#1A6493; --accent:#F28C28; --amber:#FBBF24;
  --ink:#13213A; --body:#3E4C63; --muted:#4A5568; --line:#E3E8EF; --tint:#F4F6F9; --on-dark:#C3CEDD;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Outfit,system-ui,sans-serif;margin:0}
p{margin:0}
img{max-width:100%}
a{color:var(--blue)}a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:100}.skip:focus{left:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-family:Outfit,sans-serif;font-weight:700;font-size:18px;letter-spacing:.14em}
.brand img{height:52px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px 26px;flex-wrap:wrap;font-weight:500;font-size:15px}
.nav-links a{color:var(--ink);text-decoration:none;padding:10px 0}
.nav-links a.btn{padding:11px 20px;color:#fff}
.menu-btn{display:none;background:none;border:0;color:var(--ink);width:44px;height:44px;cursor:pointer}
@media (max-width:900px){
  .brand span{font-size:15px}
  .menu-btn{display:flex;align-items:center;justify-content:center}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:10px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-top:1px solid var(--line)}
  .nav-links a.btn{text-align:center;margin-top:8px;border:0}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:10px;font-weight:600;text-decoration:none;font-size:16px;border:1.5px solid transparent;cursor:pointer;font-family:inherit}
.btn-dark{background:var(--navy);color:#fff}.btn-dark:hover{background:#1F3354;color:#fff}
.btn-accent{background:var(--accent);color:var(--navy);font-weight:700}.btn-accent:hover{background:#F59E44;color:var(--navy)}
.btn-amber{background:var(--amber);color:var(--navy);font-weight:700}.btn-amber:hover{background:#FCCB4A;color:var(--navy)}
.btn-ghost{border-color:#6F86A6;color:#fff}.btn-ghost:hover{border-color:#fff;color:#fff}
.btn-outline{border-color:var(--navy);color:var(--navy)}.btn-outline:hover{background:var(--navy);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* type */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.eyebrow.accent{color:var(--accent)}
h1{font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.04;font-weight:800;letter-spacing:-.02em;max-width:920px}
h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.12;font-weight:700}
.lead{font-size:18px;color:var(--body)}
.lead.light{color:var(--on-dark)}

/* hero */
.hero{background:var(--navy);color:#fff}
.hero-body{padding-top:104px;padding-bottom:88px;display:flex;flex-direction:column;gap:28px}
.hero .lead{font-size:20px;max-width:700px}
.stats-band{border-top:1px solid #2A3B57}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;padding-top:36px;padding-bottom:36px}
.stats div{display:flex;flex-direction:column;gap:4px}
.stats strong{font-family:Outfit,sans-serif;font-size:44px;font-weight:700;line-height:1}
.stats span{color:var(--on-dark);font-size:15px}

/* sections */
.section{padding:96px 0}
.section.tint{background:var(--tint)}
.section.dark{background:var(--navy);color:#fff}
.stack{display:flex;flex-direction:column;gap:44px}
.head{display:flex;flex-direction:column;gap:14px;max-width:760px}
.split{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.split.center{align-items:center}
.col{flex:1 1 440px;display:flex;flex-direction:column;gap:20px;min-width:0}

.people{gap:14px;flex-basis:380px}
.person{display:flex;align-items:center;gap:18px;padding:20px 22px;background:var(--tint);border-radius:14px}
.person h3{font-size:19px;font-weight:600}.person p{color:var(--muted);font-size:15px}
.avatar{flex:none;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Outfit,sans-serif;font-weight:700}
.avatar.blue{background:var(--blue)}.avatar.slate{background:#2C3E5C}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column;gap:14px}
.card h3{font-size:21px;font-weight:600}.card p{color:var(--muted)}
.flags{display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px}
.flags span{font-family:Outfit,sans-serif;font-size:22px;font-weight:600;color:var(--body)}
.flags .flags-label{font-family:Inter,sans-serif;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.cam-panel{min-height:420px;border-radius:20px;background:#FFF6E7;align-items:center;justify-content:center;gap:8px;padding:40px 24px;text-align:center}
.cam-panel img{width:300px;max-width:80%;height:auto}
.cam-tag{font-family:Outfit,sans-serif;font-size:22px;font-weight:600}
.cam-rule{width:56px;height:4px;border-radius:2px;background:var(--amber)}

/* locations */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #C9D2DE;background:#fff;color:var(--ink);font:500 15px Inter,sans-serif;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.finder{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.finder-list{flex:1 1 300px;min-width:0;background:#fff;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;max-height:640px}
.count{font-size:13px;color:var(--muted)}
.store-list{list-style:none;margin:0;padding:0 4px 0 0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.store{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1.5px solid var(--line);background:#fff;border-radius:12px;color:var(--ink);font:inherit;cursor:pointer}
.store:hover{border-color:#9FB3C8}
.store[aria-current="true"]{background:#EEF4FA;border-color:var(--blue)}
.store b{font-weight:600;font-size:15px}.store span{font-size:14px;color:var(--muted)}
.store em{font-style:normal;font-size:13px;color:var(--blue);font-weight:600}
.map-box{flex:999 1 560px;min-width:0;position:relative;min-height:560px;border-radius:20px;overflow:hidden;background:#E6ECF2;border:1px solid #DCE3EC}
#map{position:absolute;inset:0}
.map-fallback{padding:24px}
.legend{position:absolute;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;background:rgba(255,255,255,.94);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--body);z-index:2}
.legend span{display:flex;align-items:center;gap:6px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.dot.fuel{background:var(--blue)}.dot.deli{background:var(--accent)}.dot.smoke{background:var(--navy)}
@media (max-width:700px){.map-box{min-height:420px}.finder-list{max-height:420px}}

/* map popup */
.mapboxgl-popup-content{border-radius:14px;padding:16px 18px;box-shadow:0 10px 30px rgba(19,33,58,.22);font-family:Inter,sans-serif}
.pop{display:flex;flex-direction:column;gap:6px;max-width:240px}
.pop h3{font-size:17px;font-weight:600}
.pop p{font-size:14px;color:var(--muted)}
.pop .badge{align-self:flex-start;background:#FFF6E7;color:#7A4B00;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.pop .btn{min-height:40px;font-size:14px;padding:0 14px;align-self:flex-start;margin-top:4px}
.mapboxgl-popup-close-button{width:32px;height:32px;font-size:20px}

/* sell */
.points{gap:14px;flex-basis:360px}
.point{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid #2E4263;border-radius:14px}
.point i{flex:none;width:10px;height:10px;margin-top:9px;border-radius:50%;background:var(--accent)}
.point p{color:#E3E9F2}.point strong{color:#fff}
.points .btn{align-self:flex-start;margin-top:6px}

/* contact */
.contact-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list a{color:var(--ink);text-decoration:none}
.form{flex:1 1 520px;background:var(--tint);border-radius:20px;padding:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.field.full,.full-left{grid-column:1/-1}
.full-left{justify-self:start}
.field input,.field select,.field textarea{font:400 16px Inter,sans-serif;min-height:48px;padding:0 14px;border:1px solid #C9D2DE;border-radius:10px;background:#fff;color:var(--ink)}
.field textarea{padding:12px 14px;resize:vertical}
.hp{position:absolute;left:-9999px}

/* footer */
.footer{background:var(--navy-2);color:var(--on-dark);padding:64px 0 28px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.foot-brand{flex:1 1 320px;max-width:420px;display:flex;flex-direction:column;gap:16px;font-size:15px}
.foot-brand .brand{color:#fff;font-size:17px}
.logo-tile{background:#fff;border-radius:12px;padding:6px 8px;display:flex}
.logo-tile img{height:44px;width:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:48px}
.foot-nav div{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-nav h4{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.foot-nav a{color:var(--on-dark);text-decoration:none}.foot-nav a:hover{color:#fff}
.foot-bottom{margin-top:40px;border-top:1px solid #22314A;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:14px}
.foot-bottom a{color:#fff;font-weight:600;text-decoration:none}

@media (max-width:600px){.section{padding:72px 0}.hero-body{padding-top:72px;padding-bottom:64px}.form{padding:22px}}

/* holding-company sections */
.facts{gap:12px;flex-basis:380px}
.fact{display:flex;flex-direction:column;gap:2px;padding:18px 22px;background:var(--tint);border-radius:14px;border-left:0}
.fact strong{font-family:Outfit,sans-serif;font-size:20px;font-weight:600}
.fact span{color:var(--muted);font-size:15px}
.tag{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:#EAF2F9;padding:4px 10px;border-radius:999px}
.card a{color:var(--blue)}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.person-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.person-card h3{font-size:21px;font-weight:600}
.person-card .role{color:var(--blue);font-weight:600;font-size:15px}
.person-card p{color:var(--muted)}
.list-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:16px}
.list-card h3{font-size:21px;font-weight:600}
.list-card .btn{align-self:flex-start}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--body)}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.form.white{background:#fff;border:1px solid var(--line)}
.fine{font-size:13px;color:var(--muted)}
.small{font-size:14px}.small a{color:var(--on-dark)}
.disclaimer{margin-top:36px;font-size:13px;color:#8FA0B8;max-width:820px}
.foot-bottom a{color:#fff}

/* legal pages */
.legal{max-width:780px;margin:0 auto;padding:72px 24px 96px}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:8px}
.legal h2{font-size:22px;margin:36px 0 10px}
.legal p,.legal li{color:var(--body);margin:0 0 12px}
.legal ul{padding-left:22px}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:28px}

/* fuel brand logos */
.brands{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
.brands .flags-label{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.brand-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:20px 44px;flex:1}
.brand-row li{display:flex;align-items:center;height:56px}
.brand-row img{height:56px;width:auto}
.brand-row img.word{height:29px}
@media (max-width:600px){.brand-row{gap:18px 28px}.brand-row img{height:44px}.brand-row img.word{height:23px}.brand-row li{height:44px}}
.brand-row{flex:1 1 360px;min-width:0}
.brand-row li{flex:none}
.brand-row img{max-width:none;flex:none}
@media (max-width:600px){.brands{flex-direction:column;align-items:flex-start;padding:20px}.brand-row{flex:none;width:100%}}