/* =========================================================
   Brooklyn Rolling Gate: Service Pages
   Shared building blocks first, then one block per page.
   Each page sets a body class (pg-install, pg-repair, ...)
   ========================================================= */

/* ---------- Header dropdown (all pages) ---------- */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop > a i { font-size: 12px; margin-left: 5px; transition: transform .2s; }
.nav-drop:hover > a i, .nav-drop:focus-within > a i { transform: rotate(180deg); }
.nav-sub {
  position: absolute; top: 100%; left: -22px; min-width: 300px; z-index: 50;
  background: var(--white); border-top: 3px solid var(--green); box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
  padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility .2s;
}
.nav-drop:hover .nav-sub, .nav-drop:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.main-nav .nav-sub a { display: block; padding: 10px 24px; font-size: 17px; font-weight: 600; white-space: nowrap; }
.main-nav .nav-sub a::after { display: none; }
.main-nav .nav-sub a:hover, .main-nav .nav-sub a.current { background: #eef6f0; color: var(--green-dark); }

@media (max-width: 1024px) {
  .main-nav.open { max-height: calc(100vh - 70px); overflow-y: auto; }
  .nav-drop { display: block; }
  .nav-drop > a i { display: none; }
  .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; min-width: 0; background: #f6f8f7; }
  .main-nav .nav-sub a { padding: 12px 30px 12px 48px; font-size: 16px; font-weight: 500; white-space: normal; }
}

/* ---------- Shared ---------- */
.svc main { overflow: hidden; }
.svc .container { max-width: 1320px; }
.sec { padding: 90px 0; }
.sec-tight { padding: 60px 0; }
.sec-head { max-width: 780px; margin-bottom: 44px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2, .svc h2.h2 { font-size: clamp(32px, 3.3vw, 48px); font-weight: 800; line-height: 1.08; margin-bottom: 14px; }
.sec-head p { font-size: 18px; line-height: 1.6; color: #333; margin: 0; }
.prose p { font-size: 16.5px; line-height: 1.75; color: #2b302e; margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .55; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-dark { background: var(--dark); color: var(--white); }
.btn-dark:hover { background: #000; }
.btn-line { border-color: var(--dark); color: var(--dark); }
.btn-line:hover { background: var(--dark); color: var(--white); }
.svc .btn { font-size: 19px; padding: 17px 28px; }
.img-frame { position: relative; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.note { font-size: 14px; line-height: 1.6; color: #5a625e; margin-top: 22px; }
.ico { display: inline-grid; place-items: center; flex-shrink: 0; }

/* Data tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--white); }
.data-table th { background: var(--dark); color: var(--white); text-align: left; font-family: var(--head); font-size: 17px; letter-spacing: .3px; padding: 15px 20px; }
.data-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.data-table tr:nth-child(even) td { background: #f6f8f7; }
.data-table td:first-child { font-weight: 700; color: var(--dark); width: 38%; }
.table-wrap { overflow-x: auto; border-radius: 6px; box-shadow: var(--shadow); }

/* FAQ (shared mechanics; homepage accordion script) */
.svc-faq .faq-item { border-bottom: 1px solid var(--border); }
.svc-faq .faq-item h3 { font-family: var(--head); font-size: 20px; font-weight: 700; }
.svc-faq .faq-item button { padding: 20px 0; font-size: 20px; gap: 20px; }
.svc-faq .faq-item button i { font-size: 16px; color: var(--green-dark); }
.svc-faq .faq-answer p { font-size: 16px; line-height: 1.7; color: #3a403d; padding: 0 40px 20px 0; }

/* Cost: shared */
.cost-note { font-size: 14px; line-height: 1.6; color: #59615d; margin-top: 22px; }
.factors h3 { font-size: 26px; margin-bottom: 18px; }
.factors ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; }
.factors li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: #2b302e; }
.factors li i { color: var(--green); margin-top: 4px; }
.price { display: block; font-family: var(--head); font-weight: 800; font-size: 36px; line-height: 1.1; color: var(--green-dark); white-space: nowrap; }
.price.quote { font-size: 24px; color: var(--dark); white-space: normal; }
.price-label { display: block; font-size: 13px; color: #6a726e; margin-top: 4px; }

/* CTA band */
.svc-cta { position: relative; padding: 80px 0; color: var(--white); background: linear-gradient(110deg, #0e1412 0%, #111a17 50%, #0f5a2e 100%); overflow: hidden; }
.svc-cta::after { content: ""; position: absolute; right: -80px; top: -80px; width: 380px; height: 380px; border: 40px solid rgba(39, 181, 82, .14); border-radius: 50%; }
.svc-cta .container { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.svc-cta h2 { font-size: clamp(32px, 3.2vw, 46px); font-weight: 800; margin-bottom: 12px; }
.svc-cta p { font-size: 18px; line-height: 1.6; color: #dfe7e3; max-width: 720px; margin: 0; }
.svc-cta .btn-outline { border-color: #fff; }

/* Shared responsive */
@media (max-width: 1024px) {
  .sec { padding: 70px 0; }
  .factors ul { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sec { padding: 56px 0; }
  .sec-head p { font-size: 17px; }
  .svc .btn { font-size: 17px; padding: 15px 22px; }
  .svc .btn-row .btn { flex: 1 1 100%; }
  .data-table { font-size: 15px; }
  .data-table th, .data-table td { padding: 12px 14px; }
  .svc-faq .faq-item button { font-size: 18px; }
  .svc-faq .faq-answer p { padding-right: 0; }
}

/* =========================================================
   1. INSTALLATION: clean split hero, numbered cards,
      horizontal timeline, tiered pricing
   ========================================================= */
.pg-install .hero-split { background: linear-gradient(180deg, #f3f6f4 0%, #fff 100%); padding: 70px 0 90px; }
.pg-install .hero-split .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.pg-install .hero-split h1 { font-size: clamp(40px, 4.2vw, 62px); font-weight: 800; line-height: 1.03; margin-bottom: 22px; }
.pg-install .hero-split h1 span { color: var(--green-dark); }
.pg-install .hero-split .lead { font-size: 19px; line-height: 1.65; color: #333; margin-bottom: 30px; }
.pg-install .hero-img { position: relative; }
.pg-install .hero-img::before { content: ""; position: absolute; inset: 26px -26px -26px 26px; background: var(--green); border-radius: 4px; }
.pg-install .hero-img img { position: relative; border-radius: 4px; box-shadow: 0 24px 50px rgba(0, 0, 0, .2); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.pg-install .hero-badge { position: absolute; left: -30px; bottom: 30px; background: var(--dark); color: var(--white); padding: 16px 22px; display: flex; gap: 14px; align-items: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.pg-install .hero-badge i { font-size: 30px; color: var(--green-light); }
.pg-install .hero-badge strong { display: block; font-family: var(--head); font-size: 19px; }
.pg-install .hero-badge span { font-size: 14px; color: #cfd8d3; }
.pg-install .intro-cols { columns: 2; column-gap: 60px; }
.pg-install .intro-cols p { break-inside: avoid; }
.pg-install .intro-cols p:first-child::first-letter { float: left; font-family: var(--head); font-weight: 800; font-size: 64px; line-height: .85; color: var(--green-dark); margin: 6px 10px 0 0; }
.pg-install .band { position: relative; height: 380px; }
.pg-install .band img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pg-install .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 16, 14, .85) 0%, rgba(10, 16, 14, .2) 65%); }
.pg-install .band .container { position: absolute; inset: 0; display: flex; align-items: center; z-index: 2; color: var(--white); }
.pg-install .band p { font-family: var(--head); font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.2; max-width: 560px; margin: 0; }
.pg-install .num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pg-install .num-card { position: relative; background: var(--white); border: 1px solid var(--border); padding: 34px 34px 30px 100px; border-radius: 4px; transition: box-shadow .25s, border-color .25s; }
.pg-install .num-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .1); border-color: transparent; }
.pg-install .num-card .n { position: absolute; left: 30px; top: 32px; font-family: var(--head); font-weight: 800; font-size: 40px; line-height: 1; color: var(--green); }
.pg-install .num-card h3 { font-size: 25px; margin-bottom: 12px; }
.pg-install .num-card .prose p { font-size: 15.5px; }
.pg-install .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 30px; counter-reset: s; }
.pg-install .timeline li { position: relative; padding-top: 74px; }
.pg-install .timeline li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 54px; height: 54px; border-radius: 50%; background: var(--green-dark); color: var(--white); font-family: var(--head); font-weight: 800; font-size: 24px; display: grid; place-items: center; box-shadow: 0 0 0 8px #e3f2e7; z-index: 2; }
.pg-install .timeline li::after { content: ""; position: absolute; top: 26px; left: 60px; right: -30px; height: 2px; background: repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 14px); }
.pg-install .timeline li:nth-child(4n)::after, .pg-install .timeline li:last-child::after { display: none; }
.pg-install .timeline h3 { font-size: 22px; margin-bottom: 8px; }
.pg-install .timeline p { font-size: 15.5px; line-height: 1.6; color: #3a403d; margin: 0; }
.pg-install .process { background: #f3f6f4; }
.pg-install .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.pg-install .tier { background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 40px 34px; text-align: center; }
.pg-install .tier i { font-size: 40px; color: var(--green-dark); }
.pg-install .tier h3 { font-size: 26px; margin: 16px 0 8px; }
.pg-install .tier p { font-size: 15.5px; color: #4a514e; min-height: 48px; }
.pg-install .tier.featured { background: var(--dark); color: var(--white); border-color: var(--dark); transform: translateY(-16px); box-shadow: 0 24px 50px rgba(0, 0, 0, .22); }
.pg-install .tier.featured i, .pg-install .tier.featured .price { color: var(--green-light); }
.pg-install .tier.featured p, .pg-install .tier.featured .price-label { color: #c9d3ce; }
.pg-install .factors { margin-top: 56px; display: grid; grid-template-columns: 300px 1fr; gap: 50px; padding-top: 44px; border-top: 1px solid var(--border); }
.pg-install .faq-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: start; }
.pg-install .faq-split .img-frame img { aspect-ratio: 4 / 5; border-radius: 4px; }
.pg-install .faq-split .img-frame { position: sticky; top: 130px; }

@media (max-width: 1024px) {
  .pg-install .hero-split .container, .pg-install .faq-split { grid-template-columns: 1fr; gap: 50px; }
  .pg-install .hero-badge { left: 10px; }
  .pg-install .num-grid { grid-template-columns: 1fr; }
  .pg-install .timeline { grid-template-columns: 1fr 1fr; }
  .pg-install .timeline li::after { display: none; }
  .pg-install .tiers { grid-template-columns: 1fr; }
  .pg-install .tier.featured { transform: none; }
  .pg-install .factors { grid-template-columns: 1fr; gap: 10px; }
  .pg-install .faq-split .img-frame { position: static; }
  .pg-install .faq-split .img-frame img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .pg-install .hero-split { padding: 44px 0 70px; }
  .pg-install .intro-cols { columns: 1; }
  .pg-install .band { height: 300px; }
  .pg-install .num-card { padding: 80px 22px 24px; }
  .pg-install .num-card .n { left: 22px; top: 24px; }
  .pg-install .timeline { grid-template-columns: 1fr; }
  .pg-install .hero-img::before { inset: 14px -10px -14px 14px; }
}

/* =========================================================
   2. REPAIR: full-bleed photo hero, emergency strip,
      problem-card grid, dark price list
   ========================================================= */
.pg-repair .hero-bleed { position: relative; min-height: 560px; display: flex; align-items: center; color: var(--white); padding: 80px 0; }
.pg-repair .hero-bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.pg-repair .hero-bleed::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 13, 12, .94) 0%, rgba(9, 13, 12, .78) 48%, rgba(9, 13, 12, .25) 100%); }
.pg-repair .hero-bleed .container { position: relative; z-index: 2; }
.pg-repair .hero-bleed .crumbs { color: #cfd8d3; }
.pg-repair .hero-bleed h1 { font-size: clamp(38px, 4vw, 60px); font-weight: 800; line-height: 1.04; max-width: 780px; margin-bottom: 22px; }
.pg-repair .hero-bleed .lead { font-size: 19px; line-height: 1.65; color: #e6ece9; max-width: 640px; margin-bottom: 30px; }
.pg-repair .alert { background: var(--green-btn); color: var(--white); }
.pg-repair .alert .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.pg-repair .alert p { margin: 0; font-family: var(--head); font-size: 22px; font-weight: 700; display: flex; gap: 14px; align-items: center; }
.pg-repair .alert p i { font-size: 26px; }
.pg-repair .alert a { font-family: var(--head); font-weight: 800; font-size: 26px; display: inline-flex; gap: 10px; align-items: center; border-bottom: 2px solid rgba(255, 255, 255, .6); }
.pg-repair .intro-center { max-width: 860px; margin: 0 auto; text-align: center; }
.pg-repair .intro-center p { font-size: 18px; }
.pg-repair .problems { background: #f4f6f5; }
.pg-repair .p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pg-repair .p-card { background: var(--white); padding: 28px 26px; border-radius: 4px; border-left: 4px solid transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); transition: border-color .2s, box-shadow .2s; }
.pg-repair .p-card:hover { border-left-color: var(--green); box-shadow: 0 12px 28px rgba(0, 0, 0, .1); }
.pg-repair .p-card .ico { width: 50px; height: 50px; border-radius: 4px; background: var(--dark); color: var(--green-light); font-size: 21px; margin-bottom: 16px; }
.pg-repair .p-card h3 { font-size: 22px; margin-bottom: 10px; }
.pg-repair .p-card .prose p { font-size: 15px; line-height: 1.65; }
.pg-repair .p-card.warn .ico { background: #b3261e; color: var(--white); }
.pg-repair .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.pg-repair .split .img-frame img { border-radius: 4px; aspect-ratio: 4 / 3.4; }
.pg-repair .steps-v { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; }
.pg-repair .vlist { counter-reset: v; position: relative; }
.pg-repair .vlist::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.pg-repair .vlist li { position: relative; padding: 0 0 34px 82px; }
.pg-repair .vlist li::before { counter-increment: v; content: counter(v); position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 4px; background: var(--white); border: 2px solid var(--green); color: var(--green-dark); font-family: var(--head); font-weight: 800; font-size: 22px; display: grid; place-items: center; }
.pg-repair .vlist h3 { font-size: 23px; margin: 4px 0 6px; }
.pg-repair .vlist p { font-size: 16px; line-height: 1.6; color: #3a403d; margin: 0; }
.pg-repair .steps-v .img-frame { position: sticky; top: 130px; }
.pg-repair .steps-v .img-frame img { border-radius: 4px; aspect-ratio: 4 / 4.6; }
.pg-repair .cost-dark { background: var(--dark); color: var(--white); }
.pg-repair .cost-dark .sec-head p { color: #c9d3ce; }
.pg-repair .rows { border-top: 1px solid rgba(255, 255, 255, .14); }
.pg-repair .row { display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pg-repair .row .ico { width: 56px; height: 56px; border-radius: 50%; background: rgba(39, 181, 82, .14); color: var(--green-light); font-size: 22px; }
.pg-repair .row h3 { font-size: 23px; margin-bottom: 4px; }
.pg-repair .row p { margin: 0; color: #c9d3ce; font-size: 15.5px; }
.pg-repair .row .price { color: var(--green-light); text-align: right; }
.pg-repair .row .price.quote { color: var(--white); }
.pg-repair .row .price-label { color: #9fb0a8; text-align: right; }
.pg-repair .cost-dark .factors { margin-top: 46px; background: rgba(255, 255, 255, .05); padding: 34px; border-radius: 6px; }
.pg-repair .cost-dark .factors li { color: #dfe7e3; }
.pg-repair .cost-dark .cost-note { color: #9fb0a8; }
.pg-repair .faq-c { background: #eef6f0; }
.pg-repair .faq-c .svc-faq { max-width: 900px; margin: 0 auto; background: var(--white); padding: 14px 40px; border-radius: 6px; box-shadow: var(--shadow); }
.pg-repair .faq-c .faq-item:last-child { border-bottom: 0; }

@media (max-width: 1024px) {
  .pg-repair .p-grid { grid-template-columns: 1fr 1fr; }
  .pg-repair .split, .pg-repair .steps-v { grid-template-columns: 1fr; gap: 40px; }
  .pg-repair .steps-v .img-frame { position: static; }
  .pg-repair .steps-v .img-frame img { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .pg-repair .hero-bleed { min-height: 0; padding: 60px 0; }
  .pg-repair .hero-bleed::before { background: rgba(9, 13, 12, .82); }
  .pg-repair .p-grid { grid-template-columns: 1fr; }
  .pg-repair .alert p { font-size: 19px; }
  .pg-repair .alert a { font-size: 22px; }
  .pg-repair .row { grid-template-columns: 48px 1fr; }
  .pg-repair .row .ico { width: 46px; height: 46px; }
  .pg-repair .row > div:last-child { grid-column: 2; }
  .pg-repair .row .price, .pg-repair .row .price-label { text-align: left; }
  .pg-repair .faq-c .svc-faq { padding: 6px 20px; }
}

/* =========================================================
   3. MAINTENANCE: centered hero with wide photo, sticky
      table of contents, checklist, zigzag process
   ========================================================= */
.pg-maint .hero-center { background: radial-gradient(ellipse at 50% 0%, #e2f1e6 0%, #f5f8f6 60%); padding: 64px 0 0; text-align: center; }
.pg-maint .hero-center .crumbs { justify-content: center; }
.pg-maint .hero-center h1 { font-size: clamp(36px, 3.8vw, 56px); font-weight: 800; line-height: 1.06; max-width: 980px; margin: 0 auto 20px; }
.pg-maint .hero-center .lead { font-size: 19px; line-height: 1.65; color: #333; max-width: 820px; margin: 0 auto 30px; }
.pg-maint .hero-center .btn-row { justify-content: center; }
.pg-maint .wide-img { max-width: 1120px; margin: 56px auto -120px; position: relative; z-index: 2; }
.pg-maint .wide-img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, .22); }
.pg-maint .after-hero { padding-top: 200px; }
.pg-maint .doc { display: grid; grid-template-columns: 280px 1fr; gap: 70px; align-items: start; }
.pg-maint .toc { position: sticky; top: 130px; background: #f5f8f6; border-radius: 8px; padding: 26px 24px; }
.pg-maint .toc h2 { font-size: 20px; margin-bottom: 14px; }
.pg-maint .toc a { display: block; font-size: 14.5px; padding: 7px 0 7px 14px; border-left: 2px solid var(--border); color: #3a403d; transition: color .2s, border-color .2s; }
.pg-maint .toc a:hover { color: var(--green-dark); border-left-color: var(--green); }
.pg-maint .doc-intro { font-size: 18px; margin-bottom: 40px; }
.pg-maint .doc-sec { display: grid; grid-template-columns: 58px 1fr; gap: 22px; padding: 34px 0; border-top: 1px solid var(--border); scroll-margin-top: 120px; }
.pg-maint .doc-sec .ico { width: 58px; height: 58px; border-radius: 50%; background: #e3f2e7; color: var(--green-dark); font-size: 23px; }
.pg-maint .doc-sec h3 { font-size: 26px; margin: 10px 0 12px; }
.pg-maint .doc-photo { margin: 10px 0 34px; }
.pg-maint .doc-photo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 8px; }
.pg-maint .doc-photo figcaption { font-size: 14px; color: #5a625e; margin-top: 10px; }
.pg-maint .check-wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 50px; align-items: stretch; }
.pg-maint .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pg-maint .check { display: flex; gap: 14px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 18px; }
.pg-maint .check i { color: var(--white); background: var(--green); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.pg-maint .check strong { display: block; font-family: var(--head); font-size: 19px; }
.pg-maint .check span { font-size: 14.5px; color: #4a514e; }
.pg-maint .check-wrap .img-frame img { border-radius: 8px; height: 100%; min-height: 420px; }
.pg-maint .checklist { background: #f5f8f6; }
.pg-maint .zig { position: relative; max-width: 1000px; margin: 0 auto; }
.pg-maint .zig::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #cfe5d6; transform: translateX(-50%); }
.pg-maint .zig li { position: relative; width: 50%; padding: 0 56px 40px 0; text-align: right; }
.pg-maint .zig li:nth-child(even) { margin-left: 50%; padding: 0 0 40px 56px; text-align: left; }
.pg-maint .zig li .dot { position: absolute; top: 0; right: -24px; width: 48px; height: 48px; border-radius: 50%; background: var(--green-dark); color: var(--white); font-family: var(--head); font-weight: 800; font-size: 20px; display: grid; place-items: center; box-shadow: 0 0 0 6px #fff; }
.pg-maint .zig li:nth-child(even) .dot { right: auto; left: -24px; }
.pg-maint .zig h3 { font-size: 23px; margin: 8px 0 6px; }
.pg-maint .zig p { margin: 0; font-size: 16px; line-height: 1.6; color: #3a403d; }
.pg-maint .spot { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; }
.pg-maint .spot-main { background: linear-gradient(150deg, #0f1c16, #0e4c27); color: var(--white); border-radius: 10px; padding: 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.pg-maint .spot-main h3 { font-size: 30px; }
.pg-maint .spot-main p { color: #d4ddd8; font-size: 16.5px; line-height: 1.6; }
.pg-maint .spot-main .price { font-size: 56px; color: var(--green-light); }
.pg-maint .spot-main .price-label { color: #b9c6c0; font-size: 14px; }
.pg-maint .spot-side { display: grid; gap: 26px; }
.pg-maint .spot-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 30px; display: flex; gap: 20px; }
.pg-maint .spot-card .ico { width: 54px; height: 54px; border-radius: 10px; background: #e3f2e7; color: var(--green-dark); font-size: 22px; }
.pg-maint .spot-card h3 { font-size: 22px; margin-bottom: 6px; }
.pg-maint .spot-card p { font-size: 15px; color: #4a514e; margin-bottom: 10px; }
.pg-maint .spot-card .price { font-size: 24px; }
.pg-maint .factors { margin-top: 40px; }
.pg-maint .faq-boxes { background: #f5f8f6; }
.pg-maint .faq-boxes .svc-faq { max-width: 960px; margin: 0 auto; display: grid; gap: 14px; }
.pg-maint .faq-boxes .faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 0 26px; }
.pg-maint .faq-boxes .faq-item.open { border-color: var(--green); box-shadow: 0 10px 26px rgba(0, 0, 0, .07); }

@media (max-width: 1024px) {
  .pg-maint .doc { grid-template-columns: 1fr; gap: 30px; }
  .pg-maint .toc { position: static; columns: 2; }
  .pg-maint .toc h2 { column-span: all; }
  .pg-maint .check-wrap, .pg-maint .spot { grid-template-columns: 1fr; }
  .pg-maint .check-wrap .img-frame img { min-height: 0; aspect-ratio: 16 / 9; }
  .pg-maint .wide-img { margin: 40px 30px -90px; }
  .pg-maint .after-hero { padding-top: 150px; }
}
@media (max-width: 640px) {
  .pg-maint .toc { columns: 1; }
  .pg-maint .checks { grid-template-columns: 1fr; }
  .pg-maint .doc-sec { grid-template-columns: 1fr; gap: 6px; }
  .pg-maint .zig::before { left: 24px; }
  .pg-maint .zig li, .pg-maint .zig li:nth-child(even) { width: 100%; margin: 0; padding: 0 0 34px 76px; text-align: left; }
  .pg-maint .zig li .dot, .pg-maint .zig li:nth-child(even) .dot { left: 0; right: auto; }
  .pg-maint .wide-img { margin: 30px 18px -60px; }
  .pg-maint .wide-img img { aspect-ratio: 16 / 10; }
  .pg-maint .after-hero { padding-top: 110px; }
  .pg-maint .spot-main { padding: 30px; }
  .pg-maint .spot-main .price { font-size: 44px; }
}

/* =========================================================
   4. OPENER: dark green hero with photo on the left,
      icon feature rows, troubleshooting cards, green band
   ========================================================= */
.pg-opener .hero-dark { background: radial-gradient(ellipse at 80% 20%, #135e31 0%, #0e2a1b 45%, #0b1411 100%); color: var(--white); padding: 70px 0 80px; }
.pg-opener .hero-dark .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; }
.pg-opener .hero-dark .img-frame img { border-radius: 18px; aspect-ratio: 1 / 1; box-shadow: 0 0 0 10px rgba(39, 181, 82, .25), 0 30px 70px rgba(0, 0, 0, .5); }
.pg-opener .hero-dark .crumbs { color: #b9c6c0; }
.pg-opener .hero-dark h1 { font-size: clamp(36px, 3.8vw, 56px); font-weight: 800; line-height: 1.06; margin-bottom: 22px; }
.pg-opener .hero-dark .lead { font-size: 18.5px; line-height: 1.65; color: #dce5e0; margin-bottom: 30px; }
.pg-opener .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pg-opener .chips span { border: 1px solid rgba(255, 255, 255, .25); border-radius: 30px; padding: 7px 14px; font-size: 14px; color: #dce5e0; }
.pg-opener .chips i { color: var(--green-light); margin-right: 6px; }
.pg-opener .intro2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.pg-opener .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.pg-opener .feat-item { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 30px 0; border-top: 1px solid var(--border); }
.pg-opener .feat-item .ico { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(140deg, var(--green), #0f6b31); color: var(--white); font-size: 26px; box-shadow: 0 10px 20px rgba(31, 163, 74, .25); }
.pg-opener .feat-item h3 { font-size: 23px; margin: 4px 0 10px; }
.pg-opener .feat-item .prose p { font-size: 15.5px; }
.pg-opener .trouble { background: #0f1513; color: var(--white); }
.pg-opener .trouble .sec-head p { color: #b9c6c0; }
.pg-opener .trouble-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: start; }
.pg-opener .trouble-wrap .img-frame img { border-radius: 10px; aspect-ratio: 4 / 4.4; }
.pg-opener .t-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-opener .t-card { background: #18211d; border: 1px solid #25312b; border-radius: 10px; padding: 22px; }
.pg-opener .t-card h3 { font-size: 19px; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.pg-opener .t-card h3 i { color: #f5b301; margin-top: 3px; }
.pg-opener .t-card p { margin: 0; font-size: 15px; color: #c3cec8; padding-left: 26px; }
.pg-opener .t-card p::before { content: "Possible cause: "; color: var(--green-light); font-weight: 600; }
.pg-opener .band-steps { background: var(--green-btn); color: var(--white); }
.pg-opener .band-steps .sec-head p { color: #e7f5ec; }
.pg-opener .b-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; counter-reset: b; }
.pg-opener .b-steps li { background: rgba(0, 0, 0, .14); border-radius: 12px; padding: 26px 20px; position: relative; }
.pg-opener .b-steps li::before { counter-increment: b; content: "0" counter(b); font-family: var(--head); font-weight: 800; font-size: 34px; color: rgba(255, 255, 255, .5); display: block; margin-bottom: 10px; }
.pg-opener .b-steps h3 { font-size: 20px; margin-bottom: 8px; }
.pg-opener .b-steps p { font-size: 14.5px; line-height: 1.55; color: #eaf6ee; margin: 0; }
.pg-opener .price-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.pg-opener .ph-main { position: relative; overflow: hidden; border-radius: 14px; background: #0f1513; color: var(--white); padding: 50px; }
.pg-opener .ph-main::after { content: "\f013"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -40px; bottom: -60px; font-size: 260px; color: rgba(39, 181, 82, .1); }
.pg-opener .ph-main h3 { font-size: 28px; margin-bottom: 10px; position: relative; z-index: 1; }
.pg-opener .ph-main p { color: #c3cec8; max-width: 420px; position: relative; z-index: 1; }
.pg-opener .ph-main .price { font-size: 72px; color: var(--green-light); margin-top: 20px; position: relative; z-index: 1; }
.pg-opener .ph-main .price-label { color: #9fb0a8; position: relative; z-index: 1; }
.pg-opener .ph-side { display: grid; gap: 26px; }
.pg-opener .ph-card { border: 2px solid var(--border); border-radius: 14px; padding: 30px; }
.pg-opener .ph-card h3 { font-size: 22px; margin-bottom: 6px; }
.pg-opener .ph-card p { font-size: 15px; color: #4a514e; margin-bottom: 10px; }
.pg-opener .ph-card .price { font-size: 30px; }
.pg-opener .factors { margin-top: 40px; background: #f4f6f5; border-radius: 14px; padding: 36px; }
.pg-opener .faq-dark { background: linear-gradient(160deg, #0e2a1b, #0b1411); color: var(--white); }
.pg-opener .faq-dark .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.pg-opener .faq-dark .faq-item { border-bottom-color: rgba(255, 255, 255, .15); }
.pg-opener .faq-dark .faq-item button { color: var(--white); }
.pg-opener .faq-dark .faq-item button i { color: var(--green-light); }
.pg-opener .faq-dark .faq-answer p { color: #c9d3ce; }
.pg-opener .faq-dark .img-frame img { border-radius: 18px; aspect-ratio: 4 / 4.2; }

@media (max-width: 1024px) {
  .pg-opener .hero-dark .container, .pg-opener .intro2, .pg-opener .trouble-wrap, .pg-opener .price-hero, .pg-opener .faq-dark .container { grid-template-columns: 1fr; gap: 40px; }
  .pg-opener .hero-dark .img-frame img { aspect-ratio: 16 / 10; }
  .pg-opener .feat { grid-template-columns: 1fr; }
  .pg-opener .b-steps { grid-template-columns: repeat(3, 1fr); }
  .pg-opener .trouble-wrap .img-frame img, .pg-opener .faq-dark .img-frame img { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .pg-opener .t-cards { grid-template-columns: 1fr; }
  .pg-opener .b-steps { grid-template-columns: 1fr 1fr; }
  .pg-opener .ph-main { padding: 34px; }
  .pg-opener .ph-main .price { font-size: 50px; }
  .pg-opener .feat-item { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================
   5. TYPES & STYLES: photo banner with overlapping card,
      tabbed catalogue, comparison table, gallery
   ========================================================= */
.pg-types .banner { position: relative; height: 560px; }
.pg-types .banner > img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.pg-types .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%); }
.pg-types .banner-card { position: relative; z-index: 3; margin-top: -230px; }
.pg-types .banner-card .box { background: var(--white); max-width: 760px; padding: 46px 50px; border-top: 6px solid var(--green); box-shadow: 0 30px 60px rgba(0, 0, 0, .18); }
.pg-types .banner-card h1 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; line-height: 1.06; margin-bottom: 18px; }
.pg-types .banner-card .lead { font-size: 18px; line-height: 1.65; color: #333; margin-bottom: 26px; }
.pg-types .intro-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.pg-types .tabs-sec { background: #f4f6f5; }
.pg-types .tab-list { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid #d9dfdc; margin-bottom: 34px; }
.pg-types .tab-list button { font-family: var(--head); font-weight: 700; font-size: 19px; padding: 14px 24px; border: 0; background: none; cursor: pointer; color: #5a625e; border-bottom: 4px solid transparent; margin-bottom: -2px; }
.pg-types .tab-list button[aria-selected="true"] { color: var(--dark); border-bottom-color: var(--green); }
.pg-types .tab-list button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.pg-types .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pg-types .spec { background: var(--white); border-radius: 4px; padding: 30px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.pg-types .spec-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pg-types .spec-top .ico { width: 46px; height: 46px; border: 2px solid var(--green); border-radius: 50%; color: var(--green-dark); font-size: 19px; }
.pg-types .spec h3 { font-size: 24px; }
.pg-types .spec .tag { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: #e3f2e7; color: var(--green-dark); padding: 5px 10px; border-radius: 20px; }
.pg-types .spec .prose p { font-size: 15.5px; }
.pg-types .compare .data-table td:first-child { width: 24%; }
.pg-types .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pg-types .gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 4px; }
.pg-types .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.pg-types .gallery figure:hover img { transform: scale(1.04); }
.pg-types .gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 26px 22px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); color: var(--white); font-family: var(--head); font-size: 22px; font-weight: 700; }
.pg-types .outline-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; counter-reset: o; }
.pg-types .outline-steps li { border-top: 2px solid var(--dark); padding-top: 20px; }
.pg-types .outline-steps li::before { counter-increment: o; content: "0" counter(o); display: block; font-family: var(--head); font-weight: 800; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--green); margin-bottom: 14px; }
.pg-types .outline-steps h3 { font-size: 23px; margin-bottom: 8px; }
.pg-types .outline-steps p { font-size: 15.5px; line-height: 1.6; color: #3a403d; margin: 0; }
.pg-types .cost-outline { background: #f4f6f5; }
.pg-types .o-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--white); border: 2px solid var(--dark); }
.pg-types .o-card { padding: 34px 28px; border-right: 2px solid var(--dark); }
.pg-types .o-card:last-child { border-right: 0; }
.pg-types .o-card h3 { font-size: 22px; margin-bottom: 8px; }
.pg-types .o-card p { font-size: 15px; color: #4a514e; min-height: 66px; }
.pg-types .o-card .price { font-size: 30px; }
.pg-types .o-card .price.quote { font-size: 21px; }
.pg-types .factors { margin-top: 40px; }
.pg-types .faq-side { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.pg-types .faq-side .sec-head { position: sticky; top: 130px; }

@media (max-width: 1024px) {
  .pg-types .banner { height: 420px; }
  .pg-types .banner-card { margin-top: -140px; }
  .pg-types .intro-wrap, .pg-types .faq-side { grid-template-columns: 1fr; gap: 20px; }
  .pg-types .faq-side .sec-head { position: static; }
  .pg-types .o-cards { grid-template-columns: 1fr 1fr; }
  .pg-types .o-card:nth-child(2) { border-right: 0; }
  .pg-types .o-card:nth-child(-n+2) { border-bottom: 2px solid var(--dark); }
  .pg-types .outline-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pg-types .banner { height: 300px; }
  .pg-types .banner-card { margin-top: -70px; }
  .pg-types .banner-card .box { padding: 30px 22px; }
  .pg-types .spec-grid, .pg-types .gallery, .pg-types .outline-steps, .pg-types .o-cards { grid-template-columns: 1fr; }
  .pg-types .o-card { border-right: 0; border-bottom: 2px solid var(--dark); }
  .pg-types .o-card:last-child { border-bottom: 0; }
  .pg-types .tab-list button { font-size: 16px; padding: 12px 14px; }
  .pg-types .spec .tag { display: none; }
}

/* =========================================================
   6. COMMERCIAL: dark angled hero with stats, application
      tiles, sticky photo column, arrow process
   ========================================================= */
.svc .hero-angle { position: relative; background: #0f1513; color: var(--white); overflow: hidden; }
.svc .hero-angle .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; align-items: center; }
.svc .hero-angle .txt { padding: 70px 50px 70px 0; }
.svc .hero-angle .crumbs { color: #b9c6c0; }
.svc .hero-angle h1 { font-size: clamp(36px, 3.8vw, 56px); font-weight: 800; line-height: 1.05; margin-bottom: 22px; }
.svc .hero-angle .lead { font-size: 18.5px; line-height: 1.65; color: #dce5e0; margin-bottom: 30px; }
.svc .hero-angle .photo { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.svc .hero-angle .photo::before { content: ""; position: absolute; inset: 0; border-left: 14px solid var(--green); z-index: 2; clip-path: polygon(16% 0, 18.2% 0, 2.2% 100%, 0 100%); background: var(--green); }
.svc .hero-angle .photo img { width: 100%; height: 100%; object-fit: cover; }
.svc .stats { background: var(--green-btn); color: var(--white); }
.svc .stats ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.svc .stats li { display: flex; align-items: center; gap: 14px; padding: 26px 20px; border-right: 1px solid rgba(255, 255, 255, .25); font-family: var(--head); font-weight: 700; font-size: 18px; line-height: 1.25; }
.svc .stats li:last-child { border-right: 0; }
.svc .stats i { font-size: 30px; }
.pg-commercial .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--border); border: 2px solid var(--border); }
.pg-commercial .tile { background: var(--white); padding: 30px 26px; transition: background .2s; }
.pg-commercial .tile:hover { background: #0f1513; color: var(--white); }
.pg-commercial .tile:hover p { color: #c9d3ce; }
.pg-commercial .tile i { font-size: 32px; color: var(--green); margin-bottom: 14px; }
.pg-commercial .tile h3 { font-size: 21px; margin-bottom: 6px; }
.pg-commercial .tile p { margin: 0; font-size: 15px; color: #4a514e; }
.pg-commercial .cols { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.pg-commercial .cols .img-frame { position: sticky; top: 130px; }
.pg-commercial .cols .img-frame img { aspect-ratio: 3 / 4; }
.pg-commercial .cols .img-frame::after { content: ""; position: absolute; left: -18px; bottom: -18px; width: 45%; height: 45%; border-left: 6px solid var(--green); border-bottom: 6px solid var(--green); }
.pg-commercial .c-item { padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--border); }
.pg-commercial .c-item h3 { font-size: 25px; margin-bottom: 12px; display: flex; gap: 14px; align-items: center; }
.pg-commercial .c-item h3 i { color: var(--green-dark); font-size: 20px; width: 26px; }
.pg-commercial .arrows { background: #0f1513; color: var(--white); }
.pg-commercial .arrows .sec-head p { color: #b9c6c0; }
.pg-commercial .a-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; counter-reset: a; }
.pg-commercial .a-steps li { position: relative; background: #1b2420; padding: 30px 34px 30px 26px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); }
.pg-commercial .a-steps li:first-child { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.pg-commercial .a-steps li:nth-child(odd) { background: #222d28; }
.pg-commercial .a-steps li::before { counter-increment: a; content: "Step " counter(a); display: block; font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-light); margin-bottom: 8px; padding-left: 10px; }
.pg-commercial .a-steps h3 { font-size: 20px; margin-bottom: 8px; padding-left: 10px; }
.pg-commercial .a-steps p { font-size: 14.5px; line-height: 1.55; color: #c9d3ce; margin: 0; padding-left: 10px; }
.pg-commercial .c-cost .cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pg-commercial .c-cost .card { text-align: center; border: 1px solid var(--border); border-radius: 4px; padding: 34px 22px; box-shadow: var(--shadow); background: var(--white); }
.pg-commercial .c-cost .card i { font-size: 38px; color: var(--dark); }
.pg-commercial .c-cost .card h3 { font-size: 22px; margin: 14px 0 8px; }
.pg-commercial .c-cost .card p { font-size: 15px; color: #4a514e; min-height: 46px; }
.pg-commercial .c-cost .card .price { font-size: 30px; }
.pg-commercial .c-cost .card .price.quote { font-size: 22px; }
.pg-commercial .c-cost .factors { margin-top: 44px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; background: #f4f6f5; padding: 36px; }
.pg-commercial .faq-img { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
.pg-commercial .faq-img .img-frame img { aspect-ratio: 4 / 5; }
.pg-commercial .faq-img .img-frame { border: 10px solid #f4f6f5; }

@media (max-width: 1100px) {
  .pg-commercial .a-steps { grid-template-columns: repeat(3, 1fr); row-gap: 6px; }
  .pg-commercial .a-steps li, .pg-commercial .a-steps li:first-child { clip-path: none; border-radius: 4px; padding: 26px 20px; }
}
@media (max-width: 1024px) {
  .svc .hero-angle .container { grid-template-columns: 1fr; min-height: 0; }
  .svc .hero-angle .txt { padding: 60px 0 40px; }
  .svc .hero-angle .photo { position: relative; width: 100%; height: 360px; clip-path: none; }
  .svc .hero-angle .photo::before { display: none; }
  .svc .stats ul { grid-template-columns: 1fr 1fr; }
  .svc .stats li:nth-child(2) { border-right: 0; }
  .pg-commercial .tiles, .pg-commercial .c-cost .cards4 { grid-template-columns: 1fr 1fr; }
  .pg-commercial .cols, .pg-commercial .faq-img { grid-template-columns: 1fr; gap: 40px; }
  .pg-commercial .cols .img-frame { position: static; }
  .pg-commercial .cols .img-frame img, .pg-commercial .faq-img .img-frame img { aspect-ratio: 16 / 10; }
  .pg-commercial .c-cost .factors { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .svc .stats li { padding: 20px 14px; font-size: 16px; }
  .pg-commercial .tiles, .pg-commercial .c-cost .cards4, .pg-commercial .a-steps { grid-template-columns: 1fr; }
  .svc .hero-angle .photo { height: 280px; }
}

/* =========================================================
   7. RESIDENTIAL: warm, soft and rounded. Cream hero,
      floating badge, rounded cards, safety callout
   ========================================================= */
.pg-residential { --cream: #f7f4ee; --cream-2: #efe9de; --wood: #8a6a46; }
.pg-residential .hero-soft { background: var(--cream); padding: 70px 0 90px; }
.pg-residential .hero-soft .container { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
.pg-residential .hero-soft h1 { font-size: clamp(36px, 3.8vw, 56px); font-weight: 800; line-height: 1.06; margin-bottom: 22px; }
.pg-residential .hero-soft .lead { font-size: 18.5px; line-height: 1.7; color: #3b3a36; margin-bottom: 30px; }
.pg-residential .hero-soft .img-frame img { border-radius: 28px; aspect-ratio: 5 / 4; box-shadow: 0 30px 60px rgba(70, 52, 30, .22); }
.pg-residential .float-badge { position: absolute; left: -34px; bottom: 34px; background: var(--white); border-radius: 18px; padding: 18px 22px; display: flex; gap: 14px; align-items: center; box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.pg-residential .float-badge i { width: 48px; height: 48px; border-radius: 50%; background: #e3f2e7; color: var(--green-dark); display: grid; place-items: center; font-size: 20px; }
.pg-residential .float-badge strong { display: block; font-family: var(--head); font-size: 18px; }
.pg-residential .float-badge span { font-size: 14px; color: #5a625e; }
.pg-residential .svc .btn, .pg-residential .btn { border-radius: 40px; }
.pg-residential .intro-img { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.pg-residential .intro-img .img-frame img { border-radius: 28px; aspect-ratio: 4 / 3.3; }
.pg-residential .soft-sec { background: var(--cream); }
.pg-residential .soft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pg-residential .soft-card { background: var(--white); border-radius: 22px; padding: 32px 30px; box-shadow: 0 6px 22px rgba(70, 52, 30, .07); transition: transform .25s, box-shadow .25s; }
.pg-residential .soft-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(70, 52, 30, .13); }
.pg-residential .soft-card .ico { width: 56px; height: 56px; border-radius: 16px; background: var(--cream-2); color: var(--wood); font-size: 22px; margin-bottom: 18px; }
.pg-residential .soft-card h3 { font-size: 23px; margin-bottom: 10px; }
.pg-residential .soft-card .prose p { font-size: 15.5px; }
.pg-residential .safety { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border-radius: 28px; overflow: hidden; background: #10291b; color: var(--white); }
.pg-residential .safety .img-frame img { height: 100%; min-height: 380px; }
.pg-residential .safety .txt { padding: 50px; }
.pg-residential .safety h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 800; margin-bottom: 20px; display: flex; gap: 16px; align-items: center; }
.pg-residential .safety h2 i { color: #f5b301; }
.pg-residential .safety ul { display: grid; gap: 14px; }
.pg-residential .safety li { display: flex; gap: 14px; font-size: 16.5px; line-height: 1.55; color: #dfe9e3; }
.pg-residential .safety li i { color: var(--green-light); margin-top: 4px; }
.pg-residential .pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: p; }
.pg-residential .pills li { background: var(--cream); border-radius: 22px; padding: 28px; display: grid; grid-template-columns: 56px 1fr; gap: 18px; }
.pg-residential .pills li::before { counter-increment: p; content: counter(p); width: 56px; height: 56px; border-radius: 50%; background: var(--white); color: var(--green-dark); font-family: var(--head); font-weight: 800; font-size: 24px; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(70, 52, 30, .1); }
.pg-residential .pills h3 { font-size: 21px; margin: 4px 0 6px; }
.pg-residential .pills p { font-size: 15px; line-height: 1.6; color: #4a4843; margin: 0; }
.pg-residential .soft-cost { background: var(--cream); }
.pg-residential .s-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pg-residential .s-card { background: var(--white); border-radius: 26px; padding: 38px 32px; text-align: center; box-shadow: 0 6px 22px rgba(70, 52, 30, .07); }
.pg-residential .s-card .ico { width: 70px; height: 70px; border-radius: 50%; background: #e3f2e7; color: var(--green-dark); font-size: 26px; margin: 0 auto 18px; }
.pg-residential .s-card h3 { font-size: 23px; margin-bottom: 8px; }
.pg-residential .s-card p { font-size: 15px; color: #4a4843; min-height: 46px; }
.pg-residential .factors { margin-top: 40px; background: var(--white); border-radius: 26px; padding: 36px; }
.pg-residential .faq-soft { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.pg-residential .faq-aside { background: #10291b; color: var(--white); border-radius: 28px; padding: 44px 40px; }
.pg-residential .faq-aside p { color: #d4ddd8; font-size: 17px; line-height: 1.6; margin: 10px 0 26px; }
.pg-residential .faq-soft .faq-item { border: 0; background: var(--cream); border-radius: 18px; padding: 0 24px; margin-bottom: 12px; }
.pg-residential .svc-cta { background: linear-gradient(120deg, #10291b 0%, #155c32 100%); }

@media (max-width: 1024px) {
  .pg-residential .hero-soft .container, .pg-residential .intro-img, .pg-residential .safety, .pg-residential .faq-soft { grid-template-columns: 1fr; gap: 40px; }
  .pg-residential .float-badge { left: 14px; }
  .pg-residential .soft-grid, .pg-residential .pills, .pg-residential .s-cards { grid-template-columns: 1fr 1fr; }
  .pg-residential .safety { gap: 0; }
  .pg-residential .safety .img-frame img { min-height: 0; aspect-ratio: 16 / 9; }

}
@media (max-width: 640px) {
  .pg-residential .soft-grid, .pg-residential .pills, .pg-residential .s-cards { grid-template-columns: 1fr; }
  .pg-residential .safety .txt { padding: 32px 22px; }
  .pg-residential .float-badge { position: static; margin-top: 16px; }
}

/* Lists used for steps: no browser numbering (we draw our own) */
.svc ol { list-style: none; margin: 0; padding: 0; }
/* Header fits the Services dropdown */
.header-tag { white-space: nowrap; }
@media (max-width: 1500px) { .site-header .header-tag { display: none; } }
.pg-repair .hero-bleed > img { z-index: 0; }
.pg-repair .hero-bleed::before { z-index: 1; }
.pg-residential .pills li::before { grid-row: span 2; }
.pg-residential .pills li > * { grid-column: 2; }
.pg-residential .soft-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
@media (max-width: 1024px) { .pg-residential .soft-card:last-child:nth-child(3n+1) { grid-column: auto; } .pg-residential .soft-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pg-residential .soft-card:last-child:nth-child(odd) { grid-column: auto; } }
/* keep the technicians in frame on cropped photos */
.pg-maint .check-wrap .img-frame img { object-position: 12% center; }
.pg-opener .faq-dark .img-frame img { object-position: 80% center; }
.pg-commercial .faq-img .img-frame img { object-position: 32% center; }
.pg-commercial .cols .img-frame img { object-position: 62% center; }
/* mirror the repair photo so the technician sits on the bright side, away from the text */
.pg-repair .hero-bleed > img { transform: scaleX(-1); object-position: 70% 40%; }
.pg-install .band { height: 460px; }
.pg-install .band img { object-position: center 70%; }
@media (max-width: 640px) { .pg-install .band { height: 320px; } }
@media (max-width: 1024px) { .main-nav .nav-drop > a { display: block; } .main-nav .nav-drop > a::after { display: none; } }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.pg-contact .c-cards-sec { position: relative; z-index: 3; margin-top: -1px; padding: 60px 0 0; background: #f4f6f5; }
.pg-contact .c-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pg-contact .c-card { display: flex; flex-direction: column; background: var(--white); border-radius: 8px; padding: 30px 26px; border-bottom: 4px solid var(--green); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transition: transform .25s, box-shadow .25s; }
.pg-contact .c-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.pg-contact .c-card .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--dark); color: var(--green-light); font-size: 22px; margin-bottom: 18px; }
.pg-contact .c-card h2 { font-size: 23px; margin-bottom: 8px; }
.pg-contact .c-card p { font-size: 15px; line-height: 1.55; color: #4a514e; flex: 1; }
.pg-contact .c-card strong { font-family: var(--head); font-size: 18px; color: var(--green-dark); word-break: break-word; }
.pg-contact .c-form-sec { background: #f4f6f5; }
.pg-contact .c-form-wrap { display: grid; grid-template-columns: 1.45fr .85fr; gap: 40px; align-items: start; }
.pg-contact .c-form-box { background: var(--white); border-radius: 10px; padding: 46px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.pg-contact .c-sub { font-size: 16.5px; color: #4a514e; margin-bottom: 28px; }
.pg-contact .c-form { grid-template-columns: 1fr 1fr 1fr; padding: 0; gap: 20px 22px; }
.pg-contact .c-form .span-full { grid-column: 1 / -1; }
.pg-contact .c-form textarea { height: auto; min-height: 130px; }
.pg-contact .c-method { border: 0; padding: 0; margin: 0; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.pg-contact .c-method legend { font-size: 15px; color: #222; margin-bottom: 8px; padding: 0; }
.pg-contact .c-method label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d5dbd8; border-radius: 30px; padding: 10px 18px; font-size: 15px; cursor: pointer; margin: 0; transition: border-color .2s, background .2s; }
.pg-contact .c-method label:has(input:checked) { border-color: var(--green); background: #eef6f0; color: var(--green-dark); font-weight: 600; }
.pg-contact .c-method input { accent-color: var(--green); width: 16px; height: 16px; }
.pg-contact .c-form .btn-block { font-size: 20px; padding: 17px; }
.pg-contact .c-aside { display: grid; gap: 24px; position: sticky; top: 120px; }
.pg-contact .c-next { background: var(--dark); color: var(--white); border-radius: 10px; padding: 34px; }
.pg-contact .c-next h2 { font-size: 26px; margin-bottom: 20px; }
.pg-contact .c-next ol { counter-reset: n; display: grid; gap: 18px; }
.pg-contact .c-next li { position: relative; padding-left: 52px; }
.pg-contact .c-next li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--green); font-family: var(--head); font-weight: 800; display: grid; place-items: center; }
.pg-contact .c-next strong { display: block; font-family: var(--head); font-size: 18px; margin-bottom: 2px; }
.pg-contact .c-next span { font-size: 14.5px; color: #c9d3ce; line-height: 1.5; }
.pg-contact .c-urgent { background: #fff7e0; border: 1px solid #f3dc95; border-radius: 10px; padding: 30px; }
.pg-contact .c-urgent > i { font-size: 28px; color: #c98a00; }
.pg-contact .c-urgent h2 { font-size: 23px; margin: 10px 0 6px; }
.pg-contact .c-urgent p { font-size: 15px; color: #4a4330; margin-bottom: 18px; }
.pg-contact .c-urgent .btn { width: 100%; }
.pg-contact .c-trust { display: grid; gap: 12px; background: var(--white); border-radius: 10px; padding: 24px 26px; }
.pg-contact .c-trust li { display: flex; gap: 12px; align-items: center; font-family: var(--head); font-weight: 700; font-size: 17px; }
.pg-contact .c-trust i { color: var(--green); width: 22px; text-align: center; }
.pg-contact .c-map { position: relative; height: 520px; background: #e4e9e6; }
.pg-contact .c-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pg-contact .c-map .container { position: relative; height: 100%; display: flex; align-items: center; pointer-events: none; }
.pg-contact .c-map-card { pointer-events: auto; background: var(--white); border-radius: 10px; padding: 32px; width: 360px; box-shadow: 0 20px 50px rgba(0, 0, 0, .2); border-top: 5px solid var(--green); }
.pg-contact .c-map-card img { width: 220px; height: auto; margin-bottom: 18px; }
.pg-contact .c-map-card p { display: flex; gap: 12px; align-items: center; font-size: 15.5px; margin-bottom: 12px; }
.pg-contact .c-map-card p i { color: var(--green-dark); width: 18px; text-align: center; }
.pg-contact .c-map-card .btn { margin-top: 8px; width: 100%; font-size: 18px; padding: 15px; }
.pg-contact .c-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }

@media (max-width: 1100px) {
  .pg-contact .c-cards { grid-template-columns: 1fr 1fr; }
  .pg-contact .c-form-wrap { grid-template-columns: 1fr; }
  .pg-contact .c-aside { position: static; grid-template-columns: 1fr 1fr; }
  .pg-contact .c-trust { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) { .pg-contact .c-faq { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 640px) {
  .pg-contact .c-cards, .pg-contact .c-aside, .pg-contact .c-trust { grid-template-columns: 1fr; }
  .pg-contact .c-form-box { padding: 28px 20px; }
  .pg-contact .c-form { grid-template-columns: 1fr; }
  .pg-contact .c-map { height: auto; }
  .pg-contact .c-map iframe { position: relative; height: 320px; display: block; }
  .pg-contact .c-map .container { padding: 20px 18px 30px; }
  .pg-contact .c-map-card { width: 100%; }
}

/* Footer legal links + form consent (all pages) */
.footer-brand .footer-legal { font-size: 14px; }
.footer-brand .footer-legal a:hover { color: var(--green-light); text-decoration: underline; }
.footer-brand .footer-legal span { margin: 0 10px; opacity: .5; }
.form-consent { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: #5a625e; margin: 0; }
.form-consent a { color: var(--green-dark); text-decoration: underline; }

/* =========================================================
   LEGAL PAGES (Privacy Policy, Terms of Service)
   ========================================================= */
.pg-legal .l-hero { background: radial-gradient(ellipse at 85% 0%, #145c31 0%, #0f1513 55%); color: var(--white); padding: 70px 0 120px; }
.pg-legal .l-hero .crumbs { color: #b9c6c0; }
.pg-legal .l-hero h1 { font-size: clamp(40px, 4.4vw, 64px); font-weight: 800; margin-bottom: 16px; }
.pg-legal .l-hero .lead { font-size: 19px; line-height: 1.6; color: #dce5e0; max-width: 760px; margin-bottom: 22px; }
.pg-legal .l-date { display: inline-flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); padding: 8px 16px; border-radius: 30px; font-size: 14px; margin: 0; }
.pg-legal .l-glance-sec { margin-top: -70px; position: relative; z-index: 2; }
.pg-legal .glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pg-legal .g-card { background: var(--white); border-radius: 10px; padding: 28px 24px; box-shadow: 0 14px 34px rgba(0, 0, 0, .1); border-top: 4px solid var(--green); }
.pg-legal .g-card i { font-size: 28px; color: var(--green-dark); margin-bottom: 14px; }
.pg-legal .g-card h2 { font-size: 21px; margin-bottom: 8px; }
.pg-legal .g-card p { font-size: 15px; line-height: 1.55; color: #4a514e; margin: 0; }
.pg-legal .keypoints { background: var(--white); border-radius: 10px; padding: 36px 40px; box-shadow: 0 14px 34px rgba(0, 0, 0, .1); border-left: 6px solid var(--green); }
.pg-legal .keypoints h2 { font-size: 26px; margin-bottom: 18px; }
.pg-legal .keypoints ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 30px; }
.pg-legal .keypoints li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.5; color: #2b302e; }
.pg-legal .keypoints i { color: var(--green-dark); font-size: 19px; width: 22px; margin-top: 2px; }
.pg-legal .l-body { padding-top: 70px; }
.pg-legal .l-wrap { display: grid; grid-template-columns: 290px 1fr; gap: 70px; align-items: start; }
.pg-legal .l-toc { position: sticky; top: 120px; background: #f4f6f5; border-radius: 10px; padding: 26px 22px; }
.pg-legal .l-toc h2 { font-size: 19px; margin-bottom: 12px; }
.pg-legal .l-toc ol { counter-reset: t; display: grid; gap: 2px; }
.pg-legal .l-toc a { display: flex; gap: 10px; font-size: 14.5px; padding: 6px 8px; border-radius: 6px; color: #3a403d; }
.pg-legal .l-toc li { counter-increment: t; }
.pg-legal .l-toc a::before { content: counter(t) "."; color: var(--green-dark); font-weight: 700; min-width: 20px; }
.pg-legal .l-toc a:hover { background: var(--white); color: var(--green-dark); }
.pg-legal .l-other { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-weight: 600; font-size: 15px; color: var(--green-dark); }
.pg-legal .l-content { max-width: 820px; counter-reset: s; }
.pg-legal .l-sec { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--border); scroll-margin-top: 120px; }
.pg-legal .l-sec:last-child { border-bottom: 0; }
.pg-legal .l-sec h2 { font-size: 30px; font-weight: 800; margin-bottom: 16px; display: flex; gap: 14px; align-items: baseline; }
.pg-legal .l-sec h2::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-size: 18px; color: var(--green); }
.pg-legal .l-sec h3 { font-size: 21px; margin: 24px 0 10px; }
.pg-legal .l-sec p { font-size: 16.5px; line-height: 1.75; color: #2b302e; margin-bottom: 14px; }
.pg-legal .l-list { display: grid; gap: 10px; margin: 6px 0 16px; }
.pg-legal .l-list li { position: relative; padding-left: 28px; font-size: 16.5px; line-height: 1.65; color: #2b302e; }
.pg-legal .l-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.pg-legal .l-contact { background: #f4f6f5; border-radius: 10px; padding: 24px 26px; display: grid; gap: 12px; }
.pg-legal .l-contact p { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.pg-legal .l-contact i { color: var(--green-dark); width: 20px; margin-top: 6px; text-align: center; }
.pg-legal .l-contact a { color: var(--green-dark); font-weight: 600; }
/* Terms: numbered sections in a dark badge for a different look */
.pg-terms .l-sec h2::before { background: var(--dark); color: var(--green-light); font-size: 15px; padding: 5px 9px; border-radius: 4px; transform: translateY(-4px); }
.pg-terms .l-hero { background: radial-gradient(ellipse at 15% 0%, #145c31 0%, #0f1513 55%); }

@media (max-width: 1024px) {
  .pg-legal .glance { grid-template-columns: 1fr 1fr; }
  .pg-legal .keypoints ul { grid-template-columns: 1fr 1fr; }
  .pg-legal .l-wrap { grid-template-columns: 1fr; gap: 30px; }
  .pg-legal .l-toc { position: static; }
  .pg-legal .l-toc ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pg-legal .l-hero { padding: 50px 0 100px; }
  .pg-legal .glance, .pg-legal .keypoints ul, .pg-legal .l-toc ol { grid-template-columns: 1fr; }
  .pg-legal .keypoints { padding: 26px 22px; }
  .pg-legal .l-sec h2 { font-size: 25px; }
}
.pg-legal .l-toc a.l-other::before { content: none; }