/* ==========================================================================
   LONE STAR ROOFING & CONSTRUCTION — Design Tokens & Shared Styles
   ========================================================================== */

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

:root{
  /* Color — exact brand colors sampled from the logo: black + red. No navy, no gold. */
  --ink-black:    #121212;   /* primary dark backgrounds: nav, hero, footer, dark sections */
  --panel:        #1C1C1C;   /* raised panel on black */
  --panel-2:      #262626;   /* lighter panel step, hover states */
  --steel:        #5B5B5B;   /* body copy on white */
  --steel-light:  #B7B7B7;   /* body copy on black */
  --red:          #EC1E24;   /* exact brand red, sampled from logo */
  --red-dark:     #C4181D;   /* hover / pressed */
  --red-light:    #F1494E;
  --cloud:        #F5F5F1;
  --cloud-dim:    #E9E7DF;
  --ink:          #121212;
  --white:        #FFFFFF;

  /* Legacy variable names kept as aliases so every existing rule below
     repaints automatically — single source of truth is the block above. */
  --storm-navy:   var(--ink-black);
  --navy-panel:   var(--panel);
  --navy-panel-2: var(--panel-2);
  --clay:         var(--red);
  --clay-light:   var(--red-light);
  --amber:        var(--red);
  --amber-dark:   var(--red-dark);
  --radar-green:  var(--red);

  /* Type */
  --font-display: 'Poppins', 'Arial', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'Inter', -apple-system, sans-serif;

  /* Scale */
  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.40);
  --shadow-sm: 0 4px 14px -4px rgba(0,0,0,0.16);
  --container: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:300;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  letter-spacing:-0.01em;
  line-height:1.12;
  margin:0;
  font-weight:700;
}
.eyebrow{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:600;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--red);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------- Buttons ---------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  padding:15px 30px;
  border-radius:var(--radius-pill);
  border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--red); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(236,30,36,0.45); }
.btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.35); }
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,0.08); }
.btn-clay{ background:var(--red); color:var(--white); }
.btn-clay:hover{ background:var(--red-dark); transform:translateY(-2px); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:12px 22px; font-size:13.5px; }

/* ---------------------------------- Top utility bar ----------------------------------
   A single-line emergency-availability strip, shown above the header on tablet/desktop
   only (mobile already has the fixed bottom call bar, so this stays out of its way there). */
.utility-bar{ display:none; }
@media (min-width: 901px){
  .utility-bar{
    display:block;
    background:var(--ink-black);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .utility-bar .wrap{ padding:9px 24px; text-align:center; }
  .utility-bar .badge-dot{ color:var(--red); margin-right:7px; }
  .utility-bar span{
    font-family:var(--font-body); font-weight:600; font-size:12px;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--steel-light);
  }
}

/* ---------------------------------- Header / nav ---------------------------------- */
.site-header{
  background:var(--ink-black);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:24px; }
.logo{ display:flex; align-items:center; gap:11px; color:var(--white); }
.logo-chip{ background:var(--white); border-radius:8px; display:inline-flex; align-items:center; line-height:0; }
.logo-chip img{ display:block; }
.logo-chip-header{ padding:7px 12px; }
.logo-chip-header img{ height:26px; width:auto; }
.logo-chip-footer{ padding:12px 18px; }
.logo-chip-footer img{ height:42px; width:auto; }
.logo-mark{
  width:38px; height:38px; border-radius:10px;
  background:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--white); font-size:18px;
  flex:none;
}
.logo-text{ font-family:var(--font-display); line-height:1.05; }
.logo-text b{ font-size:16.5px; font-weight:700; letter-spacing:-0.01em; display:block; }
.logo-text span{ font-size:11px; color:var(--steel-light); letter-spacing:0.08em; font-weight:400; text-transform:uppercase; font-family:var(--font-body); }

/* Minimal Clean-Cut-style header: nav lives behind the menu button at every
   width — logo, phone/CTA, and the toggle are the only things always visible. */
.site-header{ position:sticky; }
.site-header .wrap{ position:relative; flex-wrap:wrap; }

