/* ═══════════════════════════════════════════════════════════
   FORTRESS ROOF CO. — INNER PAGES CSS
   ═══════════════════════════════════════════════════════════ */

/* ── PAGE HERO ── */
.page-hero { padding:var(--nav-h) var(--sp-8) var(--sp-20); background:var(--bg-mid); border-bottom:1px solid var(--bdr-faint); }
.page-hero-content { max-width:700px; margin-inline:auto; text-align:center; }
.page-hero .section-eyebrow { justify-content:center; margin-bottom:var(--sp-5); }
.page-hero .deco-display { margin-bottom:var(--sp-6); }
.page-hero .body-xl { max-width:600px; margin-inline:auto; }

/* ── SHARED SECTION EYEBROW ── */
.section-eyebrow { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.eyebrow-line { width:36px; height:1.5px; background:linear-gradient(90deg,var(--gold-500),transparent); flex-shrink:0; }
.eyebrow-gem  { width:6px; height:6px; background:var(--gold-500); transform:rotate(45deg); flex-shrink:0; box-shadow:var(--gold-glow-sm); }
.eyebrow-text { font-family:var(--font-condensed); font-size:.5625rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-500); }

/* ── SERVICES PAGE ── */
.services-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:center; }
.services-hero-img  { border-radius:var(--r-3xl); overflow:hidden; border:1px solid var(--bdr-gold); box-shadow:var(--el-5); }
.services-hero-img img { width:100%; height:480px; object-fit:cover; filter:brightness(.75) saturate(.75); }
.services-nav-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:var(--sp-16); }
.svc-nav-btn {
  background:var(--bg-card); border:1px solid var(--bdr-faint); border-radius:var(--r-xl);
  padding:var(--sp-4) var(--sp-5); cursor:pointer; text-align:left; font-family:inherit;
  transition:all var(--dur-base) var(--ease-deco); display:flex; align-items:center; gap:var(--sp-3);
  color:var(--text-secondary);
}
.svc-nav-btn:hover,.svc-nav-btn.active { border-color:var(--bdr-gold); background:var(--bg-lift); color:var(--gold-300); }
.svc-nav-icon { font-size:1.1rem; flex-shrink:0; }
.svc-nav-label { font-family:var(--font-condensed); font-size:.5625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.service-detail-section { display:none; }
.service-detail-section.active { display:block; }
.service-detail-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:start; }
.service-detail-img { width:100%; height:380px; object-fit:cover; border-radius:var(--r-3xl); border:1px solid var(--bdr-gold); filter:brightness(.8) saturate(.75); }
.service-features-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.service-feature-item { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--bg-card); border:1px solid var(--bdr-faint); border-radius:var(--r-lg); font-size:.875rem; color:var(--text-secondary); font-weight:300; transition:border-color var(--dur-fast); }
.service-feature-item:hover { border-color:var(--bdr-gold); color:var(--text-primary); }
.service-feature-gem { width:6px; height:6px; background:var(--gold-500); transform:rotate(45deg); flex-shrink:0; }

/* Materials comparison */
.materials-table { width:100%; border-collapse:collapse; }
.materials-table th { font-family:var(--font-condensed); font-size:.5625rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-500); padding:var(--sp-3) var(--sp-4); text-align:left; border-bottom:1px solid var(--bdr-gold); }
.materials-table td { padding:var(--sp-4); font-size:.875rem; color:var(--text-secondary); font-weight:300; border-bottom:1px solid var(--bdr-faint); vertical-align:top; }
.materials-table tr:hover td { background:rgba(212,168,50,.03); color:var(--text-primary); }
.materials-table .mat-name { font-family:var(--font-heading); font-weight:700; color:var(--text-primary); font-size:.9375rem; }
.cost-dots { display:flex; gap:3px; }
.cdot { width:8px; height:8px; border-radius:50%; }
.cdot.on { background:var(--gold-400); }
.cdot.off { background:var(--bdr-faint); }

