/* ============================================================
   ROOF ReNU — design tokens
   Palette:  asphalt black + ReNU red, with one restrained
             amber note borrowed from the oil itself.
   ============================================================ */
:root{
  --ink:        #0A0A0B;
  --panel:      #131417;
  --panel-2:    #1B1D21;
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.055);

  --red:        #C00010;
  --red-hot:    #DE0A1C;
  --red-deep:   #7A000B;

  --amber:      #E0A64A;

  --bone:       #F4F2EE;
  --slate:      #9AA0A8;
  --slate-dim:  #6E747C;

  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--display); margin:0; line-height:.92; letter-spacing:.005em; }
h1{ font-weight:900; font-size:clamp(52px, 11vw, 116px); text-transform:uppercase; }
h2{ font-weight:800; font-size:clamp(38px, 6.4vw, 68px); text-transform:uppercase; }
h3{ font-weight:700; font-size:clamp(24px, 3.4vw, 32px); text-transform:uppercase; }
p{ margin:0 0 1em; }
.lede{ font-size:clamp(17px,2.1vw,21px); color:#D8D5D0; max-width:60ch; }

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--slate);
  display:flex; align-items:center; gap:12px;
  margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--red); flex:none;
}
.muted{ color:var(--slate); }
.small{ font-size:14.5px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:19px; letter-spacing:.03em;
  padding:15px 28px 13px;
  border:1.5px solid transparent; border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-hot); transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(255,255,255,.28); color:var(--bone); background:transparent; }
.btn-ghost:hover{ border-color:var(--bone); background:rgba(255,255,255,.06); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.head-in{
  display:flex; align-items:center; gap:24px;
  height:70px;
}
.brand{
  display:flex; align-items:center;
  text-decoration:none; margin-right:auto; flex:none;
}
.brand img{ display:block; height:44px; width:auto; }
@media (max-width:420px){ .brand img{ height:36px; } }
.brand-foot img{ height:74px; width:auto; display:block; }
@media (max-width:520px){ .brand-foot img{ height:58px; } }

.nav{ display:flex; align-items:center; gap:28px; }
.nav a{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--slate);
  padding:6px 0; position:relative;
  transition:color .16s ease;
}
.nav a:hover, .nav a.is-on{ color:var(--bone); }
.nav a.is-on::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--red);
}
.head-cta{ font-size:16px; padding:11px 20px 9px; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  color:var(--bone); width:42px; height:38px; border-radius:2px; cursor:pointer;
  font-size:18px; line-height:1;
}

@media (max-width:880px){
  .nav{
    position:fixed; inset:70px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 22px;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
  .nav a.is-on::after{ display:none; }
  .nav .btn{ margin-top:16px; }
  .nav-toggle{ display:block; }
  .head-cta.desktop-only{ display:none; }
}
@media (min-width:881px){ .nav .btn{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,80px); overflow:hidden; }
.hero::before{  /* roof-pitch wash */
  content:"";
  position:absolute; inset:-40% -20% auto -20%; height:150%;
  background:
    radial-gradient(70% 55% at 22% 8%, rgba(192,0,16,.30), transparent 62%),
    radial-gradient(50% 40% at 88% 30%, rgba(224,166,74,.10), transparent 70%);
  pointer-events:none;
}
.hero-in{ position:relative; }
.hero h1{ max-width:14ch; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero .lede{ margin-top:26px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero-strip{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:52px; border-top:1px solid var(--line);
}
.hero-strip div{
  flex:1 1 190px; padding:20px 22px 20px 0;
  border-right:1px solid var(--line-soft);
}
.hero-strip div:last-child{ border-right:0; }
.hero-strip b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:40px; line-height:1; color:var(--bone);
}
.hero-strip span{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate-dim);
  display:block; margin-top:9px;
}

/* ============================================================
   SIGNATURE — the shingle comparator
   ============================================================ */
.comparator{
  position:relative; margin-top:clamp(40px,6vw,64px);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--panel);
}
.comp-stage{
  position:relative; height:clamp(280px,42vw,400px); overflow:hidden;
  user-select:none; touch-action:pan-y;
}
.shingle{ position:absolute; inset:0; }