.main-nav{ display:none; }
.main-nav.mobile-open{
  display:block; position:absolute; top:100%; left:0; right:0;
  background:var(--ink-black); border-top:1px solid rgba(255,255,255,0.08);
  max-height:calc(100vh - 70px); overflow-y:auto;
  box-shadow:var(--shadow-lg); z-index:60;
}
.main-nav.mobile-open > ul{ display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:14px; }
.main-nav.mobile-open > ul > li > a,
.main-nav.mobile-open > ul > li > button.nav-top{
  display:flex; align-items:center; justify-content:space-between; gap:5px; width:100%;
  color:var(--cloud); background:transparent; border:0;
  font-family:var(--font-body); font-weight:500; font-size:16px; letter-spacing:0;
  padding:13px 14px; border-radius:var(--radius-pill);
}
.main-nav.mobile-open > ul > li > a:hover, .main-nav.mobile-open > ul > li > button.nav-top:hover{ background:rgba(255,255,255,0.08); }
.caret{ font-size:10px; opacity:0.7; }

.dropdown{
  position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
  background:rgba(255,255,255,0.04); border-radius:var(--radius-lg);
  padding:6px; margin:2px 0 8px; min-width:0;
}
.dropdown a{
  display:block; padding:12px 16px; border-radius:10px;
  color:var(--cloud); font-size:15px; font-family:var(--font-body); font-weight:500;
}
.dropdown a:hover{ background:rgba(255,255,255,0.08); color:var(--red-light); }

.header-cta{ display:flex; align-items:center; gap:12px; }
.header-phone{ display:flex; flex-direction:column; line-height:1.2; }
.header-phone .call-label{ font-family:var(--font-body); font-size:10.5px; font-weight:500; color:var(--steel-light); letter-spacing:0.06em; text-transform:uppercase; }
.header-phone .call-number{ font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-0.01em; color:var(--white); }

.mobile-toggle{ display:inline-flex; background:transparent; border:1px solid rgba(255,255,255,0.25); color:var(--white); border-radius:8px; padding:8px 10px; }

/* ---------------------------------- Hero + Radar signature ---------------------------------- */
.hero{
  position:relative;
  background:radial-gradient(120% 140% at 78% 18%, #1E1E1E 0%, var(--ink-black) 55%);
  color:var(--white);
  overflow:hidden;
  padding:64px 0 84px;
}
.hero .wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; position:relative; z-index:2; }
.hero-eyebrow{ color:var(--red-light); display:flex; align-items:center; gap:9px; margin-bottom:18px; }
.hero-eyebrow .rule{ width:30px; height:2px; background:var(--red); display:inline-block; }
.hero h1{ font-size:clamp(34px,4.6vw,54px); font-weight:700; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero-sub{ margin:22px 0 30px; font-size:17.5px; font-weight:300; color:var(--steel-light); max-width:46ch; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-trust{ display:flex; gap:26px; flex-wrap:wrap; }
.trust-stat{ font-family:var(--font-body); }
.trust-stat b{ display:block; font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--white); letter-spacing:-0.01em; }
.trust-stat span{ font-size:11.5px; font-weight:400; color:var(--steel-light); letter-spacing:0.04em; text-transform:uppercase; }

/* radar (service-area map visualization) */
.radar-wrap{ position:relative; aspect-ratio:1/1; max-width:480px; margin:0 auto; }
.radar-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(236,30,36,0.18);
}
.radar-ring.r2{ inset:14%; }
.radar-ring.r3{ inset:28%; }
.radar-ring.r4{ inset:42%; }
.radar-sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(236,30,36,0.32), transparent 30%);
  animation:sweep 5.5s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
.radar-center{
  position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px;
  border-radius:50%; background:var(--red); box-shadow:0 0 0 6px rgba(236,30,36,0.18);
}
.radar-pin{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px;
  transform:translate(-50%,-50%);
}
.radar-pin .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(236,30,36,0.2); }
.radar-pin .city-label{
  font-family:var(--font-body); font-weight:500; font-size:10.5px; color:var(--cloud); background:rgba(0,0,0,0.75);
  padding:3px 8px; border-radius:var(--radius-pill); white-space:nowrap; border:1px solid rgba(255,255,255,0.12);
}
.radar-caption{ text-align:center; margin-top:14px; font-family:var(--font-body); font-weight:500; font-size:11.5px; color:var(--steel-light); letter-spacing:0.05em; text-transform:uppercase; }