/* ── PROJECTS PAGE ── */
.proj-filter-bar { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-10); }
.proj-filter-btn {
  font-family:var(--font-condensed); font-size:.5625rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:var(--sp-2) var(--sp-5); border-radius:var(--r-full);
  border:1px solid var(--bdr-gold); background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all var(--dur-base) var(--ease-deco);
}
.proj-filter-btn:hover,.proj-filter-btn.active { background:rgba(212,168,50,.12); border-color:var(--bdr-bright); color:var(--gold-300); box-shadow:var(--gold-glow-sm); }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.proj-card {
  background:var(--bg-card); border:1px solid var(--bdr-gold);
  border-radius:var(--r-2xl); overflow:hidden;
  transition:all var(--dur-slow) var(--ease-out);
  position:relative;
}
.proj-card:hover { transform:translateY(-6px); box-shadow:var(--el-5); border-color:var(--bdr-bright); }
.proj-img-wrap { position:relative; overflow:hidden; }
.proj-img { width:100%; height:240px; object-fit:cover; filter:brightness(.75) saturate(.7); transition:transform var(--dur-slower) var(--ease-out), filter var(--dur-slow); }
.proj-card:hover .proj-img { transform:scale(1.06); filter:brightness(.85) saturate(.85); }
.proj-category-tag { position:absolute; top:var(--sp-4); left:var(--sp-4); }
.proj-body { padding:var(--sp-6); }
.proj-type { font-family:var(--font-condensed); font-size:.5rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-500); margin-bottom:var(--sp-2); }
.proj-title { font-family:var(--font-heading); font-size:1.1rem; font-weight:700; color:var(--text-primary); margin-bottom:var(--sp-3); transition:color var(--dur-base); }
.proj-card:hover .proj-title { color:var(--gold-300); }
.proj-desc { font-size:.8125rem; color:var(--text-secondary); line-height:1.65; font-weight:300; margin-bottom:var(--sp-5); }
.proj-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); padding-top:var(--sp-4); border-top:1px solid var(--bdr-faint); }
.proj-meta-item label { font-family:var(--font-condensed); font-size:.45rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); display:block; margin-bottom:2px; }
.proj-meta-item span { font-size:.75rem; color:var(--text-secondary); font-weight:300; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.faq-item { background:var(--bg-card); border:1px solid var(--bdr-gold); border-radius:var(--r-2xl); overflow:hidden; transition:border-color var(--dur-fast); }
.faq-item.open,.faq-item:hover { border-color:var(--bdr-bright); }
.faq-btn { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-5) var(--sp-6); cursor:pointer; font-family:var(--font-heading); font-size:.9375rem; font-weight:600; color:var(--text-secondary); width:100%; background:none; border:none; text-align:left; transition:color var(--dur-fast); }
.faq-btn:hover,.faq-item.open .faq-btn { color:var(--gold-300); }
.faq-chevron { color:var(--gold-500); flex-shrink:0; font-size:1.1rem; transition:transform var(--dur-base) var(--ease-deco); }
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; padding-inline:var(--sp-6); font-size:.9rem; color:var(--text-secondary); line-height:1.8; font-weight:300; transition:max-height var(--dur-slow) var(--ease-out), padding var(--dur-slow); }
.faq-item.open .faq-answer { max-height:500px; padding-bottom:var(--sp-6); }

/* ── ABOUT PAGE ── */
.about-hero-grid  { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:center; }
.about-hero-img   { border-radius:var(--r-3xl); overflow:hidden; border:1px solid var(--bdr-gold); box-shadow:var(--el-5); position:relative; }
.about-hero-img img { width:100%; height:500px; object-fit:cover; filter:brightness(.75) saturate(.75); }
.about-hero-badge { position:absolute; bottom:var(--sp-6); left:var(--sp-6); background:var(--bg-glass); backdrop-filter:blur(16px); border:1px solid var(--bdr-gold); border-radius:var(--r-xl); padding:var(--sp-4) var(--sp-5); }
.about-hero-badge-num { font-family:var(--font-display); font-size:1.75rem; font-weight:900; color:var(--gold-300); line-height:1; }
.about-hero-badge-label { font-family:var(--font-condensed); font-size:.5rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-top:3px; }

/* ── BLOGS PAGE ── */
.blogs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.blog-card {
  background:var(--bg-card); border:1px solid var(--bdr-gold);
  border-radius:var(--r-2xl); overflow:hidden;
  transition:all var(--dur-slow) var(--ease-out);
  position:relative;
}
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--el-5); border-color:var(--bdr-bright); }
.blog-card-image { position:relative; overflow:hidden; }
.blog-card-image img { width:100%; height:200px; object-fit:cover; filter:brightness(.75) saturate(.7); transition:transform var(--dur-slower) var(--ease-out), filter var(--dur-slow); }
.blog-card:hover .blog-card-image img { transform:scale(1.06); filter:brightness(.85) saturate(.85); }
.blog-card-date { position:absolute; top:var(--sp-4); right:var(--sp-4); background:var(--bg-glass); backdrop-filter:blur(12px); border:1px solid var(--bdr-gold); border-radius:var(--r-lg); padding:var(--sp-2) var(--sp-3); font-family:var(--font-condensed); font-size:.5rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-500); }
.blog-card-content { padding:var(--sp-6); }
.blog-card-title { font-family:var(--font-heading); font-size:1.1rem; font-weight:700; color:var(--text-primary); margin-bottom:var(--sp-3); transition:color var(--dur-base); line-height:1.3; }
.blog-card:hover .blog-card-title { color:var(--gold-300); }
.blog-card-excerpt { font-size:.8125rem; color:var(--text-secondary); line-height:1.65; font-weight:300; margin-bottom:var(--sp-4); }
.blog-card-link { font-family:var(--font-condensed); font-size:.5625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-500); text-decoration:none; transition:color var(--dur-fast); }
.blog-card-link:hover { color:var(--gold-300); }