/* restored (right / base layer) */
.shingle-good{
  background:
    linear-gradient(180deg, #17181B 0%, #0D0E10 100%);
}
/* depleted (left / clipped layer) */
.shingle-bad{
  background:
    linear-gradient(180deg, #3A3733 0%, #26241F 100%);
  clip-path: inset(0 var(--reveal, 50%) 0 0);
}
/* granule noise */
.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
.shingle-good .grain{ opacity:.30; mix-blend-mode:overlay; }
.shingle-bad  .grain{ opacity:.42; mix-blend-mode:soft-light; }

/* shingle course lines */
.courses{
  position:absolute; inset:0;
  background-image:linear-gradient(to bottom, rgba(0,0,0,.55) 0 2px, transparent 2px);
  background-size:100% 76px;
  opacity:.7;
}
/* tab notches */
.tabs{
  position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(0,0,0,.45) 0 2px, transparent 2px);
  background-size:132px 100%;
  opacity:.45;
}
/* sheen: healthy oil */
.shingle-good::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(224,166,74,.16), transparent 58%),
    linear-gradient(200deg, rgba(255,255,255,.05), transparent 45%);
}
/* cracking: depleted */
.cracks{
  position:absolute; inset:0; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Cg stroke='%23000' stroke-width='1.6' fill='none' opacity='.85'%3E%3Cpath d='M12 8 L34 46 L22 78 L48 112 L36 158 L60 196'/%3E%3Cpath d='M96 0 L110 40 L88 70 L114 108 L98 150'/%3E%3Cpath d='M180 14 L164 52 L192 84 L172 124 L196 168'/%3E%3Cpath d='M262 4 L244 44 L270 76 L250 118 L276 160'/%3E%3Cpath d='M34 46 L92 58'/%3E%3Cpath d='M114 108 L168 96'/%3E%3Cpath d='M192 84 L246 92'/%3E%3C/g%3E%3C/svg%3E");
  background-size:300px 200px;
}

