/* Assured Contracting — roofing service pages (FANIK, Nov 2026).
   Loaded after roofing-home.css only by the service pages that use layouts/roofing. Adds the few blocks the home doesn't have. */

/* hero without form: copy + real job photo */
.page-hero .wrap{grid-template-columns:1fr}
@media (min-width:980px){.page-hero .wrap{grid-template-columns:1.1fr .9fr}}
.hero-img{width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.crumbs{font-size:14px;color:var(--on-dark-2)}
.crumbs a{color:var(--on-dark-2);text-decoration:none}
.crumbs a:hover{color:var(--on-dark);text-decoration:underline}

/* text blocks */
.prose{display:flex;flex-direction:column;gap:16px;min-width:0}
.prose p{color:var(--ink-2);max-width:68ch}
.prose p b{color:var(--ink)}
.strong{font-weight:700;color:var(--ink)!important}
.dark .strong{color:var(--on-dark)!important}
.note{margin-top:28px;color:var(--ink-2);max-width:80ch}
.note b{color:var(--ink)}
.small{font-size:14px;color:var(--on-dark-2)}
.svc a, .prose a.more{font-weight:700;color:var(--sky-ink);text-decoration:none;white-space:nowrap}
.svc a:hover, .prose a.more:hover{text-decoration:underline}

/* lists in columns */
.ticks.cols-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 28px}

/* residential / commercial */
.two-col{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr}}
.panel{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:16px;min-width:0}
.panel h2{font-size:clamp(24px,2.6vw,32px)}
.panel p{color:var(--ink-2)}
.panel.dark{background:var(--slate);border-color:var(--slate);color:var(--on-dark)}
.panel.dark p{color:var(--on-dark-2)}
.panel.dark b{color:var(--on-dark)}
.panel.dark .ticks li::before{border-color:var(--sky)}

/* short financing band */
.fin-mini{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:900px){.fin-mini{grid-template-columns:.8fr 1.2fr;align-items:start}}
.fin-mini > div:first-child{display:flex;flex-direction:column;gap:12px}

/* free estimate band with the form */
.quote-band .wrap{display:grid;gap:40px;grid-template-columns:1fr}
@media (min-width:980px){.quote-band .wrap{grid-template-columns:1.1fr .9fr;align-items:start}}
.quote-band h2{font-size:clamp(30px,4vw,44px)}
.quote-band .quote h2{font-size:28px}
.contact-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;color:var(--on-dark)}
.contact-lines a{text-decoration:none;font-weight:700}
.contact-lines a:hover{text-decoration:underline}

