/* roofingrosharontx.com
   Modern-clean, modelled on commercialplumberaustin.com: dark utility strip,
   white masthead with one amber pill CTA, small-caps eyebrow labels above every
   heading, generous whitespace, alternating split blocks, full-bleed navy CTA
   bands. Deliberately shares nothing visually with the Springfield MO or
   Aurora IL roofing builds. */

:root{
  --navy:#0d1f2d;
  --navy-2:#132c3d;
  --teal:#1a6985;
  --teal-dk:#125066;
  --amber:#f5a623;
  --amber-dk:#d88b06;
  --ink:#16232c;
  --body:#39505e;
  --line:#dde5e9;
  --panel:#f4f7f8;
  --white:#fff;
  --maxw:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  color:var(--body);
  background:var(--white);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dk)}
a:hover{color:var(--amber-dk)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--amber);color:var(--navy);padding:10px 16px;border-radius:4px}

h1,h2,h3,h4,.fname,.sfig,.mtext strong{
  font-family:Archivo,"Public Sans",Helvetica,Arial,sans-serif;
  color:var(--ink);
  letter-spacing:-.017em;
  font-weight:700;
  line-height:1.16;
}
h1{font-size:clamp(2.05rem,4.4vw,3.15rem);margin:0 0 .5em}
h2{font-size:clamp(1.55rem,2.9vw,2.15rem);margin:0 0 .6em}
h3{font-size:1.2rem;margin:1.9em 0 .5em;line-height:1.34}
h4{font-size:1.03rem;margin:1.6em 0 .4em}
p{margin:0 0 1.15em}
strong{color:var(--ink);font-weight:600}

/* The signature move borrowed from the reference site. A small-caps label above
   the heading. It is what carries the "designed" feel on plain white sections. */
.eyebrow{
  font-size:.7rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--teal);
  margin:0 0 .85em;
}
.callband .eyebrow,.hero .eyebrow,.foot .eyebrow{color:var(--amber)}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-block;
  background:var(--amber);
  color:var(--navy);
  font-weight:700;
  font-family:Archivo,sans-serif;
  letter-spacing:.005em;
  text-decoration:none;
  padding:14px 28px;
  border-radius:999px;
  border:2px solid var(--amber);
  transition:background .14s,border-color .14s;
}
.btn:hover{background:var(--amber-dk);border-color:var(--amber-dk);color:var(--navy)}
.btn-lg{padding:17px 40px;font-size:1.12rem}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:var(--white);border-color:var(--white);color:var(--navy)}
.btn-hd{padding:11px 22px;font-size:.95rem;white-space:nowrap}

