/* Fortress Roofing & Remodeling — UI/UX polish layer
   Intentionally additive: preserves the verified source payload and brand system. */

:root{
  --r:8px;
  --shell:1220px;
  --shadow-card:0 28px 70px -46px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.025) inset;
  --shadow-float:0 24px 60px -34px rgba(0,0,0,.95),0 0 0 1px rgba(245,197,66,.045) inset;
}

html{scroll-padding-top:108px}
section[id]{scroll-margin-top:108px}

body{
  background:
    radial-gradient(circle at 12% 10%,rgba(245,197,66,.035),transparent 28rem),
    var(--ink);
}
body::before{opacity:.032}

.display,.head h2,.final h2{text-wrap:balance}
.hero__lede,.head p,.lede,.final p,.foot p{text-wrap:pretty}

/* Navigation: crisper separation once the page is moving. */
header.nav{
  border-bottom-color:rgba(255,255,255,.075);
  box-shadow:0 1px 0 rgba(255,255,255,.015);
}
header.nav.is-scrolled{
  background:rgba(10,10,12,.955);
  border-bottom-color:rgba(245,197,66,.16);
  box-shadow:0 18px 48px -36px rgba(0,0,0,.95);
}
.nav__in{transition:height .25s ease}
header.nav.is-scrolled .nav__in{height:68px}
.nav__links{gap:26px}
.nav__links a{font-size:12.5px}
.lockup__mark{filter:drop-shadow(0 8px 14px rgba(245,197,66,.08))}

/* Buttons: preserve the industrial geometry but improve depth and touch feel. */
.btn{
  min-height:50px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease,background .22s ease;
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.16) 48%,transparent 76%);
  transform:translateX(-135%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.btn--gold{box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 15px 34px -18px rgba(245,197,66,.72)}
.btn--ghost{background:rgba(255,255,255,.025)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover::after{transform:translateX(135%)}
  .btn--gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 20px 44px -18px rgba(245,197,66,.92)}
}

/* Hero: stronger focal hierarchy without changing the copy or shield concept. */
.hero{padding-top:clamp(62px,8vw,108px)}
.hero__glow{opacity:.88}
.hero h1{max-width:9.4ch;text-shadow:0 18px 54px rgba(0,0,0,.3)}
.hero__lede{max-width:56ch}
.hero__trust{row-gap:12px}
.hero__trust span{min-height:26px}
.plate{
  border-radius:12px;
  border-color:rgba(255,255,255,.105);
  box-shadow:0 46px 100px -52px #000,0 0 0 1px rgba(245,197,66,.085) inset,var(--shadow-card);
}
.plate::before{border-radius:7px}
.plate__mark{filter:drop-shadow(0 18px 30px rgba(245,197,66,.09))}

/* Trust strip: make the numbers read as proof points rather than table cells. */
.strip__cell{padding:28px 20px;min-height:104px;display:grid;align-content:center}
.strip__n{letter-spacing:.01em}
.strip__l{line-height:1.35}

/* Section rhythm and reusable surfaces. */
.band{padding-block:clamp(70px,8.5vw,112px)}
.head{max-width:67ch}
.head p{line-height:1.72}
.callout,.calc,.formcard{
  border-radius:10px;
  border-color:rgba(255,255,255,.095);
  box-shadow:var(--shadow-card);
}
.callout::after,.formcard::before{box-shadow:0 8px 24px rgba(245,197,66,.08)}
.steps li{transition:background .22s ease,padding-left .22s ease}
@media (hover:hover) and (pointer:fine){
  .steps li:hover{background:linear-gradient(90deg,rgba(245,197,66,.035),transparent 78%);padding-left:66px}
}

/* Service cards: give each service a cleaner independent hit area. */
.svc{
  border-radius:10px;
  box-shadow:var(--shadow-float);
}
.svc__c{
  min-height:100%;
  overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),background .24s ease,box-shadow .24s ease;
}
.svc__c::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:2px;
  background:var(--foil);
  opacity:0;
  transform:scaleX(.35);
  transform-origin:left;
  transition:opacity .24s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover) and (pointer:fine){
  .svc__c:hover{
    background:linear-gradient(165deg,var(--panel),var(--ink) 78%);
    transform:translateY(-3px);
    box-shadow:0 24px 55px -38px rgba(0,0,0,.95);
    z-index:1;
  }
  .svc__c:hover::after{opacity:1;transform:scaleX(1)}
}

/* Calculator and process: larger interaction targets, cleaner numeric scan. */
input[type=range]{height:4px}
input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
.seg button{min-height:46px}
.rail{border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-float)}
.rail__c{min-height:220px}
.rail__n{opacity:.9}
.area__grid{border-radius:10px;box-shadow:var(--shadow-float)}
.area__grid span{min-height:54px}

/* Lead form: clearer field hierarchy and thumb-friendly controls. */
.f input,.f select,.f textarea{
  min-height:50px;
  border-radius:6px;
  background:rgba(8,8,10,.86);
}
.f textarea{min-height:112px}
.f input:hover,.f select:hover,.f textarea:hover{border-color:#484854}
.chips button{min-height:44px;border-radius:6px}
.fnav .btn{min-width:128px}
.prog i{height:5px;border-radius:999px}
.err.on{padding:10px 12px;background:rgba(255,142,122,.06);border-left:2px solid #FF8E7A;border-radius:0 5px 5px 0}

/* FAQ: improve question affordance and reading width. */
.faq summary{min-height:70px;display:flex;align-items:center;line-height:1.4}
.faq .a{line-height:1.75}

/* Final conversion band gets a little more visual separation. */
.final{border-top:1px solid rgba(245,197,66,.08);border-bottom:1px solid rgba(245,197,66,.08)}
.final .shell{padding-block:4px}

/* The setup panel is a developer aid and should never compete with customer CTAs. */
.setup{display:none!important}

/* Do not present dead contact actions while tenant values are still placeholders. */
html.phone-unconfigured [data-biz="tel"]{display:none!important}
html.phone-unconfigured .mbar{grid-template-columns:1fr}
html.email-unconfigured [data-biz="mailto"]{display:none!important}

/* Responsive pass. */
@media(max-width:979px){
  header.nav.is-scrolled .nav__in{height:70px}
  .hero__in{gap:42px}
  .plate{max-width:650px;width:100%;margin-inline:auto}
  .mbar{box-shadow:0 -16px 38px -28px #000}
  .mbar a{min-height:58px}
}

@media(max-width:639px){
  :root{--pad:clamp(18px,5.5vw,24px)}
  html{scroll-padding-top:88px}
  section[id]{scroll-margin-top:88px}
  .topbar__in{height:auto;min-height:38px;padding-block:8px;line-height:1.4}
  .nav__in{height:68px}
  header.nav.is-scrolled .nav__in{height:64px}
  .lockup{gap:10px}
  .lockup__mark{width:36px;height:45px}
  .lockup__type{padding-left:10px}
  .lockup__type .l1{font-size:18px}
  .lockup__type .l2{font-size:11px}
  .lockup__type .l3{font-size:7.5px;letter-spacing:.16em}
  .burger{width:44px;height:42px}

  .hero{padding-top:48px}
  .hero h1{font-size:clamp(46px,15vw,66px);max-width:9.1ch;margin-top:16px}
  .hero h1 .r3{font-size:.5em;line-height:1.02;margin-top:.24em}
  .hero__lede{margin-top:20px}
  .hero__cta{display:grid;grid-template-columns:1fr;width:100%}
  .hero__cta .btn{width:100%}
  .hero__trust{display:grid;grid-template-columns:1fr;gap:9px;padding-top:20px;margin-top:24px}
  .plate{padding:24px 18px;border-radius:10px}
  .plate__mark{width:min(178px,48vw)}

  .strip__in{grid-template-columns:1fr 1fr}
  .strip__cell{min-height:96px;padding:22px 12px}
  .band{padding-block:62px}
  .head h2{font-size:clamp(38px,11.5vw,54px)}

  .steps li{padding-left:56px}
  .steps li::before{width:36px;height:36px;font-size:18px}
  .callout,.calc,.formcard{padding:22px 18px}
  .svc__c{padding:26px 22px}
  .rail__c{min-height:0}
  .area__grid{grid-template-columns:1fr 1fr}

  .grid2{grid-template-columns:1fr}
  .fnav{flex-wrap:wrap}
  .fnav .btn{width:100%;flex:1 0 100%!important}
  .chips button{flex:1 1 calc(50% - 9px);padding-inline:10px}
  .faq summary{padding-right:38px}
}

@media(max-width:390px){
  .chips button{flex-basis:100%}
  .strip__n{font-size:28px}
  .strip__l{font-size:9.5px;letter-spacing:.14em}
}

@media(prefers-reduced-motion:reduce){
  .btn,.nav__in,.svc__c,.svc__c::after,.steps li{transition:none!important}
  .btn::after{display:none}
}

@media(forced-colors:active){
  .foil,.steel{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
  .btn--gold{background:ButtonFace;color:ButtonText;border-color:ButtonText}
}

/* 2026-09-10: official badge replaces the reconstructed SVG shield */
.lockup__mark{width:auto;height:46px}
.plate__mark{width:min(300px,64vw);height:auto}

/* Typography polish — client complaint about word spacing */
body,p{letter-spacing:0;word-spacing:normal;-webkit-hyphens:manual;hyphens:manual}
h1,h2,h3,.display{letter-spacing:.01em}
.display,.head h2,.final h2{text-wrap:balance}
/* Preserve wide tracking on labels ≤12px */
.eyebrow,.kicker,.idx,.strip__l,.lab{letter-spacing:inherit}
/* Labels 13–16px: cap at .08em */
.nav__links a{letter-spacing:.06em}
button{letter-spacing:.13em}
/* No justified text */
body{text-align:left}

/* 2026-09-11: guard against horizontal overflow on narrow phones */
html,body{overflow-x:hidden}
.hero__lede,.lede{max-width:min(52ch,100%)}
img,svg,video{max-width:100%}