/*
Theme Name: Add Solar & Electrical
Theme URI: https://addsolarelectrical.com
Author: Add Solar & Electrical
Description: Custom theme for Add Solar & Electrical — licensed solar & electrical contractor in Miami, FL. Navy/brass corporate design system.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: addsolar
*/

/* =========================================================
   Add Solar & Electrical — Design System
   Navy / brass, "licensed contractor" institutional feel
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --navy-900:#0B1E33;
  --navy-800:#122C48;
  --navy-700:#1B3E60;
  --brass:#B98B2E;
  --brass-light:#D9B463;
  --paper:#F4F5F3;
  --white:#FCFCFB;
  --ink:#101820;
  --gray:#5B6472;
  --line:rgba(16,24,32,0.13);
  --line-on-navy:rgba(255,255,255,0.16);

  --font-display:'Spectral', Georgia, serif;
  --font-body:'IBM Plex Sans', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;max-width:62ch;}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- Header ---------- */
.site-header{
  background:var(--navy-900);
  color:var(--white);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line-on-navy);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 32px;
  max-width:1180px;
  margin:0 auto;
}

/* Brand: icon only in the top bar (the company name lives in .site-name-bar below) */
.brand{display:flex;align-items:center;}
.brand-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(252,252,251,0.96);
  border-radius:50%;
  width:44px;
  height:44px;
  padding:5px;
  flex:0 0 auto;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;}

.main-nav{
  display:flex;
  align-items:center;
  gap:30px;
}
.main-nav ul{
  list-style:none;
  display:flex;
  gap:26px;
  margin:0;
  padding:0;
  font-size:0.93rem;
}
.main-nav a{
  color:rgba(252,252,251,0.85);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .15s, color .15s;
}
.main-nav li.has-submenu{position:relative;}
.main-nav .submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--navy-900);
  border:1px solid var(--line-on-navy);
  min-width:200px;
  padding:6px 0;
  z-index:60;
  list-style:none;
  margin:0;
}
.main-nav li.has-submenu:hover .submenu,
.main-nav li.has-submenu:focus-within .submenu{display:block;}
.main-nav .submenu li{width:100%;}
.main-nav .submenu a{display:block;padding:10px 18px;white-space:nowrap;border-bottom:none;}
.main-nav .submenu a:hover{background:rgba(255,255,255,0.06);}

.main-nav a:hover, .main-nav a.active{
  color:var(--white);
  border-bottom-color:var(--brass);
}
.main-nav li.current-menu-item > a,
.main-nav li.current_page_item > a,
.main-nav li.current-menu-ancestor > a{
  color:var(--white);
  border-bottom-color:var(--brass);
}
.header-cta{
  display:flex;
  align-items:center;
  gap:18px;
}
.header-phone{
  font-family:var(--font-mono);
  font-size:0.92rem;
  color:var(--brass-light);
  white-space:nowrap;
}
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  padding:12px 22px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.btn-brass{
  background:var(--brass);
  color:var(--navy-900);
}
.btn-brass:hover{background:var(--brass-light);}
.btn-outline{
  background:transparent;
  border-color:rgba(252,252,251,0.4);
  color:var(--white);
}
.btn-outline:hover{border-color:var(--white);}
.btn-outline-dark{
  background:transparent;
  border-color:var(--navy-800);
  color:var(--navy-800);
}
.btn-outline-dark:hover{background:var(--navy-900);color:var(--white);border-color:var(--navy-900);}

.mobile-toggle{display:none;}

/* ---------- Site-name bar ----------
   Sits between the nav and the hero/page-header on every page. Transparent,
   pulled down (negative margin) to visually overlap the top of the hero
   photo below it, so the company name reads as if it's floating on the photo. */
.site-name-bar{
  background:transparent;
  padding:14px 0 0;
  position:relative;
  z-index:3;
  margin-bottom:-68px;
  pointer-events:none;
}
.site-name-bar .container{pointer-events:none;}
.site-name-bar .site-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.35rem;
  color:var(--white);
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}

/* ---------- Hero ---------- */
.hero{
  background:var(--navy-900) center/cover no-repeat;
  color:var(--white);
  position:relative;
  overflow:hidden;
  z-index:1;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, rgba(9,22,38,0.72) 0%, rgba(9,22,38,0.58) 38%, rgba(9,22,38,0.32) 68%, rgba(9,22,38,0.18) 100%),
    radial-gradient(ellipse at 85% 20%, rgba(185,139,46,0.14), transparent 55%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:44px 32px 56px;
  display:grid;
  grid-template-columns:1.35fr 0.9fr;
  gap:56px;
  align-items:end;
  min-height:30vh;
}

/* trust strip beneath hero */
.trust-strip{
  background:var(--navy-800);
  border-top:1px solid var(--line-on-navy);
  border-bottom:1px solid var(--line-on-navy);
  padding:22px 0;
}
.trust-strip .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.trust-strip img{height:46px;width:auto;opacity:0.92;}
.trust-strip .trust-label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.07em;
  color:var(--brass-light);
  flex:0 0 auto;
}

/* image frame with blueprint-style corner brackets */
.frame{position:relative;padding:16px;}
.frame::before,.frame::after{
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  pointer-events:none;
}
.frame::before{top:0;left:0;border-top:2px solid var(--brass);border-left:2px solid var(--brass);}
.frame::after{bottom:0;right:0;border-bottom:2px solid var(--brass);border-right:2px solid var(--brass);}
.frame img{width:100%;display:block;object-fit:cover;}
.frame.frame-navy::before,.frame.frame-navy::after{border-color:var(--brass-light);}

/* image-topped service cards */
.service-grid-v2{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.service-card{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--white);
  transition:box-shadow .15s;
}
.service-card .thumb{
  aspect-ratio:4/3;
  overflow:hidden;
  position:relative;
}
.service-card .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.service-card:hover .thumb img{transform:scale(1.04);}
.service-card .thumb::after{
  content:"";
  position:absolute;inset:0;
  box-shadow:inset 0 -40px 40px -20px rgba(11,30,51,0.35);
}
.service-card .body{padding:24px 22px 26px;}
.service-card .num{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--brass);
  display:block;
  margin-bottom:10px;
}
.service-card h3{font-size:1.1rem;margin-bottom:8px;}
.service-card p{font-size:0.92rem;color:var(--gray);margin-bottom:14px;}
.service-card a.more{
  font-size:0.85rem;font-weight:600;color:var(--navy-800);
  border-bottom:1px solid var(--brass);padding-bottom:2px;
}
@media (max-width:920px){
  .service-grid-v2{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .service-grid-v2{grid-template-columns:1fr;}
}
.service-grid-v2.blog-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:920px){.service-grid-v2.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.service-grid-v2.blog-grid{grid-template-columns:1fr;}}

/* project showcase strip */
.project-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:var(--line);
}
.project-item{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--navy-900);
}
.project-item img{
  width:100%;height:100%;object-fit:cover;
  opacity:0.88;
  transition:transform .4s ease, opacity .2s ease;
}
.project-item:hover img{transform:scale(1.05);opacity:1;}
.project-item .label{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 16px 14px;
  background:linear-gradient(0deg, rgba(9,22,38,0.92), transparent);
  color:var(--white);
  font-size:0.88rem;
  font-weight:600;
}
@media (max-width:860px){.project-strip{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.project-strip{grid-template-columns:1fr;}}

/* certification block with image */
.cert-block{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:0;
  border:1px solid var(--line-on-navy);
}
.cert-block .cert-img{height:100%;min-height:280px;overflow:hidden;}
.cert-block .cert-img img{width:100%;height:100%;object-fit:cover;}
.cert-block .cert-text{padding:38px 42px;}
@media (max-width:820px){.cert-block{grid-template-columns:1fr;}.cert-block .cert-img{min-height:220px;}}

.hero-eyebrow-rule{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  color:var(--brass-light);
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.03em;
}
.hero-eyebrow-rule .rule{
  flex:0 0 40px;
  height:1px;
  background:var(--brass);
}
.hero h1{
  font-size:clamp(2.2rem, 4.2vw, 3.6rem);
  max-width:14ch;
  margin-bottom:0.35em;
  letter-spacing:-0.015em;
}
.hero p.lede{
  font-size:1.08rem;
  color:rgba(252,252,251,0.82);
  max-width:46ch;
  margin-bottom:1.1em;
}
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* permit / spec tag block on hero */
.spec-tag{
  border:1px solid rgba(217,180,99,0.4);
  background:rgba(9,22,38,0.55);
  backdrop-filter:blur(6px);
  padding:26px 26px 22px;
  align-self:start;
  margin-top:8px;
}
.spec-tag-title{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--brass-light);
  border-bottom:1px solid rgba(217,180,99,0.3);
  padding-bottom:12px;
  margin-bottom:14px;
}
.spec-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:0.88rem;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:rgba(252,252,251,0.86);
}
.spec-row:last-child{border-bottom:none;}
.spec-row span:first-child{color:rgba(252,252,251,0.55);}
.spec-row span:last-child{font-family:var(--font-mono);text-align:right;}

