/* ==========================================================
   Body design layer (Deel-style landing layout).
   Loaded after style.css. Every rule is scoped to <main> so the
   top bar, navbar, footer and sticky call bar keep their own look.
   Logo green is the accent; black pill buttons; flat rounded cards;
   white and warm-tint sections alternating.
   ========================================================== */

:root {
  --dl-ink: #111111;
  --dl-muted: #55605a;
  --dl-tint: #f3f8f5;
  --dl-card: #eaf2ed;
  --dl-line: #dfe8e3;
  --dl-green: var(--primary);
  --dl-green-soft: #dcf5e7;
  --dl-radius: 24px;
  --dl-radius-sm: 16px;
}

main { color: var(--dl-ink); }
main section { padding: 96px 0; }
@media (max-width: 767.98px) { main section { padding: 64px 0; } }

main h1, main h2, main h3 { letter-spacing: -0.02em; color: var(--dl-ink); }
main h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.15; }
main p { color: var(--dl-muted); }
main p > a:not([class]), main li > a:not([class]) { text-decoration: underline; text-decoration-color: var(--dl-green); text-underline-offset: 3px; }
main .contact-card a, main .cta-sub a { text-decoration: none; }

/* ---------- Shared building blocks ---------- */
.dl-section { background: #fff; }
.dl-tint, main .bg-light-bg { background: var(--dl-tint) !important; }

.dl-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.dl-head p { font-size: 1.1rem; margin: 16px auto 0; }
.dl-head-left { text-align: left; margin-left: 0; }
.dl-head-left p { margin-left: 0; }

.dl-eyebrow, .dl-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dl-ink); margin-bottom: 14px;
}
.dl-eyebrow { background: #fff; border: 1px solid var(--dl-line); border-radius: 999px; padding: 7px 16px; text-transform: none; letter-spacing: 0; }
.dl-eyebrow .svgi { color: var(--primary-dark); }
.dl-kicker { color: var(--primary-dark); }

.dl-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--dl-ink); color: #fff; font-weight: 700; font-size: 1rem;
  padding: 15px 28px; border-radius: 999px; border: 2px solid var(--dl-ink);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.dl-btn:hover { background: var(--dl-green); border-color: var(--dl-green); color: var(--dl-ink); transform: translateY(-1px); }
.dl-btn-ghost { background: transparent; color: var(--dl-ink); border-color: var(--dl-ink); }
.dl-btn-ghost:hover { background: var(--dl-ink); border-color: var(--dl-ink); color: #fff; }
.dl-btn-green { background: var(--dl-green); border-color: var(--dl-green); color: var(--dl-ink); }
.dl-btn-green:hover { background: var(--dl-ink); border-color: var(--dl-ink); color: #fff; }
.dl-btn-block { width: 100%; }

.dl-link { font-weight: 700; color: var(--dl-ink); border-bottom: 2px solid var(--dl-green); padding-bottom: 2px; }
.dl-link:hover { color: var(--primary-dark); }

.dl-badge-stars { color: var(--dl-green); display: inline-flex; gap: 2px; }

/* ---------- 1. Hero ---------- */
.dl-hero {
  padding: 72px 0 88px !important;
  background:
    radial-gradient(ellipse 700px 420px at 90% 10%, rgba(34,196,110,0.18), transparent 65%),
    var(--dl-tint);
}
.dl-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.08; margin-bottom: 22px; }
.dl-mark { background: linear-gradient(transparent 62%, var(--dl-green-soft) 62%); padding: 0 4px; }
.dl-lead { font-size: 1.15rem; max-width: 560px; margin-bottom: 0; }
.dl-hero-checks { margin-top: 26px; }
.dl-hero-checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 0.97rem; margin-bottom: 8px; }
.dl-hero-checks .svgi { color: var(--primary-dark); margin-top: 5px; }

