/* roofingcontractorsspringfieldmo.com
   Ozark pine green + weathered copper + bone. Bitter slab serif headings,
   mixed case, system sans body. Two-band header: bone masthead with an
   oversized phone block, dark green nav bar underneath. No forms on this site,
   so the phone is the loudest thing on every screen. */

:root{
  --pine:#1d4032;
  --pine-d:#132a21;
  --pine-l:#2c5a47;
  --copper:#a4562b;
  --copper-d:#7f4120;
  --bone:#fbf8f2;
  --bone-2:#f2ece0;
  --ink:#1c2320;
  --muted:#5a635e;
  --rule:#d9d0be;
  --warn:#8a3b12;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font:17px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%;height:auto}
a{color:var(--copper-d)}
a:hover{color:var(--copper)}
.wrap{max-width:1130px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}

h1,h2,h3,h4,.bignum,.stepn,.mtext strong{
  font-family:Bitter,Georgia,"Times New Roman",serif;font-weight:700;
}
h1{font-size:2.45rem;line-height:1.14;margin:.15em 0 .3em;color:var(--pine)}
h2{font-size:1.72rem;line-height:1.22;margin:2.2em 0 .5em;color:var(--pine)}
h3{font-size:1.18rem;line-height:1.3;margin:1.8em 0 .3em;color:var(--pine-d)}
h4{font-size:1.02rem;margin:1.4em 0 .25em;color:var(--pine-d)}
p{margin:0 0 1.1em}
strong{font-weight:700}

/* ------------------------------------------------------------ trust strip */
.tstrip{background:var(--pine-d);color:#a9c0b3;font-size:12.5px;letter-spacing:.02em}
.tstrip .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;padding-top:8px;padding-bottom:8px}
.tstrip a{color:#d8bfa8;text-decoration:underline}
.tstrip a:hover{color:#fff}
.tstrip span:before{content:"\2022";color:var(--copper);margin-right:8px}
.tstrip span:first-child:before{content:"\2605";color:#e0a35f}

/* ------------------------------------------------------------ storm ribbon */
.ribbon{background:var(--warn);color:#fff;font-size:14.5px;line-height:1.5}
.ribbon .wrap{padding-top:9px;padding-bottom:9px}
.ribbon a{color:#ffe6cf;text-decoration:underline}
.ribbon a:hover{color:#fff}

/* ---------------------------------------------------------------- masthead */
.mast{background:var(--bone);border-bottom:1px solid var(--rule)}
.masti{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:15px;padding-bottom:15px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--pine)}
.mtext{display:flex;flex-direction:column;line-height:1.06}
.mtext strong{font-size:1.44rem;letter-spacing:-.005em}
.mtext em{font-style:normal;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--copper);margin-top:5px}
.mphone{text-align:right;display:flex;flex-direction:column;line-height:1.2}
.mp-lab{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mp-num{font-family:Bitter,Georgia,serif;font-weight:700;font-size:1.9rem;
  color:var(--pine);text-decoration:none;letter-spacing:-.01em}
.mp-num:hover{color:var(--copper-d)}
.mp-hrs{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ------------------------------------------------------------------- nav
   The dropdown rule is scoped to `ul.sub`. Do NOT add a broad `.nav ul
   {display:flex}` rule: its specificity beats `display:none` and the menu
   sticks open on every page. */
.nav{background:var(--pine);border-bottom:5px solid var(--copper)}
.nav ul{list-style:none;margin:0;padding:0}
.nav ul.lvl1{display:flex;flex-wrap:wrap;align-items:stretch}
.nav ul.lvl1>li{position:relative}
.nav ul.lvl1>li>a{
  display:block;padding:13px 17px;text-decoration:none;color:#dfe8e2;
  font-size:14.5px;font-weight:600;letter-spacing:.015em;
}
.nav ul.lvl1>li>a:hover,.nav ul.lvl1>li>a.on{background:var(--pine-l);color:#fff}
.car{font-size:9px;opacity:.7;margin-left:3px}
.nav ul.sub{
  display:none;position:absolute;top:100%;left:0;z-index:50;min-width:288px;
  background:#fff;border:1px solid var(--rule);border-top:4px solid var(--copper);
  box-shadow:0 12px 26px rgba(19,42,33,.24);padding:6px 0;
}
.nav ul.sub.sub-city{min-width:216px}
.nav li.has-sub:hover>ul.sub,.nav li.has-sub:focus-within>ul.sub{display:block}
.nav ul.sub li a{display:block;padding:8px 17px;text-decoration:none;color:var(--ink);font-size:14.5px}
.nav ul.sub li a:hover,.nav ul.sub li a.on{background:var(--bone-2);color:var(--pine)}
.nav ul.sub li.stormitem a{color:var(--warn);font-weight:600}
.nav ul.sub li.sublast a{border-top:1px solid var(--rule);margin-top:5px;padding-top:11px;
  font-weight:700;color:var(--pine)}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--pine-d);overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero .wrap{position:relative;padding-top:52px;padding-bottom:52px}
.hero-card{background:var(--bone);max-width:660px;padding:32px 34px 28px;
  border-left:8px solid var(--copper);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.hero-card h1{margin-top:0}
.hero-hook{font-size:1.12rem;color:var(--ink);margin-bottom:1.1em}
.hero-sub{font-size:.93rem;color:var(--muted);margin:0 0 1.3em;letter-spacing:.01em}
.hero-note{font-size:.9rem;color:var(--muted);margin:1em 0 0}

/* page banner for interior pages (no hero photo) */
.pbanner{background:var(--pine);color:#eaf1ec;padding:34px 0 30px;border-bottom:5px solid var(--copper)}
.pbanner h1{color:#fff;margin:.18em 0 .3em}
.pbanner .lede{font-size:1.1rem;color:#cfdcd4;max-width:760px;margin:0 0 1.2em}
.pbanner .btn{background:var(--copper);border-color:var(--copper)}
.pbanner .btn:hover{background:var(--copper-d);border-color:var(--copper-d)}
.pb-note{font-size:.88rem;color:#a9bdb2;margin:1em 0 0}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-block;background:var(--pine);color:#fff;text-decoration:none;
  font-weight:700;font-size:1.02rem;padding:13px 26px;border-radius:999px;
  border:2px solid var(--pine);letter-spacing:.01em}
.btn:hover{background:var(--pine-l);border-color:var(--pine-l);color:#fff}
.btn-lg{font-size:1.16rem;padding:16px 34px}
.btn-out{background:transparent;color:var(--copper-d);border-color:var(--copper)}
.btn-out:hover{background:var(--copper);color:#fff;border-color:var(--copper)}

/* ---------------------------------------------------------------- crumbs */
.crumbs{font-size:13px;color:var(--muted);padding:11px 0 0}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--rule)}
.crumbs a:hover{color:var(--copper-d)}
.crumbs .sep{opacity:.5;margin:0 2px}

/* --------------------------------------------------------------- sections */
main{display:block}
.sec{padding:14px 0 4px}
.band{background:var(--pine);color:#e7efe9;padding:44px 0 40px;margin:56px 0}
.band h2,.band h3{color:#fff}
.band a{color:#f0c9a8}
.band a:hover{color:#fff}
.band .tnote{color:#a9bdb2}
.bone{background:var(--bone);padding:40px 0 34px;margin:52px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}

.rule{border:0;border-top:1px solid var(--rule);margin:44px 0}
.rule-c{border:0;border-top:3px solid var(--copper);width:78px;margin:34px 0 26px}

.lede{font-size:1.14rem;line-height:1.6}

/* ------------------------------------------------------------ pain points */
.pains{list-style:none;padding:0;margin:1.4em 0 0;display:grid;
  grid-template-columns:1fr 1fr;gap:14px 30px}
.pains li{position:relative;padding-left:26px;font-size:.99rem;line-height:1.5}
.pains li:before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;
  background:var(--copper);transform:rotate(45deg)}

/* ---------------------------------------------------------------- callbar */
.callbar{background:var(--bone-2);border-top:3px solid var(--copper);
  border-bottom:1px solid var(--rule);margin:44px 0;padding:30px 22px;text-align:center}
.cb-in{max-width:720px;margin:0 auto}
.cb-h{font-family:Bitter,Georgia,serif;font-weight:700;font-size:1.34rem;
  color:var(--pine);margin:0 0 .35em;line-height:1.3}
.cb-sub{margin:0 0 1.1em;color:var(--muted);font-size:1rem}
.cb-badges{list-style:none;padding:0;margin:1.15em 0 0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:8px 22px;font-size:12.5px;color:var(--muted);
  letter-spacing:.02em}
.cb-badges li:before{content:"\2713";color:var(--pine);font-weight:700;margin-right:6px}

/* ----------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;margin:1.6em 0 1.9em}
table{border-collapse:collapse;width:100%;font-size:15.5px}
table caption{text-align:left;font-family:Bitter,Georgia,serif;font-weight:700;
  font-size:1.02rem;color:var(--pine);padding-bottom:9px}
.hail th,.hail td,.price th,.price td{border:1px solid var(--rule);padding:8px 11px;
  text-align:left;vertical-align:top}
.hail thead th,.price thead th{background:var(--pine);color:#fff;font-weight:700;
  font-family:Bitter,Georgia,serif;border-color:var(--pine)}
.hail tbody tr:nth-child(odd),.price tbody tr:nth-child(odd){background:var(--bone)}
.hail td.num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--warn);white-space:nowrap}
.price th[scope=row]{font-weight:600;background:transparent}
.band .hail thead th,.band .price thead th{background:var(--copper);border-color:var(--copper)}
.band .hail th,.band .hail td,.band .price th,.band .price td{border-color:#3d6a57}
.band .hail tbody tr:nth-child(odd),.band .price tbody tr:nth-child(odd){background:#22493a}
.band .hail td.num{color:#ffcfa6}
.tnote{font-size:13.5px;color:var(--muted);margin:.5em 0 0;line-height:1.55}

/* -------------------------------------------------------------- callouts */
.note{background:var(--bone);border-left:5px solid var(--copper);padding:18px 22px;
  margin:1.7em 0;font-size:.99rem}
.note p:last-child{margin-bottom:0}
.note-h{font-family:Bitter,Georgia,serif;font-weight:700;color:var(--pine);
  display:block;margin-bottom:.35em}
.warnbox{background:#fdf1e8;border-left:5px solid var(--warn);padding:18px 22px;margin:1.7em 0}
.warnbox p:last-child{margin-bottom:0}
.band .note{background:#22493a;border-left-color:var(--copper);color:#e7efe9}
.band .note-h{color:#fff}

/* ------------------------------------------------------------- numeric figs */
.figs{display:flex;flex-wrap:wrap;gap:30px 54px;margin:2.2em 0;padding:22px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fig{flex:1 1 150px}
.bignum{display:block;font-size:2.5rem;line-height:1;color:var(--copper);margin-bottom:5px}
.figlab{font-size:13.5px;color:var(--muted);line-height:1.45;display:block}

/* ------------------------------------------------------------- steps */
.steps{list-style:none;padding:0;margin:1.5em 0;counter-reset:s}
.steps li{position:relative;padding-left:56px;margin-bottom:1.6em}
.stepn{position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;
  background:var(--pine);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.14rem}
.steps h3{margin:0 0 .25em}

/* ---------------------------------------------------------------- reviews */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:26px;margin:1.6em 0}
.rev{border-top:3px solid var(--copper);padding-top:15px}
.rev p{font-size:.97rem;line-height:1.6}
.rev p b{color:var(--pine-d)}
.revwho{display:flex;align-items:center;gap:11px;margin-top:12px}
.revwho img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.revname{font-size:13.5px;color:var(--muted);line-height:1.4}
.revname strong{display:block;color:var(--ink);font-size:14.5px}

/* ------------------------------------------------------------ before/after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:1.6em 0}
.ba figure{margin:0}
.ba img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.ba figcaption{padding-top:12px}
.ba h3{margin-top:.3em}
.ba ul{margin:.6em 0 0;padding-left:19px;font-size:.95rem}
.ba li{margin-bottom:.35em}

/* -------------------------------------------------------------- svc blocks
   Every service block is a two-up grid cell. Fourteen stacked full-width
   sections put the rest of the homepage a very long way down the page; two-up
   halves the run, and the letterboxed photo halves it again.

   `align-items:start` is load-bearing. Without it every card stretches to the
   tallest in its row and the section becomes the uniform card wall that reads
   as generated. The blocks are meant to have ragged bottoms. */
.svcgrid2{display:grid;grid-template-columns:1fr 1fr;gap:34px 44px;align-items:start;
  margin:1.6em 0 0}
.svcblock{margin:0}
.svcblock h2{margin:0 0 .4em;font-size:1.3rem;line-height:1.25}
.svcshot{display:block;width:100%;height:210px;object-fit:cover;
  border:1px solid var(--rule);margin-bottom:13px}
.svcblock p{font-size:.97rem;margin-bottom:.85em}
.svcblock p:last-child{margin-bottom:0}

/* older service-page pattern, kept for the interior templates */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:26px 30px;margin:1.6em 0}
.svccard{border-top:1px solid var(--rule);padding-top:14px}
.svccard h3{margin-top:0}
.svccard p{font-size:.96rem;margin-bottom:.5em}

/* ------------------------------------------------------------------- faq */
.faq{margin:2.4em 0}
.fq{border-bottom:1px solid var(--rule);padding-bottom:1.05em;margin-bottom:1.15em}
.fq h3{margin:0 0 .35em;font-size:1.08rem}
.fq p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- available */
.availin{background:var(--bone);border:1px solid var(--rule);padding:22px 24px;margin:2.2em 0}
.availin h2{margin-top:0;font-size:1.32rem}
.availin ul{list-style:none;padding:0;margin:.9em 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px 22px;font-size:.95rem}

/* ------------------------------------------------------------------- map */
.mapbox{margin:1.8em 0;border:1px solid var(--rule)}
.mapbox iframe{display:block;width:100%;height:330px;border:0}

/* -------------------------------------------------------------- hub lists */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px 34px;margin:1.8em 0}
.hubcard{border-left:3px solid var(--copper);padding-left:16px}
.hubcard h3{margin-top:0}
.hubcard p{font-size:.96rem}
.plaincities{columns:3;column-gap:30px;font-size:.95rem;margin:1.2em 0}
.plaincities li{break-inside:avoid;margin-bottom:.3em}

/* ------------------------------------------------------------ misc lists */
.rellist{list-style:none;padding:0;margin:1em 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:9px 26px;font-size:.97rem}
.rellist li:before{content:"\203A";color:var(--copper);font-weight:700;margin-right:8px}
.svchero{margin:1.8em 0}
.svchero img{width:100%;height:auto;border:1px solid var(--rule)}
.secintro{margin-top:1.6em}
.checks{list-style:none;padding:0;margin:1.2em 0}
.checks li{position:relative;padding-left:27px;margin-bottom:.6em}
.checks li:before{content:"\2713";position:absolute;left:0;color:var(--pine);font-weight:700}
.xlist{list-style:none;padding:0;margin:1.2em 0}
.xlist li{position:relative;padding-left:27px;margin-bottom:.6em}
.xlist li:before{content:"\2715";position:absolute;left:0;color:var(--warn);font-weight:700}

/* --------------------------------------------------------------- sticky */
.sticky{display:none}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--pine-d);color:#bccec4;margin-top:56px;font-size:14.5px;
  border-top:6px solid var(--copper)}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;
  padding-top:40px;padding-bottom:32px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:7px;line-height:1.4}
.fcol a{color:#bccec4;text-decoration:none}
.fcol a:hover{color:#fff;text-decoration:underline}
.fh{font-family:Bitter,Georgia,serif;font-weight:700;color:#fff;font-size:1.02rem;margin:0 0 .8em}
.fname{font-family:Bitter,Georgia,serif;font-weight:700;color:#fff;font-size:1.14rem;margin:0 0 .5em}
.fadr{margin:0 0 .6em;line-height:1.5}
.fphone a{font-family:Bitter,Georgia,serif;font-weight:700;font-size:1.42rem;color:#fff;
  text-decoration:none}
.fphone a:hover{color:#f0c9a8}
.fhrs{font-size:13.5px;margin:.7em 0 .9em;line-height:1.5}
.fver{font-size:13px;line-height:1.55;color:#9fb3a7;margin:0}
.fver a{text-decoration:underline;color:#d8bfa8}
.footbot{border-top:1px solid #2c5a47;padding-top:16px;padding-bottom:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px}
.footbot p{margin:0}
.legal{list-style:none;display:flex;gap:20px;margin:0;padding:0}

/* -------------------------------------------------------------- responsive */
@media(max-width:900px){
  .svcgrid2{gap:28px 30px}
  .svcshot{height:180px}
  .footgrid{grid-template-columns:1fr 1fr}
  .ba{grid-template-columns:1fr}
  .plaincities{columns:2}
}
@media(max-width:760px){
  body{font-size:16.5px}
  h1{font-size:1.95rem}
  h2{font-size:1.45rem}
  .masti{flex-direction:column;align-items:flex-start;gap:12px}
  .mphone{text-align:left}
  .mp-num{font-size:1.7rem}
  .nav ul.lvl1{flex-direction:column}
  .nav ul.lvl1>li>a{padding:11px 20px;border-bottom:1px solid #2c5a47}
  .nav ul.sub{position:static;display:block;border:0;border-top:0;box-shadow:none;
    background:var(--pine-d);padding:0}
  .nav ul.sub li a{color:#b9cdc2;padding:9px 34px;font-size:14px}
  .nav ul.sub li a:hover{background:var(--pine-l);color:#fff}
  .nav ul.sub li.stormitem a{color:#f3b98d}
  .nav ul.sub li.sublast a{border-top:1px solid #2c5a47;color:#fff}
  .car{display:none}
  .hero .wrap{padding-top:30px;padding-bottom:30px}
  .hero-card{padding:24px 22px 22px;border-left-width:6px}
  .pains{grid-template-columns:1fr}
  /* two-up is unusable at ~160px a column, so the grid drops to one on a
     phone. The photo shrinks instead, to keep the section from running long. */
  .svcgrid2{grid-template-columns:1fr;gap:28px}
  .svcshot{height:175px}
  .footgrid{grid-template-columns:1fr;gap:26px}
  .plaincities{columns:1}
  body{padding-bottom:62px}
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--copper);align-items:center;justify-content:center;gap:12px;
    padding:11px 14px;box-shadow:0 -3px 14px rgba(0,0,0,.25);flex-wrap:wrap}
  .sticky a{color:#fff;font-family:Bitter,Georgia,serif;font-weight:700;font-size:1.16rem;
    text-decoration:none}
  .sticky-note{color:#ffe4d1;font-size:12.5px}
}