/* ---------- Page header (sub pages) ---------- */
.page-header{
  background:var(--navy-900);
  color:var(--white);
  padding:76px 0 64px;
  position:relative;
  overflow:hidden;
  z-index:1;
}
.page-header .rule-label{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--brass-light);
  font-family:var(--font-mono);
  font-size:0.78rem;
  margin-bottom:18px;
  position:relative;
  z-index:1;
}
.page-header .rule-label .rule{flex:0 0 40px;height:1px;background:var(--brass);}
.page-header h1{font-size:clamp(2.2rem,4vw,3.2rem);max-width:22ch;position:relative;z-index:1;letter-spacing:-0.015em;}
.page-header p.lede{color:rgba(252,252,251,0.8);font-size:1.05rem;max-width:56ch;position:relative;z-index:1;}

/* ---------- Sections ---------- */
section{padding:76px 0;}
.section-tight{padding:56px 0;}
.section-navy{background:var(--navy-900);color:var(--white);}
.section-navy p{color:rgba(252,252,251,0.78);}
.section-white{background:var(--white);}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:44px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
}
.section-navy .section-head{border-bottom-color:var(--line-on-navy);}
.section-head h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:0;max-width:20ch;letter-spacing:-0.01em;}
.section-head .section-note{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--gray);
  max-width:32ch;
  text-align:right;
}
.section-navy .section-head .section-note{color:var(--brass-light);}

/* ---------- Service columns (spec-sheet style, no cards) ---------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.service-col{
  padding:30px 26px 30px 0;
  border-right:1px solid var(--line);
}
.service-col:first-child{padding-left:0;}
.service-col:last-child{border-right:none;}
.service-col .num{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--brass);
  display:block;
  margin-bottom:14px;
}
.service-col h3{font-size:1.15rem;margin-bottom:10px;}
.service-col p{font-size:0.94rem;color:var(--gray);margin-bottom:14px;}
.service-col a.more{
  font-size:0.86rem;
  font-weight:600;
  color:var(--navy-800);
  border-bottom:1px solid var(--brass);
  padding-bottom:2px;
}

@media (max-width:920px){
  .service-grid{grid-template-columns:1fr 1fr;}
  .service-col{border-right:1px solid var(--line);}
  .service-col:nth-child(2n){border-right:none;}
  .service-col{padding:24px 20px;}
}
@media (max-width:600px){
  .service-grid{grid-template-columns:1fr;}
  .service-col{border-right:none !important;border-bottom:1px solid var(--line);}
}

/* ---------- Checklist (why choose us) ---------- */
.check-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px 40px;
}
.check-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 0;
  border-bottom:1px solid var(--line-on-navy);
}
.check-item .mark{
  flex:0 0 22px;
  height:22px;
  border:1px solid var(--brass);
  color:var(--brass-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:0.8rem;
  margin-top:2px;
}
.check-item p{margin:0;font-size:0.98rem;color:rgba(252,252,251,0.85);}
@media (max-width:760px){.check-grid{grid-template-columns:1fr;}}

/* ---------- Two column layout ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px;}}

/* ---------- Service areas list ---------- */
.area-list{
  list-style:none;
  padding:0;
  margin:0;
  font-family:var(--font-mono);
  font-size:0.92rem;
}
.area-list li{
  padding:12px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
}
.area-list li span:first-child{color:var(--ink);font-family:var(--font-body);font-weight:600;}
.area-list li span:last-child{color:var(--gray);text-align:right;}

/* ---------- Hero credential badges ---------- */
.hero-badges-label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:rgba(252,252,251,0.65);
  margin-top:16px;
  margin-bottom:8px;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.hero-badge{
  background:rgba(252,252,251,0.14);
  border:1px solid rgba(252,252,251,0.22);
  padding:10px 16px;
  display:flex;
  align-items:center;
  height:60px;
}
.hero-badge img{height:50px;width:auto;display:block;}

.callout{
  background:var(--paper);
  border-left:3px solid var(--brass);
  padding:34px 38px;
}
.callout h3{margin-bottom:10px;font-size:1.3rem;}

/* ---------- Blueprint grid texture ---------- */
.grid-texture{position:relative;}
.grid-texture::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(217,180,99,0.06) 0, rgba(217,180,99,0.06) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(217,180,99,0.06) 0, rgba(217,180,99,0.06) 1px, transparent 1px, transparent 64px);
  pointer-events:none;
  z-index:0;
}
.grid-texture > *{position:relative;z-index:1;}