/* 6 cards = 2 clean rows of 3 */
.svc-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* the page already ends with the form band, so hide the generic "Ready for a roof" band from the footer */
body:has(.quote-band) section.final{display:none}
/* 8 short cards = 2 rows of 4 */
.svc-grid.compact{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.svc-grid.compact h3{font-size:20px}
/* photo gallery (portrait job photos 3:4) */
.gallery{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.gallery img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px;display:block}
.gallery figcaption{font-size:14.5px;font-weight:600;color:var(--ink)}
/* panels on a powder band stay white */
.band-powder .panel:not(.dark){background:var(--white)}
/* 4 portrait photos in one row */
@media (min-width:900px){.gallery.g4{grid-template-columns:repeat(4,1fr)}}
.note a{font-weight:700;color:var(--sky-ink);text-decoration:none}
.note a:hover{text-decoration:underline}
/* storm page */
.hvhz-light{background:var(--powder);border-left:4px solid var(--cta);border-radius:6px;padding:16px 18px;font-size:15px;color:var(--ink-2)!important}
.hvhz-light b{color:var(--ink)}
h2.area-sub{font-size:18px;letter-spacing:1px;color:var(--sky-ink);margin-bottom:12px}
/* comparison table (impact windows / doors) */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.cmp{width:100%;border-collapse:collapse;min-width:560px;font-size:15.5px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{background:var(--slate);color:var(--on-dark);font-size:13px;letter-spacing:1.5px;text-transform:uppercase}
.cmp tbody th{font-weight:700;color:var(--ink);width:26%}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.yes{color:var(--ink)}
.cmp td.yes::before{content:"✓ ";color:#1E7F4F;font-weight:700}
.cmp td.no{color:var(--ink-2)}
.cmp td.no::before{content:"✕ ";color:#B42318;font-weight:700}
.panel a.more{font-weight:700;color:var(--sky-ink);text-decoration:none}
.panel.dark a.more,.panel.dark a{color:var(--sky)}
.panel a.more:hover{text-decoration:underline}
/* landscape product photos above a card grid */
.gallery.land{grid-template-columns:1fr;margin-bottom:24px}
@media (min-width:700px){.gallery.land{grid-template-columns:1fr 1fr}}
.gallery.land img{aspect-ratio:3/2}
/* Our Work (projects) */
.work-hero h1{font-size:clamp(34px,4.6vw,56px)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter{font:600 15px var(--body);background:var(--white);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.filter:hover{border-color:var(--sky-ink);color:var(--sky-ink)}
.filter.on{background:var(--slate);border-color:var(--slate);color:var(--on-dark)}
.projects{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:900px){.projects{grid-template-columns:1fr 1fr}}
.project{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.project[hidden]{display:none}
.project-photos{display:grid;gap:4px;background:var(--line)}
.project-photos.n1{grid-template-columns:1fr}
.project-photos.n2{grid-template-columns:1fr 1fr}
.project-photos.n3{grid-template-columns:1fr 1fr 1fr}
.project-photos figure{margin:0;position:relative;min-width:0}
.project-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.project-photos.n1 img{aspect-ratio:16/9}
.project-photos.n3 img{aspect-ratio:3/4}
.project-photos span{position:absolute;left:8px;top:8px;background:rgba(22,35,45,.86);color:#F4F7F9;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px}
.project-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.project-tag{font-size:12.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sky-ink)}
.project-body h3{font-size:22px}
.project-body p{color:var(--ink-2)}
.project-body a.more{margin-top:auto;font-weight:700;color:var(--sky-ink);text-decoration:none}
.project-body a.more:hover{text-decoration:underline}
/* About */
.about-svc{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:900px){.about-svc{grid-template-columns:1fr 1fr}}
.about-svc .chips{margin-top:4px}
.team{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.team{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.team{grid-template-columns:repeat(5,1fr)}}
.team figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.team img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:10px;display:block;background:var(--white)}
.team figcaption{font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink)}
/* Legal pages (privacy, terms, ADA) */
.legal-hero .wrap{padding-block:clamp(36px,5vw,64px)}
.legal-hero h1{font-size:clamp(32px,4.4vw,52px)}
.legal-doc{max-width:800px;display:flex;flex-direction:column;gap:14px;color:var(--ink-2)}
.legal-doc h3{font-size:24px;color:var(--ink);margin-top:20px}
.legal-doc h4{font-size:17px;font-family:var(--body);font-weight:700;color:var(--ink);margin:8px 0 0}
.legal-doc ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal-doc strong,.legal-doc b{color:var(--ink)}
.legal-doc a{color:var(--sky-ink);font-weight:600}
.legal-contact{list-style:none;padding:20px 22px!important;background:var(--powder);border-radius:10px}
/* Contact */
.contact-hero .wrap{display:grid;gap:40px;padding-block:clamp(40px,6vw,72px);grid-template-columns:1fr}
@media (min-width:980px){.contact-hero .wrap{grid-template-columns:1.1fr .9fr;align-items:start}}
.contact-hero h1{font-size:clamp(36px,5vw,60px);text-transform:uppercase}
.contact-hero h1 em{font-style:normal;color:var(--sky)}
.contact-cards{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:600px){.contact-cards{grid-template-columns:1fr 1fr}}
.contact-card{display:flex;flex-direction:column;gap:4px;background:var(--slate-2);border-radius:10px;padding:18px 20px;text-decoration:none;color:var(--on-dark);min-width:0}
a.contact-card:hover{outline:2px solid var(--sky)}
.contact-card small{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sky)}
.contact-card b{font-size:18px;overflow-wrap:anywhere}
.contact-card span{font-size:14px;color:var(--on-dark-2)}
.contact-card span a{color:var(--on-dark);font-weight:600}
.next-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr;counter-reset:n}
@media (min-width:800px){.next-steps{grid-template-columns:repeat(3,1fr)}}
.next-steps li{counter-increment:n;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:22px 22px 22px 64px;position:relative;display:flex;flex-direction:column;gap:4px}
.next-steps li::before{content:counter(n);position:absolute;left:20px;top:16px;font-family:var(--display);font-size:32px;color:var(--sky-ink);line-height:1}
.next-steps span{color:var(--ink-2);font-size:15px}
.map-band{line-height:0}
/* Gallery */
.g-grid{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.g-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.g-grid{grid-template-columns:repeat(4,1fr)}}
.g-item{display:block;border-radius:8px;overflow:hidden;background:var(--line)}
.g-item[hidden]{display:none}
.g-item img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .2s ease}
.g-item:hover img{transform:scale(1.03)}
.lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
.lightbox::backdrop{background:rgba(10,18,24,.92)}
.lightbox img{max-width:92vw;max-height:88vh;display:block;border-radius:6px}
.lightbox button{position:fixed;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:48px;height:48px;font-size:30px;line-height:1;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.25)}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}