/* Trustworthy Restoration — Brand stylesheet
   Brand: Orange + White, Inter typeface
   Tokens locked in :root, mobile-first responsive
*/

:root {
  --color-primary: #F47C20;
  --color-primary-dark: #DB6E1D;
  --color-primary-light: #F58D3F;
  --color-text: #2D2D2D;
  --color-body: #4A4A4A;
  --color-bg: #FFFFFF;
  --color-surface: #F2F4F7;          /* light blue-gray surface */
  --color-cream: #FBF7F1;            /* warm cream */
  --color-tan: #F2E6D4;              /* warm tan accent */
  --color-tan-text: #4A3A22;         /* readable text on tan */
  --color-navy: #11243C;             /* deep navy for CTA bands */
  --color-navy-text: #F4F8FF;        /* readable text on navy */
  --color-border: #E2E6EE;
  --color-overlay: rgba(0,0,0,0.55);
  --color-emergency: #C0331C;        /* emergency accent — CTAs only */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container: 1200px;
  --container-narrow: 920px;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.10);
  --header-stack: 120px;             /* announcement bar + sticky header reserve */
}

/* Reset */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.65; color: var(--color-body); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--color-primary-dark); }
h1,h2,h3,h4,h5,h6 { color: var(--color-text); font-weight: 700; line-height: 1.2; margin: 0 0 0.6em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
ul,ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }
hr { border: none; border-top: 1px solid var(--color-border); margin: 3rem 0; }

/* Containers */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

/* Buttons */
.btn { display: inline-block; padding: 14px 28px; border-radius: var(--radius); font-weight: 600; font-size: 1rem; text-align: center; cursor: pointer; border: 2px solid transparent; transition: all .15s ease; line-height: 1.2; }
.btn-primary { background: var(--color-primary); color: #fff !important; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff !important; }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn-outline:hover { background: var(--color-text); color: #fff !important; }
.btn-outline-white { background: transparent; color: #fff !important; border-color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--color-text) !important; }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; }

/* Announcement bar */
.announce-bar { background: var(--color-text); color: #fff; font-size: 0.88rem; padding: 8px 0; text-align: center; }
.announce-bar a { color: var(--color-primary-light); font-weight: 600; }

/* Header — positioning context for centered mega panels. */
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--container); margin: 0 auto; gap: 24px; }
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-link img { height: 56px; width: auto; display: block; }
.main-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: flex-end; }
.main-nav > a { color: var(--color-text); font-weight: 500; font-size: 0.95rem; padding: 8px 0; white-space: nowrap; }
.main-nav > a:hover { color: var(--color-primary); }
.header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.header-phone:hover { color: var(--color-primary); }
.header-phone .phone-icon { width: 18px; height: 18px; flex-shrink: 0; }
.header-cta .btn { white-space: nowrap; }
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); margin: 5px 0; transition: all .2s; }

/* Mobile menu */
.mobile-menu { position: fixed; top: 0; right: -100%; width: min(360px, 90vw); height: 100vh; background: #fff; z-index: 2000; padding: 24px; box-shadow: -4px 0 24px rgba(0,0,0,0.15); transition: right .3s ease; overflow-y: auto; }
.mobile-menu.is-open { right: 0; }
.mobile-menu-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--color-text); }
.mobile-menu-inner { padding-top: 48px; }
.mobile-menu-inner a { display: block; padding: 12px 0; color: var(--color-text); font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--color-border); }
.mobile-menu-inner a:hover { color: var(--color-primary); }
.mobile-menu-inner .mobile-cta { margin-top: 20px; }
.mobile-menu-inner details { border-bottom: 1px solid var(--color-border); }
.mobile-menu-inner details summary { padding: 14px 4px; min-height: 44px; align-items: center; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.mobile-menu-inner details summary::-webkit-details-marker { display: none; }
.mobile-menu-inner details summary::after { content: '+'; font-size: 1.3rem; }
.mobile-menu-inner details[open] summary::after { content: '−'; }
.mobile-menu-inner details a { padding: 8px 16px; border: none; font-size: 0.95rem; }
.mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden; transition: all .25s ease; }
.mobile-overlay.is-open { opacity: 1; visibility: visible; }

/* Hero */
.hero { position: relative; padding: 120px 0 80px; color: #fff; background: linear-gradient(120deg, #2D2D2D, #1a1a1a); overflow: hidden; }
.hero.has-bg { background-color: #1a1a1a; }
.hero.has-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(45,45,45,0.85), rgba(0,0,0,0.6)), var(--bg-image, none); background-size: cover; background-position: center; z-index: 0; }
.hero > .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 820px; }
.hero p.lede { font-size: 1.15rem; color: rgba(255,255,255,0.9); max-width: 720px; margin-bottom: 1.6rem; }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1rem; }
.hero .hero-actions .btn { box-shadow: var(--shadow-md); }
.hero .hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; font-size: 0.92rem; color: rgba(255,255,255,0.85); }
.hero .hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero .hero-trust span::before { content: '✓'; color: var(--color-primary); font-weight: 700; }

/* Compact hero (interior pages) */
.hero-compact { padding: 90px 0 60px; }
.hero-compact h1 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); }

/* Breadcrumbs */
.breadcrumbs { font-size: 0.88rem; color: rgba(255,255,255,0.85); margin-bottom: 1rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; opacity: 0.6; }
.breadcrumbs a { color: rgba(255,255,255,0.85); }
.breadcrumbs a:hover { color: var(--color-primary-light); }

/* Sections */
.section { padding: 70px 0; }
.section-tight { padding: 50px 0; }
.section-surface { background: var(--color-surface); }
.section-dark { background: var(--color-text); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.85); }
.section-header { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.section-header .eyebrow { color: var(--color-primary); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 8px; display: block; }

/* Quick answer (AEO) */
.quick-answer { background: #FFF6EE; border-left: 4px solid var(--color-primary); padding: 22px 26px; margin: 24px 0 32px; border-radius: 0 var(--radius) var(--radius) 0; }
.quick-answer h2 { font-size: 1.1rem; margin-bottom: 8px; color: var(--color-primary-dark); }
.quick-answer p { margin: 0; color: var(--color-text); font-size: 1.02rem; }

/* Key takeaways */
.key-takeaways { background: var(--color-surface); border: 1px solid var(--color-border); padding: 24px 28px; border-radius: var(--radius-lg); margin: 0 0 32px; }
.key-takeaways h2 { font-size: 1.1rem; margin-bottom: 12px; color: var(--color-text); }
.key-takeaways ul { margin: 0; padding-left: 1.2em; }
.key-takeaways li { margin-bottom: 6px; }
.topic-browser { background: #fff; }
.topic-browser-intro { margin: 0 0 18px; color: var(--color-muted); font-size: 0.96rem; }
.topic-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, max-content)); gap: 10px; align-items: center; }
.topic-filter-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-weight: 800; line-height: 1; box-shadow: var(--shadow-sm); }
.topic-filter-pill span { white-space: nowrap; }
.topic-filter-pill strong { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: #fff; color: var(--color-primary-dark); font-size: 0.78rem; }
.topic-filter-pill:hover { border-color: var(--color-primary); color: var(--color-primary-dark); transform: translateY(-1px); }
.topic-filter-pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); }
.topic-filter-pill.is-active strong { background: rgba(255,255,255,0.2); color: #fff; }
.blog-filter-status { margin: 8px auto 0; color: var(--color-muted); font-size: 0.95rem; }

@media (max-width: 520px) {
  .topic-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-filter-pill { width: 100%; padding: 10px 12px; font-size: 0.83rem; }
  .topic-filter-pill span { white-space: normal; text-align: left; }
  .topic-filter-pill strong { min-width: 24px; height: 24px; padding: 0 6px; font-size: 0.72rem; }
}

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 0; }
.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; transition: all .2s ease; box-shadow: var(--shadow-sm); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--color-body); font-size: 0.95rem; margin-bottom: 12px; }
.card .card-link { font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 4px; }
.card .card-link::after { content: '→'; transition: transform .15s ease; }
.card:hover .card-link::after { transform: translateX(3px); }
.card .card-icon { width: 44px; height: 44px; background: #FFF1E2; color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; margin-bottom: 16px; }

/* Service card with image — used on homepage, /services/, and city pages.
   Image lives flush at the top of the card; content sits below in its own
   padded body. The whole card is clickable via the linked image. */
.service-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.service-card-media { display: block; aspect-ratio: 16 / 9; background: var(--color-surface); overflow: hidden; }
.service-card-media picture, .service-card-media img { display: block; width: 100%; height: 100%; }
.service-card-media img { object-fit: cover; transition: transform .3s ease; }
.service-card:hover .service-card-media img { transform: scale(1.04); }
.service-card-body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.service-card-body .card-icon { margin-bottom: 14px; }
.service-card-body p { flex: 1; }

/* Feature row */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-row.reverse > :first-child { order: 2; }
.feature-row img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.feature-row .feature-content h2 { margin-bottom: 14px; }
.feature-row .feature-content ul { padding-left: 0; list-style: none; }
.feature-row .feature-content li { padding-left: 28px; position: relative; margin-bottom: 10px; }
.feature-row .feature-content li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; color: var(--color-primary); font-weight: 800; }