/* ── BLOG ARTICLE PAGES ── */
.blog-content-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-8); }
.blog-article { }
.blog-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--bdr-faint); }
.blog-date { font-family: var(--font-condensed); font-size: .5625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-500); }
.blog-author { font-size: .8125rem; color: var(--text-secondary); }
.blog-image { margin-bottom: var(--sp-6); }
.blog-image img { width: 100%; height: 400px; object-fit: cover; border-radius: var(--r-2xl); }
.blog-body { margin-bottom: var(--sp-8); }
.blog-body h2 { margin: var(--sp-8) 0 var(--sp-4); }
.blog-body ul, .blog-body ol { margin: var(--sp-4) 0; padding-left: var(--sp-6); }
.blog-body li { margin-bottom: var(--sp-2); }
.blog-cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.blog-sidebar { }
.sidebar-section { margin-bottom: var(--sp-8); }
.sidebar-section h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-4); }
.sidebar-section ul { list-style: none; padding: 0; }
.sidebar-section li { margin-bottom: var(--sp-2); }
.sidebar-section a { color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast); }
.sidebar-section a:hover { color: var(--gold-300); }
.sidebar-cta { background: var(--bg-card); border: 1px solid var(--bdr-gold); border-radius: var(--r-xl); padding: var(--sp-6); }
.sidebar-cta h3 { margin-bottom: var(--sp-3); }
.sidebar-cta p { margin-bottom: var(--sp-4); font-size: .875rem; color: var(--text-secondary); }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.value-card { background:var(--bg-card); border:1px solid var(--bdr-gold); border-radius:var(--r-2xl); padding:var(--sp-8); }
.value-icon { font-size:1.75rem; margin-bottom:var(--sp-4); }
.value-title { font-family:var(--font-heading); font-size:1.0625rem; font-weight:700; color:var(--text-primary); margin-bottom:var(--sp-3); }
.value-desc { font-size:.875rem; color:var(--text-secondary); line-height:1.7; font-weight:300; }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
.team-card { background:var(--bg-card); border:1px solid var(--bdr-gold); border-radius:var(--r-2xl); overflow:hidden; transition:all var(--dur-slow) var(--ease-out); }
.team-card:hover { transform:translateY(-4px); box-shadow:var(--el-5); border-color:var(--bdr-bright); }
.team-img { width:100%; aspect-ratio:1; object-fit:cover; object-position:top; filter:brightness(.78) saturate(.65) sepia(.08); }
.team-body { padding:var(--sp-5); }
.team-name { font-family:var(--font-heading); font-size:1rem; font-weight:700; color:var(--text-primary); }
.team-role { font-family:var(--font-condensed); font-size:.5rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-500); margin-top:3px; }
.team-bio  { font-size:.8125rem; color:var(--text-secondary); line-height:1.6; margin-top:var(--sp-3); font-weight:300; }
.certs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.cert-card { background:var(--bg-card); border:1px solid var(--bdr-gold); border-radius:var(--r-2xl); padding:var(--sp-6); text-align:center; transition:all var(--dur-base) var(--ease-deco); }
.cert-card:hover { border-color:var(--bdr-bright); box-shadow:var(--gold-glow-sm); transform:translateY(-3px); }
.cert-icon { font-size:2rem; margin-bottom:var(--sp-3); }
.cert-name { font-family:var(--font-heading); font-size:.875rem; font-weight:700; color:var(--text-primary); margin-bottom:var(--sp-2); }
.cert-desc { font-size:.75rem; color:var(--text-secondary); line-height:1.5; font-weight:300; }

