/* =========================================================
   THE DIVINITY GROUP — BOLD INDUSTRIAL DESIGN SYSTEM
   v2.0 — comprehensive design refresh
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- DESIGN TOKENS ---------- */
:root{
  /* Palette — warm parchment + ember + ink (LIGHT THEME) */
  /* Background family: warm light parchment tones */
  --bg:#FAFAF8;
  --bg-deep:#F5F3EF;
  --bg-warm:#FAFAF8;
  /* Panels: near-white warm cards that sit above the parchment bg */
  --panel:#ffffff;
  --panel-2:#F7F5F2;
  --panel-3:#F2EFE9;
  /* "ivory" family is used everywhere as PRIMARY TEXT — remap to deep ink */
  --ivory:#1a1208;
  --ivory-2:#2d2416;
  --cream:#3d3120;
  --muted:#5c4f38;
  --muted-2:#7a6e5a;
  /* Hairlines/rules: darker translucent so they read on light surfaces */
  --hair:rgba(180,140,80,.15);
  --hair-strong:rgba(180,140,80,.28);
  --rule:rgba(120,90,40,.10);
  --rule-2:rgba(120,90,40,.18);

  /* Gold spectrum — tuned for legible text on light parchment (≥3.5:1) */
  --gold:#E8720C;
  --gold-bright:#F07820;
  --gold-deep:#C05A08;
  --copper:#D4660A;
  --ember:#E8720C;
  /* Vivid golds reserved for use ON dark surfaces (hero, blueprint panels) */
  --gold-on-dark:#FF9A3C;
  --gold-on-dark-2:#F07820;

  /* Functional */
  --ok:#3f9d57;
  --warn:#E8720C;

  /* Layout */
  --max:1280px;
  --max-wide:1440px;
  --gutter:clamp(20px,4vw,56px);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;

  /* Type — used as fluid clamp values */
  --serif: "Inter Tight", "Arial", -apple-system, sans-serif;
  --sans:  "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Shadows — softened for light surfaces */
  --shade-sm: 0 4px 14px rgba(0,0,0,.12);
  --shade-md: 0 16px 40px rgba(0,0,0,.16);
  --shade-lg: 0 30px 70px rgba(0,0,0,.20);
  --shade-gold: 0 18px 50px rgba(232,114,12,.25);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ivory);
  line-height:1.65;
  overflow-x:hidden;
  font-size:17px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","ss02","cv01","cv03";
}
img,svg,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit;transition:color .35s var(--ease)}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
ul,ol{list-style:none}

/* Ambient grain — soft cinematic texture across the whole site */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- LAYOUT PRIMITIVES ---------- */
.container{
  width:min(var(--max),100% - var(--gutter)*2);
  margin-inline:auto;
  position:relative;
  z-index:2;
}
.narrow{max-width:760px}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:800;
  
  letter-spacing:-.01em;
  color:var(--ivory);
  line-height:1.02;
  text-wrap:balance;
}
h1{
  font-size:clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
  font-weight:340;
  letter-spacing:-.035em;
  margin-bottom:.55em;
  font-variation-settings:"opsz" 144, "SOFT" 50;
}
h1 em{
  font-style:italic;
  font-weight:700;
  color:var(--gold-bright);
  font-variation-settings:"opsz" 144, "SOFT" 100;
}
h2{
  font-size:clamp(1.75rem, 1.15rem + 2.0vw, 2.8rem);
  letter-spacing:-.025em;
  margin-bottom:.6em;
  line-height:1.05;
  font-weight:360;
}
h2 em{
  font-style:italic;
  font-weight:340;
  color:var(--gold-bright);
}
h3{
  font-family:var(--sans);
  font-size:clamp(1.05rem,.95rem + .35vw,1.25rem);
  font-weight:600;
  letter-spacing:-.005em;
  margin-bottom:.6em;
  line-height:1.25;
  color:var(--ivory);
}
h4{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:.9em;
}
p{
  color:var(--ivory-2);
  font-size:1.05rem;
  line-height:1.7;
  text-wrap:pretty;
}

/* Eyebrow — the editorial label */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  color:var(--gold-deep);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.92rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:2px;
  text-decoration-color:currentColor;
  margin-bottom:24px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:24px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.section-heading .eyebrow::before{background:linear-gradient(90deg, var(--gold), var(--copper))}

/* ---------- TOPBAR ---------- */
.topbar{
  background:var(--bg-deep);
  padding:7px 0;
  color:var(--muted);
  font-size:.70rem;
  letter-spacing:.04em;
  position:relative;
  z-index:50;
}
.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.topbar span{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.65rem;
  color:var(--muted);
}
.topbar a{
  color:var(--ivory);
  font-weight:500;
  font-size:.75rem;
  position:relative;
  padding-right:18px;
}
.topbar a::after{
  content:"→";
  position:absolute;
  right:0;
  color:var(--gold);
  transition:transform .4s var(--ease);
}
.topbar a:hover{color:#fff;background:#E8720C;border-color:#E8720C}
.topbar a:hover::after{transform:translateX(4px)}

/* ---------- NAVBAR ---------- */
.navbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(250,246,238,.90);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom:1px solid var(--rule);
  transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.navbar.scrolled{
  background:rgba(248,244,234,.97);
  border-bottom-color:var(--rule-2);
  box-shadow:0 8px 30px rgba(74,54,20,.06);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  transition:padding .35s var(--ease);
}
.navbar.scrolled .nav-inner{padding:12px 0}
.logo{
  display:inline-flex;
  align-items:center;
  position:relative;
}
.logo-img{
  height:62px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  object-position:left center;
  transition:transform .5s var(--ease);
}
.logo:hover .logo-img{transform:scale(1.02)}

.nav-links{
  display:flex;
  gap:6px;
  align-items:center;
}
.nav-links > li > a{
  color:var(--ivory-2);
  font-weight:500;
  font-size:.84rem;
  letter-spacing:.005em;
  padding:10px 14px;
  border-radius:8px;
  position:relative;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav-links > li > a:hover{color:var(--gold-bright)}
.nav-links > li > a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.nav-links > li > a:not(.nav-cta):hover::after{transform:scaleX(1)}

.nav-cta{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-bright) 60%,var(--copper) 100%);
  color:#1a140a!important;
  padding:10px 18px!important;
  border-radius:999px;
  font-weight:700!important;
  font-size:.78rem!important;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-left:8px;
  box-shadow: 0 4px 14px rgba(214,180,113,.25), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-cta:hover{
  color:#1a140a!important;
  transform:translateY(-1px);
  box-shadow: 0 8px 24px rgba(214,180,113,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.nav-cta::after{display:none!important}

/* Dropdown — editorial mega menu */
.dropdown{position:relative}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:-12px;
  min-width:480px;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:6px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--hair);
  border-radius:18px;
  padding:22px;
  box-shadow: var(--shade-lg), 0 0 0 1px rgba(214,180,113,.06);
  animation:dropIn .35s var(--ease-out);
}
.solar-mega-menu{
  grid-template-columns:1fr 1fr 1fr;
  min-width:660px;
}
.dropdown:hover .dropdown-menu{display:grid}
.dropdown-menu strong{
  display:block;
  font-family:var(--mono);
  color:var(--gold);
  margin-bottom:14px;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:500;
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}
.dropdown-menu a{
  display:block;
  padding:9px 11px;
  border-radius:8px;
  color:var(--ivory-2);
  font-size:.85rem;
  font-weight:400;
  transition:background .3s var(--ease), color .3s var(--ease), padding .3s var(--ease);
}
.dropdown-menu a:hover{
  background:rgba(214,180,113,.08);
  color:var(--gold-bright);
  padding-left:16px;
}
@keyframes dropIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

.menu-btn{
  display:none;
  font-size:1.5rem;
  color:#E8E8E8;
  padding:6px 10px;
  border-radius:8px;
  border:2px solid #E8720C;
  background:#1E1E1E;
  cursor:pointer;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-bright) 55%,var(--copper) 100%);
  color:#1a140a;
  border-radius:999px;
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .35s var(--ease);
  box-shadow: 0 8px 22px rgba(214,180,113,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--gold-bright),var(--copper));
  opacity:0;
  transition:opacity .4s var(--ease);
  z-index:-1;
}
.btn::after{
  content:"→";
  margin-left:2px;
  transition:transform .4s var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  color:#1a140a;
  box-shadow: 0 14px 36px rgba(214,180,113,.36), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn:hover::before{opacity:1}
.btn:hover::after{transform:translateX(5px)}

.btn.ghost{
  background:transparent;
  color:var(--ivory);
  border:1px solid var(--hair-strong);
  box-shadow:none;
}
.btn.ghost::before{display:none}
.btn.ghost:hover{
  color:var(--gold-bright);
  border-color:var(--gold);
  background:rgba(214,180,113,.06);
  box-shadow:0 8px 22px rgba(214,180,113,.1);
}

.btn.full{width:100%}

/* ---------- HERO (HOME) ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:60px 0;
}
.hero-home{
  background:linear-gradient(165deg, #1c1409 0%, #130e07 55%, #0a0805 100%);
}
.hero-home::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 80% 30%, rgba(201,138,75,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(168,133,62,.14), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.hero-home::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%, var(--gold) 0%, transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, var(--ember) 0%, transparent 50%),
    radial-gradient(1px 1px at 40% 80%, var(--gold-bright) 0%, transparent 50%),
    radial-gradient(2px 2px at 90% 20%, var(--gold) 0%, transparent 50%),
    radial-gradient(1px 1px at 60% 10%, var(--ember) 0%, transparent 50%);
  opacity:.45;
  pointer-events:none;
  animation: shimmer 12s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{opacity:.35}
  50%{opacity:.6}
}
.hero-shade{display:none}

.hero-layout{
  display:grid;
  grid-template-columns: minmax(0,1.25fr) minmax(360px,440px);
  gap:64px;
  align-items:start;
  padding:40px 0;
  width:min(var(--max),100% - var(--gutter)*2);
  margin-inline:auto;
  position:relative;
  z-index:5;
}
.hero-copy{max-width:none}
.hero-copy h1{margin-bottom:28px}
/* Force all home hero text to light — hero-home is always a dark band */
.hero-home .hero-copy h1,
.hero-home .hero-copy .eyebrow ~ *,
.hero-home .hero-copy h1 em{color:#f5ede0}
.hero-home .hero-copy .eyebrow{color:var(--gold-on-dark)}
.hero-home .hero-copy > p{color:rgba(245,237,224,.88)}
/* Pills on dark hero */
.hero-home .hero-pills span{
  color:rgba(245,237,224,.85);
  background:rgba(255,255,255,.08);
  border-color:rgba(245,237,224,.20);
}
.hero-home .hero-pills span:hover{
  border-color:var(--gold-on-dark);
  color:var(--gold-on-dark);
  background:rgba(243,216,150,.10);
}
/* Ghost btn on dark hero */
.hero-home .btn.ghost{
  color:#f5ede0;
  border-color:rgba(245,237,224,.35);
  background:rgba(255,255,255,.05);
}
.hero-home .btn.ghost:hover{
  color:var(--gold-on-dark);
  border-color:var(--gold-on-dark);
  background:rgba(243,216,150,.10);
}
.hero-copy > p{
  font-size:clamp(1.05rem,.95rem + .4vw,1.22rem);
  max-width:620px;
  color:var(--ivory-2);
  line-height:1.55;
  font-weight:700;
  margin-bottom:32px;
}

/* Hero pills — refined micro tags */
.hero-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:28px 0;
}
.hero-pills span{
  padding:8px 14px;
  font-size:.72rem;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--cream);
  background:rgba(244,236,220,.04);
  border:1px solid var(--rule-2);
  border-radius:999px;
  font-weight:500;
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.hero-pills span:hover{
  border-color:var(--gold);
  color:var(--gold-bright);
  background:rgba(214,180,113,.06);
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:8px;
}
.framework-actions{margin-top:28px}

/* ---------- QUOTE / INTAKE CARD ---------- */
.quote-card{
  background:
    linear-gradient(180deg, #ffffff, var(--panel-2));
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  padding:36px 32px;
  box-shadow:
    var(--shade-lg),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 0 1px rgba(184,137,58,.06);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.quote-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(214,180,113,.1), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.quote-card::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.5;
}
.quote-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gold);
  margin-bottom:18px;
  padding:6px 12px;
  border:1px solid var(--hair-strong);
  border-radius:999px;
  background:rgba(214,180,113,.06);
}
.quote-badge::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 8px var(--ok);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
.quote-card h2{
  font-size:clamp(1.55rem,1.2rem + .8vw,1.95rem);
  margin-bottom:10px;
  line-height:1.1;
}
.quote-card > p{
  font-size:.92rem;
  color:var(--muted);
  margin-bottom:22px;
  line-height:1.55;
}
.quote-card input,
.quote-card select,
.quote-card textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(244,236,220,.03);
  border:1px solid var(--rule-2);
  border-radius:12px;
  color:var(--ivory);
  font-size:.92rem;
  margin-bottom:10px;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.quote-card input::placeholder,
.quote-card textarea::placeholder{color:var(--muted-2)}
.quote-card input:focus,
.quote-card select:focus,
.quote-card textarea:focus{
  border-color:var(--gold);
  background:rgba(214,180,113,.04);
  box-shadow:0 0 0 4px rgba(214,180,113,.1);
}
.quote-card select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23d6b471'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px;
  padding-right:40px;
}
.quote-card select option{background:var(--bg);color:var(--ivory)}
.quote-card textarea{min-height:110px;resize:vertical;font-family:var(--sans)}
.quote-card .btn{margin-top:8px}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:0;
}
.form-grid input,
.form-grid select{margin-bottom:0}

/* ---------- PAGE HERO (non-home) ---------- */
.page-hero{
  position:relative;
  padding:120px 0 90px;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(165deg, #211a12 0%, #15100b 60%, #0d0a07 100%);
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(214,180,113,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,180,113,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
  pointer-events:none;
  z-index:-1;
}
.page-hero h1{
  font-size:clamp(2.3rem, 1.4rem + 3.5vw, 4.4rem);
  margin-bottom:20px;
  max-width:980px;
}
.page-hero > .container > p,
.page-hero p{
  font-size:clamp(1.02rem,.95rem + .35vw,1.18rem);
  max-width:760px;
  color:rgba(247,240,228,.92);
  font-weight:700;
  line-height:1.55;
  margin-bottom:28px;
}
.page-hero h1{color:#fbf6ec}
.page-hero .eyebrow{color:var(--gold-on-dark)}
.page-hero .hero-actions{margin-top:8px}

/* Ghost buttons sit on the dark hero band — keep them light */
.page-hero .btn.ghost{color:#fbf6ec;border-color:rgba(247,240,228,.32)}
.page-hero .btn.ghost:hover{color:var(--gold-on-dark);border-color:var(--gold-on-dark);background:rgba(247,240,228,.06)}

/* Page hero variants — themed accent washes (replacing Unsplash) */
.hero-roofing::before,
.elite-roof-hero::before,
.process-wow-hero::before,
.gaf-wow-hero::before,
.roof-solar-readiness-hero::before,
.hero-solar::before,
.hero-newengland::before,
.dispatch-hero::before,
.solar-process-hero::before,
.solar-state-hero::before,
.solar-wow-hero::before,
.energy-intelligence-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1000px 560px at 78% 18%, rgba(201,138,75,.24), transparent 62%),
    radial-gradient(820px 460px at 8% 104%, rgba(168,133,62,.18), transparent 60%);
}
.hero-storage::before,
.battery-wow-hero::before{
  background:
    radial-gradient(900px 500px at 75% 25%, rgba(127,191,139,.08), transparent 60%),
    radial-gradient(800px 400px at 10% 100%, rgba(214,180,113,.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
}
.hero-services::before,
.hero-reviews::before,
.hero-next::before{
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(214,180,113,.13), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(201,138,75,.1), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
}

/* Hero (full) variants without page-hero — for the big hero pages */
.elite-roof-hero,
.solar-wow-hero{
  background:
    radial-gradient(1200px 600px at 80% 30%, rgba(232,168,101,.12), transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(168,133,62,.1), transparent 65%),
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 60%, var(--bg-deep) 100%);
}
.elite-roof-hero::before,
.solar-wow-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(214,180,113,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,180,113,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
  pointer-events:none;
  z-index:0;
}

/* ---------- PATH SPLIT (home dual entry) ---------- */
.path-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--rule);
}
.path-card{
  display:block;
  padding:80px 56px;
  background:var(--bg-warm);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: background .5s var(--ease);
  min-height:380px;
}
.path-card > div{
  position:relative;
  z-index:2;
  max-width:480px;
}
.path-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(500px 300px at 80% 20%, rgba(214,180,113,.1), transparent 60%);
  opacity:0;
  transition:opacity .5s var(--ease);
  z-index:-1;
}
.path-card::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, var(--gold), var(--copper));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.path-card:hover::before{opacity:1}
.path-card:hover::after{transform:scaleX(1)}
.path-card:hover{background:var(--panel)}
.path-card h2{margin-bottom:16px;font-size:clamp(1.9rem,1.4rem + 1.5vw,2.6rem)}
.path-card p{
  color:var(--cream);
  margin-bottom:24px;
  font-size:1.02rem;
}
.path-card span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gold);
  font-weight:500;
  transition: gap .35s var(--ease);
}
.path-card:hover span{gap:16px;color:var(--gold-bright)}
.path-roof::before{
  background:radial-gradient(500px 300px at 80% 20%, rgba(201,138,75,.16), transparent 60%);
}
.path-solar::before{
  background:radial-gradient(500px 300px at 80% 20%, rgba(232,168,101,.14), transparent 60%);
}