/* Stats */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; }
.stat { padding: 16px; }
.stat .stat-num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 6px; display: block; }
.stat .stat-label { font-size: 0.92rem; color: var(--color-body); }
.section-dark .stat .stat-label { color: rgba(255,255,255,0.85); }

/* CTA section */
.cta-section { background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark)); color: #fff; padding: 64px 0; text-align: center; }
.cta-section h2 { color: #fff; }
.cta-section p { color: rgba(255,255,255,0.95); margin-bottom: 1.5rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.cta-section .btn { background: #fff; color: var(--color-primary-dark) !important; border-color: #fff; }
.cta-section .btn:hover { background: var(--color-text); color: #fff !important; border-color: var(--color-text); }
.cta-section .btn-outline-white { background: transparent; color: #fff !important; }
.cta-section .btn-outline-white:hover { background: #fff; color: var(--color-primary-dark) !important; }

/* Inline CTA box */
.inline-cta { background: var(--color-text); color: #fff; padding: 28px 32px; border-radius: var(--radius-lg); margin: 36px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.inline-cta h3 { color: #fff; margin: 0 0 4px; font-size: 1.2rem; }
.inline-cta p { color: rgba(255,255,255,0.85); margin: 0; }
.inline-cta .btn { flex-shrink: 0; }

/* Inline FAQ */
.inline-faq { background: #FFF6EE; border-left: 3px solid var(--color-primary); padding: 18px 22px; margin: 22px 0; border-radius: 0 var(--radius) var(--radius) 0; }
.inline-faq h3 { font-size: 1rem; margin-bottom: 6px; color: var(--color-text); }
.inline-faq p { margin: 0; font-size: 0.96rem; }

/* FAQ list */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); padding: 4px 0; }
.faq-item details { padding: 22px 0; }
.faq-item summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--color-text); padding: 4px 0; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--color-primary); flex-shrink: 0; transition: transform .15s; }
.faq-item details[open] summary::after { content: '−'; }
.faq-item summary h3 { display: inline; font-size: 1rem; font-weight: 600; margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.faq-item details > p, .faq-item details > ul { margin-top: 12px; color: var(--color-body); }

/* Keyword bullets */
.keyword-bullets { background: var(--color-surface); border-radius: var(--radius-lg); padding: 22px 28px; margin: 24px 0; }
.keyword-bullets h3 { font-size: 1rem; margin-bottom: 10px; }
.keyword-bullets ul { margin: 0; padding-left: 1.2em; }
.keyword-bullets li { margin-bottom: 6px; font-size: 0.95rem; }

/* TOC */
.toc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 24px; margin: 0 0 32px; }
.toc h3 { font-size: 0.95rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-body); }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin-bottom: 4px; font-size: 0.95rem; }
.toc a { color: var(--color-text); }
.toc a:hover { color: var(--color-primary); }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.95rem; }
th, td { border: 1px solid var(--color-border); padding: 10px 14px; text-align: left; }
th { background: var(--color-surface); font-weight: 600; }