.comp-label{
  position:absolute; top:16px; z-index:4;
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  padding:7px 11px; border-radius:2px;
  background:rgba(10,10,11,.72); border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.comp-label.left{ left:16px; color:var(--slate); }
.comp-label.right{ right:16px; color:var(--amber); }

.comp-divider{
  position:absolute; top:0; bottom:0; z-index:5;
  left:calc(100% - var(--reveal, 50%));
  width:2px; background:var(--red);
  transform:translateX(-1px);
  pointer-events:none;
}
.comp-divider::after{
  content:"◄ ►";
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:11px; letter-spacing:-1px; color:#fff;
  background:var(--red); border-radius:999px;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
}
.comp-range{
  position:absolute; inset:0; z-index:6;
  width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize;
}
.comp-foot{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding:15px 20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-dim);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.band{ padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line-soft); }
.band-panel{ background:var(--panel); }
.band-red{
  background:linear-gradient(150deg, var(--red-deep) 0%, #4A0812 55%, #1A0509 100%);
  border-top:0;
  position:relative; overflow:hidden;
}
.band-red::before{           /* the renewal mark, echoed quietly */
  content:""; position:absolute; z-index:0;
  right:-70px; top:50%; transform:translateY(-50%);
  width:460px; height:460px;
  background:url("icon.png") center/contain no-repeat;
  opacity:.055; pointer-events:none;
}
.band-red > .wrap{ position:relative; z-index:1; }
@media (max-width:900px){ .band-red::before{ display:none; } }
.sec-head{ max-width:70ch; margin-bottom:clamp(36px,5vw,58px); }
.sec-head h2 em{ font-style:normal; color:var(--red); }
.band-red .sec-head h2 em{ color:var(--amber); }

/* --- timeline: how a shingle dries out --- */
.timeline{ display:grid; gap:1px; background:var(--line); grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .timeline{ grid-template-columns:1fr; } }
.stage{ background:var(--ink); padding:32px 26px 34px; position:relative; }
.band-panel .stage{ background:var(--panel); }
.stage-age{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin-bottom:20px;
}
.stage h3{ margin-bottom:12px; }
.stage p{ color:var(--slate); font-size:15.5px; margin:0; }
.stage-bar{ height:4px; border-radius:2px; margin-bottom:24px; }
.bar-1{ background:linear-gradient(90deg,#2E7D52,#1E5537); }
.bar-2{ background:linear-gradient(90deg,var(--amber),#8A6320); }
.bar-3{ background:linear-gradient(90deg,var(--red-hot),var(--red-deep)); }

/* --- lab data --- */
.lab{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:start; }
@media (max-width:860px){ .lab{ grid-template-columns:1fr; } }
.data-table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13.5px; }
.data-table caption{
  text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--slate-dim); padding-bottom:14px;
}
.data-table th, .data-table td{
  padding:15px 12px; text-align:right;
  border-bottom:1px solid var(--line-soft);
}
.data-table th{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-dim); border-bottom:1px solid var(--line);
}
.data-table th:first-child, .data-table td:first-child{ text-align:left; color:var(--bone); }
.data-table td.treated{ color:var(--amber); font-weight:700; }
.data-table td.result{
  font-family:var(--body); font-size:14px; color:var(--bone);
  text-align:left; padding-left:18px;
}
.footnote{ font-size:12.5px; color:var(--slate-dim); line-height:1.55; margin-top:20px; }

.stat-cards{ display:grid; gap:14px; }
.stat{
  border:1px solid var(--line); border-radius:3px;
  padding:24px 24px 22px; background:var(--ink);
  display:flex; align-items:baseline; gap:18px;
}
.band-panel .stat{ background:rgba(0,0,0,.25); }
.stat b{
  font-family:var(--display); font-weight:900; font-size:clamp(44px,6vw,58px);
  line-height:.85; color:var(--red); flex:none;
}
.stat span{ font-size:15px; color:var(--slate); line-height:1.45; }
.stat span strong{ color:var(--bone); font-weight:600; display:block; }

/* --- qualify columns --- */
.qual{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
@media (max-width:760px){ .qual{ grid-template-columns:1fr; } }
.qual-col{ background:var(--ink); padding:34px 30px 38px; }
.qual-col h3{ margin-bottom:24px; display:flex; align-items:center; gap:12px; }
.qual-col h3 i{
  font-style:normal; width:26px; height:26px; border-radius:999px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  font-family:var(--body); font-weight:600;
}
.yes i{ background:rgba(46,125,82,.22); color:#5FCB8E; }
.no  i{ background:rgba(192,0,16,.20); color:#FF6B76; }
.qual-col ul{ list-style:none; margin:0; padding:0; }
.qual-col li{
  padding:13px 0 13px 22px; border-bottom:1px solid var(--line-soft);
  font-size:15.5px; color:#CFCCC7; position:relative;
}
.qual-col li::before{
  content:""; position:absolute; left:0; top:22px;
  width:9px; height:1px; background:var(--slate-dim);
}
.qual-col li:last-child{ border-bottom:0; }

/* --- process --- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ background:#210510; padding:30px 24px 34px; }
.step-n{
  font-family:var(--display); font-weight:900; font-size:52px; line-height:.8;
  color:rgba(255,255,255,.22); margin-bottom:18px;
}
.step h3{ font-size:22px; margin-bottom:10px; }
.step p{ font-size:14.5px; color:rgba(255,255,255,.68); margin:0; }

/* --- cost --- */
.cost{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:800px){ .cost{ grid-template-columns:1fr; } }
.cost-bars{ display:grid; gap:26px; }
.cost-row .cost-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); margin-bottom:10px;
}
.cost-track{ height:44px; background:rgba(255,255,255,.05); border-radius:2px; overflow:hidden; }
.cost-fill{ height:100%; border-radius:2px; }
.fill-replace{ width:100%; background:repeating-linear-gradient(135deg,#2A2C31 0 10px,#232529 10px 20px); }
.fill-renu{ width:22%; min-width:88px; background:var(--red); }
.cost-note{
  font-family:var(--display); font-weight:800; font-size:clamp(30px,4.4vw,42px);
  text-transform:uppercase; line-height:.95; margin-bottom:16px;
}
.cost-note em{ font-style:normal; color:var(--red); }

/* --- media slots (for the photos you're adding) --- */
.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:760px){ .media-grid{ grid-template-columns:1fr; } }
.sign{
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--ink); display:flex; flex-direction:column;
}
.sign-swatch{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.sign-swatch .grain{ opacity:.40; mix-blend-mode:soft-light; }
.sign-swatch .courses{ background-size:100% 46px; opacity:.6; }
.sign-swatch .tabs{ background-size:82px 100%; opacity:.4; }
.sw-granule{ background:linear-gradient(170deg,#33302B,#1D1B18); }
.sw-granule::after{            /* bare, granule-stripped patches */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(28% 34% at 24% 62%, rgba(0,0,0,.72), transparent 70%),
    radial-gradient(20% 26% at 63% 30%, rgba(0,0,0,.66), transparent 72%),
    radial-gradient(16% 22% at 84% 71%, rgba(0,0,0,.6), transparent 74%);
}
.sw-fade{ background:linear-gradient(170deg,#6E6A63,#403D38); }
.sw-fade::after{               /* chalky, sun-bleached wash */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(255,255,255,.20), rgba(255,255,255,.04) 60%, transparent);
}
.sw-check{ background:linear-gradient(170deg,#3B3833,#232120); }
.sw-check .cracks{ opacity:.85; background-size:180px 120px; }
.sign-body{ padding:22px 22px 24px; }
.sign-body h3{ font-size:21px; margin-bottom:9px; }
.sign-body p{ margin:0; font-size:15px; color:var(--slate); }
.sign-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate-dim); position:absolute; left:12px; bottom:10px; z-index:2;
  background:rgba(10,10,11,.6); padding:5px 9px; border-radius:2px;
}

/* --- CTA / form --- */
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
@media (max-width:860px){ .cta-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--ink); color:var(--bone);
  border:1px solid var(--line); border-radius:2px;
  padding:14px 15px; font-family:var(--body); font-size:16px;
}
.field textarea{ min-height:100px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--red); outline:none; }
.form-msg{
  display:none; margin-top:16px; padding:15px 18px;
  border-left:3px solid var(--amber); background:rgba(224,166,74,.09);
  font-size:15px;
}
.form-msg.is-on{ display:block; }
.form-msg.is-error{ border-left-color:var(--red); background:rgba(192,0,16,.10); }
.form-msg a{ color:var(--bone); }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ padding:18px 0; border-bottom:1px solid var(--line-soft); }
.contact-list dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--slate-dim); margin-bottom:6px;
}
.contact-list dd{ margin:0; font-size:18px; overflow-wrap:anywhere; }
.contact-list a{ text-decoration:none; border-bottom:1px solid var(--red); padding-bottom:2px; }

/* ============================================================
   FAQ PAGE
   ============================================================ */
.faq-hero{ padding:clamp(52px,7vw,84px) 0 clamp(30px,4vw,44px); position:relative; overflow:hidden; }
.faq-hero::before{
  content:""; position:absolute; inset:-50% -20% auto -20%; height:180%;
  background:radial-gradient(60% 50% at 30% 0%, rgba(192,0,16,.24), transparent 62%);
  pointer-events:none;
}
.faq-hero > *{ position:relative; }

.faq-jump{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:30px;
}
.faq-jump a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--slate);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  transition:border-color .16s ease, color .16s ease;
}
.faq-jump a:hover{ color:var(--bone); border-color:var(--red); }

