/* Alki Roof Repair — design system. Palette: a gloomy Seattle winter day.
   Overcast fog, wet charcoal, heavy rain — and one bright thing on the
   street: rain-slicker yellow on every call-to-action. */
:root{
  --ink:#1C232B; --slate:#1F2830; --slate-2:#2B3540;
  --paper:#E3E7EA; --paper-2:#D6DCE0; --line:#B9C2C9;
  --tarp:#F2A900; --tarp-dark:#C58900; --tarp-ink:#1C232B;
  --cedar:#6E7F8D; --moss:#5C6B5E; --rain:#7E92A3;
  --link:#33526E; --card:#EFF2F4;
  --maxw:1080px; --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.65;font-size:1.0625rem}
h1,h2,h3{font-family:'Bricolage Grotesque','Public Sans',sans-serif;line-height:1.12;
  letter-spacing:-0.015em;color:var(--slate);margin:0 0 .5em}
h1{font-size:clamp(2rem,5.5vw,3.1rem);font-weight:800}
h2{font-size:clamp(1.45rem,3.4vw,2rem);font-weight:700}
h3{font-size:1.17rem;font-weight:700}
p{margin:0 0 1.05em}
a{color:var(--link)}
a:focus-visible,button:focus-visible{outline:3px solid var(--tarp);outline-offset:2px}
img,svg{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Rain hatch — the signature motif. Thin diagonal strokes, like the season. */
.rain{background-image:repeating-linear-gradient(115deg,
  rgba(126,146,163,.45) 0 1px, transparent 1px 11px),
  repeating-linear-gradient(112deg, rgba(126,146,163,.22) 0 1px, transparent 1px 23px)}
.rain-dark{background-image:repeating-linear-gradient(115deg,
  rgba(126,146,163,.22) 0 1px, transparent 1px 11px),
  repeating-linear-gradient(112deg, rgba(126,146,163,.12) 0 1px, transparent 1px 23px)}
body{background-image:repeating-linear-gradient(115deg,
  rgba(126,146,163,.10) 0 1px, transparent 1px 17px)}

/* Header */
.topbar{background:var(--slate);color:#DDE5EC;font-size:.85rem;padding:6px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
header.site{background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--slate)}
.brand svg{width:38px;height:38px;flex:none}
.brand b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.22rem;font-weight:800;letter-spacing:-.02em}
.brand small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar);font-weight:700}
nav.menu{display:flex;gap:4px;flex-wrap:wrap}
nav.menu a{text-decoration:none;color:var(--slate);font-weight:600;font-size:.95rem;
  padding:8px 11px;border-radius:7px}
nav.menu a:hover{background:var(--paper-2)}
nav.menu a[aria-current="page"]{color:var(--link);background:var(--paper-2)}
.callbtn{background:var(--tarp);color:var(--tarp-ink)!important;font-weight:700;
  text-decoration:none;padding:11px 18px;border-radius:8px;white-space:nowrap;
  box-shadow:0 2px 0 var(--tarp-dark)}
.callbtn:hover{background:var(--tarp-dark)}
.menu-toggle{display:none}
@media(max-width:860px){
  nav.menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;padding:10px 20px 16px}
  .menu-open nav.menu{display:flex}
  .menu-toggle{display:block;background:none;border:1px solid var(--line);border-radius:7px;
    padding:8px 11px;font:inherit;font-weight:700;color:var(--slate);cursor:pointer}
}