/* ---------- SECTION ---------- */
.section{
  padding:clamp(48px,5vw,88px) 0;
  position:relative;
  z-index:2;
}
.section.dark{
  background:var(--bg-warm);
  /* No border-block — sections flow into each other seamlessly */
}
.section.dark + .section.dark{border-top:0}
.section-heading{
  max-width:820px;
  margin-bottom:36px;
}
.section-heading.center{text-align:center;margin-inline:auto}
.section-heading h2{margin-bottom:18px}
.section-heading p{
  font-size:clamp(1.02rem,.95rem + .3vw,1.15rem);
  color:var(--cream);
  line-height:1.6;
  max-width:680px;
}

/* Two-column section (framework) */
.two-col{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:80px;
  align-items:start;
}
.framework-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.framework-stack > div{
  padding:24px 28px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  position:relative;
  overflow:hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.framework-stack > div::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--gold), var(--copper));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .5s var(--ease-out);
}
.framework-stack > div:hover{
  border-color:var(--hair-strong);
  transform:translateX(4px);
}
.framework-stack > div:hover::before{transform:scaleY(1)}
.framework-stack strong{
  display:block;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.3rem;
  color:var(--ivory);
  margin-bottom:8px;
  letter-spacing:-.01em;
}
.framework-stack span{
  font-size:.92rem;
  color:var(--cream);
  line-height:1.55;
}

/* ---------- CONTENT GRIDS (cards) ---------- */
.content-grid{
  display:grid;
  gap:20px;
}
/* Centered-flex variants: any leftover cards on the final row center
   instead of clinging left, so 7-in-3 or 5-in-2 never look lopsided. */
.content-grid.three,
.content-grid.four{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  grid-template-columns:none;
}
.content-grid.three > *{
  flex:0 1 calc((100% - 2 * 20px) / 3);
  min-width:248px;
}
.content-grid.four > *{
  flex:0 1 calc((100% - 3 * 20px) / 4);
  min-width:210px;
}

.content-card{
  padding:32px 28px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.content-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(300px 200px at 100% 0%, rgba(214,180,113,.08), transparent 60%);
  opacity:0;
  transition:opacity .5s var(--ease);
  z-index:-1;
}
.content-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
  background:var(--panel-2);
}
.content-card:hover::before{opacity:1}
.mini-kicker{
  display:inline-block;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:18px;
  padding:4px 10px;
  border:1px solid var(--hair-strong);
  border-radius:999px;
  background:rgba(214,180,113,.05);
  font-weight:500;
}
.content-card h3{margin-bottom:10px;font-size:1.15rem}
.content-card p{font-size:.94rem;color:var(--cream);line-height:1.6}
.content-card ul{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.content-card ul li{
  position:relative;
  padding-left:18px;
  font-size:.88rem;
  color:var(--muted);
  line-height:1.55;
}
.content-card ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:10px;
  height:1px;
  background:var(--gold);
}

/* Trust grid — homepage why-divinity */
.trust-grid .content-card{padding:36px 30px}

/* Review route grid — next-steps */
.review-route-grid .content-card{padding:32px 28px}

/* Exposure / state strategy grids */
.state-strategy-grid .content-card,
.exposure-grid .content-card{padding:32px 28px}
.state-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.55rem;
  letter-spacing:-.01em;
  margin-bottom:14px;
  color:var(--gold-bright);
}

/* ---------- FEATURE GRID (asymmetric editorial) ---------- */
.feature-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.feature-grid > *{
  flex:0 1 calc((100% - 20px) / 2);
  min-width:280px;
}
.elite-grid{
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:auto;
}
.feature-card{
  padding:36px 30px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.feature-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--gold), var(--copper));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.feature-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-4px);
}
.feature-card:hover::before{transform:scaleX(1)}
.feature-card > span{
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--gold);
  margin-bottom:14px;
  font-weight:500;
}
.feature-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--ivory);
  margin-bottom:12px;
}
.feature-card p{font-size:.95rem;color:var(--cream);margin-bottom:14px}
.feature-card ul{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.feature-card ul li{
  font-size:.88rem;
  color:var(--muted);
  padding-left:18px;
  position:relative;
}
.feature-card ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:10px;
  height:1px;
  background:var(--gold);
}
.feature-card a{
  margin-top:auto;
  font-family:var(--mono);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gold);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: gap .35s var(--ease), color .3s var(--ease);
}
.feature-card a:hover{gap:14px;color:var(--gold-bright)}
.wide-feature{
  grid-column: span 2;
  flex-basis:100%;
  background: 
    radial-gradient(600px 300px at 20% 0%, rgba(214,180,113,.12), transparent 70%),
    linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border-color:var(--hair-strong);
}
.wide-feature h3{font-size:1.9rem;max-width:600px}
.wide-feature p{font-size:1.02rem;max-width:680px;margin-bottom:18px}

/* ---------- FOOTER ---------- */
.footer{
  background:#0D0D0D;
  border-top:2px solid #E8720C;
  padding:0;
  margin-top:0;
  position:relative;
  z-index:2;
}

/* ── Main single-row strip ── */
.footer-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid rgba(232,114,12,.12);
  flex-wrap:wrap;
}
.footer-brand p{ display:none; }  /* hide description — too large for compact footer */

/* Logo */
.footer-logo img{
  height:46px;
  width:auto;
  object-fit:contain;
  max-width:200px;
  display:block;
}

/* Link groups — inline not stacked */
.footer > .container > .footer-grid > div{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.footer h4{
  font-family:var(--mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#E8720C;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:2px;
  text-decoration-color:currentColor;
  white-space:normal;
  margin:0;
  padding-right:4px;
  border-right:1px solid rgba(232,114,12,.25);
}
.footer a:not(.footer-logo){
  display:inline;
  padding:0;
  color:rgba(200,200,200,.60);
  font-size:.78rem;
  transition:color .2s ease;
  white-space:nowrap;
}
.footer a:not(.footer-logo):hover{color:#E8720C}

/* NAP row — single line below the links */
.footer-nap{
  display:flex;
  align-items:center;
  gap:20px;
  padding:10px 0;
  border-bottom:1px solid rgba(232,114,12,.08);
  flex-wrap:wrap;
}
.footer-nap p{
  font-size:.72rem;
  color:rgba(160,160,160,.55);
  margin:0;
  line-height:1;
  white-space:nowrap;
}
.footer-nap strong{color:#E8720C;font-size:.72rem;}
.footer-nap a{color:rgba(160,160,160,.55);}
.footer-nap a:hover{color:#E8720C;}
.footer-nap p + p::before{
  content:'·';
  margin-right:20px;
  color:rgba(232,114,12,.3);
}

/* Copyright — single line at bottom */
.copyright{
  padding:10px 0;
  font-size:.65rem;
  color:rgba(140,140,140,.38);
  text-align:center;
  font-family:var(--mono);
  letter-spacing:.06em;
  margin:0;
}

/* ---------- FLOATING CTA ---------- */
.floating-cta{
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:80;
  padding:14px 22px;
  background:linear-gradient(135deg,var(--gold),var(--gold-bright),var(--copper));
  color:#1a140a!important;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:999px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 4px 14px rgba(214,180,113,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.floating-cta::before{
  content:"→";
  margin-right:6px;
  display:inline-block;
  transition: transform .35s var(--ease);
}
.floating-cta:hover{
  transform:translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 6px 20px rgba(214,180,113,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
.floating-cta:hover::before{transform:translateX(-4px)}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  will-change: opacity, transform, filter;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* ---------- STARS / REVIEW CARDS ---------- */
.review-card{
  padding:32px 28px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.review-card::before{
  content:"\201C";
  position:absolute;
  top:-30px;
  right:18px;
  font-family:var(--serif);
  font-size:8rem;
  line-height:1;
  color:var(--gold);
  opacity:.08;
  font-weight:800;
}
.review-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.review-card .stars{
  font-size:.95rem;
  color:var(--gold-bright);
  letter-spacing:.2em;
  margin-bottom:14px;
}
.review-card p{
  font-family:var(--serif);
  font-weight:800;
  font-style:italic;
  font-size:1.08rem;
  line-height:1.5;
  color:var(--ivory);
  margin-bottom:18px;
  font-variation-settings:"opsz" 30;
}
.review-card h4{
  font-family:var(--sans);
  font-size:.82rem;
  text-transform:none;
  letter-spacing:0;
  color:var(--cream);
  font-weight:500;
  margin:0;
  position:relative;
  padding-top:14px;
}
.review-card h4::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:32px;
  height:1px;
  background:var(--gold);
}

/* ---------- FAQ ---------- */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:880px;
}
.faq-list details{
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:0;
  overflow:hidden;
  transition:border-color .4s var(--ease);
}
.faq-list details[open]{border-color:var(--hair-strong)}
.faq-list summary{
  list-style:none;
  cursor:pointer;
  padding:22px 26px;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.15rem;
  color:var(--ivory);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  letter-spacing:-.005em;
  transition:color .3s var(--ease);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";
  font-family:var(--mono);
  font-size:1.4rem;
  color:var(--gold);
  font-weight:400;
  transition:transform .4s var(--ease);
  flex-shrink:0;
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--gold-bright)}
.faq-list details > p{
  padding:0 26px 22px;
  font-size:.95rem;
  color:var(--cream);
  line-height:1.65;
}

/* ---------- MAP / PROJECT PROOF SECTION ---------- */
.map-proof-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.6fr);
  gap:48px;
  align-items:start;
  margin-bottom:40px;
}
.map-proof-metrics{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:28px;
}
.map-proof-metrics > div{
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  border-left:2px solid var(--gold);
}
.map-proof-metrics strong{
  display:block;
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--ivory);
  font-weight:800;
  margin-bottom:4px;
  letter-spacing:-.005em;
}
.map-proof-metrics span{
  font-size:.86rem;
  color:var(--cream);
  line-height:1.5;
}
.map-embed-panel{
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--hair-strong);
  box-shadow: var(--shade-lg);
  line-height:0;
}
/* map-embed-panel has no ::before needed - iframe handles its own styling */
.client-map-frame{
  width:100%;
  height:580px;
  border:0;
  display:block;
}
.map-meaning{
  padding:36px 32px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  border-left:3px solid var(--gold);
  max-width:none;
}
.map-meaning h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.5rem;
  margin-bottom:12px;
  letter-spacing:-.01em;
}
.map-meaning p{margin-bottom:22px;font-size:1rem;color:var(--cream)}

/* ---------- PROJECT GALLERY ---------- */
.solar-project-gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap:14px;
  margin-top:30px;
}
.solar-project-gallery.compact{
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows: 240px;
}
.solar-project-gallery.extended{
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows: 200px;
}
.project-photo{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--hair);
  background:var(--panel);
  grid-column: span 1;
  grid-row: span 1;
  transition: transform .5s var(--ease), border-color .4s var(--ease);
}
.project-photo.large{
  grid-column: span 2;
  grid-row: span 2;
}
.solar-project-gallery .project-photo:first-child:not(.large){
  grid-column: span 2;
}
.project-photo:hover{
  transform:translateY(-3px);
  border-color:var(--hair-strong);
}
.project-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.project-photo:hover img{transform:scale(1.05)}
.project-photo figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:30px 22px 18px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.88) 70%);
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--cream);
  font-weight:500;
  line-height:1.5;
}
@media (max-width: 900px){
  .solar-project-gallery,
  .solar-project-gallery.compact,
  .solar-project-gallery.extended{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .project-photo.large{grid-column: span 2; grid-row: span 1}
  .solar-project-gallery .project-photo:first-child:not(.large){grid-column: span 2}
}
@media (max-width: 560px){
  .solar-project-gallery,
  .solar-project-gallery.compact,
  .solar-project-gallery.extended{
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .project-photo.large{grid-column: span 1}
  .solar-project-gallery .project-photo:first-child:not(.large){grid-column: span 1}
}

/* ---------- IMAGE FLOW ---------- */
.image-flow-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:64px;
  align-items:center;
}
.image-flow-grid.reverse .image-mosaic,
.image-flow-grid.reverse > div.reveal:has(.mosaic-img){grid-column:2}
.image-flow-grid.reverse .image-flow-copy{grid-column:1;grid-row:1}
.image-flow-grid.reverse > .image-mosaic{grid-column:2;grid-row:1}
.image-flow-copy h2{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.6rem)}
.image-flow-copy p{margin-bottom:16px;color:var(--cream)}
.image-mosaic{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:12px;
  position:relative;
}
.mosaic-img{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--hair);
  aspect-ratio:1;
  background:var(--panel);
  position:relative;
  transition: transform .5s var(--ease);
}
.mosaic-img:nth-child(1){grid-row:span 2;aspect-ratio:1/2.05}
.mosaic-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.mosaic-img:hover{transform:translateY(-3px)}
.mosaic-img:hover img{transform:scale(1.06)}

/* ---------- STACK LIST ---------- */
.stack-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:24px;
  counter-reset:stack;
}
.stack-list li,
.stack-list > div{
  padding:18px 24px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  font-size:.95rem;
  color:var(--cream);
  position:relative;
  padding-left:54px;
  counter-increment:stack;
  line-height:1.55;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.stack-list li::before,
.stack-list > div::before{
  content:counter(stack,decimal-leading-zero);
  position:absolute;
  left:22px;
  top:18px;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--gold);
  font-weight:500;
}
.stack-list li:hover,
.stack-list > div:hover{
  border-color:var(--hair-strong);
  transform:translateX(3px);
}
.stack-list > div strong{
  display:block;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.15rem;
  color:var(--ivory);
  letter-spacing:-.005em;
  margin-bottom:4px;
  line-height:1.2;
}
.stack-list > div span{
  display:block;
  font-size:.9rem;
  color:var(--cream);
  line-height:1.55;
}

