/* KL Roof Repair — one stylesheet. Terracotta tile on charcoal, corrugated-zinc texture,
   condensed signage display face. Phone-first: the number is always one tap away. */
:root{
  --ink:#1b1917;--ink-2:#2a2621;--paper:#fffdf8;--sand:#f4eee3;--sand-2:#eae1d0;--line:#dfd4c0;
  --tile:#b3452a;--tile-2:#8f3620;--tile-3:#d9673f;--rain:#275d78;--rain-2:#1d4658;
  --text:#2b2723;--muted:#6b625a;--ok:#2f7a4a;
  --disp:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;--body:"Public Sans",Segoe UI,Helvetica,Arial,sans-serif;
  --r:6px;--w:1180px;--gut:20px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;padding-bottom:72px}
img{max-width:100%;display:block}a{color:var(--rain);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--rain-2)}
h1,h2,h3{font-family:var(--disp);line-height:1.02;letter-spacing:.005em;margin:0 0 .5em;color:var(--ink);font-weight:800}
h1{font-size:clamp(40px,7vw,76px)}h2{font-size:clamp(30px,4.4vw,46px);font-weight:700}h3{font-size:24px;font-weight:700}
h1 em,h2 em{font-style:normal;color:var(--tile-3)}
p{margin:0 0 1em}ul,ol{padding-left:1.25em}li{margin:.3em 0}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;border-radius:var(--r);padding:.6em 1.1em;cursor:pointer;line-height:1;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--tile{background:var(--tile);color:#fff;box-shadow:0 6px 0 var(--tile-2)}.btn--tile:hover{background:var(--tile-3);color:#fff;box-shadow:0 4px 0 var(--tile-2);transform:translateY(2px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn--paper{background:var(--paper);color:var(--tile-2);box-shadow:0 6px 0 rgba(0,0,0,.35)}.btn--paper:hover{color:var(--tile);transform:translateY(2px);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.btn--xl{font-size:24px;padding:.7em 1.2em}.btn__ico{font-size:.9em}
button.btn{font-family:var(--disp)}

/* header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:10px var(--gut);background:var(--ink);color:#fff;border-bottom:3px solid var(--tile)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;margin-right:auto}
.brand__mark{width:34px;height:26px;background:linear-gradient(135deg,var(--tile-3) 0 50%,var(--tile) 50% 100%);clip-path:polygon(50% 0,100% 62%,100% 100%,0 100%,0 62%);flex:none}
.brand__t{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:.01em;text-transform:uppercase}.brand__t em{font-style:normal;color:var(--tile-3)}
.top__nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}.top__nav a{color:#e8e0d3;text-decoration:none;font-weight:500;font-size:15px}.top__nav a:hover{color:#fff}
.top__call{font-size:17px;box-shadow:0 3px 0 var(--tile-2)}
@media(max-width:900px){.top__nav{display:none}.top__call{font-size:15px;padding:.55em .8em}.brand__t{font-size:22px}}

/* hero */
.hero{position:relative;background:var(--ink);color:#f4eee3;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 18px,rgba(0,0,0,.14) 18px 36px);z-index:-1}
.hero::after{content:"";position:absolute;inset:auto -10% -40% -10%;height:60%;background:radial-gradient(60% 60% at 30% 100%,rgba(179,69,42,.55),transparent 70%);z-index:-1;pointer-events:none}
.hero__in{max-width:var(--w);margin:0 auto;padding:56px var(--gut) 64px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.hero__in--one{grid-template-columns:1fr;padding-bottom:40px}.hero--slim .hero__in{padding-top:40px}
.hero h1{color:#fff}.hero .lead{font-size:20px;color:#e9e1d3;max-width:56ch}
.kicker{font-family:var(--disp);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:15px;color:var(--tile-3);margin:0 0 12px}
.ticks{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.ticks li{position:relative;padding-left:26px;color:#f4eee3;font-size:16px}.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:3px solid var(--tile-3);border-bottom:3px solid var(--tile-3);transform:rotate(-45deg)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 14px}
.hero__note{color:#bdb3a4;font-size:15px;margin:0}
.hero__copy{animation:rise .6s ease both}.hero__form{animation:rise .6s .12s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:900px){.hero__in{grid-template-columns:1fr;padding:34px var(--gut) 40px;gap:28px}.ticks{grid-template-columns:1fr}.hero .lead{font-size:18px}}

/* quote form */
.quote{background:var(--paper);color:var(--text);border-radius:10px;padding:26px 24px 22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.08);position:relative}
.quote::before{content:"";position:absolute;left:24px;right:24px;top:0;height:5px;background:var(--tile);border-radius:0 0 4px 4px}
.quote__h{font-size:30px;margin:6px 0 4px}.quote__sub{color:var(--muted);font-size:15px;margin-bottom:16px}
.quote__form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.quote__form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.quote__form input,.quote__form select,.quote__form textarea{font:inherit;font-size:16px;text-transform:none;letter-spacing:0;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;color:var(--text);width:100%}
.quote__form input:focus,.quote__form select:focus,.quote__form textarea:focus{outline:none;border-color:var(--rain);box-shadow:0 0 0 3px rgba(39,93,120,.18)}
.wide{grid-column:1/-1}.quote__form .btn{justify-content:center;width:100%;font-size:22px}
.quote__fine{font-size:13px;color:var(--muted);margin:2px 0 0}.quote__status{margin:0;color:var(--tile-2);font-weight:700;min-height:1em}
@media(max-width:560px){.quote__form{grid-template-columns:1fr}.quote{padding:22px 18px 18px}}

/* sections */
.main{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.trust{margin:0 calc(50% - 50vw);width:100vw;background:var(--sand);border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0 auto;padding:16px var(--gut);max-width:var(--w);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.trust li{display:flex;flex-direction:column;line-height:1.2}.trust strong{font-family:var(--disp);font-size:24px;color:var(--tile-2);text-transform:uppercase}.trust span{font-size:14px;color:var(--muted)}
@media(max-width:700px){.trust ul{grid-template-columns:1fr 1fr}}
.cards{padding:56px 0 10px}.cards__g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{display:block;background:#fff;border:1px solid var(--line);border-top:4px solid var(--tile);border-radius:var(--r);padding:22px 20px 18px;text-decoration:none;color:var(--text);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(0,0,0,.35)}.card h3{margin-bottom:6px}.card p{color:var(--muted);font-size:15px;margin-bottom:10px}
.card__go{font-family:var(--disp);text-transform:uppercase;font-weight:700;color:var(--tile)}
@media(max-width:900px){.cards__g{grid-template-columns:1fr 1fr}}@media(max-width:560px){.cards__g{grid-template-columns:1fr}}
.prose{padding:44px 0 8px;max-width:820px}.prose--guide{max-width:780px}.prose--center{text-align:center;margin:0 auto;padding:70px 0}
.prose h2{margin-top:1.2em}.prose h3{margin-top:1.1em}.prose li{margin:.45em 0}
.steps{padding:40px 0 10px}.steps ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps li{counter-increment:s;background:var(--sand);border-radius:var(--r);padding:22px 18px 16px;position:relative}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--disp);font-weight:800;font-size:44px;line-height:1;color:var(--tile-3);display:block;margin-bottom:8px}
.steps h3{font-size:22px;margin-bottom:6px}.steps p{font-size:15px;color:var(--muted);margin:0}
@media(max-width:900px){.steps ol{grid-template-columns:1fr 1fr}}@media(max-width:560px){.steps ol{grid-template-columns:1fr}}
.areas{padding:44px 0 20px}.areas p{max-width:70ch;color:var(--muted)}
.areas__g{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.areas__g a{display:block;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;font-weight:600;color:var(--ink);font-family:var(--disp);font-size:20px}
.areas__g a:hover{border-color:var(--tile);color:var(--tile-2)}
.band{margin:56px calc(50% - 50vw) 0;width:100vw;background:var(--tile);color:#fff;padding:40px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 18px,transparent 18px 36px)}
.band>*{position:relative}.band h2{color:#fff;margin-bottom:4px}.band p{margin:0;color:#fbe9df}
.tbl{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0 6px;background:#fff}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--disp);font-size:17px;text-transform:uppercase;letter-spacing:.03em;background:var(--sand);color:var(--ink)}
.tbl td:nth-child(2){font-weight:700;white-space:nowrap;color:var(--tile-2)}
.tbl__note{font-size:14px;color:var(--muted)}
@media(max-width:640px){.tbl{display:block;overflow-x:auto}.tbl td:nth-child(2){white-space:normal}}
.faq{padding:30px 0 20px;max-width:820px}.faq__i{border-top:1px solid var(--line);padding:6px 0}.faq__i:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--disp);font-size:22px;font-weight:700;padding:10px 0;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;right:4px;top:6px;font-size:28px;color:var(--tile)}
.faq__i[open] summary::after{content:"–"}.faq__a{padding:0 0 12px;color:var(--text)}
.guides{list-style:none;padding:0;margin:20px 0}.guides li{padding:16px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}.guides a{font-family:var(--disp);font-size:26px;text-decoration:none;color:var(--ink)}.guides a:hover{color:var(--tile-2)}.guides span{color:var(--muted)}

/* footer + call bar */
.foot{margin-top:60px;background:var(--ink);color:#cfc5b5;padding:44px var(--gut) 20px}
.foot__grid{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot h3{color:#fff;font-size:20px;margin:0 0 8px}.foot ul{list-style:none;padding:0;margin:0 0 18px}.foot li{margin:4px 0;font-size:15px}.foot a{color:#cfc5b5;text-decoration:none}.foot a:hover{color:#fff}
.foot__areas{columns:2}
.foot__bar{max-width:var(--w);margin:28px auto 0;padding-top:18px;border-top:1px solid #3a342d;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px}
.foot__bar p{margin:0;max-width:70ch}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:center;gap:10px;background:var(--tile);color:#fff;font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em;padding:14px 16px;text-decoration:none;box-shadow:0 -8px 24px rgba(0,0,0,.25)}
@media(max-width:900px){.callbar{display:flex}}@media(min-width:901px){body{padding-bottom:0}}