/* ---------- Diagonal cut between sections ---------- */
.diagonal-cut{
  position:relative;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 64px), 0 100%);
  padding-bottom:70px !important;
}
@media (max-width:760px){
  .diagonal-cut{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);padding-bottom:70px !important;}
}

/* ---------- Stat bar ---------- */
.stat-bar{
  border-top:1px solid var(--line-on-navy);
  border-bottom:1px solid var(--line-on-navy);
}
.stat-bar-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:0 !important;
}
.stat-item{
  padding:34px 24px;
  border-right:1px solid var(--line-on-navy);
  text-align:left;
}
.stat-item:last-child{border-right:none;}
.stat-item .stat-num{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,2.6vw,2.4rem);
  color:var(--brass-light);
  font-weight:600;
  display:block;
  margin-bottom:6px;
  line-height:1;
}
.stat-item .stat-label{
  font-family:var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.04em;
  color:rgba(252,252,251,0.68);
}
@media (max-width:760px){
  .stat-bar-grid{grid-template-columns:1fr 1fr;}
  .stat-item{border-bottom:1px solid var(--line-on-navy);}
}

/* ---------- Big-numeral process steps ---------- */
.process-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.process-step{
  padding:34px 28px 30px 0;
  border-right:1px solid var(--line);
  position:relative;
}
.process-step:last-child{border-right:none;}
.process-step .step-num{
  font-family:var(--font-display);
  font-size:3.4rem;
  font-weight:600;
  color:var(--brass);
  opacity:0.85;
  line-height:1;
  display:block;
  margin-bottom:14px;
}
.process-step h3{font-size:1.05rem;margin-bottom:8px;}
.process-step p{font-size:0.9rem;color:var(--gray);margin:0;}
@media (max-width:860px){
  .process-steps{grid-template-columns:1fr 1fr;}
  .process-step{border-right:1px solid var(--line);padding:26px 20px;}
  .process-step:nth-child(2n){border-right:none;}
}
@media (max-width:560px){
  .process-steps{grid-template-columns:1fr;}
  .process-step{border-right:none !important;border-bottom:1px solid var(--line);}
}

/* ---------- FAQ accordion ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:22px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:1.4rem;
  color:var(--brass);
  flex:0 0 auto;
  transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{
  padding:0 4px 22px;
  color:var(--gray);
  font-size:0.96rem;
  max-width:70ch;
}

/* ---------- Price / cost stat blocks ---------- */
.price-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
  margin:28px 0;
}
.price-box{
  border:1px solid var(--line);
  padding:22px 22px 20px;
}
.price-box .amount{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:600;
  color:var(--navy-800);
  display:block;
  margin-bottom:4px;
}
.price-box .amount-label{
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:var(--gray);
}