/* ---------- TIMELINE ---------- */
.timeline-grid,
.process-timeline,
.system-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin-top:30px;
  position:relative;
}
.system-grid > *{
  flex:0 1 calc((100% - 2 * 18px) / 3);
  min-width:248px;
}
.mega-process{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.timeline-card,
.process-step,
.system-card{
  padding:28px 24px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
  counter-increment:step;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.timeline-grid,
.process-timeline,
.system-grid{counter-reset:step}
.timeline-card::before,
.process-step::before,
.system-card::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  top:18px;
  right:18px;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--gold);
  letter-spacing:.14em;
  opacity:.7;
}
/* If card already starts with a span, suppress the auto counter — the page provides its own label */
.timeline-card > span:first-child,
.process-step > span:first-child,
.system-card > span:first-child{
  display:inline-block;
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gold);
  font-weight:500;
  margin-bottom:14px;
  padding:4px 10px;
  background:rgba(214,180,113,.06);
  border:1px solid var(--hair-strong);
  border-radius:999px;
}
.timeline-card:has(> span:first-child)::before,
.process-step:has(> span:first-child)::before,
.system-card:has(> span:first-child)::before{display:none}
.timeline-card:hover,
.process-step:hover,
.system-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.timeline-card h3,
.process-step h3,
.system-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:-.01em;
  line-height:1.15;
  color:var(--ivory);
  margin-bottom:10px;
  max-width:90%;
}
.timeline-card p,
.process-step p,
.system-card p{
  font-size:.92rem;
  color:var(--cream);
  line-height:1.55;
}

/* ---------- CTA PANELS ---------- */
.cta-panel,
.roofing-cta-card{
  padding:60px 48px;
  background:
    linear-gradient(135deg, rgba(214,180,113,.08), rgba(201,138,75,.04));
  border:1px solid var(--hair-strong);
  border-radius:var(--r-xl);
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.cta-panel::before,
.roofing-cta-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 300px at 30% 0%, rgba(214,180,113,.12), transparent 60%),
    radial-gradient(500px 300px at 100% 100%, rgba(201,138,75,.1), transparent 60%);
  z-index:-1;
}
.cta-panel h2,
.roofing-cta-card h2{margin-bottom:14px}
.cta-panel p,
.roofing-cta-card p{
  max-width:660px;
  margin:0 auto 26px;
  color:var(--cream);
  font-size:1.05rem;
}
.cta-band-premium{
  background:linear-gradient(135deg, var(--bg-deep), var(--bg-warm));
}
.cta-band-premium .roofing-cta-card{
  background:
    linear-gradient(135deg, rgba(214,180,113,.12), rgba(201,138,75,.06)),
    var(--panel);
}
.roofing-cta-band,
.solar-cta-band{padding:80px 0}

/* ---------- COMPARE ---------- */
.compare-wrap{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  margin-top:30px;
}
.compare-card{
  padding:30px 26px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  transition:border-color .4s var(--ease);
}
.compare-card:hover{border-color:var(--hair-strong)}
.compare-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.01em;
  margin-bottom:14px;
}
.compare-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  font-size:.9rem;
}
.compare-row:last-child{border-bottom:0}
.compare-row span:first-child,
.compare-row > span{color:var(--muted)}
.compare-row span:last-child,
.compare-row > strong{
  color:var(--gold-bright);
  font-weight:500;
  font-family:var(--mono);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:right;
}

/* ---------- ENERGY CALCULATOR ---------- */
.energy-calculator-grid{
  display:grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap:36px;
  align-items:start;
}
.calculator-panel{
  padding:36px 32px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  box-shadow:var(--shade-md);
}
.calculator-panel h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.calculator-panel > p{
  font-size:.9rem;
  color:var(--cream);
  margin-bottom:24px;
}
.calculator-panel label{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gold);
  font-weight:500;
  margin-bottom:16px;
}
.calc-input-row{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-top:8px;
  background:rgba(244,236,220,.03);
  border:1px solid var(--rule-2);
  border-radius:12px;
  overflow:hidden;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.calc-input-row:focus-within{
  border-color:var(--gold);
  background:rgba(214,180,113,.04);
}
.calc-input-row > span{
  display:flex;
  align-items:center;
  padding:0 14px;
  background:rgba(214,180,113,.06);
  color:var(--gold);
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:500;
}
.calc-input-row input{
  flex:1;
  padding:14px 16px;
  background:transparent!important;
  border:0!important;
  color:var(--ivory);
  font-size:1rem;
  font-family:var(--mono);
  font-weight:500;
  min-width:0;
  margin:0;
}
.calc-input-row input:focus{box-shadow:none!important;background:transparent!important;border:0!important}
.calculator-results{
  padding:36px 32px;
  background:
    linear-gradient(135deg, rgba(214,180,113,.06), transparent 70%),
    var(--panel);
  border:1px solid var(--hair-strong);
  border-radius:var(--r-xl);
  box-shadow:var(--shade-md);
  position:relative;
  overflow:hidden;
}
.calculator-results::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.calculator-results h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.calculator-results > p{
  font-size:.9rem;
  color:var(--cream);
  margin-bottom:24px;
}
.result-card{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.result-card > span,
.result-card span:first-child{
  font-family:var(--sans);
  font-size:.85rem;
  color:var(--muted);
}
.result-card > strong,
.result-card span:last-child{
  font-family:var(--mono);
  font-size:1.05rem;
  color:var(--ivory);
  font-weight:500;
  text-align:right;
}
.result-card.highlight{
  margin-top:12px;
  padding:22px;
  background:linear-gradient(135deg, rgba(214,180,113,.1), rgba(201,138,75,.05));
  border:1px solid var(--hair-strong);
  border-radius:var(--r-md);
}
.result-card.highlight > span,
.result-card.highlight span:first-child{
  color:var(--gold);
  font-family:var(--mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.result-card.highlight > strong,
.result-card.highlight span:last-child{
  color:var(--gold-bright);
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.calculator-note{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:.82rem;
  color:var(--muted);
  line-height:1.55;
}

/* ---------- DIVINITY-DIFFERENCE / TRUST SECTION ---------- */
.divinity-difference-section .trust-grid{
  margin-top:20px;
}

/* ---------- SIGNATURE FRAMEWORK ---------- */
.signature-framework-section{
  background:linear-gradient(180deg, var(--bg-warm), var(--bg-deep));
}

/* ---------- ROOF / DIAGRAM CARDS ---------- */
.roof-diagram-card,
.roof-layer-card{
  padding:32px 28px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.roof-diagram-card:hover,
.roof-layer-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.roof-diagram-card img,
.roof-system-visual img{
  width:100%;
  height:auto;
  border-radius:var(--r-md);
  margin-bottom:18px;
}
.roof-diagram-card figcaption{
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  line-height:1.5;
}
.roof-layer-card > span:first-child{
  display:inline-block;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:14px;
  padding:4px 10px;
  border:1px solid var(--hair-strong);
  border-radius:999px;
  background:rgba(214,180,113,.06);
  font-weight:500;
}
.roof-layer-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-.01em;
  margin-bottom:10px;
  line-height:1.15;
}
.roof-layer-card p{font-size:.92rem;color:var(--cream);line-height:1.55}

.roof-layer-showcase{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:30px;
}
.roof-line{
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  font-size:.9rem;
  color:var(--cream);
  border-left:2px solid var(--gold);
  position:relative;
}
.roof-line strong{
  display:block;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.15rem;
  color:var(--ivory);
  margin-bottom:6px;
  letter-spacing:-.005em;
}

.roof-system-explorer{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
}
.roof-system-visual{
  position:sticky;
  top:90px;
  background:linear-gradient(165deg,#171019,#0d0a10);
  border:1px solid var(--hair-strong);
  border-radius:var(--r-lg);
  padding:22px;
  box-shadow:var(--shade-md), inset 0 1px 0 rgba(214,180,113,.08);
}
.roof-system-visual::after{
  content:"CROSS-SECTION · LAYER BY LAYER";
  display:block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-align:center;
  color:rgba(214,180,113,.6);
}

/* Roof intel strip — the row below the hero on roofing.html */
.roof-intel-strip{
  background:linear-gradient(180deg, var(--bg-deep), var(--bg-warm));
  padding:36px 0;
}
.roof-intel-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  width:min(var(--max),100% - var(--gutter)*2);
  margin-inline:auto;
}
.roof-intel-grid > div{
  padding:8px 24px;
  position:relative;
}
.roof-intel-grid > div:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--rule);
}
.roof-intel-grid strong{
  display:block;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.2rem;
  color:var(--ivory);
  margin-bottom:6px;
  letter-spacing:-.005em;
}
.roof-intel-grid span{
  display:block;
  font-size:.86rem;
  color:var(--cream);
  line-height:1.5;
}

/* Damage grid — same as stack-list pattern */
.damage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:12px;
  margin-top:24px;
}
.damage-grid > div{
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  border-left:2px solid var(--gold);
  transition:border-color .4s var(--ease);
}
.damage-grid > div:hover{border-color:var(--hair-strong)}
.damage-grid strong{
  display:block;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.05rem;
  color:var(--ivory);
  margin-bottom:5px;
  letter-spacing:-.005em;
}
.damage-grid span{
  display:block;
  font-size:.85rem;
  color:var(--cream);
  line-height:1.5;
}

/* Compare wrap layout fixes */
.compare-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
  align-items:start;
  margin-top:0;
}
@media (max-width: 900px){
  .compare-wrap{grid-template-columns:1fr;gap:24px}
  .roof-intel-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .roof-intel-grid > div:not(:last-child)::after{display:none}
  .roof-intel-grid > div{padding:8px 0;border-bottom:1px solid var(--rule)}
  .roof-intel-grid > div:last-child{border-bottom:0}
}

/* ---------- GAF SYSTEM ---------- */
.gaf-premium-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:30px;
}
@media (max-width:900px){.gaf-premium-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.gaf-premium-grid{grid-template-columns:1fr}}
.gaf-card{
  padding:32px 28px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.gaf-card::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:2px;
  background:linear-gradient(90deg, var(--gold), var(--copper));
  transform:scaleX(.2);
  transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.gaf-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.gaf-card:hover::before{transform:scaleX(1)}
.gaf-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.01em;
  line-height:1.15;
  margin-bottom:12px;
}
.gaf-card p{font-size:.94rem;color:var(--cream);line-height:1.6}

/* ---------- SOLAR FLOW / ENERGY DIAGRAM ---------- */
.solar-flow-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:50px;
  align-items:center;
}
.solar-flow-copy h2{margin-bottom:18px}
.solar-flow-copy p{margin-bottom:16px;color:var(--cream)}

.energy-diagram{
  padding:40px 36px;
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(214,180,113,.08), transparent 60%),
    var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  position:relative;
}
.energy-node{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  padding:18px 14px;
  background:var(--panel-2);
  border:1px solid var(--hair-strong);
  border-radius:var(--r-md);
  text-align:center;
  font-size:.86rem;
  color:var(--ivory);
  margin:8px 0;
  position:relative;
}
.energy-node.small{padding:12px 10px;font-size:.78rem}
.energy-line{
  height:30px;
  width:2px;
  margin:0 auto;
  background:linear-gradient(180deg, var(--gold), transparent);
}
.energy-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:8px;
}

/* ---------- EXPOSURE / STAT CARDS ---------- */
.maine-stat-grid,
.exposure-model-grid,
.corrected-exposure-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-bottom:36px;
}
.maine-stat-card,
.exposure-card{
  padding:36px 28px;
  background:
    radial-gradient(300px 200px at 100% 0%, rgba(232,168,101,.08), transparent 60%),
    var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.maine-stat-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--gold), var(--copper));
}
.maine-stat-card:hover,
.exposure-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.maine-stat-card span,
.exposure-card > span,
.exposure-card .label{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--gold);
  font-weight:500;
  margin-bottom:14px;
}
.maine-stat-card strong,
.exposure-card strong{
  display:block;
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2.4rem, 2rem + 1.5vw, 3.5rem);
  color:var(--gold-bright);
  line-height:1;
  margin-bottom:14px;
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 144;
}
.maine-stat-card p,
.exposure-card p{
  font-size:.94rem;
  color:var(--cream);
  line-height:1.55;
}

/* ---------- DISPATCH GRAPH ---------- */
.dispatch-graph-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:40px;
  align-items:start;
  margin-top:40px;
}
.dispatch-graph{
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  padding:24px;
  overflow:hidden;
}
.dispatch-graph img{
  width:100%;
  border-radius:var(--r-md);
}
.dispatch-graph figcaption{
  margin-top:16px;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.04em;
  line-height:1.55;
}
.dispatch-copy-card{
  padding:36px 32px;
  background:var(--panel-2);
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  border-left:3px solid var(--gold);
}
.dispatch-copy-card h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem)}
.dispatch-copy-card p{color:var(--cream)}

/* ---------- PROOF GALLERIES ---------- */
.maine-proof-gallery,
.maine-original-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:24px;
}
.maine-proof-gallery > figure,
.maine-original-gallery > figure{
  margin:0;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--hair);
  background:var(--panel);
  transition: transform .5s var(--ease), border-color .4s var(--ease);
}
.maine-proof-gallery > figure:hover,
.maine-original-gallery > figure:hover{
  transform:translateY(-3px);
  border-color:var(--hair-strong);
}
.maine-proof-gallery img,
.maine-original-gallery img{
  width:100%;
  height:auto;
  max-height:320px;
  object-fit:cover;
  display:block;
}
.maine-proof-gallery figcaption,
.maine-original-gallery figcaption{
  padding:12px 16px;
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--cream);
  line-height:1.4;
}

/* ---------- SOURCE GRID ---------- */
.source-grid,
.linked-source-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
  margin-top:24px;
}
.source-grid a,
.linked-source-grid a{
  padding:20px 24px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  font-size:.86rem;
  color:var(--ivory);
  line-height:1.45;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  padding-right:36px;
}
.source-grid a::after,
.linked-source-grid a::after{
  content:"↗";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--gold);
  font-family:var(--mono);
  font-size:1rem;
  transition: transform .35s var(--ease);
}
.source-grid a:hover,
.linked-source-grid a:hover{
  border-color:var(--hair-strong);
  background:var(--panel-2);
  transform:translateY(-2px);
}
.source-grid a:hover::after,
.linked-source-grid a:hover::after{
  transform:translateY(-50%) translate(3px,-3px);
  color:var(--gold-bright);
}
.source-grid a strong,
.linked-source-grid a strong{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.05rem;
  color:var(--gold-bright);
  letter-spacing:-.005em;
}
.source-grid a span,
.linked-source-grid a span{
  color:var(--muted);
  font-size:.82rem;
}

/* ---------- MOSAIC IMAGES (background-image mappings) ---------- */
.mosaic-img.img-roof-1{background-image:url('assets/images/roofing-areas-system.jpg')}
.mosaic-img.img-roof-2{background-image:url('assets/images/roof-structure-diagram.jpg')}
.mosaic-img.img-roof-3{background-image:url('assets/images/gaf-golden-pledge-system.jpg')}
.mosaic-img.img-gaf-1{background-image:url('assets/images/gaf-golden-pledge-system.jpg')}
.mosaic-img.img-gaf-2{background-image:url('assets/images/roofing-areas-system.jpg')}
.mosaic-img.img-gaf-3{background-image:url('assets/images/roof-structure-diagram.jpg')}
.mosaic-img.img-monitor-1{background-image:url('assets/images/solar-install-10.jpg')}
.mosaic-img.img-monitor-2{background-image:url('assets/images/solar-courtney-webb.jpg')}
.mosaic-img.img-monitor-3{background-image:url('assets/images/solar-savings-value.jpg')}
.mosaic-img.img-battery-1{background-image:url('assets/images/solar-install-07.jpg')}
.mosaic-img.img-battery-2{background-image:url('assets/images/solar-freedom-install.jpg')}
.mosaic-img.img-battery-3{background-image:url('assets/images/solar-install-09.jpg')}
.mosaic-img[class*="img-"]{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ---------- CONTAINER + GRID COMBOS ---------- */
.container.image-flow-grid,
.container.solar-flow-grid,
.container.compare-wrap,
.container.two-col,
.container.roof-intel-grid,
.container.roofing-cta-card,
.container.hero-layout{
  /* These pages use container AND a grid class on the same element — width inherits from .container, layout from the grid class */
}
.compare-wrap > .reveal:first-child{grid-column:1/-1;max-width:880px;margin-bottom:8px}

/* ---------- STATE PHOTO CARDS ---------- */
.state-photo-card{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--hair);
  background:var(--panel);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
  margin:0;
}
.state-photo-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.state-photo-card img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .8s var(--ease-out);
}
.state-photo-card:hover img{transform:scale(1.04)}
.state-photo-card .body,
.state-photo-card figcaption{
  padding:22px 24px;
  font-family:var(--mono);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--cream);
  line-height:1.55;
  background:var(--panel);
  border-top:1px solid var(--rule);
}