/* Hero */
.hero{background:linear-gradient(180deg,#1A222A 0%,#242E38 100%);color:#DDE4EA;padding:56px 0 46px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}
.hero h1{color:#fff}
.hero p.sub{font-size:1.16rem;color:#C6D2DC;max-width:34em}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.btn{display:inline-block;font-weight:700;text-decoration:none;padding:14px 22px;border-radius:9px;font-size:1.02rem}
.btn.primary{background:var(--tarp);color:var(--tarp-ink);box-shadow:0 3px 0 var(--tarp-dark)}
.btn.primary:hover{background:var(--tarp-dark)}
.btn.ghost{border:2px solid var(--rain);color:#E8EDF2}
.btn.ghost:hover{border-color:#fff}
.hero .art{filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}
.hero .promise{margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem;color:var(--rain)}
.hero .promise span{display:flex;align-items:center;gap:7px}
.hero .promise b{color:#fff;font-weight:600}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero .art{max-width:420px;margin:0 auto}}

/* Sections */
section.band{padding:52px 0}
section.band.alt{background:var(--paper-2)}
section.band.dark{background:var(--slate);color:#DDE5EC}
section.band.dark h2{color:#fff}
.lede{font-size:1.13rem;max-width:46em}
.grid{display:grid;gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid.c3{grid-template-columns:1fr}.grid.c2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  display:flex;flex-direction:column;gap:8px}
.card h3 a{color:var(--slate);text-decoration:none}
.card h3 a:hover{color:var(--link)}
.card p{font-size:.97rem;margin:0;color:#3d4a56}
.card .go{margin-top:auto;font-weight:700;font-size:.92rem;color:var(--link);text-decoration:none}
.card.area{border-top:4px solid var(--moss)}
.card.guide{border-top:4px solid var(--cedar)}
.steps{counter-reset:s;display:grid;gap:16px;margin:24px 0 0;padding:0;list-style:none}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px 18px 66px;position:relative}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:16px;
  width:34px;height:34px;border-radius:50%;background:var(--tarp);color:var(--tarp-ink);font-weight:800;
  display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif}
.steps b{display:block;margin-bottom:2px}
ul.signs{margin:14px 0;padding:0;list-style:none;display:grid;gap:9px}
ul.signs li{padding-left:30px;position:relative}
ul.signs li::before{content:"";position:absolute;left:2px;top:.42em;width:16px;height:16px;
  background:var(--tarp);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.85}
.callout{border-left:5px solid var(--cedar);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;margin:22px 0}
.callout.blue{border-left-color:var(--tarp)}
.callout b{color:var(--slate)}
.price-tag{display:inline-block;background:var(--slate-2);color:#E3E7EA;font-weight:700;
  border-radius:7px;padding:4px 12px;font-size:.9rem;margin-bottom:8px}

/* FAQ */
details.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden}
details.faq summary{cursor:pointer;font-weight:700;padding:15px 44px 15px 18px;list-style:none;position:relative;color:var(--slate)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:18px;top:10px;font-size:1.5rem;
  color:var(--tarp-dark);font-weight:600}
details.faq[open] summary::after{content:"\2212"}
details.faq .a{padding:0 18px 16px;color:#3d4a56}

/* Two-col article layout */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
aside.rail{position:sticky;top:86px;display:grid;gap:18px}
.rail .box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.rail .box.cta{background:var(--slate);color:#DDE5EC;border:none}
.rail .box.cta h3{color:#fff}
.rail .box.cta .btn{width:100%;text-align:center}
.rail ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.rail ul a{text-decoration:none;font-weight:600;color:var(--slate);font-size:.95rem}
.rail ul a:hover{color:var(--link)}
.figure{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin:0 0 26px}
.crumbs{font-size:.85rem;margin:18px 0 6px;color:#5b6875}
.crumbs a{color:#5b6875;text-decoration:none}
.crumbs a:hover{color:var(--link)}
.crumbs span{margin:0 6px;color:var(--rain)}

/* Form */
form.lead{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px}
form.lead label{font-weight:700;font-size:.92rem;display:grid;gap:6px;color:var(--slate)}
form.lead input,form.lead select,form.lead textarea{font:inherit;padding:12px;border:1px solid var(--line);
  border-radius:8px;background:#FAFBFC;width:100%}
form.lead textarea{min-height:110px;resize:vertical}
form.lead button{background:var(--tarp);color:var(--tarp-ink);font:inherit;font-weight:800;border:none;
  padding:15px;border-radius:9px;cursor:pointer;box-shadow:0 3px 0 var(--tarp-dark)}
form.lead button:hover{background:var(--tarp-dark)}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.85rem;color:#5b6875}

/* Map */
.map iframe{width:100%;height:340px;border:0;border-radius:var(--radius);display:block}

/* Footer */
footer.site{background:var(--slate);color:#B9C6D1;padding:46px 0 110px;font-size:.94rem}
footer.site h3{color:#fff;font-size:1rem;margin-bottom:10px}
footer.site .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
@media(max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer.site .cols{grid-template-columns:1fr}}
footer.site ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
footer.site a{color:#D7E0E8;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
.disclaimer{margin-top:30px;padding-top:20px;border-top:1px solid #3a4a58;font-size:.85rem;color:#93A3B1;max-width:70em}
.fineprint{margin-top:12px;font-size:.85rem;color:#93A3B1}

/* Sticky mobile call bar */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:var(--tarp);box-shadow:0 -3px 12px rgba(0,0,0,.2)}
  .callbar a{flex:1;text-align:center;color:var(--tarp-ink);text-decoration:none;font-weight:800;
    padding:16px 8px;font-size:1.02rem}
  .callbar a.alt{background:var(--tarp-dark);color:var(--tarp-ink);flex:.7}
  footer.site{padding-bottom:130px}
}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px;z-index:100}
.skip:focus{left:10px}