.areas-layout{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
@media (min-width: 901px){
  .areas-layout{ grid-template-columns:0.85fr 1.15fr; gap:56px; }
  .areas-grid-3col{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width: 981px){
  .offer-grid-3col{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .radar-wrap{ max-width:340px; }
}

/* ---------------------------------- Hero v2 (photo-style, Clean Cut pattern) ---------------------------------- */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 15% 20%, #1A1A1A 0%, var(--ink-black) 55%),
    repeating-radial-gradient(circle at 82% 28%, rgba(236,30,36,0.09) 0px, rgba(236,30,36,0.09) 1px, transparent 2px, transparent 42px),
    repeating-radial-gradient(circle at 18% 82%, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 2px, transparent 56px);
  color:var(--white);
  overflow:hidden;
  padding:76px 0 0;
  text-align:center;
}
.hero .wrap{ display:block; max-width:820px; }
.hero-eyebrow{ justify-content:center; }
.hero h1{ font-size:clamp(32px,5vw,52px); }
.hero-sub{ margin:22px auto 30px; text-align:center; }
.hero-ctas{ justify-content:center; margin-bottom:0; }
.hero-trust-row{
  display:flex; justify-content:center; gap:48px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.1); margin-top:52px; padding:26px 0;
  background:rgba(255,255,255,0.03);
}
.hero-trust-item{ display:flex; align-items:center; gap:12px; max-width:230px; text-align:left; }
.hero-trust-item .icon{
  width:42px; height:42px; border-radius:50%; background:rgba(236,30,36,0.14); border:1.5px solid var(--red);
  color:var(--red-light); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; font-weight:600;
}
.hero-trust-item span{ font-size:13.5px; font-weight:400; color:var(--cloud); line-height:1.4; }
@media (max-width:900px){ .hero-trust-row{ gap:24px; } }

/* ---------------------------------- What We Offer (service cards) ---------------------------------- */
.offer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.offer-card{
  background:var(--white); border:1px solid var(--cloud-dim); border-radius:var(--radius-lg);
  padding:30px 24px; text-align:left; transition:transform .15s ease, box-shadow .15s ease;
}
.offer-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.offer-icon{
  width:50px; height:50px; border-radius:14px; background:var(--ink-black); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px;
}
.offer-card h3{ font-family:var(--font-display); font-weight:600; font-size:18px; margin-bottom:10px; }
.offer-card p{ font-size:14.5px; font-weight:300; color:var(--steel); margin:0 0 16px; }
.offer-card a{ font-family:var(--font-body); font-size:13.5px; letter-spacing:0; text-transform:none; color:var(--red); font-weight:600; }
.offer-card a:hover{ text-decoration:underline; }
@media (max-width:980px){ .offer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .offer-grid{ grid-template-columns:1fr; } }

/* ---------------------------------- FAQ accordion ---------------------------------- */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--cloud-dim); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; padding:20px 4px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--ink);
}
.faq-q .faq-icon{ font-family:var(--font-body); color:var(--red); font-size:18px; flex:none; transition:transform .2s ease; }
.faq-item.open .faq-q .faq-icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:240px; }
.faq-a p{ padding:0 4px 20px; font-size:14.5px; font-weight:300; color:var(--steel); margin:0; }

/* On dark sections, .faq-q's default var(--ink) text is nearly
   invisible against the dark background -- override to light text. */
.section-dark .faq-item{ border-bottom-color:rgba(255,255,255,0.14); }
.section-dark .faq-q{ color:var(--white); }
.section-dark .faq-a p{ color:var(--steel-light); }

.section{ padding:80px 0; }
.section-dark{ background:var(--ink-black); color:var(--white); }
.section-cloud{ background:var(--cloud); }

.financing-apply-card{
  background:var(--white); border:1.5px solid var(--cloud-dim); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:40px 36px; text-align:center;
}
.financing-apply-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:rgba(236,30,36,0.1); border:1.5px solid var(--red); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; font-family:var(--font-display);
}
.financing-apply-card h3{ font-family:var(--font-display); font-size:20px; margin-bottom:10px; }
.financing-apply-card p{ color:var(--steel); font-weight:300; font-size:14.5px; margin-bottom:22px; }
@media (max-width:700px){
  .financing-apply-card{ padding:32px 24px; }
}
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head .eyebrow{ color:var(--red); margin-bottom:12px; display:block; }
.section-dark .section-head .eyebrow{ color:var(--red-light); }
.section-head h2{ font-size:clamp(26px,3.4vw,36px); margin-bottom:14px; }
.section-head p{ color:var(--steel); font-weight:300; font-size:16.5px; }
.section-dark .section-head p{ color:var(--steel-light); }