.faq-group{ padding-top:clamp(44px,6vw,72px); }
.faq-group > h2{
  font-size:clamp(28px,4vw,40px); margin-bottom:6px;
}
.faq-group > .eyebrow{ margin-bottom:14px; }
.faq-list{ margin-top:28px; border-top:1px solid var(--line); }

details.qa{ border-bottom:1px solid var(--line-soft); }
details.qa summary{
  list-style:none; cursor:pointer;
  padding:22px 46px 22px 0; position:relative;
  font-family:var(--display); font-weight:700;
  font-size:clamp(20px,2.6vw,25px); text-transform:uppercase; line-height:1.05;
  transition:color .16s ease;
}
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary:hover{ color:var(--red-hot); }
details.qa summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:14px; height:2px; background:var(--red);
  transform:translateY(-50%);
}
details.qa summary::before{
  content:""; position:absolute; right:12px; top:50%;
  width:2px; height:14px; background:var(--red);
  transform:translateY(-50%);
  transition:transform .22s ease, opacity .22s ease;
}
details.qa[open] summary::before{ transform:translateY(-50%) rotate(90deg); opacity:0; }
details.qa .answer{ padding:0 0 26px; max-width:74ch; }
details.qa .answer p{ color:#C9C6C1; font-size:16px; }
details.qa .answer p:last-child{ margin-bottom:0; }
details.qa .answer ul{ margin:0 0 1em; padding-left:20px; color:#C9C6C1; font-size:16px; }
details.qa .answer li{ margin-bottom:7px; }
details.qa .answer strong{ color:var(--bone); }

.faq-tail{
  margin-top:clamp(56px,7vw,88px);
  border:1px solid var(--line); border-radius:3px;
  padding:clamp(30px,5vw,52px);
  background:linear-gradient(140deg, rgba(192,0,16,.16), transparent 62%), var(--panel);
}
.faq-tail h3{ margin-bottom:12px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{ border-top:1px solid var(--line); padding:clamp(44px,6vw,68px) 0 34px; }
.foot-top{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start; }
.foot-links{ display:flex; flex-wrap:wrap; gap:28px; }
.foot-links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--slate);
}
.foot-links a:hover{ color:var(--bone); }
.foot-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:12.5px; color:var(--slate-dim);
}

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}