/* ---------- SOLAR STABILITY / PAYMENT ---------- */
.solar-stability-card,
.solar-payment-note{
  padding:36px 32px;
  background:
    linear-gradient(135deg, rgba(214,180,113,.06), transparent 70%),
    var(--panel);
  border:1px solid var(--hair-strong);
  border-radius:var(--r-xl);
  border-left:3px solid var(--gold);
  margin-top:30px;
}
.solar-stability-card h3,
.solar-payment-note h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.solar-stability-card p,
.solar-payment-note p{color:var(--cream)}

/* ---------- DAMAGE / SYSTEM CARDS ---------- */
.damage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px;
  margin-top:24px;
}

/* ---------- MOBILE NAV ---------- */
@media (max-width: 1180px){
  /* ── HAMBURGER BUTTON ── */
  .menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    font-size:1.6rem;
    color:#E8E8E8;
    background:#1E1E1E;
    border:2px solid #E8720C;
    border-radius:8px;
    flex-shrink:0;
    z-index:10001;
    position:relative;
  }
  .menu-btn:hover{
    background:#E8720C;
    color:#fff;
  }

  /* ── NAVBAR — disable backdrop-filter on mobile so it doesn't trap the fixed menu panel ── */
  .navbar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(250,246,238,.98);
    z-index:10000;
  }

  /* ── MOBILE FULLSCREEN MENU PANEL ── */
  .nav-links{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    background:#0F0F0F;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:88px 28px 40px;
    margin:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    opacity:1;
    visibility:hidden;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s;
    z-index:9998;
    border-left:3px solid #E8720C;
    box-shadow:-8px 0 40px rgba(0,0,0,0.6);
  }
  .nav-links.open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }
  body.menu-open{overflow:hidden}

  /* ── NAV ITEMS ── */
  .nav-links > li{
    border-bottom:1px solid rgba(232,114,12,.18);
  }
  .nav-links > li:first-child{
    border-top:1px solid rgba(232,114,12,.18);
  }
  .nav-links > li > a{
    display:block;
    padding:16px 4px;
    font-size:1.1rem;
    font-weight:700;
    color:#FFFFFF !important;
    letter-spacing:.02em;
    border-radius:0;
    background:transparent !important;
  }
  .nav-links > li > a:hover,
  .nav-links > li > a:active{
    color:#E8720C !important;
    padding-left:10px;
  }
  .nav-links > li > a:not(.nav-cta)::after{display:none}

  /* ── CTA BUTTON IN MOBILE MENU ── */
  .nav-cta{
    margin:24px 0 0;
    padding:16px 24px!important;
    font-size:1rem!important;
    text-align:center;
    width:100%;
    border-radius:8px!important;
  }

  /* ── DROPDOWN MENUS (sub-items) ── */
  .dropdown-menu{
    position:static;
    display:none!important;
    min-width:0;
    background:rgba(232,114,12,.06);
    border:0;
    border-left:2px solid rgba(232,114,12,.3);
    margin-left:8px;
    padding:8px 16px 16px;
    grid-template-columns:1fr;
    box-shadow:none;
    animation:none;
    border-radius:0 0 8px 8px;
  }
  .dropdown.mobile-open .dropdown-menu{display:grid!important}
  .dropdown-menu strong{
    margin-top:12px;
    border-bottom:0;
    padding-bottom:4px;
    font-size:.68rem;
    letter-spacing:.15em;
    color:#E8720C;
    text-transform:uppercase;
    font-family:var(--mono);
  }
  .dropdown-menu a{
    padding:10px 0;
    font-size:.92rem;
    color:rgba(220,220,220,.8);
  }
  .dropdown-menu a:hover{
    padding-left:8px;
    color:#E8720C;
  }
  .dropdown > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .dropdown > a::after{
    content:"+";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    background:rgba(232,114,12,.15);
    border:1px solid rgba(232,114,12,.3);
    border-radius:4px;
    color:#E8720C;
    font-family:var(--mono);
    font-size:1rem;
    font-weight:700;
    flex-shrink:0;
  }
  .dropdown.mobile-open > a::after{
    content:"−";
    background:rgba(232,114,12,.25);
  }
}

/* ---------- TABLET/MOBILE RESPONSIVE ---------- */
@media (max-width: 1024px){
  .hero-layout{grid-template-columns:1fr;gap:48px;padding:30px 0}
  .quote-card{margin-top:8px}
  .path-split{grid-template-columns:1fr}
  .path-card{padding:44px 28px;min-height:auto}
  .two-col{grid-template-columns:1fr;gap:48px}
  .content-grid.four > *{flex-basis:calc((100% - 20px) / 2);min-width:0}
  .content-grid.three > *{flex-basis:calc((100% - 20px) / 2);min-width:0}
  .elite-grid{grid-template-columns:repeat(2,1fr)}
  .wide-feature{grid-column:span 2}
  /* footer handled in dedicated mobile block */
  .footer-brand{width:100%}
  .footer h4{margin-bottom:10px}
  .footer a:not(.footer-logo){padding:3px 0}
  .image-flow-grid{grid-template-columns:1fr;gap:40px}
  .image-flow-grid.reverse .image-mosaic,
  .image-flow-grid.reverse > .image-mosaic{grid-column:1;grid-row:1}
  .image-flow-grid.reverse .image-flow-copy{grid-column:1;grid-row:2}
  .energy-calculator-grid{grid-template-columns:1fr;gap:24px}
  .dispatch-graph-grid{grid-template-columns:1fr;gap:24px}
  .solar-flow-grid{grid-template-columns:1fr;gap:30px}
  .roof-system-explorer{grid-template-columns:1fr}
  .roof-system-visual{position:static}
}

@media (max-width: 760px){
  :root{--gutter:18px}
  .topbar{padding:8px 0}
  .topbar-inner{gap:10px;font-size:.7rem}
  .topbar span{font-size:.58rem;letter-spacing:.18em}
  .topbar a{font-size:.7rem}
  .hero{min-height:auto;padding:48px 0 60px}
  .page-hero{padding:80px 0 60px}
  .hero-copy h1{font-size:clamp(2.2rem,8vw,3rem)}
  /* 2×2 card grid — tighter padding for narrow cards */
  .content-grid.four .content-card{padding:20px 16px}
  .trust-grid .content-card{padding:20px 16px}
  .trust-grid .content-card h3{font-size:1rem}
  .mini-kicker{font-size:.68rem}
  .quote-card{padding:28px 22px}
  .map-proof-grid{grid-template-columns:1fr;gap:24px}
  .client-map-frame{height:320px}
  .content-grid.four{gap:12px}
  .content-grid.four > *{flex:0 1 calc(50% - 6px);min-width:0;max-width:calc(50% - 6px)}
  .content-grid.three > *{flex-basis:100%;min-width:0}
  .elite-grid,
  .feature-grid{grid-template-columns:1fr}
  .wide-feature{grid-column:span 1}
  /* footer mobile rules handled in dedicated block below */
  .section{padding:40px 0}
  .path-card{padding:36px 22px}
  .form-grid{grid-template-columns:1fr}
  .cta-panel,
  .roofing-cta-card{padding:40px 24px}
  .calculator-panel,
  .calculator-results{padding:26px 22px}
  .floating-cta{bottom:18px;right:18px;padding:12px 18px;font-size:.72rem}
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal{opacity:1;transform:none;filter:none}
}
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- TRUST STRIP (home, below hero) ---------- */
.trust-strip{
  background:
    linear-gradient(180deg, var(--bg-deep), var(--bg-warm));
  padding:32px 0;
  position:relative;
  z-index:2;
}
.trust-strip-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:min(var(--max),100% - var(--gutter)*2);
  margin-inline:auto;
}
.trust-stat{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 18px;
  position:relative;
}
.trust-stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  right:-12px;
  width:1px;
  background:var(--rule);
}
.trust-stat strong{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(2rem, 1.6rem + 1.2vw, 2.8rem);
  color:var(--gold-bright);
  line-height:1;
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 144;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.trust-stat strong em{
  font-style:normal;
  font-size:.55em;
  color:var(--gold);
  margin-left:2px;
}
.trust-stat span{
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  font-weight:500;
  line-height:1.5;
}
@media (max-width: 1024px){
  .trust-strip-inner{grid-template-columns:repeat(3,1fr);gap:20px}
  .trust-stat:nth-child(2n)::after{display:none}
}
@media (max-width: 560px){
  .trust-strip{padding:28px 0}
  .trust-strip-inner{grid-template-columns:repeat(2,1fr);gap:16px 12px}
  .trust-stat::after{display:none!important}
  .trust-stat{padding:10px 0}
}

/* ---------- SECTION HEADING CENTERED ---------- */
.section-heading.center{text-align:center;margin-inline:auto}
.section-heading.center .eyebrow{justify-content:center}
.section-heading.center .eyebrow::before{display:none}
.section-heading.center p{margin-inline:auto}

/* ---------- ROOFING-CTA-CARD HEADER CENTERING ---------- */
.roofing-cta-card .eyebrow{justify-content:center}
.roofing-cta-card .eyebrow::before{display:none}

/* =========================================================
   PASS 2 — WOW LAYER
   Premium components: credentials, marquee, home anatomy,
   custom illustrations, smart trust signals
   ========================================================= */

/* ---------- HERO SCENE (animated SVG smart home) ---------- */
.hero-home{
  /* override min-height for the new richer hero */
  min-height:auto;
  padding:36px 0 64px;
}
.hero-scene{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.hero-scene-svg{
  position:absolute;
  bottom:-60px;
  right:-60px;
  width:1100px;
  max-width:78%;
  opacity:.55;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
@media (max-width: 1280px){
  .hero-scene-svg{opacity:.4}
}
@media (max-width: 1024px){
  .hero-scene-svg{
    bottom:auto;
    top:-40px;
    right:-100px;
    width:540px;
    opacity:.16;
  }
}
@media (max-width: 760px){
  .hero-scene-svg{
    width:420px;
    right:-140px;
    top:-20px;
    opacity:.13;
  }
}

/* Sun rays animation */
@keyframes sunPulse{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
@keyframes raySweep{
  0%,100%{opacity:.4}
  50%{opacity:.85}
}
@keyframes energyFlow{
  0%{stroke-dashoffset:60;opacity:.3}
  50%{opacity:1}
  100%{stroke-dashoffset:0;opacity:.3}
}
@keyframes panelShimmer{
  0%,100%{opacity:.6}
  50%{opacity:1}
}
@keyframes batteryGlow{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

.scene-sun{
  transform-origin: center;
  animation: sunPulse 4s ease-in-out infinite;
}
.scene-ray{
  animation: raySweep 3.5s ease-in-out infinite;
}
.scene-ray:nth-child(2){animation-delay: .3s}
.scene-ray:nth-child(3){animation-delay: .6s}
.scene-ray:nth-child(4){animation-delay: .9s}
.scene-ray:nth-child(5){animation-delay: 1.2s}
.scene-ray:nth-child(6){animation-delay: 1.5s}
.scene-ray:nth-child(7){animation-delay: 1.8s}

.scene-energy-line{
  stroke-dasharray: 6 6;
  animation: energyFlow 2.5s linear infinite;
}
.scene-energy-line.delay-1{animation-delay: .4s}
.scene-energy-line.delay-2{animation-delay: .8s}

.scene-panel{animation: panelShimmer 4s ease-in-out infinite}
.scene-panel:nth-child(2){animation-delay: .5s}
.scene-panel:nth-child(3){animation-delay: 1s}
.scene-panel:nth-child(4){animation-delay: 1.5s}

.scene-battery-cell{animation: batteryGlow 2s ease-in-out infinite}
.scene-battery-cell:nth-child(2){animation-delay: .3s}
.scene-battery-cell:nth-child(3){animation-delay: .6s}

/* Reduce hero gap so layout breathes better */
.hero-layout{
  gap:48px;
  padding:32px 0;
}
.hero-copy > p{
  font-size:clamp(1rem,.92rem + .35vw,1.15rem);
}

/* ---------- CREDENTIALS BAR (under hero) ---------- */
.credentials-bar{
  background:linear-gradient(180deg, var(--bg-deep), var(--bg-warm));
  padding:28px 0;
  position:relative;
  z-index:2;
}
.credentials-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  flex-wrap:wrap;
  width:min(var(--max),100% - var(--gutter)*2);
  margin-inline:auto;
}
.credentials-label{
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--muted);
  font-weight:500;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.credentials-label::before{
  content:"";
  display:inline-block;
  width:24px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.credentials-list{
  display:flex;
  align-items:center;
  gap:42px;
  flex-wrap:wrap;
  flex:1;
  justify-content:flex-end;
}
.credential{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ivory-2);
  font-weight:500;
  position:relative;
  transition: color .35s var(--ease);
}
.credential:hover{color:var(--gold-bright)}
.credential-icon{
  width:34px;
  height:34px;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hair-strong);
  border-radius:50%;
  color:var(--gold);
  background:rgba(214,180,113,.05);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.credential:hover .credential-icon{
  background:rgba(214,180,113,.12);
  border-color:var(--gold);
}
.credential-icon svg{width:16px;height:16px}
.credential-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.1;
}
.credential-text strong{
  font-size:.78rem;
  color:var(--ivory);
  font-weight:600;
  letter-spacing:.08em;
}
.credential-text span{
  font-size:.62rem;
  color:var(--muted);
  letter-spacing:.16em;
  font-weight:400;
}
@media (max-width: 1024px){
  .credentials-inner{justify-content:center;gap:24px;flex-direction:column;text-align:center}
  .credentials-list{justify-content:center;gap:24px;width:100%}
  .credentials-label{align-self:center}
}
@media (max-width: 640px){
  .credentials-bar{padding:24px 0}
  .credentials-list{gap:18px 24px;justify-content:space-around}
  .credential-text span{display:none}
  .credential-text strong{font-size:.72rem}
  .credential{flex:0 1 auto}
}

/* ---------- RECENTLY COMPLETED MARQUEE ---------- */
.locations-marquee{
  background:var(--bg-deep);
  padding:14px 0;
  overflow:hidden;
  position:relative;
  z-index:2;
}
.locations-marquee::before,
.locations-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}
.locations-marquee::before{
  left:0;
  background:linear-gradient(90deg, var(--bg-deep), transparent);
}
.locations-marquee::after{
  right:0;
  background:linear-gradient(90deg, transparent, var(--bg-deep));
}
.marquee-track{
  display:inline-flex;
  align-items:center;
  gap:48px;
  white-space:nowrap;
  animation: marqueeSlide 60s linear infinite;
  will-change: transform;
}
.locations-marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeSlide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee-item{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--cream);
  font-weight:500;
}
.marquee-item::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
  box-shadow:0 0 8px rgba(214,180,113,.4);
}
.marquee-item .pin{
  color:var(--gold);
  font-weight:600;
  margin-right:8px;
  letter-spacing:.14em;
}

/* ---------- HOME ANATOMY (interactive SVG) ---------- */
.home-anatomy-section{
  padding:clamp(80px,9vw,140px) 0;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 80% 30%, rgba(214,180,113,.06), transparent 60%),
    radial-gradient(700px 400px at 10% 100%, rgba(201,138,75,.05), transparent 65%),
    var(--bg);
}
.home-anatomy-grid{
  display:grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap:64px;
  align-items:center;
}
.anatomy-copy{position:relative}
.anatomy-copy .eyebrow{margin-bottom:18px}
.anatomy-copy h2{margin-bottom:22px}
.anatomy-copy > p{margin-bottom:26px;color:var(--ivory-2);font-size:1.05rem}