/* ---------------------------------- Hero (photo-style, Clean-Cut pattern) ---------------------------------- */
.hero-icon-list{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.hero-icon-item{ display:flex; align-items:center; gap:12px; }
.hero-icon-item .ico{
  width:34px; height:34px; border-radius:50%; background:rgba(236,30,36,0.14); border:1px solid rgba(236,30,36,0.4);
  display:flex; align-items:center; justify-content:center; color:var(--red-light); font-size:15px; flex:none; font-weight:600;
}
.hero-icon-item span.txt{ font-size:14.5px; font-weight:400; color:var(--cloud); }

/* ---------------------------------- FAQ accordion (v2) ---------------------------------- */
.faq-list{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--cloud-dim); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; padding:22px 4px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-body); font-weight:700; font-size:16.5px; color:var(--ink);
}
.faq-q .plus{ font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--red); transition:transform .2s ease; flex:none; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:240px; }
.faq-a p{ padding:0 4px 22px; font-size:15px; font-weight:300; color:var(--steel); margin:0; }

.signs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sign-card{
  background:var(--white); border:1px solid var(--cloud-dim); border-radius:var(--radius-lg);
  padding:28px 24px; box-shadow:var(--shadow-sm);
}
.sign-card .mark{ font-family:var(--font-body); font-weight:600; color:var(--red); font-size:12px; letter-spacing:0.08em; margin-bottom:12px; display:block; text-transform:uppercase; }
.sign-card h3{ font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:9px; }
.sign-card p{ font-size:14.5px; font-weight:300; color:var(--steel); margin:0; }

/* ---------------------------------- Process (real sequence, numbered) ---------------------------------- */
.process-rail{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; position:relative; }
.process-rail::before{
  content:''; position:absolute; top:22px; left:4%; right:4%; height:1px; background:rgba(255,255,255,0.14);
}
.process-step{ position:relative; padding:0 14px; text-align:left; }
.process-num{
  width:44px; height:44px; border-radius:50%; background:var(--panel); border:1.5px solid var(--red);
  color:var(--red-light); font-family:var(--font-body); font-weight:700; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; position:relative; z-index:2; font-size:14px;
}
.process-step h4{ font-family:var(--font-display); font-weight:600; font-size:15px; margin-bottom:8px; color:var(--white); }
.process-step p{ font-size:13.5px; font-weight:300; color:var(--steel-light); margin:0; }
@media (max-width: 980px){
  .process-rail{ grid-template-columns:repeat(2,1fr); gap:28px 18px; }
  .process-rail::before{ display:none; }
}

/* ---------------------------------- Tiers (Good/Better/Best) ---------------------------------- */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.tier-card{ background:var(--white); border:1.5px solid var(--cloud-dim); border-radius:var(--radius-lg); padding:32px 28px; display:flex; flex-direction:column; }
.tier-card.featured{ border-color:var(--red); box-shadow:var(--shadow-lg); position:relative; transform:translateY(-8px); }
.tier-flag{ position:absolute; top:-13px; left:26px; background:var(--red); color:var(--white); font-family:var(--font-body); font-weight:600; font-size:10.5px; letter-spacing:0.06em; padding:5px 12px; border-radius:var(--radius-pill); text-transform:uppercase; }
.tier-name{ font-family:var(--font-body); font-weight:600; letter-spacing:0.08em; font-size:12.5px; color:var(--red); text-transform:uppercase; margin-bottom:6px; }
.tier-card h3{ font-family:var(--font-display); font-weight:700; font-size:22px; margin-bottom:14px; }
.tier-card ul{ margin:0 0 24px; flex:1; }
.tier-card li{ font-size:14px; font-weight:300; color:var(--steel); padding:9px 0; border-top:1px solid var(--cloud-dim); }
.tier-card li:first-child{ border-top:0; }

/* ---------------------------------- Core Values ---------------------------------- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.value-card{ text-align:left; padding:8px 4px; }
.value-mark{
  width:52px; height:52px; border-radius:16px; background:var(--panel); border:1.5px solid var(--red);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--red-light);
}
.value-card h3{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--white); margin-bottom:10px; }
.value-card p{ font-size:15px; font-weight:300; color:var(--steel-light); margin:0 0 16px; }
.value-verse{ font-family:var(--font-body); font-weight:400; font-style:italic; font-size:13px; color:var(--red-light); border-left:2px solid var(--red); padding-left:12px; line-height:1.6; }
.value-verse cite{ display:block; font-style:normal; font-weight:500; color:var(--steel-light); margin-top:6px; }

/* ---------------------------------- Trust / partner badge strip ---------------------------------- */
.badge-strip{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.badge-chip{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:1.5px solid var(--cloud-dim); border-radius:var(--radius); padding:16px 22px; min-width:150px;
  background:var(--white);
}
.badge-chip .badge-name{ font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:0; color:var(--ink); }
.badge-chip .badge-type{ font-family:var(--font-body); font-weight:500; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--steel); }
.badge-note{ text-align:center; font-size:12.5px; font-weight:300; color:var(--steel); margin-top:18px; }

