/* ============================================================
   SKIN E - "builder-sitework"
   Display : Saira Condensed        Body : IBM Plex Sans
   Geometry: ZERO radius everywhere, chamfered primary CTA
   Motif   : suspension-cable rule, from the bridge in the logo
   Palette : client's own indigo #2f348b + red #ed1c24
   Light-dominant page, near-black chrome. No dark-mode block
   (Kinplex client trade sites ship light-only).
   ============================================================ */
:root{
  --ink:#101114;
  --ink-2:#1c1f24;
  --indigo:#2f348b;
  --indigo-deep:#272361;
  --red:#ed1c24;
  --bone:#f5f6f8;
  --line:#d9dce2;
  --body:#4d525b;
  --white:#fff;
  --wrap:1240px;
  --rail:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  padding-bottom:var(--rail);
}
h1,h2,h3,h4,.disp{
  font-family:"Saira Condensed","IBM Plex Sans",sans-serif;
  font-weight:800;letter-spacing:.005em;line-height:1.04;
  text-transform:uppercase;margin:0;
}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- zero-radius button system, chamfer on primary ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Saira Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.06rem;line-height:1;
  padding:1.05rem 1.9rem;border:2px solid transparent;border-radius:0;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .14s cubic-bezier(.16,1,.3,1),background .18s,color .18s;
}
.btn-primary{
  background:var(--red);color:var(--white);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.btn-primary:hover{background:#c9151c}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:var(--white);color:var(--ink)}
.btn-dark{background:var(--indigo);color:var(--white)}
.btn-dark:hover{background:var(--indigo-deep)}
.btn:active{transform:translateY(1px)}

/* ---------- two-tier nav ---------- */
.util{background:var(--indigo-deep);color:#cdd0e8;font-size:.82rem}
.util .wrap{display:flex;gap:1.4rem;align-items:center;justify-content:flex-end;
  min-height:38px;flex-wrap:wrap}
.util b{color:#fff;font-weight:600}
.util .sep{opacity:.35}
.nav{background:var(--ink);position:sticky;top:0;z-index:50;border-bottom:3px solid var(--indigo)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:72px;gap:1.5rem}
.nav img{height:44px;width:auto}
.nav ul{display:flex;gap:1.55rem;list-style:none;margin:0;padding:0;align-items:center}
.nav a{
  color:#e9eaee;text-decoration:none;font-family:"Saira Condensed",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.02rem;
  padding:.35rem 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover{color:#fff;border-bottom-color:var(--red)}
.navtoggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;padding:.2rem .4rem}

/* ---------- hero: asymmetric split, estimate form ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url("/assets/img/hero-home.jpg") center 58%/cover no-repeat;
  opacity:.62;
  /* slow push-in on the plate. Origin matches the background focal point so the
     house stays put while the frame tightens. .hero is overflow:hidden, so the
     scaled edge never spills. The reduced-motion block below kills it. */
  transform-origin:center 58%;
  animation:hero-zoom 24s cubic-bezier(.22,.61,.36,1) forwards;
  will-change:transform;
}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,17,20,.94) 0%,rgba(16,17,20,.72) 46%,rgba(39,35,97,.42) 100%);
}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;
  gap:3rem;align-items:center;padding-top:54px;padding-bottom:54px}