.dl-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dl-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--dl-line); border-radius: 14px; padding: 10px 16px; }
.dl-badge-text { font-size: 0.9rem; color: var(--dl-muted); }
.dl-badge-text strong { color: var(--dl-ink); }
.dl-badge-icon { color: var(--primary-dark); font-size: 1.2rem; }

.dl-hero-media { position: relative; }
.dl-hero-media img { border-radius: var(--dl-radius); width: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
.dl-float-card {
  position: absolute; left: -22px; bottom: 28px; background: #fff; border-radius: var(--dl-radius-sm);
  padding: 18px 22px; box-shadow: 0 18px 40px rgba(17,17,17,0.14); display: flex; flex-direction: column; min-width: 220px;
}
.dl-float-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dl-muted); }
.dl-float-num { font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--dl-ink); letter-spacing: -0.02em; }
.dl-float-sub { font-size: 0.85rem; color: var(--dl-muted); }
@media (max-width: 991.98px) { .dl-float-card { left: 16px; bottom: 16px; min-width: 0; } }

/* ---------- 2. Logo strip ---------- */
.dl-logos { padding: 40px 0 !important; background: #fff; border-bottom: 1px solid var(--dl-line); overflow: hidden; }
.dl-logos-cap { text-align: center; font-weight: 600; color: var(--dl-muted); margin-bottom: 22px; }
.dl-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.dl-marquee-track { display: flex; width: max-content; animation: dl-scroll 32s linear infinite; }
.dl-marquee-set { display: flex; gap: 64px; padding-right: 64px; }
.dl-logo-word { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: #9a968c; white-space: nowrap; }
@keyframes dl-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .dl-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .dl-marquee-set[aria-hidden="true"] { display: none; }
}

/* ---------- 3. Alternating feature rows ---------- */
.dl-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 96px; }
.dl-feature:last-child { margin-bottom: 0; }
.dl-feature-flip .dl-feature-text { order: 2; }
.dl-feature-text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; margin-bottom: 18px; }
.dl-feature-text .dl-link { display: inline-block; margin-top: 8px; }
.dl-feature-media { border-radius: var(--dl-radius); overflow: hidden; background: var(--dl-card); }
.dl-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.dl-feature-diagram { background: #fff; border: 1px solid var(--dl-line); padding: 12px; }
@media (max-width: 991.98px) {
  .dl-feature { grid-template-columns: 1fr; gap: 32px; margin-bottom: 72px; }
  .dl-feature-flip .dl-feature-text { order: 0; }
}
.dl-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dl-mini { background: var(--dl-tint); border-radius: var(--dl-radius-sm); padding: 20px; }
.dl-mini .svgi { color: var(--primary-dark); font-size: 1.3rem; margin-bottom: 10px; }
.dl-mini h4 { font-size: 1rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.01em; }
.dl-mini p { font-size: 0.88rem; margin: 0; line-height: 1.6; }
@media (max-width: 575.98px) { .dl-mini-grid { grid-template-columns: 1fr; } }

/* ---------- 4. Card grid ---------- */
.dl-card {
  display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius); padding: 30px; color: var(--dl-ink); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,17,17,0.08); border-color: var(--dl-green); color: var(--dl-ink); }
.dl-card-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--dl-green-soft); color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 20px; }
.dl-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; }
.dl-card p { font-size: 0.95rem; flex-grow: 1; }
.dl-card-foot { font-weight: 700; font-size: 0.92rem; color: var(--dl-ink); }