/* Forms */
.contact-form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--color-text); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: 1rem; color: var(--color-text); transition: border-color .15s ease; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(244,124,32,0.15); }
.form-group textarea { min-height: 120px; resize: vertical; }

/* Article body */
.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { margin-top: 2.4em; }
.article-body h3 { margin-top: 1.8em; }
.article-body img { border-radius: var(--radius-lg); margin: 24px 0; }
.article-meta { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 18px; font-size: 0.9rem; color: var(--color-body); margin-bottom: 24px; }
.article-meta .article-cat { color: var(--color-primary); font-weight: 600; }

/* Blog grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.blog-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: all .2s ease; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.blog-card-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.04); }
.blog-card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card-body .article-cat { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.blog-card-body h3 { font-size: 1.1rem; margin: 8px 0 10px; }
.blog-card-body h3 a { color: var(--color-text); }
.blog-card-body h3 a:hover { color: var(--color-primary); }
.blog-card-body p { font-size: 0.94rem; flex: 1; }
.blog-card-body .read-more { color: var(--color-primary); font-weight: 600; font-size: 0.92rem; margin-top: 8px; }
.blog-card[hidden] { display: none !important; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.pagination-link { min-width: 42px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; color: var(--color-text); font-weight: 700; text-align: center; box-shadow: var(--shadow-sm); }
.pagination-link:hover, .pagination-link[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination-prev, .pagination-next { min-width: 132px; }

/* City list */
.city-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; padding-left: 0; list-style: none; }
.city-list-grid li { margin: 0; }
.city-list-grid a { display: block; padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); font-weight: 500; transition: all .15s ease; font-size: 0.95rem; }
.city-list-grid a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Footer */
.site-footer { background: var(--color-navy); color: rgba(255,255,255,0.78); padding: 64px 0 28px; }
.site-footer h4 { color: #fff; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 16px; font-weight: 700; }
.site-footer .footer-subhead { margin-top: 22px; }
.site-footer a { color: rgba(255,255,255,0.78); transition: color .15s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-primary-light); }
.site-footer a:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; border-radius: 2px; }

