/* =========================================================================
   Water Damage Restoration Fort Lauderdale FL — Site-wide Stylesheet
   Design system translated from the approved Stitch UI concept (colors,
   type scale, spacing, radius tokens) into plain, production CSS — no
   runtime CSS framework, no Tailwind CDN, for real-world page speed.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Color */
  --color-primary: #00342f;          /* deep teal - headings, primary text accents */
  --color-primary-container: #0f4c45;
  --color-on-primary: #ffffff;
  --color-secondary: #bb0112;        /* call-to-action red */
  --color-secondary-container: #a00010;
  --color-on-secondary: #ffffff;
  --color-tertiary: #00304c;
  --color-background: #faf8ff;
  --color-surface: #ffffff;
  --color-surface-container-low: #f6f5ff;
  --color-surface-container: #eaedff;
  --color-surface-container-high: #e2e7ff;
  --color-on-surface: #131b2e;
  --color-on-surface-variant: #404947;
  --color-outline: #707977;
  --color-outline-variant: #bfc8c6;

  /* Type */
  --font-display: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", Arial, sans-serif;
  --fs-display: clamp(2.1rem, 4vw + 1rem, 3.25rem);
  --fs-h1: var(--fs-display);
  --fs-h2: clamp(1.5rem, 2vw + 1rem, 2.1rem);
  --fs-h3: 1.2rem;
  --fs-body-lg: 1.1rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.9rem;
  --fs-label: 0.85rem;

  /* Spacing scale */
  --sp-2xs: .25rem; --sp-xs: .5rem; --sp-sm: .75rem; --sp-md: 1rem;
  --sp-lg: 1.5rem; --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4rem; --sp-4xl: 6rem;

  --radius: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 16px rgba(15,23,42,.10);
  --max-w: 75rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0; padding: 0;
  overflow-x: hidden; /* safety net: nothing on the page should ever force horizontal scroll */
  max-width: 100vw;
  padding-top: 5rem; /* offset for the fixed .site-header (height: 5rem) so top-of-page content never tucks underneath it */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-on-surface);
  background: var(--color-background);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--color-primary); margin: 0 0 .5em; line-height: 1.2; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-md); }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.section { padding: var(--sp-3xl) 0; }
.section--alt { background: var(--color-surface-container-low); }
.section__head { max-width: 42rem; margin-bottom: var(--sp-xl); }
.section__head h2 { font-size: var(--fs-h2); }
.section__head p { color: var(--color-on-surface-variant); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-primary);
  margin-bottom: var(--sp-sm);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
}
.site-header__inner {
  height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
}
.brand { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-display); }
.brand strong { color: var(--color-primary); font-size: 1.05rem; }
.brand span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-outline); }
.brand__logo { display: block; height: 2.65rem; width: auto; }
@media (min-width: 640px) { .brand__logo { height: 3.1rem; } }
.main-nav { display: none; gap: var(--sp-md); }
@media (min-width: 1080px) { .main-nav { display: flex; align-items: center; } }
.main-nav > a {
  font-size: var(--fs-label); font-weight: 600; color: var(--color-on-surface-variant);
  padding: .4em; transition: color .15s;
}
.main-nav > a:hover, .main-nav > a[aria-current="page"] { color: var(--color-primary); }

/* ---------- Nav dropdowns (Services / Service Areas / Locations) ---------- */
.nav-item { position: relative; }
.nav-item__trigger {
  display: inline-flex; align-items: center; gap: .3em;
  font-family: inherit; font-size: var(--fs-label); font-weight: 600; color: var(--color-on-surface-variant);
  background: none; border: none; padding: .4em; cursor: pointer; transition: color .15s;
}
.nav-item__trigger:hover, .nav-item__trigger.is-current { color: var(--color-primary); }
.nav-item__trigger .nav-caret { transition: transform .15s; flex-shrink: 0; }
.nav-item:hover .nav-item__trigger .nav-caret, .nav-item.is-open .nav-item__trigger .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: .5rem; min-width: 15rem;
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-md);
  border: 1px solid var(--color-outline-variant); padding: var(--sp-sm);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 60;
}
.nav-item:hover .nav-dropdown, .nav-item.is-open .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
  display: block; padding: .55em .7em; border-radius: calc(var(--radius) - 4px);
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--color-on-surface-variant);
  transition: background .15s, color .15s;
}
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { background: var(--color-surface-container-low); color: var(--color-primary); }
.nav-dropdown__featured {
  display: block; padding: .65em .7em; margin-bottom: .35em; border-radius: calc(var(--radius) - 4px);
  background: var(--color-surface-container-low);
}
.nav-dropdown__featured strong { display: block; font-size: var(--fs-body-sm); color: var(--color-primary); }
.nav-dropdown__featured span { display: block; font-size: .78rem; font-weight: 500; color: var(--color-on-surface-variant); margin-top: .1em; }
.nav-dropdown__divider { height: 1px; background: var(--color-outline-variant); margin: .4em .3em; }
.nav-dropdown--wide { min-width: 34rem; column-count: 2; column-gap: .25rem; }
.nav-dropdown--wide a { break-inside: avoid; }

