/* InsulBid shared look: index, calculators, privacy, terms. System fonts only, no third-party assets (CSP). */
:root { --navy:#02244d; --navy-2:#011733; --amber:#fd5700; --amber-ink:#02244d; --amber-text:#B23C00; --bg:#F7F7F5; --alt:#fff; --card:#fff; --text:#1B1F24; --muted:#5B6470;
  --line:#DDE0E4; --brand:#02244d; --accent:#0B5CAD; --result:#EEF3FA; --soft:#EEF3FA; --hl:#FFF4E5; --sp:8px; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0E1524; --alt:#131C30; --card:#18233B; --text:#E8EBEF; --muted:#A3ACB8; --line:#2A3650; --brand:#F2F4F8; --accent:#7DB4F0;
    --amber-text:#FF8A4C; --result:#0F2036; --soft:#0F2036; --hl:#2A2418; }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; }
a { color:var(--accent); }
h1, h2, h3 { letter-spacing:-.02em; line-height:1.15; margin:0 0 calc(var(--sp)*2); }
h1 { font-size:clamp(2rem, 5vw, 3.25rem); letter-spacing:-.03em; }
h2 { font-size:clamp(1.55rem, 3.2vw, 2.25rem); }
h3 { font-size:1.15rem; letter-spacing:-.01em; }
p { margin:0 0 calc(var(--sp)*2); }
:focus-visible { outline:3px solid var(--amber); outline-offset:2px; border-radius:4px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 calc(var(--sp)*3); }
.skip { position:absolute; left:-999px; top:8px; background:var(--navy); color:#fff; padding:8px 16px; border-radius:8px; z-index:50; }
.skip:focus { left:8px; }
[hidden] { display:none !important; }

/* header */
.site-header { position:sticky; top:0; z-index:20; background:var(--alt); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; justify-content:space-between; gap:calc(var(--sp)*2); min-height:64px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:8px; font-size:1.4rem; font-weight:800; letter-spacing:-.02em; color:var(--brand); text-decoration:none; }
.brand img { display:block; }
@media (prefers-color-scheme: dark) { .brand img { background:#fff; border-radius:6px; padding:2px 4px; } } /* navy roof needs a light tile on the dark header */
#nav { display:flex; align-items:center; gap:calc(var(--sp)*3); }
#nav a:not(.btn) { color:var(--text); text-decoration:none; font-size:.95rem; font-weight:500; }
#nav a:not(.btn):hover { color:var(--amber-text); }
.menu-btn { display:none; font:inherit; font-weight:600; color:var(--text); background:none; border:1px solid var(--line); border-radius:8px; padding:8px 16px; cursor:pointer; }
@media (max-width: 860px) {
  .js .menu-btn { display:block; }
  .js #nav { display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; padding-bottom:calc(var(--sp)*2); }
  .js #nav.open { display:flex; }
  .js #nav a:not(.btn) { padding:12px 0; border-top:1px solid var(--line); }
  .js #nav .btn { margin-top:calc(var(--sp)*2); }
  #nav { flex-wrap:wrap; gap:8px 16px; flex-basis:100%; padding-bottom:8px; }
}

/* buttons */
.btn { display:inline-block; background:var(--amber); color:var(--amber-ink); font-weight:700; text-decoration:none; padding:14px 24px; border-radius:12px; border:2px solid var(--amber); text-align:center; line-height:1.2; }
.btn:hover { filter:brightness(1.07); }
.btn-sm { padding:9px 16px; font-size:.95rem; }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--text); filter:none; }
.btns { display:flex; flex-wrap:wrap; gap:calc(var(--sp)*1.5); }

/* sections */
.section { padding:calc(var(--sp)*10) 0; }
.section.alt { background:var(--alt); }
.section.navy { background:var(--navy); color:#E8EBEF; --muted:#B7C0CE; --line:#2F3E60; }
.section.navy h2 { color:#fff; }
.section.cta { background:linear-gradient(160deg, var(--navy), var(--navy-2)); color:#E8EBEF; border-top:4px solid var(--amber); }
.section.cta h2 { color:#fff; }
.section.cta .btn-ghost, .hero .btn-ghost { color:#fff; border-color:rgba(255,255,255,.45); }
.section.cta .btn-ghost:hover, .hero .btn-ghost:hover { border-color:#fff; }
.btns-center { justify-content:center; }
.eyebrow { color:var(--amber-text); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.lead { font-size:1.15rem; color:var(--muted); max-width:60ch; }
.narrow { max-width:720px; }
@media (max-width: 640px) { .section { padding:calc(var(--sp)*7) 0; } }

/* hero */
.hero { padding:calc(var(--sp)*9) 0 calc(var(--sp)*10); background:radial-gradient(1200px 500px at 85% 0%, #0a3a73 0%, transparent 60%), linear-gradient(160deg, var(--navy), var(--navy-2)); color:#E8EBEF; }
.hero h1 { color:#fff; } .hero .lead { color:#C3CDDB; } .hero .eyebrow { color:#FF8A4C; }
.hl { color:var(--amber); white-space:nowrap; }
.hero .frame { border:0; border-top:3px solid var(--amber); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.hero-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:calc(var(--sp)*7); align-items:center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns:1fr; } .hero { padding-top:calc(var(--sp)*5); } }
.trust { margin:calc(var(--sp)*2) 0 0; font-size:.9rem; color:var(--muted); }
.frame-price { margin:40px auto 0; max-width:560px; }
.frame { border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; box-shadow:0 12px 32px rgba(20,33,61,.12); }
.frame-bar { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg); }
.frame-bar i { width:10px; height:10px; border-radius:50%; background:var(--line); }
.frame img { display:block; width:100%; }
.shots { display:grid; gap:calc(var(--sp)*3); }

/* steps, features */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--sp)*3); margin:calc(var(--sp)*5) 0 0; padding:0; list-style:none; }
.steps li { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:calc(var(--sp)*3); }
.num { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; font-weight:700; margin-bottom:calc(var(--sp)*2); }
.steps p, .feat p { margin:0; color:var(--muted); }
.feats { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--sp)*3); margin-top:calc(var(--sp)*5); }
.feat { border:1px solid var(--line); border-radius:12px; padding:calc(var(--sp)*3); background:var(--card); }
.feat svg { margin-bottom:calc(var(--sp)*1.5); }
.feat h3 { margin-bottom:4px; }
@media (max-width: 960px) { .feats { grid-template-columns:repeat(2,1fr); } .steps { grid-template-columns:1fr; } }
@media (max-width: 560px) { .feats { grid-template-columns:1fr; } }
.two { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--sp)*6); align-items:start; }
@media (max-width: 860px) { .two { grid-template-columns:1fr; gap:calc(var(--sp)*2); } }

/* comparison */
table.cmp { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; margin-top:calc(var(--sp)*4); background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.cmp th, .cmp td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
.cmp tr:last-child > * { border-bottom:0; }
.cmp thead th { font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.cmp tbody th { font-weight:600; width:24%; }
.cmp .us { background:var(--hl); font-weight:600; }
.cmp thead .us { color:var(--amber-text); }
@media (max-width: 560px) { .cmp th, .cmp td { padding:10px 8px; font-size:.88rem; } .cmp thead th { font-size:.7rem; } }

/* pricing, faq */
.price-card { max-width:520px; margin:calc(var(--sp)*4) auto 0; background:var(--card); border:2px solid var(--amber); border-radius:12px; padding:calc(var(--sp)*5); }
.price-card { text-align:left; }
.price-card h3 { font-size:1.6rem; }
.price-card ul { list-style:none; margin:0 0 calc(var(--sp)*3); padding:0; }
.price-card li { position:relative; padding:6px 0 6px 32px; }
.price-card li::before { content:""; position:absolute; left:4px; top:11px; width:12px; height:7px; border-left:2.5px solid var(--amber-text); border-bottom:2.5px solid var(--amber-text); transform:rotate(-45deg); }
.price-card .btn { display:block; }
details { border-bottom:1px solid var(--line); padding:14px 0; }
summary { cursor:pointer; font-weight:600; }
details p { margin:8px 0 0; color:var(--muted); }
.center { text-align:center; }
.center .lead { margin-left:auto; margin-right:auto; }

/* footer */
.site-footer { background:var(--navy); color:#C9D1DD; padding:calc(var(--sp)*6) 0 calc(var(--sp)*4); font-size:.92rem; }
.site-footer a { color:#fff; }
.foot { display:grid; grid-template-columns:2fr 1fr 1fr; gap:calc(var(--sp)*4); }
.foot h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:#9FB0CC; margin-bottom:8px; }
.foot ul { list-style:none; margin:0; padding:0; } .foot li { margin-bottom:6px; overflow-wrap:anywhere; }
.foot-note { border-top:1px solid #2F3E60; margin-top:calc(var(--sp)*4); padding-top:calc(var(--sp)*3); }
.foot-note p { margin:0 0 4px; }
@media (max-width: 640px) { .foot { grid-template-columns:1fr; } }

/* calculators (same ids/classes as before) */
.calc-main { max-width:760px; margin:0 auto; padding:calc(var(--sp)*5) calc(var(--sp)*2) calc(var(--sp)*8); }
.tabs { display:flex; gap:8px; margin:calc(var(--sp)*3) 0 12px; }
.tabs button { flex:1; padding:12px; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:12px; font:inherit; cursor:pointer; }
.tabs button[aria-selected="true"] { background:var(--navy); color:#fff; border-color:var(--navy); font-weight:600; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 560px) { .grid { grid-template-columns:1fr; } }
label { display:block; font-size:.9rem; font-weight:600; margin-bottom:4px; }
.hint { display:block; font-weight:400; color:var(--muted); font-size:.8rem; }
input, select { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
.results { margin-top:18px; background:var(--result); border-radius:10px; padding:16px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
.results div span { display:block; font-size:.8rem; color:var(--muted); }
.results div strong { font-size:1.35rem; }
.note { font-size:.85rem; color:var(--muted); margin-top:10px; }
.banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:calc(var(--sp)*4); padding:16px 20px; border:1px solid var(--amber); border-radius:12px; background:var(--hl); }
.banner p { margin:0; flex:1 1 260px; }

/* legal pages */
.doc { max-width:720px; margin:0 auto; padding:calc(var(--sp)*5) calc(var(--sp)*2) calc(var(--sp)*8); }
.doc h1 { font-size:2rem; }
.doc section { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px; }
.doc h2 { font-size:1.15rem; margin:0 0 8px; }
.doc p, .doc li { overflow-wrap:anywhere; }
.doc ul { margin:0 0 10px; padding-left:22px; } .doc li { margin-bottom:4px; }
.help { color:var(--muted); font-size:.92rem; }
.key { background:var(--soft); border-radius:10px; padding:10px 12px; }
.doc .see { color:var(--muted); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* D-021 rev 2 */
.cap { text-align:center; color:var(--muted); font-size:.92rem; margin:12px auto 0; max-width:560px; }
@media (prefers-color-scheme: dark) { .frame img { border:1px solid var(--line); } }

/* before/after slider: the measured plan underneath, the plain PDF clipped on top. --pos is set by nav.js; 50% without JS. */
.ba { margin:0; }
.ba-stage { position:relative; --pos:50%; background:#fff; }
.ba-stage img { display:block; width:100%; }
.ba-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px; background:var(--amber); pointer-events:none; }
.ba-line::after { content:"\2194"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--amber); color:var(--navy); display:grid; place-items:center; font-weight:800; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.ba-tag { position:absolute; top:10px; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:700; background:rgba(2,36,77,.85); color:#fff; pointer-events:none; }
.ba-l { left:10px; } .ba-r { right:10px; background:var(--amber); color:var(--navy); }
.ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; padding:0; border:0; }
.ba-range:focus-visible + * , .ba-stage:focus-within .ba-line { box-shadow:0 0 0 3px #fff; }
.ba figcaption { margin-top:12px; font-size:.88rem; color:#AFBBCC; text-align:center; }

/* trust strip under the hero */
.trustbar { background:var(--alt); border-bottom:1px solid var(--line); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--sp)*3); padding-top:calc(var(--sp)*3); padding-bottom:calc(var(--sp)*3); }
.trust-grid > div { display:flex; gap:12px; align-items:flex-start; }
.trust-grid svg, .feat svg { width:28px; height:28px; flex:none; stroke:var(--amber-text); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.trust-grid p { margin:0; font-size:.9rem; color:var(--muted); line-height:1.4; }
.trust-grid strong { display:block; color:var(--text); font-size:.98rem; }
@media (max-width: 860px) { .trust-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 420px) { .trust-grid { grid-template-columns:1fr; gap:14px; } }

/* quick price widget */
.quick { border-top:3px solid var(--amber); box-shadow:0 12px 32px rgba(2,36,77,.10); }
.quick .grid { grid-template-columns:1fr 1fr 1fr; }
@media (max-width: 560px) { .quick .grid { grid-template-columns:1fr; } }
.quick .results strong { font-variant-numeric:tabular-nums; }
.quick .results { grid-template-columns:repeat(3,1fr); }
@media (max-width: 420px) { .quick .results { grid-template-columns:1fr; } }
.callbar.away { transform:translateY(110%); }
#q-out-price { color:var(--amber-text); }

/* steps joined by a line on wide screens */
@media (min-width: 961px) {
  .steps { position:relative; }
  .steps::before { content:""; position:absolute; top:calc(var(--sp)*3 + 18px); left:8%; right:8%; height:2px; background:var(--line); }
  .steps li { position:relative; }
}
.steps li:first-child .num { background:var(--amber); color:var(--navy); }

/* FAQ chevron */
summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:1.05rem; }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; flex:none; width:9px; height:9px; border-right:2px solid var(--amber-text); border-bottom:2px solid var(--amber-text); transform:rotate(45deg); transition:transform .2s; margin-right:4px; }
details[open] > summary::after { transform:rotate(-135deg); }

/* sticky call-to-action bar on phones */
.callbar { display:none; }
@media (max-width: 767px) {
  .callbar { display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--navy); box-shadow:0 -6px 20px rgba(0,0,0,.25); transition:transform .2s; }
  .callbar .btn { flex:1.4; padding:12px 10px; font-size:.95rem; }
  .callbar .btn-ghost { flex:1; color:#fff; border-color:rgba(255,255,255,.45); }
  .callbar.hide { transform:translateY(110%); }
  body:has(.callbar) { padding-bottom:76px; }
}

/* reveal on scroll (only with JS, never for reduced motion) */
.js .rev { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.js .rev.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .js .rev { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }