/* ------------------------------------------
   GLOBAL RESET & BASE
   ------------------------------------------ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------------------------
   DESIGN TOKENS — golden-ratio (φ ≈ 1.618) spacing scale.
   Each step ≈ prior × φ, approximated to clean Fibonacci pixel
   values. Use these instead of one-off spacing values so gaps
   read as intentional and stay consistent site-wide.
   ------------------------------------------ */

:root {
    --space-xs: 8px;
    --space-sm: 13px;
    --space-md: 21px;
    --space-lg: 34px;
    --space-xl: 55px;
    --space-2xl: 89px;
    --space-3xl: 144px;

    /* Fixed header's rendered height at the top of the page (unscrolled
       state: 1rem vertical padding + 72px logo + 1px border ≈ 105px).
       Referenced by .page-hero on mobile so centered hero content never
       renders underneath the frosted-glass header. */
    --header-height-mobile: 105px;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------
   PAGE LOAD / NAVIGATION TRANSITIONS
   Native cross-document view transitions for browsers that support
   them (Chrome/Edge, Safari 18+) — smooth crossfade between pages
   with zero JS. Browsers without support just ignore this and get
   the plain instant navigation below as a fallback.
   ------------------------------------------ */

@view-transition {
    navigation: auto;
}

/* Universal fallback: every page fades in on load, in every browser,
   regardless of view-transition support. */
body {
    font-family: 'Inter', sans-serif;
    color: #222;
    background: #fff;
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    animation: pageFadeIn 0.5s ease-out;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
}

a, button {
    -webkit-tap-highlight-color: transparent;
}

/* Refined focus states — replaces inconsistent default browser
   outlines with one deliberate style, shown only for keyboard
   navigation (not mouse/touch clicks) via :focus-visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #b08d57;
    outline-offset: 3px;
    border-radius: 4px;
}

h1, h2, h3,
.hero-title,
.section-title {
    font-family: 'Cormorant Garamond', 'Inter', serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ------------------------------------------
   GLOBAL ANIMATIONS
   ------------------------------------------ */

.animate-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Staggered elements */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ------------------------------------------
   GLOBAL SECTION DIVIDERS
   ------------------------------------------ */

.section-divider {
    width: 0;
    height: 2px;
    margin: 0 auto 3rem auto;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(0,0,0,0.25) 50%,
        rgba(255,255,255,0) 100%
    );
    opacity: 0;
    transition: width 1.2s ease-out, opacity 1.2s ease-out;
}

.animate-in .section-divider {
    width: 80%;
    opacity: 1;
}

/* ------------------------------------------
   SHARED BUTTONS
   ------------------------------------------ */

.btn {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 8px;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-primary {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.btn-primary:hover {
    background: #333;
    opacity: 1;
}

.btn-secondary {
    background: #ffffff;
    color: #1a1a1a;
    border-color: #1a1a1a;
}

.btn-secondary:hover {
    background: #1a1a1a;
    color: #fff;
    opacity: 1;
}

.btn:hover {
    transform: translateY(-3px);
}

/* ------------------------------------------
   SHARED HOVER INTERACTIONS
   ------------------------------------------ */

a {
    transition: opacity 0.25s ease;
}

a:hover {
    opacity: 0.7;
}

button:hover,
input:hover,
textarea:hover {
    filter: brightness(1.03);
}

/* ------------------------------------------
   MICRO-INTERACTION LIBRARY (site-wide)
   Applied automatically by js/micro-interactions.js
   ------------------------------------------ */

.button-tap,
.submit-button,
.cta-button {
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.button-tap:active,
.submit-button:active,
.cta-button:active {
    transform: scale(0.96);
    opacity: 0.85;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: rgba(0,0,0,0.35);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.link-slide {
    position: relative;
    display: inline-block;
}

.link-slide::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background: currentColor;
    transition: width 0.25s ease;
}

.link-slide:hover::after {
    width: 100%;
}

.icon-scale {
    transition: transform 0.2s ease;
}

.icon-scale:hover {
    transform: scale(1.15);
}

.soft-pulse {
    animation: softPulse 2.5s infinite ease-in-out;
}

@keyframes softPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.95; }
    100% { transform: scale(1); opacity: 1; }
}

.divider-shimmer {
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.05),
        rgba(0,0,0,0.15),
        rgba(0,0,0,0.05)
    );
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ------------------------------------------
   GLOBAL HEADER — CADENCE REALTY
   ------------------------------------------ */

.site-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding 0.3s ease;
}

.scrolled-header .header-inner {
    padding: 0.65rem 2rem;
}

.scrolled-header .header-logo img {
    height: 56px;
}

.header-logo img {
    height: 72px;
    width: auto;
    transition: transform 0.25s ease, height 0.3s ease;
}

.header-logo:hover img {
    transform: scale(1.05);
}

.header-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header-nav a,
.nav-link-btn {
    font-size: 0.95rem;
    font-weight: 500;
    color: #222;
    text-decoration: none;
    transition: opacity 0.25s ease;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.header-nav a:hover,
.nav-link-btn:hover {
    opacity: 0.6;
}

/* Desktop dropdown submenu ("Sell" > Sell My Home / Home Valuation) */
.has-submenu {
    position: relative;
}

.has-submenu > a::after {
    content: "";
    display: inline-block;
    margin-left: 5px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.has-submenu .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    list-style: none;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.14);
    padding: 0.5rem 0;
    margin-top: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1000;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.has-submenu .submenu a {
    display: block;
    padding: 0.65rem 1.3rem;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    color: #222;
}

.has-submenu .submenu a:hover {
    background: #f6f6f6;
    opacity: 1;
}

/* Sticky shadow */
.scrolled-header {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-btn span {
    width: 26px;
    height: 3px;
    background: #222;
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: #ffffff;
    box-shadow: -4px 0 18px rgba(0,0,0,0.1);
    padding: 4rem 2rem;
    transition: right 0.4s ease;
    z-index: 1000;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 999;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

body.menu-open {
    overflow: hidden;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu ul li {
    margin-bottom: 1.6rem;
}

.mobile-menu a,
.mobile-nav-link-btn {
    font-size: 1.2rem;
    color: #222;
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-align: left;
    display: block;
    width: 100%;
}

.mobile-submenu-item {
    margin-top: -1rem !important;
}

.mobile-submenu-item a {
    font-size: 0.95rem;
    font-weight: 400;
    color: #666;
    padding-left: 1.2rem;
}

.mobile-menu.active {
    right: 0;
}

@media (max-width: 900px) {
    .header-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }
}

/* ------------------------------------------
   GLOBAL FOOTER — CADENCE REALTY
   ------------------------------------------ */

.site-footer {
    padding: 3.5rem 2rem 3rem 2rem;
    text-align: center;
    background: #1a1a1a;
    border-top: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.animate-in.site-footer {
    opacity: 1;
    transform: translateY(0);
}

.site-footer .section-divider {
    width: 0;
    height: 2px;
    margin: 0 auto 2rem auto;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(212,175,122,0.6) 50%,
        rgba(255,255,255,0) 100%
    );
    opacity: 0;
    transition: width 1.2s ease-out, opacity 1.2s ease-out;
}

.animate-in .section-divider {
    width: 80%;
    opacity: 1;
}

.footer-inner {
    max-width: 900px;
    margin: 0 auto;
}

.footer-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    margin: 0.4rem 0;
    letter-spacing: 0.3px;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.site-footer a:hover {
    opacity: 0.65;
}

.footer-legal {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.55);
}

.footer-legal a {
    color: rgba(255,255,255,0.6);
}

.footer-dot {
    opacity: 0.5;
}

.footer-copyright {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}

.footer-copyright a {
    color: rgba(255,255,255,0.55);
}

/* ------------------------------------------
   SHARED LEAD-FORM MODAL (HAR IDX embed)
   Triggered by any button/link with class "js-open-leadform"
   ------------------------------------------ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 2rem 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 460px;
    height: min(640px, 82vh);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(24px) scale(0.98);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}

.modal-box iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1a1a;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    transform: scale(1.08);
    background: #fff;
}

/* Footer social icon */
.footer-social {
    display: flex;
    justify-content: center;
    margin: 1rem 0 0.6rem 0;
}

.footer-social a {
    color: rgba(255,255,255,0.75);
    display: inline-flex;
    transition: color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
    color: #d4af7a;
    transform: scale(1.12);
    opacity: 1;
}

/* Footer legal button (styled to match footer legal links) */
.footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: inherit;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    text-decoration: none;
}

.footer-link-btn:hover {
    opacity: 0.6;
}

/* Cookie Preferences modal */
.cookie-modal-box {
    max-width: 480px;
    height: auto;
    max-height: 88vh;
    overflow-y: auto;
}

.cookie-modal-content {
    padding: 2.2rem 1.8rem 1.8rem 1.8rem;
}

.cookie-modal-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
}

.cookie-modal-intro {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.6rem;
    line-height: 1.5;
}

.cookie-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.cookie-row h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.cookie-row p {
    font-size: 0.8rem;
    color: #777;
}

.cookie-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.25s ease;
    cursor: pointer;
}

.cookie-toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background: #1a1a1a;
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
    transform: translateX(18px);
}

.cookie-toggle.disabled .cookie-toggle-slider {
    background: #b08d57;
    cursor: not-allowed;
    opacity: 0.7;
}

.cookie-modal-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.8rem;
    flex-wrap: wrap;
}

.cookie-modal-actions .btn {
    flex: 1 1 auto;
    text-align: center;
}

/* First-visit cookie consent banner */
.cookie-banner {
    position: fixed;
    left: 1.2rem;
    right: 1.2rem;
    bottom: -200px;
    max-width: 560px;
    margin: 0 auto;
    background: #1a1a1a;
    color: #fff;
    border-radius: 14px;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    z-index: 1900;
    transition: bottom 0.5s ease;
}

.cookie-banner.visible {
    bottom: 1.2rem;
}

.cookie-banner p {
    font-size: 0.88rem;
    margin: 0;
    flex: 1 1 240px;
}

.cookie-banner a {
    color: #d4af7a;
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cookie-banner-actions .btn {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
}

/* ------------------------------------------
   FLOATING MOBILE CTA
   Mobile-only persistent path to the lead form.
   Hidden by default; JS reveals it after the visitor
   scrolls past the hero.
   ------------------------------------------ */

.mobile-floating-cta {
    display: none;
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.3rem;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px) scale(0.94);
    transition: opacity 0.35s ease, transform 0.35s ease, bottom 0.35s ease;
    pointer-events: none;
}

.mobile-floating-cta svg {
    width: 18px;
    height: 18px;
}