.insurance-panel{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.insurance-terms{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.term-chip{ background:var(--panel); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:12px 14px; }
.term-chip b{ display:block; font-family:var(--font-body); font-weight:600; font-size:11.5px; color:var(--red-light); letter-spacing:0.04em; }
.term-chip span{ font-size:12.5px; font-weight:300; color:var(--steel-light); }
.legal-note{ font-size:12.5px; font-weight:300; color:var(--steel-light); border-top:1px solid rgba(255,255,255,0.12); margin-top:26px; padding-top:16px; line-height:1.6; }

/* ---------------------------------- Service area list ---------------------------------- */
.area-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.area-chip{
  border:1px solid var(--cloud-dim); border-radius:var(--radius); padding:12px 14px;
  font-family:var(--font-body); font-weight:500; font-size:13.5px; display:flex; align-items:center; justify-content:space-between;
  transition:border-color .15s ease, background .15s ease;
}
.area-chip:hover{ border-color:var(--red); background:var(--white); }
.area-chip .go{ color:var(--red); }

/* ---------------------------------- Lead form ---------------------------------- */
.lead-section{ background:linear-gradient(135deg, var(--red) 0%, #8A1216 100%); color:var(--white); }
.lead-panel{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.lead-copy{ background:var(--ink-black); color:var(--white); padding:44px; display:flex; flex-direction:column; justify-content:center; }
.lead-copy h2{ font-size:28px; margin-bottom:16px; }
.lead-copy p{ color:var(--steel-light); font-weight:300; font-size:15px; margin-bottom:22px; }
.lead-copy ul li{ padding:8px 0 8px 22px; position:relative; font-size:14.5px; font-weight:400; color:var(--cloud); }
.lead-copy ul li::before{ content:'✓'; position:absolute; left:0; color:var(--red-light); font-weight:700; }
.lead-form{ padding:44px; color:var(--ink); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-family:var(--font-body); font-weight:600; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--steel); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--cloud-dim); border-radius:var(--radius); padding:11px 13px; font-family:var(--font-body); font-weight:400; font-size:14.5px; background:var(--cloud);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--red); outline:none; background:var(--white); }
.form-note{ font-size:12px; font-weight:300; color:var(--steel); margin-top:12px; }
@media (max-width: 900px){ .lead-panel{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* ---------------------------------- Footer ---------------------------------- */
.site-footer{ background:var(--ink); color:var(--steel-light); padding:60px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:44px; }
.footer-col h5{ font-family:var(--font-body); font-weight:600; color:var(--white); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:9px; font-size:13.5px; font-weight:300; }
.footer-col ul a:hover{ color:var(--red-light); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; font-weight:300; }
.footer-legal{ font-size:12px; font-weight:300; line-height:1.7; color:#7A7A7A; max-width:900px; margin-top:18px; }

/* ---------------------------------- Breadcrumb / page hero (interior pages) ---------------------------------- */
.page-hero{ background:var(--ink-black); color:var(--white); padding:46px 0 54px; }
.breadcrumb{ font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--steel-light); margin-bottom:16px; }
.breadcrumb a:hover{ color:var(--red-light); }
.page-hero h1{ font-size:clamp(28px,4vw,42px); max-width:16ch; }
.page-hero .hero-sub{ color:var(--steel-light); max-width:60ch; margin-top:16px; }

/* generic content styles for interior pages */
.content-block{ max-width:760px; }
.content-block h2{ font-size:26px; margin:40px 0 16px; }
.content-block h2:first-child{ margin-top:0; }
.content-block p{ font-size:16px; font-weight:300; color:var(--steel); margin:0 0 16px; }
.content-block ul{ margin:0 0 20px; }
.content-block ul li{ position:relative; padding:6px 0 6px 22px; font-size:15.5px; font-weight:300; color:var(--steel); }
.content-block ul li::before{ content:'—'; position:absolute; left:0; color:var(--red); }

.two-col{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; }
.side-card{ background:var(--cloud); border-radius:var(--radius-lg); padding:28px; border:1px solid var(--cloud-dim); position:sticky; top:100px; }
.side-card h4{ font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:14px; }
.side-card .phone-big{ font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--red); display:block; margin-bottom:6px; }

@media (max-width: 900px){
  .signs-grid, .tier-grid, .values-grid{ grid-template-columns:1fr; }
  .insurance-panel{ grid-template-columns:1fr; }
  .area-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
  .side-card{ position:static; }
  .tier-card.featured{ transform:none; }
  .lead-copy, .lead-form{ padding:28px 24px; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns:1fr; }
  .badge-chip{ min-width:0; flex:1 1 calc(50% - 7px); }
  .section{ padding:52px 0; }
  .page-hero{ padding:36px 0 42px; }
}

/* ---------------------------------- Instant Roof Estimator ---------------------------------- */
.estimator-card{
  max-width:760px; margin:0 auto; background:var(--white); border:1.5px solid var(--cloud-dim);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:44px 48px; position:relative;
}
.estimator-progress{ margin-bottom:34px; }
.estimator-progress-bar{ height:6px; border-radius:var(--radius-pill); background:var(--cloud-dim); overflow:hidden; }
.estimator-progress-fill{ height:100%; width:20%; background:var(--red); border-radius:var(--radius-pill); transition:width .25s ease; }
.estimator-progress-label{ display:block; margin-top:10px; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel); }

.estimator-step h2{ font-size:24px; margin-bottom:8px; }
.estimator-step-sub{ color:var(--steel); font-weight:300; font-size:14.5px; margin:0 0 24px; }

.estimator-options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.estimator-options-stack{ grid-template-columns:1fr; }
.estimator-option{
  text-align:left; background:var(--cloud); border:1.5px solid var(--cloud-dim); border-radius:var(--radius);
  padding:16px 18px; font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--ink);
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.estimator-option:hover{ border-color:var(--red); background:var(--white); }
.estimator-option.selected{ border-color:var(--red); background:var(--white); box-shadow:0 0 0 2px rgba(236,30,36,0.15); }

.estimator-back{
  background:transparent; border:0; color:var(--steel); font-family:var(--font-body); font-weight:600;
  font-size:13.5px; margin-top:24px; padding:6px 2px;
}
.estimator-back:hover{ color:var(--red); }

.estimate-results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.estimate-results-grid.single-tier{ grid-template-columns:1fr; max-width:340px; }
.estimate-tier-card{
  border:1.5px solid var(--cloud-dim); border-radius:var(--radius-lg); padding:22px 18px; text-align:center;
}
.estimate-tier-card.featured{ border-color:var(--red); box-shadow:var(--shadow-sm); }
.estimate-tier-card .tier-name{ display:block; margin-bottom:10px; }
.estimate-tier-card .estimate-price{
  font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--ink);
  filter:blur(7px); user-select:none; transition:filter .3s ease; line-height:1.3;
}
.estimator-card.unlocked .estimate-price{ filter:none; user-select:auto; }

.estimator-disclaimer{ font-size:12.5px; font-weight:300; color:var(--steel); margin-bottom:26px; line-height:1.6; }

.estimator-lead-form{ border-top:1.5px solid var(--cloud-dim); padding-top:26px; }
.estimator-card.unlocked .estimator-lead-form{ display:none; }

.estimator-unlocked{ text-align:center; padding:20px 10px 4px; }
.unlocked-check{
  width:52px; height:52px; border-radius:50%; background:rgba(236,30,36,0.1); border:1.5px solid var(--red);
  color:var(--red); font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.estimator-unlocked h3{ font-family:var(--font-display); font-size:19px; margin-bottom:10px; }
.estimator-unlocked p{ color:var(--steel); font-weight:300; font-size:14.5px; margin:0 0 20px; }

.unlocked-next-steps{ max-width:420px; margin:0 auto 22px; text-align:left; }
.unlocked-next-steps .btn{ margin-top:14px; }
.unlocked-next-steps .btn:first-child{ margin-top:0; }
.unlocked-next-caption{
  font-size:12.5px; font-weight:300; color:var(--steel); text-align:center;
  margin:8px 0 0; padding:0 6px;
}

.day-time-row{ display:flex; gap:8px; flex-wrap:wrap; }
.day-time-row .estimator-option{ flex:1; min-width:70px; text-align:center; padding:12px 8px; font-size:13.5px; }

.estimator-restart{
  display:block; margin:22px auto 0; background:transparent; border:0; color:var(--steel);
  font-family:var(--font-body); font-weight:600; font-size:13px; text-decoration:underline;
}
.estimator-restart:hover{ color:var(--red); }

@media (max-width: 700px){
  .estimator-card{ padding:30px 22px; }
  .estimator-options{ grid-template-columns:1fr; }
  .estimate-results-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------- Address-based Instant Estimator ---------------------------------- */
.address-search-row{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; align-items:center; }
.address-input-container{ flex:1; min-width:220px; }
/* google.maps.places.PlaceAutocompleteElement renders its own input inside a
   shadow root, so it only takes outer layout properties (width/flex/margin)
   from this class -- it keeps its own default look rather than the site's
   input styling. */
.address-input{ width:100%; }
.link-btn{ background:none; border:0; padding:0; color:var(--red); font-weight:600; font-family:var(--font-body); font-size:inherit; text-decoration:underline; cursor:pointer; }

.address-loading{ text-align:center; padding:50px 10px; }
.address-spinner{
  width:38px; height:38px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--cloud-dim); border-top-color:var(--red); animation:address-spin 0.8s linear infinite;
}
@keyframes address-spin{ to{ transform:rotate(360deg); } }
.address-loading p{ color:var(--steel); font-weight:500; font-size:14.5px; }

.address-results-top{ display:flex; gap:22px; margin-bottom:24px; flex-wrap:wrap; align-items:stretch; }
.address-sat-image{
  width:220px; height:auto; border-radius:var(--radius); object-fit:cover; border:1.5px solid var(--cloud-dim); flex:none; background:var(--cloud);
}
.address-roof-stats{ display:flex; flex-direction:column; gap:12px; justify-content:center; }
.roof-stat-chip{ background:var(--cloud); border-radius:var(--radius); padding:12px 16px; }
.roof-stat-chip b{ display:block; font-family:var(--font-display); font-size:19px; color:var(--ink); }
.roof-stat-chip span{ font-family:var(--font-body); font-size:12px; color:var(--steel); text-transform:uppercase; letter-spacing:0.04em; }

.address-fallback-note{ text-align:center; padding:18px 0; color:var(--steel); font-size:14.5px; }

@media (max-width:700px){
  .address-results-top{ flex-direction:column; }
  .address-sat-image{ width:100%; height:200px; }
}

/* ---------------------------------- Mobile sticky call bar ---------------------------------- */
.mobile-cta-bar{ display:none; }
@media (max-width: 700px){
  .mobile-cta-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--ink-black); border-top:1px solid rgba(255,255,255,0.1);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    gap:10px; box-shadow:0 -8px 24px -12px rgba(0,0,0,0.4);
  }
  .mobile-cta-bar a{
    flex:1; text-align:center; padding:13px 10px; border-radius:var(--radius-pill);
    font-family:var(--font-body); font-weight:600; font-size:14.5px;
  }
  .mobile-cta-bar .call{ background:var(--red); border:1.5px solid var(--red); color:var(--white); }
  .mobile-cta-bar .inspect{ background:var(--red); color:var(--white); }
  body{ padding-bottom:66px; }
}

