/* Rose Rock Realty -- site styles. No framework, no build step.

   Palette sampled directly from the real logo (src/assets_src/logo-live.png):
   red #E1322A, orange #F08320, teal #00A8C0. The logo has no dark element, so the
   dark tones below are a deep teal-ink derived to sit under the teal rather than
   fight it.

   Note --accent is #D42B23, very slightly darker than the logo red. White text on the
   logo red lands at 4.48:1, just under the 4.5:1 WCAG AA threshold; #D42B23 clears it
   at 5.0:1 and is visually indistinguishable next to the logo. The exact logo red is
   kept as --accent-bright for decorative use where nothing sits on top of it. */

:root {
  --ink-900: #061A21;
  --ink-800: #0B2730;
  --link: #0F6C7A;
  --brand-tint: #EAF6F8;
  --accent: #D42B23;
  --accent-dark: #A81C15;
  --accent-tint: #FDEEEC;
  --accent-bright: #E1322A;
  --brand-orange: #F08320;
  --teal: #00A8C0;
  --teal-dark: #0F6C7A;
  --ink: #1B2127;
  --gray-700: #3F4750;
  --gray-600: #566069;
  --gray-500: #6E7880;
  --gray-300: #CBD3D7;
  --gray-200: #E3E9EC;
  --gray-100: #F5F8F9;
  --white: #ffffff;
  --red: #A81C15;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(6, 26, 33, .06);
  --shadow: 0 10px 30px rgba(6, 26, 33, .09);
  --shadow-lg: 0 24px 60px rgba(6, 26, 33, .18);
  --max-width: 1220px;
  --font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white);
  line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased;
}
img, svg.logo { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--accent-dark); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--ink-800); }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
h3 { font-size: 1.16rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink-800); color: #fff; padding: 10px 16px; z-index: 1000; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: .96rem;
  border: 2px solid transparent; cursor: pointer; text-align: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--white); box-shadow: 0 8px 20px rgba(212, 43, 35, .28); }
.btn-primary:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(212, 43, 35, .36); }
.btn-outline { border-color: rgba(255,255,255,.55); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,.14); border-color: var(--white); color: var(--white); transform: translateY(-2px); }
.btn-secondary { border-color: var(--gray-300); color: var(--ink-800); background: var(--white); }
.btn-secondary:hover { border-color: var(--ink-800); background: var(--brand-tint); color: var(--ink-800); transform: translateY(-2px); }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

.phone-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-800); white-space: nowrap; }
.phone-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.phone-link.light { color: var(--white); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(10px); box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--gray-200); }
.header-inner { display: flex; align-items: center; gap: 16px; padding: 10px 24px; max-width: 1440px; margin: 0 auto; }
.brand { flex-shrink: 0; display: block; }
.brand .logo { height: 40px; width: auto; }
.footer-brand .logo { height: 44px; width: auto; }
.main-nav { flex: 1; }
.main-nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a { display: flex; align-items: center; gap: 4px; padding: 9px 11px; border-radius: 8px; font-weight: 600; color: var(--ink); font-size: .92rem; white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease); }
.main-nav > ul > li > a:hover { background: var(--brand-tint); color: var(--ink-800); }
.caret { font-size: .55em; opacity: .6; transition: transform .15s var(--ease); }
.has-children:hover .caret { transform: rotate(180deg); }
.submenu { opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s var(--ease), transform .16s var(--ease); position: absolute; top: 100%; left: 0; background: var(--white); box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); border-radius: var(--radius); list-style: none; margin: 6px 0 0; padding: 8px; min-width: 260px; }
/* Hover bridge. The submenu sits 6px below the nav item, and that gap is not part of
   any hoverable box -- so moving the cursor down from the link crossed dead space,
   :hover dropped, and the menu vanished before you could reach it. This invisible
   strip spans the gap. It belongs to the submenu, so it is hidden along with it and
   never intercepts anything while the menu is closed. Same fix as 1907pm.com. */
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.has-children:hover .submenu, .has-children:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: .93rem; white-space: nowrap; color: var(--ink); }
.submenu li a:hover { background: var(--accent-tint); color: var(--accent-dark); }
.header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-cta .phone-link { font-family: var(--font-head); font-size: .93rem; }
.nav-toggle { display: none; }
.mobile-nav { display: none; }

/* Measured: brand + nav + phone + CTA need about 1189px. The old cutoff of 1280px
   therefore collapsed the full nav to a hamburger on a 1280-wide laptop -- a very
   common size -- while the nav would have fitted with room to spare. 1220 keeps a
   ~30px margin over the measured requirement and restores the real nav on those
   screens. */
@media (max-width: 1220px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; margin-left: auto; cursor: pointer; }
  .nav-toggle span { width: 24px; height: 2px; border-radius: 2px; background: var(--ink-800); display: block; }
  .mobile-nav { display: none; flex-direction: column; gap: 8px; padding: 16px 24px 24px; border-top: 1px solid var(--gray-200); background: var(--white); }
  .mobile-nav.open { display: flex; }
  .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
  .mobile-nav ul ul { padding-left: 16px; }
  .mobile-nav a { display: block; padding: 9px 0; font-weight: 600; color: var(--ink); }
  .mobile-nav .phone-link { display: block; margin-top: 8px; }
  .mobile-nav a.btn { display: inline-flex; padding: 13px 24px; color: var(--white); margin-top: 4px; }
  .mobile-nav .caret { display: none; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding: 14px 0; font-size: .85rem; color: var(--gray-500); background: var(--brand-tint); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 auto; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--gray-300); }
.breadcrumbs a { color: var(--gray-600); }
.breadcrumbs a:hover { color: var(--accent-dark); }

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--white); overflow: hidden; background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-800) 45%, var(--link) 100%); }
.hero::after { content: ""; position: absolute; right: -8%; top: -30%; width: 55%; height: 160%; background: radial-gradient(circle, rgba(241,77,28,.22), transparent 62%); pointer-events: none; }
.hero-content { position: relative; z-index: 2; padding: 84px 24px 76px; max-width: 760px; }
.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--accent); font-size: .8rem; margin-bottom: 14px; font-family: var(--font-head); }
.hero h1 { color: var(--white); }
.hero-subtitle { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 640px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 18px; }
.hero-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 700; font-size: 1.08rem; font-family: var(--font-head); }
.hero-phone svg { flex-shrink: 0; width: 19px; height: 19px; }

.post-hero { background: var(--brand-tint); padding: 56px 0 44px; border-bottom: 1px solid var(--gray-200); }
.post-hero h1 { max-width: 880px; }
.post-meta { color: var(--gray-500); font-size: .9rem; margin: 0; }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--ink-900); color: rgba(255,255,255,.92); }
.trust-bar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding-top: 18px; padding-bottom: 18px; }
.trust-item { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .93rem; }
.trust-item svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }

/* ---------- Answer box (AEO) ---------- */
/* No negative margin here. The answer box follows the trust bar on ~29 pages (home,
   every city page, every situation page, the offer page), and pulling it upward
   covered the trust bar's text. It only overlapped cleanly on the few pages where it
   sits directly under the hero, so it is spaced normally everywhere instead. */
.answer-box-wrap { padding-top: 44px; position: relative; z-index: 5; }
.answer-box { background: var(--white); border: 1px solid var(--gray-200); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 28px 32px; box-shadow: var(--shadow); }
.answer-q { font-family: var(--font-head); font-weight: 800; color: var(--ink-800); font-size: 1.1rem; margin: 0 0 10px; }
.answer-a p { margin: 0; color: var(--gray-700); }
.answer-a strong { color: var(--ink); }

/* ---------- Key takeaways ---------- */
.key-takeaways { padding-top: 40px; padding-bottom: 0; }
.key-takeaways-box { background: var(--brand-tint); border-radius: var(--radius); padding: 26px 30px; }
.key-takeaways-box h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin-bottom: .6em; }
.key-takeaways-box h2 svg { width: 22px; height: 22px; color: var(--link); }
.key-takeaways-box ul { margin: 0; padding-left: 1.2em; }
.key-takeaways-box li { margin-bottom: .5em; color: var(--gray-700); }

/* ---------- Sections ---------- */
.section { padding: 76px 0; }
.section + .section { padding-top: 0; }
.bg-light { background: var(--gray-100); }
.bg-white { background: var(--white); }
.section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.section-lead { color: var(--gray-600); font-size: 1.05rem; }
.center { text-align: center; }
.center-link { text-align: center; margin-top: 28px; }

.prose { color: var(--gray-700); }
.prose.narrow { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 1.5em; }
.prose h3 { margin-top: 1.4em; color: var(--link); }
.prose .lead { font-size: 1.12rem; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.check-list, .warn-list { list-style: none; padding-left: 0; }
.check-list li, .warn-list li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.check-list li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 6px; border-left: 2.5px solid var(--link); border-bottom: 2.5px solid var(--link); transform: rotate(-45deg); }
.warn-list li::before { content: "!"; position: absolute; left: 2px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: .25em; }
.numbered-list { padding-left: 1.3em; }
.numbered-list li { margin-bottom: .7em; }

.formula { background: var(--brand-tint); border-radius: var(--radius-sm); padding: 16px 20px; font-size: 1.02rem; color: var(--ink); }
.note-block { background: var(--accent-tint); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 18px; font-size: .92rem; color: var(--gray-700); }
.inline-cta { background: var(--brand-tint); border-radius: var(--radius-sm); padding: 18px 22px; font-weight: 500; }
.table-note { font-size: .88rem; color: var(--gray-500); max-width: 760px; margin: 18px auto 0; text-align: center; }

/* ---------- Grids and cards ---------- */
.grid { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .cols-4, .cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr !important; } }

.card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card p { color: var(--gray-600); margin-bottom: 0; font-size: .96rem; }
.icon-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.icon-circle svg { width: 24px; height: 24px; color: var(--link); }
.guide-card .btn { margin-top: 16px; }

/* ---------- Process steps ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 30px 26px 26px; position: relative; }
.step-num { position: absolute; top: -18px; left: 26px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(241,77,28,.32); }
.step-card h3 { margin-top: 12px; }
.step-card p { color: var(--gray-600); margin-bottom: 0; font-size: .96rem; }

/* ---------- Comparison table ---------- */
.table-scroll { overflow-x: auto; max-width: 900px; margin: 0 auto; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); font-size: .95rem; min-width: 620px; }
.compare-table thead th { background: var(--ink-800); color: #fff; font-family: var(--font-head); padding: 16px 18px; text-align: left; font-size: .98rem; }
.compare-table thead th:last-child { background: var(--gray-500); }
.compare-table tbody th { text-align: left; font-weight: 600; color: var(--ink); padding: 14px 18px; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); width: 28%; }
.compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--gray-200); color: var(--gray-700); vertical-align: top; }
.compare-table .col-us { color: var(--ink); font-weight: 600; }
.compare-table .col-us svg { width: 17px; height: 17px; color: var(--link); display: inline-block; vertical-align: -3px; margin-right: 7px; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 18px 22px; font-family: var(--font-head); font-weight: 700; color: var(--ink-800); list-style: none; position: relative; padding-right: 52px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--accent); font-weight: 400; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 22px 20px; color: var(--gray-700); }
.faq-answer p { margin: 0; }

/* ---------- Area + situation cards ---------- */
.area-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; display: block; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.area-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.area-card h3 { margin-bottom: 4px; font-size: 1.02rem; }
.area-card span { font-size: .84rem; color: var(--gray-500); font-weight: 600; }
.area-card.is-current { border-color: var(--link); background: var(--brand-tint); }

.situation-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 26px; display: block; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.situation-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.situation-card h3 { margin-bottom: 6px; }
.situation-card p { color: var(--gray-600); font-size: .94rem; margin: 0; }
.situation-card.is-current { border-color: var(--link); background: var(--brand-tint); }