/* ── CONTACT PAGE ── */
.contact-layout { display:grid; grid-template-columns:1fr 1.6fr; gap:var(--sp-12); align-items:start; }
.contact-info-card { background:var(--bg-card); border:1px solid var(--bdr-gold); border-radius:var(--r-2xl); padding:var(--sp-8); }
.contact-info-item { display:flex; align-items:flex-start; gap:var(--sp-4); padding-block:var(--sp-5); border-bottom:1px solid var(--bdr-faint); }
.contact-info-item:last-child { border-bottom:none; padding-bottom:0; }
.contact-icon { width:44px; height:44px; border-radius:var(--r-xl); background:rgba(212,168,50,.1); border:1px solid var(--bdr-gold); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.contact-label { font-family:var(--font-condensed); font-size:.5rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-500); margin-bottom:4px; }
.contact-value { font-size:.9375rem; color:var(--text-primary); font-weight:300; line-height:1.55; }
.contact-value a { color:var(--gold-400); }
.contact-form-card { background:var(--bg-card); border:1px solid var(--bdr-gold); border-radius:var(--r-2xl); padding:var(--sp-8); }
.contact-form { display:flex; flex-direction:column; gap:var(--sp-4); }
.emergency-banner { background:rgba(192,57,43,.1); border:1px solid rgba(192,57,43,.35); border-radius:var(--r-2xl); padding:var(--sp-5) var(--sp-6); display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.emergency-icon { font-size:1.75rem; flex-shrink:0; }
.emergency-title { font-family:var(--font-heading); font-size:1rem; font-weight:700; color:#e74c3c; margin-bottom:4px; }
.emergency-sub { font-size:.8125rem; color:var(--text-secondary); font-weight:300; }
.hours-table { width:100%; }
.hours-row { display:flex; justify-content:space-between; align-items:center; padding:var(--sp-3) 0; border-bottom:1px solid var(--bdr-faint); font-size:.8125rem; }
.hours-row:last-child { border-bottom:none; }
.hours-day { color:var(--text-secondary); font-weight:300; }
.hours-time { color:var(--text-primary); font-weight:600; font-family:var(--font-condensed); letter-spacing:.04em; }
.hours-time.closed { color:var(--text-faint); }
.map-placeholder { background:var(--bg-card); border:1px solid var(--bdr-gold); border-radius:var(--r-2xl); height:300px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-12); }

/* ── LEGAL PAGES ── */
.legal-layout { display:grid; grid-template-columns:220px 1fr; gap:var(--sp-10); align-items:start; }
.legal-toc { position:sticky; top:calc(var(--nav-h)+var(--sp-6)); background:var(--bg-card); border:1px solid var(--bdr-gold); border-radius:var(--r-2xl); padding:var(--sp-5); }
.legal-toc-title { font-family:var(--font-condensed); font-size:.5rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-600); margin-bottom:var(--sp-4); }
.legal-toc-link { display:block; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); font-family:var(--font-condensed); font-size:.5625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); transition:all var(--dur-fast); }
.legal-toc-link:hover { background:rgba(212,168,50,.08); color:var(--gold-400); }
.legal-content h2 { font-family:var(--font-heading); font-size:clamp(1.2rem,2vw,1.625rem); font-weight:700; color:var(--text-primary); margin-top:var(--sp-10); margin-bottom:var(--sp-4); padding-bottom:var(--sp-3); border-bottom:1px solid var(--bdr-faint); scroll-margin-top:calc(var(--nav-h)+var(--sp-6)); }
.legal-content h2:first-child { margin-top:0; }
.legal-content h3 { font-family:var(--font-heading); font-size:1rem; font-weight:700; color:var(--text-primary); margin-top:var(--sp-6); margin-bottom:var(--sp-3); }
.legal-content p { font-size:.875rem; color:var(--text-secondary); line-height:1.8; margin-bottom:var(--sp-4); font-weight:300; }
.legal-content ul { padding-left:var(--sp-5); margin-bottom:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
.legal-content li { font-size:.875rem; color:var(--text-secondary); line-height:1.65; list-style:disc; font-weight:300; }
.legal-content a { color:var(--gold-400); text-decoration:underline; text-underline-offset:2px; }
.legal-meta { background:rgba(212,168,50,.05); border:1px solid var(--bdr-gold); border-radius:var(--r-xl); padding:var(--sp-5) var(--sp-6); margin-bottom:var(--sp-8); font-size:.8125rem; color:var(--text-secondary); line-height:1.65; font-weight:300; }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .legal-layout { grid-template-columns:1fr; }
  .legal-toc { position:static; display:flex; flex-wrap:wrap; gap:var(--sp-2); }
  .services-hero-grid,.about-hero-grid { grid-template-columns:1fr; }
  .service-detail-layout { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .certs-grid { grid-template-columns:repeat(2,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .projects-grid { grid-template-columns:repeat(2,1fr); }
  .services-nav-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .projects-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .values-grid { grid-template-columns:1fr; }
  .certs-grid { grid-template-columns:repeat(2,1fr); }
  .services-nav-grid { grid-template-columns:1fr 1fr; }
  .about-hero-img img,.services-hero-img img { height:300px; }
}
@media(max-width:480px){
  .team-grid { grid-template-columns:1fr; }
  .certs-grid { grid-template-columns:1fr; }
  .services-nav-grid { grid-template-columns:1fr; }
}