/*
Theme Name: The Home Insulators
Theme URI: https://thehomeinsulators.com
Author: The Home Insulators
Description: Modern, mobile-first theme for The Home Insulators — spray foam insulation & weatherization across NY & NJ. Navy brand, since 2015.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: thehomeinsulators
*/

/* ---------- Tokens: LIGHT ---------- */
:root{
  --bg:#F2F4F6; --surface:#FFFFFF; --surface-2:#E8EDF1;
  --ink:#0E2233; --ink-soft:#45586A; --muted:#7C8A96; --line:#DBE2E8;
  --navy:#003760; --navy-deep:#002540; --navy-tint:#E2ECF3;
  --ember:#E1571B; --ember-deep:#BC440F; --ember-tint:#F9E9DE; --cold:#2C6E8A;
  --ring:rgba(225,87,27,.40);
  --shadow:0 1px 2px rgba(6,26,42,.07),0 8px 26px rgba(6,26,42,.09);
  --shadow-lg:0 2px 6px rgba(6,26,42,.09),0 20px 50px rgba(6,26,42,.16);
  --hero-bg:#04273F; --hero-panel:#0A3557; --hero-ink:#EFF4F8; --hero-soft:#A7BDD0; --hero-line:rgba(255,255,255,.12);
  --thermal:linear-gradient(90deg,#003760 0%,#2C6E8A 30%,#8F9E6B 50%,#E6A63A 72%,#E1571B 100%);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1140px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1620; --surface:#10202D; --surface-2:#17293A; --ink:#EAF1F6;
    --ink-soft:#AEC0CD; --muted:#7E8E9B; --line:#24384A;
    --navy:#5296CC; --navy-deep:#0A3557; --navy-tint:#12293C;
    --ember:#FF6E33; --ember-deep:#E1571B; --ember-tint:#2A1D14; --cold:#57A6C4;
    --ring:rgba(255,110,51,.45);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 26px rgba(0,0,0,.4);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 54px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.015em;line-height:1.08;font-weight:800}
p{margin:0}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wp-narrow{max-width:820px}
.eyebrow{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--ember)}
.tnum{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.98rem;padding:.85em 1.35em;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.btn-primary{background:var(--ember);color:#fff;box-shadow:0 6px 18px var(--ring)}
.btn-primary:hover{background:var(--ember-deep);transform:translateY(-2px)}
.btn-ghost{border-color:currentColor;color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)}
.btn-onhero{border-color:var(--hero-line);color:var(--hero-ink)}
.btn-onhero:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.navbar{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:1.12rem;color:var(--ink)}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--hero-bg);position:relative;flex:0 0 auto;box-shadow:var(--shadow)}
.brand .mark::before{content:"";position:absolute;inset:6px;border-radius:3px;background:var(--thermal);opacity:.95}
.brand small{display:block;font-weight:600;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.nav-links{display:flex;gap:26px;font-size:.95rem;font-weight:600;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ember)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-phone{font-weight:800;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.nav-phone span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.nav-links,.nav-phone{display:none}}

/* Hero */
.hero{background:var(--hero-bg);color:var(--hero-ink);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;background:radial-gradient(circle,rgba(225,87,27,.30),rgba(225,87,27,0) 62%);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--thermal)}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:78px 24px 84px;position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(2.5rem,6vw,4.35rem);letter-spacing:-.03em;line-height:1.0}
.hero h1 .hot{color:var(--ember)}
.hero .lede{color:var(--hero-soft);font-size:1.15rem;line-height:1.6;margin-top:22px;max-width:34ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-trust{margin-top:30px;padding-top:22px;border-top:1px solid var(--hero-line);display:flex;gap:10px 22px;flex-wrap:wrap;color:var(--hero-soft);font-size:.9rem;font-weight:600}
.hero-trust b{color:var(--hero-ink)}
.hero-trust .dot{color:var(--ember)}
.envelope{background:var(--hero-panel);border:1px solid var(--hero-line);border-radius:18px;padding:22px;box-shadow:var(--shadow-lg)}
.envelope .cap{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--hero-soft)}
.envelope .cap b{color:var(--ember)}
.bars{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.bar-row{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:12px;font-size:.86rem;color:var(--hero-soft)}
.meter{height:12px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;position:relative}
.meter i{position:absolute;inset:0;border-radius:99px}
.meter.cold i{background:linear-gradient(90deg,#2C6E8A,#4F9DBB);width:88%}
.meter.mid i{background:linear-gradient(90deg,#8F9E6B,#E6A63A);width:52%}
.meter.hot i{background:linear-gradient(90deg,#E6A63A,#E1571B);width:22%}
.envelope .foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--hero-line);display:flex;justify-content:space-between;align-items:baseline}
.envelope .foot .big{font-size:2rem;font-weight:800;color:var(--hero-ink);letter-spacing:-.02em}
.envelope .foot small{color:var(--hero-soft);font-size:.8rem;font-weight:600}
@media (max-width:860px){.hero-inner{grid-template-columns:1fr;gap:36px;padding:60px 24px 64px}.envelope{order:2}}

/* Stats */
.stats{background:var(--surface);border-bottom:1px solid var(--line)}
.stats-grid{max-width:var(--maxw);margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{display:flex;flex-direction:column;gap:4px}
.stat .n{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.stat .n em{font-style:normal;color:var(--ember)}
.stat .l{font-size:.9rem;color:var(--ink-soft);font-weight:600;line-height:1.35}
@media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:26px 20px}}

/* Sections */
section{padding:84px 0}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-top:12px}
.sec-head p{color:var(--ink-soft);font-size:1.1rem;margin-top:14px}
.page-hero{background:var(--hero-bg);color:var(--hero-ink);padding:54px 0 46px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--thermal)}
.page-hero .eyebrow{color:var(--ember)}
.page-hero h1{font-size:clamp(2rem,4.6vw,3rem);margin-top:10px;color:var(--hero-ink)}
.page-hero p{color:var(--hero-soft);font-size:1.1rem;margin-top:14px;max-width:56ch}

/* Services / cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 24px 28px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--ember) 34%,var(--line))}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card .ico{width:44px;height:44px;border-radius:11px;background:var(--ember-tint);display:grid;place-items:center;margin-bottom:16px}
.card .ico svg{width:23px;height:23px;stroke:var(--ember);fill:none;stroke-width:1.9}
.card h3{font-size:1.22rem;margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:.98rem;line-height:1.56}
@media (max-width:860px){.cards{grid-template-columns:1fr}}

/* The fix / compare */
.fix{background:var(--surface-2)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.panel .tag{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;padding:5px 11px;border-radius:99px}
.panel.before .tag{background:rgba(44,110,138,.14);color:var(--cold)}
.panel.after .tag{background:var(--ember-tint);color:var(--ember-deep)}
.panel h3{font-size:1.2rem;margin:16px 0 6px}
.panel ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.panel li{display:flex;gap:11px;color:var(--ink-soft);font-size:.97rem;line-height:1.5}
.panel li svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px}
.panel.before li svg{stroke:var(--cold)}
.panel.after li svg{stroke:var(--ember)}
.heatline{height:12px;border-radius:99px;margin-top:20px;background:var(--thermal)}
@media (max-width:760px){.compare{grid-template-columns:1fr}}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{position:relative;padding-top:20px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-size:.9rem;font-weight:800;color:var(--ember);letter-spacing:.08em}
.step h3{font-size:1.1rem;margin:10px 0 7px}
.step p{color:var(--ink-soft);font-size:.95rem;line-height:1.5}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:28px 20px}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* Service area */
.area{background:var(--surface-2)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.chip{font-size:.86rem;font-weight:600;padding:7px 13px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);transition:all .14s ease}
.chip:hover{border-color:var(--ember);color:var(--ember);transform:translateY(-1px)}
.chip.county{background:var(--hero-bg);color:#fff;border-color:var(--hero-bg);font-weight:700}
.chip.county:hover{background:var(--ember);border-color:var(--ember);color:#fff}

/* Contact */
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.contact-card{display:flex;flex-direction:column;gap:18px}
.contact-row{display:flex;gap:14px;align-items:flex-start}
.contact-row .ci{width:42px;height:42px;flex:0 0 auto;border-radius:11px;background:var(--ember-tint);display:grid;place-items:center}
.contact-row .ci svg{width:20px;height:20px;stroke:var(--ember);fill:none;stroke-width:1.9}
.contact-row .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--muted)}
.contact-row .v{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.contact-row .v:hover{color:var(--ember)}
.cta-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow-lg)}
.cta-box h3{font-size:1.35rem;margin-bottom:8px}
.cta-box p{color:var(--ink-soft);margin-bottom:20px}
.cta-box .btn-primary{width:100%;justify-content:center;font-size:1.02rem}
.cta-box .callnum{display:block;text-align:center;margin-top:16px;font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.cta-box .callnum:hover{color:var(--ember)}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr;gap:32px}}