/* ---------- Forms ---------- */
.form-wrap { max-width: 720px; }
.offer-form { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.offer-form.compact { padding: 24px; }
.offer-form h2 { font-size: 1.5rem; }
.offer-form > p { color: var(--gray-600); font-size: .96rem; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--gray-700); }
.field label span { color: var(--red); }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--white);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(52,58,138,.14); }
.form-note { font-size: .86rem; color: var(--gray-500); margin: 14px 0 0; text-align: center; }
/* Netlify Forms honeypot -- must stay in the DOM and stay invisible to people. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.offer-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 940px) { .offer-split { grid-template-columns: 1fr; gap: 32px; } }
.offer-split-copy h2:first-child { margin-top: 0; }
.contact-block { margin-bottom: 20px; }
.big-phone { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--ink-800); }
.prefer-call { font-weight: 600; }

/* ---------- CTA banner ---------- */
.cta-banner { background: linear-gradient(135deg, var(--ink-900), var(--link)); color: var(--white); padding: 66px 0; text-align: center; }
.cta-banner h2 { color: var(--white); }
.cta-banner p { color: rgba(255,255,255,.88); max-width: 660px; margin: 0 auto 28px; }
.cta-actions { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 800px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 28px; display: block; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.post-card time { font-size: .84rem; color: var(--gray-500); font-weight: 600; }
.post-card h2 { font-size: 1.28rem; margin: 8px 0 10px; }
.post-card p { color: var(--gray-600); font-size: .96rem; }
.read-more { font-weight: 700; color: var(--accent-dark); font-size: .92rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: rgba(255,255,255,.78); padding: 64px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.site-footer h3 { color: var(--white); font-size: 1rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul.cols-2 { columns: 2; column-gap: 20px; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,.78); font-size: .93rem; }
.site-footer a:hover { color: var(--accent); }
.footer-brand .logo { margin-bottom: 18px; }
.footer-nap { font-size: .95rem; line-height: 1.7; }
.footer-nap strong { color: var(--white); }
.footer-nap a { font-weight: 700; color: var(--accent); }
.footer-blurb { font-size: .88rem; color: rgba(255,255,255,.6); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; padding-bottom: 12px; font-size: .86rem; }
.footer-bottom p { margin: 0; }
.footer-disclaimer { padding-bottom: 36px; }
.footer-disclaimer p { font-size: .8rem; color: rgba(255,255,255,.45); margin: 0; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Rose Rock additions: listings, bios, guides, contact, sitemap, fair housing
   ========================================================================== */

/* ---------- Form select (the investor form routes by goal) ---------- */
.offer-form select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm); font: inherit; color: var(--ink);
  background: var(--white); appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566069' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}
.offer-form select:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal-dark); }

/* ---------- Rent-to-own listing cards ---------- */
.listings-grid { gap: 26px; }
.listing-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--teal); color: var(--ink); }
.listing-media { position: relative; aspect-ratio: 3 / 2; background: var(--brand-tint); }
.listing-media img { width: 100%; height: 100%; object-fit: cover; }
.listing-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--teal); }
.listing-placeholder svg { width: 56px; height: 56px; }
.listing-badge {
  position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--ink-800); color: var(--white);
}
.listing-badge.is-pending { background: var(--brand-orange); }
.listing-badge.is-sold { background: var(--gray-600); }
.listing-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.listing-body h3 { margin-bottom: .15em; color: var(--ink-800); }
.listing-loc { color: var(--gray-600); font-size: .93rem; margin-bottom: 14px; }
.listing-specs { display: flex; gap: 16px; list-style: none; margin: 0 0 16px; padding: 0; flex-wrap: wrap; }
.listing-specs li { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--gray-700); font-weight: 600; }
.listing-specs svg { width: 17px; height: 17px; color: var(--teal-dark); flex-shrink: 0; }
.listing-terms {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--gray-200);
}
.listing-terms > div { display: flex; flex-direction: column; gap: 2px; }
.lt-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); font-weight: 700; }
.lt-value { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; color: var(--accent-dark); }