/* ---------- Tag list (recalled panels / signs / brands) ---------- */
.tag-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.tag-list span{
  font-family:var(--font-mono);
  font-size:0.78rem;
  padding:7px 14px;
  border:1px solid var(--brass);
  color:var(--navy-800);
}
.section-navy .tag-list span{color:var(--brass-light);border-color:rgba(217,180,99,0.4);}
.tag-list.tag-alert span{border-color:#B4432E;color:#8A3020;}
.section-navy .tag-list.tag-alert span{border-color:#E8654F;color:#FF9280;}

/* ---------- Article prose ---------- */
.article-body{max-width:74ch;}
.article-body h2{font-size:1.5rem;margin-top:2em;}
.article-body h3{font-size:1.15rem;margin-top:1.6em;}
.article-body p{font-size:1rem;color:var(--ink);max-width:74ch;}
.article-body ul{padding-left:1.2em;margin-bottom:1.2em;}
.article-body li{margin-bottom:0.5em;color:var(--ink);}
.article-body figure{margin:1.8em 0;}
.article-body figcaption{font-family:var(--font-mono);font-size:0.78rem;color:var(--gray);margin-top:8px;}
.article-meta{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--gray);
  margin-bottom:24px;
}
.article-table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:0.92rem;}
.article-table th,.article-table td{border:1px solid var(--line);padding:10px 14px;text-align:left;}
.article-table th{background:var(--paper);font-family:var(--font-mono);font-size:0.76rem;}
.related-links{list-style:none;padding:0;margin:1.5em 0;}
.related-links li{padding:10px 0;border-bottom:1px solid var(--line);}
.related-links a{font-weight:600;color:var(--navy-800);border-bottom:1px solid var(--brass);padding-bottom:1px;}

/* ---------- Contact Form 7 styling ---------- */
.cf7-wrap .wpcf7-form p{margin:0 0 16px;}
.cf7-wrap .wpcf7-form label{
  display:block;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--gray);
  margin-bottom:6px;
}
.cf7-wrap .wpcf7-form input[type="text"],
.cf7-wrap .wpcf7-form input[type="email"],
.cf7-wrap .wpcf7-form input[type="tel"],
.cf7-wrap .wpcf7-form input[type="url"],
.cf7-wrap .wpcf7-form select,
.cf7-wrap .wpcf7-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--white);
  font-family:var(--font-body);
  font-size:0.95rem;
}
.cf7-wrap .wpcf7-form textarea{resize:vertical;}
.cf7-wrap .wpcf7-form input[type="submit"]{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  padding:12px 26px;
  border-radius:2px;
  border:1px solid var(--navy-800);
  background:transparent;
  color:var(--navy-800);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.cf7-wrap .wpcf7-form input[type="submit"]:hover{
  background:var(--navy-900);
  color:var(--white);
}
.cf7-wrap .wpcf7-not-valid-tip{
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:#B4432E;
  margin-top:4px;
}
.cf7-wrap .wpcf7-response-output{
  margin-top:20px;
  padding:14px 16px;
  border:1px solid var(--line);
  font-size:0.9rem;
}
.cf7-wrap .wpcf7-form.sent .wpcf7-response-output{border-color:#2E7D32;color:#2E7D32;}
.cf7-wrap .wpcf7-form.invalid .wpcf7-response-output,
.cf7-wrap .wpcf7-form.failed .wpcf7-response-output{border-color:#B4432E;color:#B4432E;}
.cf7-wrap .wpcf7-spinner{margin-left:10px;}

/* ---------- Pull quote / mini reviews ---------- */
.pull-quote{
  max-width:56ch;
  padding-left:28px;
  border-left:3px solid var(--brass);
}
.pull-quote p{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
  margin-bottom:20px;
}
.pull-quote .who{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--gray);
}
.pull-quote .who .stars{color:var(--brass);letter-spacing:0.1em;margin-right:10px;}
.mini-review-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  margin-top:44px;
}
.mini-review{
  padding:22px 24px 4px 0;
  border-right:1px solid var(--line);
}
.mini-review:nth-child(3n){border-right:none;}
.mini-review:nth-child(n+4){padding-top:24px;border-top:1px solid var(--line);}
.mini-review p{font-size:0.9rem;color:var(--gray);margin-bottom:10px;}
.mini-review .who{font-family:var(--font-mono);font-size:0.76rem;color:var(--navy-800);}
@media (max-width:760px){
  .mini-review-row{grid-template-columns:1fr;}
  .mini-review{border-right:none;border-bottom:1px solid var(--line);padding:20px 0;}
}

/* ---------- Reviews ---------- */
.review{
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.review:first-child{padding-top:0;}
.review-stars{
  color:var(--brass);
  font-size:0.85rem;
  font-family:var(--font-mono);
  margin-bottom:10px;
  letter-spacing:0.1em;
}
.review p{font-size:1rem;color:var(--ink);margin-bottom:8px;}
.review .who{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--gray);
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--navy-900);
  color:var(--white);
  padding:64px 0;
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 15% 50%, rgba(185,139,46,0.14), transparent 60%);
  pointer-events:none;
}
.cta-inner{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
.cta-inner h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 8px;max-width:20ch;}
.cta-inner p{margin:0;color:rgba(252,252,251,0.78);}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Financing strip (Ygrene, above the footer on every page) ---------- */
.financing-strip{
  background:var(--navy-800);
  border-top:1px solid var(--line-on-navy);
  padding:20px 0;
}
.financing-strip .container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  text-align:center;
}
.financing-strip img{height:32px;width:auto;}
.financing-strip p{
  margin:0;
  color:rgba(252,252,251,0.85);
  font-size:0.92rem;
  max-width:44ch;
}
.financing-strip .btn{padding:8px 18px;font-size:0.82rem;flex:0 0 auto;}
@media (max-width:600px){
  .financing-strip .container{flex-direction:column;gap:12px;}
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-900);
  color:rgba(252,252,251,0.68);
  padding:56px 0 26px;
  border-top:1px solid var(--line-on-navy);
  font-size:0.92rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:36px;
  border-bottom:1px solid var(--line-on-navy);
}
.footer-grid h4{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  color:var(--brass-light);
  margin-bottom:16px;
  font-weight:500;
}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a:hover{color:var(--white);}
.footer-brand{font-family:var(--font-display);color:var(--white);font-size:1.2rem;margin-bottom:12px;font-weight:700;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:22px;
  font-size:0.8rem;
}
.footer-bottom .social-icons{display:flex;align-items:center;gap:16px;}
.footer-bottom .social-icons a{
  color:rgba(252,252,251,0.68);
  display:inline-flex;
  transition:color .15s;
}
.footer-bottom .social-icons a:hover{color:var(--brass-light);}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;}
.text-center{text-align:center;}

