/*
Theme Name: Keystone Gutter Helmet
Theme URI: https://blackfeather.digital
Template: blackfeather-canvas
Author: Blackfeather Digital
Description: Keystone Gutter Helmet brand skin for the Blackfeather Canvas framework. Gutter Helmet green (#0B7040) on charcoal, deep forest for trust bands. Home-services layout: never-clean hero, how-it-works, services, benefits, Vendasta reviews mount, service area, free-quote CTA.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keystone-gutter-helmet
*/

/* Brand values arrive as tokens (functions.php). This file holds the brand
   components. Layout uses framework .bfd-wrap; buttons use framework .bfd-btn. */

/* ---------- Type helpers ---------- */
.kgh-eyebrow{font-family:var(--bfd-font-heading);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bfd-color-accent);margin:0 0 16px}
.kgh-eyebrow.is-light{color:#fff}
.kgh-serif,.kgh-serif p{font-family:var(--bfd-font-accent)}

/* ---------- Buttons: framework .bfd-btn is the green primary. Add variants. */
.kgh-btn-dark{background:var(--bfd-color-ink)!important;color:#fff!important}
.kgh-btn-dark:hover{box-shadow:0 12px 28px -12px rgba(22,26,31,.55)}

/* ---------- Header CTA (appended menu items) ---------- */
.bfd-menu .kgh-mi-phone a{font-weight:700;color:var(--bfd-color-ink);letter-spacing:-.01em}
.bfd-menu .kgh-mi-phone a:hover{color:var(--bfd-color-accent)}
.bfd-menu .kgh-mi-quote a{color:#fff!important}
.bfd-menu .kgh-mi-quote a:hover{opacity:1}
@media (max-width:820px){
	.bfd-menu .kgh-mi-phone a{color:var(--bfd-color-accent);font-size:18px}
}

/* ---------- Section rhythm ---------- */
.kgh-sec{padding:var(--bfd-space-section) 0}
.kgh-sec-head{max-width:60ch;margin:0 auto 48px;text-align:center}
.kgh-sec-head h2{margin:0}
.kgh-sec-head p{font-size:18px;color:var(--bfd-color-muted);margin:14px 0 0}

/* ---------- Hero ---------- */
.kgh-hero{padding:70px 0 40px;background:linear-gradient(180deg,#fff 0%,var(--bfd-color-surface) 100%)}
.kgh-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:920px){.kgh-hero-grid{grid-template-columns:1fr;gap:30px}}
.kgh-hero h1{margin:0}
.kgh-hero .kgh-sub{font-size:clamp(17px,2.2vw,20px);color:var(--bfd-color-muted);max-width:50ch;margin:24px 0 30px}
.kgh-hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0}
.kgh-hero-media{position:relative;border-radius:var(--bfd-radius-l);overflow:hidden;border:1px solid var(--bfd-color-line);background:#fff;box-shadow:0 30px 60px -34px rgba(11,74,44,.42)}
.kgh-hero-media img{width:100%;display:block}
.kgh-badge{position:absolute;top:18px;left:18px;background:var(--bfd-color-accent);color:#fff;font-family:var(--bfd-font-heading);font-weight:800;font-size:12px;letter-spacing:.04em;padding:8px 14px;border-radius:999px;text-transform:uppercase}
.kgh-trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;padding-top:26px;border-top:1px solid var(--bfd-color-line)}
.kgh-trust .t{display:flex;gap:11px;align-items:center;font-family:var(--bfd-font-heading);font-size:13.5px;font-weight:600;color:var(--bfd-color-ink)}
.kgh-trust .t i{flex:0 0 auto;width:26px;height:26px;border-radius:999px;background:var(--bfd-color-wash);color:var(--bfd-color-accent);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px}

/* ---------- As seen on ---------- */
.kgh-seen{border-top:1px solid var(--bfd-color-line);border-bottom:1px solid var(--bfd-color-line);background:#fff;padding:26px 0}
.kgh-seen-in{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:center}
.kgh-seen .lbl{font-family:var(--bfd-font-heading);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bfd-color-faint)}
.kgh-seen .net{font-family:var(--bfd-font-heading);font-weight:800;font-size:20px;color:var(--bfd-color-faint);letter-spacing:-.02em}

/* ---------- How it works ---------- */
.kgh-hiw{background:var(--bfd-color-surface)}
.kgh-hiw-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:860px){.kgh-hiw-grid{grid-template-columns:1fr;gap:30px}}
.kgh-hiw-art{border-radius:var(--bfd-radius-l);overflow:hidden;border:1px solid var(--bfd-color-line);background:#fff}
.kgh-hiw-art img{display:block;width:100%}
.kgh-hiw-lead{color:var(--bfd-color-muted);font-size:17px;margin:0 0 6px}
.kgh-steps{list-style:none;margin:22px 0 0;padding:0}
.kgh-steps li{padding:18px 0;border-top:1px solid var(--bfd-color-line);display:flex;gap:16px;align-items:flex-start}
.kgh-steps li:first-child{border-top:0}
.kgh-steps .n{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--bfd-color-ink);color:#fff;font-family:var(--bfd-font-heading);font-weight:800;font-size:15px;display:grid;place-items:center}
.kgh-steps h4{margin:2px 0 4px;font-size:18px}
.kgh-steps p{margin:0;font-size:15px;color:var(--bfd-color-muted)}

/* ---------- Services ---------- */
.kgh-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.kgh-svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.kgh-svc-grid{grid-template-columns:1fr}}
.kgh-svc{position:relative;border:1px solid var(--bfd-color-line);border-radius:var(--bfd-radius-m);padding:30px;background:#fff;transition:transform .22s,box-shadow .22s;overflow:hidden}
.kgh-svc:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(11,74,44,.42)}
.kgh-svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bfd-gradient-accent);opacity:0;transition:opacity .22s}
.kgh-svc:hover::before{opacity:1}
.kgh-svc .ic{width:46px;height:46px;border-radius:12px;background:var(--bfd-color-wash);display:grid;place-items:center;margin-bottom:18px;color:var(--bfd-color-accent)}
.kgh-svc h3{font-size:20px;margin:0 0 8px}
.kgh-svc p{font-size:14.5px;color:var(--bfd-color-muted);margin:0 0 16px}
.kgh-svc .kgh-more{font-family:var(--bfd-font-heading);font-weight:700;font-size:13.5px;color:var(--bfd-color-accent);text-decoration:none}
.kgh-svc.is-feature{background:var(--bfd-color-surface);border-style:dashed}
.kgh-svc.is-feature .ic{background:var(--bfd-color-accent);color:#fff}

/* ---------- Why / benefits (charcoal) ---------- */
.kgh-why{background:var(--bfd-color-ink)}
.kgh-why h2,.kgh-why h3{color:#fff}
.kgh-why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
@media (max-width:860px){.kgh-why-grid{grid-template-columns:1fr;gap:30px}}
.kgh-why .lede{color:var(--bfd-color-faint);font-size:18px;max-width:46ch}
.kgh-ben{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
@media (max-width:520px){.kgh-ben{grid-template-columns:1fr}}
.kgh-ben li{display:flex;gap:12px;align-items:flex-start;color:#E7EAED;font-size:15.5px}
.kgh-ben li::before{content:"✓";flex:0 0 auto;width:22px;height:22px;border-radius:999px;background:var(--bfd-color-accent);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;margin-top:2px}
.kgh-assure{background:var(--bfd-gradient-forest);border-radius:var(--bfd-radius-l);padding:38px;color:#fff}
.kgh-assure .big{font-family:var(--bfd-font-heading);font-weight:800;font-size:52px;line-height:1;letter-spacing:-.03em;color:#fff}
.kgh-assure p{color:#CFE3D6;margin:14px 0 0;font-size:15px}
.kgh-assure hr{border:0;border-top:1px solid rgba(255,255,255,.16);margin:24px 0}
.kgh-assure .q{font-family:var(--bfd-font-accent);font-style:italic;font-size:19px;color:#fff;line-height:1.4;margin:0}

/* ---------- Reviews (Vendasta mount) ---------- */
.kgh-rev{background:var(--bfd-color-surface)}
.kgh-vend{border:2px dashed var(--bfd-color-line);border-radius:var(--bfd-radius-l);background:#fff;padding:48px 32px;text-align:center;color:var(--bfd-color-muted)}
.kgh-vend .tag{font-family:var(--bfd-font-heading);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bfd-color-accent);margin-bottom:10px}
.kgh-vend code{background:var(--bfd-color-wash);padding:2px 8px;border-radius:6px;font-size:13px;color:var(--bfd-color-ink)}
.kgh-rev-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.kgh-rev-links a{font-family:var(--bfd-font-heading);font-weight:600;font-size:14px;color:var(--bfd-color-forest);border:1px solid var(--bfd-color-line);border-radius:999px;padding:9px 18px;background:#fff;text-decoration:none}

/* ---------- Service area ---------- */
.kgh-area-in{background:var(--bfd-gradient-forest);border-radius:var(--bfd-radius-l);padding:clamp(34px,5vw,56px);color:#fff;text-align:center}
.kgh-area-in h2{color:#fff}
.kgh-area-in p{color:#CFE3D6;max-width:52ch;margin:12px auto 0}
.kgh-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.kgh-chips span{font-family:var(--bfd-font-heading);font-size:13.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 16px}

/* ---------- CTA band ---------- */
.kgh-cta{position:relative;border-radius:var(--bfd-radius-l);overflow:hidden;padding:clamp(48px,7vw,78px) 32px;text-align:center;color:#fff;background:var(--bfd-gradient-accent)}
.kgh-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 50% 0%,rgba(0,0,0,.05),rgba(0,0,0,.35))}
.kgh-cta>*{position:relative}
.kgh-cta h2{color:#fff;margin:0}
.kgh-cta p{color:rgba(255,255,255,.92);font-size:18px;max-width:46ch;margin:14px auto 28px}
.kgh-cta .bfd-btn{background:#fff;color:var(--bfd-color-accent)}
.kgh-cta .kgh-phone-big{display:block;font-family:var(--bfd-font-heading);font-weight:800;font-size:clamp(26px,4vw,38px);color:#fff;margin-top:22px;letter-spacing:-.02em;text-decoration:none}

/* ---------- Footer refinements ---------- */
.bfd-footer-note,.bfd-footer-tag{font-family:var(--bfd-font-heading)}