/* market.css — sarasota. Rules that differ from, or do not exist in,
   the shared base. Loaded after base.css.

   Palette — barrel tile, bay green and brass, taken from the Ringling-era
   Mediterranean Revival that still sets the tone from St. Armands Circle
   to West of Trail:

     --primary    #9b4a34  clay tile — buttons, links, CTA band
     --secondary  #223b34  bay green — hero, step numbers, footer
     --accent     #d9b26a  brass — eyebrows, hero weave pattern
     --muted      #f5f1e8  quartz sand — alternating section bands

   Warmer than the other Florida markets in the group on purpose. This is
   an arts town with a lot of old textiles in it, and the palette should
   look like the rugs rather than like the water.

   Only three rules hardcode a brand colour rather than reading a token:
   the hero backdrop gradient, the hero scrim, and the photo placeholder
   wash. Everything else is structural and shared, which is what keeps
   tools/check-cascade.mjs quiet. There is deliberately no .brand__tag
   rule — that element no longer exists; the service-area line renders as
   the full-width .servicebar strip styled in base.css. */

:root { --background: #ffffff; --foreground: #0f0f0f; --muted: #f5f1e8; --muted-2: #fbf8f2; --muted-foreground: #5c5c5c; --primary: #9b4a34; --primary-dark: #7e3b28; --primary-foreground: #ffffff; --secondary: #223b34; --secondary-dark: #172b25; --secondary-foreground: #ffffff; --accent: #d9b26a; --accent-soft: #efdfba; --border: #e3ddd0; --border-strong: #cdc5b4; --ring: #9b4a34; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius: 0.5rem; --radius-btn: 0.375rem; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08); --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 2px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 8px 20px -6px rgb(0 0 0 / 0.16); --wrap: 1180px; --header-h: 74px; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6em; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 5.2vw, 3rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 1.95rem); }
h3 { font-size: 1.125rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 3px; }
.section { padding-block: 3.5rem; }
.section--tight { padding-block: 2.5rem; }
.lead { font-size: 1.075rem; color: var(--muted-foreground); }
.section--dark .lead, .section--brand .lead { color: rgb(255 255 255 / 0.85); }
.measure { max-width: 68ch; }
.eyebrow { display: inline-block; margin: 0 0 0.65rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--primary); }
.section-head { max-width: 62ch; margin-bottom: 2.25rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.35rem; border: 2px solid transparent; border-radius: var(--radius-btn); font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.75); }
.btn--ghost:hover { background: rgb(255 255 255 / 0.14); color: #fff; border-color: #fff; }
.arrow-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; text-decoration: none; }
.topbar { background: var(--secondary-dark); color: rgb(255 255 255 / 0.92); font-size: 0.82rem; text-align: center; padding: 0.5rem 1.25rem; }
.site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand__mark { flex: none; width: 42px; height: 42px; }
.brand__name { font-weight: 700; font-size: 1.02rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--secondary); }
.site-nav ul { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 0.5rem 0.7rem; border-radius: var(--radius-btn); font-size: 0.9rem; font-weight: 500; color: var(--secondary); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }
.mobile-nav { display: none; border-top: 1px solid var(--border); background: #fff; padding: 0.75rem 0 1.15rem; }
.mobile-nav a { display: block; padding: 0.7rem 0.35rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--secondary); text-decoration: none; }
.hero { position: relative; display: flex; align-items: center; min-height: 520px; padding-block: 3.5rem; background: var(--secondary); overflow: hidden; isolation: isolate; }
.hero--short { min-height: 340px; padding-block: 3rem; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background:
    radial-gradient(120% 100% at 78% 18%, rgb(217 178 106 / 0.30) 0%, transparent 58%),
    radial-gradient(90% 90% at 10% 88%, rgb(155 74 52 / 0.46) 0%, transparent 62%),
    linear-gradient(115deg, #172b25 0%, #223b34 48%, #3f6353 100%); }
.hero__pattern { position: absolute; inset: 0; z-index: -1; opacity: 0.16; pointer-events: none; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 24 19 / 0.86) 0%, rgb(11 24 19 / 0.62) 45%, rgb(11 24 19 / 0.30) 100%); }
.hero__inner { position: relative; max-width: 40rem; color: #fff; }
.hero h1 { color: #fff; margin-bottom: 0.75rem; }
.hero__sub { font-size: 1.1rem; font-weight: 600; color: var(--accent); margin-bottom: 0.9rem; }
.hero p.hero__body { color: rgb(255 255 255 / 0.9); font-size: 1.03rem; margin-bottom: 1.6rem; }
.hero .btn-row { margin-bottom: 1.4rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: rgb(255 255 255 / 0.85); }
.hero__trust li { display: flex; align-items: center; gap: 0.4rem; }
.hero__trust svg { flex: none; color: var(--accent); }
.hero__seal { display: none; }
.crumbs { font-size: 0.85rem; color: var(--muted-foreground); padding-block: 0.9rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--border-strong); }
.grid { display: grid; gap: 1.25rem; }
.features { display: grid; gap: 1.4rem; }
.feature__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); background: var(--primary); color: #fff; }
.feature h3 { font-size: 1rem; margin-bottom: 0.2rem; }
.feature p { font-size: 0.92rem; color: var(--muted-foreground); }
.card { display: flex; flex-direction: column; padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-strong); }
.card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border-radius: var(--radius); background: var(--muted); color: var(--primary); border: 1px solid var(--border); }
.card p { font-size: 0.94rem; color: var(--muted-foreground); }
.card--flag { border-top: 4px solid var(--primary); }
.tag { display: inline-block; margin-bottom: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.panel { display: grid; gap: 1.75rem; padding: 1.75rem; border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: var(--radius); background: linear-gradient(135deg, #ffffff 0%, var(--muted) 100%); box-shadow: var(--shadow-md); }
.panel h2 { margin-bottom: 0.5rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.checklist li { display: flex; gap: 0.6rem; font-size: 0.94rem; }
.checklist svg { flex: none; margin-top: 0.28rem; color: var(--primary); }
.section--dark .checklist svg { color: var(--accent); }
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.step { position: relative; padding: 1.4rem 1.4rem 1.4rem 1.4rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.step__num { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 0.8rem; border-radius: 999px; background: var(--secondary); color: #fff; font-size: 0.9rem; font-weight: 700; }
.step h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.step p { font-size: 0.92rem; color: var(--muted-foreground); margin: 0; }
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; text-align: center; }
.stat__num { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 700; color: var(--accent); line-height: 1.1; }
.stat__label { font-size: 0.9rem; color: rgb(255 255 255 / 0.85); }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.info-list .info__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); color: var(--primary); }
.info__label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
a.info__value:hover { color: var(--primary); text-decoration: underline; }
.form-card { padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--secondary); }
.field .hint { font-size: 0.78rem; font-weight: 400; color: var(--muted-foreground); }
.field input, .field select, .field textarea { width: 100%; padding: 0.65rem 0.75rem; font: inherit; font-size: 0.95rem; color: var(--foreground); background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-btn); }
fieldset legend { padding: 0; margin-bottom: 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.form-note { font-size: 0.82rem; color: var(--muted-foreground); margin-top: 0.9rem; }
.form-status[data-tone='ok'] { background: #eef6ee; border-color: #b8d9b8; color: #1f5130; }
.form-status[data-tone='error'] { background: #fdf0ec; border-color: #e8bfae; color: #8a2f12; }
.callout { display: grid; gap: 1rem; align-items: center; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.callout__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius); background: var(--secondary); color: var(--accent); }
.callout h2 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.callout p { font-size: 0.92rem; color: var(--muted-foreground); margin: 0; }
.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.pill-list li { padding: 0.4rem 0.85rem; border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; font-size: 0.87rem; font-weight: 500; color: var(--secondary); }
.section--dark .pill-list li { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.22); color: #fff; }
.faq { display: grid; gap: 0.75rem; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; font-weight: 600; font-size: 1rem; color: var(--secondary); cursor: pointer; list-style: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.35rem; font-weight: 400; color: var(--primary); line-height: 1; }
.faq .faq__body { padding: 0 1.15rem 1.15rem; font-size: 0.94rem; color: var(--muted-foreground); }
.prose { width: 100%; max-width: 72ch; }
.prose h2 { margin-top: 2.5rem; padding-top: 0.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.prose p, .prose li { color: #2b2b2b; }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--accent); background: var(--muted); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.96rem; }
.toc { padding: 1.25rem 1.4rem; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); }
.toc h2 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 0.7rem; }
.toc ol { margin: 0; padding-left: 1.1rem; font-size: 0.93rem; }
.toc li { margin-bottom: 0.3rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: #fff; }
caption { padding: 0.75rem 1rem; text-align: left; font-size: 0.85rem; color: var(--muted-foreground); background: var(--muted); border-bottom: 1px solid var(--border); }
th { background: var(--muted-2); font-weight: 700; color: var(--secondary); white-space: nowrap; }
.photo-ph { position: relative; display: grid; place-items: center; min-height: 220px; padding: 1.5rem; border: 2px dashed var(--border-strong); border-radius: var(--radius); background:
    linear-gradient(135deg, rgb(155 74 52 / 0.10) 0%, rgb(34 59 52 / 0.10) 100%),
    repeating-linear-gradient(45deg, var(--muted) 0 12px, var(--muted-2) 12px 24px); text-align: center; }
.photo-ph__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.photo-ph__caption { font-size: 0.9rem; color: var(--muted-foreground); max-width: 32ch; margin: 0.35rem auto 0; }
.quote { display: flex; flex-direction: column; padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.quote blockquote { margin: 0 0 1rem; font-size: 0.96rem; }
.quote__stars { display: flex; gap: 2px; color: var(--accent); margin-bottom: 0.8rem; }
.quote__by { margin-top: auto; font-size: 0.86rem; color: var(--muted-foreground); }
.quote__by strong { display: block; color: var(--foreground); font-size: 0.92rem; }
.site-footer { background: var(--secondary); color: rgb(255 255 255 / 0.78); font-size: 0.92rem; }
.footer-brand__name { font-weight: 700; color: #fff; font-size: 1rem; line-height: 1.2; }
.site-footer h3 { color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: var(--radius-btn); color: rgb(255 255 255 / 0.8); }
.footer-social a:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; justify-content: space-between; padding-block: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: 0.85rem; }
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-strong); border-top: 1px solid var(--border-strong); box-shadow: 0 -2px 12px rgb(0 0 0 / 0.12); }
.callbar a { padding: 0.85rem 0.5rem; background: #fff; color: var(--secondary); font-size: 0.9rem; font-weight: 600; text-align: center; text-decoration: none; }
.err { display: grid; place-items: center; text-align: center; padding-block: 5rem; }
.err__code { font-size: clamp(4rem, 16vw, 8rem); font-weight: 700; line-height: 1; color: var(--accent); letter-spacing: -0.04em; }
.u-mt-125 { margin-top:1.25rem; }
.u-white { color:#fff; }
.u-mt-1 { margin-top:1rem; }
.u-row-center-15 { justify-content:center; margin-top:1.5rem; }
.u-mt-2 { margin-top:2rem; }
.u-mt-175 { margin-top:1.75rem; }
.u-fs-095 { font-size:0.95rem; }
.u-narrow { max-width:60rem; margin-inline:auto; }
.u-my-15 { margin:1.5rem 0; }
.u-fs-125 { font-size:1.25rem; }
.u-fs-115 { font-size:1.15rem; }
.u-fs-098 { font-size:0.98rem; }
.u-my-2 { margin:2rem 0; }
.u-panel-ghost { margin-top:2.5rem; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); }
.u-mt-15 { margin-top:1.5rem; }
.u-row-center-175 { justify-content:center; margin-top:1.75rem; }
.u-fw-500 { font-weight:500; }
.u-fs-135 { font-size:1.35rem; }
.u-fs-094-muted { font-size:0.94rem; color:var(--muted-foreground); }
.u-white-80 { color:rgba(255,255,255,.8); }
.u-white-mt-175 { color:#fff; margin-top:1.75rem; }
.u-accent { color:var(--accent); }
.u-bt-0 { border-top:0; }
.u-btn-accent { background:var(--accent); border-color:var(--accent); color:#223b34; }

/* ---- media queries, ascending (mobile-first) ---------------------- */
@media (min-width: 800px) {
  .callout { grid-template-columns: 56px 1fr auto; gap: 1.4rem; }
}
@media (min-width: 900px) {
  .hero__seal { display: block; position: absolute; right: 2rem; bottom: 1.5rem; width: 132px; opacity: 0.5; pointer-events: none; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1.05fr 1fr; gap: 3rem; }
  .split--wide-right { grid-template-columns: 1fr 1.15fr; }
  .panel { grid-template-columns: 1.15fr 1fr; padding: 2.25rem; align-items: center; }
}
@media (min-width: 1024px) {
  .header-cta { display: flex; align-items: center; gap: 0.9rem; }
  .header-cta__num { font-weight: 700; font-size: 0.95rem; color: var(--secondary); text-decoration: none; white-space: nowrap; }
  .header-cta__num:hover { color: var(--primary); }
  .header-cta__note { font-size: 0.85rem; color: var(--muted-foreground); white-space: nowrap; }
}
@media (max-width: 1023px) {
  body { padding-bottom: 54px; }
}

/* ---- cascade repair -------------------------------------------------
   These four declarations live in base.css inside media queries, but this
   file declares the same properties at top level and loads afterwards.
   Media queries carry no specificity, so the later top-level rule was
   winning and the responsive behaviour was silently lost:

     .callbar     stayed visible over content at desktop
     .mobile-nav  never got its desktop reset
     .stats       stayed 2-up instead of 4-up above 900px
     html         kept smooth scrolling for reduced-motion users

   Re-declared here so they land last. Values are copied verbatim from
   base.css — nothing new is introduced. */
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .mobile-nav,
  .mobile-nav.is-open { display: none; }
  .callbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Contact page phone: the one piece of information on that page a visitor
   may want to act on immediately, so it reads as a link and not as body
   copy sitting inside the info list. */
.info__phone { font-weight: 700; font-size: 1.05rem; color: var(--secondary); text-decoration: none; }
.info__phone:hover { color: var(--primary); text-decoration: underline; }