/* --------------------------------------------------- utility strip + header */
.ustrip{background:var(--navy);color:#a9c2d0;font-size:.8rem;letter-spacing:.01em}
.ustrip-in{display:flex;align-items:center;gap:26px;min-height:40px;flex-wrap:wrap}
.us-item{white-space:nowrap}
.us-mid{margin-right:auto;white-space:normal}
.us-tel{color:var(--amber);font-weight:700;text-decoration:none;letter-spacing:.02em}
.us-tel:hover{color:#fff}

.mast{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:40}
.masti{display:flex;align-items:center;gap:30px;min-height:84px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.mtext{display:flex;flex-direction:column;line-height:1.1}
.mtext strong{font-size:1.28rem;color:var(--navy)}
.mtext em{font-style:normal;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-top:3px}

/* Nav. Note the scoping: only `.nav ul.sub` is ever given a positioned/hidden
   treatment, and only `.nav ul.lvl1` is ever flexed. There is deliberately no
   bare `.nav ul{}` rule in this file. */
.nav{margin-left:auto}
.nav ul.lvl1{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav ul.lvl1>li{position:relative}
.nav ul.lvl1>li>a{
  display:block;padding:12px 13px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:.94rem;border-radius:6px;
}
.nav ul.lvl1>li>a:hover,.nav ul.lvl1>li>a.on{background:var(--panel);color:var(--teal-dk)}
.car{font-size:.62em;opacity:.55;margin-left:2px}

.nav ul.sub{
  display:none;position:absolute;top:100%;left:0;z-index:60;
  min-width:266px;list-style:none;margin:0;padding:8px 0;
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--amber);
  border-radius:0 0 8px 8px;box-shadow:0 16px 38px rgba(13,31,45,.14);
}
.nav li.has-sub:hover>ul.sub,.nav li.has-sub:focus-within>ul.sub{display:block}
.nav ul.sub li{margin:0}
.nav ul.sub a{
  display:block;padding:8px 20px;text-decoration:none;color:var(--body);
  font-size:.9rem;line-height:1.4;
}
.nav ul.sub a:hover,.nav ul.sub a.on{background:var(--panel);color:var(--teal-dk)}
.nav ul.sub li.stormitem>a{color:var(--ink);font-weight:600}
.nav ul.sub li.sublast{border-top:1px solid var(--line);margin-top:7px;padding-top:5px}
.nav ul.sub li.sublast a{color:var(--teal-dk);font-weight:600}
.nav ul.sub.sub-city{column-count:2;column-gap:0;min-width:400px}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--navy);color:#dbe7ee;overflow:hidden}
.hero .hbg{position:absolute;inset:0}
.hero .hbg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(13,31,45,.94) 0%,rgba(13,31,45,.78) 46%,rgba(13,31,45,.42) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-top:78px;padding-bottom:74px}
.hero h1{color:var(--white);max-width:16ch}
.hero .lede{font-size:1.14rem;max-width:60ch;color:#cadcE6;margin-bottom:1.7em}
.hero .hcta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:34px}
.hero .hnote{font-size:.9rem;color:#9fbccb}
.hclaims{list-style:none;margin:0 0 22px;padding:0;display:flex;gap:34px;flex-wrap:wrap}
.hclaims li{font-family:Archivo,sans-serif;font-weight:700;color:var(--white);font-size:.98rem;position:relative;padding-left:22px}
.hclaims li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--amber);border-radius:2px;transform:rotate(45deg)}
.hrate{font-size:.92rem;color:#9fbccb;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;margin:0}
.hrate strong{color:var(--amber)}

/* -------------------------------------------------------------- sections */
.sec{padding:76px 0}
.sec-panel{background:var(--panel)}
.sec-tight{padding:52px 0}
.sec>.wrap>h2,.sec>.wrap>.eyebrow{max-width:none}
.lead-in{max-width:64ch}

/* split block: copy one side, photo the other */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .sp-txt{order:2}
.split .shot img{border-radius:10px}
.sp-txt>*:last-child{margin-bottom:0}

figure.shot{margin:0}
figure.shot img{border-radius:10px;width:100%}
figure.wide img{width:100%;max-height:420px;object-fit:cover;border-radius:10px}

.crumbs{background:var(--panel);border-bottom:1px solid var(--line);font-size:.84rem;padding:11px 0;color:#6f8794}
.crumbs a{color:var(--teal-dk);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.45;margin:0 3px}

/* ------------------------------------------------------------ pain grid */
.pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;align-items:start}
.pains li{position:relative;padding-left:30px;font-size:.99rem}
.pains li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:12px;
  border:3px solid var(--amber);border-radius:50%;
}
.pains li strong{display:block;color:var(--ink)}

/* ------------------------------------------------- service grid (two-up) */
/* align-items:start is load-bearing. Without it every card stretches to the
   tallest in its row and the section becomes the wall of identical rectangles
   that reads as generated. The copy lengths are meant to stay uneven. */
.svcgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px 46px;align-items:start}
.svcblock{margin:0}
.svcblock img{height:200px;width:100%;object-fit:cover;border-radius:9px;margin-bottom:18px}
.svcblock h2{font-size:1.24rem;margin:0 0 .45em}
.svcblock h2 a{color:var(--ink);text-decoration:none}
.svcblock h2 a:hover{color:var(--teal-dk)}
.svcblock p{font-size:.985rem;margin-bottom:.85em}
.svcblock p:last-child{margin-bottom:0}
.svcblock ul{margin:.2em 0 1em;padding-left:19px;font-size:.96rem}
.svcblock ol{margin:.2em 0 1em;padding-left:21px;font-size:.96rem}
.svcblock li{margin-bottom:.28em}
.more{font-weight:600;font-size:.93rem}