/* ---------------------------------- Chat widget ---------------------------------- */
#chat-widget{ position:fixed; right:22px; bottom:22px; z-index:90; font-family:var(--font-body); }
@media (max-width:700px){ #chat-widget{ right:16px; bottom:82px; } }

#chat-toggle{
  width:60px; height:60px; border-radius:50%; background:var(--red); border:none; color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(236,30,36,0.6); transition:transform .15s ease;
}
#chat-toggle:hover{ transform:scale(1.06); }
#chat-toggle .chat-icon-close{ display:none; }
#chat-widget.open #chat-toggle .chat-icon-open{ display:none; }
#chat-widget.open #chat-toggle .chat-icon-close{ display:block; }

.chat-teaser{
  position:absolute; right:72px; bottom:14px; width:200px; white-space:normal; line-height:1.35;
  background:var(--white); color:var(--ink); font-size:13.5px; font-weight:500;
  padding:12px 16px; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  animation:teaserIn .3s ease .8s both;
}
.chat-teaser::after{
  content:''; position:absolute; right:-6px; bottom:16px; width:12px; height:12px;
  background:var(--white); transform:rotate(45deg);
}
#chat-widget.dismissed .chat-teaser, #chat-widget.open .chat-teaser{ display:none; }
@keyframes teaserIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:560px){ .chat-teaser{ display:none !important; } }