/* Mobile nav groups (Services / Service Areas / Locations accordions) */
.mobile-nav__group { border-bottom: 1px solid var(--color-outline-variant); }
.mobile-nav__trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: inherit; font-size: 1em; font-weight: 600; color: var(--color-on-surface);
  background: none; border: none; padding: var(--sp-md); cursor: pointer; text-align: left;
}
.mobile-nav__trigger.is-current { color: var(--color-primary); }
.mobile-nav__trigger .nav-caret { transition: transform .15s; }
.mobile-nav__trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.mobile-nav__panel { display: none; flex-direction: column; background: var(--color-surface-container-low); }
.mobile-nav__panel.is-open { display: flex; }
.mobile-nav__panel a { padding: .75em var(--sp-md) .75em calc(var(--sp-md) * 1.5); font-weight: 500; font-size: .95em; border-bottom: 1px solid var(--color-outline-variant); }
.mobile-nav__panel a:last-child { border-bottom: none; }
.mobile-nav__panel a[aria-current="page"] { color: var(--color-primary); }
.header-actions { display: flex; align-items: center; gap: var(--sp-md); }
/* The header's own call button is redundant with the sticky bottom call bar
   below 1080px (same breakpoint the sticky bar itself uses), and had no room
   to sit next to the hamburger menu on phones anyway - so it only shows once
   there's a full desktop nav to sit in. */
.btn-call[data-header-call] { display: none; }
@media (min-width: 1080px) { .btn-call[data-header-call] { display: inline-flex; } }
.badge-live {
  display: none; align-items: center; gap: .4em; padding: .35em .8em;
  background: var(--color-surface-container); border-radius: var(--radius-full);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em;
}
@media (min-width: 768px) { .badge-live { display: inline-flex; } }
.pulse-dot { position: relative; width: 8px; height: 8px; }
.pulse-dot::before, .pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-secondary);
}
.pulse-dot::before { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.6); opacity: 0; } }

.btn-call {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--color-secondary); color: var(--color-on-secondary);
  padding: .7em 1.3em; border-radius: var(--radius); font-weight: 700; font-size: var(--fs-label);
  box-shadow: var(--shadow-sm); transition: background .15s, box-shadow .15s;
  max-width: 100%; white-space: normal; text-align: left;
}
/* Long CTA labels ("Call ... for Immediate Dispatch") only get to stay on one
   line once there's room for them - on narrow phones they wrap to 2 lines
   instead of forcing the button (and its grid/flex column) wider than the
   viewport, which was causing sitewide horizontal scroll on mobile. */