.anatomy-readouts{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:30px;
}
.anatomy-readout{
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  cursor:pointer;
  position:relative;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
  display:flex;
  align-items:center;
  gap:18px;
}
.anatomy-readout:hover,
.anatomy-readout.active{
  border-color:var(--gold);
  background:rgba(214,180,113,.05);
  transform:translateX(3px);
}
.anatomy-readout-num{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--gold);
  font-weight:500;
  flex-shrink:0;
  width:30px;
}
.anatomy-readout-body{flex:1;min-width:0}
.anatomy-readout-body strong{
  display:block;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.15rem;
  color:var(--ivory);
  letter-spacing:-.005em;
  margin-bottom:3px;
  line-height:1.2;
}
.anatomy-readout-body span{
  font-size:.88rem;
  color:var(--cream);
  line-height:1.5;
}
.anatomy-readout::after{
  content:"+";
  font-family:var(--mono);
  font-size:1.2rem;
  color:var(--gold);
  font-weight:400;
  margin-left:8px;
  opacity:.5;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.anatomy-readout:hover::after,
.anatomy-readout.active::after{
  opacity:1;
  transform:rotate(45deg);
}

.anatomy-canvas{
  position:relative;
  aspect-ratio: 1/1;
  max-width:640px;
  margin:0 auto;
  padding:24px;
  background:
    radial-gradient(circle at 50% 60%, rgba(214,180,113,.08), transparent 70%),
    linear-gradient(180deg, var(--panel) 0%, var(--bg-warm) 100%);
  border:1px solid var(--hair);
  border-radius:24px;
  box-shadow: var(--shade-lg);
}
.anatomy-canvas::before{
  content:"";
  position:absolute;
  inset:24px;
  background-image:
    linear-gradient(rgba(214,180,113,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,180,113,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  pointer-events:none;
  border-radius:18px;
}
.anatomy-svg{
  width:100%;
  height:100%;
  position:relative;
  z-index:2;
}
.anatomy-hotspot{
  cursor:pointer;
  transition: opacity .3s var(--ease);
}
.anatomy-hotspot circle{
  fill: var(--gold);
  fill-opacity: .2;
  stroke: var(--gold);
  stroke-width: 1.5;
  transition: fill-opacity .3s var(--ease), r .3s var(--ease);
}
.anatomy-hotspot:hover circle,
.anatomy-hotspot.active circle{
  fill-opacity:.8;
  r:8;
}
.anatomy-hotspot text{
  fill:var(--ivory);
  font-family:"JetBrains Mono", monospace;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.anatomy-pulse{
  animation: anatomyPulse 2.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes anatomyPulse{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:1;transform:scale(1.6)}
}

.anatomy-energy{
  stroke-dasharray: 4 4;
  animation: anatomyEnergyFlow 3s linear infinite;
}
@keyframes anatomyEnergyFlow{
  from{stroke-dashoffset:40}
  to{stroke-dashoffset:0}
}

@media (max-width: 1024px){
  .home-anatomy-grid{grid-template-columns:1fr;gap:40px}
  .anatomy-canvas{max-width:480px;order:-1}
  .anatomy-copy h2{font-size:clamp(1.7rem,1.4rem + 1.5vw,2.2rem)}
}

/* ---------- ENHANCED PATH SPLIT WITH ILLUSTRATIONS ---------- */
.path-card{
  padding:70px 56px 60px;
  min-height:420px;
}
.path-illustration{
  position:absolute;
  right:-10%;
  bottom:-10%;
  width:55%;
  max-width:380px;
  opacity:.55;
  z-index:1;
  transition: transform .8s var(--ease-out), opacity .5s var(--ease);
  pointer-events:none;
}
.path-card:hover .path-illustration{
  transform: translate(-12px, -12px) scale(1.05);
  opacity:.85;
}
.path-card > div{
  position:relative;
  z-index:2;
  max-width:460px;
}
.path-card h2{
  font-size:clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
}
@media (max-width: 760px){
  .path-card{padding:48px 28px 40px;min-height:auto}
  .path-illustration{width:45%;right:-8%;bottom:-8%;opacity:.35}
}

/* ---------- PREMIUM HOVER STATES ON CARDS ---------- */
.content-card,
.feature-card,
.gaf-card,
.timeline-card,
.process-step,
.system-card,
.roof-layer-card{
  transition:
    border-color .45s var(--ease),
    transform .45s var(--ease-out),
    background .45s var(--ease),
    box-shadow .45s var(--ease);
}
.content-card:hover,
.feature-card:hover,
.gaf-card:hover,
.timeline-card:hover,
.process-step:hover,
.system-card:hover,
.roof-layer-card:hover{
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(214,180,113,.08);
}

/* ---------- WHY DIVINITY — UPGRADED VISUAL ---------- */
.divinity-difference-section{
  position:relative;
  padding:clamp(80px,9vw,140px) 0;
}
.trust-grid .content-card{
  padding:38px 32px 32px;
  position:relative;
}
.trust-grid .content-card .mini-kicker{
  font-size:.74rem;
  padding:5px 12px;
}
.trust-grid .content-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.01em;
  line-height:1.18;
  margin-top:6px;
}

/* ---------- ANIMATED ENERGY FLOW ON SOLAR DIAGRAM ---------- */
.energy-diagram{
  position:relative;
  isolation:isolate;
}
.energy-line{
  position:relative;
  overflow:hidden;
}
.energy-line::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:8px;
  background:var(--gold-bright);
  border-radius:50%;
  box-shadow:0 0 8px var(--gold);
  animation: flowDot 1.8s linear infinite;
}
@keyframes flowDot{
  from{top:-8px;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  to{top:30px;opacity:0}
}
.energy-node{
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
  position:relative;
}
.energy-node:hover{
  border-color:var(--gold);
  background:var(--panel-3);
  transform:translateY(-2px);
}
.energy-node::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:var(--r-md);
  background:linear-gradient(135deg, transparent, rgba(214,180,113,.18), transparent);
  z-index:-1;
  opacity:0;
  transition: opacity .4s var(--ease);
}
.energy-node:hover::before{opacity:1}

/* ---------- ROOF LAYER CARDS — INTERACTIVE LIFT ---------- */
.roof-layer-showcase{
  perspective: 1200px;
}
.roof-layer-card{
  transition:
    border-color .4s var(--ease),
    transform .5s var(--ease-out),
    box-shadow .4s var(--ease);
  transform-style: preserve-3d;
}
.roof-layer-card:hover{
  transform: translateY(-6px) rotateX(2deg);
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px var(--hair-strong);
}
.roof-layer-card > span:first-child{
  font-size:.74rem;
  font-weight:500;
}

/* ---------- SECTION DIVIDER ORNAMENT ---------- */
.section-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin: 0 auto;
  padding:0;
  max-width:200px;
}
.section-divider::before,
.section-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-divider-mark{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--gold);
  letter-spacing:.3em;
}

/* ---------- HERO QUOTE CARD — MORE PREMIUM ---------- */
.quote-card{
  padding:32px 30px 30px;
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(214,180,113,.08),
    inset 0 1px 0 rgba(244,236,220,.06);
}
.quote-card h2{
  font-size:clamp(1.4rem,1.1rem + .7vw,1.75rem);
  margin-bottom:8px;
  letter-spacing:-.01em;
}
.quote-card > p{
  font-size:.88rem;
  margin-bottom:20px;
}
.quote-card input,
.quote-card select,
.quote-card textarea{
  padding:13px 16px;
  font-size:.9rem;
  margin-bottom:9px;
}
.quote-badge{
  font-size:.65rem;
  letter-spacing:.22em;
  padding:5px 11px;
  margin-bottom:16px;
}

/* ---------- TRUST STRIP — REFINED STATS ---------- */
.trust-strip{
  padding:32px 0;
}
.trust-stat strong{
  font-size:clamp(1.85rem, 1.5rem + 1vw, 2.4rem);
}
.trust-stat span{
  font-size:.66rem;
  letter-spacing:.22em;
}

/* ---------- NAVBAR — TIGHTER ---------- */
.logo-img{height:58px;width:auto;max-width:280px;object-fit:contain;object-position:left center}
.navbar.scrolled .logo-img{height:50px;max-width:260px}

/* ---------- HERO PILLS — MORE REFINED ---------- */
.hero-pills{margin:24px 0 28px}
.hero-pills span{
  padding:7px 13px;
  font-size:.68rem;
  letter-spacing:.16em;
}

/* ---------- BUTTONS — TIGHTER & MORE EDITORIAL ---------- */
.btn{
  padding:14px 26px;
  font-size:.82rem;
  letter-spacing:.04em;
}
.btn.ghost{padding:13px 25px}

/* ---------- SECTION HEADING — LESS BOTTOM MARGIN ---------- */
.section-heading{margin-bottom:32px}

/* =========================================================
   PASS 3 — PAIN + URGENCY + EDUCATION LAYER
   Damage education, cost-of-waiting, process, guarantee,
   certifications, service areas
   ========================================================= */

/* ---------- DAMAGE EDUCATION SECTION ---------- */
.damage-education-section{
  padding:clamp(56px,6vw,100px) 0;
  background:
    radial-gradient(900px 500px at 80% 20%, rgba(201,138,75,.06), transparent 60%),
    var(--bg-warm);
}
.damage-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 22px;
  background:linear-gradient(90deg, rgba(232,168,101,.12), rgba(201,138,75,.05));
  border:1px solid rgba(232,168,101,.3);
  border-left:3px solid var(--ember);
  border-radius:var(--r-md);
  margin-bottom:36px;
  max-width:680px;
}
.damage-banner-icon{
  width:32px;
  height:32px;
  flex-shrink:0;
  background:rgba(232,168,101,.15);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ember);
}
.damage-banner-icon svg{width:16px;height:16px}
.damage-banner-text{
  font-family:var(--mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ivory);
  font-weight:500;
}
.damage-banner-text strong{color:var(--ember);font-weight:600}

.damage-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:40px;
}
@media (max-width:980px){.damage-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.damage-cards{grid-template-columns:1fr}}
.damage-card{
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
  isolation:isolate;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.damage-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.damage-card-visual{
  height:180px;
  position:relative;
  background:linear-gradient(165deg,#171019,#0d0a10);
  border-bottom:1px solid var(--hair-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.damage-card-visual svg{
  width:100%;
  height:100%;
}
.damage-card-body{padding:24px 24px 26px}
.damage-card-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ember);
  font-weight:500;
  margin-bottom:12px;
  padding:4px 10px;
  border:1px solid rgba(232,168,101,.3);
  border-radius:999px;
  background:rgba(232,168,101,.06);
}
.damage-card-tag::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 8px var(--ember);
}
.damage-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-.01em;
  line-height:1.18;
  margin-bottom:10px;
  color:var(--ivory);
}
.damage-card p{
  font-size:.92rem;
  color:var(--cream);
  line-height:1.55;
  margin-bottom:16px;
}
.damage-card-cost{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid var(--rule);
}
.damage-card-cost-label{
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.damage-card-cost-value{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.4rem;
  color:var(--ember);
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 144;
}

/* ---------- COST OF WAITING (timeline comparison) ---------- */
.cost-of-waiting-section{
  padding:clamp(80px,9vw,140px) 0;
  position:relative;
}
.cost-timeline{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:40px;
  position:relative;
}
.cost-timeline::before{
  content:"";
  position:absolute;
  top:46px;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg, var(--ok), var(--warn), var(--ember));
  opacity:.3;
  pointer-events:none;
  z-index:0;
}
.cost-stage{
  position:relative;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:30px 28px 28px;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
  z-index:1;
}
.cost-stage:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.cost-stage-dot{
  position:absolute;
  top:-12px;
  left:30px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--panel);
  border:2px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cost-stage-dot::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
}
.cost-stage.now .cost-stage-dot{border-color:var(--ok)}
.cost-stage.now .cost-stage-dot::before{background:var(--ok)}
.cost-stage.later .cost-stage-dot{border-color:var(--warn)}
.cost-stage.later .cost-stage-dot::before{background:var(--warn)}
.cost-stage.eventually .cost-stage-dot{border-color:var(--ember)}
.cost-stage.eventually .cost-stage-dot::before{background:var(--ember)}
.cost-stage-when{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gold);
  margin-bottom:14px;
  margin-top:6px;
  font-weight:500;
}
.cost-stage.now .cost-stage-when{color:var(--ok)}
.cost-stage.later .cost-stage-when{color:var(--warn)}
.cost-stage.eventually .cost-stage-when{color:var(--ember)}
.cost-stage h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.015em;
  line-height:1.1;
  margin-bottom:12px;
}
.cost-stage > p{
  font-size:.92rem;
  color:var(--cream);
  line-height:1.55;
  margin-bottom:18px;
}
.cost-stage-price{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding-top:18px;
  border-top:1px solid var(--rule);
}
.cost-stage-price strong{
  font-family:var(--serif);
  font-weight:340;
  font-size:2rem;
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 144;
}
.cost-stage.now .cost-stage-price strong{color:var(--ok)}
.cost-stage.later .cost-stage-price strong{color:var(--warn)}
.cost-stage.eventually .cost-stage-price strong{color:var(--ember)}
.cost-stage-price span{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
@media (max-width: 900px){
  .cost-timeline{grid-template-columns:1fr;gap:14px}
  .cost-timeline::before{display:none}
}

/* ---------- HOW WE WORK — 5 step process ---------- */
.how-we-work-section{
  padding:clamp(80px,9vw,140px) 0;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
}
.work-process{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  margin-top:40px;
  position:relative;
}
.work-step{
  position:relative;
  padding:30px 24px 26px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.work-step:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.work-step-num{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--gold);
  letter-spacing:.18em;
  font-weight:500;
  margin-bottom:14px;
  padding:5px 11px;
  border:1px solid var(--hair-strong);
  border-radius:999px;
  background:rgba(214,180,113,.06);
}
.work-step-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hair-strong);
  border-radius:12px;
  margin-bottom:18px;
  color:var(--gold);
  background:rgba(214,180,113,.04);
}
.work-step-icon svg{width:22px;height:22px}
.work-step h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.18rem;
  letter-spacing:-.005em;
  line-height:1.18;
  color:var(--ivory);
  margin-bottom:10px;
}
.work-step p{
  font-size:.88rem;
  color:var(--cream);
  line-height:1.55;
}
@media (max-width: 1100px){
  .work-process{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width: 700px){
  .work-process{grid-template-columns:1fr;gap:12px}
}

/* ---------- VALUES GRID (4 cards: vision/mission/values/commitment) ---------- */
.values-section{
  padding:clamp(56px,7vw,110px) 0;
  background:var(--bg-warm);
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.value-card{
  padding:36px 28px 32px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.value-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.value-card-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--gold);
  border-radius:50%;
  margin-bottom:22px;
  color:var(--gold);
  background:rgba(214,180,113,.08);
}
.value-card-icon svg{width:24px;height:24px}
.value-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.45rem;
  letter-spacing:-.015em;
  line-height:1.1;
  color:var(--ivory);
  margin-bottom:14px;
}
.value-card p{
  font-size:.94rem;
  color:var(--cream);
  line-height:1.6;
}
@media (max-width: 1024px){
  .values-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 540px){
  .values-grid{grid-template-columns:1fr}
}