/* Brand row: logo+tagline on the left, NAP card on the right */
.footer-brand-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: stretch; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo-badge { display: inline-flex; align-items: center; justify-content: center; background: #fff; padding: 14px 22px; border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,0.25); align-self: flex-start; }
.footer-logo-badge img { height: 56px; width: auto; display: block; filter: none; margin: 0; }
.footer-tagline { font-size: 0.95rem; color: rgba(255,255,255,0.78); margin: 0; max-width: 52ch; line-height: 1.6; }

.footer-nap { list-style: none; padding: 22px; margin: 0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.footer-nap-item { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.footer-nap-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary-light); font-weight: 700; }
.footer-nap-value { font-size: 0.95rem; color: #fff; font-weight: 500; word-break: break-word; overflow-wrap: anywhere; }
.footer-nap-value[href]:hover { color: var(--color-primary-light); }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; font-size: 0.92rem; line-height: 1.5; }
.footer-col { min-width: 0; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.footer-bottom-left { display: flex; flex-direction: column; gap: 4px; }
.footer-bottom-nap { color: rgba(255,255,255,0.5); }
.footer-bottom-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.footer-credit { font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.footer-credit a { color: rgba(255,255,255,0.85); font-weight: 600; }
.footer-credit a:hover { color: var(--color-primary-light); }

/* Floating mobile call CTA */
.floating-cta { display: none; position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 900; }
.floating-cta a { display: block; background: var(--color-primary); color: #fff !important; text-align: center; padding: 14px 18px; border-radius: 50px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.floating-cta a:hover { background: var(--color-primary-dark); }

/* Mega menu — desktop dropdowns. Click-to-open is the primary interaction:
   panels open on click and stay open until another menu trigger is clicked, an
   outside click happens, or Escape is pressed. Hover/focus are enhancements.
   Panels are positioned absolutely against .site-header (its sticky position
   makes it the containing block) and centered to the viewport with
   left: 50%; transform: translateX(-50%) so they never get pushed off-screen
   regardless of which trigger is clicked. The wrapper extends its hit-target
   downward and the panel itself has an invisible bridge above its visible top
   so the cursor can travel from the trigger into the panel without hover loss. */
.btn-sm { padding: 9px 16px; font-size: 0.88rem; }
.nav-mega { position: relative; display: inline-flex; align-items: center; padding: 14px 0; }
.nav-mega-toggle { background: none; border: none; color: var(--color-text); font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; padding: 8px 0; display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; }
.nav-mega-toggle::after { content: '▾'; font-size: 0.75rem; margin-left: 4px; transition: transform .15s ease; }
.nav-mega-toggle:hover { color: var(--color-primary); }
.nav-mega-toggle[aria-expanded="true"] { color: var(--color-primary); }
.nav-mega-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Panels: hidden by default. Positioning is keyed to the sticky .site-header so
   left: 50% is 50% of the viewport. The panel sits flush below the header (top:
   100% of the header), and an invisible 12px bridge above the visible panel
   absorbs the gap between the trigger row and the panel — so :hover on
   .nav-mega never breaks while the cursor is in transit. */
.nav-mega-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(820px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  margin: 0;
  z-index: 1001;
  max-height: calc(100vh - var(--header-stack));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 28px;
}
/* Invisible bridge from header bottom into panel — keeps :hover continuous
   when the pointer crosses the visual gap between the trigger and the panel.
   The bridge is part of the panel, so it inherits hover state via the parent
   wrapper. It must NOT be clickable in a way that swallows outside clicks —
   pointer-events:auto is fine because it's inside .nav-mega-panel. */
.nav-mega-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}
/* Services panel is narrower; areas panel uses the wider default and is
   re-asserted below to override any earlier non-clamped width rule. */
.nav-mega-panel#mega-services { width: min(720px, calc(100vw - 32px)); }
.nav-mega-panel.mega-panel-areas { width: min(820px, calc(100vw - 32px)); }

/* Show panel when:
   - it's been click-toggled open (.is-open on the wrapper or panel),
   - the trigger has aria-expanded="true",
   - keyboard focus is inside the wrapper (enhancement),
   - the cursor is over the wrapper or the panel itself (enhancement).
   Click-driven .is-open is the primary, persistent state. */
.nav-mega.is-open > .nav-mega-panel,
.nav-mega-panel.is-open,
.nav-mega-toggle[aria-expanded="true"] + .nav-mega-panel,
.nav-mega:focus-within > .nav-mega-panel,
.nav-mega:hover > .nav-mega-panel,
.nav-mega-panel:hover { display: block; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.mega-grid-cities { grid-template-columns: repeat(4, 1fr); }
.mega-card { display: block; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); transition: all .15s ease; }
.mega-card:hover { border-color: var(--color-primary); background: #FFF6EE; }
.mega-card-title { display: block; font-weight: 600; color: var(--color-text); font-size: 0.95rem; }
.mega-card-desc { display: block; color: var(--color-body); font-size: 0.84rem; margin-top: 4px; }
.mega-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); margin: 0 0 8px; }
.mega-col a { display: block; padding: 4px 0; font-size: 0.88rem; color: var(--color-text); }
.mega-col a:hover { color: var(--color-primary); }
.mega-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; margin-top: 8px; background: var(--color-surface); border-radius: var(--radius); font-size: 0.92rem; color: var(--color-text); }
.mega-cta-row span { flex: 1; min-width: 200px; }
/* width for .mega-panel-areas is set above with viewport clamping; do not re-declare here */
.mega-other-row { padding: 14px 0; border-top: 1px solid var(--color-border); margin-top: 6px; }
.mega-other-row h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); margin: 0 0 8px; }
.mega-other-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.mega-other-links a { font-size: 0.88rem; color: var(--color-text); }
.mega-other-links a:hover { color: var(--color-primary); }

