/* Roofing Edison: "slate and copper". Attic-cream ground, slate headings, copper calls.
   Mobile first; every page works with JavaScript off, and the menu falls back to :focus-within. */
:root {
  --slate: #2B3A4A;
  --slate-dark: #1E2A36;
  --copper: #A4511A;
  --copper-dark: #833F12;
  --cream: #FBF6EC;
  --sky: #E6EEF4;
  --sky-2: #D5E1EA;
  --brass: #8B6F3A;
  --ink: #1C2329;
  --muted: #56606A;
  --line: #DDD6C8;
  --white: #fff;
  --radius: 6px;
  --head: "Outfit", "Segoe UI", Arial, sans-serif;
  --body: "Inter", "Segoe UI", Arial, sans-serif;
  --max: 1140px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.075rem/1.68 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--copper-dark); text-underline-offset: .18em; }
a:hover { color: var(--slate); }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--head); color: var(--slate-dark); letter-spacing: -.01em; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
li::marker { color: var(--brass); }
strong { font-weight: 600; color: var(--slate-dark); }

.i0q34z { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.uktmu3 { max-width: 760px; }
.xp22hm { font-size: .9rem; color: var(--muted); }
.tv1un4 { position: absolute; left: -999px; top: 8px; background: var(--slate-dark); color: #fff; padding: 8px 14px; z-index: 100; }
.tv1un4:focus { left: 8px; }

/* ---------- buttons */
.xcq0y4 { display: inline-flex; align-items: center; gap: .5em; font: 700 1rem/1 var(--head); text-decoration: none; padding: .85em 1.25em; border-radius: 4px; border: 0; cursor: pointer; }
.xcq0y4 svg { width: 1.1em; height: 1.1em; flex: none; }
.ym4tug { background: var(--copper); color: #fff; }
.ym4tug:hover { background: var(--copper-dark); color: #fff; }
.qyvrzy { font-size: 1.1rem; padding: 1em 1.5em; }

/* ---------- header */
.u6pk2m { background: var(--slate-dark); color: #D9E3EB; font: 600 .85rem/1.2 var(--head); }
.a8q23z { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 7px; padding-bottom: 7px; }
.u6pk2m a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.u6pk2m svg { width: 14px; height: 14px; }
.qyyftw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l6zk85 { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.irn2du { display: flex; align-items: center; gap: 10px; min-height: 64px; flex-wrap: wrap; }
.qmx3wk { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; color: var(--slate-dark); }
.qmx3wk svg { width: 40px; height: 40px; flex: none; }
.v1yry9 { display: flex; flex-direction: column; font-family: var(--head); line-height: 1.15; }
.v1yry9 b { font-weight: 800; font-size: 1.05rem; }
.v1yry9 span { font-size: .78rem; color: var(--muted); font-weight: 700; }
.axm20n { padding: .65em .9em; font-size: .95rem; }
.l2kefi { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white); border-radius: 4px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; }
.l2kefi span { width: 20px; height: 2px; background: var(--slate-dark); }
.apbeco { display: none; list-style: none; margin: 0; padding: 6px 0 14px; width: 100%; }
/* With JS the menu opens only on .l5xw7e. Without JS (no data-js on <html>), focusing the menu button opens it. */
.e90828.l5xw7e .apbeco { display: block; }
@media (max-width: 979px) { html:not([data-js]) .e90828:focus-within .apbeco { display: block; } }
.apbeco > li { margin: 0; border-top: 1px solid var(--sky-2); position: relative; }
.apbeco a { display: block; padding: 11px 4px; text-decoration: none; color: var(--slate-dark); font: 700 1rem/1.3 var(--head); }
.qubcr2 { display: flex; flex-wrap: wrap; align-items: center; }
.qubcr2 > a { flex: 1; }
.jhnfs9 { background: none; border: 0; width: 44px; height: 44px; color: var(--slate); font-size: 1rem; cursor: pointer; }
.of8l02 { display: none; list-style: none; margin: 0; padding: 0 0 8px 12px; width: 100%; }
.qubcr2.l5xw7e .of8l02, html:not([data-js]) .qubcr2:focus-within .of8l02 { display: block; }
.of8l02 a { font-weight: 600; font-family: var(--body); padding: 8px 4px; }
.nazugb { padding-top: 10px; }
/* .apbeco a sets dark link text; the call button inside the menu must keep white on cobalt. */
.apbeco .nazugb .xcq0y4 { display: inline-flex; width: 100%; justify-content: center; color: #fff; padding: .85em 1.25em; }
.apbeco .nazugb .xcq0y4:hover { color: #fff; background: var(--copper-dark); }

@media (min-width: 980px) {
  .irn2du { flex-wrap: nowrap; min-height: 74px; }
  .axm20n, .l2kefi { display: none; }
  .apbeco { display: flex; align-items: center; gap: 2px; width: auto; padding: 0; }
  .apbeco > li { border: 0; }
  .apbeco a { padding: 10px 11px; font-size: .95rem; }
  .apbeco > li > a:hover { color: var(--copper); }
  .qubcr2 { flex-wrap: nowrap; }
  .jhnfs9 { width: 22px; margin-left: -8px; }
  .of8l02 { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--white); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); padding: 8px; box-shadow: 0 14px 30px rgba(8, 52, 63, .12); }
  .qubcr2:hover .of8l02 { display: block; }
  .of8l02 a { padding: 8px 10px; }
  .nazugb { padding: 0 0 0 10px; }
  .apbeco .nazugb .xcq0y4 { width: auto; padding: .75em 1.1em; }
}

/* ---------- heroes */
main { display: flex; flex-direction: column; }
main > * { width: 100%; }
.fo2vk1 { order: -1; background: var(--sky); max-width: none; padding-top: 14px; padding-bottom: 0; font: 600 .85rem/1.4 var(--head); }
.fo2vk1 ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 auto; padding: 0; max-width: calc(var(--max) - 32px); }
.fo2vk1 li { margin: 0; color: var(--muted); }
.fo2vk1 li + li::before { content: "/"; margin: 0 8px; color: #98A6B3; }
.fo2vk1 a { color: var(--slate); text-decoration: none; }
.fo2vk1 a:hover { text-decoration: underline; }

.spvl40 { background: var(--sky); padding: 26px 0 40px; }
.vw30cq { display: inline-block; font: 800 .78rem/1.3 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); padding-bottom: 8px; margin-bottom: 14px; border-bottom: 2px solid var(--copper); }
.spvl40 h1 { margin-bottom: .35em; }
.zsgyw3 { font-size: 1.15rem; color: var(--ink); max-width: 46em; }
.flizwt { margin: 18px 0 6px; }
.flizwt p { margin: 0; }
.mcfr0x { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 700 .88rem/1.3 var(--head); color: var(--slate); }
.mcfr0x li { margin: 0; padding-left: 18px; position: relative; }
.mcfr0x li::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border: 2px solid var(--brass); border-radius: 50%; }
.rfgey7 { padding-bottom: 30px; }

.jlqywv { padding: 40px 0 44px; }
.atxgbp { display: grid; gap: 28px; }
.ppbsy4 { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--brass); border-radius: 0 0 var(--radius) var(--radius); padding: 22px 22px 18px; align-self: start; }
.ppbsy4 h2 { font-size: 1.15rem; margin-bottom: .7em; }
.ppbsy4 ul { list-style: none; padding: 0; margin: 0 0 12px; }
.ppbsy4 li { padding: 9px 0; margin: 0; border-bottom: 1px solid var(--sky-2); font-size: .98rem; }
.xbce9s { margin: 0; font: 700 1rem/1.4 var(--head); color: var(--slate-dark); }
.uqerrc { background: var(--sky); }
.uqerrc img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (min-width: 900px) {
  .jlqywv { padding: 64px 0 70px; }
  .atxgbp { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: center; }
}

/* ---------- sections */
.lp4oij { padding: 52px 0; }
.i9hj2a { background: var(--sky); }
.lp4oij h2 { max-width: 30em; }
.lp4oij > .i0q34z > p, .jhi0di > p { max-width: 46em; }
@media (min-width: 900px) { .lp4oij { padding: 72px 0; } }

.ftpxl0 { display: grid; gap: 26px; align-items: center; }
.slffo6 { margin: 0; }
.slffo6 img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .ftpxl0 { grid-template-columns: 1.2fr 1fr; gap: 52px; }
  .feature--reverse .slffo6 { order: -1; }
}
.image-band img { border-radius: var(--radius); width: 100%; }

/* ---------- cards */
.nfozj9 { display: grid; gap: 18px; margin: 22px 0 6px; }
@media (min-width: 700px) { .gtat7g, .wrv4ma { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wrv4ma { grid-template-columns: repeat(3, 1fr); } }
.q65iaq, .g1ghnc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.i9hj2a .q65iaq, .i9hj2a .g1ghnc { background: var(--white); }
.lp4oij:not(.i9hj2a) .q65iaq { background: var(--sky); border-color: var(--sky-2); }
.q65iaq h3, .g1ghnc h3 { margin-bottom: .45em; }
.q65iaq p:last-child, .g1ghnc p:last-child { margin-bottom: 0; }
.q65iaq .jms90k, .g1ghnc .jms90k { margin-top: auto; padding-top: 6px; }
.u9veuk { width: 46px; height: 46px; border: 2px solid var(--slate); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--slate); margin-bottom: 14px; }
.u9veuk svg { width: 24px; height: 24px; }
.g1ghnc { padding: 0; overflow: hidden; }
.g1ghnc > *:not(.f2rplm) { padding-left: 20px; padding-right: 20px; }
.g1ghnc h3 { padding-top: 18px; font-size: 1.08rem; }
.g1ghnc h3 a { color: var(--slate-dark); text-decoration: none; }
.g1ghnc h3 a:hover { color: var(--copper); }
.g1ghnc .jms90k { padding-bottom: 18px; }
.f2rplm img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.jms90k a { font: 700 .95rem/1.3 var(--head); text-decoration: none; }
.jms90k a:hover { text-decoration: underline; }

/* ---------- lists, rail, tables */
.checks { list-style: none; padding: 0; }
.checks li { padding-left: 26px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px; border-left: 2.5px solid var(--brass); border-bottom: 2.5px solid var(--brass); transform: rotate(-45deg); }
.nu1g2j { list-style: none; padding: 0; counter-reset: stop; margin: 22px 0 26px; }
.nu1g2j li { counter-increment: stop; position: relative; padding: 0 0 18px 46px; margin: 0; }
.nu1g2j li::before { content: counter(stop); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--slate); color: #fff; font: 800 .9rem/30px var(--head); text-align: center; }
.nu1g2j li::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--sky-2); }
.nu1g2j li:last-child::after { display: none; }
@media (min-width: 1000px) {
  .lp4oij .nu1g2j { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; }
  .lp4oij .nu1g2j li { padding: 44px 0 0; }
  .lp4oij .nu1g2j li::after { left: 34px; right: -14px; top: 14px; bottom: auto; width: auto; height: 2px; }
}
.d9y9cf { overflow-x: auto; margin: 18px 0 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: .98rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--sky-2); vertical-align: top; }
th { font: 800 .85rem/1.3 var(--head); color: var(--slate-dark); background: var(--sky); letter-spacing: .02em; }
tr:last-child td { border-bottom: 0; }

/* ---------- questions */
.kas3cs { display: grid; gap: 4px; margin-top: 14px; }
.c8mwf7 { border-top: 1px solid var(--line); padding-top: 18px; }
.c8mwf7 h3 { margin-bottom: .4em; }
.suw75l { margin-top: 14px; border-top: 1px solid var(--line); }
.suw75l details { border-bottom: 1px solid var(--line); }
.suw75l summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 700 1.08rem/1.35 var(--head); color: var(--slate-dark); }
.suw75l summary::-webkit-details-marker { display: none; }
.suw75l summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 1.5rem; color: var(--copper); }
.suw75l details[open] summary::after { content: "\2212"; }
.suw75l details > div { padding: 0 0 12px; }

/* ---------- area tiles */
.u0b2hr { font: 800 .8rem/1.3 var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--brass); margin: 18px 0 8px; }
.umaoga { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.umaoga li { margin: 0; }
.fhehq7 { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 11px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.fhehq7:hover { border-color: var(--copper); }
.y1gsa5 { font: 700 .98rem/1.25 var(--head); color: var(--slate-dark); }
.m484g1 { font-size: .82rem; color: var(--muted); }
.n1a7ju { justify-content: center; font: 700 .95rem/1.25 var(--head); color: var(--copper-dark); background: transparent; border-style: dashed; }

/* ---------- call bands: cobalt full-width; fog inline inside articles */
.smm5o3 { background: var(--copper); color: #fff; padding: 40px 0; }
.smm5o3 h2 { color: #fff; margin-bottom: .3em; }
.smm5o3 .pud5w2 { color: #F6E6DA; max-width: 44em; }
.smm5o3 .pud5w2 a { color: #fff; font-weight: 600; }
.smm5o3 .ym4tug { background: #fff; color: var(--copper-dark); }
.smm5o3 .ym4tug:hover { background: var(--sky); color: var(--slate-dark); }
.smm5o3 .i0q34z { display: grid; gap: 4px 32px; align-items: center; }
@media (min-width: 900px) { .smm5o3 .i0q34z { grid-template-columns: 1fr auto; } .smm5o3 .xcq0y4 { grid-column: 2; grid-row: 1 / span 2; } }
.vgb6pg { background: var(--sky); border-left: 4px solid var(--copper); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px; margin: 28px 0; }
.vgb6pg h2 { font-size: 1.2rem; margin-bottom: .3em; }
.vgb6pg .pud5w2 { margin-bottom: .8em; }
.ck3rv7 { margin: 18px 0; }

/* ---------- article layout (services, help pieces) */
.tyluyw { display: grid; gap: 34px; }
@media (min-width: 1000px) {
  .tyluyw { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
  .us6xdg { grid-template-columns: 1fr 1fr; }
}
.c4ywo4 { min-width: 0; }
.c4ywo4 h2 { margin-top: 1.5em; }
.c4ywo4 > h2:first-child, .v4owzs + h2 { margin-top: 0; }
.v4owzs { margin: 0 0 26px; }
.v4owzs img { border-radius: var(--radius); width: 100%; }
.ph2luq { background: var(--sky); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.ph2luq h3 { font-size: 1.12rem; }
.ph2luq .xcq0y4 { width: 100%; justify-content: center; }
@media (min-width: 1000px) { .ph2luq { position: sticky; top: 100px; } }
.ohu9d3 { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--slate); border-radius: 0 0 var(--radius) var(--radius); padding: 22px; }
.ohu9d3 h2 { font-size: 1.2rem; }

/* ---------- footer */
.y2a8f3 { background: var(--slate-dark); color: #CBD8E2; padding: 52px 0 96px; font-size: .95rem; }
.y2a8f3 a { color: #fff; text-decoration: none; }
.y2a8f3 a:hover { text-decoration: underline; }
.c6emjb { display: grid; gap: 30px; }
@media (min-width: 760px) { .c6emjb { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.y2a8f3 h3 { color: var(--sky-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; }
.y2a8f3 ul { list-style: none; padding: 0; margin: 0; }
.y2a8f3 li { margin-bottom: 6px; }
.wz9t0c .qmx3wk { color: #fff; margin-bottom: 12px; }
.wz9t0c .v1yry9 span { color: #A9B9C7; }
.wz9t0c address { font-style: normal; margin: 12px 0 16px; line-height: 1.6; }
.wz9t0c .ym4tug { color: #fff; }
.svlaor { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 34px; padding-top: 20px; font-size: .85rem; color: #A9B9C7; }
.bzxxys { font: 600 .82rem/1.5 var(--head); color: #A9B9C7; }
@media (min-width: 980px) { .y2a8f3 { padding-bottom: 40px; } }

/* ---------- bottom call bar: phones only, never on iOS (Safari's floating toolbar sits over fixed bottom bars) */
.qp0x06 { display: none; }
@supports not (-webkit-touch-callout: none) {
  @media (max-width: 979px) {
    .qp0x06 { display: flex; flex-direction: column; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--copper); color: #fff; text-decoration: none; padding: 9px 16px 10px; box-shadow: 0 -6px 18px rgba(8, 52, 63, .2); }
    .di1dl1 { display: inline-flex; align-items: center; gap: 8px; font: 800 1.05rem/1.2 var(--head); }
    .di1dl1 svg { width: 18px; height: 18px; }
    .ldt9au { font-size: .78rem; opacity: .9; }
  }
}

@media (max-width: 520px) {
  /* Logo, Call and menu must share one row: the name wraps to two lines and the subline drops. */
  .irn2du { flex-wrap: wrap; gap: 8px; }
  .qmx3wk { gap: 8px; }
  .qmx3wk svg { width: 34px; height: 34px; }
  .v1yry9 b { font-size: .95rem; max-width: 7.6em; line-height: 1.12; }
  .l6zk85 .v1yry9 span { display: none; }
  .axm20n { padding: .6em .8em; }
}
@media (max-width: 420px) {
  .qyyftw { display: none; }
  .a8q23z { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .l6zk85, .u6pk2m, .qp0x06, .ph2luq { display: none; } }

/* ================= Edison layer ================= */
body { background: var(--cream); font-size: 1.02rem; line-height: 1.65; }
h1, h2 { color: var(--slate-dark); font-weight: 700; }
h3 { color: var(--slate); font-weight: 600; }
a { color: var(--copper-dark); }
a:hover { color: var(--slate); }
li::marker { color: var(--copper); }
:focus-visible { outline-color: var(--copper); }

/* Every call button: copper with white text */
.ym4tug { background: var(--copper); border: 2px solid var(--copper); color: #fff; }
.ym4tug:hover { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; }

/* Header pill call, squared off */
.fm680l, .apbeco .fm680l { border-radius: 4px; padding: .55em 1.05em; font-weight: 600; letter-spacing: .01em; }

/* Story hero: cream text column, white "Roof age check" card with a copper top rule */
.jlqywv { background: var(--cream); }
.ppbsy4 { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--copper); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(30, 42, 54, .08); }
.ppbsy4 h2 { color: var(--slate-dark); }
.ppbsy4 li::marker { color: var(--copper); }
.spvl40 h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: .35em; background: var(--copper); }

/* Cards: white, line border, copper top rule */
.q65iaq, .g1ghnc { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--copper); border-radius: var(--radius); box-shadow: none; }

/* Steps: copper numerals in a slate outline circle */
.nu1g2j li::before { color: var(--copper); background: transparent; border: 2px solid var(--slate); border-radius: 50%; }

/* Tables: sky header, slate header text, cream zebra */
table { border-collapse: collapse; width: 100%; background: var(--white); }
th { background: var(--sky); color: var(--slate-dark); text-align: left; font-family: var(--head); font-weight: 600; }
th, td { padding: .6em .75em; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--cream); }

/* Alternate sections in pale sky */
.i9hj2a { background: var(--sky); }

/* Call bands in copper */
.cta-band, .band { background: var(--copper-dark); }

/* Footer on slate */
.y2a8f3 { background: var(--slate-dark); color: #E9EEF2; }
.y2a8f3 a { color: #E9EEF2; }
.y2a8f3 a:hover { color: #fff; }
.y2a8f3 h3 { color: #fff; }

/* Desktop nav labels stay on one line */
@media (min-width: 980px) {
  .apbeco a, .apbeco button { white-space: nowrap; }
}