/* ---------- Listing detail page ---------- */
.listing-hero { padding: 42px 0 26px; background: var(--brand-tint); }
.listing-hero h1 { margin-bottom: .2em; }
.listing-sub { font-size: 1.12rem; color: var(--gray-700); margin: 0; }
.listing-hero-media { margin: 24px 0 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.listing-hero-media img { width: 100%; height: auto; object-fit: cover; }
.listing-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.listing-gallery img { width: 100%; border-radius: var(--radius); object-fit: cover; }
.listing-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.listing-tables { display: flex; flex-direction: column; gap: 22px; }
.listing-city-link { font-size: .95rem; color: var(--gray-600); }
.status-note { padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600; margin-top: 16px; display: inline-block; }
.status-note.is-pending { background: #FFF3E4; color: #8A4A05; }
.status-note.is-sold { background: var(--gray-100); color: var(--gray-700); }

.spec-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.spec-table caption { text-align: left; font-family: var(--font-head); font-weight: 800; color: var(--ink-800); padding: 0 0 10px; font-size: 1.05rem; }
.spec-table th, .spec-table td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--gray-200); font-size: .96rem; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { font-weight: 600; color: var(--gray-600); width: 52%; }
.spec-table td { font-weight: 700; color: var(--ink-800); }

.feature-list { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; }
.feature-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .95rem; }
.feature-list svg { width: 18px; height: 18px; color: var(--teal-dark); flex-shrink: 0; margin-top: 3px; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; max-width: 620px; margin: 0 auto; padding: 44px 28px; background: var(--white); border: 1px dashed var(--gray-300); border-radius: var(--radius-lg); }
.empty-state .icon-circle { margin: 0 auto 18px; }
.empty-state .cta-actions { justify-content: center; margin-top: 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* ---------- Plain comparison table (no "us vs them" colouring) ---------- */
.compare-table.plain td { color: var(--gray-700); }
.compare-table.plain thead th { background: var(--ink-800); color: var(--white); }

/* ---------- About / bios ---------- */
.bio-grid { display: grid; gap: 28px; margin-bottom: 26px; }
.bio-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; background: var(--white); padding: 26px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); }
.bio-card img { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 1; }
.bio-role { color: var(--accent-dark); font-weight: 700; margin-bottom: .6em; }

/* ---------- Guides ---------- */
.guides-grid { gap: 24px; }
.guide-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--teal); color: var(--ink); }
.guide-card h3 { color: var(--ink-800); }
.guide-card p { color: var(--gray-600); font-size: .95rem; flex: 1; }
.read-more { font-weight: 700; color: var(--accent-dark); font-size: .93rem; }
.guide-hero { background: var(--brand-tint); }
.guide-meta { font-size: .88rem; color: var(--gray-500); margin: 14px 0 0; }
.prose .disclaimer { background: var(--gray-100); border-left: 4px solid var(--teal); padding: 16px 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .95rem; color: var(--gray-700); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list svg { width: 22px; height: 22px; color: var(--teal-dark); flex-shrink: 0; margin-top: 3px; }
.contact-list span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); font-weight: 700; }
.contact-list a { font-weight: 700; font-size: 1.05rem; }
.contact-routes { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.contact-routes a { display: block; padding: 12px 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-weight: 600; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.contact-routes a:hover { border-color: var(--teal); background: var(--brand-tint); }
.contact-note { font-size: .93rem; color: var(--gray-600); }

/* ---------- Sitemap ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 34px; }
.sitemap-col h2 { font-size: 1.1rem; margin-bottom: .6em; }
.sitemap-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }

/* ---------- Misc ---------- */
.center-cta { text-align: center; margin-top: 34px; }
.footer-col h3.mt { margin-top: 26px; }

/* Equal Housing Opportunity block in the footer */
.footer-disclaimer .eho { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.footer-disclaimer .eho-mark { flex-shrink: 0; color: rgba(255, 255, 255, .85); }
.footer-disclaimer .eho-mark svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .listing-detail-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .bio-card { grid-template-columns: 1fr; }
  .bio-card img { max-width: 240px; }
}
@media (max-width: 640px) {
  .listing-terms { grid-template-columns: 1fr 1fr; }
  .listing-hero { padding: 30px 0 20px; }
}

/* ---------- Featured listings (our own flips) ---------- */
.flip-card .listing-body { padding-top: 18px; }
.flip-price {
  font-family: var(--font-head); font-weight: 800; font-size: 1.32rem;
  color: var(--accent-dark); margin: 0 0 .15em; letter-spacing: -.01em;
}
.flip-card h3 { font-size: 1.04rem; margin-bottom: .1em; }
.flip-reno-count {
  display: flex; align-items: center; gap: 7px; margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--gray-200); font-size: .88rem; font-weight: 600;
  color: var(--teal-dark);
}
.flip-reno-count svg { width: 17px; height: 17px; flex-shrink: 0; }

.flip-hero-price {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--accent-dark);
  margin: .3em 0 0; letter-spacing: -.02em;
}