/* Emergency steps */
.step-list { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; background: #FFF6EE; border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius) var(--radius) 0; }
.step-num { background: var(--color-primary); color: #fff; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.step h3 { font-size: 1.05rem; margin: 0 0 4px; }
.step p { margin: 0; }

/* Timeline variant: wider pill badge so labels like "Hours 2–6" / "Day 3–5" don't clip */
.step-list-timeline { gap: 14px; }
.step-timeline { align-items: center; }
.step-timeline .step-body { flex: 1 1 auto; min-width: 0; }
.step-when {
  background: var(--color-primary);
  color: #fff;
  flex: 0 0 auto;
  min-width: 96px;
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

/* Related services / city blocks */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.related-card { display: block; padding: 18px 22px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: all .15s ease; }
.related-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.related-card-title { display: block; font-weight: 600; color: var(--color-text); font-size: 1rem; }
.related-card-desc { display: block; color: var(--color-body); font-size: 0.88rem; margin-top: 4px; }

/* External resources box */
.external-resources { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 22px; margin: 24px 0; }
.external-resources h3 { font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-body); margin-bottom: 8px; }
.external-resources ul { margin: 0; padding-left: 1.2em; }
.external-resources li { font-size: 0.92rem; margin-bottom: 4px; }

/* Form status */
.form-status { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); font-size: 0.92rem; display: none; }
.form-status.is-success { display: block; background: #E6F7E9; color: #1F5E2A; border: 1px solid #B6E0BD; }
.form-status.is-error { display: block; background: #FDECEC; color: #8E1D1D; border: 1px solid #F5C2C2; }

/* Footer emergency band */
.footer-emergency { background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark)); color: #fff; padding: 36px 0; }
.footer-emergency-inner { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: center; }
.footer-emergency h2 { color: #fff; margin: 0 0 6px; font-size: 1.45rem; }
.footer-emergency p { color: rgba(255,255,255,0.95); margin: 0; }
.footer-emergency-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.footer-emergency-actions .btn-primary { background: #fff; color: var(--color-primary-dark) !important; border-color: #fff; }
.footer-emergency-actions .btn-primary:hover { background: var(--color-text); color: #fff !important; border-color: var(--color-text); }
.footer-emergency-actions .btn-outline-white:hover { background: #fff; color: var(--color-primary-dark) !important; }

/* Mega footer */
.mega-footer .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.mega-footer h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.mega-footer .trust-list { list-style: none; padding: 0; }
.mega-footer .trust-list li { padding-left: 18px; position: relative; font-size: 0.88rem; }
.mega-footer .trust-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-primary-light); font-weight: 700; }

/* Section variants — alternating palette across pages */
.section-white { background: #ffffff; }
.section-navy {
  background: linear-gradient(135deg, var(--color-navy) 0%, #0A1A2E 100%);
  color: var(--color-navy-text);
}
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy p, .section-navy li { color: rgba(255,255,255,0.92); }
.section-navy a { color: var(--color-primary-light); }
.section-navy a:hover { color: #fff; text-decoration: underline; }
.section-tan { background: var(--color-tan); color: var(--color-tan-text); }
.section-tan h1, .section-tan h2, .section-tan h3 { color: #2A1F0E; }
.section-tan p, .section-tan li { color: var(--color-tan-text); }
.section-tan .eyebrow { color: var(--color-primary-dark); }
.section-cream { background: var(--color-cream); }

/* Split-media block — image + content side by side */
.split-media { gap: 48px; }
.split-media .split-media-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-surface); }
.split-media .split-media-image picture,
.split-media .split-media-image img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

/* Area callout — local image panel anchoring city/combo pages */
.area-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: rgba(255,255,255,0.55);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-md);
}
.area-callout-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}
.area-callout-media picture, .area-callout-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; aspect-ratio: 4 / 3;
}
.area-callout-body .eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}
.area-callout-body h2 { margin-bottom: 12px; }
.area-callout-body .hero-actions { margin-top: 18px; }

/* Response cards — local proof grid */
.response-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.response-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.response-card .response-num {
  font-size: 2rem; font-weight: 800; color: var(--color-primary);
  line-height: 1; margin-bottom: 4px;
}
.response-card .response-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text); font-weight: 700; margin-bottom: 12px;
}
.response-card p { margin: 0; font-size: 0.95rem; color: var(--color-body); }