/* ---------- Mobile nav ---------- */
@media (max-width:960px){
  .header-inner{padding:12px 16px;gap:10px;}
  .brand-mark{width:34px;height:34px;flex:0 0 34px;}
  .header-cta{gap:8px;}
  .header-cta .btn{padding:9px 12px;font-size:0.82rem;white-space:nowrap;}
  .mobile-toggle{flex:0 0 auto;}
  .main-nav{display:none;}
  .main-nav.is-open{
    display:flex;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--navy-900);
    border-bottom:1px solid var(--line-on-navy);
    padding:8px 24px 20px;
  }
  .main-nav.is-open ul{
    flex-direction:column;
    gap:0;
    width:100%;
  }
  .main-nav.is-open li{width:100%;}
  .main-nav.is-open a{
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--line-on-navy);
  }
  .main-nav.is-open .submenu{
    display:block;
    position:static;
    background:rgba(255,255,255,0.04);
    border:none;
    padding:0 0 0 16px;
  }
  .main-nav.is-open .submenu a{padding:12px 0;}
  .header-phone{display:none;}
  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent;
    border:1px solid rgba(252,252,251,0.35);
    color:var(--white);
    padding:9px 14px;
    font-family:var(--font-body);
    font-size:0.85rem;
  }
  .hero-inner{grid-template-columns:1fr;}
  .site-name-bar .site-name{font-size:1.1rem;}
}

/* Home hero: on tall narrow mobile screens, "cover" always crops/zooms no
   matter the position, since the content column is much taller than the
   photo's own aspect ratio. Show the full photo uncropped instead (smaller,
   pinned to the top), so the whole scene is visible at once. */
@media (max-width:600px){
  body.home .hero{
    background-size:contain !important;
    background-position:top center !important;
    background-repeat:no-repeat !important;
  }
}