/* ------------------------------------------------------------ how it works */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
.steps li{counter-increment:s;position:relative;padding-top:56px}
.steps li::before{
  content:counter(s);position:absolute;top:0;left:0;
  font-family:Archivo,sans-serif;font-weight:700;font-size:1.35rem;
  width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
}
.steps h3{margin:0 0 .45em;font-size:1.08rem}
.steps p{font-size:.965rem;margin-bottom:.7em}
.steps p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ before/after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.ba-panel h3{margin:0 0 .5em;font-size:1.12rem}
.ba-panel .tag{
  display:inline-block;font-family:Archivo,sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:4px;margin-bottom:14px;
}
.ba-panel.before .tag{background:#f6e2df;color:#8c3524}
.ba-panel.after .tag{background:#dcece5;color:#155c43}
.ba-panel img{border-radius:9px;margin-bottom:18px;height:270px;width:100%;object-fit:cover}
.ba-panel ul{margin:.5em 0 0;padding-left:19px;font-size:.96rem}
.ba-panel li{margin-bottom:.35em}

/* ---------------------------------------------------------------- stats */
.stats{background:var(--navy-2);color:#fff;padding:44px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.stat{display:flex;flex-direction:column;gap:5px}
.sfig{font-size:2.05rem;color:var(--amber);line-height:1}
.slab{font-size:.85rem;color:#a9c2d0;letter-spacing:.03em}

/* ------------------------------------------------------------- call band */
.callband{background:var(--navy);color:#cadce6;padding:64px 0;text-align:center}
.cb-in{display:flex;flex-direction:column;align-items:center}
.cb-h{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.4rem,2.5vw,1.85rem);color:#fff;margin:0 0 .5em;line-height:1.24}
.cb-sub{max-width:62ch;margin:0 auto 1.7em;font-size:1.02rem}
.cb-badges{list-style:none;margin:26px 0 0;padding:0;display:flex;justify-content:center;gap:14px 34px;flex-wrap:wrap;font-size:.87rem;color:#9fbccb}
.cb-badges li{position:relative;padding-left:19px}
.cb-badges li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;background:var(--amber);border-radius:50%}

/* ---------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;margin:2em 0}
table.dt,table.wide{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--white)}
table caption{
  text-align:left;font-family:Archivo,sans-serif;font-weight:700;color:var(--ink);
  font-size:1.02rem;padding:0 0 12px;line-height:1.4;
}
table.dt th,table.dt td,table.wide th,table.wide td{
  border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top;
}
table.dt thead th,table.wide thead th{
  background:var(--navy);color:#fff;font-family:Archivo,sans-serif;font-weight:600;
  font-size:.83rem;letter-spacing:.05em;text-transform:uppercase;
}
table.dt tbody th,table.wide tbody th{background:var(--panel);color:var(--ink);font-weight:600;width:28%}
table.dt tbody tr:nth-child(even) td{background:#fbfcfd}
.tnote{font-size:.855rem;color:#6f8794;margin:.7em 0 0;font-style:italic;line-height:1.6}

/* ------------------------------------------------------------- key boxes */
.keybox{
  background:var(--panel);border-left:5px solid var(--amber);
  padding:26px 30px;margin:2em 0;border-radius:0 8px 8px 0;
}
.keybox h3{margin-top:0;font-size:1.08rem}
.keybox>*:last-child{margin-bottom:0}
.keybox ul{padding-left:19px;margin:.6em 0 1em}
.keybox li{margin-bottom:.4em}

.warnbox{
  background:#fdf4e6;border-left:5px solid var(--amber-dk);
  padding:26px 30px;margin:2em 0;border-radius:0 8px 8px 0;
}
.warnbox>*:last-child{margin-bottom:0}

/* ---------------------------------------------------------- testimonials */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.rev{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:26px 28px}
.sec-panel .rev{box-shadow:0 2px 10px rgba(13,31,45,.045)}
.rev p{font-size:.96rem;margin-bottom:1em}
.rev p strong{color:var(--ink)}
.rev .who{display:flex;align-items:center;gap:11px;margin:0;font-size:.87rem;color:#6f8794}
.rev .who img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rev .who b{display:block;color:var(--ink);font-size:.94rem;font-weight:600}
.stars{color:var(--amber);letter-spacing:.12em;font-size:.9rem;margin:0 0 .7em}

/* ------------------------------------------------------------------- faq */
.faq{background:var(--panel);padding:76px 0}
details.fq{border-bottom:1px solid var(--line);padding:6px 0}
details.fq summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
}
details.fq summary::-webkit-details-marker{display:none}
details.fq summary h3{display:inline;margin:0;font-size:1.06rem;color:var(--ink)}
details.fq summary::after{
  content:"+";position:absolute;right:4px;top:12px;
  font-family:Archivo,sans-serif;font-size:1.5rem;color:var(--amber);line-height:1;
}
details.fq[open] summary::after{content:"\2013"}
.fqa{padding:0 34px 20px 0;font-size:.985rem}
.fqa>*:last-child{margin-bottom:0}
.fqa ul{padding-left:19px}

/* ------------------------------------------------------------------- map */
.mapbox{margin:0;line-height:0}
.mapbox iframe{width:100%;height:400px;border:0;display:block;filter:grayscale(.25)}

/* --------------------------------------------------------------- listing */
.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px;align-items:start;list-style:none;margin:0;padding:0}
.linkgrid li{margin:0}
.linkgrid h3{margin:0 0 .35em;font-size:1.05rem}
.linkgrid h3 a{color:var(--ink);text-decoration:none}
.linkgrid h3 a:hover{color:var(--teal-dk)}
.linkgrid p{font-size:.93rem;margin:0}

.avail{background:var(--panel);border-radius:10px;padding:30px 32px;margin:2.4em 0}
.avail h3{margin-top:0}
.avail p:last-child{margin-bottom:0}

/* ----------------------------------------------------------- calculator */
.calc{background:var(--navy);color:#cadce6;border-radius:12px;padding:34px 36px;margin:2.4em 0}
.calc h3{color:#fff;margin-top:0}
.calc label{display:block;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);margin:16px 0 6px;font-weight:600}
.calc input,.calc select{
  width:100%;padding:11px 13px;border-radius:6px;border:1px solid #2c4c60;
  background:#0a1926;color:#fff;font-family:inherit;font-size:1rem;
}
.calcout{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.calcout .big{font-family:Archivo,sans-serif;font-weight:700;font-size:1.85rem;color:var(--amber);display:block;line-height:1.2}
.calcnote{font-size:.85rem;color:#9fbccb;margin:.7em 0 0}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--navy);color:#a9c2d0;padding:64px 0 0;font-size:.92rem}
.footgrid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:44px}
.fbiz{max-width:38ch}
.fname{font-size:1.15rem;color:#fff;margin:0 0 .45em}
.fadr{margin:0 0 .5em;line-height:1.6}
.fphone a{color:var(--amber);font-family:Archivo,sans-serif;font-weight:700;font-size:1.28rem;text-decoration:none}
.fphone a:hover{color:#fff}
.fhrs{font-size:.86rem;margin:.8em 0 1em}
.fver{font-size:.82rem;line-height:1.65;color:#8fabbb}
.fver a{color:#bfd6e2}
.fh{font-family:Archivo,sans-serif;font-weight:700;color:#fff;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 1em}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:.55em;line-height:1.45}
.fcol a{color:#a9c2d0;text-decoration:none;font-size:.9rem}
.fcol a:hover{color:var(--amber)}
.footbot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.11);margin-top:52px;padding-top:22px;padding-bottom:26px;
  font-size:.83rem;
}
.footbot p{margin:0}
.legal{list-style:none;display:flex;gap:22px;margin:0;padding:0}

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

/* -------------------------------------------------------------- prose bits */
main ul,main ol{padding-left:21px}
main li{margin-bottom:.4em}
.sec .wrap>p,.sec .wrap>ul,.sec .wrap>ol,.sec .wrap>h3,.sec .wrap>h4{max-width:76ch}
.wide-body .wrap>p,.wide-body .wrap>ul{max-width:none}
.smallprint{font-size:.86rem;color:#6f8794}
.srcnote{font-size:.85rem;color:#6f8794;border-top:1px solid var(--line);padding-top:16px;margin-top:2.4em}

/* -------------------------------------------------------------- responsive */
@media (max-width:1020px){
  .footgrid{grid-template-columns:1fr 1fr}
  .fbiz{grid-column:1/-1;max-width:none}
  .statgrid{grid-template-columns:1fr 1fr;gap:32px}
  .linkgrid{grid-template-columns:1fr 1fr}
  .revs{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .nav{display:none}
  .masti{min-height:70px}
  .us-mid{display:none}
}
@media (max-width:860px){
  body{font-size:16px}
  .sec{padding:52px 0}
  .faq{padding:52px 0}
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev .sp-txt{order:0}
  .ba{grid-template-columns:1fr;gap:34px}
  .hero .wrap{padding-top:52px;padding-bottom:56px}
  .hclaims{gap:8px 24px}
}
@media (max-width:760px){
  /* Two columns of 150px is unreadable. Drop to one and shrink the photo
     rather than keeping the grid: vertical scroll on a phone is cheap. */
  .svcgrid{grid-template-columns:1fr;gap:40px}
  .svcblock img{height:172px}
  .pains{grid-template-columns:1fr;gap:12px}
  .linkgrid{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr;gap:34px}
  .btn-hd{display:none}
  .footbot{flex-direction:column;align-items:flex-start}
  body{padding-bottom:62px}
  .sticky{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--amber);align-items:center;justify-content:center;
    flex-direction:column;padding:8px 12px;
    box-shadow:0 -3px 14px rgba(13,31,45,.22);
  }
  .sticky a{color:var(--navy);font-family:Archivo,sans-serif;font-weight:700;font-size:1.08rem;text-decoration:none;line-height:1.2}
  .sticky-note{font-size:.72rem;color:#5c4304;letter-spacing:.03em}
}
@media (max-width:520px){
  .statgrid{grid-template-columns:1fr;gap:22px}
  .ustrip-in{justify-content:center;gap:14px}
  .calc{padding:24px 22px}
  .keybox,.warnbox{padding:20px 22px}
}