.mobile-floating-cta.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.mobile-floating-cta.banner-open {
    bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

.mobile-floating-cta:active {
    transform: scale(0.96);
}

@media (max-width: 700px) {
    .mobile-floating-cta {
        display: flex;
    }
}

/* ------------------------------------------
   SHARED HAR IDX EMBED FRAME
   Used for Featured Properties (home), Get More
   Information (about), Home Valuation, Buy, Market
   Snapshot, and Neighborhood Finder pages.

   STRATEGY (revised): every embed here is a cross-origin iframe pointing
   at har.com. We do not control HAR's page and cannot read its real
   content height — that's a hard browser security boundary, not
   something any amount of CSS/JS on our side can work around. We
   confirmed directly (listening for postMessage on the live embed) that
   HAR's page does not send any resize/height signal either, so an
   auto-matching height is not achievable at all, by any method, without
   HAR adding that support on their end.

   Previous approach tried to statically guess an exact height per embed
   type. That's fundamentally the wrong tool for this job: HAR's actual
   content height varies with result count (3 listings vs 30), so *any*
   single fixed number is guaranteed to be wrong for some case — too
   tall (excess blank space) for a small result set, too short (clipped
   content, e.g. the Home Valuation form's own submit button) for a
   large one. No amount of re-tuning the number fixes this; it's not a
   calibration problem, it's a category error.

   Correct fix: stop trying to make the box exactly fit unknowable
   content. Instead, give the embed a fixed, comfortable "viewport"
   height and let the iframe scroll *within itself* for anything beyond
   that — the same pattern used by embedded Google Calendar, Calendly,
   Typeform, etc. whenever the embed doesn't cooperate on auto-sizing.
   This guarantees correctness for any result count: never oversized
   (height is fixed), and nothing is ever unreachably clipped (the
   iframe's own native scrollbar reaches all of it). The visible border
   + shadow below make this read as an intentional, self-contained
   widget rather than an accidental clipped viewport.
   ------------------------------------------ */

.har-embed-frame {
    position: relative;
    width: 100%;
    height: 800px;
    background: transparent;
    /* Rounded-corner clipping for the iframe's square edges only —
       this does NOT suppress the iframe's own internal scrollbar (that
       lives inside the iframe's own browsing context, independent of
       this wrapper's overflow), it only clips visual corners. */
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.har-embed-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    /* Deliberately NOT overflow:hidden here, and scrolling="no" has been
       removed from every <iframe> tag in the HTML. This lets the iframe
       show its own native internal scrollbar when HAR's content is
       taller than our fixed viewport — this is the mechanism that makes
       the whole strategy above work. It is a single, clearly-bounded,
       intentional scroll region (signaled by the border/shadow on the
       wrapper), not a competing/unintentional nested scroll — different
       from the earlier TOC-drawer bug, which was two independently
       scrollable regions with no visual boundary between them and no
       scroll lock on the page behind it. */
}

/* Full-bleed variant: breaks out of the page's normal max-width so
   listing/search embeds span true edge-to-edge width, like a native
   part of the page rather than a boxed-in widget. Use on a section
   that itself has no max-width — see .buy-listings-section, etc.
   Larger fixed viewport than the base .har-embed-frame since these are
   typically the primary content of their section (listing grids), so
   they get more room before the internal scroll kicks in. */
.har-embed-frame-full-bleed {
    height: 1000px;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* Compact variant: currently just the Home Valuation search form. Same
   fixed-viewport-plus-internal-scroll strategy, just a shorter default
   since this embed's content, while a full multi-field form, is
   generally less tall than a listings grid. */
.har-embed-frame-compact {
    height: 850px;
}

.embed-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 50%, #ffffff 100%);
    background-size: 200% 100%;
    animation: embedShimmer 1.8s ease-in-out infinite;
    transition: opacity 0.5s ease;
    z-index: 5;
}

.embed-loading-overlay.loaded {
    opacity: 0;
    pointer-events: none;
}

.embed-loading-overlay p {
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 0.3px;
}

.embed-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(176, 141, 87, 0.2);
    border-top-color: #b08d57;
    border-radius: 50%;
    animation: embedSpin 0.8s linear infinite;
}

@keyframes embedShimmer {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

@keyframes embedSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
    .har-embed-frame {
        height: 650px;
    }

    .har-embed-frame-full-bleed {
        height: 750px;
    }

    .har-embed-frame-compact {
        height: 700px;
    }
}

/* ------------------------------------------
   SHARED PAGE HERO (interior pages)
   Set background image per-page via inline style
   or a page-specific modifier class.
   ------------------------------------------ */

.page-hero {
    position: relative;
    height: 60vh;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.page-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.page-hero .hero-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    padding: 0 2rem;
}

.page-hero .hero-content h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: #fff;
}

.page-hero .hero-content p {
    font-size: 1.15rem;
    opacity: 0.92;
}

/* ------------------------------------------
   SHARED CONTENT SECTION
   ------------------------------------------ */

