/* ============================================================
   ChicagoLand Ice Dam Removal
   Restyled 2026-10-08. Deep navy, white, and one cold blue taken
   from the ring around the logo's mascot. Red is the Call button
   and nothing else. One typeface, Libre Franklin (SIL Open Font
   Licence), in fonts/, so the page asks nothing of any other
   server. Hairlines, a small radius, no shadows on content. The
   logo is the only cartoon on the page.
   Mobile first. No em dashes, no emoji.
   ============================================================ */

@font-face{
  font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/libre-franklin-latin.woff2") format("woff2");
}

:root{
  --navy:#0D2136;        /* the dark ground, and headings on white */
  --navy-up:#1B3A5C;     /* navy, one step up, for hover */
  --ink:#16293D;         /* running text */
  --slate:#44566A;       /* secondary text */
  --blue:#1D6EAB;        /* the one cold blue: links, labels, numerals, water */
  --blue-lt:#A9CDE8;     /* the same blue, lightened, for small text on navy */
  --ice:#EEF3F7;         /* pale cold ground */
  --line:#D6DFE8;        /* hairline on white */
  --line-2:#C6D2DE;      /* hairline on the pale ground */
  --white:#FFFFFF;
  --on-navy:#D3DEE9;     /* paragraphs on navy */
  --red:#CC2019;         /* Call */
  --red-dk:#AD1812;
  --shell:1120px;
  --r:4px;
  --r-lg:6px;
  --font:"Libre Franklin","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(74px + env(safe-area-inset-bottom)); /* room for the phone action bar */
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--blue)}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--r)}
.hero :focus-visible,.season :focus-visible,.foot :focus-visible{outline-color:var(--white)}
.dg :focus-visible{outline-color:var(--blue)}
h1,h2,h3{font-family:var(--font);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
.shell{max-width:var(--shell);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--navy);padding:12px 16px;
  border:1px solid var(--navy);border-radius:var(--r);font-weight:600;z-index:60}
.skip:focus{left:12px}

/* ---- buttons ------------------------------------------------
   Solid rectangles. Call is red. Text is navy on a light ground
   and white on a navy one. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:14px 22px;
  font-family:var(--font);font-weight:600;font-size:17px;line-height:1.2;letter-spacing:-.01em;
  text-decoration:none;text-align:center;text-wrap:balance;
  color:var(--white);background:var(--navy);
  border:0;border-radius:var(--r);
  transition:background-color .15s ease-out;
}
.btn svg{flex:none;width:20px;height:20px}
.btn:hover{color:var(--white);background:var(--navy-up)}
.btn:active{transform:translateY(1px)}
.btn.call{background:var(--red)}
.btn.call:hover{background:var(--red-dk)}
.hero .btn.text,.season .btn.text{background:var(--white);color:var(--navy)}
.hero .btn.text:hover,.season .btn.text:hover{background:var(--ice);color:var(--navy)}
.cta-row{display:flex;flex-direction:column;gap:12px}

/* ---- header ------------------------------------------------- */
.top{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:40}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:var(--shell);margin:0 auto;padding:10px 16px}
.brand{display:block;flex:0 1 auto;min-width:0}
.brand img{width:clamp(118px,38vw,150px);height:auto}
.top-nav{display:none}
.top .btn{min-height:48px;padding:10px 16px;font-size:15.5px;white-space:nowrap;flex:none}
.top .btn .wide{display:none}
.top .btn.text{display:none}
.top .btn svg{width:17px;height:17px}

/* ---- first screen ------------------------------------------- */
.hero{background:var(--navy);color:var(--white)}
.hero-in{display:grid;gap:38px;max-width:var(--shell);margin:0 auto;padding:40px 20px 44px}
.tag{display:block;margin-bottom:14px;font-size:15px;font-weight:600;line-height:1.35;color:var(--blue-lt)}
.hero h1{font-size:clamp(38px,10.4vw,64px);font-weight:800;line-height:1.03;letter-spacing:-.024em;color:var(--white);margin-bottom:18px}
.hero h1 span{color:var(--blue-lt)}
.hero-sub{font-size:18px;line-height:1.55;color:var(--on-navy);max-width:48ch;margin-bottom:26px}
.hero-note{margin-top:18px;font-size:15.5px;color:var(--on-navy)}
.hero-note b{color:var(--white);font-weight:700}

/* the drawing */
.dg{background:var(--white);color:var(--ink);border-radius:var(--r-lg);overflow:hidden}
.dg-cap{font-weight:700;font-size:16px;line-height:1.3;color:var(--navy);padding:14px 18px;border-bottom:1px solid var(--line)}
.dg svg{width:100%;height:auto}
.legend{list-style:none;display:grid;gap:11px;padding:16px 18px 20px;border-top:1px solid var(--line)}
.legend li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:15.5px;line-height:1.45}
.n{
  width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--white);
  font-weight:700;font-size:13.5px;display:grid;place-items:center;line-height:1;
}

/* ---- sections ----------------------------------------------- */
section{padding:60px 0}
.tint{background:var(--ice)}
.kicker{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--blue);margin-bottom:10px}
.head{font-size:clamp(28px,7vw,42px);margin-bottom:16px}
.lede{color:var(--slate);max-width:62ch}
.lede + .lede{margin-top:14px}

/* panels */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px}
.card h3{font-size:21px;letter-spacing:-.015em;margin-bottom:10px}
.card p{color:var(--slate)}
.list{list-style:none}
.list li{position:relative;padding:12px 0 12px 22px;line-height:1.5}
.list li + li{border-top:1px solid var(--line)}
.list li::before{content:"";position:absolute;left:1px;top:22px;width:7px;height:7px;background:var(--blue)}
.list.no li::before{
  left:0;top:20px;width:11px;height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 1.5l8 8M9.5 1.5l-8 8' stroke='%2344566A' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}
.note{margin-top:30px;padding-top:20px;border-top:1px solid var(--line-2);color:var(--slate);max-width:78ch}
.note b{color:var(--navy);font-weight:700}

/* send a photo: three steps */
.steps{list-style:none;margin:30px 0 32px;counter-reset:s;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;column-gap:12px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:1 / span 2;font-weight:800;font-size:30px;line-height:1;
  letter-spacing:-.02em;color:var(--blue)}
.steps b{display:block;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--navy);margin-bottom:4px}
.steps span{color:var(--slate);font-size:16px;line-height:1.5;display:block;grid-column:2}

/* what you are looking at */
.split{display:grid;gap:28px;align-items:start}
.split .lede{margin-bottom:0}

/* what people try / how we take it off */
.vs{display:grid;gap:20px;margin-top:30px}
.lab{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--slate);margin-bottom:8px}
.lab.yes{color:var(--blue)}
.card.method{background:var(--ice);border-color:var(--ice)}
.card.method .cta-row{margin-top:22px}
.card.method .btn{padding-left:12px;padding-right:12px}

/* season band */
.season{background:var(--navy);color:var(--white)}
.season .kicker{color:var(--blue-lt)}
.season .head{color:var(--white)}
.season p{color:var(--on-navy);max-width:60ch}
.months{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0;max-width:560px;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-lg);overflow:hidden}
.month{padding:12px 12px}
.month + .month{border-left:1px solid rgba(255,255,255,.3)}
.month b{display:block;font-weight:700;font-size:17px;line-height:1.2;color:var(--white)}
.month span{display:block;margin-top:3px;font-size:13.5px;color:var(--on-navy)}
.month.prime{background:var(--blue)}
.month.prime span{color:var(--white)}
.season .cta-row{margin-top:26px}

/* service area: a plain list */
.towns{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;margin-top:26px;border-top:1px solid var(--line)}
.towns li{padding:13px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.35;font-weight:500;color:var(--navy)}
.towns .home{grid-column:span 2;font-weight:700}
.towns .home small{font-size:14px;font-weight:600;color:var(--blue);margin-left:10px}
.towns .more{grid-column:1 / -1;font-weight:400;color:var(--slate);border-bottom:0}

/* the SoftWash block */
.crew-grid{display:grid;gap:34px;align-items:start}
.proof{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-top:1px solid var(--line-2)}
.stat{padding:16px 16px 0 0}
.stat + .stat{padding-left:18px;border-left:1px solid var(--line-2)}
.stat b{display:block;font-weight:800;font-size:32px;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.stat span{display:block;font-size:14px;color:var(--slate);line-height:1.4;margin-top:6px}
.quotes{display:grid}
.quote{padding:22px 0;border-top:1px solid var(--line-2)}
.quote:first-child{padding-top:0;border-top:0}
.quote .stars{display:flex;gap:2px;margin-bottom:10px;color:var(--navy)}
.quote .stars svg{width:16px;height:16px}
.quote blockquote{font-size:18px;line-height:1.5;color:var(--navy)}
.quote figcaption{margin-top:10px;font-size:14px;color:var(--slate);line-height:1.4}
.quote figcaption b{display:block;color:var(--navy);font-weight:700;font-size:15.5px}
.sib{display:inline-block;padding:12px 0;font-weight:600}
.fine{padding-top:16px;border-top:1px solid var(--line-2);font-size:14px;color:var(--slate)}

/* last call */
.last{background:var(--white)}
.last .head{margin-bottom:12px}
.last .cta-row{margin-top:26px}

/* footer */
.foot{background:var(--navy);color:var(--on-navy);padding:44px 0 28px}
.foot-grid{display:grid;gap:28px}
.foot img{width:190px}
.foot p{margin-top:16px;font-size:15.5px;max-width:40ch}
.foot-title{font-size:14px;font-weight:600;color:var(--blue-lt);margin-bottom:4px}
.foot nav a,.foot-call a{display:block;color:var(--white);text-decoration:none;font-weight:500;padding:11px 0}
.foot nav a:hover,.foot-call a:hover{color:var(--white);text-decoration:underline}
.foot-call a.num{font-weight:800;font-size:27px;line-height:1.3;letter-spacing:-.02em;padding:6px 0 8px;white-space:nowrap}
.legal{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:#9FB2C5}

/* the phone action bar */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:.8fr 1.2fr;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(13,33,54,.10);
}
.bar .btn{min-height:52px;padding:10px 12px;font-size:16.5px}

/* 404 */
.lost{display:grid;align-items:center;padding:56px 20px 64px;background:var(--ice)}
.lost > div{width:100%;max-width:calc(var(--shell) - 40px);margin:0 auto}
.lost h1{font-size:clamp(34px,9vw,54px);font-weight:800;letter-spacing:-.024em;line-height:1.04;margin-bottom:14px}
.lost p{color:var(--slate);max-width:46ch;margin-bottom:26px}
.lost .back{display:inline-block;margin-top:12px;padding:13px 0;font-weight:600}

/* ---- wider screens ------------------------------------------ */
@media (min-width:560px){
  .cta-row{flex-direction:row;flex-wrap:wrap}
}
@media (min-width:760px){
  body{font-size:17.5px;padding-bottom:0}
  .bar{display:none}
  .shell{padding:0 28px}
  section{padding:88px 0}
  .top{position:sticky;top:0}
  .top-in{padding:10px 28px;gap:22px}
  .brand img{width:176px}
  .top .btn{padding:10px 18px}
  .hero-in{padding:64px 28px 68px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);column-gap:36px;border-top:0;margin:36px 0 38px}
  .steps li{display:block;padding:18px 0 0;border-bottom:0;border-top:1px solid var(--navy)}
  .steps li::before{display:block;font-size:34px;margin-bottom:16px}
  .card{padding:30px 28px}
  .month{padding:14px 18px}
  .month b{font-size:20px}
  .towns{grid-template-columns:repeat(4,1fr);column-gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 40px}
  .foot-grid > div:first-child{grid-column:1 / -1}
  .lost{padding:88px 28px 96px}
  .lost > div{max-width:calc(var(--shell) - 56px)}
  html{scroll-padding-top:112px}
}
@media (min-width:980px){
  .top-in{justify-content:flex-end}
  .brand{margin-right:auto}
  .top .btn.text{display:inline-flex}
  .top .btn .wide{display:inline}
  .hero-in{grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:72px 28px 76px}
  .hero h1{font-size:clamp(46px,5.1vw,64px)}
  .hero .cta-row{flex-direction:column;align-items:stretch;max-width:372px}
  .season-grid{display:grid;grid-template-columns:1.3fr .7fr;column-gap:64px;align-items:center;
    grid-template-areas:"head months" "body months"}
  .season-head{grid-area:head;align-self:end}
  .season-body{grid-area:body;align-self:start}
  .season .months{grid-area:months;grid-template-columns:1fr;margin:0;max-width:none}
  .season .month{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 22px}
  .season .month + .month{border-left:0;border-top:1px solid rgba(255,255,255,.3)}
  .season .month b{font-size:24px;letter-spacing:-.015em}
  .season .month span{font-size:15px;margin-top:0}
  .foot-grid{grid-template-columns:1.5fr 1fr auto}
  .foot-grid > div:first-child{grid-column:auto}
  .vs{grid-template-columns:1fr 1fr}
  .card.method .cta-row{flex-direction:column;align-items:stretch;max-width:372px}
  .split{grid-template-columns:1.1fr .9fr;gap:56px}
  .crew-grid{grid-template-columns:.95fr 1.05fr;gap:64px}
  .last .shell{display:grid;grid-template-columns:1fr auto;column-gap:56px;align-items:center}
  .last .head,.last .lede{grid-column:1}
  .last .cta-row{grid-column:2;grid-row:1 / span 2;margin-top:0;flex-direction:column;align-items:stretch;min-width:340px}
}
@media (min-width:1160px){
  .top-nav{display:flex;gap:24px;margin-right:8px}
  .top-nav a{color:var(--navy);text-decoration:none;font-weight:600;font-size:15.5px;white-space:nowrap;padding:12px 0}
  .top-nav a:hover{color:var(--blue)}
}
@media (max-width:399px){
  .btn{padding-left:12px;padding-right:12px;gap:8px}
}
@media (max-width:359px){
  .top .btn svg{display:none}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}