/* ============================================================
   FOOTER — sister company
   ============================================================ */
.foot-sister{
  margin-top:38px; padding:24px 26px;
  border:1px solid var(--line-soft); border-radius:3px;
  background:rgba(255,255,255,.02);
}
.foot-sister p.small{ margin:0; color:var(--slate); max-width:70ch; }
.foot-sister a{ color:var(--bone); border-bottom:1px solid var(--red); text-decoration:none; }

/* ============================================================
   BLOG
   ============================================================ */
.post-list{ display:grid; gap:1px; background:var(--line); margin-top:clamp(34px,5vw,52px); }
.post-card{
  background:var(--ink); padding:clamp(26px,4vw,38px) clamp(24px,3.5vw,34px);
  display:block; text-decoration:none; transition:background .18s ease;
}
.post-card:hover{ background:var(--panel); }
.post-meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate-dim);
  display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px;
}
.post-card h3{ font-size:clamp(24px,3.4vw,32px); margin-bottom:12px; max-width:26ch; }
.post-card:hover h3{ color:var(--red-hot); }
.post-card p{ color:var(--slate); font-size:15.5px; margin:0; max-width:66ch; }
.post-more{
  display:inline-block; margin-top:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red);
}

.post-head{ padding:clamp(48px,7vw,80px) 0 clamp(24px,3vw,34px); position:relative; overflow:hidden; }
.post-head::before{
  content:""; position:absolute; inset:-60% -20% auto -20%; height:190%;
  background:radial-gradient(58% 48% at 26% 0%, rgba(192,0,16,.22), transparent 62%);
  pointer-events:none;
}
.post-head > *{ position:relative; }
.post-head h1{ font-size:clamp(38px,6.4vw,68px); max-width:20ch; }

.crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-dim); margin-bottom:22px;
}
.crumb a{ color:var(--slate); text-decoration:none; }
.crumb a:hover{ color:var(--bone); }

.prose{ max-width:68ch; padding-bottom:clamp(48px,7vw,80px); }
.prose h2{ font-size:clamp(26px,3.6vw,36px); margin:clamp(38px,5vw,54px) 0 16px; }
.prose h3{ font-size:clamp(20px,2.6vw,25px); margin:34px 0 12px; }
.prose p{ font-size:17px; color:#CFCCC7; }
.prose ul, .prose ol{ font-size:17px; color:#CFCCC7; padding-left:22px; margin:0 0 1.1em; }
.prose li{ margin-bottom:9px; }
.prose strong{ color:var(--bone); }
.prose a{ color:var(--bone); border-bottom:1px solid var(--red); text-decoration:none; }
.prose blockquote{
  margin:30px 0; padding:4px 0 4px 24px; border-left:3px solid var(--red);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(20px,2.8vw,27px); line-height:1.1; color:var(--bone);
}
.prose table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px; margin:26px 0; }
.prose th, .prose td{ padding:13px 12px; text-align:left; border-bottom:1px solid var(--line-soft); }
.prose th{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-dim); border-bottom:1px solid var(--line);
}
.post-cta{
  border:1px solid var(--line); border-radius:3px; padding:clamp(26px,4vw,40px);
  background:linear-gradient(140deg, rgba(192,0,16,.15), transparent 62%), var(--panel);
  margin-top:clamp(40px,6vw,64px);
}
.post-cta h3{ margin-bottom:12px; }

/* separators between post meta items */
.post-meta span + span::before{
  content:"\00B7"; margin-right:14px; color:var(--line);
}
/* blog index: close the gap under the intro */
.post-head + .band{ padding-top:0 !important; }
.post-head + .band .post-list{ margin-top:0; }

/* ============================================================
   SERVICE AREA PAGES
   ============================================================ */
.city-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
@media (max-width:820px){ .city-stats{ grid-template-columns:repeat(2,1fr); } }
.city-stats div{ background:var(--ink); padding:24px 22px 22px; }
.city-stats b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(24px,3.2vw,32px); line-height:1.02; color:var(--bone);
}
.city-stats span{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--slate-dim); line-height:1.5;
}
.method{
  border-left:3px solid var(--amber); background:rgba(224,166,74,.06);
  padding:24px 26px; margin:clamp(34px,5vw,48px) 0;
}
.method p{ font-size:15.5px; color:var(--slate); }
.method p:last-child{ margin-bottom:0; }
.method .eyebrow{ margin-bottom:14px; }
.city-links{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.city-links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--slate); border:1px solid var(--line);
  border-radius:999px; padding:9px 16px; transition:border-color .16s, color .16s;
}
.city-links a:hover{ color:var(--bone); border-color:var(--red); }