.hero h1{font-size:clamp(2.15rem,3.5vw,3.2rem);max-width:26ch}
.hero h1 em{font-style:normal;color:#9aa0e8}
.hero .sub{font-size:1.08rem;color:#ced1d9;max-width:44ch;margin-top:1rem}
.hero .acts{display:flex;gap:.9rem;margin-top:1.5rem;flex-wrap:wrap}

.quote{background:var(--white);color:var(--ink);border-top:5px solid var(--red);padding:1.5rem 1.6rem}
.quote h2{font-size:1.38rem}
.quote .lede{font-size:.9rem;color:var(--body);margin:.4rem 0 .95rem;text-transform:none;
  font-family:"IBM Plex Sans",sans-serif;font-weight:400;line-height:1.45}
.f{margin-bottom:.65rem;display:flex;flex-direction:column;gap:.3rem}
.f label{font-size:.79rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#33373e}
.f input,.f select,.f textarea{
  font:inherit;font-size:.95rem;padding:.58rem .75rem;border:1.5px solid #b9bec7;border-radius:0;
  background:#fff;color:var(--ink);width:100%;
}
.f input:focus,.f select:focus,.f textarea:focus{outline:3px solid rgba(47,52,139,.35);border-color:var(--indigo)}
.f .hint{font-size:.76rem;color:#6a6f78}
.quote .btn{width:100%}
.consent{font-size:.71rem;color:#6a6f78;line-height:1.4;margin:.65rem 0 0}

/* ---------- suspension-cable divider (the section motif) ---------- */
.cable{display:block;width:100%;height:26px;color:var(--indigo)}
.cable svg{display:block;width:100%;height:26px}

/* ---------- trust strip ---------- */
.trust{background:var(--bone);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:1.9rem 24px}
.trust .n{font-family:"Saira Condensed",sans-serif;font-weight:800;font-size:2.1rem;
  line-height:1;color:var(--indigo)}
.trust .l{font-size:.85rem;color:var(--body);margin-top:.25rem}

/* ---------- generic section ---------- */
.sec{padding:84px 0}
.sec.alt{background:var(--bone)}
.head{max-width:62ch;margin-bottom:2.4rem}
.head h2{font-size:clamp(1.95rem,3.5vw,2.9rem)}
.head p{color:var(--body);margin-top:.85rem}
.kicker{font-family:"Saira Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.86rem;color:var(--red);margin-bottom:.55rem}

/* ---------- services: photo cards under a dark lens ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.svc{position:relative;min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.6rem;color:#fff;overflow:hidden;text-decoration:none;background:var(--ink)}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.svc::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(16,17,20,.10) 0%,rgba(16,17,20,.55) 38%,rgba(16,17,20,.93) 100%),
    rgba(16,17,20,.34)}
.svc:hover img{transform:scale(1.05)}
.svc > *{position:relative;z-index:2}
.svc h3{font-size:1.55rem;text-shadow:0 1px 14px rgba(0,0,0,.75)}
.svc p{font-size:.93rem;color:#e2e4e9;margin:.5rem 0 0;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.svc .go{font-family:"Saira Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.9rem;color:#fff;margin-top:.9rem;border-top:2px solid var(--red);
  padding-top:.6rem;display:inline-block}
.svc.wide{grid-column:span 2}

/* ---------- capability row (generators + roofing, no photo claims) ---------- */
.cap{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.capcard{border:1.5px solid var(--line);border-left:5px solid var(--indigo);padding:1.6rem 1.7rem;background:#fff}
.capcard h3{font-size:1.35rem}
.capcard p{font-size:.95rem;color:var(--body);margin:.55rem 0 0}

/* ---------- work: asymmetric gallery ---------- */
.work{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:200px;gap:14px}
.work figure{margin:0;overflow:hidden;position:relative;background:var(--ink)}
.work img{width:100%;height:100%;object-fit:cover}
.work .tall{grid-row:span 2}
.work .big{grid-column:span 2;grid-row:span 2}

/* ---------- process: photo + vertical timeline ---------- */
.proc{display:grid;grid-template-columns:.95fr 1.05fr;gap:3.2rem;align-items:start}
.proc .shot{position:relative;min-height:440px}
.proc .shot img{width:100%;height:100%;min-height:440px;object-fit:cover;object-position:top center}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:15px;top:10px;bottom:10px;width:2px;background:var(--line)}
.tl li{position:relative;padding:0 0 2rem 3.4rem}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:8px;top:5px;width:16px;height:16px;
  background:var(--indigo);border:3px solid #fff;box-shadow:0 0 0 2px var(--indigo)}
.tl h3{font-size:1.28rem}
.tl p{color:var(--body);font-size:.96rem;margin:.4rem 0 0}

/* ---------- reviews ---------- */
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.rev{background:#fff;border-top:4px solid var(--indigo);padding:1.6rem;border-bottom:1px solid var(--line)}
.rev p{font-size:.98rem;color:#31353c;font-style:italic}
.rev .who{font-family:"Saira Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:.95rem;color:var(--indigo);margin-top:.9rem;font-style:normal}
.widget{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.8rem}
.widget-h{font-size:1.2rem;margin-bottom:1rem;color:var(--indigo)}
/* The LeadConnector loader does NOT set a height on this iframe (verified live
   2026-08-28: no inline height, transferSize 0). So the CSS height is the only
   thing sizing it, and the old height:0 / max-height:560px both collapsed and
   clipped his reviews. Size it here and do not rely on the third-party script. */
.widget .lc_reviews_widget{width:100%;min-width:100%;border:0;display:block;
  height:820px;min-height:820px;transition:height .2s}
@media(max-width:980px){.widget .lc_reviews_widget{height:900px;min-height:900px}}
.widget-fall{margin:1rem 0 0;font-size:.94rem}
.widget-fall a{color:var(--indigo);font-weight:600}

/* ---------- area ---------- */
.area{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.chip{border:1.5px solid var(--line);background:#fff;padding:.55rem 1rem;font-weight:600;font-size:.92rem}

/* ---------- final CTA ---------- */
.final{background:var(--indigo-deep);color:#fff;padding:78px 0}
.final .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.final h2{font-size:clamp(2rem,3.6vw,2.9rem)}
.final p{color:#c3c6de;margin-top:.9rem}
.final .acts{display:flex;gap:.9rem;margin-top:1.7rem;flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#9ea3ad;padding:56px 0 96px;font-size:.93rem}
.foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem}
.foot img{height:52px;width:auto;margin-bottom:1rem}
.foot h4{color:#fff;font-size:1.05rem;margin-bottom:.8rem;letter-spacing:.06em}
.foot a{color:#9ea3ad;text-decoration:none}
.foot a:hover{color:#fff}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.45rem}
.lic{margin-top:1.2rem;font-size:.82rem;color:#7c828c;line-height:1.7}
.legal{border-top:1px solid #262a31;margin-top:2.4rem;padding-top:1.4rem;font-size:.82rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- sticky conversion rail ---------- */
.railbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);
  border-top:3px solid var(--red);display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:1rem;padding:.62rem 20px;
}
.railbar .txt{color:#fff;font-family:"Saira Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem;line-height:1.15}
.railbar .txt span{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:.8rem;color:#a7acb5}
.railbar .btn{padding:.8rem 1.4rem;font-size:.98rem}

.head.tight{margin-bottom:1.7rem}
.area h2{font-size:clamp(1.95rem,3.5vw,2.9rem)}
.area .lede{color:var(--body);margin-top:.9rem}
.creed{color:#fff;font-family:"Saira Condensed",sans-serif;font-weight:800;
  text-transform:uppercase;font-size:1.35rem;line-height:1.2}
.creed-sub{color:#c3c6de}
.legal{grid-column:1/-1;padding:1.4rem 0 0}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero .wrap,.proc,.area,.final .wrap{grid-template-columns:1fr}
  .hero .wrap{padding-top:56px;padding-bottom:56px;gap:2.2rem}
  .svcs,.revgrid{grid-template-columns:1fr 1fr}
  .svc.wide{grid-column:span 2}
  .work{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .trust .wrap{grid-template-columns:1fr 1fr;gap:1.3rem}
  .proc .shot,.proc .shot img{min-height:320px}
}
@media (max-width:700px){
  body{font-size:16px}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 24px 1.2rem;
    border-bottom:3px solid var(--indigo)}
  .nav ul.open{display:flex}
  .nav li{width:100%}
  .nav a{display:block;width:100%;padding:.72rem 0;border-bottom:1px solid #23262c}
  .navtoggle{display:block}
  .util .wrap{justify-content:center;gap:.85rem;font-size:.78rem}
  .sec{padding:58px 0}
  .svcs,.revgrid,.cap{grid-template-columns:1fr}
  .svc.wide{grid-column:span 1}
  .work{grid-template-columns:1fr 1fr;grid-auto-rows:140px}
  .work .big{grid-column:span 2;grid-row:span 1}
  .foot .wrap{grid-template-columns:1fr}
  /* one CTA in the rail on mobile, never a stack of three */
  .railbar{grid-template-columns:1fr auto;padding:.55rem 16px}
  .railbar .txt{font-size:.9rem}
  .railbar .txt span{display:none}
  .hero .acts .btn,.final .acts .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .svc:hover img{transform:none}
}

/* ============================================================
   INTERIOR PAGES - added 2026-08-28
   Same Skin E vocabulary: zero radius, Saira Condensed display,
   suspension-cable rule, indigo + red. No new colours introduced.
   ============================================================ */

/* ---------- nav dropdown (7 services will not fit inline) ---------- */
.nav .has-sub{position:relative}
.nav .has-sub > a::after{content:"";display:inline-block;margin-left:.4rem;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.nav .sub{
  position:absolute;top:100%;left:0;min-width:264px;background:var(--ink);
  border-top:3px solid var(--red);padding:.35rem 0;margin:0;list-style:none;
  display:none;z-index:60;box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:block}
.nav .sub li{display:block}
.nav .sub a{display:block;padding:.6rem 1.1rem;font-size:.95rem;white-space:nowrap}
.nav .sub a:hover{background:var(--indigo);color:#fff}

/* ---------- breadcrumb ---------- */
.crumb{background:var(--bone);border-bottom:1px solid var(--line);
  font-size:.85rem;color:var(--body)}
.crumb .wrap{padding-top:.7rem;padding-bottom:.7rem}
.crumb a{color:var(--indigo);text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-current]{color:var(--ink);font-weight:600}

/* ---------- interior hero ---------- */
.phero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:var(--bg-img) center/cover no-repeat;opacity:.30}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,17,20,.94) 0%,rgba(16,17,20,.72) 55%,rgba(16,17,20,.45) 100%)}
.phero .wrap{position:relative;z-index:2;padding-top:76px;padding-bottom:76px;max-width:1240px}
.phero .kicker{color:var(--red);font-family:"Saira Condensed",sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;font-size:.9rem;margin-bottom:.6rem}
.phero h1{font-size:clamp(2.3rem,5.1vw,4rem);max-width:19ch}
.phero p{margin-top:1rem;max-width:62ch;color:#d5d8de;font-size:1.1rem}
.phero .acts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}

/* ---------- article + rail layout ---------- */
.page{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:56px;
  max-width:var(--wrap);margin:0 auto;padding:64px 24px 72px}
.page .body > h2{font-size:clamp(1.65rem,2.9vw,2.3rem);margin:2.4rem 0 .9rem}
.page .body > h2:first-child{margin-top:0}
.page .body > h3{font-size:1.22rem;margin:1.7rem 0 .5rem}
.page .body p{color:var(--body);font-size:1.03rem}
.page .body ul{color:var(--body);padding-left:1.1rem;margin:0 0 1.2rem}
.page .body li{margin-bottom:.5rem}
.page .body li strong{color:var(--ink)}
.page .body img{margin:1.6rem 0;border:1px solid var(--line)}

/* the sticky conversion rail is a MECHANIC, not a skin choice - it stays */
.railcol{position:sticky;top:22px;align-self:start}
.railbox{border:1px solid var(--line);background:var(--bone)}
.railbox .hd{background:var(--ink);color:#fff;padding:1rem 1.2rem}
.railbox .hd h2{font-size:1.3rem}
.railbox .hd p{margin:.3rem 0 0;font-size:.86rem;color:#b9bdc6}
.railbox .in{padding:1.2rem}
.railbox .f{margin-bottom:.8rem}
.railbox label{display:block;font-size:.76rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink);margin-bottom:.3rem}
.railbox input,.railbox select,.railbox textarea{
  width:100%;padding:.68rem .7rem;border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:.97rem;border-radius:0}
.railbox input:focus,.railbox select:focus,.railbox textarea:focus{
  outline:2px solid var(--indigo);outline-offset:0;border-color:var(--indigo)}
.railbox .btn{width:100%;margin-top:.2rem}
.railbox .consent{font-size:.72rem;color:#6b7079;margin:.7rem 0 0;line-height:1.45}
.railbox .or{display:flex;align-items:center;gap:.6rem;margin:1rem 0 .3rem;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:#8a8f98}
.railbox .or::before,.railbox .or::after{content:"";flex:1;height:1px;background:var(--line)}
.railfacts{border:1px solid var(--line);border-top:0;padding:1.1rem 1.2rem;background:#fff}
.railfacts h3{font-size:1rem;margin-bottom:.5rem}
.railfacts ul{list-style:none;padding:0;margin:0;font-size:.9rem;color:var(--body)}
.railfacts li{padding:.34rem 0;border-bottom:1px solid var(--line)}
.railfacts li:last-child{border-bottom:0}
.railfacts li b{color:var(--ink)}

/* ---------- reusable blocks ---------- */
.checks{list-style:none;padding:0;margin:0 0 1.4rem}
.checks li{position:relative;padding-left:1.7rem;margin-bottom:.55rem;color:var(--body)}
.checks li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;
  background:var(--red)}
.callout{border-left:5px solid var(--indigo);background:var(--bone);padding:1.1rem 1.3rem;margin:1.6rem 0}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}
.faq{margin-top:1.4rem}
.faq details{border:1px solid var(--line);margin-bottom:.6rem;background:#fff}
.faq summary{cursor:pointer;padding:.95rem 1.1rem;font-family:"Saira Condensed",sans-serif;
  font-weight:700;text-transform:uppercase;font-size:1.06rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--red);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 1.1rem 1.1rem;color:var(--body)}
.faq .a p:last-child{margin-bottom:0}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px;margin:1.4rem 0}
.linkgrid a{display:block;border:1px solid var(--line);padding:1rem 1.1rem;text-decoration:none;
  background:#fff;transition:border-color .15s,transform .15s}
.linkgrid a:hover{border-color:var(--indigo);transform:translateY(-2px)}
.linkgrid b{display:block;font-family:"Saira Condensed",sans-serif;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.01em}
.linkgrid span{font-size:.88rem;color:var(--body)}

@media(max-width:980px){
  .page{grid-template-columns:1fr;gap:38px;padding:44px 24px 56px}
  .railcol{position:static}
  .nav .sub{position:static;display:block;box-shadow:none;background:transparent;
    border-top:0;padding:0 0 0 .8rem}
  .nav .sub a{padding:.45rem 0}
  .nav .has-sub > a::after{display:none}
}

/* --- interior fixes found on review 2026-08-28 --------------------------------
   1. .btn-ghost is built for dark backgrounds (white text, translucent white
      border). Inside the light rail it rendered as an invisible CTA. Give it the
      ink treatment there instead of inventing a new colour.
   2. The nav is sticky at 72px tall, so a rail sticking to top:22px slid under
      it and cut off its own heading. Clear the nav.                             */
.railbox .btn-ghost{color:var(--ink);border-color:var(--ink)}
.railbox .btn-ghost:hover{background:var(--ink);color:#fff}
.railcol{top:96px}
@media(max-width:980px){.railcol{top:auto}}

/* --- chat widget fallout, found on review 2026-08-28 -------------------------
   1. .btn-ghost is white-on-transparent, built for the dark hero. The hero quote
      panel is WHITE, so the new "Text us" button rendered invisible under the
      "or" divider. Same defect the rail had; same fix, scoped to the panel.
   2. The LeadConnector chat bubble is fixed bottom-right and sat on top of the
      sticky CALL NOW button, half hiding the primary phone CTA. Give the sticky
      bar room to the right so the two never overlap, and lift the bubble above
      the bar's own height so it does not cover the strip either.              */
.quote .btn-ghost{color:var(--ink);border-color:var(--ink)}
.quote .btn-ghost:hover{background:var(--ink);color:#fff}
.quote .or{display:flex;align-items:center;gap:.6rem;margin:.85rem 0 .55rem;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:#8a8f98}
.quote .or::before,.quote .or::after{content:"";flex:1;height:1px;background:var(--line)}
.quote .consent{font-size:.72rem;color:#6b7079;margin:.85rem 0 0;line-height:1.45}

/* --- GHL estimate form, on every page. Replaced the chat widget 2026-08-31. ---
   Curran: "all over chad's site with nothing else." The embed repeats 2-3 times
   per page; repeating a proven conversion block is a MECHANIC per design_rules,
   and every iframe is loading="lazy", so someone who converts in the first one
   never fetches the rest. Zero radius to match Skin E - GHL's pasted embed ships
   a 4px radius that would be the only rounded corner on the site.             */
.formwrap{margin:2.6rem 0;border:1px solid var(--line);background:var(--white);
  padding:1.5rem 1.5rem 1rem}
.formwrap-h{font-family:"Saira Condensed",Oswald,Impact,sans-serif;font-weight:700;
  font-size:1.6rem;line-height:1.1;color:var(--indigo);text-transform:uppercase;
  letter-spacing:.01em}
.formwrap-p{margin:.45rem 0 1.1rem;font-size:.95rem;color:var(--body)}
.formwrap iframe{display:block;width:100%;min-width:100%;border:0;background:var(--white)}
/* The closing block is dark indigo; the form panel inside it stays a light card so
   the fields never sit on a near-black ground. */
.final-form .formwrap{margin:0;border-color:transparent}
.final-form .formwrap-h{color:var(--indigo)}
@media(max-width:980px){.formwrap{padding:1.1rem 1.1rem .8rem}}

/* The hero panel is already a white card, so the form inside it goes flush -
   otherwise it reads as a box in a box. */
.quote .formwrap{margin:0;border:0;padding:0;background:transparent}
.quote .formwrap-h{font-size:1.38rem}
.quote .formwrap-p{margin:.4rem 0 .9rem;font-size:.9rem}
.quote-alt{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.6rem}
.quote-alt .or{margin:0 0 .2rem;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.1em;color:#8a8f98}

/* The chat bubble used to sit on top of the sticky CALL NOW button, so the rail bar
   reserved 96px of clearance for it. The bubble is gone; so is the clearance. */