/* ---------- 5. Pricing tiers ---------- */
.dl-tier { position: relative; height: 100%; background: #fff; border: 1px solid var(--dl-line); border-radius: var(--dl-radius); padding: 34px 30px; display: flex; flex-direction: column; }
.dl-tier.is-featured { background: var(--dl-ink); border-color: var(--dl-ink); }
.dl-tier.is-featured h3, .dl-tier.is-featured .dl-tier-price, .dl-tier.is-featured li { color: #fff; }
.dl-tier.is-featured .dl-tier-desc, .dl-tier.is-featured .dl-tier-price span, .dl-tier.is-featured .dl-tier-price small, .dl-tier.is-featured .dl-tier-inc { color: rgba(255,255,255,0.65); }
.dl-tier.is-featured .dl-tier-desc a { color: var(--dl-green); }
.dl-tier-flag { position: absolute; top: 22px; right: 22px; background: var(--dl-green); color: var(--dl-ink); font-size: 0.75rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.dl-tier h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; padding-right: 100px; }
.dl-tier-desc { font-size: 0.93rem; min-height: 4.5em; }
.dl-tier-price { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 6px 0 24px; color: var(--dl-ink); }
.dl-tier-price-sm { font-size: 2.1rem; }
.dl-tier-price small { font-size: 1rem; font-weight: 600; color: var(--dl-muted); letter-spacing: 0; }
.dl-tier-price span { display: block; font-size: 0.85rem; font-weight: 500; color: var(--dl-muted); letter-spacing: 0; margin-top: 8px; }
.dl-tier-inc { font-weight: 700; font-size: 0.9rem; color: var(--dl-ink); margin: 26px 0 12px; }
.dl-tier ul li, .dl-compare ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; margin-bottom: 10px; }
.dl-tier ul .svgi, .dl-compare-with .svgi { color: #16a34a; margin-top: 5px; }
.dl-tier.is-featured ul .svgi { color: var(--dl-green); }

.dl-note { margin-top: 32px; background: var(--dl-green-soft); border-radius: var(--dl-radius); padding: 32px 36px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.dl-note > div { flex: 1 1 420px; }
.dl-note h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.dl-note p { margin: 0; color: #2f4a3c; }

/* ---------- 6. Testimonial and review wall ---------- */
.dl-quote { max-width: 900px; margin: 0 auto 80px; text-align: center; }
.dl-quote-mark { display: block; font-size: 5rem; line-height: 0.6; color: var(--dl-green); font-weight: 800; margin-bottom: 14px; }
.dl-quote blockquote { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.4; letter-spacing: -0.015em; color: var(--dl-ink); margin: 0 0 22px; }
.dl-quote figcaption { color: var(--dl-muted); }
.dl-quote figcaption strong { color: var(--dl-ink); }
.dl-wall-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.dl-wall-head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.dl-review { background: #fff; border: 1px solid var(--dl-line); border-radius: var(--dl-radius); padding: 28px; height: 100%; }
.dl-review p { color: var(--dl-ink); margin: 12px 0 16px; }
.dl-review-meta { font-size: 0.88rem; color: var(--dl-muted); }
.dl-review-meta strong { color: var(--dl-ink); }

/* ---------- 7. Stats ---------- */
.dl-stats-wrap { background: var(--dl-ink); border-radius: 32px; padding: 64px 56px; }
.dl-stats-wrap h2 { color: #fff; }
.dl-stats-wrap .dl-head p { color: rgba(255,255,255,0.65); }
.dl-stats-wrap .dl-head { margin-bottom: 40px; }
.dl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 36px; }
.dl-stat-num { display: block; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--dl-green); line-height: 1; }
.dl-stat-lbl { display: block; margin-top: 10px; color: rgba(255,255,255,0.7); font-size: 0.95rem; }
.dl-stats-wrap .dl-btn-row { margin-top: 44px; }
.dl-stats-wrap .dl-btn { background: var(--dl-green); border-color: var(--dl-green); color: var(--dl-ink); }
.dl-stats-wrap .dl-btn:hover { background: #fff; border-color: #fff; }
.dl-stats-wrap .dl-btn-ghost { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.dl-stats-wrap .dl-btn-ghost:hover { background: #fff; color: var(--dl-ink); }
@media (max-width: 767.98px) {
  .dl-stats-wrap { padding: 40px 24px; border-radius: var(--dl-radius); }
  .dl-stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- 8. Product cards ---------- */
.dl-product { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--dl-radius); overflow: hidden; border: 1px solid var(--dl-line); color: var(--dl-ink); transition: transform .2s, box-shadow .2s; }
.dl-product:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,17,17,0.08); color: var(--dl-ink); }
.dl-product-img img { width: 100%; height: 240px; object-fit: cover; }
.dl-product-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.dl-product-body h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.dl-product-body p { font-size: 0.93rem; flex-grow: 1; }
.dl-product-body .dl-product-price { flex-grow: 0; font-size: 1.5rem; font-weight: 800; color: var(--dl-ink); letter-spacing: -0.02em; margin-bottom: 10px; }
.dl-product-price span { font-size: 0.82rem; font-weight: 500; color: var(--dl-muted); letter-spacing: 0; }

/* ---------- 9. Steps ---------- */
.dl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.dl-step { background: var(--dl-tint); border-radius: var(--dl-radius); padding: 30px; }
.dl-step-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--dl-ink); color: #fff; font-weight: 800; margin-bottom: 18px; }
.dl-step h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.dl-step p { font-size: 0.93rem; margin: 0; }
@media (max-width: 991.98px) { .dl-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .dl-steps { grid-template-columns: 1fr; } }

/* ---------- 10. Without / with ---------- */
.dl-compare { height: 100%; border-radius: var(--dl-radius); padding: 18px 18px 30px; }
.dl-compare-without { background: #fff; border: 1px solid var(--dl-line); }
.dl-compare-with { background: #fff; border: 2px solid var(--dl-green); }
.dl-compare-img { border-radius: var(--dl-radius-sm); overflow: hidden; margin-bottom: 24px; }
.dl-compare-img img { width: 100%; height: 260px; object-fit: cover; }
.dl-compare h3 { font-size: 1.35rem; font-weight: 800; margin: 0 12px 16px; }
.dl-compare ul { margin: 0 12px; }
.dl-x-list .svgi { color: var(--heat); margin-top: 5px; }
.dl-tile { background: #fff; border-radius: var(--dl-radius); padding: 26px; height: 100%; border: 1px solid var(--dl-line); }
.dl-tile .svgi { color: var(--primary-dark); font-size: 1.4rem; margin-bottom: 12px; }
.dl-tile h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 8px; }
.dl-tile p { font-size: 0.9rem; margin: 0; }

/* ==========================================================
   Existing body components, restyled to match (all pages)
   ========================================================== */

/* Eyebrow labels: soft green pill instead of a solid fill */
main .section-label { background: var(--dl-green-soft); color: #0f6b3f; letter-spacing: 0.05em; }
main .section-label.is-heat { background: var(--heat-light); color: var(--heat-dark); }

/* Page heroes: light, Deel-style */
main .page-hero, main .hero-section {
  background:
    radial-gradient(ellipse 700px 420px at 90% 10%, rgba(34,196,110,0.18), transparent 65%),
    var(--dl-tint);
  padding: 72px 0 84px;
}
main .page-hero h1, main .hero-section h1 { color: var(--dl-ink); font-weight: 800; line-height: 1.1; }
main .page-hero .lead, main .hero-section .lead { color: var(--dl-muted); }
main .page-hero .breadcrumb-row, main .page-hero .breadcrumb-row a,
main .hero-section .breadcrumb-row, main .hero-section .breadcrumb-row a { color: var(--dl-muted); }
main .hero-checklist li { color: var(--dl-ink); }
main .hero-checklist .svgi { color: var(--primary-dark); }
main .hero-img-wrap { border-radius: var(--dl-radius); box-shadow: none; border: 0; }
main .hero-badge { background: #fff; border: 1px solid var(--dl-line); color: var(--dl-ink); }
main .hero-info-card { background: #fff; color: var(--dl-ink); border: 1px solid var(--dl-line); box-shadow: 0 18px 40px rgba(17,17,17,0.1); border-radius: var(--dl-radius-sm); }
main .hero-info-card h2, main .hero-info-card .stat-label, main .hero-info-card p, main .strip-label { color: var(--dl-muted) !important; }
main .hero-info-card .hero-phone-strip a { color: var(--dl-ink); }

/* Price strip on light heroes */
main .ps-item { background: #fff; border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); }
main .ps-num { color: var(--dl-ink); }
main .ps-label { color: var(--dl-muted); }

/* Buttons: pills */
main .btn-hero-heat, main .btn-hero-primary, main .btn-benefit-cta, main .btn-guide-cta, main .btn-submit {
  background: var(--dl-ink); color: #fff; border-radius: 999px; border: 2px solid var(--dl-ink);
}
main .btn-hero-heat:hover, main .btn-hero-primary:hover, main .btn-benefit-cta:hover, main .btn-guide-cta:hover, main .btn-submit:hover {
  background: var(--dl-green); border-color: var(--dl-green); color: var(--dl-ink);
}
main .btn-hero-outline { border-radius: 999px; border-color: var(--dl-ink); background: transparent; }
main .btn-hero-outline .svgi { color: var(--dl-ink); }
main .btn-hero-outline:hover { background: var(--dl-ink); color: #fff; border-color: var(--dl-ink); }
main .btn-hero-outline:hover .svgi { color: #fff; }

/* Cards: flat, rounded, hairline border */
main .pricing-card, main .why-card, main .value-card, main .brand-card, main .review-card,
main .single-project, main .service-icon-card, main .suburb-card, main .case-study-wrap, main .form-card, main .contact-card {
  border-radius: var(--dl-radius); box-shadow: none; border: 1px solid var(--dl-line);
}
main .pricing-card.featured { border: 2px solid var(--dl-green); }
main .review-card { background: #fff; }
main .highlight-card { border-radius: var(--dl-radius); }
main .content-img, main .diagram-wrap { border-radius: var(--dl-radius); box-shadow: none; }
main .area-card { background: #fff; border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); }
main .area-card:hover { border-color: var(--dl-green); }
main .estimator { border-radius: var(--dl-radius); background: var(--dl-tint); border-color: var(--dl-line); }
main .est-result { border-radius: var(--dl-radius-sm); }
main .compare-table { border-radius: var(--dl-radius-sm); box-shadow: none; border: 1px solid var(--dl-line); }
main .pricing-note-box { border-radius: var(--dl-radius); }
main .signs-list li { background: var(--dl-tint); border-radius: var(--dl-radius-sm); }

/* Section backgrounds: white and warm tint */
main .pricing-section, main .quote-section, main .why-section, main .services-strip, main .faq-section { background: var(--dl-tint); }
main .reviews-section, main .service-area-section { background: #fff; }

/* Form */
main .form-card { padding: 36px; }
main .form-control, main .form-select { border-radius: 12px; border-color: var(--dl-line); padding: 12px 14px; }
main .form-control:focus, main .form-select:focus { border-color: var(--dl-ink); box-shadow: 0 0 0 3px var(--dl-green-soft); }

/* FAQ: two-column, Deel style */
main .faq-section { background: #fff; }
main .faq-intro { position: sticky; top: 120px; }
main .accordion-item { background: transparent; box-shadow: none; border-radius: 0 !important; border-bottom: 1px solid var(--dl-line) !important; margin: 0; }
main .accordion-button { background: transparent; font-size: 1.08rem; font-weight: 700; padding: 24px 0; color: var(--dl-ink); }
main .accordion-button:not(.collapsed) { background: transparent; color: var(--dl-ink); }
main .accordion-button:not(.collapsed)::after { filter: none; }
main .accordion-body { padding: 0 0 24px; font-size: 0.98rem; color: var(--dl-muted); }
@media (max-width: 991.98px) { main .faq-intro { position: static; } }

/* Closing CTA: rounded dark card */
main .cta-banner { background: #fff; padding: 24px 0 96px; }
main .cta-banner > .container > .row {
  background:
    radial-gradient(ellipse 600px 300px at 100% 0%, rgba(34,196,110,0.25), transparent 70%),
    var(--dl-ink);
  border-radius: 32px; padding: 56px 48px; margin: 0;
}
main .cta-banner h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: #fff; }
main .btn-outline-heat { background: var(--dl-green); color: var(--dl-ink); border-color: var(--dl-green); border-radius: 999px; padding: 14px 26px; }
main .btn-outline-heat:hover { background: #fff; border-color: #fff; color: var(--dl-ink); }
main .btn-outline-white-border { border-radius: 999px; padding: 14px 26px; }
@media (max-width: 767.98px) {
  main .cta-banner { padding: 8px 0 64px; }
  main .cta-banner > .container > .row { padding: 36px 22px; border-radius: var(--dl-radius); }
}

/* ---------- Quote form side card: photo guide ---------- */
main .photo-guide { background: var(--dl-ink); color: #fff; border-radius: var(--dl-radius); padding: 34px 30px; }
main .photo-guide-h { color: #fff; font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
main .photo-guide-lead { color: rgba(255,255,255,0.65); font-size: 0.93rem; margin-bottom: 22px; }
main .photo-guide-list { list-style: none; margin: 0 0 26px; padding: 0; }
main .photo-guide-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.1); }
main .photo-guide-list li:first-child { border-top: 0; padding-top: 0; }
main .pg-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--dl-green); color: var(--dl-ink); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
main .photo-guide-list strong { display: block; color: #fff; font-size: 0.98rem; margin-bottom: 2px; }
main .photo-guide-list span:not(.pg-num) { display: block; color: rgba(255,255,255,0.65); font-size: 0.88rem; line-height: 1.55; }
main .photo-guide-next { background: rgba(34,196,110,0.12); border: 1px solid rgba(34,196,110,0.3); border-radius: var(--dl-radius-sm); padding: 18px 20px; }
main .photo-guide-next h4 { color: var(--dl-green); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
main .photo-guide-next ul { list-style: none; margin: 0; padding: 0; }
main .photo-guide-next li { display: flex; gap: 10px; align-items: flex-start; color: #fff; font-size: 0.9rem; margin-bottom: 6px; }
main .photo-guide-next li:last-child { margin-bottom: 0; }
main .photo-guide-next .svgi { color: var(--dl-green); margin-top: 4px; }

/* Hero photo: the price card sits top-left over the plain garage door, clear of the person and charger */
.dl-float-card { bottom: auto; top: 28px; }
.dl-hero-media img { object-position: 42% 50%; }
@media (max-width: 991.98px) { .dl-float-card { top: 16px; bottom: auto; } }
@media (max-width: 575.98px) {
  /* Small screens: the card would hide the person and charger, so it tucks under the photo instead */
  .dl-float-card { position: relative; top: auto; left: auto; bottom: auto; margin: -34px 16px 0; }
}

/* ---------- Related guides block on keyword pages ---------- */
main .related-guides { background: #fff; padding: 72px 0 24px; }
main .related-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
main .related-guide { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); font-weight: 700; color: var(--dl-ink); background: var(--dl-tint); transition: border-color .2s; }
main .related-guide:hover { border-color: var(--dl-green); color: var(--dl-ink); }
main .related-guide .svgi { color: var(--primary-dark); flex-shrink: 0; }

/* ---------- Related-search answers (data/keywordNotes.json) ---------- */
main .keyword-notes { background: var(--dl-tint); }
main .keyword-notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
main .keyword-note { background: #fff; border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); padding: 24px 26px; }
main .keyword-note h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 8px; }
main .keyword-note p { font-size: 0.95rem; margin: 0; }
@media (max-width: 400px) { main .keyword-notes-grid { grid-template-columns: 1fr; } }