/* ---------- PERSONAL GUARANTEE ---------- */
.guarantee-section{
  padding:clamp(80px,9vw,140px) 0;
  position:relative;
  overflow:hidden;
}
.guarantee-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 70% 30%, rgba(214,180,113,.08), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(201,138,75,.05), transparent 60%);
  z-index:0;
  pointer-events:none;
}
.guarantee-grid{
  display:grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .8fr);
  gap:48px;
  align-items:center;
  position:relative;
  z-index:1;
}
.guarantee-copy{text-align:center}
.guarantee-copy .eyebrow{justify-content:center}
.guarantee-portrait{
  position:relative;
  aspect-ratio: 4/5;
  max-width:420px;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--hair-strong);
  background:
    radial-gradient(circle at 50% 30%, rgba(214,180,113,.18), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--bg-warm));
  box-shadow: var(--shade-lg);
}
.guarantee-portrait::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(214,180,113,.1) 0%, transparent 40%),
    linear-gradient(0deg, rgba(0,0,0,.4) 0%, transparent 50%);
  pointer-events:none;
  z-index:2;
}
.guarantee-portrait svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.guarantee-portrait-badge{
  position:absolute;
  top:24px;
  left:24px;
  padding:10px 16px;
  background:rgba(8,7,10,.85);
  backdrop-filter:blur(12px);
  border:1px solid var(--hair-strong);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gold);
  font-weight:500;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.guarantee-portrait-badge::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 8px var(--ok);
}
.guarantee-portrait-caption{
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  z-index:3;
}
.guarantee-portrait-caption strong{
  display:block;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.4rem;
  color:#f5ede0;
  letter-spacing:-.01em;
  margin-bottom:4px;
}
.guarantee-portrait-caption span{
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gold-on-dark);
}
.guarantee-copy h2{margin-bottom:24px}
.guarantee-quote{
  font-family:var(--serif);
  font-weight:800;
  font-style:italic;
  font-size:clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  line-height:1.3;
  color:var(--ivory);
  margin:24px auto 26px;
  position:relative;
  padding:0 24px;
  text-align:center;
  max-width:54ch;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding-top:22px;
  padding-bottom:22px;
}
.guarantee-signature{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:28px;
}
/* Dual signature — two signers centered with a divider */
.guarantee-signature-dual{
  justify-content:center;
  flex-wrap:wrap;
  gap:28px;
  margin-top:4px;
}
.guarantee-signer{
  display:flex;
  align-items:center;
  gap:14px;
}
.guarantee-signature-divider{
  width:1px;
  align-self:stretch;
  min-height:48px;
  background:linear-gradient(180deg, transparent, var(--hair-strong), transparent);
}
.guarantee-signature-script{
  font-family:var(--serif);
  font-weight:800;
  font-style:italic;
  font-size:1.7rem;
  color:var(--gold-bright);
  letter-spacing:.01em;
  font-variation-settings:"opsz" 144, "SOFT" 100;
}
.guarantee-signature-byline{
  display:flex;
  flex-direction:column;
  padding-left:18px;
  border-left:1px solid var(--rule);
}
.guarantee-signature-byline strong{
  font-family:var(--sans);
  font-weight:600;
  font-size:.92rem;
  color:var(--ivory);
  letter-spacing:.01em;
}
.guarantee-signature-byline span{
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-top:2px;
}
.guarantee-points{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:30px;
  max-width:440px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.guarantee-point{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.guarantee-point-icon{
  flex-shrink:0;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(214,180,113,.1);
  border:1px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  margin-top:2px;
}
.guarantee-point-icon svg{width:12px;height:12px}
.guarantee-point span{
  font-size:.95rem;
  color:var(--cream);
  line-height:1.5;
}
@media (max-width: 1024px){
  .guarantee-grid{grid-template-columns:1fr 1fr;gap:32px}
  .guarantee-copy{grid-column:1 / -1;order:-1}
  .guarantee-portrait{max-width:380px;margin:0 auto;width:100%}
}
@media (max-width: 720px){
  /* Stack everything single column on phones */
  .guarantee-grid{grid-template-columns:1fr;gap:24px}
  .guarantee-copy{grid-column:1;order:-1}
  /* Portrait: fixed height on mobile so it always shows */
  .guarantee-portrait{
    max-width:100%;
    aspect-ratio:unset;
    height:240px;
    min-height:200px;
  }
  .guarantee-signature-dual{flex-direction:column;gap:20px;align-items:center}
  .guarantee-signature-divider{width:60px;min-height:1px;height:1px;background:linear-gradient(90deg, transparent, var(--hair-strong), transparent)}
  .guarantee-signer{justify-content:center}
}

/* ---------- CERTIFICATION SHOWCASE (bigger, dedicated section) ---------- */
.certification-showcase{
  padding:clamp(48px,6vw,88px) 0;
  background:var(--bg-deep);
}
.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
  margin-top:40px;
}
.cert-tile{
  padding:28px 22px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
  min-height:160px;
}
.cert-tile:hover{
  border-color:var(--gold);
  background:var(--panel-2);
  transform:translateY(-3px);
}
.cert-tile-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hair-strong);
  border-radius:50%;
  color:var(--gold);
  background:rgba(214,180,113,.05);
}
.cert-tile-icon svg{width:22px;height:22px}
.cert-tile-name{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.08rem;
  letter-spacing:-.005em;
  color:var(--ivory);
  line-height:1.15;
}
.cert-tile-sub{
  font-family:var(--mono);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}

/* ---------- SERVICE AREAS ---------- */
.service-areas-section{
  padding:clamp(80px,9vw,140px) 0;
}
.service-areas-intro{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap:64px;
  align-items:center;
  margin-bottom:48px;
}
@media (max-width: 1024px){
  .service-areas-intro{grid-template-columns:1fr;gap:32px}
}
.service-areas-states{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.service-state-row{
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  transition:border-color .4s var(--ease);
}
.service-state-row:hover{border-color:var(--hair-strong)}
.service-state-tag{
  flex-shrink:0;
  width:64px;
  height:64px;
  background:rgba(214,180,113,.08);
  border:1px solid var(--hair-strong);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.5rem;
  color:var(--gold-bright);
  letter-spacing:-.01em;
}
.service-state-body{flex:1;min-width:0}
.service-state-body h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:-.01em;
  color:var(--ivory);
  margin-bottom:14px;
}
.service-towns{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.service-town{
  padding:6px 12px;
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--cream);
  background:var(--panel-2);
  border:1px solid var(--rule-2);
  border-radius:999px;
  font-weight:500;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.service-town:hover{
  color:var(--gold-bright);
  border-color:var(--gold);
  background:rgba(214,180,113,.06);
}

/* ---------- LEARNING HUB CARDS ---------- */
.learning-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:40px;
  align-items:stretch;
}
.learning-cards > .learning-card{height:100%}
@media (max-width:1024px){
  .learning-cards{grid-template-columns:repeat(2,1fr)}
  .learning-cards > .learning-card:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:640px){
  .learning-cards{grid-template-columns:1fr}
}
.learning-card{
  padding:32px 28px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.learning-card:hover{
  border-color:var(--hair-strong);
  transform:translateY(-3px);
}
.learning-card-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hair-strong);
  border-radius:12px;
  margin-bottom:18px;
  color:var(--gold);
  background:rgba(214,180,113,.05);
}
.learning-card-icon svg{width:22px;height:22px}
.learning-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-.01em;
  line-height:1.18;
  margin-bottom:12px;
  color:var(--ivory);
}
.learning-card p{
  font-size:.92rem;
  color:var(--cream);
  line-height:1.6;
}

/* ---------- LARGE NUMBER SHOWCASE (1241 projects style) ---------- */
.urgency-banner{
  background:linear-gradient(135deg, rgba(232,168,101,.12), rgba(201,138,75,.04));
  border:1px solid rgba(232,168,101,.3);
  border-radius:var(--r-xl);
  padding:36px 40px;
  margin-bottom:48px;
  display:flex;
  align-items:center;
  gap:32px;
  position:relative;
  overflow:hidden;
}
.urgency-banner::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--ember), var(--copper));
}
.urgency-banner-icon{
  flex-shrink:0;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(232,168,101,.15);
  border:1px solid rgba(232,168,101,.4);
  border-radius:50%;
  color:var(--ember);
}
.urgency-banner-icon svg{width:24px;height:24px}
.urgency-banner-text{flex:1}
.urgency-banner-text strong{
  display:block;
  font-family:var(--serif);
  font-weight:800;
  font-size:1.3rem;
  color:var(--ivory);
  letter-spacing:-.01em;
  margin-bottom:4px;
  line-height:1.2;
}
.urgency-banner-text strong em{color:var(--ember);font-style:italic;font-weight:340}
.urgency-banner-text span{
  font-size:.92rem;
  color:var(--cream);
  line-height:1.5;
}
@media (max-width: 760px){
  .urgency-banner{padding:24px 22px;gap:18px;flex-direction:column;align-items:flex-start}
  .urgency-banner-text strong{font-size:1.15rem}
}

/* =========================================================
   PASS 4 — DEEP RESTRUCTURE
   Home: path-cards, triple-cta · Roofing: assembly specs,
   manufacturer row · Solar: flow diagram, equipment partners
   ========================================================= */

/* ---------- HOME PATH CARDS (image + body) ---------- */
.path-cards-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:40px;
}
.path-card-home{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
  text-decoration:none;
}
.path-card-home:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.path-card-img{
  position:relative;
  aspect-ratio: 16/9;
  overflow:hidden;
  background:var(--panel-2);
}
.path-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
  filter:saturate(.9) contrast(1.05);
}
.path-card-home:hover .path-card-img img{transform:scale(1.06)}
.path-card-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(8,7,10,.7));
  pointer-events:none;
}
.path-card-tag{
  position:absolute;
  top:18px;
  left:18px;
  padding:6px 12px;
  background:rgba(8,7,10,.8);
  backdrop-filter:blur(8px);
  border:1px solid var(--hair-strong);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gold);
  font-weight:500;
  z-index:2;
}
.path-card-body{
  padding:32px 32px 32px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.path-card-body h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.7rem;
  letter-spacing:-.015em;
  color:var(--ivory);
  margin-bottom:12px;
  line-height:1.15;
}
.path-card-body p{
  font-size:.95rem;
  color:var(--cream);
  line-height:1.6;
  margin-bottom:20px;
}
.path-card-list{
  list-style:none;
  padding:0;
  margin:0 0 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.path-card-list li{
  position:relative;
  padding-left:22px;
  font-size:.9rem;
  color:var(--cream);
  line-height:1.45;
}
.path-card-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:12px;
  height:1px;
  background:var(--gold);
}
.path-card-cta{
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gold);
  font-weight:500;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--rule);
  transition:color .3s var(--ease);
}
.path-card-home:hover .path-card-cta{color:var(--gold-bright)}
@media (max-width: 900px){
  .path-cards-row{grid-template-columns:1fr;gap:18px}
  .path-card-body{padding:26px 24px 26px}
  .path-card-body h3{font-size:1.45rem}
}

/* ---------- TRIPLE CTA TILES ---------- */
.triple-cta-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:40px;
}
.cta-tile{
  display:flex;
  flex-direction:column;
  padding:38px 32px 32px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  text-decoration:none;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.cta-tile::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.cta-tile:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
  background:var(--panel-2);
}
.cta-tile:hover::before{opacity:1}
.cta-tile-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--gold);
  border-radius:50%;
  margin-bottom:22px;
  color:var(--gold);
  background:rgba(214,180,113,.08);
  transition:background .4s var(--ease);
}
.cta-tile:hover .cta-tile-icon{
  background:rgba(214,180,113,.18);
}
.cta-tile-icon svg{width:24px;height:24px}
.cta-tile h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:-.01em;
  line-height:1.15;
  color:var(--ivory);
  margin-bottom:12px;
}
.cta-tile p{
  font-size:.92rem;
  color:var(--cream);
  line-height:1.55;
  margin-bottom:20px;
  flex:1;
}
.cta-tile-link{
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gold);
  font-weight:500;
  margin-top:auto;
}
.cta-tile:hover .cta-tile-link{color:var(--gold-bright)}
@media (max-width: 900px){
  .triple-cta-grid{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .cta-tile{
    display:grid;
    grid-template-columns:48px 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:16px;
    row-gap:2px;
    padding:20px 22px;
  }
  .cta-tile-icon{
    grid-row:1 / span 2;
    grid-column:1;
    flex-shrink:0;
    margin-bottom:0;
    width:48px;height:48px;
    align-self:center;
  }
  .cta-tile h3{
    grid-column:2;grid-row:1;
    font-size:1.1rem;
    margin-bottom:0;
    line-height:1.2;
    align-self:end;
  }
  .cta-tile p{display:none}
  .cta-tile-link{
    grid-column:2;grid-row:2;
    margin-top:0;
    font-size:.72rem;
    align-self:start;
  }
}

/* ---------- ROOFING/SOLAR DEEP PAGE COMPONENTS ---------- */

/* Spec list (Patriot-style assembly details) */
.spec-comparison{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:32px;
  margin-top:40px;
}
.spec-column{
  padding:36px 32px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
}
.spec-column.theirs{opacity:.7}
.spec-column.ours{
  border-color:var(--hair-strong);
  background:linear-gradient(135deg, rgba(214,180,113,.06), var(--panel));
}
.spec-column-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--rule);
}
.spec-column-icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--hair-strong);
  flex-shrink:0;
}
.spec-column.ours .spec-column-icon{
  background:rgba(214,180,113,.1);
  border-color:var(--gold);
  color:var(--gold);
}
.spec-column.theirs .spec-column-icon{
  color:var(--muted);
}
.spec-column-icon svg{width:18px;height:18px}
.spec-column-title{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:500;
}
.spec-column.theirs .spec-column-title{color:var(--muted)}
.spec-column.ours .spec-column-title{color:var(--gold)}
.spec-column h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-.01em;
  line-height:1.15;
  color:var(--ivory);
  margin-bottom:14px;
  margin-top:-8px;
}
.spec-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.spec-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.93rem;
  color:var(--cream);
  line-height:1.5;
}
.spec-list-mark{
  flex-shrink:0;
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}
.spec-column.theirs .spec-list-mark{
  background:rgba(168,158,138,.1);
  color:var(--muted);
}
.spec-column.ours .spec-list-mark{
  background:rgba(127,191,139,.12);
  color:var(--ok);
}
.spec-list-mark svg{width:10px;height:10px}
.spec-list li strong{
  display:block;
  font-family:var(--sans);
  font-weight:600;
  font-size:.95rem;
  color:var(--ivory);
  margin-bottom:2px;
  letter-spacing:.005em;
}
.spec-column.theirs .spec-list li strong{color:var(--cream)}
.spec-list li span{font-size:.85rem;color:var(--muted);line-height:1.5}
@media (max-width: 900px){
  .spec-comparison{grid-template-columns:1fr;gap:18px}
}

