/* ==========================================================================
   SellFastPhoto — concept preview by Jahforge
   Shared stylesheet for the 2 page demo (home / services).

   Direction: the client's own brand is red + navy on white, and the design
   he pointed at (his LeadConnector build) pairs an italic serif eyebrow with
   very heavy caps and a red accent word. This keeps that voice but pushes it
   editorial: bone paper, deep navy-black, generous rules, numbered sections.
   Deliberately NOT luxury — his clientele is working Tampa agents, not
   luxury brokerages, so the tone is confident and plain rather than precious.
   ========================================================================== */

:root {
  --ink: #0B1B26;          /* near-black navy, page ground on dark sections */
  --ink-2: #10242F;
  --navy: #064161;         /* sampled from the logo camera body */
  --navy-deep: #052E45;
  --red: #D71229;          /* sampled from the logo roof */
  --red-bright: #F02236;
  --paper: #F4F1EC;        /* warm bone, not clinical white */
  --paper-2: #E9E4DA;
  --white: #ffffff;
  --muted-d: rgba(244,241,236,0.68);   /* on dark */
  --muted-l: rgba(11,27,38,0.66);      /* on paper */
  --line-d: rgba(244,241,236,0.16);
  --line-l: rgba(11,27,38,0.14);
  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 78px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: 'Archivo Black', system-ui, sans-serif; font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; text-transform: uppercase; }