.content-section {
    padding: 6rem 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.content-section.narrow {
    max-width: 900px;
}

.content-section h2 {
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
}

.content-section > p.section-intro {
    font-size: 1.1rem;
    color: #555;
    max-width: 720px;
    margin: 0 auto 3rem auto;
    text-align: center;
}

/* Modifier for sections that contain ONLY a divider + one intro
   paragraph and nothing else (no heading, no cards, no form). The
   default 6rem top+bottom padding is sized for content-heavy sections;
   applied to a single short paragraph it reads as an oversized, sparse,
   "unfinished-looking" gap — especially stacked against the next
   section's own 6rem top padding, which compounds into a very large
   gap between two sections that are meant to read as a connected
   lead-in, not two disconnected blocks. */
.content-section-intro-only {
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
}

.content-section-intro-only > p.section-intro {
    margin-bottom: 0;
}

/* ------------------------------------------
   SHARED FORM FEEDBACK STATES
   ------------------------------------------ */

.form-success,
.form-error {
    display: none;
    margin-top: 15px;
    font-size: 0.9rem;
    text-align: center;
}

.form-success {
    color: #2e7d32;
}

.form-error {
    color: #c62828;
}

@media (max-width: 600px) {
    .footer-text {
        font-size: 0.85rem;
    }
}

/* ------------------------------------------
   MOBILE SPACING — reduce accumulated section
   padding site-wide. Desktop values (6-7rem)
   look intentional once, but stack into a lot
   of dead scroll space when every section on
   every page uses the same large padding on a
   narrow screen.
   ------------------------------------------ */

@media (max-width: 700px) {
    .content-section {
        padding: 3rem 1.5rem;
    }

    .section-divider {
        margin-bottom: 1.8rem;
    }

    .page-hero {
        height: 46vh;
        /* Raised from 320px to match desktop's floor (420px). At the
           shortest common phone viewport heights, 46vh alone (~300-390px)
           wasn't enough room for a 2-3 line heading to sit fully below
           the fixed header once vertically centered — this guarantees a
           consistent minimum regardless of device height. */
        min-height: 420px;
        /* ROOT CAUSE of the reported cropping: .page-hero has no offset
           for the fixed, position:fixed site-header (~105px tall
           unscrolled). Content is flex-centered within the hero's own
           box starting at y=0, so on short mobile heroes the top line(s)
           of a multi-line heading centered into that space land
           underneath the header instead of below it. Reserving that
           space via padding-top (not margin, so overflow:hidden above
           still only clips the background image) keeps the centered
           content's available area entirely below the header. */
        padding-top: calc(var(--header-height-mobile) + var(--space-sm));
    }

    .page-hero .hero-content {
        /* Explicit — this content must never scroll internally. The
           hero's overflow:hidden exists only to clip the background
           image at the container edge. */
        overflow: visible;
    }

    .page-hero .hero-content h1 {
        font-size: 2.1rem;
        line-height: 1.3;
    }
}

/* ------------------------------------------
   SHARED: PREDICTIVE ADDRESS SUGGESTIONS DROPDOWN
   Originally built for valuation.html (css/valuation.css still has
   its own copy — untouched, so that page can't regress). Duplicated
   here, not moved, so it's available to any page that loads only
   global.css: the homepage hero search and the Buy search page both
   use this for their predictive location field.
   ------------------------------------------ */

.address-suggestions {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    list-style: none;
    padding: 0.4rem;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    animation: suggestionsSlideIn 0.18s ease;
}

@keyframes suggestionsSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.address-suggestions li {
    padding: 0.85rem 0.9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
    transition: background 0.15s ease, padding-left 0.15s ease;
}

.address-suggestions li:hover,
.address-suggestions li.active {
    background: rgba(176, 141, 87, 0.1);
    padding-left: 1.15rem;
}

/* Hero search's location field needs position:relative so its
   suggestions dropdown anchors to it, and its own loading shimmer
   (the hero field styling in home.css differs from valuation's
   .address-search-bar, so it needs its own loading treatment here). */
.hero-search-location {
    position: relative;
}

.hero-search-location.is-loading input {
    background-image: linear-gradient(90deg, transparent, rgba(176, 141, 87, 0.12), transparent);
    background-size: 200% 100%;
    animation: searchLoadingShimmer 1.2s ease-in-out infinite;
}

@keyframes searchLoadingShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ------------------------------------------
   TREC REQUIRED NOTICES
   Moved here from home.css so it applies site-wide — this now lives
   in components/global-footer.html, injected on every page. Kept as
   its own clearly-labeled, high-contrast band, not folded into the
   footer's small-print legal row — a real regulatory visibility
   requirement, not just styling. Dark background + gold links keeps
   it on-brand while giving ~5.6:1 contrast (comfortably past WCAG AA
   for normal text — verified, not estimated).
   ------------------------------------------ */

.trec-notices {
    background: #1a1a1a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.8rem 2rem;
    text-align: center;
}

.trec-notices-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}

.trec-notices-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

.trec-notices-links a {
    color: #b08d57;
    font-size: 16px; /* 12pt, as specified */
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trec-notices-links a:hover,
.trec-notices-links a:focus-visible {
    color: #c9a76c;
}

.trec-notices-dot {
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
    .trec-notices-links {
        flex-direction: column;
        gap: 0.5rem;
    }

    .trec-notices-dot {
        display: none;
    }
}