/*
Theme Name: Hanover Gutters — Ember
Theme URI: https://hanovergutterinstallation.com
Author: PFAM Ventures LLC
Author URI: https://hanovergutterinstallation.com
Description: A clean, photo-forward theme for the Hanover Gutter Installation referral site. Steel blue and white with vivid orange calls to action. Bundles the approved site copy, embeds the existing WPForms quote form, and changes no URLs, titles, or settings.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hanover-gutters-ember
*/

/* ---------- Tokens & base ---------- */
:root{
  --steel:#1d4e7e;
  --steel-dark:#143a5f;
  --steel-deep:#0e2c49;
  --ink:#2b3440;
  --muted:#5b6774;
  --tint:#edf2f6;
  --line:#d7e0e8;
  --orange:#f26a1b;
  --orange-dark:#d3540d;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 10px 30px rgba(14,44,73,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel)}
a:hover{color:var(--steel-dark)}
::selection{background:var(--steel);color:#fff}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.hge-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.hge-skip{position:absolute;left:-999px;top:0;background:var(--steel-deep);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.hge-skip:focus{left:0;color:#fff}

/* ---------- Buttons ---------- */
.hge-btn{
  display:inline-block;
  font-weight:700;
  font-size:16px;
  line-height:1.3;
  text-decoration:none;
  padding:13px 26px;
  border-radius:9px;
  border:2px solid transparent;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.hge-btn-cta{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(242,106,27,.35)}
.hge-btn-cta:hover{background:var(--orange-dark);color:#fff;transform:translateY(-1px)}
.hge-btn-lg{font-size:18px;padding:16px 34px}
.hge-btn-light{background:#fff;color:var(--steel-dark)}
.hge-btn-light:hover{background:var(--tint);color:var(--steel-deep)}

/* ---------- Top bar ---------- */
.hge-topbar{background:var(--steel-deep);color:#d9e7f3;font-size:13.5px}
.hge-topbar-in{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.hge-topbar strong{color:#fff;font-weight:700}

/* ---------- Header ---------- */
.hge-header{
  position:sticky;top:0;z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(14,44,73,.06);
}
body.admin-bar .hge-header{top:32px}
@media (max-width:782px){body.admin-bar .hge-header{top:46px}}
.hge-header-in{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}

/* Logo lockup: house glyph + HANOVER / GUTTER INSTALLATION */
.hge-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.hge-logo:hover{text-decoration:none}
.hge-logo-mark{font-size:37px;line-height:1;color:var(--orange);transform:translateY(-2px)}
.hge-logo-text{display:flex;flex-direction:column;line-height:1.05}
.hge-logo-name{font-size:23px;font-weight:800;letter-spacing:.05em;color:var(--steel-dark)}
.hge-logo-sub{font-size:9.5px;font-weight:700;letter-spacing:.34em;color:var(--steel);margin-top:3px}
.hge-logo-light .hge-logo-name{color:#fff}
.hge-logo-light .hge-logo-sub{color:#bcd6ee}

.hge-nav{margin-left:auto}
.hge-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.hge-nav a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px;
  padding:6px 2px;border-bottom:3px solid transparent;
}
.hge-nav a:hover{color:var(--steel);border-bottom-color:var(--orange)}
.hge-header-cta{margin-left:6px;flex:none}

/* Mobile menu */
.hge-mnav{display:none;position:relative;margin-left:auto}
.hge-mnav summary{
  list-style:none;cursor:pointer;
  font-weight:700;font-size:15px;color:var(--steel-dark);
  border:2px solid var(--steel);border-radius:9px;padding:9px 16px;background:#fff;
}
.hge-mnav summary::-webkit-details-marker{display:none}
.hge-mnav summary::before{content:"\2630\00a0\00a0"}
.hge-mnav nav{
  position:absolute;right:0;top:calc(100% + 12px);width:280px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:10px;z-index:120;
}
.hge-mnav nav a{display:block;padding:11px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px}
.hge-mnav nav a:hover{background:var(--tint);color:var(--steel)}
.hge-mnav nav a.hge-mnav-cta{background:var(--orange);color:#fff;text-align:center;margin-top:6px}
.hge-mnav nav a.hge-mnav-cta:hover{background:var(--orange-dark);color:#fff}

/* ---------- Hero ---------- */
.hge-hero{position:relative;background:var(--steel-deep);color:#fff;overflow:hidden}
.hge-hero-media{position:absolute;inset:0}
.hge-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hge-hero-shade{position:absolute;inset:0;background:linear-gradient(92deg,rgba(11,33,55,.88) 0%,rgba(11,33,55,.72) 46%,rgba(11,33,55,.28) 78%,rgba(11,33,55,.12) 100%)}
.hge-hero-in{position:relative;padding-top:92px;padding-bottom:96px}
.hge-hero-text{max-width:660px}
.hge-eyebrow{
  display:inline-block;margin:0 0 16px;padding:6px 14px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#eaf3fb;
}
.hge-hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.12;font-weight:800;letter-spacing:-.01em;margin:0 0 20px;color:#fff}
.hge-hero-copy{font-size:18.5px;line-height:1.6;color:#e7eff7;max-width:600px}
.hge-hero-copy p{margin:0 0 14px}
.hge-hero-copy strong{color:#fff}
.hge-hero .hge-btn{margin-top:14px}
.hge-hero-note{margin:16px 0 0;font-size:14px;color:#c9dcee}
.hge-photo-tag{
  position:absolute;right:18px;bottom:14px;z-index:2;
  font-size:12px;color:#eaf3fb;background:rgba(11,33,55,.55);
  padding:4px 10px;border-radius:999px;letter-spacing:.02em;
}

/* ---------- Trust strip ---------- */
.hge-trust{background:var(--steel);color:#fff}
.hge-trust-in{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:18px;padding-bottom:18px;text-align:center}
.hge-trust span{font-weight:700;font-size:16px}
.hge-trust span::before{content:"\2713\00a0\00a0";color:#ffb287;font-weight:800}

/* ---------- Sections ---------- */
.hge-section{padding:76px 0}
.hge-section-tint{background:var(--tint)}
.hge-h2{
  font-size:clamp(26px,3vw,34px);line-height:1.2;font-weight:800;color:var(--steel-dark);
  margin:0 0 14px;letter-spacing:-.01em;
}
.hge-h2::after{content:"";display:block;width:58px;height:4px;border-radius:2px;background:var(--orange);margin-top:14px}
.hge-lede{color:var(--muted);max-width:760px;margin:0 0 36px}

/* How it works — numbered step cards */
.hge-steps ol{
  counter-reset:hge-step;list-style:none;margin:38px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.hge-steps li{
  counter-increment:hge-step;position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:58px 26px 26px;box-shadow:0 4px 16px rgba(14,44,73,.05);
}
.hge-steps li::before{
  content:counter(hge-step);
  position:absolute;top:22px;left:26px;
  width:38px;height:38px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;
}
.hge-steps li strong{display:block;font-size:18.5px;color:var(--steel-dark);margin-bottom:8px}
.hge-steps li{color:var(--muted);font-size:16px}

/* Services — photo cards + full list */
.hge-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:38px 0 40px}
.hge-card{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:0 4px 16px rgba(14,44,73,.06);
  text-decoration:none;color:var(--ink);
  transition:transform .18s ease,box-shadow .18s ease;
}
.hge-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--ink)}
.hge-card-media{aspect-ratio:4/2.6;overflow:hidden;background:var(--tint)}
.hge-card-media img{width:100%;height:100%;object-fit:cover}
.hge-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.hge-card-title{font-size:19.5px;font-weight:800;color:var(--steel-dark);line-height:1.25}
.hge-card-desc{color:var(--muted);font-size:15.5px;flex:1}
.hge-card-link{font-weight:700;color:var(--orange);font-size:15.5px}
.hge-card:hover .hge-card-link{color:var(--orange-dark)}
.hge-svc-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 32px}
.hge-svc-list h3{margin:0 0 16px;font-size:19px;color:var(--steel-dark)}
.hge-svc-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 36px}
.hge-svc-list li{position:relative;padding-left:30px;color:var(--muted);font-size:16px}
.hge-svc-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--orange);font-weight:800}
.hge-svc-list li strong{color:var(--ink)}

/* Signs — warning list */
.hge-signs-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.hge-signs ul{list-style:none;margin:26px 0 20px;padding:0}
.hge-signs li{
  position:relative;padding:13px 0 13px 46px;border-bottom:1px solid var(--line);
  font-size:17px;color:var(--ink);
}
.hge-signs li::before{
  content:"!";position:absolute;left:0;top:11px;
  width:28px;height:28px;border-radius:50%;
  border:2px solid var(--orange);color:var(--orange-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
}
.hge-signs p{color:var(--muted)}
.hge-signs-photo img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover}
.hge-signs-photo figcaption,.hge-why-photo figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* Why — text + photo */
.hge-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hge-why-photo img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover}
.hge-why-list ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px}
.hge-why-list li{position:relative;padding-left:34px;color:var(--muted);font-size:16.5px}
.hge-why-list li::before{
  content:"\2713";position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:50%;background:var(--steel);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.hge-why-list li strong{display:block;color:var(--steel-dark);font-size:17.5px;margin-bottom:2px}

/* Costs */
.hge-costs .hge-cost-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px;box-shadow:0 4px 16px rgba(14,44,73,.05)}
.hge-costs p{color:var(--muted)}
.hge-costs ul{list-style:none;margin:22px 0;padding:0;display:grid;gap:14px}
.hge-costs li{
  background:var(--tint);border-left:5px solid var(--orange);border-radius:8px;
  padding:18px 22px;color:var(--ink);font-size:16.5px;
}
.hge-costs li strong{color:var(--steel-dark);font-size:19px}
.hge-cost-note{font-size:14px;color:var(--muted);margin:0}

/* Service area */
.hge-area-copy{max-width:820px;color:var(--muted);font-size:17px}
.hge-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.hge-chips li{
  border:1.5px solid var(--steel);color:var(--steel-dark);font-weight:700;font-size:15px;
  padding:8px 18px;border-radius:999px;background:#fff;
}
.hge-chips li.hge-chip-main{background:var(--steel);color:#fff}

/* FAQ accordions */
.hge-faq{max-width:880px}
.hge-faq details{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  margin-bottom:12px;overflow:hidden;
}
.hge-faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:19px 52px 19px 22px;font-weight:700;font-size:17px;color:var(--steel-dark);
}
.hge-faq summary::-webkit-details-marker{display:none}
.hge-faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--orange);font-size:26px;font-weight:800;line-height:1;
}
.hge-faq details[open ] summary::after{content:"\2013"}
.hge-faq .hge-faq-a{padding:0 22px 20px;color:var(--muted);font-size:16px}
.hge-faq .hge-faq-a p{margin:0}

/* ---------- Quote form section ---------- */
.hge-quote{background:linear-gradient(135deg,var(--steel) 0%,var(--steel-dark) 60%,var(--steel-deep) 100%);color:#fff;scroll-margin-top:96px}
.hge-quote-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;padding-top:76px;padding-bottom:76px;align-items:start}
.hge-quote-text h2{font-size:clamp(26px,3vw,34px);font-weight:800;margin:0 0 16px;color:#fff;line-height:1.2}
.hge-quote-text p{color:#d9e7f3;font-size:17px;margin:0 0 14px}
.hge-quote-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.hge-quote-points li{position:relative;padding-left:32px;color:#e7eff7;font-size:16px}
.hge-quote-points li::before{content:"\2713";position:absolute;left:0;top:0;color:#ffb287;font-weight:800;font-size:18px}
.hge-form-card{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 18px 44px rgba(6,22,38,.35);padding:32px 34px}
.hge-form-card .wpforms-container{margin:0}
.hge-form-card .wpforms-field{padding:9px 0}
.hge-form-card label.wpforms-field-label{font-size:14.5px;font-weight:700;color:var(--steel-dark)}
.hge-form-card .wpforms-field-sublabel{color:var(--muted)}
.hge-form-card input[type="text"],
.hge-form-card input[type="email"],
.hge-form-card input[type="tel"],
.hge-form-card select,
.hge-form-card textarea{
  width:100%;border:1.5px solid #bfcfdd;border-radius:8px;
  padding:11px 13px;font-size:16px;color:var(--ink);background:#fff;
}
.hge-form-card input:focus,.hge-form-card select:focus,.hge-form-card textarea:focus{
  border-color:var(--steel);outline:3px solid rgba(29,78,126,.22);outline-offset:1px;
}
.hge-form-card .wpforms-field-checkbox label{font-size:13.5px;line-height:1.55;color:var(--muted);font-weight:400}
.hge-form-card button[type="submit"],
.hge-form-card .wpforms-submit{
  background:var(--orange)!important;border:0!important;border-radius:9px!important;
  color:#fff!important;font-weight:700!important;font-size:17px!important;
  padding:15px 28px!important;width:100%;cursor:pointer;
  box-shadow:0 6px 18px rgba(242,106,27,.35);
}
.hge-form-card button[type="submit"]:hover,.hge-form-card .wpforms-submit:hover{background:var(--orange-dark)!important}
.hge-form-note{font-size:13.5px;color:var(--muted);margin:16px 0 0;text-align:center}
.hge-form-missing{background:#fdf0e7;border:1.5px dashed var(--orange-dark);color:#7a3a10;border-radius:10px;padding:18px 20px;font-size:15.5px}

/* ---------- Inner page banner ---------- */
.hge-banner{position:relative;background:var(--steel-deep);color:#fff;overflow:hidden}
.hge-banner-media{position:absolute;inset:0}
.hge-banner-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hge-banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,33,55,.86) 0%,rgba(11,33,55,.55) 60%,rgba(11,33,55,.30) 100%)}
.hge-banner-in{position:relative;padding-top:74px;padding-bottom:74px}
.hge-banner-slim .hge-banner-in{padding-top:40px;padding-bottom:40px}
.hge-banner h1{font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1.15;margin:0;max-width:820px;color:#fff}
.hge-banner .hge-crumb{font-size:14px;color:#c9dcee;margin:0 0 12px}
.hge-banner .hge-crumb a{color:#fff;text-decoration:none;font-weight:600}
.hge-banner .hge-crumb a:hover{text-decoration:underline}

/* ---------- Page body / prose ---------- */
.hge-page{padding-top:56px;padding-bottom:72px}
.hge-prose{max-width:840px}
.hge-prose p{margin:0 0 20px;color:#3c4653}
.hge-prose h2{font-size:26px;font-weight:800;color:var(--steel-dark);margin:42px 0 14px;line-height:1.25}
.hge-prose h2:first-child{margin-top:0}
.hge-prose ul{margin:0 0 22px;padding-left:22px;color:#3c4653}
.hge-prose li{margin-bottom:9px}
.hge-prose strong{color:var(--ink)}
.hge-prose a{font-weight:600}

/* CTA band */
.hge-ctaband{background:var(--steel)}
.hge-ctaband-in{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding-top:40px;padding-bottom:40px;
}
.hge-ctaband h2{color:#fff;font-size:clamp(23px,2.6vw,30px);font-weight:800;margin:0;line-height:1.25}
.hge-ctaband p{color:#d9e7f3;margin:6px 0 0;font-size:16px}

/* ---------- Footer ---------- */
.hge-footer{background:var(--steel);color:#d9e7f3;margin-top:0}
.hge-footer-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding-top:48px;padding-bottom:30px;
}
.hge-footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hge-footer-nav a{color:#eaf3fb;text-decoration:none;font-weight:600;font-size:15.5px}
.hge-footer-nav a:hover{color:#fff;text-decoration:underline}
.hge-footer-blurb{max-width:340px;font-size:15px;color:#bcd6ee;margin:14px 0 0}
.hge-disclosure{
  border-top:1px solid rgba(255,255,255,.25);
  padding-top:26px;font-size:13.5px;line-height:1.75;color:#c3d8ec;margin:0;
}
.hge-footer-bottom{
  border-top:1px solid rgba(255,255,255,.25);margin-top:26px;
  padding-top:20px;padding-bottom:26px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:#bcd6ee;
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hge-nav{display:none}
  .hge-mnav{display:block}
}
@media (max-width:900px){
  .hge-steps ol{grid-template-columns:1fr}
  .hge-cards{grid-template-columns:1fr}
  .hge-card-media{aspect-ratio:16/8}
  .hge-signs-grid,.hge-why-grid{grid-template-columns:1fr;gap:30px}
  .hge-quote-in{grid-template-columns:1fr;gap:34px;padding-top:56px;padding-bottom:56px}
  .hge-trust-in{grid-template-columns:1fr;gap:6px;text-align:left}
  .hge-svc-list ul{grid-template-columns:1fr}
  .hge-hero-in{padding-top:64px;padding-bottom:68px}
  .hge-section{padding:56px 0}
  .hge-header-cta{display:none}
  .hge-topbar-right{display:none}
  .hge-banner-in{padding-top:52px;padding-bottom:52px}
  .hge-ctaband-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  body{font-size:16px}
  .hge-logo-name{font-size:20px}
  .hge-logo-mark{font-size:31px}
  .hge-form-card{padding:24px 20px}
  .hge-costs .hge-cost-box{padding:26px 22px}
  .hge-svc-list{padding:22px}
  .hge-footer-top{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}