/* drywallarvada.com. Stylesheet is specific to this build and is not shared
   with any other site. Headings are Georgia, body is the system sans stack,
   so nothing here loads a webfont. */

:root{
  --slate:#2e3841;
  --slate-2:#3d4a55;
  --gyp:#f7f5f1;
  --amber:#c8801e;
  --amber-d:#a5670f;
  --mud:#d9d2c6;
  --ink:#22282e;
  --rule:#c9c2b5;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--gyp);color:var(--ink);
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
img{max-width:100%;height:auto}
a{color:#8a5205}
a:hover{color:var(--amber-d)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

h1,h2,h3,.wordmark,caption{font-family:Georgia,"Times New Roman",serif;font-weight:700}
h1{font-size:2.15rem;line-height:1.18;margin:.7em 0 .35em;color:var(--slate)}
h2{font-size:1.5rem;line-height:1.25;margin:1.9em 0 .5em;color:var(--slate)}
h3{font-size:1.14rem;margin:1.4em 0 .35em;color:var(--slate)}
p{margin:0 0 1.05em}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:10px 14px}

/* --- chrome --- */
.topstrip{background:var(--slate-2);color:#e6e1d8;font-size:.79rem;letter-spacing:.02em}
.topstrip .wrap{display:flex;gap:22px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topstrip span::before{content:"\2713 ";color:var(--amber)}

.masthead{background:var(--slate);color:#fff;border-bottom:4px solid var(--amber)}
.mast-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.wordmark{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:1.3rem}
.wordmark b{color:var(--amber)}
.mainnav{margin-left:auto}
.mainnav>ul{display:flex;gap:5px;list-style:none;margin:0;padding:0}
.mainnav .sub{list-style:none;margin:0;padding:0}
.mainnav a{color:#e9e5dd;text-decoration:none;padding:9px 10px;display:block;font-size:.93rem}
.mainnav a:hover{background:var(--slate-2);color:#fff}
.has-sub{position:relative}
.mainnav .sub{display:none;position:absolute;left:0;top:100%;background:var(--slate);
  border:1px solid var(--slate-2);border-top:3px solid var(--amber);
  flex-direction:column;min-width:250px;z-index:20;gap:0}
.mainnav .has-sub:hover .sub,.mainnav .has-sub:focus-within .sub{display:flex}
.mast-call{margin-left:4px}

.crumbs{background:var(--mud);font-size:.85rem}
.crumbs .wrap{padding-top:8px;padding-bottom:8px}
.crumbs .sep{color:#7a7364}

/* --- buttons, deliberately not a matched set --- */
.btn{display:inline-block;text-decoration:none;font-weight:700;cursor:pointer;
  border:0;font-family:inherit;min-height:44px}
.btn-call{background:var(--amber);color:#241a09;padding:12px 20px;border-radius:3px;
  font-size:1rem;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.btn-call:hover{background:#dd9127;color:#241a09}
.btn-call.big{font-size:1.22rem;padding:15px 30px}
.btn-alt{background:transparent;color:var(--slate);padding:12px 18px;
  border:2px solid var(--slate);border-radius:0;font-size:.97rem}
.btn-alt:hover{background:var(--slate);color:#fff}
.btn-go{background:var(--slate);color:#fff;padding:15px 22px;font-size:1.06rem;
  border-radius:2px;width:100%}
.btn-go:hover{background:#1e262d}

/* --- hero --- */
.hero{background:var(--slate);color:#eee9e0;padding:34px 0 30px}
.hero h1{color:#fff;margin-top:0;font-size:2.4rem}
.hero .sub{font-size:1.1rem;color:#d5cec2;margin-bottom:.5em}
.hero .strip{color:var(--amber);font-size:.93rem;letter-spacing:.03em;margin-bottom:1.4em}
.herogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
.undercall{font-size:.9rem;color:#c5bdb0;margin-top:1em}
.heroband{margin-top:-1px}
.heroband img{width:100%;display:block}

/* --- forms --- */
.quote{background:#fff;border:1px solid var(--rule);padding:20px 20px 16px;
  border-top:5px solid var(--amber);scroll-margin-top:20px}
.quote-full{max-width:660px;margin:44px auto 54px}
.qh{margin:0 0 .2em;font-size:1.24rem}
.qsub{font-size:.9rem;color:#5b5346;margin-bottom:1.1em}
.fld{margin-bottom:13px}
.fld label{display:block;font-weight:700;font-size:.87rem;margin-bottom:4px;color:var(--slate)}
.fld input,.fld select,.fld textarea{
  width:100%;font:16px/1.4 inherit;padding:11px 10px;min-height:44px;
  border:1px solid #a9a294;background:#fdfcfa;border-radius:2px}
.fld textarea{min-height:80px}
.hint{display:block;font-size:.79rem;color:#655c4d;margin-top:4px}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reassure{font-size:.82rem;color:#5b5346;margin:.8em 0 0}

/* --- reviews --- */
.reviews{margin-top:36px}
.reviewgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:26px;align-items:start}
.review{margin:0;background:#fff;border:1px solid var(--rule);padding:16px 17px}
.review blockquote{margin:0;font-size:.94rem}
.review figcaption{font-size:.86rem;color:#5b5346;margin-top:.5em}
.face{border-radius:50%;width:72px;height:72px;object-fit:cover;float:right;
  margin:0 0 8px 12px}
.rtag{display:block;color:#7a7364;font-size:.8rem}

/* --- pain grid --- */
.paingrid{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2px 26px;align-items:start}
.paingrid li{padding:9px 0 9px 26px;position:relative;border-bottom:1px dotted var(--rule)}
.paingrid li::before{content:"\2715";position:absolute;left:0;color:#a33;font-weight:700}

.trustgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;align-items:start}
.tr h3{margin-top:0}

/* --- the two-up service grid. align-items:start is load bearing: without it
   every card stretches to the tallest in its row and the section becomes a
   wall of identical rectangles. --- */
.cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;align-items:start}
.card{background:#fff;border:1px solid var(--rule);padding:0 17px 15px}
.cardimg{display:block;margin:0 -17px 0}
.cardimg img{width:100%;height:200px;object-fit:cover;display:block}
.card h3{margin-top:.85em}
.card h3 a{text-decoration:none;color:var(--slate)}
.card h3 a:hover{color:var(--amber-d);text-decoration:underline}
.card p{font-size:.94rem}
.card .lead{font-weight:600;color:#3c3a33}

/* --- numeric callouts --- */
.numrow{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  background:var(--mud);padding:26px 20px;margin:44px 0}
.num{text-align:center;min-width:180px}
.numval{display:block;font-size:2.1rem;color:var(--slate);line-height:1.1;font-family:Georgia,"Times New Roman",serif;font-weight:700}
.nap{font-weight:700}
.dash{color:#8a8272}
.num span{font-size:.85rem;color:#5b5346}

.steps{counter-reset:s;list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;align-items:start}
.steps li{border-top:4px solid var(--amber);padding-top:10px}
.steps h3{margin-top:.2em}

/* --- before / after --- */
.bagrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.bagrid figure{margin:0;background:#fff;border:1px solid var(--rule);padding:14px}
.balabel{display:inline-block;background:var(--slate);color:#fff;font-size:.76rem;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 10px;margin-bottom:9px}
.bagrid img{width:100%;display:block}
.bagrid figcaption{font-size:.9rem;margin-top:10px}
.bagrid ul{padding-left:19px;margin:.5em 0 0}
.bagrid li{margin-bottom:.35em}

/* --- tables --- */
.tablewrap{overflow-x:auto;margin:26px 0}
table{border-collapse:collapse;width:100%;background:#fff;font-size:.92rem}
caption{text-align:left;font-size:.86rem;color:#5b5346;padding:0 0 9px;font-weight:400}
th,td{border:1px solid var(--rule);padding:9px 11px;text-align:left;vertical-align:top}
thead th{background:var(--slate);color:#fff;font-size:.87rem}
tbody th{background:#f2efe9;font-weight:700}
.tfoot,.tnote{font-size:.87rem;color:#5b5346}

/* --- educational + faq --- */
.eduhead{border-bottom:3px solid var(--amber);padding-bottom:6px}
.edu h2{font-size:1.24rem;margin-bottom:.3em}
.faq{margin:40px 0}
.faq details{border-bottom:1px solid var(--rule);padding:4px 0}
.faq summary{cursor:pointer;padding:11px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{display:inline;font-size:1.02rem}
.faq summary::before{content:"+ ";color:var(--amber);font-weight:700}
.faq details[open] summary::before{content:"\2212 "}
.faq details p{padding:0 0 12px 18px;margin:0}

/* --- misc --- */
.cta{background:#fff;border:1px solid var(--rule);border-left:6px solid var(--amber);
  padding:20px;margin:38px 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.badges{width:100%;margin:0;font-size:.83rem;color:#5b5346}
.datum{font-weight:600;border-left:4px solid var(--amber);padding-left:14px}
.areas{font-size:.94rem;color:#4a453b}
.rel ul{padding-left:19px}
.rel li{margin-bottom:.4em}
.morelink a{font-weight:700}
.pagehero img{width:100%;display:block;border:1px solid var(--rule)}
.mapwrap{margin:22px 0 44px;border:1px solid var(--rule)}
.legal{max-width:760px}
.legal h2{font-size:1.2rem}
.updated{color:#5b5346;font-size:.88rem}
.bigcall{margin:1.4em 0}
.noaddr{font-size:.9rem}
main{padding-bottom:10px}
.twocol{columns:2;-webkit-columns:2}

/* --- footer --- */
.sitefoot{background:var(--slate);color:#cfc8bc;margin-top:50px;font-size:.9rem}
.sitefoot a{color:#e8e3da;text-decoration:none}
.sitefoot a:hover{color:var(--amber);text-decoration:underline}
.footgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:30px;
  padding-top:38px;padding-bottom:26px;align-items:start}
.footcol h2{font-size:.83rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--amber);margin:0 0 .6em;font-family:inherit}
.footcol h2.mt{margin-top:1.6em}
.footcol ul{list-style:none;padding:0;margin:0}
.footcol li{margin-bottom:.42em}
.footmark{font-size:1.25rem;font-family:Georgia,serif;color:#fff;margin-bottom:.4em}
.footmark b{color:var(--amber)}
.footphone{font-size:1.1rem;font-weight:700}
.footcol-first .noaddr{color:#a9a294;font-size:.85rem;margin-top:1.1em}
.footbase{border-top:1px solid var(--slate-2);padding-top:16px;padding-bottom:66px;
  font-size:.83rem;color:#a9a294}
.footbase p{margin:0 0 .35em}
.smallprint{color:#8f887c}

/* --- the only fixed element on mobile --- */
.callbar{display:none}

@media (max-width:900px){
  .herogrid{grid-template-columns:1fr;gap:26px}
  .footgrid{grid-template-columns:1fr 1fr}
  .mainnav{width:100%;margin-left:0;order:3}
  .mainnav>ul{flex-wrap:wrap}
  .mast-call{margin-left:auto}
  /* a hover dropdown is useless on touch: the Services link and the hub carry it */
  .mainnav .sub,.mainnav .has-sub:hover .sub,.mainnav .has-sub:focus-within .sub{display:none}
}
@media (max-width:760px){
  /* tighten the chrome so the H1 and the call button clear the fold on a phone */
  .topstrip{font-size:.72rem}
  .topstrip .wrap{gap:12px}
  .mainnav a{padding:7px 8px;font-size:.88rem}
  .mast-in{padding-top:8px;padding-bottom:8px}
  h1{font-size:1.72rem}
  .hero h1{font-size:1.85rem}
  h2{font-size:1.3rem}
  .cardgrid{grid-template-columns:1fr}
  .cardimg img{height:170px}
  .bagrid{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr}
  .twocol{columns:2}
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--amber);box-shadow:0 -2px 10px rgba(0,0,0,.3)}
  .callbar a{display:block;text-align:center;padding:15px;font-weight:700;
    font-size:1.1rem;color:#241a09;text-decoration:none;min-height:44px}
  .quote{scroll-margin-top:12px}
  body{padding-bottom:0}
  .footbase{padding-bottom:76px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* hero supporting facts, so the left column carries its own weight */
.herofacts{list-style:none;padding:0;margin:1.6em 0 1.2em;border-top:1px solid #4a5661}
.herofacts li{padding:11px 0 11px 24px;position:relative;border-bottom:1px solid #4a5661;
  font-size:.94rem;color:#d5cec2}
.herofacts li::before{content:"\2713";position:absolute;left:0;color:var(--amber);font-weight:700}
.herofacts li{color:#ded7cb}
.heroverify{font-size:.85rem;color:#a9a294;margin:0}
.heroverify a{color:var(--amber)}