/* Petco Petroleum & Petco Energy - responsive layout (Happy Web Co., 2026) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%;height:auto;border:0}
a{color:#C95A24;text-decoration:none}
a:visited{color:#8E644F}
a:hover,a:focus{color:#F18928;text-decoration:underline}
.page{max-width:840px;margin:0 auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#240808;padding:8px 12px;z-index:10}
.skip-link:focus{left:8px;top:8px}

/* Header with clickable logos */
.site-header{position:relative}
.site-header .logo-link{position:absolute;display:block}
.site-header .logo-link:focus{outline:2px solid #fff;outline-offset:2px}
.home .logo-1{left:5.476%;top:60.94%;width:21.43%;height:27.27%}
.home .logo-2{left:30%;top:60.94%;width:21.43%;height:27.27%}
.inner .logo-1{left:5.952%;top:23.2%;width:19.76%;height:59.2%}
.inner .logo-2{left:28.571%;top:23.2%;width:19.76%;height:59.2%}

/* Navigation bar */
.site-nav{background:#8E8071}
.site-nav ul{list-style:none;margin:0;padding:0 18px 0 0;display:flex;justify-content:flex-end;align-items:stretch;min-height:30px}
.site-nav li{display:flex;align-items:stretch}
.site-nav li+li::before{content:"|";color:#fff;font:bold 10px "Times New Roman",Times,serif;align-self:center;padding:0 6px}
.site-nav a,.site-nav a:visited{display:flex;align-items:center;padding:0 12px;color:#fff;font:bold 10px "Times New Roman",Times,serif;letter-spacing:.02em;text-transform:uppercase;border-bottom:3px solid transparent;border-top:3px solid transparent;text-decoration:none}
.site-nav a:hover,.site-nav a:focus,.site-nav a[aria-current="page"]{border-bottom-color:#fff;color:#fff;text-decoration:none}
.nav-band{height:15px;background:linear-gradient(90deg,#300e05,#3a1a10 50%,#300e05)}
.home .site-nav{border-bottom:1px solid #33180f}

/* Inner page body */
.page-band img{width:100%}
.page-title{margin:0;font:normal 21px "Times New Roman",Times,serif;color:#240808;text-transform:uppercase;letter-spacing:.01em}
@media (min-width:641px){.page-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
.content-row{display:grid;grid-template-columns:63.333% 36.667%}
.content-text{padding:30px}
.content-text p{margin:0 0 12px;font-size:12px;line-height:1.35;text-align:justify}
.content-photo{padding:0}
.content-photo .photo-full{display:none}

/* Contact */
.offices{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding:31px}
.office{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:12px;line-height:1.35}
.office h2{margin:0;font-size:12px;font-weight:bold}
.office address{font-style:normal}
.office a,.office a:visited{color:inherit}
.office-blank{visibility:hidden}

/* Footer */
.site-footer{padding:40px 16px 24px;text-align:center}
.copyright{font-size:10px;color:#666;margin:0}

/* Mobile and small tablets */
@media (max-width:640px){
  /* Crop headers from the left so both logos stay large on phones */
  .site-header img{object-fit:cover;object-position:left center;width:100%}
  .home .site-header img{height:240px}
  .inner .site-header img{height:110px}
  .home .logo-1{left:37px;top:146px;width:145px;height:65px}
  .home .logo-2{left:204px;top:146px;width:145px;height:65px}
  .inner .logo-1{left:44px;top:25px;width:146px;height:65px}
  .inner .logo-2{left:211px;top:25px;width:146px;height:65px}
  .site-nav ul{justify-content:center;flex-wrap:wrap;padding:6px 8px;min-height:0}
  .site-nav li+li::before{display:none}
  .site-nav a,.site-nav a:visited{font-size:13px;padding:10px 10px;min-height:44px}
  .nav-band{height:8px}
  .page-band{display:none}
  .page-title{padding:24px 20px 4px;font-size:24px;line-height:1.2}
  .content-row{display:block}
  .content-text{padding:12px 20px 8px}
  .content-text p{font-size:16px;line-height:1.55;text-align:left;margin-bottom:16px}
  .content-photo{padding:0 20px}
  .content-photo .photo-desktop{display:none}
  .content-photo .photo-full{display:block;width:100%;max-width:360px;margin:0 auto}
  .contact-band{padding:0 20px}
  .offices{grid-template-columns:1fr;gap:0;padding:8px 20px}
  .office{grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid #e5dfd8;font-size:16px;line-height:1.5}
  .office h2{font-size:16px;color:#240808}
  .office-blank{display:none}
  .site-footer{padding:28px 20px 24px}
  .copyright{font-size:12px;line-height:1.5}
}