/* The renovation list is the point of these pages, so it gets more weight than a
   generic feature list. */
.reno-list { margin-top: 12px; }
.reno-list li { font-weight: 600; }
.reno-note {
  margin-top: 14px; padding: 14px 18px; background: var(--brand-tint);
  border-radius: var(--radius-sm); font-size: .92rem; color: var(--gray-700);
}
.listing-copy h3 { margin-top: 26px; }
.listing-copy h3:first-child { margin-top: 0; }

/* ---------- Price reductions ---------- */
.price-was {
  margin-left: 10px; font-size: .78em; font-weight: 600; color: var(--gray-500);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.price-cut {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-dark);
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; vertical-align: middle;
}
.price-reduced-note {
  margin: .4em 0 0; font-size: .96rem; font-weight: 600; color: var(--accent-dark);
}

/* ---------- Dual offer: for sale AND rent-to-own ---------- */
.flip-rto-flag, .rto-hero-line {
  display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--teal-dark);
}
.flip-rto-flag {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--gray-200);
  font-size: .88rem;
}
.flip-rto-flag svg, .rto-hero-line svg { width: 17px; height: 17px; flex-shrink: 0; }
.rto-hero-line { margin: .5em 0 0; font-size: 1rem; }
.listing-note {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--gray-200);
  font-size: .86rem; color: var(--gray-600); font-weight: 600;
}
.ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.way-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.way-card h3 { display: flex; align-items: center; gap: 9px; color: var(--ink-800); }
.way-card h3 svg { width: 21px; height: 21px; color: var(--teal-dark); flex-shrink: 0; }
.way-price {
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem;
  color: var(--accent-dark); margin: .2em 0 .5em; letter-spacing: -.01em;
}
.way-price span {
  display: block; font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  color: var(--gray-600); letter-spacing: 0; margin-top: 2px;
}

/* ---------- Gallery links + lightbox ---------- */
.gallery-link { display: block; position: relative; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.gallery-link:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.listing-gallery .gallery-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.listing-gallery .gallery-link:hover img { transform: scale(1.04); }

/* "View all N photos" badge on the hero image */
.gallery-count {
  position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center;
  gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(6, 26, 33, .82);
  color: #fff; font-size: .9rem; font-weight: 700; backdrop-filter: blur(6px);
  pointer-events: none;
}
.gallery-count svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .gallery-count { right: 10px; bottom: 10px; padding: 8px 13px; font-size: .82rem; } }

/* Stop the page scrolling behind the open viewer */
html.lb-open, html.lb-open body { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; background: rgba(6, 26, 33, .94); padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox.is-entering { animation: lb-in .18s var(--ease); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.lb-img {
  max-width: min(1400px, 92vw); max-height: 82vh; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #0b2730;
}
.lb-caption { color: rgba(255, 255, 255, .82); font-size: .92rem; font-weight: 600; letter-spacing: .02em; }

.lb-close, .lb-nav {
  position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12);
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.lb-close { top: 18px; right: 18px; width: 46px; height: 46px; font-size: 1.9rem; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2.4rem; line-height: 1; padding-bottom: 6px; }
.lb-nav:hover { transform: translateY(-50%) scale(1.06); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-nav[hidden] { display: none; }

@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lb-img { max-width: 96vw; max-height: 74vh; }
  .lb-nav { width: 44px; height: 44px; font-size: 2rem; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-close { top: 10px; right: 10px; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .listing-gallery .gallery-link:hover img { transform: none; }
  .lb-nav:hover { transform: translateY(-50%); }
  .lightbox.is-entering { animation: none; }
}