/* Gainesville Rapid Water Damage - single canonical stylesheet.
   System fonts only, zero external requests, zero JS. CWV: LCP < 2.5s, CLS < 0.1, INP < 200ms.

   DESIGN DOCTRINE (design-clarity-board): one signature, everything else quiet.
   The one job of every page is to get a person with water moving right now to call.
   The signature is THE CLOCK: water damage is a clock, not an event, so the hero carries a
   timeline of what happens at 1 hour, 24 hours, 48 hours and a week. It is information rather
   than decoration, it is the actual buying trigger, and no competitor in this niche runs it.
   Boldness is spent there. Every other band is calm.

   Typography note: the no-external-fonts rule is a hard CWV and footprint constraint, so voice
   comes from scale, weight and tracking inside the system stack rather than from a typeface. */

:root {
  --ink:        #0B1E2D;   /* deep water blue, the dark ground */
  --ink-soft:   #14324A;   /* raised dark surface inside dark bands */
  --paper:      #FFFFFF;
  --wash:       #EEF3F6;   /* cool light band */
  --rule:       #D5E0E7;
  --rule-dark:  #23455E;
  --body:       #2C4759;   /* body text on light */
  --muted:      #5C7A8C;
  --on-dark:    #DDE8EE;   /* body text on dark */
  --on-dark-mut:#9FBACB;
  --water:      #1C7BA8;   /* brand accent */
  --water-lit:  #5FB3DA;   /* accent on dark grounds */
  --urgent:     #C2410C;   /* the call action, and only the call action */
  --urgent-lit: #F97316;
  --max:        1140px;
  --gap:        clamp(28px, 4vw, 52px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #14618A; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--urgent-lit); outline-offset: 3px; border-radius: 3px; }

/* ---------- type scale: voice from scale and tracking, not from a typeface ---------- */
h1, h2, h3 { color: var(--ink); }
h1 {
  font-size: clamp(32px, 5.2vw, 54px); line-height: 1.06;
  letter-spacing: -.028em; font-weight: 800; margin: 0 0 18px; text-wrap: balance;
}
h2 {
  font-size: clamp(24px, 3.1vw, 34px); line-height: 1.16;
  letter-spacing: -.021em; font-weight: 800; margin: 0 0 14px; text-wrap: balance;
}
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.008em; font-weight: 700; margin: 0 0 7px; }
p { margin: 0 0 15px; max-width: 66ch; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--body); }

/* the utility label role: the one place small caps carry structure */
.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--water); margin: 0 0 10px;
}

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.hwrap {
  max-width: var(--max); margin: 0 auto; padding: 11px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
}
.brand { font-weight: 800; font-size: 17px; letter-spacing: -.022em; color: var(--ink); text-decoration: none; line-height: 1.15; }
header.site nav { display: flex; flex-wrap: wrap; gap: 20px; }
header.site nav a { color: var(--body); text-decoration: none; font-size: 15px; font-weight: 500; }
header.site nav a:hover { color: var(--water); }

.cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--urgent); color: #fff; text-decoration: none; font-weight: 700;
  padding: 12px 22px; border-radius: 7px; font-size: 16.5px; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 6px 18px -8px rgba(194,65,12,.6);
}
.cta:hover { background: #A5350A; }
.cta.big { font-size: 18.5px; padding: 15px 28px; }
header.site .cta { margin-left: auto; padding: 10px 18px; font-size: 15.5px; }

/* ---------- bands: the alternating rhythm ---------- */
.band { padding: var(--gap) 20px; }
.hero + .band { padding-top: calc(var(--gap) + 34px); }
.band > .inner { max-width: var(--max); margin: 0 auto; }
.band.light { background: var(--paper); }
.band.wash  { background: var(--wash); }
.band.dark  { background: var(--ink); color: var(--on-dark); }
.band.dark h2, .band.dark h3 { color: #fff; }
.band.dark p { color: var(--on-dark); }
.band.dark .eyebrow { color: var(--water-lit); }
.band.dark a { color: var(--water-lit); }

/* ---------- hero ---------- */
.hero {
  position: relative; background: var(--ink); color: var(--on-dark);
  padding: clamp(34px, 5vw, 66px) 20px clamp(30px, 4vw, 46px);
  overflow: hidden;
}
.hero .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .62; filter: saturate(.85) contrast(1.05);
}
/* The gradient holds AA contrast over the headline on the left while letting the photograph
   actually read on the right. At .30 opacity under a flat 94% scrim the image was invisible and
   the hero looked like an empty navy box. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(9,25,38,.95) 0%, rgba(9,25,38,.88) 38%, rgba(9,25,38,.42) 78%, rgba(9,25,38,.28) 100%);
}
.hero .inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; }
.hero h1 { color: #fff; max-width: 20ch; }
.hero p { color: var(--on-dark); max-width: 60ch; }
.hero .eyebrow { color: var(--water-lit); }
.herocta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.sd { color: var(--on-dark-mut); font-size: 14.5px; }
.sd a, .fine a { color: inherit; }
/* the standing-qualifier asterisk: a real superscript marker, not a stray dot */
sup a { text-decoration: none; font-size: 12px; padding-left: 1px; }
.sd sup a { color: var(--water-lit); }
sup a:hover { text-decoration: underline; }

/* ---------- THE SIGNATURE: the clock ---------- */
.clock {
  position: relative; z-index: 2; max-width: var(--max);
  margin: clamp(30px, 4vw, 46px) auto calc(clamp(30px, 4vw, 46px) * -1 - 18px);
  background: linear-gradient(180deg, #16374F 0%, #10293C 100%);
  border: 1px solid #2C5875; border-radius: 14px;
  padding: 26px 26px 24px;
  box-shadow: 0 24px 50px -22px rgba(0,0,0,.75);
}
.clock h2 {
  font-size: clamp(17px, 2vw, 21px); letter-spacing: -.015em; text-transform: none;
  color: #fff; margin: 0 0 20px; font-weight: 800;
}
.clock h2 em { font-style: normal; color: var(--urgent-lit); }
.clockrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.clockrow::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 12px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--water-lit) 0%, #7FA9C6 45%, var(--urgent-lit) 100%); opacity: .75;
}
.tick { position: relative; padding: 0 10px; }
.tick::before {
  content: ""; display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--water-lit); margin: 6px 0 16px; position: relative; z-index: 2;
  box-shadow: 0 0 0 5px #16374F;
}
.tick:last-child::before { background: var(--urgent-lit); box-shadow: 0 0 0 5px #16374F, 0 0 18px rgba(249,115,22,.55); }
.tick:last-child b { color: #FFD3B0; }
.tick b { display: block; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 4px; }
.tick span { display: block; color: #B6CEDD; font-size: 14px; line-height: 1.5; }
@media (max-width: 720px) {
  .clockrow { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .clockrow::before { display: none; }
}

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 22px; margin-top: 24px; }
.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 11px; overflow: hidden;
  display: flex; flex-direction: column;
}
.band.dark .card { background: var(--ink-soft); border-color: var(--rule-dark); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card .body { padding: 16px 17px 18px; }
.card h3 { margin-bottom: 6px; }
.card p { font-size: 15.5px; margin: 0; color: var(--muted); }
.band.dark .card p { color: var(--on-dark-mut); }
a.card { text-decoration: none; }
a.card:hover { border-color: var(--water); }
a.card h3::after { content: " \203A"; color: var(--water); }

/* ---------- split: text beside a photograph ---------- */
.split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(24px,3.4vw,44px); align-items: center; }
.split.rev > figure { order: -1; }
.split figure { margin: 0; }
.split img { border-radius: 12px; width: 100%; }
@media (max-width: 860px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev > figure { order: 0; } }

/* ---------- subsections inside a band ---------- */
.subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 22px 30px; margin-top: 22px; }
.sub p { margin: 0; font-size: 15.5px; color: var(--muted); }
.band.dark .sub p { color: var(--on-dark-mut); }
.sub h3 a { text-decoration: none; }
.sub h3 a:hover { text-decoration: underline; }

/* ---------- process steps ---------- */
ol.steps { counter-reset: s; list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; max-width: 74ch; }
ol.steps li { counter-increment: s; position: relative; padding-left: 46px; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--water); color: #fff; font-weight: 700; font-size: 14.5px;
}
.band.dark ol.steps li::before { background: var(--water-lit); color: var(--ink); }

/* ---------- cost table ---------- */
.cost table { border-collapse: collapse; width: 100%; margin: 20px 0 16px; font-size: 16px; background: var(--paper); border-radius: 10px; overflow: hidden; }
.cost th, .cost td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cost thead th { background: var(--ink); color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.cost td:first-child { font-weight: 700; color: var(--ink); width: 31%; }
.cost tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 660px) {
  .cost table, .cost tbody, .cost tr, .cost td { display: block; width: 100%; }
  .cost thead { display: none; }
  .cost tr { border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .cost td, .cost td:first-child { border: 0; padding: 3px 0; width: auto; }
}

/* ---------- faq ---------- */
.faq .qa { padding: 17px 0; border-bottom: 1px solid var(--rule); max-width: 78ch; }
.faq .qa:last-child { border-bottom: 0; }
.faq p { margin: 0; color: var(--muted); }

/* ---------- related ---------- */
.related ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.related li a {
  display: inline-block; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 999px; padding: 9px 17px; text-decoration: none; font-size: 15.5px; font-weight: 500; color: var(--ink);
}
.related li a:hover { border-color: var(--water); color: var(--water); }

/* ---------- closing photo CTA band ---------- */
.closer { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(40px,5vw,70px) 20px; text-align: center; }
.closer .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.closer::after { content: ""; position: absolute; inset: 0; background: rgba(11,30,45,.72); }
.closer .inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.closer h2 { color: #fff; }
.closer p { color: var(--on-dark); margin-left: auto; margin-right: auto; }
.closer .herocta { justify-content: center; }

/* ---------- footer ---------- */
footer.site { background: var(--ink); color: var(--on-dark-mut); padding: 40px 20px 30px; }
.fgrid { max-width: var(--max); margin: 0 auto 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 18px 26px; }
.fgrid ul { list-style: none; margin: 0; padding: 0; }
.fgrid li { margin-bottom: 8px; }
.fgrid a { color: var(--on-dark-mut); text-decoration: none; font-size: 14.5px; }
.fgrid a:hover { color: #fff; }
.nap, footer.site .fine { max-width: var(--max); margin-left: auto; margin-right: auto; }
.nap { color: var(--on-dark); font-size: 15.5px; margin-bottom: 10px; padding-top: 18px; border-top: 1px solid var(--rule-dark); }
.nap strong { color: #fff; }
.nap a { color: var(--water-lit); }
.fine { color: var(--on-dark-mut); font-size: 13.5px; max-width: none; }
.band.light .fine, .band.wash .fine { color: var(--muted); }

/* ---------- mobile sticky call bar: the one job, always reachable ---------- */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(11,30,45,.97); border-top: 1px solid var(--rule-dark);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .callbar .cta { width: 100%; justify-content: center; }
  body { padding-bottom: 76px; }
  header.site .cta { display: none; }
  header.site nav { width: 100%; gap: 14px; }
}