/* ============================================================
   Ice Dam Rescue
   Restyled 2026-10-08. Deep navy, white, and one cold blue (first
   taken from the old logo's ring). 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:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;text-decoration:none;color:var(--navy)}
.brand:hover{color:var(--navy)}
.brand img{width:50px;height:50px;flex:none}
.wm{font-weight:800;letter-spacing:-.02em;line-height:1}
.brand .wm{font-size:18px;color:var(--navy)}
.brand .wm > span{display:block}
.brand .wm > span + span{margin-top:2px}
/* the name alone, no badge: <header class="top" data-logo="wordmark"> */
.top[data-logo="wordmark"] .brand picture{display:none}
.top[data-logo="wordmark"] .brand .wm{font-size:22px}
/* the cartoon sticker, wide, in place of the badge and the name
   (tools/build_logo_cartoon.py); the name stays for screen readers */
.brand picture.sticker img{width:auto;height:50px}
.foot-brand picture.sticker img{width:auto;height:96px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.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);text-wrap:balance}
.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;text-wrap:pretty}
.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 p + p{margin-top:12px}
/* the PHOTO SLOT (off until tools/slot_switch.py photo on) */
#job figure.card{padding:0;overflow:hidden;margin-top:26px;max-width:640px}
#job figure img{display:block;width:100%;height:auto}
#job figcaption{padding:14px 18px;font-size:15px;line-height:1.45;color:var(--slate);border-top:1px solid var(--line)}
.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}

/* last call */
.last{background:var(--ice)}   /* pale since Oct 15, so it stands apart from the white section above */
.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-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{width:72px;height:72px;flex:none}
.foot-brand .wm{font-size:26px;color:var(--white)}
.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{gap:12px}
  .brand img{width:64px;height:64px}
  .brand picture.sticker img{height:64px}
  .brand .wm{font-size:23px}
  .brand .wm > span{display:inline}
  .brand .wm > span + span{margin-top:0}
  .top[data-logo="wordmark"] .brand .wm{font-size:27px}
  .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}
  .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){
  /* four links since Oct 15 (Heat trace): tighter, and the logo never gives way */
  .brand{flex:none}
  .top-nav{display:flex;gap:18px;margin-right:0}
  .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}
}