/* ===================== Oscar Andrade Real Estate — Styles ===================== */

:root {
--navy: #12151c;
--charcoal: #1b1f27;
--copper: #95591f;
--copper-light: #d99a5b;
--cream: #f7f4ef;
--ink: #1c1c1c;
--muted: #6b6b6b;
--border: #e7e2d9;
--radius: 10px;
--shadow: 0 20px 40px -20px rgba(18, 21, 28, 0.35);
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background: var(--cream);
line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}

.eyebrow {
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--copper);
margin: 0 0 10px;
}
.center { text-align: center; }
.area-sub { max-width: 620px; margin: 14px auto 0; color: var(--muted); }

h1, h2, h3, h4 {
font-family: var(--serif);
color: var(--navy);
margin: 0 0 16px;
font-weight: 600;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.12; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; margin-bottom: 8px; }
p { color: #3a3a3a; }

.btn {
display: inline-block;
padding: 14px 30px;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
cursor: pointer;
border: 1px solid transparent;
}
.btn-primary {
background: var(--copper);
color: #fff;
box-shadow: 0 10px 24px -10px rgba(179, 112, 47, 0.6);
}
.btn-primary:hover { background: #9c5e28; transform: translateY(-1px); }
.btn-ghost {
background: transparent;
border-color: rgba(255,255,255,0.5);
color: inherit;
}
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.1); }

/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(18, 21, 28, 0.96);
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header .container {
/* The header needs more room than the standard 1140px content container —
8 nav items plus dropdowns and a CTA button don't fit in that width
at any screen size, which was causing wrapping/cramming on laptop-width
screens (e.g. 1366px). This override only affects the header. */
max-width: 1400px;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 44px; width: auto; }
.brand-text {
font-family: var(--serif);
font-size: 1.25rem;
color: #fff;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.brand-text em { color: var(--copper-light); font-style: normal; }
.trust-strip .credential-icon { height: 16px; width: auto; vertical-align: -3px; margin-right: 6px; }

/* header-right groups the collapsible nav links with the always-visible
CTA button + hamburger toggle, so the CTA never disappears into the
mobile menu the way the plain links do. */
.header-right { display: flex; align-items: center; gap: 24px; }
.header-actions { display: flex; align-items: center; gap: 14px; }

.main-nav { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; }
.main-nav a { white-space: nowrap; }
.main-nav a {
color: rgba(255,255,255,0.85);
font-size: 0.92rem;
font-weight: 500;
}
.main-nav a:hover { color: #fff; }
.nav-cta {
background: var(--copper);
color: #fff !important;
padding: 9px 20px;
border-radius: 999px;
white-space: nowrap;
}
.nav-cta:hover { background: #9c5e28; }

.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: #fff; display: block; }

/* ---------- Hero ---------- */
.hero {
background: linear-gradient(160deg, var(--navy) 0%, #1d2230 55%, var(--navy) 100%);
color: #fff;
padding: 90px 0 70px;
overflow: hidden;
}
.hero-inner {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: center;
}
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--copper-light); }
.hero-sub { color: rgba(255,255,255,0.8); font-size: 1.08rem; max-width: 520px; }
.hero-actions { display: flex; gap: 16px; margin: 30px 0 34px; flex-wrap: wrap; }
.hero-trust {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
}
.hero-trust li {
font-size: 0.85rem;
color: rgba(255,255,255,0.75);
position: relative;
padding-left: 18px;
}
.hero-trust li::before {
content: "";
position: absolute;
left: 0; top: 7px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--copper-light);
}
.hero-media { display: flex; justify-content: center; }
.hero-photo {
border-radius: var(--radius);
box-shadow: var(--shadow);
max-height: 480px;
width: auto;
object-fit: cover;
}

/* ---------- About ---------- */
.about { padding: 90px 0; }
.about-inner {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 60px;
align-items: center;
}
.about-media img {
border-radius: var(--radius);
box-shadow: var(--shadow);
aspect-ratio: 1/1;
object-fit: cover;
}
.credentials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid var(--border);
}
.credential { display: flex; flex-direction: column; gap: 4px; }
.credential-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--copper);
font-weight: 600;
}
.credential-value { font-size: 0.95rem; color: var(--navy); font-weight: 500; }
.credential-seal { display: flex; align-items: center; gap: 4px; }
.credential-seal img { height: 40px; width: auto; }
.placeholder-fill {
color: #a34b3f;
background: #fbeeec;
padding: 1px 8px;
border-radius: 5px;
font-style: italic;
font-weight: 500;
}

/* ---------- Services ---------- */
.services { padding: 90px 0; background: #fff; }
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 46px;
}
.service-card {
padding: 32px 24px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--cream);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card.featured { border-color: var(--copper); background: var(--cream); box-shadow: 0 16px 32px -18px rgba(179,112,47,0.35); }
.service-icon {
width: 46px; height: 46px;
color: var(--copper);
margin-bottom: 16px;
}
.service-icon svg { width: 100%; height: 100%; }
.service-card p { font-size: 0.92rem; color: var(--muted); margin: 0 0 14px; }
.service-card .card-link { font-size: 0.85rem; font-weight: 600; color: var(--copper); }
.service-card .card-link:hover { color: #9c5e28; }

/* ---------- Why ---------- */
.why { padding: 90px 0; background: var(--navy); color: #fff; }
.why h2, .why .eyebrow { color: #fff; }
.why .eyebrow { color: var(--copper-light); }
.why-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 40px;
text-align: left;
}
.why-item {
padding: 26px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
}
.why-item h4, .why-item h3 { color: var(--copper-light); }
.why-item h3 { font-size: 1.1rem; margin-bottom: 8px; }
.why-item p { color: rgba(255,255,255,0.72); margin: 0; font-size: 0.92rem; }

/* ---------- Area ---------- */
.area { padding: 80px 0; background: #fff; }

/* ---------- Testimonials ---------- */
.testimonials { padding: 90px 0; background: var(--cream); }
.stars-row {
color: var(--copper);
font-size: 1.3rem;
letter-spacing: 3px;
margin: 6px 0 40px;
}
.stars-label {
font-family: var(--sans);
font-size: 0.85rem;
letter-spacing: 0;
color: var(--muted);
vertical-align: middle;
margin-left: 8px;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
}
.testimonial-card {
margin: 0;
padding: 30px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.testimonial-card p {
font-size: 0.95rem;
color: #333;
margin: 0 0 16px;
}
.testimonial-card footer {
font-size: 0.85rem;
color: var(--copper);
font-weight: 600;
}

/* ---------- Contact ---------- */
.contact { padding: 90px 0; background: #fff; }
.contact-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.contact-list { list-style: none; padding: 0; margin: 26px 0; }
.contact-list li {
display: flex;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
font-size: 0.95rem;
}
.contact-label {
min-width: 70px;
font-weight: 600;
color: var(--copper);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding-top: 2px;
}
.social-row { display: flex; gap: 12px; margin-top: 8px; }
.social-row a {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--navy);
border: 1px solid var(--navy);
display: flex; align-items: center; justify-content: center;
font-size: 0;
position: relative;
}
.social-row a::before {
content: "";
width: 18px; height: 18px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.social-row a[aria-label="Instagram"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='white' stroke='none'/%3E%3C/svg%3E");
}
.social-row a[aria-label="Facebook"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17 2h-2.5C12 2 10 4 10 6.5V9H7v3h3v10h3V12h3l1-3h-4V6.9c0-.8.6-1.4 1.4-1.4H17V2z'/%3E%3C/svg%3E");
}
.social-row a:hover { background: var(--copper); border-color: var(--copper); }

.contact-form {
background: var(--cream);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
display: flex;
flex-direction: column;
}
.form-note {
font-size: 0.8rem;
color: #a34b3f;
background: #fbeeec;
padding: 10px 14px;
border-radius: 8px;
margin: 0 0 18px;
}
.contact-form label {
font-size: 0.8rem;
font-weight: 600;
color: var(--navy);
margin: 12px 0 6px;
}
.contact-form input, .contact-form textarea {
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 8px;
font-family: var(--sans);
font-size: 0.95rem;
background: #fff;
resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus {
outline: 2px solid var(--copper-light);
outline-offset: 1px;
}
.contact-form .btn { margin-top: 20px; align-self: flex-start; }
.form-status { font-size: 0.85rem; margin: 12px 0 0; color: var(--copper); min-height: 1.2em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.6); padding: 40px 0; }
.footer-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer-logo { height: 36px; width: auto; flex-shrink: 0; opacity: 0.9; }
.footer-inner p { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.footer-disclosure { max-width: 560px; }
.footer-credential {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 0 4px;
}
.footer-credential img { height: 26px; width: auto; }
.footer-credential span {
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--copper-light);
}
.footer-disclosure.placeholder-fill { background: transparent; color: #d99a5b; font-style: italic; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 4px 0; }
.footer-links a { font-size: 0.82rem; color: rgba(255,255,255,0.65); }
.footer-links a:hover { color: #fff; }

/* ---------- Webinar Page ---------- */
.webinar-hero-inner { grid-template-columns: 1fr; max-width: 720px; }
.webinar-facts {
list-style: none;
padding: 0;
margin: 28px 0 8px;
display: grid;
grid-template-columns: repeat(2, auto);
gap: 14px 40px;
}
.webinar-facts li {
font-size: 1rem;
color: #fff;
}
.webinar-fact-label {
display: block;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--copper-light);
margin-bottom: 2px;
}
.countdown { display: flex; gap: 22px; margin: 30px 0 6px; flex-wrap: wrap; }
.countdown-item {
text-align: center;
min-width: 68px;
padding: 12px 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius);
}
.countdown-num {
display: block;
font-family: var(--serif);
font-size: 1.9rem;
font-weight: 700;
color: #fff;
line-height: 1.1;
}
.countdown-label {
display: block;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--copper-light);
margin-top: 4px;
}
.countdown-ended {
color: var(--copper-light);
font-weight: 600;
font-size: 1.05rem;
margin: 30px 0 6px;
}

.trust-bar { padding: 22px 0; background: var(--navy); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.trust-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; text-align: center; }
.trust-bar p { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.85); font-weight: 500; }
.trust-bar .divider { color: var(--copper-light); }

.cohost-bar { padding: 34px 0; background: var(--cream); border-bottom: 1px solid var(--border); }
.cohost-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
flex-wrap: wrap;
}
.cohost-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin: 0;
font-weight: 600;
}
.cohost-logos { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.cohost-logo { height: 34px; width: auto; }

.webinar-topics { padding: 90px 0; background: #fff; }
.topics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 46px;
}
.topic-card {
padding: 28px 24px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--cream);
position: relative;
}
.topic-num {
display: block;
font-family: var(--serif);
font-size: 1.6rem;
color: var(--copper);
margin-bottom: 8px;
}
.topic-card p { font-size: 0.92rem; color: var(--muted); margin: 0; }

.presenters { padding: 90px 0; background: var(--cream); }
.presenters-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 46px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.presenter-card { text-align: center; }
.presenter-card img {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 18px;
box-shadow: var(--shadow);
}
.presenter-card h4 { margin-bottom: 2px; }
.presenter-role { font-size: 0.85rem; color: var(--copper); font-weight: 600; margin: 0; }

.webinar-cta { padding: 80px 0; background: var(--navy); color: #fff; }
.webinar-cta h2 { color: #fff; }
.webinar-cta-sub { color: rgba(255,255,255,0.75); max-width: 480px; margin: 0 auto 30px; }

/* ---------- Historia de Éxito (success story, brand-aligned) ---------- */
.exito { padding: 90px 0; background: #fff; }
.exito__wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.exito__label { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper); margin: 0 0 10px; }
.exito__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.2; color: var(--navy); max-width: 22ch; margin: 0 0 18px; }
.exito__intro { font-size: 1.05rem; line-height: 1.6; max-width: 62ch; color: var(--muted); margin: 0 0 48px; }
.exito__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; }
.exito__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exito__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.exito__photos figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.exito__photos figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
.exito__stats { display: flex; gap: 28px; margin: 28px 0 0; grid-column: 1 / -1; flex-wrap: wrap; }
.exito__stat { border-left: 2px solid var(--copper); padding-left: 14px; }
.exito__stat strong { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--navy); }
.exito__stat span { font-size: 0.85rem; color: var(--muted); }
.exito__timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.exito__timeline li { position: relative; padding: 0 0 26px 26px; }
.exito__timeline li:last-child { padding-bottom: 0; }
.exito__timeline li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--copper-light); }
.exito__timeline time { display: block; font-size: 0.82rem; font-weight: 600; color: var(--copper); margin-bottom: 3px; }
.exito__timeline p { margin: 0; line-height: 1.5; }
.exito__cta { margin-top: 52px; text-align: center; }
.exito__cta p { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); margin: 0 0 18px; }
.exito__disclaimer { margin-top: 20px; font-size: 0.78rem; color: var(--muted); max-width: 62ch; }

/* ---------- FAQ ---------- */
.faq { padding: 90px 0; background: var(--cream); }
.faq-list { max-width: 760px; margin: 46px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 24px; }
.faq-item summary { cursor: pointer; padding: 18px 0; font-weight: 600; color: var(--navy); font-family: var(--serif); font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--sans); font-size: 1.4rem; color: var(--copper); flex-shrink: 0; transition: transform 0.15s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 20px; margin: 0; color: var(--muted); font-size: 0.95rem; }
.faq-contact-note { max-width: 760px; margin: 28px auto 0; text-align: center; color: var(--muted); font-size: 0.92rem; }
.faq-contact-note a { color: var(--copper); font-weight: 600; text-decoration: underline; }
.webinar-redirect-note { margin-top: 4px; }

/* ---------- Spanish CTA band (homepage) ---------- */
.es-cta { padding: 64px 0; background: var(--navy); color: #fff; }
.es-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.es-cta h2 { color: #fff; }
.es-cta p { color: rgba(255,255,255,0.78); font-size: 1.05rem; margin: 0 0 28px; }
.es-cta .eyebrow { color: var(--copper-light); }

/* ---------- Real results / story section (homepage) ---------- */
.results { padding: 90px 0; background: #fff; }
.result-card { max-width: 900px; margin: 46px auto 0; padding: 40px; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius); }
.result-card h3 { margin-bottom: 10px; }
.result-tag { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper); margin-bottom: 10px; display: block; }
.result-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.result-facts span { font-size: 0.82rem; background: #fff; border: 1px solid var(--border); padding: 6px 14px; border-radius: 999px; color: var(--navy); font-weight: 500; }

/* ---------- Trust strip (homepage) ---------- */
.trust-strip { padding: 40px 0; background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 30px; }
.trust-strip span { font-size: 0.85rem; color: var(--navy); font-weight: 500; white-space: nowrap; }
.trust-strip .dot { color: var(--copper); }

/* ---------- Generic inner-page hero ---------- */
.page-hero { background: linear-gradient(160deg, var(--navy) 0%, #1d2230 55%, var(--navy) 100%); color: #fff; padding: 80px 0 64px; }
.page-hero-inner { max-width: 760px; }
.page-hero h1 { color: #fff; }
.page-hero .eyebrow { color: var(--copper-light); }
.page-hero p.lead { color: rgba(255,255,255,0.82); font-size: 1.1rem; max-width: 620px; }
.page-hero .hero-actions { margin-top: 30px; }
.breadcrumb-note { color: rgba(255,255,255,0.55); font-size: 0.85rem; margin-top: 18px; }

/* ---------- Steps (first-time buyer page) ---------- */
.steps { padding: 90px 0; background: #fff; }
.steps:nth-of-type(even) { background: var(--cream); }
.step-row { display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 36px 0; border-bottom: 1px solid var(--border); align-items: start; }
.step-row:last-child { border-bottom: none; }
.step-num { font-family: var(--serif); font-size: 2.4rem; color: var(--copper); line-height: 1; }
.step-body ul { margin: 14px 0 0; padding-left: 20px; color: var(--muted); }
.step-body li { margin-bottom: 6px; }
.step-note { margin-top: 14px; font-size: 0.85rem; color: var(--muted); font-style: italic; }

/* ---------- Simple content sections (sell/invest/home-value/about) ---------- */
.content-section { padding: 90px 0; }
.content-section.alt { background: #fff; }
.content-section.cream { background: var(--cream); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.checklist { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 30px; color: #3a3a3a; }
.checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--copper); font-weight: 700; }
.disclaimer { font-size: 0.8rem; color: var(--muted); background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-top: 30px; }
.cta-band { padding: 70px 0; background: var(--navy); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.75); max-width: 500px; margin: 0 auto 26px; }

/* ---------- Success stories page ---------- */
.story-card { padding: 40px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: 26px; }
.story-card h3 { margin-bottom: 18px; }
.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.story-field { }
.story-field-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--copper); font-weight: 600; display: block; margin-bottom: 6px; }
.story-field p { margin: 0; font-size: 0.95rem; }
.story-link { display: inline-block; margin-top: 20px; font-size: 0.85rem; font-weight: 600; color: var(--copper); }

/* ---------- Español page ---------- */
.es-section-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; }
.es-section-nav a { font-size: 0.85rem; padding: 9px 18px; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; color: rgba(255,255,255,0.85); font-weight: 500; }
.es-section-nav a:hover { background: var(--copper); color: #fff; border-color: var(--copper); }

/* ---------- Nav dropdown groups (desktop) ---------- */
.nav-group { position: relative; }
.nav-group > a, .nav-group > span.nav-group-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: rgba(255,255,255,0.85); font-size: 0.92rem; font-weight: 500; }
.nav-group-label::after { content: '▾'; font-size: 0.6rem; opacity: 0.7; }
.nav-highlight { color: var(--copper-light) !important; font-weight: 700 !important; }
.nav-group-list {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--navy);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 10px;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
}
.nav-group:hover .nav-group-list,
.nav-group:focus-within .nav-group-list { opacity: 1; visibility: visible; }
.nav-group-list a { padding: 8px 12px; border-radius: 6px; font-size: 0.88rem; white-space: nowrap; }
.nav-group-list a:hover { background: rgba(255,255,255,0.08); }

/* ---------- Responsive ---------- */
/* Nav collapses to the hamburger menu well before the content grids do —
with 8 nav items + dropdowns, it needs much more room than 900px to sit
on one line without wrapping. The CTA button and hamburger toggle live
in .header-actions, outside .main-nav, so they stay visible even while
the plain links are collapsed. This section must stay AFTER the desktop
dropdown rules above so the mobile overrides win. */
@media (max-width: 1280px) {
.main-nav {
position: absolute;
top: 76px; left: 0; right: 0;
background: var(--navy);
flex-direction: column;
align-items: flex-start;
padding: 20px 24px 26px;
gap: 18px;
display: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
max-height: calc(100vh - 76px);
overflow-y: auto;
}
.main-nav.open { display: flex; }
.nav-toggle { display: flex; }
.nav-group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.nav-group-list { position: static; transform: none; display: flex; flex-direction: column; background: none; border: none; box-shadow: none; padding: 6px 0 0 14px; opacity: 1; visibility: visible; pointer-events: auto; min-width: 0; }
}
@media (max-width: 900px) {
.hero-inner, .about-inner, .contact-inner, .two-col { grid-template-columns: 1fr; }
.about-media { order: -1; max-width: 340px; margin: 0 auto; }
.services-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: 1fr; }
.testimonial-grid { grid-template-columns: 1fr; }
.credentials { grid-template-columns: 1fr; }
.exito__grid { grid-template-columns: 1fr; }
.story-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.services-grid { grid-template-columns: 1fr; }
.topics-grid { grid-template-columns: 1fr; }
.presenters-grid { grid-template-columns: 1fr; }
.webinar-facts { grid-template-columns: 1fr; }
.hero { padding: 60px 0 50px; }
.about, .services, .why, .area, .testimonials, .contact, .content-section, .steps, .results, .faq { padding: 60px 0; }
.trust-bar .container { flex-direction: column; gap: 6px; }
.trust-bar .divider { display: none; }
.brand-text { display: none; }
.header-right { gap: 12px; }
.header-actions { gap: 8px; }
.nav-cta { padding: 8px 14px; font-size: 0.82rem; }
}

/* ---------- Save Contact page ---------- */
.save-contact {
background: linear-gradient(160deg, var(--navy) 0%, #1d2230 55%, var(--navy) 100%);
color: #fff;
padding: 80px 0 90px;
}
.save-contact-inner {
max-width: 560px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.save-contact .eyebrow { color: var(--copper-light); }
.save-contact h1 { color: #fff; margin-top: 10px; }
.save-contact-sub {
margin-top: 14px;
color: rgba(255,255,255,0.75);
font-size: 1.05rem;
max-width: 460px;
}
.contact-card-image {
margin-top: 40px;
width: 100%;
max-width: 380px;
border-radius: 20px;
box-shadow: var(--shadow);
display: block;
}
.save-btn {
margin-top: 36px;
font-size: 1.05rem;
padding: 18px 46px;
}
.save-hint {
margin-top: 14px;
font-size: 0.85rem;
color: rgba(255,255,255,0.5);
}
.quick-links {
margin-top: 46px;
width: 100%;
display: flex;
flex-direction: column;
gap: 1px;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 16px;
overflow: hidden;
}
.quick-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 26px;
background: rgba(255,255,255,0.03);
text-decoration: none;
transition: background 0.15s ease;
}
.quick-link:hover { background: rgba(255,255,255,0.08); }
.quick-link-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--copper-light);
font-weight: 700;
}
.quick-link-value {
font-size: 1rem;
font-weight: 600;
color: #fff;
}
@media (max-width: 600px) {
.save-contact { padding: 60px 0 70px; }
.quick-link { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Current Listings ---------- */
.listings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 46px;
}
.listing-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
transition: transform 0.15s ease;
}
.listing-card:hover { transform: translateY(-4px); }
.listing-photo {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
background: var(--cream);
}
.listing-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.listing-price { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); font-weight: 600; }
.listing-address { font-size: 0.95rem; color: #3a3a3a; margin: 0; }
.listing-facts { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.listing-facts li { font-size: 0.8rem; background: var(--cream); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; color: var(--navy); font-weight: 500; }
.listing-status { display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 999px; margin-bottom: 4px; }
.listing-status.active { background: #e7f5ec; color: #1d7a44; }
.listing-status.pending { background: #fdf2e3; color: var(--copper); }
.listing-status.sold { background: #efeceb; color: var(--muted); }
.listing-card .card-link { margin-top: auto; padding-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--copper); }
.listing-card .card-link:hover { color: #9c5e28; }

.listings-empty {
max-width: 640px;
margin: 46px auto 0;
padding: 48px 40px;
text-align: center;
background: var(--cream);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.listings-empty h3 { margin-bottom: 12px; }
.listings-empty p { color: var(--muted); margin: 0 0 22px; }

/* Shimmer placeholder shown behind each listing photo while it loads, so
photos never render as flat blank space on first paint. Each <img> carries
an inline onload handler that adds .is-loaded once it's actually painted,
which turns the shimmer off. */
.listing-photo {
background: linear-gradient(100deg, var(--cream) 30%, #efe9dc 50%, var(--cream) 70%);
background-size: 200% 100%;
animation: sk-shimmer 1.3s ease-in-out infinite;
}
.listing-photo.is-loaded {
animation: none;
background: none;
}
@keyframes sk-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

@media (max-width: 900px) {
.listings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.listings-grid { grid-template-columns: 1fr; }
.listings-empty { padding: 36px 24px; }
}


/* ========== Neighborhood photo grid ========== */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.photo-card{margin:0}
.photo-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;background:#e9e4da}
.photo-card figcaption{margin-top:.6rem;font-size:.95rem;line-height:1.45}
.photo-credit{display:block;margin-top:.25rem;font-size:.75rem;opacity:.7}
.photo-credit a{color:inherit;text-decoration:underline}
@media (max-width:900px){.photo-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.photo-grid{grid-template-columns:1fr}}


/* Tighter desktop nav spacing so the full menu (incl. Neighborhoods) fits between 1281px and 1440px */
@media (min-width: 1281px) and (max-width: 1440px) {
  .main-nav { gap: 12px; }
  .main-nav a { font-size: 0.86rem; }
}


/* ========== Mobile quick-contact bar ========== */
.action-bar{display:none}
@media (max-width:768px){
.action-bar{display:flex;position:fixed;left:10px;right:84px;bottom:10px;z-index:900;gap:6px;background:var(--navy,#141a24);padding:6px;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.action-bar a{flex:1;text-align:center;padding:11px 4px;border-radius:10px;color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid rgba(255,255,255,.18)}
.action-bar a.action-bar-primary{background:var(--copper);border-color:transparent}
body.has-action-bar{padding-bottom:76px}
}
/* ========== Lead forms ========== */
.lead-form{display:grid;gap:10px;text-align:left;max-width:560px;margin:0 auto}
.lead-form label{font-weight:600;font-size:.92rem}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:12px 14px;border:1px solid var(--border,#ddd);border-radius:10px;font:inherit;background:#fff}
.lead-form button{margin-top:6px}
.lead-form .form-status{min-height:1.2em;font-size:.92rem}
.lead-form .form-note{font-size:.8rem;opacity:.75;margin:0}
.lead-box{background:var(--cream,#f6f1e8);border:1px solid var(--border,#e5ded2);border-radius:var(--radius,14px);padding:32px}
.trust-line{margin-top:14px;font-size:.92rem;opacity:.9}
.trust-line .stars{color:var(--copper);letter-spacing:2px}
.calendar-embed{width:100%;height:620px;border:0;border-radius:10px;background:#fff}

.page-hero .trust-line{color:rgba(255,255,255,.88);opacity:1}
.page-hero .trust-line .stars{color:#e3a55c}
@media (max-width:768px){.calendar-embed{height:760px}}

/* Quick-contact bar: icon + label */
@media (max-width:768px){
.action-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;font-size:.7rem;line-height:1.15;font-weight:600}
.action-bar a svg{width:20px;height:20px;fill:currentColor}
.action-bar a span{display:block;text-align:center}
body.has-action-bar{padding-bottom:84px}
}


/* Non-featured service cards: visible outline (featured card keeps its copper accent) */
.service-card:not(.featured) { border-color: #cbbfa9; }


/* Spanish CTA band: distinct warm background so it doesn't blend into the navy Why section */
.es-cta { background: linear-gradient(160deg, #241d17 0%, #2e2318 100%); border-top: 1px solid rgba(217,154,91,0.35); border-bottom: 1px solid rgba(217,154,91,0.35); }
/* Why section intro line: readable on navy */
.why-copy > p { color: rgba(255,255,255,0.75); }


/* Footer "Save my contact" link — reset the /card page's .save-contact section styles that were turning it into a large empty box */
.footer-inner p.save-contact { background: none; padding: 0; margin: 16px 0 20px; }
.footer-inner .save-contact-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px;
  color: #fff; font-size: 0.88rem; font-weight: 500; text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.footer-inner .save-contact-link:hover { border-color: var(--copper-light); background: rgba(255, 255, 255, 0.06); }

/* Booking page: calendar first + easier scrolling on mobile */
.booking-box{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center}
.booking-hint{display:none;font-size:.85rem;font-weight:600;color:var(--copper);margin:0 0 8px}
.booking-full-btn{display:inline-block;margin-top:14px}
@media (max-width:768px){
.booking-layout .booking-box{order:-1;padding:14px}
.booking-layout{gap:36px}
.booking-hint{display:block}
.booking-layout .calendar-embed{height:1000px}
.booking-full-btn{display:block;width:100%;text-align:center}
}
.social-row a[aria-label="LinkedIn"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.1c0-1.22-.02-2.79-1.7-2.79-1.7 0-1.96 1.33-1.96 2.7V21h-4z'/%3E%3C/svg%3E");
}
.social-row a[aria-label="TikTok"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.6 5.82A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 1 1-2.59-2.6c.27 0 .53.04.78.12V9.77a5.7 5.7 0 0 0-.78-.05A5.69 5.69 0 1 0 15.55 15.4V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3a4.3 4.3 0 0 1-3.25-1.48z'/%3E%3C/svg%3E");
}

/* ========== Neighborhood highlight cards + resource list (Chatsworth model) ========== */
.highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.highlight-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:1.4rem}
.highlight-card h3{margin-top:0}
.highlight-card .source-link{font-size:.9rem;margin-bottom:0}
.highlight-card .source-link a{text-decoration:underline}
.resource-list{max-width:820px;margin:1.5rem auto 0}
.resource-list a{text-decoration:underline}
@media (max-width:900px){.highlight-grid{grid-template-columns:1fr}}

/* ---------- Neighborhood carousel ---------- */
.city-carousel { max-width: 1240px; margin: 36px auto 0; padding: 0 24px; }
.city-carousel-nav { display: flex; justify-content: flex-end; gap: 18px; margin-bottom: 14px; }
.city-carousel-btn { background: none; border: 0; padding: 4px 0; font: 600 0.78rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); cursor: pointer; }
.city-carousel-btn:hover, .city-carousel-btn:focus-visible { color: var(--copper); }
.city-carousel-btn[disabled] { opacity: 0.3; cursor: default; }
.city-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.city-track::-webkit-scrollbar { display: none; }
.city-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; scroll-snap-align: start; background: var(--navy); color: #fff; }
.city-card img, .city-card-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.city-card-ph { background: linear-gradient(160deg, var(--charcoal) 0%, var(--navy) 55%, var(--copper) 140%); }
.city-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,21,28,.88) 0%, rgba(18,21,28,.25) 45%, rgba(18,21,28,0) 70%); }
.city-card:hover img, .city-card:focus-visible img { transform: scale(1.05); }
.city-card-text { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.city-card-region { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-light); }
.city-card-name { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.city-card-cta { font-size: 0.85rem; color: rgba(255,255,255,.8); margin-top: 4px; }
.city-card:hover .city-card-cta { color: #fff; }
@media (max-width: 1000px) { .city-track { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 720px) { .city-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 480px) { .city-carousel { padding: 0 16px; } .city-track { grid-auto-columns: 78%; gap: 12px; } .city-card-name { font-size: 1.6rem; } }

/* ---------- Webinar banner (rendered by webinar-banner.js) ---------- */
.wb { background: var(--navy); color: #fff; padding: 64px 0; position: relative; overflow: hidden; }
.wb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 20%, rgba(217,154,91,.18), transparent 60%); pointer-events: none; }
.wb-inner { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.wb-eyebrow { margin: 0 0 14px; color: var(--copper-light); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.wb-title { margin: 0 0 16px; font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; color: #fff; }
.wb-title em { color: var(--copper-light); font-style: italic; }
.wb-sub { margin: 0 0 26px; max-width: 520px; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.wb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.wb-note { color: rgba(255,255,255,.6); font-size: .88rem; }
.wb-photo { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -25px rgba(0,0,0,.6); aspect-ratio: 4 / 5; max-height: 420px; justify-self: end; width: 100%; max-width: 340px; }
.wb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.wb-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(to top, rgba(18,21,28,.85), rgba(18,21,28,0)); font-size: .85rem; line-height: 1.35; color: #fff; }
@media (max-width: 760px) {
  .wb { padding: 48px 0; }
  .wb-eyebrow { font-size: .74rem; letter-spacing: .06em; }
  .wb-inner { grid-template-columns: 1fr; gap: 28px; }
  .wb-photo { justify-self: start; max-width: none; aspect-ratio: 16 / 10; max-height: 260px; }
  .wb-photo img { object-position: center 30%; }
  .wb-btn { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- Webinar banner ---------- */
.webinar-banner { padding: 70px 0; background: var(--navy); color: #fff; }
.webinar-banner-inner { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 960px; }
.webinar-banner-img { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
.webinar-banner-img img { width: 100%; height: auto; transition: transform .4s ease; }
.webinar-banner-img:hover img { transform: scale(1.02); }
.webinar-banner .eyebrow { color: var(--copper-light); }
.webinar-banner h2 { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; margin: 0 0 14px; color: #fff; }
.webinar-banner-sub { color: rgba(255,255,255,.78); margin: 0 0 18px; font-size: 1.05rem; }
.webinar-banner-when { color: rgba(255,255,255,.7); margin: 0 0 26px; font-size: .95rem; }
.webinar-banner-when strong { color: #fff; }
@media (max-width: 760px) {
  .webinar-banner { padding: 50px 0; }
  .webinar-banner-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .webinar-banner-img { max-width: 320px; margin: 0 auto; }
  .webinar-banner-btn { width: 100%; max-width: 360px; }
}

/* ===== BLVD Estate Properties listings (blvd-listings.js) ===== */
.blvd-listings .section-intro{max-width:680px;margin:0 0 32px;}
.blvd-listings .section-intro h2{margin:6px 0 10px;}
.blvd-listings .section-intro p{color:var(--muted);margin:0;}
.blvd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;}
.blvd-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 24px -18px rgba(18,21,28,.35);transition:transform .2s,box-shadow .2s;}
.blvd-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.blvd-card-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--navy);color:#fff;padding:14px 18px;font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.blvd-card-top svg{color:var(--copper-light);flex:none;}
.blvd-badge{background:var(--copper);color:#fff;border-radius:999px;padding:5px 12px;font-size:.75rem;font-weight:600;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.blvd-badges{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;}
.blvd-badges-static{position:static;padding:12px 18px 0;}
.blvd-badge-oh{background:#2f6b4f;}
.blvd-card-body{padding:18px 18px 16px;display:flex;flex-direction:column;flex:1;}
.blvd-price{font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1;margin:0 0 10px;color:var(--ink);}
.blvd-addr{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin:0;}
.blvd-city{color:var(--muted);margin:2px 0 14px;font-size:.95rem;}
.blvd-specs{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.92rem;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:16px;}
.blvd-ask{text-align:center;margin-top:auto;}
.blvd-credit{font-size:.74rem;color:var(--muted);margin:12px 0 0;line-height:1.4;}
.blvd-updated,.blvd-empty{font-size:.85rem;color:var(--muted);margin:18px 0 0;}
@media (max-width:600px){.blvd-grid{grid-template-columns:1fr;}.blvd-price{font-size:1.8rem;}}
.blvd-photo{position:relative;aspect-ratio:3/2;background:#e9e4dc;overflow:hidden;}
.blvd-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== Hero consultation note + "Start here" chooser (Oct 2026) ===== */
.hero-consult-note { color: rgba(255,255,255,0.8); font-size: 0.95rem; max-width: 520px; margin: -18px 0 28px; line-height: 1.5; }
.hero-consult-note strong { color: var(--copper-light); }
.start-here { padding: 40px 0; background: #fff; border-bottom: 1px solid var(--border); }
.start-here-title { font-family: var(--serif); font-size: 1.6rem; text-align: center; margin: 0 0 22px; color: var(--navy); }
.start-here-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.start-here-link { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--cream); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.start-here-link:hover, .start-here-link:focus-visible { border-color: var(--copper); transform: translateY(-2px); }
.start-here-link span { color: var(--copper); font-size: 0.92rem; font-weight: 600; }
.start-here-link img { display: block; width: calc(100% + 40px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -18px -20px 8px; border-radius: var(--radius) var(--radius) 0 0; }
.start-here-link { overflow: hidden; }
.start-here-quiz { text-align: center; margin: 20px 0 0; color: var(--muted); }
.start-here-quiz a { color: var(--copper); font-weight: 600; }
@media (max-width: 900px) { .start-here-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .start-here-grid { grid-template-columns: 1fr; } }

/* Breadcrumb trail (matches BreadcrumbList structured data) */
.breadcrumb { margin: 0 0 14px; font-size: 0.85rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumb li { color: rgba(255,255,255,0.7); }
.breadcrumb li + li::before { content: "\203A"; margin: 0 8px; color: rgba(255,255,255,0.45); }
.breadcrumb a { color: rgba(255,255,255,0.82); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--copper-light); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: rgba(255,255,255,0.6); }

/* Success stories: matched photo pair with one shared caption */
.exito__photos--pair img { height: auto; aspect-ratio: 3 / 4; }
.exito__photos--pair figure { height: auto; }
.exito__photos--pair .exito__caption { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); margin: 0; }

/* Buyer guide Q&A */
.page-hero .author-line{margin-top:8px;font-size:.85rem;color:rgba(255,255,255,.78)}
.page-hero .author-line a{color:#e3a55c;text-decoration:underline;text-underline-offset:3px}
.qa-wrap{max-width:860px}
.qa-intro{color:var(--muted);margin:0 0 8px}
.qa{border-top:1px solid var(--border);padding:36px 0 8px;scroll-margin-top:110px}
.qa h3{font-size:1.5rem;margin:0 0 14px}
.qa-direct{background:var(--cream);border-left:4px solid var(--copper);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 18px}
.qa-example{border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin:20px 0;background:#fff}
.qa-example-title{font-weight:700;margin:0 0 4px}
.qa-example-note{font-size:.85rem;color:var(--muted);margin:8px 0}
.qa-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 0}
.qa-table{width:100%;border-collapse:collapse;font-size:.95rem}
.qa-table th,.qa-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.qa-table tbody th{font-weight:500}
.qa-table td{text-align:right;white-space:nowrap}
.qa-compare td{text-align:left;white-space:normal}
.qa-compare{min-width:560px}
.qa-compare thead th{font-weight:700;border-bottom:2px solid var(--copper)}
.qa-total th,.qa-total td{font-weight:700;border-bottom:2px solid var(--ink)}
.qa-next{margin:18px 0 6px}
.qa a,.qa-next a{color:var(--copper);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.qa-sources{font-size:.8rem;color:var(--muted);margin:10px 0 0}
.qa-sources a{font-weight:400}

/* Family gallery (About pages) */
.family-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 18px; margin-top: 36px; }
.family-gallery figure { display: flex; flex-direction: column; margin: 0; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 18px rgba(18,21,28,.08); }
.family-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.family-gallery figcaption { padding: 10px 12px; text-align: center; font-size: .92rem; font-weight: 600; color: var(--navy); }
.family-gallery .wide { grid-column: span 2; }
.family-gallery .wide img { flex: 1 1 0; min-height: 0; height: auto; aspect-ratio: auto; contain: size; }
@media (max-width: 760px) { .family-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; } .family-gallery .wide img { flex: none; height: auto; aspect-ratio: 8 / 5; contain: none; } }

/* Breadcrumb on light backgrounds (About pages) and page update dates */
.breadcrumb--light li, .breadcrumb--light [aria-current="page"] { color: var(--text-muted, #6b6b6b); }
.breadcrumb--light li + li::before { color: rgba(0,0,0,0.35); }
.breadcrumb--light a { color: var(--navy); }
.page-updated { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin: 10px 0 0; }