/* ============================================================
   PHOTOGRAPHY
   ============================================================ */
figure.job-photo, figure.lab-photo{ margin:0; }
figure.job-photo img, figure.lab-photo img{
  width:100%; height:auto; border:1px solid var(--line); border-radius:3px;
}
figure.job-photo figcaption, figure.lab-photo figcaption{
  margin-top:14px; font-size:13.5px; color:var(--slate-dim);
  line-height:1.55; max-width:72ch;
}
figure.lab-photo{ margin:0 0 30px; }
figure.lab-photo img{ border-radius:3px; }


/* ============================================================
   HEADER PHONE
   ============================================================ */
.head-phone{
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.08em;
  text-decoration:none; color:var(--bone); white-space:nowrap; margin-right:4px;
}
.head-phone:hover{ color:var(--red-hot); }
@media (max-width:1050px){ .head-phone.desktop-only{ display:none; } }

/* ============================================================
   FOOTER FACTS
   ============================================================ */
.foot-facts{ list-style:none; margin:20px 0 0; padding:0; }
.foot-facts li{ font-size:14px; color:var(--slate); margin-bottom:9px; line-height:1.5; }
.foot-facts a{ color:var(--slate); text-decoration:none; border-bottom:1px solid var(--line); }
.foot-facts a:hover{ color:var(--bone); border-color:var(--red); }

/* ============================================================
   REJUVENATE VS REPLACE
   ============================================================ */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:800px){ .vs{ grid-template-columns:1fr; } }
.vs-col{
  border:1px solid var(--line); border-radius:3px; padding:30px 28px 26px;
  background:var(--ink);
}
.vs-win{
  border-color:rgba(192,0,16,.55);
  background:linear-gradient(160deg, rgba(192,0,16,.14), transparent 58%), var(--ink);
}
.vs-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate-dim); margin-bottom:16px;
}
.vs-win .vs-tag{ color:var(--red); }
.vs-price{
  font-family:var(--display); font-weight:900; font-size:clamp(44px,6vw,60px);
  line-height:.9; margin:0 0 8px; color:var(--bone);
}
.vs-price span{ font-size:.4em; font-weight:700; color:var(--slate); margin-left:6px; }
.vs-avg{ font-size:14.5px; color:var(--slate); margin-bottom:22px; }
.vs-col dl{ margin:0; border-top:1px solid var(--line-soft); }
.vs-col dl > div{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.vs-col dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-dim); flex:none;
}
.vs-col dd{ margin:0; font-size:14.5px; color:#CFCCC7; text-align:right; }

/* ============================================================
   ESTIMATE CALCULATOR
   ============================================================ */
.calc{
  border:1px solid var(--line); border-radius:3px; padding:28px 26px;
  background:var(--panel);
}
.calc label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--slate); margin-bottom:10px;
}
.calc input[type=number]{
  width:100%; background:var(--ink); color:var(--bone);
  border:1px solid var(--line); border-radius:2px;
  padding:14px 15px; font-family:var(--mono); font-size:20px;
}
.calc input[type=number]:focus{ border-color:var(--red); outline:none; }
.calc input[type=range]{
  width:100%; margin:18px 0 4px; accent-color:var(--red);
}
.calc-out{
  border-top:1px solid var(--line); margin-top:20px; padding-top:22px; margin-bottom:22px;
}
.calc-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate-dim); margin-bottom:10px;
}
.calc-total{
  font-family:var(--display); font-weight:900; font-size:clamp(46px,7vw,66px);
  line-height:.9; color:var(--red); margin:0 0 10px;
}
.calc-vs{ font-size:14.5px; color:var(--slate); margin:0; }

/* phone inside the nav is for the mobile menu only */
@media (min-width:881px){
  .nav a[href^="tel:"]{ display:none; }
  .nav{ gap:22px; }
  .nav a{ font-size:11.5px; letter-spacing:.11em; white-space:nowrap; }
  .head-cta{ font-size:14px; padding:11px 16px 9px; white-space:nowrap; }
}
@media (max-width:1180px){ .head-phone.desktop-only{ display:none; } }