/* Aurora Roofing Company — roofingcompanyaurorail.com
   Shingle charcoal + rust + one loud safety-yellow CTA. Fjalla One display, system sans body. */

:root{
  --char:#2b2f33;
  --slate:#4a545c;
  --rust:#b8502f;
  --rust-d:#8f3c22;
  --yellow:#f2b705;
  --paper:#f6f3ee;
  --line:#d8d2c8;
  --ink:#26292c;
  --muted:#5d666d;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%;height:auto}
a{color:var(--rust-d)}
a:hover{color:var(--rust)}
.wrap{max-width:1140px;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,.mtext strong,.bigfig,.stepnum{
  font-family:"Fjalla One",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  font-weight:400;letter-spacing:.01em;
}
h1{font-size:2.6rem;line-height:1.08;margin:.1em 0 .35em;color:var(--char);text-transform:uppercase}
h2{font-size:1.85rem;line-height:1.15;margin:2.1em 0 .55em;color:var(--char)}
h3{font-size:1.22rem;line-height:1.25;margin:1.7em 0 .35em;color:var(--char)}
p{margin:0 0 1.05em}

/* ---------- utility strip + masthead (single row, hard edges) ---------- */
.strip{background:var(--char);color:#c3cbd1;font-size:12.5px;letter-spacing:.02em}
.strip .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.strip .s2{color:#9aa5ad}

.mast{background:#fff;border-bottom:4px solid var(--char)}
.mast .wrap{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--char)}
.mtext{display:flex;flex-direction:column;line-height:1}
.mtext strong{font-size:1.5rem;letter-spacing:.06em}
.mtext em{font-style:normal;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin-top:3px}

.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0}
.nav ul.lvl1{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.nav ul.lvl1>li{position:relative}
.nav ul.lvl1>li>a{
  display:block;padding:9px 11px;text-decoration:none;color:var(--char);
  font-size:14px;font-weight:600;letter-spacing:.01em;
}
.nav ul.lvl1>li>a:hover,.nav ul.lvl1>li>a.on{color:var(--rust);background:#f1ece4}
/* Dropdown is scoped to ul.sub on purpose. Never write a bare `.nav ul{display:flex}` rule:
   it overrides display:none and pins the menu open. */
.nav ul.sub{
  display:none;position:absolute;top:100%;left:0;z-index:40;min-width:262px;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--rust);
  box-shadow:0 10px 22px rgba(0,0,0,.14);padding:5px 0;
}
.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:7px 15px;text-decoration:none;color:var(--ink);font-size:14px}
.nav ul.sub li a:hover{background:#f1ece4;color:var(--rust-d)}
.nav ul.sub li.sublast a{border-top:1px solid var(--line);margin-top:4px;font-weight:700}

.phonebox{
  display:block;background:var(--rust);color:#fff;text-decoration:none;
  padding:8px 15px;line-height:1.15;
}
.phonebox span{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;opacity:.85}
.phonebox strong{display:block;font-size:1.24rem;letter-spacing:.01em}
.phonebox:hover{background:var(--rust-d);color:#fff}

/* ---------- shingle-course divider ---------- */
.shingle{
  height:16px;
  background:
    repeating-linear-gradient(90deg,var(--char) 0 46px,#3a4046 46px 48px);
  border-top:3px solid var(--rust);
}

/* ---------- breadcrumbs ---------- */
.crumbs{background:#ece7de;border-bottom:1px solid var(--line);font-size:13px}
.crumbs .wrap{padding-top:9px;padding-bottom:9px}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:#a49a8c;margin:0 3px}
.crumbs span{color:var(--char);font-weight:600}

/* ---------- hero ---------- */
.hero{background:var(--char);color:#eae4da;border-bottom:6px solid var(--rust)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .95fr;gap:38px;padding-top:34px;padding-bottom:34px}
.hero h1{color:#fff}
.hero .sub{font-size:1.12rem;color:#cdd4d9;margin-bottom:.5em}
.hero .svcline{font-size:.95rem;color:#9fadb6;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.2em}
.heroimg{margin:0 0 18px;border:4px solid #464d54}
.hero .formbox{background:var(--paper)}

.bigcall{
  display:inline-block;background:var(--yellow);color:#231a02;text-decoration:none;
  font-family:"Fjalla One",Impact,sans-serif;font-size:1.42rem;letter-spacing:.02em;
  padding:15px 26px;border:0;border-bottom:5px solid #b98c04;
}
.bigcall:hover{background:#ffc61a;color:#231a02}
.hero .bigcall{margin-bottom:14px}
.herotrust{font-size:13.5px;color:#9fadb6;margin:0}

/* ---------- generic sections ---------- */
main{display:block}
.sec{padding:6px 0 4px}
.sec .wrap{padding-top:14px;padding-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tight p{margin-bottom:.85em}

/* service page: body copy with the quote form in a sticky right rail.
   Mobile hoists the rail above the copy via `order`, so the form is just below the
   intro on every screen size. */
.svcgrid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:38px;align-items:start}
.svcmain>h2:first-child{margin-top:.2em}
.svcaside{position:sticky;top:14px}
.svcaside .formbox{margin-bottom:0}
.asidenote{
  background:#ece7de;border:1px solid var(--line);border-top:0;
  padding:16px 20px 4px;font-size:15px;
}
.asidenote h2{font-size:1.12rem;margin:0 0 .5em}
.asidenote p{margin-bottom:.9em}

/* pain-point list: two columns of hard-edged bullets, no icon cards */
.pains{background:#ece7de;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pains ul{list-style:none;margin:0;padding:0;columns:2;column-gap:34px}
.pains li{
  break-inside:avoid;margin:0 0 13px;padding:0 0 0 24px;position:relative;font-size:15.6px;
}
.pains li:before{
  content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;
  background:var(--rust);
}

/* trust block */
.trust h3{margin-top:1.1em}
.trust .tpoint{border-left:4px solid var(--rust);padding-left:16px;margin-bottom:22px}

/* numeric callouts */
.figs{display:flex;flex-wrap:wrap;gap:0;border-top:3px solid var(--char);border-bottom:3px solid var(--char);margin:34px 0}
.fig{flex:1 1 180px;padding:20px 14px;text-align:center;border-right:1px solid var(--line)}
.fig:last-child{border-right:0}
.bigfig{display:block;font-size:2.5rem;line-height:1;color:var(--rust)}
.fig span.lbl{display:block;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:7px}

/* service blocks on the homepage */
.svcblock{padding-bottom:6px;border-bottom:1px dashed var(--line);margin-bottom:26px}
.svcblock:last-child{border-bottom:0}
.svcblock img{border:3px solid var(--char);margin-bottom:10px}
.symptom{font-weight:700;color:var(--rust-d)}

/* process: oversized outlined numerals */
.steps{counter-reset:st;margin:20px 0}
.step{display:grid;grid-template-columns:78px 1fr;gap:18px;margin-bottom:24px;align-items:start}
.stepnum{
  font-size:3.1rem;line-height:.9;color:transparent;
  -webkit-text-stroke:2px var(--rust);text-align:right;
}
@supports not ((-webkit-text-stroke:1px red)){.stepnum{color:var(--rust)}}

/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid var(--char);background:#fff}
.ba > div{padding:18px 20px}
.ba > div:first-child{border-right:3px solid var(--char)}
.ba img{border:2px solid var(--line);margin-bottom:12px}
.ba h3{margin-top:0;text-transform:uppercase;letter-spacing:.06em}
.ba ul{margin:.6em 0 0;padding-left:18px;font-size:15.3px}
.ba li{margin-bottom:6px}

/* testimonials: blockquotes with a left rule, not cards */
.revs{background:#ece7de;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rev{border-left:4px solid var(--slate);padding:2px 0 2px 18px;margin:0 0 26px}
.rev p{margin:0 0 .6em;font-size:15.8px}
.rev p strong{color:var(--char)}
.revby{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.revby img{width:42px;height:42px;border:2px solid #fff;flex:0 0 42px}

/* CTA band, repeated */
.ctaband{background:var(--char);color:#dfe5e9;padding:22px 24px;margin:34px 0;border-left:8px solid var(--yellow)}
.ctaline{font-size:1.14rem;margin:0 0 12px;color:#fff}
.ctabtns{margin:0 0 10px}
.yellow{
  display:inline-block;background:var(--yellow);color:#231a02;text-decoration:none;
  font-family:"Fjalla One",Impact,sans-serif;font-size:1.16rem;padding:12px 22px;border-bottom:4px solid #b98c04;
}
.yellow:hover{background:#ffc61a;color:#231a02}
.ghost{display:inline-block;color:#cfd7dc;text-decoration:none;padding:12px 8px;font-size:15px;border-bottom:1px dotted #7d8990}
.ghost:hover{color:#fff}
.badges{margin:0;font-size:12.6px;color:#98a4ac;letter-spacing:.02em}

/* forms */
.formbox{background:#fff;border:3px solid var(--char);padding:20px 22px 24px}
.fbh{margin:0 0 6px;font-size:1.42rem}
.fbnote{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.formbox label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);margin:12px 0 4px}
.formbox input,.formbox select,.formbox textarea{
  width:100%;padding:10px 11px;border:2px solid var(--line);background:#fdfcfa;font:inherit;font-size:15.5px;
}
.formbox input:focus,.formbox select:focus,.formbox textarea:focus{outline:0;border-color:var(--rust)}
.formbox button{
  margin-top:16px;width:100%;background:var(--yellow);color:#231a02;border:0;border-bottom:5px solid #b98c04;
  font-family:"Fjalla One",Impact,sans-serif;font-size:1.2rem;letter-spacing:.03em;padding:14px 10px;cursor:pointer;
}
.formbox button:hover{background:#ffc61a}
.fbsmall{font-size:12.8px;color:var(--muted);margin:12px 0 0}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* tables */
table.data{width:100%;border-collapse:collapse;margin:18px 0 22px;font-size:15.2px;background:#fff}
table.data caption{caption-side:top;text-align:left;font-size:13px;color:var(--muted);padding-bottom:7px}
table.data th,table.data td{border:1px solid var(--char);padding:9px 11px;text-align:left;vertical-align:top}
table.data thead th{background:var(--char);color:#fff;font-weight:600;letter-spacing:.03em}
table.data tbody tr:nth-child(even){background:#f3efe8}

/* areas table */
table.areas{width:100%;border-collapse:collapse;font-size:15px;margin:16px 0 6px}
table.areas td{border:1px solid var(--line);padding:8px 11px}
table.areas td a{text-decoration:none;font-weight:600}
table.areas td a:hover{text-decoration:underline}

/* FAQ */
.faq h3{
  margin-top:1.5em;padding-left:15px;border-left:4px solid var(--yellow);
  font-size:1.13rem;text-transform:none;
}
.faq h3+p{padding-left:19px;font-size:15.8px}

/* callout / note box */
.note{background:#fff;border:2px solid var(--rust);border-left-width:8px;padding:16px 18px;margin:22px 0}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--rust-d)}

/* map */
.mapwrap{border:3px solid var(--char);margin:20px 0;line-height:0}

/* links list */
.linklist{list-style:none;padding:0;margin:14px 0 4px;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.linklist li{border-bottom:1px dotted var(--line);padding:5px 0;font-size:15.3px}

/* ---------- footer ---------- */
.sitefoot{background:var(--char);color:#b7c0c7;margin-top:44px;border-top:6px solid var(--rust);font-size:14.6px}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-top:34px;padding-bottom:26px}
.sitefoot a{color:#dbe2e7;text-decoration:none}
.sitefoot a:hover{color:var(--yellow);text-decoration:underline}
.flogo{display:block;margin-bottom:10px}
.fbrand{font-family:"Fjalla One",Impact,sans-serif;font-size:1.34rem;color:#fff;margin:0 0 8px;letter-spacing:.03em}
.fadr,.fhours{font-size:14px;color:#98a4ac}
.fphone a{font-family:"Fjalla One",Impact,sans-serif;font-size:1.5rem;color:var(--yellow)}
.fbadge{font-size:12.7px;color:#8c979f;border-top:1px solid #444b51;padding-top:10px;margin-top:12px}
.fhead{font-family:"Fjalla One",Impact,sans-serif;color:#fff;font-size:1.02rem;letter-spacing:.07em;text-transform:uppercase;margin:0 0 9px}
.fcol ul{list-style:none;margin:0 0 18px;padding:0}
.fcol li{margin-bottom:5px;font-size:14px;line-height:1.4}
.footbar{border-top:1px solid #444b51;padding-top:14px;padding-bottom:70px;font-size:13px;color:#8c979f}
.footbar span{color:#5c666d;margin:0 5px}
.copy{margin-top:6px}

/* sticky mobile call bar */
.stickycall{display:none}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .svcgrid{grid-template-columns:minmax(0,1fr) 330px;gap:28px}
}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:24px}
  .footgrid{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* stack, and hoist the form above the body copy so it stays just below the intro */
  .svcgrid{grid-template-columns:1fr;gap:26px}
  .svcaside{position:static;order:-1}
  .svcmain{order:1}
}
@media (max-width:860px){
  h1{font-size:2.05rem}
  h2{font-size:1.5rem}
  .mast .wrap{gap:12px}
  .nav{margin-left:0;order:3;width:100%}
  .nav ul.lvl1{gap:0}
  .nav ul.lvl1>li{width:100%;border-top:1px solid var(--line)}
  .nav ul.sub{position:static;display:block;border:0;box-shadow:none;padding:0 0 6px 14px;min-width:0}
  .nav ul.sub li a{padding:5px 0;font-size:13.6px;color:var(--slate)}
  .phonebox{margin-left:auto}
  .pains ul{columns:1}
  .grid2,.grid3{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .ba > div:first-child{border-right:0;border-bottom:3px solid var(--char)}
  .linklist{grid-template-columns:1fr}
  .strip .wrap{font-size:11.6px}
  .footgrid{grid-template-columns:1fr}
  .step{grid-template-columns:52px 1fr;gap:12px}
  .stepnum{font-size:2.2rem}
  .stickycall{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    border-top:3px solid var(--rust);
  }
  .stickycall a{flex:1;text-align:center;padding:13px 6px;text-decoration:none;
    font-family:"Fjalla One",Impact,sans-serif;font-size:1.06rem;letter-spacing:.02em}
  .sc1{background:var(--char);color:#fff}
  .sc2{background:var(--yellow);color:#231a02}
}
@media (max-width:520px){
  table.data{font-size:14px}
  table.data th,table.data td{padding:7px 8px}
  .linklist{grid-template-columns:1fr}
}