/* Manufacturer/partner logo row */
.manufacturer-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
  margin-top:40px;
}
.manufacturer-tile{
  padding:32px 24px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  min-height:140px;
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.manufacturer-tile:hover{
  border-color:var(--gold);
  background:var(--panel-2);
  transform:translateY(-3px);
}
.manufacturer-logo{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.45rem;
  color:var(--ivory);
  letter-spacing:-.015em;
  line-height:1;
}
.manufacturer-logo em{
  font-style:italic;
  color:var(--gold-bright);
  font-weight:340;
}
.manufacturer-tile span{
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  font-weight:500;
}

/* Roofing/Solar gallery */
.project-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:40px;
}
.project-gallery-grid .project-photo:nth-child(1){
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 700px){
  .project-gallery-grid{grid-template-columns:1fr;grid-auto-rows: 260px}
  .project-gallery-grid .project-photo:nth-child(1){
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Solar flow diagram */
.solar-flow-diagram{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  align-items:stretch;
  margin-top:40px;
  position:relative;
}
.flow-step{
  position:relative;
  padding:32px 22px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  text-align:center;
  transition: border-color .4s var(--ease);
}
.flow-step:hover{border-color:var(--gold)}
.flow-step-icon{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  background:rgba(214,180,113,.08);
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
}
.flow-step-icon svg{width:28px;height:28px}
.flow-step-num{
  display:inline-block;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:12px;
  font-weight:500;
}
.flow-step h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:-.005em;
  margin-bottom:8px;
  color:var(--ivory);
}
.flow-step p{
  font-size:.85rem;
  color:var(--cream);
  line-height:1.5;
}
.flow-arrow{
  position:absolute;
  top:50%;
  right:-12px;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
}
.flow-arrow svg{width:12px;height:12px}
.flow-step:last-child .flow-arrow{display:none}
@media (max-width: 1000px){
  .solar-flow-diagram{grid-template-columns:repeat(2,1fr);gap:18px}
  .flow-step:nth-child(2) .flow-arrow{display:none}
}
@media (max-width: 600px){
  .solar-flow-diagram{grid-template-columns:1fr}
  .flow-arrow{display:none !important}
}

/* Math/savings comparison */
.savings-comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:40px;
}
.savings-card{
  padding:36px 32px;
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  overflow:hidden;
}
.savings-card.bad{
  background:linear-gradient(135deg, rgba(232,168,101,.06), var(--panel));
  border-color:rgba(232,168,101,.3);
}
.savings-card.good{
  background:linear-gradient(135deg, rgba(127,191,139,.08), var(--panel));
  border-color:rgba(127,191,139,.3);
}
.savings-card-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-bottom:16px;
  padding:5px 12px;
  border-radius:999px;
  font-weight:500;
}
.savings-card.bad .savings-card-label{
  color:var(--ember);
  background:rgba(232,168,101,.1);
  border:1px solid rgba(232,168,101,.3);
}
.savings-card.good .savings-card-label{
  color:var(--ok);
  background:rgba(127,191,139,.1);
  border:1px solid rgba(127,191,139,.3);
}
.savings-card h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.01em;
  color:var(--ivory);
  margin-bottom:14px;
  line-height:1.2;
}
.savings-card > p{
  font-size:.92rem;
  color:var(--cream);
  line-height:1.55;
  margin-bottom:22px;
}
.savings-figure{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-top:20px;
  border-top:1px solid var(--rule);
}
.savings-figure strong{
  font-family:var(--serif);
  font-weight:340;
  font-size:2.6rem;
  letter-spacing:-.01em;
  line-height:1;
  font-variation-settings:"opsz" 144;
}
.savings-card.bad .savings-figure strong{color:var(--ember)}
.savings-card.good .savings-figure strong{color:var(--ok)}
.savings-figure span{
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  font-weight:500;
}
@media (max-width: 760px){
  .savings-comparison{grid-template-columns:1fr;gap:14px}
}

/* Concept explainer (net metering, etc) */
.concept-explainer{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap:48px;
  align-items:center;
  margin-top:40px;
}
.concept-visual{
  position:relative;
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle at 50% 40%, rgba(214,180,113,.12), transparent 70%),
    linear-gradient(165deg,#171019,#0d0a10);
  border:1px solid var(--hair-strong);
  border-radius:var(--r-lg);
  padding:30px;
  overflow:hidden;
  box-shadow:var(--shade-md);
}
.concept-visual svg{
  width:100%;
  height:100%;
}
.concept-copy h3{
  font-family:var(--serif);
  font-weight:800;
  font-size:1.7rem;
  letter-spacing:-.015em;
  line-height:1.1;
  color:var(--ivory);
  margin-bottom:14px;
}
.concept-copy h3 em{color:var(--gold-bright);font-style:italic;font-weight:340}
.concept-copy p{
  font-size:.96rem;
  color:var(--cream);
  line-height:1.65;
  margin-bottom:18px;
}
.concept-copy ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.concept-copy ul li{
  position:relative;
  padding-left:24px;
  font-size:.92rem;
  color:var(--cream);
  line-height:1.5;
}
.concept-copy ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:14px;
  height:1px;
  background:var(--gold);
}
.concept-copy ul li strong{
  color:var(--ivory);
  font-weight:600;
  font-size:.94rem;
}
@media (max-width: 900px){
  .concept-explainer{grid-template-columns:1fr;gap:32px}
}

/* =========================================================
   PASS 5 — IMAGE SIZING + SYMMETRY + READABILITY
   Proper image aspect-ratio enforcement, symmetric grids,
   consistent card heights, better font contrast
   ========================================================= */

/* ---------- GLOBAL IMAGE BEHAVIOR ---------- */
img {
  max-width: 100%;
  height: auto;
}

/* Standard photo card: 3:2 aspect, never stretched */
.photo-card {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
  background: var(--panel-2);
}
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.photo-card:hover img {
  transform: scale(1.04);
}

/* Project photo: 4:3 for gallery */
.project-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
  background: var(--panel);
}
.project-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
  filter: saturate(.95) contrast(1.02);
}
.project-photo:hover img {
  transform: scale(1.05);
}
.project-photo figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(8,7,10,.92));
  color: #faf4e8;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 500;
}

/* ---------- SYMMETRIC GRID ENFORCEMENT ---------- */
/* Equalize card heights across rows */
.symmetric-grid {
  display: grid;
  gap: 18px;
}
.symmetric-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.symmetric-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.symmetric-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .symmetric-grid.cols-3, .symmetric-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .symmetric-grid.cols-2, .symmetric-grid.cols-3, .symmetric-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Make all cards inside symmetric grid stretch fully */
.symmetric-grid > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Override "wide-feature" asymmetric cards on the new layouts */
.feature-grid.elite-grid .wide-feature {
  grid-column: span 1;
}

/* ---------- IMPROVED REVIEW CARDS WITH PORTRAIT FALLBACK ---------- */
.review-card {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.review-card .stars {
  font-size: 1rem;
  color: var(--gold-bright);
  letter-spacing: 4px;
  margin-bottom: 14px;
}
.review-card p {
  flex: 1;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ivory-2);
  margin-bottom: 20px;
  font-style: italic;
  font-family: var(--serif);
  font-weight: 380;
}
.review-card h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--gold-bright);
  font-weight: 600;
  text-transform: none;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin: 0;
}
.review-card h4::before {
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(214,180,113,.35), rgba(168,133,62,.15));
  border: 1px solid rgba(214,180,113,.4);
  display: inline-block;
}

/* ---------- HERO IMAGE BACKGROUND (replaces SVG scene) ---------- */
.hero-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-photo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20,14,8,.86) 0%, rgba(20,14,8,.72) 40%, rgba(20,14,8,.55) 70%, rgba(20,14,8,.45) 100%),
    linear-gradient(180deg, rgba(20,14,8,.2) 0%, rgba(20,14,8,.6) 100%);
  z-index: 2;
}
.hero-photo-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.05) brightness(.65);
}
.hero-photo-bg ~ .container,
.hero-photo-bg ~ * {
  position: relative;
  z-index: 3;
}

/* ---------- HOMEPAGE FOCUSED CTA SECTION ---------- */
.featured-photo-section {
  padding: clamp(60px, 7vw, 100px) 0;
  position: relative;
}
.featured-photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 1024px) {
  .featured-photo-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .featured-photo-grid .photo-card {
    order: -1;
  }
}
.featured-photo-grid .photo-card {
  aspect-ratio: 4 / 5;
}
@media (max-width: 1024px) {
  .featured-photo-grid .photo-card {
    aspect-ratio: 3 / 2;
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ---------- BIGGER, MORE READABLE HEADINGS ---------- */
.section-heading h2 {
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.95rem);
  line-height: 1.08;
  margin-bottom: .65em;
}
.section-heading p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ivory-2);
}

/* Card body text — bigger and more readable */
.content-card p,
.feature-card p,
.cta-tile p,
.work-step p,
.value-card p,
.damage-card p,
.cost-stage p,
.path-card-body p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ivory-2);
}

.content-card h3,
.feature-card h3,
.cta-tile h3,
.work-step h3,
.value-card h3 {
  font-size: 1.35rem;
  color: var(--ivory);
}

/* ---------- TIGHTER MORE READABLE LISTS ---------- */
.path-card-list li,
.guarantee-point span,
.spec-list li {
  font-size: 1rem;
  color: var(--ivory-2);
  line-height: 1.55;
}
.spec-list li strong {
  color: var(--ivory);
  font-size: 1rem;
}

/* ---------- IMPROVED EYEBROW READABILITY ---------- */
.eyebrow {
  font-size: .76rem;
  color: var(--gold-bright);
  font-weight: 500;
}

/* ---------- PATH CARD IMAGE HEIGHT ENFORCED ---------- */
.path-card-img {
  aspect-ratio: 16 / 10;
}

/* ---------- UTILITY/ROBUSTNESS — catchalls for ad-hoc page classes ---------- */
.bill-burden-section,
.maine-intelligence-section,
.maine-visual-proof-section,
.maine-original-proof-section,
.public-source-section,
.objection-section,
.state-objection-section,
.state-strategy-section,
.exposure-model-section,
.why-happening-section,
.warranty-section,
.roof-101-section,
.roof-weather-section,
.roof-diagram-section,
.roof-damage-section,
.roof-solar-ready-section,
.solar-flow-section,
.solar-roofing-section,
.solar-monitoring-section,
.solar-projects-state-section,
.solar-proof-gallery-section,
.solar-real-install-section,
.solar-process-projects,
.energy-intel-section,
.energy-calculator-section,
.guided-intake-section,
.review-route-section,
.map-proof-section,
.divinity-difference-section,
.signature-framework-section,
.image-flow-section,
.gaf-material-diagram-section,
.gaf-image-flow{
  /* shared section behaviors inherit from .section */
}

/* =========================================================
   ROOFING KNOWLEDGE HUB — tabbed educational centerpiece
   ========================================================= */
.rk-hub{
  background:
    radial-gradient(1100px 600px at 85% -5%, rgba(184,137,58,.07), transparent 60%),
    radial-gradient(900px 500px at 0% 105%, rgba(176,106,46,.05), transparent 60%),
    var(--bg-warm);
}
.rk{
  margin-top:44px;
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  background:var(--panel);
  box-shadow:var(--shade-md);
  overflow:hidden;
}

/* ----- tab rail ----- */
.rk-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg, var(--panel-2), var(--panel-3));
  border-bottom:1px solid var(--hair);
}
.rk-tab{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:20px 22px;
  border-right:1px solid var(--rule);
  position:relative;
  transition:background .35s var(--ease);
}
.rk-tab:last-child{border-right:0}
.rk-tab::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:3px;
  background:linear-gradient(90deg,var(--gold),var(--copper));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .4s var(--ease-out);
}
.rk-tab.active::after{transform:scaleX(1)}
.rk-tab:hover{background:rgba(184,137,58,.06)}
.rk-tab.active{background:var(--panel)}
.rk-tab-ico{
  flex-shrink:0;
  width:42px;height:42px;
  border-radius:12px;
  display:grid;place-items:center;
  color:var(--gold-deep);
  background:rgba(184,137,58,.10);
  border:1px solid var(--hair);
  transition:color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.rk-tab-ico svg{width:21px;height:21px}
.rk-tab.active .rk-tab-ico{
  color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--copper));
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(184,137,58,.32);
}
.rk-tab-txt{display:flex;flex-direction:column;line-height:1.2}
.rk-tab-txt strong{
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  color:var(--ivory);
  letter-spacing:-.01em;
}
.rk-tab-txt em{
  font-style:normal;
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  margin-top:3px;
}