@media (min-width: 480px) { .btn-call { white-space: nowrap; } }
.btn-call:hover { background: var(--color-secondary-container); box-shadow: var(--shadow-md); }
.nav-toggle { display: inline-flex; background: none; border: none; padding: .4em; }
@media (min-width: 1080px) { .nav-toggle { display: none; } }
.mobile-nav {
  display: none; flex-direction: column; gap: 0; background: var(--color-surface);
  border-top: 1px solid var(--color-outline-variant);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav > a { padding: var(--sp-md); border-bottom: 1px solid var(--color-outline-variant); font-weight: 600; }
.mobile-nav > a[aria-current="page"] { color: var(--color-primary); }
@media (min-width: 1080px) { .mobile-nav { display: none !important; } }

/* ---------- Hero ---------- */
.hero { padding-top: var(--sp-xl); padding-bottom: var(--sp-2xl); background: var(--color-surface); }
.hero__grid { display: grid; gap: var(--sp-xl); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 7fr 5fr; } }
.hero h1 { font-size: var(--fs-h1); letter-spacing: -.02em; }
.hero__lede { font-size: var(--fs-body-lg); color: var(--color-on-surface-variant); max-width: 42rem; }
.badge-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); margin-top: var(--sp-md); }
@media (min-width: 640px) { .badge-row { grid-template-columns: repeat(4, 1fr); } }
.badge-row__item {
  display: flex; align-items: flex-start; gap: .5em; padding: var(--sp-sm);
  background: var(--color-surface); border: 1px solid var(--color-outline-variant); border-radius: var(--radius);
  font-size: var(--fs-body-sm); font-weight: 600;
}
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; height: 22rem; object-fit: cover; }
@media (min-width: 1024px) { .hero__media img { height: 26rem; } }

/* ---------- Hero, centered / full-bleed background-image variant ----------
   Used for the homepage (and, going forward, other pages) hero: full-width
   background photo, centered text, sized to fit the first viewport (the
   "fold") on both mobile and desktop so only the hero shows on load and
   everything else needs a scroll. Mobile subtracts the fixed header (5rem)
   AND the fixed sticky-call-bar (~4rem, body's own padding-bottom); desktop
   only subtracts the header, since the sticky bar is hidden there. */
.hero--bg {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding-top: var(--sp-2xl); padding-bottom: var(--sp-2xl);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden;
  min-height: calc(100vh - 9rem);
  min-height: calc(100svh - 9rem);
}
@media (min-width: 1080px) {
  .hero--bg { min-height: calc(100vh - 5rem); min-height: calc(100svh - 5rem); }
}
.hero--bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,52,47,.90) 0%, rgba(0,52,47,.74) 50%, rgba(0,52,47,.90) 100%);
  z-index: 0;
}
.hero--bg .hero__content { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.hero--bg .eyebrow { color: #ffcf6b; justify-content: center; margin-bottom: var(--sp-md); }
.hero--bg h1 { color: #fff; }
.hero--bg .hero__lede { color: rgba(255,255,255,.92); margin-left: auto; margin-right: auto; font-size: var(--fs-body-lg); }
.hero--bg .hero__actions { display: flex; justify-content: center; margin-top: 2rem; }
.hero--bg .badge-row { justify-content: center; margin-top: var(--sp-lg); }
.hero--bg .badge-row__item { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff; }
.hero--bg .badge-row__item .icon { color: #ffcf6b; }
/* Small tightening for narrow phones (<=400px) so a page with a slightly
   longer eyebrow/lede than average (e.g. more badge copy) still fits fully
   above the fold instead of pushing a few px past the viewport - shrinks
   padding and lede type size a touch rather than ever touching page copy. */
@media (max-width: 400px) {
  .hero--bg { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
  .hero--bg .eyebrow { margin-bottom: .35rem; }
  .hero--bg .hero__lede { font-size: var(--fs-body-sm); }
  .hero--bg .hero__actions { margin-top: 1rem; }
  .hero--bg .badge-row { margin-top: var(--sp-xs); }
}

/* Placeholder shown in place of any image that fails to load (see js/main.js) */
.img-placeholder__icon { color: rgba(255, 255, 255, .85); display: flex; }

.stat-grid { margin-top: var(--sp-2xl); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { padding: var(--sp-lg); background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-card__num { font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; color: var(--color-primary); }
.stat-card__label { font-size: var(--fs-body-sm); color: var(--color-on-surface-variant); margin-top: .25em; }

/* ---------- Card grids ---------- */
.grid { display: grid; gap: var(--sp-lg); }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--5 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
@media (min-width: 1024px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: var(--sp-lg);
}
.card__icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
  background: var(--color-surface-container); display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); margin-bottom: var(--sp-sm);
}
.card h3 { font-size: var(--fs-h3); margin-bottom: .35em; }
.card p { color: var(--color-on-surface-variant); font-size: var(--fs-body-sm); margin: 0; }
.card--link { transition: box-shadow .15s, transform .15s; display: block; }
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__meta { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary); }

/* ---------- Service blocks ---------- */
.service-block { padding: var(--sp-lg) 0; border-top: 1px solid var(--color-outline-variant); }
.service-block:first-of-type { border-top: none; }
.service-block h3 { font-size: 1.3rem; }
.service-block ul { margin-top: var(--sp-sm); display: grid; gap: .4em; }
.service-block li { padding-left: 1.4em; position: relative; color: var(--color-on-surface-variant); }
.service-block li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }

/* ---------- Process timeline ---------- */
.timeline { display: grid; gap: var(--sp-md); }
@media (min-width: 768px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
.timeline__step { background: var(--color-surface); border-radius: var(--radius); padding: var(--sp-lg); box-shadow: var(--shadow-sm); }
.timeline__num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: rgba(0,52,47,.25); }

/* ---------- Accordion (FAQ + What to Know) ---------- */
.accordion-item { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-xs); overflow: hidden; }
.accordion-trigger {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  padding: var(--sp-md); background: none; border: none; font-weight: 700; color: var(--color-primary); font-size: var(--fs-body);
}
.accordion-trigger:hover { background: var(--color-surface-container-low); }
.accordion-icon { transition: transform .2s; flex-shrink: 0; }
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); }
.accordion-panel { padding: 0 var(--sp-md); max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; color: var(--color-on-surface-variant); font-size: var(--fs-body-sm); }
.accordion-panel.is-open { padding: 0 var(--sp-md) var(--sp-md); max-height: 40rem; }