/* Big quote band */
.big-quote {
  margin: 0 auto;
  max-width: 760px;
  padding: 0 24px;
}
.big-quote p {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.big-quote .quote-attribution {
  display: block;
  font-style: normal;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}

/* Area grid (service-area page) */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.area-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .2s ease;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.area-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.area-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface); }
.area-card-media picture, .area-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
}
.area-card:hover .area-card-media img { transform: scale(1.04); }
.area-card-body { padding: 16px 20px 18px; }
.area-card-title {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.area-card-cta {
  display: block;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Adjust quick-answer warmth on darker sections */
.section-tan .quick-answer { background: rgba(255,255,255,0.7); }
.section-navy .quick-answer { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.section-navy .quick-answer h2 { color: var(--color-primary-light); }
.section-navy .quick-answer p { color: rgba(255,255,255,0.92); }

/* Utilities */
.text-center { text-align: center; }
.muted { color: var(--color-body); font-size: 0.9rem; }
.divider-spacer { height: 28px; }

/* Responsive */
@media (max-width: 1180px) {
  .main-nav { gap: 20px; }
  .nav-mega-panel#mega-services { width: min(640px, calc(100vw - 32px)); }
  .nav-mega-panel.mega-panel-areas { width: min(760px, calc(100vw - 32px)); }
  .mega-grid-cities { grid-template-columns: repeat(2, 1fr); }
  .mega-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .footer-brand-row { grid-template-columns: 1fr; gap: 28px; }
  .footer-nap { max-width: 640px; }
}
@media (max-width: 1024px) {
  .header-inner { gap: 14px; }
  .main-nav { gap: 16px; }
  .main-nav > a { font-size: 0.9rem; }
  .header-phone { font-size: 0.95rem; }
  .nav-mega-panel#mega-services { width: min(560px, calc(100vw - 32px)); }
  .nav-mega-panel.mega-panel-areas { width: min(680px, calc(100vw - 32px)); }
}
@media (max-width: 960px) {
  .feature-row { grid-template-columns: 1fr; gap: 30px; }
  .feature-row.reverse > :first-child { order: initial; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-emergency-inner { grid-template-columns: 1fr; }
  .footer-emergency-actions { justify-content: flex-start; }
  .mega-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand-row { grid-template-columns: 1fr; }
  .footer-nap { grid-template-columns: 1fr 1fr; }
  .area-callout { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .split-media { gap: 28px; }
  /* Hide desktop nav at smaller widths to prevent crowding */
  .main-nav { display: none; }
  .header-cta .header-phone { display: none; }
  .header-cta .btn-primary { padding: 9px 16px; font-size: 0.88rem; }
  .mobile-toggle { display: block; }
}
@media (max-width: 880px) {
  /* Drop the header CTA pill to ease 760–960 crowding; the hamburger handles nav */
  .header-cta .btn-primary { display: none; }
}
@media (max-width: 760px) {
  .main-nav { display: none; }
  .header-cta .header-phone { display: none; }
  .header-cta .btn { display: none; }
  .mobile-toggle { display: block; }
  .floating-cta { display: block; }
  body { padding-bottom: 84px; }
  .hero { padding: 70px 0 50px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .mega-footer .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-bottom-right { align-items: flex-start; }
  .footer-nap { grid-template-columns: 1fr; padding: 18px; }
  .footer-logo-badge { padding: 12px 18px; }
  .footer-logo-badge img { height: 48px; }
  .inline-cta { flex-direction: column; align-items: flex-start; }
  .step { flex-direction: column; gap: 8px; }
  .step-timeline { align-items: flex-start; }
  .step-when { align-self: flex-start; min-width: 0; }
}
@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 18px; }
  .section { padding: 50px 0; }
  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: 1.9rem; }
  .hero p.lede { font-size: 1.05rem; }
  .hero .hero-actions .btn,
  .cta-section .hero-actions .btn,
  .footer-emergency-actions .btn { width: 100%; }
  .hero .hero-trust { gap: 14px; font-size: 0.88rem; }
  .area-callout { padding: 18px; gap: 18px; }
  .logo-link img { height: 44px; }
  .contact-form { padding: 22px; }
}