/* WordPress content (inner pages) */
.entry{color:var(--ink-soft);font-size:1.08rem;line-height:1.75}
.entry > *{margin:0 0 20px}
.entry h1,.entry h2,.entry h3,.entry h4{color:var(--ink);line-height:1.2;margin:34px 0 12px}
.entry h2{font-size:1.7rem}.entry h3{font-size:1.35rem}.entry h4{font-size:1.12rem}
.entry a{color:var(--ember);font-weight:600}
.entry a:hover{text-decoration:underline}
.entry ul,.entry ol{padding-left:1.3em}
.entry li{margin:0 0 8px}
.entry img{border-radius:12px;box-shadow:var(--shadow);margin:10px 0}
.entry strong{color:var(--ink)}
.entry blockquote{border-left:4px solid var(--ember);padding:6px 0 6px 20px;margin:24px 0;color:var(--ink);font-style:italic}
.entry table{width:100%;border-collapse:collapse;font-size:.96rem}
.entry table td,.entry table th{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry input,.entry textarea,.entry select{font-family:inherit;font-size:1rem;padding:.7em .85em;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);max-width:100%}
.entry .wpcf7 input[type=submit]{background:var(--ember);color:#fff;border:0;font-weight:700;padding:.8em 1.5em;cursor:pointer}

/* Footer */
footer.site{background:var(--hero-bg);color:var(--hero-soft);padding:56px 0 30px}
.foot-grid{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
footer .brand{color:var(--hero-ink)}
footer .brand small{color:var(--hero-soft)}
footer p.blurb{margin-top:16px;font-size:.94rem;line-height:1.6;max-width:38ch}
.foot-col h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--hero-ink);margin:0 0 14px}
.foot-col a{display:block;color:var(--hero-soft);font-size:.94rem;padding:5px 0}
.foot-col a:hover{color:var(--ember)}
.foot-bottom{max-width:var(--maxw);margin:36px auto 0;padding:20px 24px 0;border-top:1px solid var(--hero-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--hero-soft)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:28px}.cta-grid{grid-template-columns:1fr}}