p { margin: 0; }
.container { max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.container-tight { max-width: 900px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .container, .container-tight { padding: 0 20px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Grain: keeps the big flat dark panels reading as printed stock rather than
   flat digital fill. Above the background, below content, never clickable. */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.055; pointer-events: none; z-index: 1;
}
.grain > * { position: relative; z-index: 2; }

/* ---- Type helpers ---- */
.eyebrow {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--red);
}
.eyebrow-d { color: #FF6B78; }
.label {
  font-family: 'Archivo', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-l);
}
.label-d { color: var(--muted-d); }
.h-xl { font-size: clamp(2.5rem, 7.4vw, 5.6rem); }
.h-lg { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h-md { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.red { color: var(--red); }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted-l); max-width: 60ch; }
.lede-d { color: var(--muted-d); }

/* ---- Demo ribbon ---- */
.demo-ribbon {
  background: var(--ink); color: var(--paper);
  text-align: center; font-size: 0.76rem; padding: 8px 16px;
  position: relative; z-index: 90;
}
.demo-ribbon a { color: #FF8A94; text-decoration: underline; font-weight: 600; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 17px 30px; border: 2px solid transparent; border-radius: 2px;
  cursor: pointer; transition: transform .18s var(--ease), background-color .18s, color .18s, border-color .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 6px 22px rgba(215,18,41,0.28); }
.btn-red:hover { background: var(--red-bright); border-color: var(--red-bright); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(215,18,41,0.38); }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-deep); transform: translateY(-2px); }
.btn-ghost-d { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost-d:hover { background: rgba(255,255,255,0.1); border-color: #fff; transform: translateY(-2px); }
.btn-ghost-l { background: transparent; color: var(--ink); border-color: rgba(11,27,38,0.3); }
.btn-ghost-l:hover { border-color: var(--ink); background: rgba(11,27,38,0.05); transform: translateY(-2px); }
.btn-lg { padding: 20px 38px; font-size: 0.88rem; }
.btn-block { width: 100%; }

/* ---- Nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: transparent;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgba(11,27,38,0.95); backdrop-filter: blur(12px); border-bottom-color: var(--line-d); }
/* The services page has no full-bleed hero video behind the nav, so it needs
   the solid treatment from the very first paint instead of on scroll. */
.nav.is-static { position: sticky; background: var(--ink); border-bottom-color: var(--line-d); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { height: 38px; width: auto; }
.brand-text { font-family: 'Archivo Black', sans-serif; font-size: 1.02rem; letter-spacing: -0.01em; color: #fff; text-transform: uppercase; line-height: 1; }
.brand-text span { display: block; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.56rem; letter-spacing: 0.18em; color: #FF8A94; margin-top: 4px; }
.nav-links { display: none; align-items: center; gap: 30px; }
@media (min-width: 1000px) { .nav-links { display: flex; } }
.nav-links a { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.82); text-transform: uppercase; transition: color .2s; }
.nav-links a:hover, .nav-links a.is-current { color: #fff; }
.nav-links a.is-current { border-bottom: 2px solid var(--red); padding-bottom: 3px; }
.nav-cta { display: none; align-items: center; gap: 10px; }
@media (min-width: 1000px) { .nav-cta { display: flex; } }
.nav-cta .btn { padding: 12px 20px; font-size: 0.72rem; }
.nav-burger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; }
@media (min-width: 1000px) { .nav-burger { display: none; } }
.nav-burger span { width: 25px; height: 2px; background: #fff; transition: transform .22s, opacity .22s; }
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 95; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; pointer-events: none; transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-menu a.m-link { font-family: 'Archivo Black', sans-serif; font-size: 1.8rem; color: #fff; text-transform: uppercase; padding: 10px 0; }
.mobile-menu .m-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; width: min(300px, 80vw); }

/* ---- Hero ---- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; background: var(--ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim is centre-weighted to match the centred copy: an elliptical pool of
   shade behind the text, plus a vertical wash for the nav and bottom strip.
   The ellipse uses explicit radii so it reaches full transparency inside the
   box — a default (farthest-corner) radial would still be part opaque at the
   edges and clip into a visible rectangle. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 64% 58% at 50% 48%,
      rgba(11,27,38,0.62) 0%,
      rgba(11,27,38,0.46) 42%,
      rgba(11,27,38,0.22) 72%,
      rgba(11,27,38,0) 100%),
    linear-gradient(180deg, rgba(11,27,38,0.82) 0%, rgba(11,27,38,0.30) 28%, rgba(11,27,38,0.38) 62%, rgba(11,27,38,0.94) 100%);
}
.hero-inner { position: relative; z-index: 3; padding: calc(var(--nav-h) + 40px) 0 80px; width: 100%; text-align: center; }
.hero h1 { color: #fff; max-width: 15ch; margin: 16px auto 0; text-shadow: 0 4px 40px rgba(0,0,0,0.45); }
.hero .eyebrow { color: #fff; opacity: 0.92; }
.hero .lede { margin: 22px auto 0; color: rgba(255,255,255,0.9); max-width: 52ch; text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  border-top: 1px solid rgba(255,255,255,0.16);
  background: rgba(11,27,38,0.55); backdrop-filter: blur(8px);
}
.hero-strip .container { display: flex; flex-wrap: wrap; gap: 4px 0; }
.hero-strip .hs {
  flex: 1 1 50%; padding: 16px 8px; text-align: center;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
@media (min-width: 780px) { .hero-strip .hs { flex: 1; border-left: 1px solid rgba(255,255,255,0.14); } .hero-strip .hs:first-child { border-left: none; } }
/* On a phone each cell is ~170px wide; at the desktop size the two longest
   labels wrap to a second line and the 2x2 grid ends up with mismatched row
   heights. Tightening the type keeps every cell on one line. */
@media (max-width: 480px) { .hero-strip .hs { font-size: 0.62rem; letter-spacing: 0.06em; gap: 6px; padding: 14px 4px; } }
.hero-strip .hs b { color: #FF6B78; font-weight: 800; }

/* ---- Sections ---- */
.section { padding: 108px 0; }
.section-sm { padding: 76px 0; }
@media (max-width: 640px) { .section { padding: 74px 0; } .section-sm { padding: 56px 0; } }
.sec-dark { background: var(--ink); color: var(--paper); }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-navy { background: var(--navy-deep); color: var(--paper); }
.sec-navy h2, .sec-navy h3 { color: #fff; }
.sec-paper2 { background: var(--paper-2); }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { margin-top: 14px; }
.sec-head .lede { margin-top: 18px; }
.sec-head.center .lede { margin-left: auto; margin-right: auto; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---- Scroll-scrubbed shoot sequence ---- */
.scrub-wrap { position: relative; height: 320vh; height: 320svh; }
@media (min-width: 900px) { .scrub-wrap { height: 260vh; height: 260svh; } }
.scrub-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; background: var(--ink); }
.scrub-sticky video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrub-sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,27,38,0.78) 0%, rgba(11,27,38,0.18) 34%, rgba(11,27,38,0.3) 62%, rgba(11,27,38,0.88) 100%); }
.scrub-copy { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.scrub-copy h2 { color: #fff; max-width: 16ch; text-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.scrub-copy .eyebrow { color: #fff; }
.scrub-copy p { margin-top: 18px; color: rgba(255,255,255,0.9); max-width: 46ch; text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.scrub-steps { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 4; display: flex; justify-content: center; gap: 0; }
.scrub-steps .st {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); padding: 0 18px; transition: color .3s;
  border-left: 1px solid rgba(255,255,255,0.18);
}
.scrub-steps .st:first-child { border-left: none; }
.scrub-steps .st.on { color: #fff; }
/* Three labels side by side don't fit a phone without truncating, and the
   sticky call bar sits over that strip anyway. Show only the step you're
   actually on and lift it clear of the bar. */
@media (max-width: 720px) {
  .scrub-steps { bottom: 96px; }
  .scrub-steps .st { display: none; border-left: none; font-size: 0.72rem; letter-spacing: 0.14em; }
  .scrub-steps .st.on { display: block; }
}

/* ---- Service preview cards ---- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 330px; padding: 26px; overflow: hidden; border-radius: 3px;
  background: var(--ink); color: #fff; isolation: isolate;
}
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,27,38,0.15) 0%, rgba(11,27,38,0.62) 52%, rgba(11,27,38,0.94) 100%); transition: background .4s; }
.svc-card:hover img { transform: scale(1.07); }
.svc-card:hover::after { background: linear-gradient(180deg, rgba(6,65,97,0.25) 0%, rgba(11,27,38,0.7) 52%, rgba(11,27,38,0.96) 100%); }
.svc-card h3 { font-size: 1.22rem; color: #fff; }
.svc-card p { margin-top: 8px; font-size: 0.9rem; color: rgba(255,255,255,0.76); }
.svc-card .from { margin-top: 14px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FF6B78; }

/* ---- Gallery ---- */
.gal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.gal figure { position: relative; margin: 0; overflow: hidden; background: var(--ink-2); border-radius: 3px; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gal figure:hover img { transform: scale(1.05); }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 15px;
  background: linear-gradient(0deg, rgba(11,27,38,0.9), transparent);
  color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.g-tall { grid-column: span 2; grid-row: span 2; aspect-ratio: 3/4; }
.g-wide { grid-column: span 4; aspect-ratio: 16/9; }
.g-sq   { grid-column: span 2; aspect-ratio: 1/1; }
@media (max-width: 900px) {
  .gal { grid-template-columns: repeat(2, 1fr); }
  .g-tall, .g-wide, .g-sq { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
  .g-tall { aspect-ratio: 3/4; }
}

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 34px 30px; border-left: 1px solid var(--line-d); }
.step:first-child { border-left: none; }
@media (max-width: 860px) { .step { border-left: none; border-top: 1px solid var(--line-d); padding: 28px 0; } .step:first-child { border-top: none; padding-top: 0; } }
.step .sn { font-family: 'Archivo Black', sans-serif; font-size: 2.6rem; color: var(--red); line-height: 1; }
.step h3 { margin-top: 12px; font-size: 1.1rem; }
.step p { margin-top: 10px; font-size: 0.95rem; color: var(--muted-d); }

/* ---- Testimonials ---- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.quote { background: var(--white); border: 1px solid var(--line-l); border-radius: 3px; padding: 30px; display: flex; flex-direction: column; }
.quote .stars { color: var(--red); letter-spacing: 3px; font-size: 0.92rem; }
.quote blockquote { margin: 16px 0 0; font-family: 'Newsreader', Georgia, serif; font-size: 1.06rem; line-height: 1.6; color: var(--ink); flex-grow: 1; }
.quote .who { margin-top: 18px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-l); }

/* ---- Split feature (service area) ---- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.split figure { margin: 0; overflow: hidden; border-radius: 3px; }
.split figure img { width: 100%; height: 100%; object-fit: cover; }
.area-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.area-list li { display: flex; align-items: center; gap: 9px; font-size: 0.95rem; }
.area-list li::before { content: ""; width: 7px; height: 7px; background: var(--red); flex-shrink: 0; transform: rotate(45deg); }

/* ==========================================================================
   Service area picker + area pages
   The picker is a convenience layer only. Every area is also a real crawlable
   <a href> in .area-index below it, so the whole cluster is reachable and
   indexable with scripting off — which is the entire point of area pages.
   ========================================================================== */
.area-pick { position: relative; margin-top: 26px; max-width: 560px; }
.area-pick-label {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-l); margin-bottom: 10px;
}
.sec-dark .area-pick-label, .page-hero .area-pick-label { color: var(--muted-d); }
.area-pick-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 17px 20px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-l); border-radius: 4px;
  font-family: 'Archivo', sans-serif; font-size: 1rem; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.area-pick-btn:hover { border-color: var(--red); }
.area-pick-btn[aria-expanded="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(215,18,41,0.12); }
.area-pick-btn .chev { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; transition: transform .25s var(--ease); }
.area-pick-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.area-pick-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--white);
  border: 1px solid var(--line-l); border-radius: 4px;
  box-shadow: 0 24px 60px rgba(11,27,38,0.22);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.area-pick.is-open .area-pick-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.area-pick-list { max-height: 340px; overflow-y: auto; padding: 6px 0; overscroll-behavior: contain; }
.area-pick-group {
  padding: 12px 18px 6px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
}
.area-pick-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 18px; font-size: 0.95rem; color: var(--ink);
  transition: background-color .15s;
}
.area-pick-list a:hover, .area-pick-list a:focus-visible { background: var(--paper-2); }
.area-pick-list a:focus-visible { outline-offset: -3px; }
.area-pick-list a .go { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); opacity: 0; }
.area-pick-list a:hover .go, .area-pick-list a:focus-visible .go { opacity: 1; }

/* County headings on the areas hub. These names used to live only inside the
   numbered index labels that were stripped sitewide, which left the whole
   crawlable index as eight unlabelled runs of town links. They are real
   headings now, with the numbering gone for good. */
.area-county { margin: 0 0 18px; }

/* Full crawlable index of every area.
   Borders live on the cells, not on grid gaps over a coloured container:
   counties with fewer than a full row would otherwise leave empty grey
   cells hanging off the end of the grid. */
.area-index {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l);
}
@media (max-width: 900px) { .area-index { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 660px) { .area-index { grid-template-columns: repeat(2, 1fr); } }
.area-index li { border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.area-index a {
  display: block; padding: 15px 16px;
  font-size: 0.92rem; font-weight: 600;
  transition: background-color .18s, color .18s;
}
.area-index a:hover { background: var(--red); color: #fff; }
.sec-dark .area-index, .sec-navy .area-index { border-top-color: var(--line-d); border-left-color: var(--line-d); }
.sec-dark .area-index li, .sec-navy .area-index li { border-right-color: var(--line-d); border-bottom-color: var(--line-d); }
.sec-dark .area-index a, .sec-navy .area-index a { color: #fff; }
.sec-dark .area-index a:hover, .sec-navy .area-index a:hover { background: var(--red); }

/* Area page: fact strip + nearby links */
.area-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-l); border: 1px solid var(--line-l); margin-top: 30px; }
@media (max-width: 700px) { .area-facts { grid-template-columns: 1fr; } }
.area-facts div { background: var(--white); padding: 20px 22px; }
/* Both are spans, so they need to be block or the label and value run
   together on one line ("COUNTYPinellas"). */
.area-facts .k { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.area-facts .v { display: block; margin-top: 7px; font-size: 0.97rem; font-weight: 600; }
.nearby { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nearby a {
  font-size: 0.84rem; font-weight: 600; padding: 8px 13px;
  border: 1px solid var(--line-l); border-radius: 3px; transition: all .18s;
}
.nearby a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Reasons (SEO copy) ---- */
.reasons { border-top: 1px solid var(--line-l); }
.reason { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line-l); align-items: start; }
@media (max-width: 640px) { .reason { grid-template-columns: 1fr; gap: 8px; } }
.reason .rn { font-family: 'Archivo Black', sans-serif; font-size: 2rem; color: transparent; -webkit-text-stroke: 1.4px var(--red); line-height: 1; }
.reason h3 { font-size: 1.08rem; }
.reason p { margin-top: 9px; font-size: 0.97rem; color: var(--muted-l); max-width: 66ch; }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--line-l); }
.sec-dark .faq, .sec-navy .faq { border-top-color: var(--line-d); }
.faq details { border-bottom: 1px solid var(--line-l); }
.sec-dark .faq details, .sec-navy .faq details { border-bottom-color: var(--line-d); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-family: 'Archivo Black', sans-serif; font-size: 1.02rem; text-transform: uppercase; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .fa { padding: 0 0 24px; color: var(--muted-l); font-size: 1rem; max-width: 74ch; }
.sec-dark .faq .fa, .sec-navy .faq .fa { color: var(--muted-d); }

/* ---- Big CTA ---- */
.cta-band { position: relative; overflow: hidden; background: var(--red); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: rgba(255,255,255,0.9); }
.cta-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-band .btn-ghost-d { border-color: rgba(255,255,255,0.7); }
.cta-phone { display: block; margin-top: 26px; font-family: 'Archivo Black', sans-serif; font-size: clamp(1.6rem, 4vw, 2.4rem); color: #fff; }

/* ---- Footer ---- */
.footer { background: var(--ink); color: var(--muted-d); padding: 66px 0 28px; }
.footer h4 { font-size: 0.68rem; letter-spacing: 0.2em; color: #fff; margin-bottom: 16px; font-family: 'Archivo', sans-serif; font-weight: 700; }
.f-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 900px) { .f-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .f-grid { grid-template-columns: 1fr; } }
.f-grid a { display: block; padding: 5px 0; font-size: 0.93rem; transition: color .2s; }
.f-grid a:hover { color: #fff; }
.f-blurb { margin-top: 16px; font-size: 0.93rem; max-width: 36ch; }
.f-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-d); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; }
.f-bottom a { color: #FF8A94; font-weight: 600; }

/* ---- Sticky mobile call bar ---- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(11,27,38,0.2);
  border-top: 1px solid rgba(255,255,255,0.14);
  transform: translateY(110%); transition: transform .35s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar.up { transform: translateY(0); }
@media (min-width: 1000px) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 8px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
}
.callbar a svg { width: 17px; height: 17px; }
.callbar .c-call { background: var(--red); }
.callbar .c-book { background: var(--navy); }
/* Clearance so the bar never covers the last of the footer */
@media (max-width: 999px) { .footer { padding-bottom: 96px; } }

/* ==========================================================================
   SERVICES PAGE — progressive drill-down selector
   Every level is rendered in the DOM and hidden with CSS rather than being
   injected by JS, so the full service list is still crawlable and readable
   with scripting off. JS only toggles which panel is active.
   ========================================================================== */
.page-hero { position: relative; background: var(--ink); color: #fff; padding: 70px 0 64px; overflow: hidden; }
.page-hero .bg { position: absolute; inset: 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.page-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,27,38,0.86), rgba(11,27,38,0.96)); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { margin-top: 14px; max-width: 18ch; }
.page-hero .lede { margin-top: 18px; color: var(--muted-d); }

.picker { background: var(--paper); }
.picker-shell { border: 1px solid var(--line-l); border-radius: 4px; background: var(--white); overflow: hidden; }
.picker-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--line-l); background: var(--paper-2);
  font-size: 0.78rem;
}
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumb { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-l); }
.crumb.on { color: var(--red); }
.crumb-sep { color: rgba(11,27,38,0.3); }
/* Breadcrumbs on the dark page hero: the base colours above are the
   light-background variants and are close to invisible there. Size is set
   here too because .crumbs otherwise only picks one up from .picker-bar. */
.page-hero .crumbs { font-size: 0.72rem; }
.page-hero .crumb { color: var(--muted-d); transition: color .18s; }
.page-hero a.crumb:hover { color: #fff; }
.page-hero .crumb-sep { color: rgba(244,241,236,0.32); }
.pick-back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--line-l); border-radius: 2px; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 14px; color: var(--ink); transition: border-color .2s, background .2s, opacity .2s;
}
.pick-back:hover { border-color: var(--ink); background: var(--paper); }
.pick-back[disabled] { opacity: 0.35; cursor: default; }

.panel { display: none; padding: 30px 22px 34px; }
.panel.on { display: block; animation: panelIn .38s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-l); margin-bottom: 20px; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.opt {
  position: relative; text-align: left; cursor: pointer;
  background: var(--white); border: 1px solid var(--line-l); border-radius: 3px;
  padding: 22px 20px 20px; font-family: 'Archivo', sans-serif; color: var(--ink);
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
  display: flex; flex-direction: column; gap: 6px; min-height: 118px;
}
.opt:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(11,27,38,0.09); }
.opt .oi { width: 26px; height: 26px; color: var(--red); margin-bottom: 4px; }
.opt .on-t { font-family: 'Archivo Black', sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: -0.01em; }
.opt .od { font-size: 0.87rem; color: var(--muted-l); line-height: 1.5; }
.opt .op { margin-top: auto; padding-top: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.opt .arrow { position: absolute; top: 20px; right: 18px; width: 15px; height: 15px; color: rgba(11,27,38,0.25); transition: transform .2s, color .2s; }
.opt:hover .arrow { color: var(--red); transform: translateX(3px); }
.opt.is-leaf { border-left: 3px solid var(--red); }

/* Crawlable fallback list — visible only when JS is unavailable */
.picker-fallback { margin-top: 26px; }
.js-on .picker-fallback { display: none; }

/* ---- Service modal ---- */
.modal-back {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(11,27,38,0.78); backdrop-filter: blur(4px);
}
.modal-back.open { display: flex; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 460px; background: var(--white); border-radius: 4px;
  padding: 44px 34px 34px; text-align: center; position: relative;
  border-top: 5px solid var(--red);
  animation: modalIn .3s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.modal .m-close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  background: none; border: none; cursor: pointer; color: var(--muted-l); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.modal .m-close:hover { background: var(--paper-2); color: var(--ink); }
.modal .m-close svg { width: 18px; height: 18px; }
.modal .m-path { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-l); }
.modal h3 { margin-top: 12px; font-size: 1.9rem; }
.modal .m-note { margin-top: 14px; font-size: 0.92rem; color: var(--muted-l); }
.modal .m-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }