/* emergencytowserviceatlanta.com - hand-rolled, not a framework */
* { box-sizing: border-box; }
body { margin:0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:15px; line-height:1.62; color:#2a2c2e; background:#fff; }
h1,h2,h3,h4 { font-family:'Oswald', 'Arial Narrow', Arial, sans-serif; color:#1d2226; line-height:1.2; margin:0 0 12px; }
h1 { font-size:34px; text-transform:uppercase; letter-spacing:.5px; }
h2 { font-size:26px; }
h3 { font-size:20px; }
p { margin:0 0 15px; }
a { color:#b34a12; }
a:hover { color:#7d3007; }
img { max-width:100%; height:auto; }
.wrap { max-width:1060px; margin:0 auto; padding:0 18px; }

/* top strip */
.topbar { background:#24272a; color:#e8e8e8; font-size:13px; padding:6px 0; }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.topbar a { color:#ffd23f; text-decoration:none; font-weight:bold; }
.topbar .lic { color:#aab0b5; }

/* header */
header.site { background:#fff; border-bottom:4px solid #d95b1e; }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
.logo { text-decoration:none; }
.logo b { display:block; font-family:'Oswald',Arial,sans-serif; font-size:23px; color:#1d2226; text-transform:uppercase; letter-spacing:.5px; }
.logo span { display:block; font-size:11.5px; color:#82600a; letter-spacing:.3px; }
nav.main ul { list-style:none; margin:0; padding:0; display:flex; gap:2px; align-items:center; }
nav.main > ul > li { position:relative; }
nav.main a { display:block; padding:9px 13px; color:#24272a; text-decoration:none; font-family:'Oswald',Arial,sans-serif; font-size:16px; text-transform:uppercase; }
nav.main a:hover { background:#f1e9df; }
nav.main li.has-sub:hover .sub { display:block; }
nav.main .sub { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #cfd2d4; border-top:3px solid #d95b1e; min-width:235px; z-index:60; box-shadow:0 4px 9px rgba(0,0,0,.14); }
nav.main .sub a { font-family:Verdana,sans-serif; font-size:13px; text-transform:none; padding:8px 13px; border-bottom:1px solid #eee; }
.callbtn { background:#d95b1e; color:#fff !important; font-weight:bold; border-radius:3px; padding:10px 16px !important; }
.callbtn:hover { background:#b34a12 !important; }
#navtoggle { display:none; background:none; border:1px solid #999; font-size:22px; padding:2px 10px; }

/* hero */
.hero { background:#2b2f33 url('/images/emergency-tow-service-atlanta-hero.webp') center/cover no-repeat; position:relative; }
.hero .shade { background:rgba(20,22,24,.68); }
.hero .wrap { padding:52px 18px 56px; color:#f4f4f2; }
.hero h1 { color:#fff; font-size:40px; margin-bottom:6px; }
.hero .sub { font-size:17px; color:#ffd23f; margin-bottom:4px; font-weight:bold; }
.hero .svc-line { font-size:14px; color:#d8d8d4; margin-bottom:20px; }
.bigcall { display:inline-block; background:#d95b1e; color:#fff; font-family:'Oswald',Arial,sans-serif; font-size:24px; padding:13px 26px; border-radius:3px; text-decoration:none; letter-spacing:.5px; }
.bigcall:hover { background:#e96f33; color:#fff; }
.hero .eta { display:inline-block; margin-left:14px; font-size:13px; color:#cfd2d4; }

/* layout helpers */
.cols { display:flex; gap:34px; align-items:flex-start; }
.cols .main-col { flex:1 1 66%; min-width:0; }
.cols .side-col { flex:0 0 305px; }
section.band { padding:34px 0; }
section.band.gray { background:#f2f3f1; border-top:1px solid #e2e3e0; border-bottom:1px solid #e2e3e0; }
section.band.dark { background:#24272a; color:#e6e6e3; }
section.band.dark h2 { color:#ffd23f; }
.rule2 h2 { border-bottom:3px double #b7bcbf; padding-bottom:7px; }

/* quote form */
.qform { background:#fdf6e7; border:1px solid #d9c58c; padding:18px 18px 20px; }
.qform h3 { margin-top:0; font-size:19px; }
.qform label { display:block; font-size:12px; font-weight:bold; margin:10px 0 3px; color:#4a4d50; }
.qform input, .qform textarea, .qform select { width:100%; padding:9px; border:1px solid #b9b9b4; font-family:inherit; font-size:14px; background:#fff; }
.qform textarea { min-height:74px; }
.qform button { margin-top:14px; width:100%; background:#2e7d43; border:0; color:#fff; font-size:16px; font-weight:bold; padding:12px; cursor:pointer; font-family:Verdana,sans-serif; }
.qform button:hover { background:#256636; }
.qform .fineprint { font-size:11px; color:#7a7d80; margin:8px 0 0; }

/* service teaser sections on home */
.svc-sec { margin-bottom:30px; }
.svc-sec img { float:right; margin:4px 0 12px 20px; width:300px; border:1px solid #cfd2d4; }
.svc-sec:after { content:""; display:table; clear:both; }
@media (max-width:640px){ .svc-sec img { float:none; width:100%; margin:8px 0; } }

/* tables */
table.plain { border-collapse:collapse; width:100%; margin:0 0 16px; }
table.plain td, table.plain th { border:1px solid #c6c9cb; padding:8px 10px; font-size:14px; text-align:left; }
table.plain th { background:#eceae4; font-family:'Oswald',Arial,sans-serif; text-transform:uppercase; font-size:14px; }
table.areas td { font-size:13.5px; }

/* misc */
.crumbs { font-size:12px; color:#6c7074; padding:10px 0 0; }
.crumbs a { color:#6c7074; }
ul.checks { list-style:none; padding:0; }
ul.checks li { padding-left:24px; position:relative; margin-bottom:8px; }
ul.checks li:before { content:"\2713"; position:absolute; left:2px; color:#2e7d43; font-weight:bold; }
.steps { counter-reset:s; list-style:none; padding:0; }
.steps li { counter-increment:s; padding-left:40px; position:relative; margin-bottom:12px; }
.steps li:before { content:counter(s); position:absolute; left:0; top:1px; background:#24272a; color:#ffd23f; width:26px; height:26px; text-align:center; line-height:26px; font-family:'Oswald',Arial,sans-serif; border-radius:2px; }
.note { background:#fff8dd; border-left:4px solid #d9a520; padding:12px 14px; margin:0 0 16px; font-size:14px; }
.review { border:1px solid #d9dbdd; background:#fff; padding:14px 16px; margin-bottom:14px; font-size:14px; }
.review .who { color:#6c7074; font-size:12.5px; margin-top:6px; }
.stars { color:#d9a520; letter-spacing:2px; }
.faq dt { font-weight:bold; margin-top:16px; font-family:'Oswald',Arial,sans-serif; font-size:16.5px; }
.faq dd { margin:6px 0 0; }

/* footer */
footer.site { background:#1d2023; color:#c9ccce; font-size:13px; margin-top:44px; }
footer.site .wrap { display:flex; gap:38px; flex-wrap:wrap; padding:34px 18px 26px; }
footer.site h4 { color:#ffd23f; font-size:15px; text-transform:uppercase; }
footer.site ul { list-style:none; margin:0; padding:0; }
footer.site li { margin-bottom:6px; }
footer.site a { color:#c9ccce; text-decoration:none; }
footer.site a:hover { color:#fff; text-decoration:underline; }
.copyline { border-top:1px solid #34383b; text-align:center; padding:12px; font-size:12px; color:#8d9194; }

/* sticky mobile call bar */
.mobilecall { display:none; }
@media (max-width:820px){
  nav.main { display:none; width:100%; }
  nav.main.open { display:block; }
  nav.main ul { flex-direction:column; align-items:stretch; }
  nav.main .sub { display:block; position:static; border:0; box-shadow:none; padding-left:14px; }
  #navtoggle { display:block; }
  .cols { flex-direction:column; }
  .cols .side-col { flex:1 1 auto; width:100%; }
  .hero h1 { font-size:29px; }
  .mobilecall { display:block; position:fixed; bottom:0; left:0; right:0; background:#d95b1e; text-align:center; z-index:90; }
  .mobilecall a { display:block; color:#fff; font-family:'Oswald',Arial,sans-serif; font-size:19px; padding:12px; text-decoration:none; }
  body { padding-bottom:50px; }
}