.chat-panel{
  position:absolute; right:0; bottom:76px; width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 140px);
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  transform:translateY(16px); opacity:0; pointer-events:none; transition:transform .18s ease, opacity .18s ease;
}
#chat-widget.open .chat-panel{ transform:translateY(0); opacity:1; pointer-events:auto; }

.chat-header{
  background:var(--ink-black); color:var(--white); padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; flex:none;
}
.chat-header-info{ display:flex; align-items:center; gap:11px; }
.chat-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--red); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.chat-name{ font-family:var(--font-display); font-weight:600; font-size:14.5px; }
.chat-status{ font-size:12px; color:var(--steel-light); display:flex; align-items:center; gap:5px; }
.chat-status .dot{ width:7px; height:7px; border-radius:50%; background:#3DCB6C; display:inline-block; }
.chat-close{ background:transparent; border:0; color:var(--white); font-size:16px; cursor:pointer; padding:4px; line-height:1; }

.chat-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--cloud); }
.chat-msg{ max-width:82%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.45; }
.chat-msg.bot{ align-self:flex-start; background:var(--white); color:var(--ink); border-bottom-left-radius:4px; box-shadow:var(--shadow-sm); }
.chat-msg.user{ align-self:flex-end; background:var(--red); color:var(--white); border-bottom-right-radius:4px; }
.chat-typing{ align-self:flex-start; background:var(--white); border-radius:16px; border-bottom-left-radius:4px; padding:12px 16px; box-shadow:var(--shadow-sm); display:flex; gap:4px; }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--steel); opacity:.4; animation:typingDot 1.1s infinite; }
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingDot{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.chat-quick-replies{ display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:100%; }
.chat-quick-replies button{
  background:var(--white); border:1.5px solid var(--cloud-dim); color:var(--ink);
  padding:9px 14px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:500; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.chat-quick-replies button:hover{ border-color:var(--red); color:var(--red); }

.chat-input-row{ flex:none; border-top:1px solid var(--cloud-dim); padding:10px; display:flex; gap:8px; background:var(--white); }
.chat-input-row input{
  flex:1; border:1.5px solid var(--cloud-dim); border-radius:var(--radius-pill); padding:10px 16px;
  font-family:var(--font-body); font-size:14px; background:var(--cloud);
}
.chat-input-row input:focus{ outline:none; border-color:var(--red); background:var(--white); }
.chat-input-row > button{
  width:40px; height:40px; border-radius:50%; background:var(--red); color:var(--white); border:0;
  font-size:15px; cursor:pointer; flex:none;
}
.chat-input-row > button:disabled{ opacity:.4; cursor:not-allowed; }
.chat-input-row.hidden{ display:none; }

/* ---------------------------------- Language toggle (EN / ES, drives Google Translate) ---------------------------------- */
/* Always sits in .header-cta, which is always on the dark .site-header background. */
.lang-toggle{ display:flex; align-items:center; gap:2px; background:rgba(255,255,255,0.08); border-radius:999px; padding:2px; flex:none; }
.lang-toggle button{
  border:0; background:none; padding:5px 10px; border-radius:999px; font-family:var(--font-body); font-weight:600;
  font-size:11.5px; letter-spacing:.02em; color:var(--steel-light); cursor:pointer;
}
.lang-toggle button.active{ background:var(--red); color:var(--white); }

@media (max-width:700px){
  /* Narrow phones: rely on the mobile-cta-bar's Call button instead of
     crowding the header with the phone number too. */
  .header-phone{ display:none; }
}

/* ---------------------------------- Reviews (in-house, no third-party embed) ---------------------------------- */
.review-rating-badge{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:32px; }
.review-stars{ color:#f5a623; font-size:22px; letter-spacing:2px; }
.review-score{ font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--ink); }
.review-count-label{ font-size:14px; color:var(--steel); font-weight:500; }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .review-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .review-grid{ grid-template-columns:1fr; } }
.review-card{ background:var(--white); border:1px solid var(--cloud-dim); border-radius:var(--radius-lg); padding:22px; }
.review-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.review-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--white); flex:none;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15px;
}
.review-author{ font-weight:600; font-size:14.5px; color:var(--ink); }
.review-meta{ font-size:12px; color:var(--steel); margin-top:2px; }
.review-stars-small{ color:#f5a623; letter-spacing:1px; }
.review-text{ font-size:14px; color:var(--steel); line-height:1.6; margin:0; }

/* Hide Google Translate's own UI chrome -- we drive it entirely through .lang-toggle */
.goog-te-banner-frame.skiptranslate{ display:none !important; }
body{ top:0 !important; }
#google_translate_element{ display:none !important; }
.goog-te-gadget-icon{ display:none !important; }
.goog-tooltip, .goog-tooltip:hover{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }