/* Benz Oil Company v2 — design modeled on petro.com */
@font-face{font-family:'Roboto Slab';src:url('/assets/fonts/RobotoSlab-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto Slab';src:url('/assets/fonts/RobotoSlab-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Roboto Slab';src:url('/assets/fonts/RobotoSlab-Black.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:'Roboto';src:url('/assets/fonts/Roboto-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('/assets/fonts/Roboto-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --navy:#0b2d6b; --navy-deep:#081f4b; --blue:#2160c4; --blue-dark:#174a9c;
  --yellow:#ffd200; --ink:#14181d; --muted:#4e5a68; --line:#dbe1e9; --wash:#f3f6fa; --link:#174a9c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font:16px/1.65 'Roboto',system-ui,sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4,legend{font-family:'Roboto Slab',serif;line-height:1.18}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:#231a00;font-weight:700;
  padding:10px 18px;z-index:200}
.skip:focus{left:0}
.fine{font-size:13.5px;color:var(--muted)}
.eyebrow{font-family:'Roboto Slab',serif;font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:2.2px;color:var(--blue);margin-bottom:8px}
.eyebrow.gold{color:var(--yellow)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Roboto Slab',serif;
  font-weight:700;font-size:15.5px;padding:13px 26px;border-radius:4px;text-decoration:none;border:none;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-dark)}
.btn.yellow{background:var(--yellow);color:#231a00}
.btn.yellow:hover{background:#ffdf47}
.btn.outline{background:transparent;color:#fff;border:2px solid #fff;padding:14px 30px;font-size:17px}
.btn.outline:hover{background:rgba(255,255,255,.14);border-color:var(--yellow);color:var(--yellow)}
.btn.ghostnavy{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn.ghostnavy:hover{background:var(--navy);color:#fff}
.btnrow{display:flex;gap:14px;flex-wrap:wrap}

/* top strip + brand band + nav */
.topstrip{background:var(--navy-deep);font-size:13.5px}
.tsbar{display:flex;justify-content:flex-end;gap:26px;min-height:36px;align-items:center}
.topstrip a{color:#cfdcf3;text-decoration:none;font-weight:600;text-transform:uppercase;letter-spacing:.6px;font-size:12.5px}
.topstrip a:hover{color:var(--yellow)}
.brandband{background:var(--navy);color:#fff}
.bbar{display:flex;align-items:center;gap:26px;min-height:88px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff}
.mark{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:6px;
  background:var(--yellow);color:#231a00;font-family:'Roboto Slab',serif;font-size:28px;font-weight:900;flex:none}
.logochip{display:inline-flex;align-items:center;background:#fff;border-radius:6px;padding:7px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.logochip img{height:52px;width:auto}
.logochip.sm img{height:40px}
.bname{display:flex;flex-direction:column;line-height:1.2}
.bname strong{font-family:'Roboto Slab',serif;font-size:21px;white-space:nowrap}
.bname em{font-style:normal;font-size:12.5px;color:#b9c9e6;letter-spacing:1px}
.phones{list-style:none;display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.phones li{display:flex;flex-direction:column;line-height:1.25}
.phones span{font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;color:#b9c9e6;font-weight:600}
.phones a{color:var(--yellow);text-decoration:none;font-family:'Roboto Slab',serif;font-weight:700;font-size:19px}
.phones a:hover{color:#ffe466}
header{background:#fff;border-bottom:3px solid var(--yellow);position:sticky;top:0;z-index:100;
  box-shadow:0 2px 10px rgba(8,31,75,.12)}
header nav{display:flex;align-items:center;gap:14px;min-height:58px}
.mainmenu{display:flex;list-style:none;gap:4px;align-items:center;flex-wrap:wrap}
.mainmenu a{display:block;color:var(--ink);font-family:'Roboto Slab',serif;font-weight:700;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.6px;text-decoration:none;padding:17px 13px;border-bottom:3px solid transparent;
  margin-bottom:-3px;transition:color .2s,border-color .2s;white-space:nowrap}
.mainmenu a:hover{color:var(--blue)}
.mainmenu a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.schedbtn{margin-left:auto;padding:10px 20px;font-size:14px;flex:none}
.mnav-toggle{display:none}

/* hero */
.hero{position:relative;min-height:520px;display:flex;align-items:center;background:var(--navy-deep)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,31,75,.82),rgba(11,45,107,.55) 55%,rgba(8,31,75,.35))}
.hero-inner{position:relative;max-width:1180px;margin:0 auto;padding:90px 24px 130px;color:#fff;max-width:1180px;width:100%}
.hero-inner>*{max-width:640px}
.hero-kicker{font-family:'Roboto Slab',serif;font-weight:700;font-size:14.5px;text-transform:uppercase;
  letter-spacing:2.4px;color:var(--yellow);margin-bottom:14px}
.hero h1{font-size:clamp(34px,4.8vw,56px);font-weight:900;text-shadow:0 2px 14px rgba(0,0,0,.35);margin-bottom:16px}
.hero-sub{font-size:clamp(16px,1.7vw,19px);color:#e8eefa;margin-bottom:30px;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* offer cards overlapping hero */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:-74px;position:relative;z-index:2;
  padding-bottom:8px}
.offer{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(8,31,75,.16);display:flex;
  flex-direction:column;border-radius:4px;overflow:hidden}
.obody{padding:26px 24px 20px;display:grid;grid-template-columns:1fr 64px;gap:6px 14px;align-items:start;flex:1}
.obody h2{font-size:21px;font-weight:900;grid-column:1}
.obody p{color:var(--muted);font-size:14.5px;grid-column:1}
.obody svg{grid-column:2;grid-row:1/span 2;width:64px;height:64px}
.octa{display:block;background:var(--blue);color:#fff;text-decoration:none;font-family:'Roboto Slab',serif;
  font-weight:700;font-size:15.5px;padding:14px 24px;transition:background .2s}
.octa:hover{background:var(--blue-dark)}
.octa span{margin-left:6px}

/* yellow tiles */
.tiles{padding:34px 0 10px}
.tilegrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tilegrid a{background:var(--yellow);color:#231a00;text-decoration:none;font-family:'Roboto Slab',serif;
  font-weight:900;font-size:15.5px;line-height:1.3;padding:20px 16px;text-align:center;border-radius:4px;
  display:flex;align-items:center;justify-content:center;min-height:84px;transition:transform .2s,box-shadow .2s}
.tilegrid a:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(8,31,75,.18)}

/* bands */
.band{padding:70px 0}
.band.white{background:#fff}
.band.navy{background:var(--navy);color:#fff}
.band h2{font-size:clamp(26px,3.4vw,38px);font-weight:900}
.band.navy h2{color:#fff}
.aboutgrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.aboutgrid p{margin:14px 0;color:var(--muted);font-size:16.5px}
.aboutgrid .btnrow{margin-top:22px}
.aboutphoto img{border-radius:6px;box-shadow:0 16px 38px rgba(8,31,75,.22)}
.servegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.serve{background:#fff;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.serve img{aspect-ratio:16/9;object-fit:cover;width:100%}
.sbody{padding:22px 22px 24px;color:var(--ink);display:flex;flex-direction:column;gap:8px;flex:1}
.sbody h3{font-size:20px;font-weight:900;color:var(--navy)}
.sbody p{font-size:14.5px;color:var(--muted);flex:1}
.sbody a{font-family:'Roboto Slab',serif;font-weight:700;text-decoration:none;color:var(--blue)}
.sbody a:hover{text-decoration:underline}
.band.cta{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.ctagrid{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ctagrid h2{color:var(--navy);margin-bottom:8px}
.ctagrid p{color:var(--muted);max-width:560px}

/* interior */
.pageband{background:linear-gradient(110deg,var(--navy-deep),var(--navy));color:#fff;padding:42px 0 38px;
  border-bottom:4px solid var(--yellow)}
.crumb{font-size:13px;color:#b9c9e6;text-transform:uppercase;letter-spacing:1.8px;font-weight:600;margin-bottom:10px}
.crumb a{color:#fff;text-decoration:none}
.crumb a:hover{color:var(--yellow)}
.pageband h1{font-size:clamp(30px,4.4vw,46px);font-weight:900}
.pagegrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding:52px 0 76px}
.pagephoto img{border-radius:6px;margin-bottom:28px;max-height:400px;width:100%;object-fit:cover}
.content h2{color:var(--navy);font-size:26px;margin:34px 0 12px;font-weight:900}
.content h3{color:var(--navy);font-size:20px;margin:26px 0 10px}
.content h4{color:var(--navy);font-size:17px;margin:22px 0 8px}
.content p{margin:0 0 14px;max-width:72ch}
.content ul,.content ol{margin:0 0 16px 22px}
.content li{margin-bottom:8px}
.content a{font-weight:600}
.content strong{color:var(--navy)}
.content table{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:15px}
.content th{font-family:'Roboto Slab',serif;text-align:left;background:var(--wash);color:var(--navy);
  padding:10px 14px;border:1px solid var(--line);font-size:13.5px;text-transform:uppercase;letter-spacing:.6px}
.content td{padding:10px 14px;border:1px solid var(--line)}
.side{display:flex;flex-direction:column;gap:22px}
.sidecard{background:var(--wash);border:1px solid var(--line);border-radius:6px;padding:24px}
.sidecard.navycard{background:var(--navy);border-color:var(--navy);color:#fff}
.sidecard.navycard .fine{color:#b9c9e6}
.sidecard.yellow-edge{border-top:4px solid var(--yellow)}
.sidecard h2{font-size:17px;margin-bottom:14px;text-transform:uppercase;letter-spacing:1.2px;font-weight:900}
.sidecard.navycard h2{color:var(--yellow)}
.sidecard:not(.navycard) h2{color:var(--navy)}
.dispatch{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.dispatch li{display:flex;flex-direction:column;line-height:1.3}
.dispatch span{font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;color:#b9c9e6;font-weight:600}
.dispatch a{color:#fff;font-family:'Roboto Slab',serif;font-weight:700;font-size:19px;text-decoration:none}
.dispatch a:hover{color:var(--yellow)}
.qlist{list-style:none}
.qlist a{display:block;padding:9px 0;color:var(--navy);font-weight:700;font-family:'Roboto Slab',serif;
  font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--line)}
.qlist li:last-child a{border-bottom:none}
.qlist a:hover{color:var(--blue)}

/* forms */
.content form{max-width:640px;margin:10px 0 20px}
.content label{display:block;font-family:'Roboto Slab',serif;font-weight:700;font-size:14px;
  color:var(--navy);margin:15px 0 6px}
.content input,.content textarea,.content select{width:100%;padding:11px 13px;border:1px solid #9fadbe;
  border-radius:4px;font:15px 'Roboto',sans-serif;color:var(--ink);background:#fff}
.content input:focus,.content textarea:focus,.content select:focus{border-color:var(--blue)}
.content fieldset{border:1px solid var(--line);border-radius:6px;padding:14px 18px 16px;margin:20px 0}
.content legend{font-size:15px;font-weight:700;color:var(--navy);padding:0 8px}
.content fieldset.prod{background:var(--wash)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fradio{display:flex;gap:26px;flex-wrap:wrap;padding-top:4px}
.fradio label{display:inline-flex;align-items:center;gap:8px;margin:4px 0;font-family:'Roboto',sans-serif;
  font-weight:500;color:var(--ink);font-size:15px}
.fradio input{width:auto}
.content form .btn{margin-top:22px}

/* team / directory grid */
.content ul.team{list-style:none;margin:14px 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px}
.content ul.team li{background:var(--wash);border:1px solid var(--line);border-left:4px solid var(--yellow);
  border-radius:4px;padding:14px 16px;margin:0;line-height:1.5}
.content ul.team strong{font-family:'Roboto Slab',serif;font-size:16px}
@media(max-width:560px){.content ul.team{grid-template-columns:1fr}}

/* tank calculator */
.calc{background:var(--wash);border:1px solid var(--line);border-top:4px solid var(--yellow);
  border-radius:6px;padding:22px 24px 20px;max-width:640px;margin:6px 0 18px}
.calc .btn{margin-top:16px}
.calc-result{font-family:'Roboto Slab',serif;font-weight:900;font-size:24px;color:var(--navy);
  margin-top:14px;min-height:30px}

/* footer */
footer{background:var(--navy-deep);color:#c3d1ea;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:36px;padding:56px 24px 36px}
.fbrand{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Roboto Slab',serif;
  font-size:17px;margin-bottom:14px}
.fbrand .mark{width:38px;height:38px;font-size:22px}
footer h2{font-size:13.5px;color:var(--yellow);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:14px;
  font-family:'Roboto Slab',serif}
footer ul{list-style:none}
footer ul a{display:block;color:#e4ebf7;text-decoration:none;padding:5px 0;transition:color .2s}
footer ul a:hover{color:var(--yellow)}
footer p{margin-bottom:12px}
footer a{color:#fff}
.fbase{border-top:1px solid #1d3a75;padding-top:22px;padding-bottom:30px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.fbase p{margin:0;font-size:13.5px}
.fbase a{color:#c3d1ea}
.fbase a:hover{color:var(--yellow)}

/* responsive */
@media(max-width:1020px){
  .offers{grid-template-columns:1fr;margin-top:-56px}
  .tilegrid{grid-template-columns:repeat(3,1fr)}
  .aboutgrid{grid-template-columns:1fr}
  .servegrid{grid-template-columns:1fr}
  .pagegrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .phones{gap:18px}
}
@media(max-width:820px){
  .bbar{justify-content:center;text-align:center}
  .phones{margin-left:0;justify-content:center}
  header nav{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .schedbtn{order:1;margin-left:auto}
  .mnav-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--navy);border:none;
    color:#fff;font-family:'Roboto Slab',serif;font-weight:700;font-size:15px;padding:11px 18px;border-radius:4px;
    cursor:pointer}
  .mnav-toggle svg{width:18px;height:18px}
  .mainmenu{display:none;flex-direction:column;align-items:stretch;width:100%;background:var(--wash);
    border-radius:6px;margin:8px 0;padding:6px}
  .mainmenu.open{display:flex}
  .mainmenu a{border-bottom:1px solid var(--line);margin-bottom:0;padding:13px 14px}
  .mainmenu li:last-child a{border-bottom:none}
  .tilegrid{grid-template-columns:1fr 1fr}
  .hero-inner{padding:64px 24px 110px}
  .frow{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:26px;padding-top:40px}
  .band{padding:52px 0}
  .tsbar{justify-content:center;gap:16px}
}