/* ----- panels ----- */
.rk-panel{padding:clamp(26px,3.4vw,48px)}
.rk-panel[hidden]{display:none}
.rk-panel.active{animation:rkFade .5s var(--ease-out) both}
@keyframes rkFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.rk-panel-lead{
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
  margin-bottom:38px;
  padding-bottom:30px;
  border-bottom:1px solid var(--rule);
}
.rk-kicker{
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gold-deep);
  margin-bottom:12px;
}
.rk-panel-lead h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);
  line-height:1.16;
  letter-spacing:-.015em;
  color:var(--ivory);
  margin-bottom:14px;
}
.rk-panel-lead > div > p:last-child{
  color:var(--cream);
  font-size:1rem;
  line-height:1.6;
  max-width:60ch;
}
.rk-airflow{
  width:300px;max-width:38vw;flex-shrink:0;
  background:linear-gradient(180deg,#fff,var(--panel-2));
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:14px;
}
.rk-flow-out,.rk-flow-up{animation:rkRise 2.4s var(--ease-out) infinite}
.rk-flow-up{animation-delay:.4s}
@keyframes rkRise{0%,100%{opacity:.55;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}
.rk-flow-in{animation:rkDraw 2.8s var(--ease-out) infinite}
@keyframes rkDraw{0%,100%{opacity:.6}50%{opacity:1}}

.rk-subhead{
  font-family:var(--sans);
  font-weight:600;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gold-deep);
  margin:38px 0 18px;
  display:flex;align-items:center;gap:12px;
}
.rk-subhead::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ----- generic mini-card grids ----- */
.rk-grid{display:grid;gap:14px}
.rk-grid-5{grid-template-columns:repeat(5,1fr)}
.rk-grid-4{grid-template-columns:repeat(4,1fr)}
.rk-mini{
  background:var(--panel-2);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:18px 18px 20px;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.rk-mini:hover{transform:translateY(-3px);border-color:var(--hair-strong);box-shadow:var(--shade-sm)}
.rk-mini strong{display:block;font-size:1rem;color:var(--ivory);margin-bottom:7px;font-weight:600}
.rk-mini p{font-size:.86rem;color:var(--cream);line-height:1.5}
.rk-mini-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:3px 9px;
  border-radius:999px;
  margin-bottom:11px;
}
.rk-mini-tag.intake{color:#2f7fb0;background:rgba(47,127,176,.12)}
.rk-mini-tag.exhaust{color:#c0492b;background:rgba(192,73,43,.12)}
.rk-mini-tag.both{color:var(--gold-deep);background:rgba(184,137,58,.12)}
.rk-mini-tag.caution{color:var(--warn);background:rgba(196,122,40,.14)}

/* ----- proper vs poor ----- */
.rk-vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
.rk-vs-card{
  border-radius:var(--r-md);
  padding:22px 24px;
  border:1px solid var(--hair);
}
.rk-vs-card.good{background:rgba(63,157,87,.07);border-color:rgba(63,157,87,.28)}
.rk-vs-card.bad{background:rgba(192,73,43,.06);border-color:rgba(192,73,43,.24)}
.rk-vs-flag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:.92rem;
  margin-bottom:14px;
}
.rk-vs-flag svg{width:16px;height:16px}
.rk-vs-card.good .rk-vs-flag{color:var(--ok)}
.rk-vs-card.bad .rk-vs-flag{color:#c0492b}
.rk-vs-card ul{display:flex;flex-direction:column;gap:8px}
.rk-vs-card li{position:relative;padding-left:18px;font-size:.9rem;color:var(--ivory-2);line-height:1.45}
.rk-vs-card li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%}
.rk-vs-card.good li::before{background:var(--ok)}
.rk-vs-card.bad li::before{background:#c0492b}

/* ----- split note / table ----- */
.rk-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.rk-note{
  background:var(--panel-2);
  border:1px solid var(--hair);
  border-left:3px solid var(--gold);
  border-radius:var(--r-md);
  padding:22px 24px;
}
.rk-note.rk-note-full{margin-top:24px}
.rk-note p{font-size:.92rem;color:var(--cream);line-height:1.55;margin-bottom:10px}
.rk-note p:last-child{margin-bottom:0}
.rk-note strong{color:var(--ivory)}
.rk-note-eg{
  font-family:var(--mono);font-size:.78rem;color:var(--gold-deep)!important;
  background:rgba(184,137,58,.07);padding:10px 12px;border-radius:8px;margin-top:4px;
}
.rk-note.good-note{border-left-color:var(--ok)}
.rk-note.bad-note{border-left-color:#c0492b}

.rk-table-wrap{
  background:var(--panel-2);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:14px 18px 16px;
}
.rk-table{width:100%;border-collapse:collapse;font-size:.88rem}
.rk-table th{
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--hair-strong);font-weight:500;
}
.rk-table td{padding:9px 10px;border-bottom:1px solid var(--rule);color:var(--ivory-2)}
.rk-table td:first-child{font-weight:600;color:var(--ivory)}
.rk-table tr:last-child td{border-bottom:0}
.rk-table-foot{font-size:.76rem;color:var(--muted);margin-top:10px;line-height:1.4}

/* ----- pitfalls chips ----- */
.rk-pitfalls{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:28px}
.rk-pitfalls-label{
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;
  color:#c0492b;margin-right:4px;
}
.rk-chip{
  font-size:.8rem;color:var(--ivory-2);
  padding:6px 13px;border-radius:999px;
  background:rgba(192,73,43,.06);border:1px solid rgba(192,73,43,.2);
}

/* ----- materials grid ----- */
.rk-mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rk-mat{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:24px 24px 26px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.rk-mat:hover{transform:translateY(-4px);border-color:var(--hair-strong);box-shadow:var(--shade-md)}
.rk-mat-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.rk-mat-top h4{font-family:var(--serif);font-weight:420;font-size:1.32rem;color:var(--ivory);letter-spacing:-.01em}
.rk-mat-sub{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.rk-life{
  display:inline-block;font-family:var(--mono);font-weight:600;font-size:.74rem;letter-spacing:.06em;
  color:var(--gold-deep);background:rgba(184,137,58,.10);border:1px solid var(--hair);
  padding:4px 11px;border-radius:999px;margin:10px 0 14px;
}
.rk-mat-desc{font-size:.88rem;color:var(--cream);line-height:1.5;margin-bottom:14px}
.rk-pro,.rk-con{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.rk-pro li,.rk-con li{position:relative;padding-left:20px;font-size:.84rem;color:var(--ivory-2);line-height:1.4}
.rk-pro li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--ok);font-weight:700;font-size:.8rem}
.rk-con li::before{content:"–";position:absolute;left:2px;top:-1px;color:#c0492b;font-weight:700}
.rk-best{font-size:.82rem;color:var(--cream);line-height:1.45;margin-top:6px;padding-top:12px;border-top:1px solid var(--rule)}
.rk-best span{
  display:block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:4px;
}

/* ----- lifespan bars ----- */
.rk-bars{display:flex;flex-direction:column;gap:11px}
.rk-bar{display:grid;grid-template-columns:80px 1fr 96px;align-items:center;gap:14px}
.rk-bar-name{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ivory-2)}
.rk-bar-track{height:12px;background:var(--panel-3);border-radius:999px;overflow:hidden;border:1px solid var(--rule)}
.rk-bar-fill{
  display:block;height:100%;width:var(--w);
  background:linear-gradient(90deg,var(--gold),var(--copper));
  border-radius:999px;
  transform-origin:left;
  animation:rkBar 1.1s var(--ease-out) both;
}
@keyframes rkBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rk-bar-val{font-family:var(--mono);font-size:.74rem;color:var(--gold-deep);text-align:right}

/* ----- anatomy ----- */
.rk-anatomy{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:28px;align-items:start}
.rk-stack{display:flex;flex-direction:column;gap:5px;position:sticky;top:90px}
.rk-stack-layer{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;
  background:var(--panel-2);
  border:1px solid var(--hair);
  border-radius:10px;
  font-size:.86rem;color:var(--ivory-2);font-weight:500;
  cursor:default;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.rk-stack-layer span{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  background:rgba(184,137,58,.12);color:var(--gold-deep);border:1px solid var(--hair);
}
.rk-stack-layer.hot,.rk-stack-layer:hover{
  background:linear-gradient(135deg,rgba(184,137,58,.14),rgba(176,106,46,.08));
  border-color:var(--hair-strong);transform:translateX(4px);color:var(--ivory);
}
.rk-stack-layer.hot span{background:linear-gradient(135deg,var(--gold),var(--copper));color:#fff;border-color:transparent}
.rk-dict{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rk-dict-item{
  background:var(--panel-2);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:18px 20px;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rk-dict-item h5{font-family:var(--sans);font-weight:600;font-size:.98rem;color:var(--ivory);margin-bottom:6px}
.rk-dict-item p{font-size:.85rem;color:var(--cream);line-height:1.5}
.rk-dict-item.hot{
  background:linear-gradient(135deg,rgba(184,137,58,.12),var(--panel-2));
  border-color:var(--hair-strong);
  box-shadow:var(--shade-sm);
}

/* ----- slopes ----- */
.rk-slopes{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.rk-slopes-label{
  width:100%;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--gold-deep);margin-bottom:4px;
}
.rk-slopes-label em{font-style:normal;color:var(--muted)}
.rk-slope{
  flex:1;min-width:140px;
  background:var(--panel-2);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:16px 18px;
}
.rk-slope-pitch{
  display:inline-block;font-family:var(--mono);font-weight:600;font-size:.78rem;
  color:var(--gold-deep);background:rgba(184,137,58,.1);padding:3px 9px;border-radius:6px;margin-bottom:9px;
}
.rk-slope strong{display:block;font-size:.98rem;color:var(--ivory);margin-bottom:3px}
.rk-slope em{font-style:normal;font-size:.8rem;color:var(--cream);line-height:1.4}
.rk-protip{
  margin-top:28px;padding:18px 22px;
  background:linear-gradient(135deg,rgba(184,137,58,.1),rgba(176,106,46,.04));
  border:1px solid var(--hair-strong);border-radius:var(--r-md);
  font-size:.92rem;color:var(--ivory-2);line-height:1.55;
}
.rk-protip strong{color:var(--gold-deep)}

/* ----- install steps ----- */
.rk-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:rk;
}
.rk-steps li{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:20px 20px 22px;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.rk-steps li:hover{transform:translateY(-3px);border-color:var(--hair-strong);box-shadow:var(--shade-sm)}
.rk-step-n{
  font-family:var(--serif);font-weight:700;font-size:1.7rem;
  color:var(--gold);line-height:1;display:block;margin-bottom:10px;
  letter-spacing:-.01em;
}
.rk-steps strong{display:block;font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--ivory);margin-bottom:7px}
.rk-steps p{font-size:.85rem;color:var(--cream);line-height:1.5}

/* ----- hub cta ----- */
.rk-cta{
  margin-top:36px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px 32px;
  background:linear-gradient(135deg,var(--panel),var(--panel-2));
  border:1px solid var(--hair-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shade-sm);
}
.rk-cta p{font-family:var(--serif);font-weight:400;font-size:1.18rem;color:var(--ivory);letter-spacing:-.01em;max-width:46ch}

/* ----- responsive ----- */
@media (max-width:1080px){
  .rk-tabs{grid-template-columns:1fr 1fr}
  .rk-tab{border-bottom:1px solid var(--rule)}
  .rk-tab:nth-child(2){border-right:0}
  .rk-mat-grid{grid-template-columns:1fr 1fr}
  .rk-steps{grid-template-columns:1fr 1fr}
  .rk-grid-5,.rk-grid-4{grid-template-columns:repeat(2,1fr)}
  .rk-anatomy{grid-template-columns:1fr}
  .rk-stack{position:static;flex-direction:row;flex-wrap:wrap}
  .rk-stack-layer{flex:1;min-width:calc(50% - 5px)}
}
@media (max-width:720px){
  .rk-tabs{grid-template-columns:1fr}
  .rk-tab{border-right:0}
  .rk-tab-txt em{display:none}
  .rk-panel-lead{grid-template-columns:1fr}
  .rk-airflow{display:none}
  .rk-vs,.rk-split,.rk-grid-5,.rk-grid-4{grid-template-columns:1fr}
  .rk-mat-grid,.rk-steps{grid-template-columns:1fr}
  .rk-dict{grid-template-columns:1fr}
  .rk-bar{grid-template-columns:64px 1fr 84px;gap:10px}
  .rk-stack-layer{min-width:100%}
}

/* ── PHONE NUMBER IN NAV ────────────────────────────────────── */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #E8720C;
  border: 1.5px solid rgba(232,114,12,.35);
  border-radius: 999px;
  padding: 6px 14px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.nav-phone:hover {
  background: #E8720C;
  color: #fff;
  border-color: #E8720C;
}
.nav-phone svg { flex-shrink: 0; }

/* ── NAP FOOTER BLOCK ───────────────────────────────────────── */
/* Handled in main footer block above */

/* ── CITY LANDING PAGE STYLES ───────────────────────────────── */
.city-hero {
  background: linear-gradient(160deg, #111111 0%, #0A0A0A 60%, #141414 100%);
  padding: 100px 0 70px;
  position: relative;
  overflow: hidden;
}
.city-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(232,114,12,.08) 0%, transparent 65%);
}
.city-hero-inner { position: relative; z-index: 1; max-width: 860px; }
.city-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,200,200,.5);
  font-family: var(--mono);
  margin-bottom: 24px;
}
.city-breadcrumb a { color: #E8720C; }
.city-breadcrumb span { color: rgba(200,200,200,.3); }
.city-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; color: #fff; margin-bottom: 20px; line-height: 1.1; }
.city-hero h1 em { color: #E8720C; font-style: normal; }
.city-hero-sub { font-size: 1.1rem; color: rgba(200,200,200,.75); max-width: 600px; margin-bottom: 36px; line-height: 1.6; }
.city-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.city-trust-bar {
  display: flex;
  gap: 32px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(232,114,12,.15);
  flex-wrap: wrap;
}
.city-trust-item { display: flex; flex-direction: column; gap: 2px; }
.city-trust-item strong { font-size: 1.3rem; color: #E8720C; font-weight: 900; }
.city-trust-item span { font-size: .75rem; color: rgba(200,200,200,.55); text-transform: uppercase; letter-spacing: .1em; font-family: var(--mono); }

.city-why { padding: 72px 0; background: var(--bg); }
.city-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.city-why-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  border: 1px solid rgba(232,114,12,.12);
  border-top: 3px solid #E8720C;
}
.city-why-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; color: var(--ivory); }
.city-why-card p { font-size: .9rem; color: var(--muted); line-height: 1.6; }

.city-services { padding: 72px 0; background: var(--bg-deep); }
.city-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.city-service-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  border: 1px solid rgba(232,114,12,.1);
}
.city-service-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--ivory); margin-bottom: 12px; }
.city-service-card p { color: var(--muted); line-height: 1.65; margin-bottom: 20px; font-size: .95rem; }
.city-service-card ul { list-style: none; margin-bottom: 28px; }
.city-service-card ul li { padding: 6px 0; font-size: .9rem; color: var(--muted-2); border-bottom: 1px solid rgba(232,114,12,.08); }
.city-service-card ul li::before { content: '▸ '; color: #E8720C; font-size: .8rem; }

.city-cta-band {
  background: linear-gradient(135deg, #141414 0%, #1a1a1a 100%);
  padding: 72px 0;
  text-align: center;
  border-top: 3px solid #E8720C;
}
.city-cta-band h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 900; color: #fff; margin-bottom: 12px; }
.city-cta-band p { color: rgba(200,200,200,.65); margin-bottom: 36px; font-size: 1rem; }
.city-cta-band .cta-pair { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.city-faq { padding: 72px 0; background: var(--bg); }
.city-faq-list { max-width: 760px; margin: 48px auto 0; }

@media (max-width: 860px) {
  .city-why-grid { grid-template-columns: 1fr; }
  .city-services-grid { grid-template-columns: 1fr; }
  .city-trust-bar { gap: 20px; }
}


/* ============================================================
   MOBILE FOOTER — CLEAN STRUCTURED LAYOUT (≤900px)
   ============================================================ */
@media (max-width: 900px) {
  .footer { padding: 0; }

  /* Portrait 2×2 grid: brand spans top, 4 link groups in two columns / two rows */
  .footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    justify-items: center;
    text-align: center;
    gap: 0;
    padding: 8px 0 16px;
  }

  /* Logo row spans full width on top, centered */
  .footer .footer-brand {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0 16px;
    border-bottom: 1px solid rgba(232,114,12,.12);
    margin-bottom: 8px;
  }
  .footer .footer-logo img { height: 40px; max-width: 200px; }

  /* Each link group is one centered cell of the 2×2 grid */
  .footer > .container > .footer-grid > div:not(.footer-brand) {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 8px;
    border-bottom: 1px solid rgba(232,114,12,.08);
  }
  .footer h4 {
    display: block;
    border-right: none;
    border-bottom: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .2em;
    color: #E8720C;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
    text-align: center;
  }
  /* Links stack vertically, centered, within each cell */
  .footer a:not(.footer-logo) {
    display: block;
    text-align: center;
    font-size: .9rem;
    padding: 6px 0;
    margin-right: 0;
    color: rgba(210,210,210,.78);
    line-height: 1.4;
  }

  /* NAP block — centered */
  .footer .footer-nap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 16px 0;
  }
  .footer .footer-nap p {
    white-space: normal;
    font-size: .8rem;
    line-height: 1.4;
  }
  .footer .footer-nap p + p::before { content: none; margin: 0; }
  .footer .footer-nap strong { font-size: .82rem; }

  /* Copyright — give it breathing room above the sticky bar */
  .footer .copyright {
    text-align: center;
    font-size: .68rem;
    line-height: 1.5;
    padding: 16px 0 24px;
  }

  /* Hide the floating round CTA on mobile — sticky bar covers this action */
  .floating-cta { display: none !important; }

  /* Ensure sticky mobile bar never overlaps footer content */
  .footer { padding-bottom: 64px; }
}

@media (max-width: 560px) {
  .footer a:not(.footer-logo) { font-size: .88rem; margin-right: 18px; }
  .footer .footer-nap p { font-size: .78rem; }
}

/* Consultation hero headline — keep "clarity," together so the comma never strands */
.hero-next-title { text-wrap: balance; }
.hero-next-title em { white-space: nowrap; }

/* ---------- Accessibility: skip-to-content link ---------- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:10000;
  background:#0e0f11;
  color:#FF9A3C;
  padding:12px 20px;
  border:2px solid #FF9A3C;
  border-radius:0 0 8px 0;
  font-weight:700;
  text-decoration:none;
}
.skip-link:focus{
  left:0;
  outline:3px solid #FF9A3C;
  outline-offset:2px;
}
/* Visible keyboard focus for interactive elements (a11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid #FF9A3C;
  outline-offset:2px;
  border-radius:3px;
}

/* ═══ ALPINE LOGO CHIP ═══════════════════════════════════════════════════════
   The Alpine logo has a dark background baked in (silver chrome reads on dark).
   On the cream navbar we wrap it in a subtle dark rounded chip so it reads as an
   intentional brand mark rather than a pasted rectangle. */
.logo.logo-chip{
  display:inline-flex;
  align-items:center;
  background:#141414;
  padding:7px 16px;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.16), inset 0 0 0 1px rgba(232,114,12,.22);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.logo.logo-chip:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.22), inset 0 0 0 1px rgba(232,114,12,.4);
}
.logo.logo-chip .logo-img{
  height:46px;
  width:auto;
  max-width:none;
  object-fit:contain;
}
.navbar.scrolled .logo.logo-chip .logo-img{height:40px}
.navbar.scrolled .logo.logo-chip{padding:5px 13px}
@media (max-width:560px){
  .logo.logo-chip{padding:6px 12px}
  .logo.logo-chip .logo-img{height:38px}
}
/* Footer logo (already on dark bg) — no chip needed, sits clean */
.footer-logo img{max-height:60px;width:auto}

/* ═══ MOBILE MENU LOGO ═══════════════════════════════════════════════════════
   Alpine logo shown at the top of the open mobile dropdown menu (dark panel),
   filling the blank space above the nav links. Hidden on desktop. */
.menu-logo{display:none;}
@media (max-width:900px){
  .menu-logo{
    display:flex !important;
    justify-content:center;
    align-items:center;
    border:0 !important;
    padding:4px 0 22px !important;
    margin-bottom:8px;
  }
  .menu-logo img{
    height:62px;
    width:auto;
    max-width:78%;
    object-fit:contain;
  }
  /* tighten the menu top padding since the logo now occupies that space */
  .nav-links{padding-top:72px;}
}