.article-block { margin-bottom: var(--sp-lg); }
.article-block h3 { font-size: 1.15rem; }
.article-block p { color: var(--color-on-surface-variant); }

/* ---------- Chips (service area) ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.chip {
  padding: .5em 1em; background: var(--color-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); font-size: var(--fs-body-sm); font-weight: 600;
}
.chip--link { transition: box-shadow .15s; }
.chip--link:hover { box-shadow: var(--shadow-md); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-primary-container); color: #fff; padding: var(--sp-2xl) 0; }
.cta-band__inner { display: flex; flex-direction: column; gap: var(--sp-lg); align-items: flex-start; }
@media (min-width: 900px) { .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.cta-band h2 { color: #fff; font-size: var(--fs-h2); }
.cta-band p { color: rgba(255,255,255,.85); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-outline-variant); margin-top: var(--sp-3xl); }
.footer__grid { display: grid; gap: var(--sp-2xl); padding: var(--sp-3xl) 0 var(--sp-xl); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
.footer h3 { font-size: 1.1rem; }
.footer p, .footer a { color: var(--color-on-surface-variant); font-size: var(--fs-body-sm); }
.footer ul li { margin-bottom: .4em; }
.footer a:hover { color: var(--color-primary); }
.footer__bottom { border-top: 1px solid var(--color-outline-variant); padding: var(--sp-lg) 0; display: flex; flex-direction: column; gap: var(--sp-xs); font-size: var(--fs-label); color: var(--color-outline); }
@media (min-width: 768px) { .footer__bottom { flex-direction: row; justify-content: space-between; } }

/* ---------- Sticky mobile call bar ---------- */
.sticky-call-bar {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 60;
  background: var(--color-secondary); color: #fff; padding: .8em var(--sp-md);
  display: flex; align-items: center; justify-content: center; gap: .6em;
  font-weight: 700; box-shadow: 0 -2px 12px rgba(0,0,0,.15);
  /* Default state is visible (transform/opacity below are the "shown" values)
     so the bar still works with no JS at all. js/main.js adds .is-hidden
     while the hero section's own call button is on screen, and removes it
     the moment that button scrolls out of view - see the IntersectionObserver
     block in main.js. The transition is what makes that swap animate instead
     of popping in/out. */
  transform: translateY(0); opacity: 1;
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease;
}
.sticky-call-bar.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
@media (min-width: 1080px) { .sticky-call-bar { display: none; } }
body { padding-bottom: 4rem; }
@media (min-width: 1080px) { body { padding-bottom: 0; } }

/* icon sizing helper (inline SVG) */
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* utility */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }