/* Self-hosted fonts (Cormorant + Work Sans, latin + latin-ext).
   Replaces Google Fonts CDN — no third-party request, no visitor-IP
   leak to Google (Law 25). Regenerate via scripts/fetch-fonts? see git. */
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;src:url(/static/fonts/cormorant-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;src:url(/static/fonts/cormorant-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/cormorant-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/cormorant-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/cormorant-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/cormorant-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/cormorant-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/cormorant-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/cormorant-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/cormorant-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/static/fonts/work-sans-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/static/fonts/work-sans-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/work-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/work-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/work-sans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/work-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/work-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/work-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/work-sans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/work-sans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/*
 * site.css — johnverreault.com
 * Refined from test.johnverreault.com's inline CSS (2026-05-24).
 * Brand colors per logo identity: navy + gold + charcoal.
 * See also: app/branding.py (BROKER dict), app/templates/base.html.
 */

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

:root {
    /* Brand palette (from logo identity) */
    --color-primary:        #0B1E43;   /* navy — headings + primary ink */
    --color-secondary:      #232B38;   /* charcoal — footer bg */
    --color-accent:         #C29B53;   /* gold — borders, fills, text on dark */
    --color-accent-text:    #8A6A28;   /* WCAG-AA gold for TEXT on light bg (option B) */
    --color-accent-dark:    #A37E3D;   /* darker gold for hover */
    --color-background:     #ffffff;
    --color-background-alt: #f8f7f4;   /* cream — section bands */
    --color-text:           #232B38;   /* charcoal */
    --color-text-light:     #5A6273;   /* bluish gray (pairs with navy) */
    --color-border:         #e5e5e5;
    --color-input-border:   #b3b9c4;   /* visible field border (forms) */
    --color-input-bg:       #fbfbfc;   /* subtle fill so boxes read as fillable */

    /* Typography */
    --font-display: 'Cormorant', Georgia, serif;
    --font-body:    'Work Sans', system-ui, sans-serif;

    /* Spacing */
    --spacing-xs:  0.5rem;
    --spacing-sm:  1rem;
    --spacing-md:  2rem;
    --spacing-lg:  4rem;
    --spacing-xl:  6rem;
    --spacing-xxl: 10rem;   /* luxe-v2 — desktop section breathing room */

    /* Container */
    --container-max: 1200px;   /* was 1400 — tighter, more boutique */

    /* Header height — bumped from 80 to 96 when the brand text was enlarged.
       Any section that sits at the top of the viewport (intro band, listing
       detail, mobile nav drop-down) must use this. */
    --header-height: 96px;

    /* Transitions */
    --transition-fast:   0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Corners — kept sharp (0) as a deliberate luxury-minimalism choice; the
       2px/4px tokens exist for the few elements already using soft corners. */
    --radius-sm: 2px;
    --radius-md: 4px;

    /* Elevation — atmospheric, navy-tinted (luxe), not heavy promotional drops. */
    --shadow-sm: 0 2px 8px   rgba(11, 30, 67, 0.06);
    --shadow-md: 0 6px 18px  rgba(11, 30, 67, 0.10);
    --shadow-lg: 0 16px 40px rgba(11, 30, 67, 0.12);

    /* Input focus ring (navy halo) — was hardcoded in 3 form rules. */
    --focus-ring: 0 0 0 3px rgba(11, 30, 67, 0.08);
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.7;
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }
main:focus { outline: none; }   /* tabindex=-1 main, focus moved here from skip-link — no outline needed */

/* Skip-link: visually hidden until keyboard-focused, then surfaced as a
   prominent navy chip in the top-left. Required for keyboard + screen-reader
   users to bypass the nav. */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--color-primary);
    color: white;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--color-accent);
    border-radius: 2px;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    z-index: 2000;
    transform: translateY(-150%);
    transition: transform var(--transition-fast);
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* Visually hidden but exposed to assistive tech (e.g. the stepper's
   aria-live "Step n of m" announcement). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-primary);
}
/* Design system v3 type scale — used uniformly across hero + sub-page intros + sections */
h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: clamp(1.875rem, 3.5vw, 3rem); font-weight: 300; letter-spacing: -0.015em; line-height: 1.1; }
h3 { font-size: 1.375rem; font-weight: 400; letter-spacing: -0.005em; line-height: 1.25; }

p {
    font-size: 1.0625rem;
    color: var(--color-text-light);
}
.prose p { max-width: 65ch; }

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img { max-width: 100%; height: auto; display: block; }

/* ============ Header ============ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-smooth);
}
.header.scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); }
.header-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    text-decoration: none;
}
.header-brand-img { height: 64px; width: auto; }

/* Name + title beside the logo (desktop only) — enlarged for prominence */
.header-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    padding-left: 0.875rem;
    border-left: 1px solid var(--color-border);
    padding-top: 4px;
    padding-bottom: 4px;
}
.header-brand-name {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}
.header-brand-name-first { color: var(--color-primary); }
.header-brand-name-last  { color: var(--color-accent-text); margin-left: 0.45em; }
.header-brand-title {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}
.nav a {
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text);
    position: relative;
}
.nav a::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0;
    width: 0; height: 1px;
    background: var(--color-accent);
    transition: var(--transition-smooth);
}
.nav a:hover::after { width: 100%; }

.lang-toggle {
    display: flex;
    gap: 0.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-border);
}
.lang-toggle a {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    transition: var(--transition-fast);
}
.lang-toggle a.active {
    background: var(--color-accent-text);   /* bronze — white text passes AA (gold did not) */
    color: white;
    border-color: var(--color-accent-text);
}
.lang-toggle a:hover:not(.active) { border-color: var(--color-accent); }

/* Mobile menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}
.mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: var(--color-primary);
    transition: var(--transition-fast);
}
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

.mobile-lang-toggle { display: none; }

/* ============ .intro — unified navy intro band (v3) ============
   ONE intro pattern shared by every page. Modifiers:
     .intro--tall    — home (80vh, centered headline + value prop)
     .intro--compact — sub-pages (50vh, eyebrow + h1 + p)
   Same color, same type scale, same gold accent rule above eyebrow. */

.intro {
    margin-top: var(--header-height);
    display: flex;
    align-items: center;
    position: relative;
    background: var(--color-primary);
    color: #ffffff;
    overflow: hidden;
    text-align: center;
}
.intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}
/* Gold accent rule, centered above the eyebrow. Position differs by height. */
.intro::after {
    content: '';
    position: absolute;
    top: var(--intro-rule-top, 28%);
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background: var(--color-accent);
    opacity: 0.7;
    pointer-events: none;
}

.intro--tall {
    min-height: 80vh;
    /* Don't grow taller than the visible viewport (minus the fixed header) so
       the bottom scroll-cue stays in view. svh handles mobile browser chrome. */
    max-height: calc(100svh - var(--header-height));
    padding: 2rem 0 8rem;  /* reserve room for the absolute scroll-cue at bottom */
    overflow: hidden;
    /* Inherits base .intro (flex + align-items:center) → the .intro-inner
       (h1 + lede + CTAs) is vertically centred. The old monogram/title brand
       block was removed — the fixed header already carries identity. */
}

/* Short-viewport guards — auto-shrink the enlarged elements so the entire
   hero (including the bottom scroll-cue) fits without scroll. Tall screens
   keep the full visual punch. */
@media (max-height: 900px) {
    .intro--tall { padding-bottom: 6rem; }
}
@media (max-height: 750px) {
    .intro--tall { padding-bottom: 4.5rem; }
    .intro-scroll-cue { bottom: 1rem; }
}
/* The compact-variant gold rule (::after at 22%) doesn't belong on the
   tall variant — the monogram itself is the top anchor. */
.intro--tall::after { display: none; }

.intro--compact {
    min-height: 50vh;
    --intro-rule-top: 32%;
}

/* Photographic hero layer.
   Pages opt in by adding `.intro--photo` AND setting the `--intro-photo`
   custom property inline:
       <section class="intro intro--tall intro--photo"
                style="--intro-photo: url('/static/img/hero/home.webp');">
   The gradient is calibrated so the existing white type stays legible while
   the photograph reads through. If the image is missing (404) the navy fallback
   below kicks in and the page degrades gracefully to the original look. */
.intro--photo {
    background-color: var(--color-primary);
    background-image:
        linear-gradient(180deg,
            rgba(11, 30, 67, 0.20) 0%,
            rgba(11, 30, 67, 0.30) 55%,
            rgba(11, 30, 67, 0.50) 100%),
        var(--intro-photo, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Home hero sits over a brighter daytime street photo — deepen the navy overlay
   (only on .intro--tall) so the white headline stays legible. Sub-page heroes
   keep the lighter base overlay above. */
.intro--tall.intro--photo {
    background-image:
        linear-gradient(180deg,
            rgba(11, 30, 67, 0.42) 0%,
            rgba(11, 30, 67, 0.48) 55%,
            rgba(11, 30, 67, 0.62) 100%),
        var(--intro-photo, none);
}

.intro-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
    width: 100%;
    animation: fadeInUp 0.9s cubic-bezier(0.4,0,0.2,1);
}

.intro-eyebrow {
    font-size: 1rem;           /* enlarged from 0.6875rem for readability */
    letter-spacing: 0.22em;    /* tightened from 0.32em at the larger size */
    text-transform: uppercase;
    color: var(--color-accent-text);
    font-weight: 700;          /* heavier eyebrow for photo readability */
    margin-bottom: 1.75rem;
}

.intro h1 {
    color: #ffffff;
    max-width: 18ch;
    margin: 0 auto 0.5rem;     /* further trim to clear scroll cue */
    font-weight: 700;          /* Cormorant Bold — heavy for hero contrast */
    line-height: 1.0;
}

.intro-lede {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.25rem);   /* shrunk so lede wraps shorter */
    margin: 0 auto;
    color: rgba(255,255,255,0.95);
    font-weight: 600;          /* Cormorant SemiBold italic */
    max-width: 52ch;
    line-height: 1.3;          /* was 1.35 */
}
/* Home hero lede gets the heavier weight (bold) for emphasis on the photo. */
.intro--tall .intro-lede { font-weight: 700; }

.intro-cta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;           /* tight to clear scroll cue */
}

/* Animated 'Découvrir ↓' scroll cue at the bottom of the home hero.
   Only rendered on .intro--tall (the home page); compact sub-page heroes
   don't get it. Honors prefers-reduced-motion. */
.intro-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-accent-text);
    font-size: 0.6875rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    z-index: 2;
    animation: bob 2.6s ease-in-out infinite;
    transition: color var(--transition-fast);
}
.intro-scroll-cue::before {
    content: '';
    display: block;
    width: 1px;
    height: 28px;
    background: var(--color-accent);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}
.intro-scroll-cue-chevron { width: 14px; height: 8px; }
.intro-scroll-cue:hover { color: white; }
@keyframes bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce) {
    .intro-scroll-cue { animation: none; }
}

/* Button overrides when on navy bg (used by both .intro and .cta-section) */
.intro .btn-primary,
.cta-section .btn-primary {
    background: var(--color-accent);
    color: var(--color-primary);
}
.intro .btn-primary:hover,
.cta-section .btn-primary:hover {
    background: #ffffff;
    color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.intro .btn-secondary,
.cta-section .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.5);
}
.intro .btn-secondary:hover,
.cta-section .btn-secondary:hover {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border-color: #ffffff;
}

/* ============ Buttons ============ */

.btn {
    padding: 1rem 2.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
}
.btn-primary {
    background: var(--color-accent);
    color: white;
}
.btn-primary:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.btn-secondary:hover {
    background: var(--color-primary);
    color: white;
}
.btn-block { width: 100%; }

/* ============ Search section ============ */

.search-section {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    background: var(--color-background);
}
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}
.search-box {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2rem;
    margin-top: calc(var(--spacing-xl) * -1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.search-field label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.search-field input,
.search-field select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: white;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: var(--transition-fast);
}
.search-field input:focus,
.search-field select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* ============ Featured properties / generic section ============ */

/* v3: every named section uses the same padding */
.featured-properties {
    padding: var(--spacing-xxl) 0;
    background: var(--color-background-alt);
}
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}
.section-subtitle {
    font-size: 1rem;           /* enlarged from 0.6875rem (consistent w/ .intro-eyebrow) */
    letter-spacing: 0.22em;    /* tightened from 0.32em at the larger size */
    text-transform: uppercase;
    color: var(--color-accent-text);
    font-weight: 500;
    margin-bottom: 1rem;
}
.section-title {
    margin-bottom: 1rem;
    font-weight: 300;
}
.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--color-accent);
    margin: 1.25rem auto 0;
}
.section-description {
    margin: 0 auto;
    color: var(--color-text-light);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.5;
    max-width: 540px;
}

/* luxe v2: photo-dominant, 2-up on desktop, charcoal price, gold rule on hover */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}
.properties-grid-empty {
    text-align: center;
    padding: var(--spacing-lg) 0;
    color: var(--color-text-light);
    font-style: italic;
    font-family: var(--font-display);
    font-size: 1.375rem;
    grid-column: 1 / -1;
}

.property-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.property-card {
    background: transparent;
    overflow: hidden;
    transition: var(--transition-smooth);
    border: 0;
    border-radius: 0;
}
.property-image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-background-alt);
}
.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.property-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0.04em;
}
.property-card:hover .property-image img { transform: scale(1.04); }
.property-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(11, 30, 67, 0.92);
    color: #ffffff;
    padding: 0.4rem 0.9rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Diagonal corner ribbon for SOLD / VENDU on closed listings.
   Sits on top of the photo, top-right corner, rotated 45° — the classic
   real-estate "SOLD" banner. The card image already has overflow:hidden
   so the ribbon edges are clipped to the card border. */
.property-sold-ribbon {
    position: absolute;
    top: 1.5rem;
    right: -3rem;
    width: 11rem;
    background: var(--color-accent);
    color: var(--color-primary);
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    padding: 0.45rem 0;
    transform: rotate(45deg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    z-index: 2;
    pointer-events: none;
}

/* SOLD price text — gold italic display serif instead of the dollar amount */
.property-price--sold {
    color: var(--color-accent-text);
    font-style: italic;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 1.375rem;
}
.property-card:hover .property-price--sold { border-bottom-color: var(--color-accent); }
.property-content { padding: 1.5rem 0 0; }
/* Genre kicker above the price (Duplex / Condo / …) — mirrors .listing-eyebrow. */
.property-eyebrow {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--color-accent-text);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.property-price {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--color-text);            /* charcoal, not gold */
    margin-bottom: 0.5rem;
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-smooth);
}
.property-card:hover .property-price { border-bottom-color: var(--color-accent); }
.property-address {
    font-size: 0.875rem;
    color: var(--color-text-light);
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    min-height: 1.25rem;
}
.property-features {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.property-feature {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
    letter-spacing: 0.03em;
}
.property-feature-icon {
    width: 16px;
    height: 16px;
    color: var(--color-text);
    opacity: 0.6;
    flex-shrink: 0;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}
.property-card:hover .property-feature-icon {
    color: var(--color-accent-text);
    opacity: 1;
}
/* Amenity chips (Waterfront / Garage / Pool) — true-flags-only row under the facts. */
.property-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}
.property-chip {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

/* "Load more" / view-all link */
.section-footer-link {
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* Listings results bar (count + sort dropdown) */
.listings-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.listings-count {
    font-size: 0.9375rem;
    color: var(--color-text-light);
}
.listings-count strong { color: var(--color-primary); font-weight: 500; }
.listings-sort {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}
.listings-sort label {
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
}
.listings-sort select {
    border: 1px solid var(--color-border);
    background: white;
    padding: 0.4rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
}
.listings-sort select:focus { outline: none; border-color: var(--color-accent); }

/* Services / FAQ disclosure */
.services-pricing {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2.5rem;
    margin-top: var(--spacing-md);
}
.services-pricing-lead {
    text-align: center;
    color: var(--color-text);
    max-width: 600px;
    margin: 0 auto 2rem;
}
.services-included-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.875rem 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}
.services-included-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--color-text);
    font-size: 0.9375rem;
}
.services-included-list li::before {
    content: '✓';
    color: var(--color-accent-text);
    font-weight: 600;
    position: absolute;
    left: 0;
}

.faq {
    max-width: 800px;
    margin: 0 auto;
}
.faq details {
    border-bottom: 1px solid var(--color-border);
    padding: 1.25rem 0;
}
.faq details:first-child { border-top: 1px solid var(--color-border); }
.faq summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-primary);
    list-style: none;
    padding-right: 2rem;
    position: relative;
    transition: var(--transition-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    color: var(--color-accent-text);
    font-size: 1.5rem;
    transition: var(--transition-smooth);
}
.faq details[open] summary::after { content: '−'; transform: rotate(180deg); }
.faq summary:hover { color: var(--color-accent-text); }
.faq details > *:not(summary) {
    margin-top: 1rem;
    color: var(--color-text);
}

/* About page card grid */
.about-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.about-area-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1.75rem;
}
.about-area-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-accent);
}
.about-area-card ul {
    list-style: none;
    padding: 0;
}
.about-area-card li {
    padding: 0.375rem 0;
    color: var(--color-text);
    font-size: 0.9375rem;
}

/* ============ Full signature band (used on /about + footer) ============ */

.jv-signature {
    display: grid;
    grid-template-columns: auto 1px 1fr auto;
    gap: 1.75rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 2rem;
}
.jv-sig-mark { height: 100px; width: auto; }
.jv-sig-tech { height: 100px; width: auto; }
.jv-sig-divider {
    width: 1px;
    height: 80px;
    background: var(--color-accent);
    opacity: 0.45;
}
.jv-sig-text { text-align: left; }

.jv-sig-name {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.2;
    margin-bottom: 0.4rem;
}
.jv-sig-name-first { color: var(--color-primary); }
.jv-sig-name-last  { color: var(--color-accent-text); }

.jv-sig-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text);
    margin-bottom: 0.55rem;
    letter-spacing: 0.03em;
}

.jv-sig-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}
.jv-sig-contact a {
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-fast);
}
.jv-sig-contact a:hover { color: var(--color-accent-text); }

.jv-sig-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.jv-sig-icon svg { width: 12px; height: 12px; }

.jv-sig-tagline {
    font-size: 0.75rem;
    color: var(--color-text-light);
    letter-spacing: 0.01em;
}
.jv-sig-tagline em {
    font-style: italic;
    font-family: var(--font-display);
}

.jv-sig-license {
    font-size: 0.75rem;
    color: var(--color-accent-text);
    letter-spacing: 0.08em;
    margin-top: 0.35rem;
}
.jv-sig-authorized {
    font-size: 0.6875rem;
    color: var(--color-text-light);
    letter-spacing: 0.03em;
    margin-top: 0.25rem;
    max-width: 32rem;
}

.jv-sig-sep {
    color: var(--color-accent-text);
    margin: 0 0.55rem;
    opacity: 0.85;
}

/* --- dark-background variant (footer) --- */
.jv-signature--dark .jv-sig-name-first { color: white; }
.jv-signature--dark .jv-sig-subtitle   { color: rgba(255,255,255,0.85); }
.jv-signature--dark .jv-sig-contact a  { color: rgba(255,255,255,0.85); }
.jv-signature--dark .jv-sig-contact a:hover { color: var(--color-accent-text); }
.jv-signature--dark .jv-sig-tagline    { color: rgba(255,255,255,0.7); }
.jv-signature--dark .jv-sig-authorized { color: rgba(255,255,255,0.6); }
.jv-signature--dark .jv-sig-icon {
    background: var(--color-accent);
    color: white;
}
.jv-signature--dark .jv-sig-divider {
    background: var(--color-accent);
    opacity: 0.5;
}

/* Stack on mobile */
@media (max-width: 900px) {
    .jv-signature {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem 1rem;
    }
    .jv-sig-divider { display: none; }
    .jv-sig-text { text-align: center; }
    .jv-sig-mark, .jv-sig-tech { height: 80px; margin: 0 auto; }
    .jv-sig-contact { justify-content: center; }
}

/* Phone-field helper hint ("Pour un rappel rapide.") */
.lead-form-phone-hint {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.75rem;
    color: var(--color-accent-text);
    margin-top: 0.4rem;
    letter-spacing: 0.01em;
}

/* Law 25 cookie consent banner — fixed bottom, default-hidden (JS reveals it
   when no choice is stored). Navy bar, gold accept, outline decline. */
.cookie-consent {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 1200;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--color-primary);
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent-text { margin: 0; flex: 1 1 280px; font-size: 0.9rem; line-height: 1.5; color: #fff; }
.cookie-consent-text a { color: var(--color-accent-text); text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 0.75rem; flex: 0 0 auto; }
.cookie-consent-actions button {
    font: inherit;
    cursor: pointer;
    padding: 0.6rem 1.4rem;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cookie-consent-accept {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    font-weight: 600;
}
.cookie-consent-accept:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.cookie-consent-decline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.cookie-consent-decline:hover { border-color: #fff; }
@media (max-width: 600px) {
    .cookie-consent { left: 0; right: 0; bottom: 0; border-radius: 0; }
    .cookie-consent-actions { width: 100%; }
    .cookie-consent-actions button { flex: 1; }
}

/* Cloudflare Turnstile widget (bot challenge above the form footer). Constrain
   so the flexible-size widget never bleeds past the form at ~320px. */
.cf-turnstile {
    margin: 0 0 1rem;
    max-width: 100%;
    overflow: hidden;
}

/* Preferred-contact radio (Courriel / Téléphone). Sits between phone field
   and Interest select. Drives a tiny JS handler in base.html that lifts the
   phone field to required when Téléphone is selected. */
.lead-form-preferred {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
}
.lead-form-preferred legend {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-light);
    font-weight: 500;
    margin-bottom: 0.5rem;
    padding: 0;
}
.lead-form-preferred-options {
    display: flex;
    gap: 1.75rem;
}
.lead-form-preferred-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    color: var(--color-text);
    cursor: pointer;
}
.lead-form-preferred-option input[type=radio] {
    accent-color: var(--color-accent);
    margin: 0;
}

/* Contact-page form interest dropdown wrap.
   v15: visually elevated — divider rule above + slightly heavier label,
   reads as the routing-question it actually is. */
.lead-form-interest {
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.lead-form-interest label {
    color: var(--color-primary);
    font-weight: 500;
}
.lead-form-interest select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    background: var(--color-input-bg);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
}
.lead-form-interest select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-background);
    box-shadow: var(--focus-ring);
}

.text-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-accent);
    transition: var(--transition-fast);
}
.text-cta:hover { color: var(--color-accent-text); }

/* ============ Why-choose — section shell only ============ */

.why-choose {
    padding: var(--spacing-xxl) 0;
    background: white;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    margin-top: var(--spacing-lg);
}

/* ============ .pillar — unified text-block component ============
   One component used by:
     - home .why-grid       (3-up)
     - about .about-expertise-grid (2-up)
     - services .why-grid   (3-up)
   Single source of truth for the gold-rule + h3 + body pattern. */
.pillar {
    text-align: left;
    padding: 0;
    position: relative;
}
.pillar::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-accent);
    margin-bottom: 1.5rem;
}
.pillar h3,
.pillar-title {
    font-size: 1.375rem;
    margin-bottom: 1rem;
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: -0.005em;
}
.pillar p,
.pillar-body {
    font-size: 0.9375rem;
    line-height: 1.75;
    margin: 0;
    color: var(--color-text-light);
    max-width: none;
}
.pillar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pillar li {
    padding: 0.4rem 0;
    color: var(--color-text-light);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ============ .block-title — sub-heading inside a card or column ============
   Smaller than .section-title (which is the main per-section h2).
   Used by: services-pricing inner h3, contact form column h2,
            listing-sidebar h3. */
.block-title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.block-title::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--color-accent);
    margin-top: 0.75rem;
}
.block-title--center { text-align: center; }
.block-title--center::after { margin-left: auto; margin-right: auto; }

/* ============ Private-list opt-in ============
   Editorial band variant (home, between testimonials & CTA) and a compact
   footer variant. Both post to /leads/submit with interest=private_list. */

.private-list {
    padding: var(--spacing-xxl) 0;
    background: white;
}
.private-list-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
    position: relative;
}
.private-list-card::before {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--color-accent);
    margin: 0 auto 2rem;
}
.private-list-eyebrow {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--color-accent-text);
    font-weight: 500;
    margin-bottom: 1.25rem;
}
.private-list-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.015em;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0 auto 1.25rem;
    max-width: 18ch;
}
.private-list-body {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-text-light);
    margin: 0 auto 2.25rem;
    max-width: 480px;
    line-height: 1.5;
}
.private-list-cta { margin-top: 0.5rem; }

/* Footer-variant: compact, dark surface. */
.private-list-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.private-list-footer-label {
    display: block;
    color: white;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}
.private-list-footer-btn {
    background: transparent;
    border: 0;
    color: var(--color-accent-text);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    cursor: pointer;
    padding: 0 0.5rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}
.private-list-footer-btn:hover { color: white; }

/* ============ Testimonials — cream band, static 3-up grid ============ */

.testimonials {
    padding: var(--spacing-xxl) 0;
    background: var(--color-background-alt);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1100px;
    margin: var(--spacing-lg) auto 0;
}
.testimonial {
    position: relative;
    padding-top: 2rem;
    margin: 0;
}
.testimonial::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 32px;
    height: 1px;
    background: var(--color-accent);
}
.testimonial-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text);
    margin: 0 0 1.5rem;
    max-width: none;
    padding: 0;
}
.testimonial-attribution {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-light);
    font-weight: 500;
}
.testimonial-attribution-name { color: var(--color-primary); }
.testimonial-sep {
    color: var(--color-accent-text);
    margin: 0 0.4em;
    opacity: 0.85;
}
@media (max-width: 900px) {
    .testimonials-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============ CTA section — luxe v2 solid navy + gold rule ============ */

.cta-section {
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-xxl) 0;
    text-align: center;
    position: relative;
}
.cta-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
}
.cta-content::before {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--color-accent);
    margin: 0 auto 2rem;
}
.cta-section h2 {
    color: white;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 300;
    letter-spacing: -0.015em;
    margin-bottom: 1.25rem;
}
.cta-section p {
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    margin: 0 auto 2.75rem;
    max-width: 540px;
    line-height: 1.5;
}
.cta-buttons {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-section .btn-primary {
    background: var(--color-accent);
    color: var(--color-primary);
}
.cta-section .btn-primary:hover {
    background: #ffffff;
    color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.cta-section .btn-secondary {
    background: transparent;
    color: white;
    border: 1px solid rgba(255,255,255,0.5);
}
.cta-section .btn-secondary:hover {
    background: rgba(255,255,255,0.08);
    color: white;
    border-color: white;
}

/* ============ Concierge sticky button ============
   Bottom-right floating action button that expands into a 3-option menu
   (call / WhatsApp / write). Visibility + open state are driven by classes
   toggled in base.html: .is-visible (set after >120px scroll) and .is-open
   (toggled on tap). Defaults to hidden so it can't compete with the hero. */

.concierge {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1),
                transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.concierge.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.concierge-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    border: 1px solid var(--color-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(11, 30, 67, 0.25);
    transition: var(--transition-smooth);
    padding: 0;
}
.concierge-toggle:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    transform: translateY(-2px);
}
.concierge-toggle-icon {
    position: relative;
    width: 24px;
    height: 24px;
}
.concierge-toggle-icon svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.concierge-icon-close { opacity: 0; transform: rotate(-90deg); }
.concierge.is-open .concierge-icon-default { opacity: 0; transform: rotate(90deg); }
.concierge.is-open .concierge-icon-close   { opacity: 1; transform: rotate(0); }

.concierge-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.concierge.is-open .concierge-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.concierge-item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: white;
    color: var(--color-primary);
    padding: 0.65rem 1rem 0.65rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(11, 30, 67, 0.12);
    transition: var(--transition-fast);
    white-space: nowrap;
}
.concierge-item:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    transform: translateX(-2px);
}
.concierge-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-fast);
}
.concierge-item-icon svg { width: 14px; height: 14px; }
.concierge-item:hover .concierge-item-icon {
    background: var(--color-accent);
}

@media (max-width: 600px) {
    .concierge { right: 1rem; bottom: 1rem; }
    .concierge-item { padding: 0.55rem 0.9rem 0.55rem 0.55rem; font-size: 0.75rem; }
}

/* ============ Footer ============ */

.footer {
    background: var(--color-secondary);
    color: rgba(255, 255, 255, 0.78);
    padding: var(--spacing-lg) 0 var(--spacing-md);
    margin-top: 0;
}
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer-content--cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-brand-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.footer-brand-img { height: 44px; width: auto; }
.footer-brand-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: white;
    font-weight: 500;
}
.footer-description {
    font-size: 0.9375rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    max-width: none;
}
.footer-tagline {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-accent-text);
    font-size: 1rem;
    margin-bottom: 1rem;
}
.footer-license {
    font-size: 0.8125rem;
    color: var(--color-accent-text);
    letter-spacing: 0.05em;
}
.footer-title {
    color: white;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.78);
    transition: var(--transition-fast);
}
.footer-links a:hover { color: var(--color-accent-text); }
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* .about-signature-band — REMOVED in v3.
   The signature partial lives only in the page footer now. */

/* ============ About page — luxe v2 ============ */

.about-bio {
    padding: var(--spacing-xxl) 0;
    background: white;
}
.about-bio-inner {
    max-width: 760px;
    margin: 0 auto;
}

/* Two-column portrait + bio layout used on /about.
   Portrait (left, 4:5) sits beside the prose (right). Uses CSS background-image
   so a missing jv-portrait.webp degrades to a clean cream placeholder rather
   than a broken-image icon. role+aria-label preserve a11y. */
.about-bio-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: start;
}
.about-bio-grid .about-bio-inner {
    max-width: none;
    margin: 0;
}
.about-portrait {
    aspect-ratio: 4 / 5;
    background-color: var(--color-background-alt);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-smooth);
    margin: 0;
}
.about-portrait:hover { border-color: var(--color-accent); }
/* Placeholder variant while the real headshot is pending: center the monogram
   (contained) on the alt background instead of cover-cropping a photo. */
.about-portrait--placeholder {
    background-size: 42%;
    background-position: center;
    background-color: var(--color-background-alt);
}

@media (max-width: 900px) {
    .about-bio-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-portrait { max-width: 320px; margin: 0 auto; }
}
/* /about uses the standard section-header above the prose — no bespoke title rule */
.about-bio-prose p {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: 1.75rem;
    max-width: none;
    font-weight: 400;
}
.about-bio-prose p:first-child::first-letter {
    font-size: 3.5em;
    float: left;
    line-height: 0.9;
    margin: 0.15em 0.15em 0 0;
    color: var(--color-accent-text);
    font-weight: 400;
}

.about-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
    margin: var(--spacing-lg) 0 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}
.about-fact dt {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.about-fact dd {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-primary);
    line-height: 1.3;
}

.about-expertise {
    padding: var(--spacing-xxl) 0;
    background: var(--color-background-alt);
}
.about-expertise .section-header { margin-bottom: var(--spacing-lg); }
.about-expertise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg) 4rem;
}
@media (max-width: 768px) {
    .about-expertise-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
    .about-bio-prose p { font-size: 1.1875rem; }
}

/* ============ Generic page shells (contact, about, 404) ============ */

/* Consistent sub-page intro band. Cream by design-system rule:
   the rhythm is cream → white → cream → white → navy(CTA). */
/* Most sub-page intros are .intro.intro--compact (navy). The utility/error pages
   (404, microsite "unavailable") still use .page-header — the site header is
   position:fixed, so offset the heading block below it (matches the .intro
   margin-top pattern) or the text hides under the fixed banner. */
.page-header {
    padding: calc(var(--header-height) + var(--spacing-lg)) 0 var(--spacing-md);
    text-align: center;
}

.page-body { padding: var(--spacing-xxl) 0; background: white; }

/* /credits page attribution list */
.credits-list { margin: var(--spacing-md) 0 var(--spacing-lg); }
.credits-entry { padding: 1.25rem 0; border-bottom: 1px solid var(--color-border); }
.credits-entry:first-child { border-top: 1px solid var(--color-border); }
.credits-entry dt {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    font-weight: 500;
    margin-bottom: 0.35rem;
}
.credits-entry dd { margin: 0; font-size: 0.9375rem; color: var(--color-text); }
.credits-entry dd em { color: var(--color-primary); font-style: italic; }
.credits-entry dd a { color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }
.credits-entry dd a:hover { color: var(--color-accent-text); }
.credits-note { margin-top: var(--spacing-md); font-size: 0.875rem; color: var(--color-text-light); font-style: italic; }

.prose { max-width: 720px; margin: 0 auto; padding: 0 2rem; }
.prose h2 {
    font-size: 1.75rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    padding-left: 1rem;
    border-left: 2px solid var(--color-accent);
}
.prose h2:first-of-type { margin-top: 0; }
.prose p {
    margin-bottom: 1rem;
    color: var(--color-text);
    max-width: none;
}
.prose ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}
.prose ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}
.prose ul li::before {
    content: '▸';
    color: var(--color-accent-text);
    position: absolute;
    left: 0;
}
.prose .pull-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 2rem;
    line-height: 1.4;
}

.contact-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
.contact-block { margin-bottom: 2rem; }
.contact-block-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent-text);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.contact-block-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--color-primary);
    transition: var(--transition-fast);
    display: block;
}
a.contact-block-value:hover { color: var(--color-accent-text); }
.contact-block-text {
    color: var(--color-text);
    font-size: 1rem;
}

/* ============ Listing detail — luxe v2 full-bleed hero + single column ============ */

.listing-detail { padding: var(--header-height) 0 var(--spacing-xxl); }
/* listing-detail uses the standard container width like every other page */

/* Full-bleed hero photo above the inner container */
.listing-hero {
    width: 100%;
    aspect-ratio: 21 / 9;
    background: var(--color-background-alt);
    overflow: hidden;
    position: relative;
}
.listing-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Title block sits ABOVE the gallery now — compact, no divider (the gallery is
   the divider). Top spacing comes from .listing-detail's --header-height pad. */
.listing-header {
    margin: 0 0 2.5rem;
    text-align: center;
}
.listing-eyebrow {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--color-accent-text);
    font-weight: 500;
    margin-bottom: 0.85rem;
}
.listing-title {
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}
.listing-price {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--color-text);
}
/* Sold/Rented shown once, as a bordered pill (status no longer in the eyebrow). */
.listing-status-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent-text);
    border: 1px solid var(--color-accent-text);
    border-radius: 2px;
    padding: 0.4rem 1.1rem;
}
/* At-a-glance facts row (beds · baths · sqft · lot), middot-separated. */
.listing-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    margin-top: 1.25rem;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-text);
}
.listing-fact { white-space: nowrap; }
.listing-fact:not(:last-child)::after {
    content: "·";
    margin: 0 0.75rem;
    color: var(--color-accent-text);
}

/* Hero gallery grid: 1 large left + 4 thumbnails right (Sotheby's / Compass
   pattern). Aspect ratio fills the same vertical real estate as the old
   single-photo .listing-hero so subsequent sections stay anchored. */
.listing-hero-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0.5rem;
    aspect-ratio: 21 / 9;
    width: 100%;
    background: var(--color-background-alt);
    overflow: hidden;
}
.listing-hero-grid-main {
    display: block;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--color-background-alt);
    text-decoration: none;
}
.listing-hero-grid-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.listing-hero-grid-main:hover img { transform: scale(1.02); }

.listing-hero-grid-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.5rem;
}
.listing-hero-grid-thumb {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--color-background-alt);
    text-decoration: none;
}
.listing-hero-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.listing-hero-grid-thumb:hover img { transform: scale(1.04); }
.listing-hero-grid-more {
    position: absolute;
    inset: 0;
    background: rgba(11, 30, 67, 0.72);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    pointer-events: none;
}

@media (max-width: 900px) {
    .listing-hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr 2fr;
        aspect-ratio: 4 / 3;
    }
    .listing-hero-grid-thumbs {
        grid-template-rows: 1fr;
    }
}
@media (max-width: 600px) {
    .listing-hero-grid {
        grid-template-rows: 4fr 1fr;
    }
}

/* ============ Lightbox ============
   Vanilla-JS fullscreen viewer for property photos. Activated by any element
   with [data-lightbox] + [data-lightbox-group]; the group attribute stitches
   together the slideshow set. Behavior wired in base.html. */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem 104px;   /* bottom room for the filmstrip */
}
.lightbox.is-open { display: flex; }
.lightbox-figure {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    margin: 0;
}
.lightbox-img {
    max-width: 92vw;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
/* Thumbnail filmstrip pinned to the bottom; active thumb gets the gold border
   and is auto-scrolled to centre. Centres when few, scrolls when many
   (`safe center` avoids the flexbox overflow-unreachable bug). */
.lightbox-strip {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    gap: 0.4rem;
    justify-content: safe center;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.7rem 1rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.lightbox-thumb {
    flex: 0 0 auto;
    width: 82px;
    height: 54px;
    object-fit: cover;
    opacity: 0.45;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lightbox-thumb:hover { opacity: 0.8; }
.lightbox-thumb.is-active { opacity: 1; border-color: var(--color-accent); }
.lightbox-caption {
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.875rem;
    margin: 1rem 0 0;
    letter-spacing: 0.04em;
}
.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    transition: var(--transition-fast);
}
.lightbox-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    transform: none;
    font-size: 1.25rem;
}
@media (max-width: 768px) {
    .lightbox { padding-bottom: 80px; }
    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
    .lightbox-btn { width: 40px; height: 40px; }
    .lightbox-close { top: 0.75rem; right: 0.75rem; }
    .lightbox-img { max-height: 72vh; }
    .lightbox-thumb { width: 64px; height: 42px; }
    .lightbox-strip { gap: 0.3rem; padding: 0.5rem 0.75rem; }
}

/* Single-column body — sidebar becomes a centered band lower on the page */
.listing-body {
    display: block;
}
.listing-body > div { max-width: 720px; margin: 0 auto; }
.listing-body > aside { max-width: 640px; margin: var(--spacing-lg) auto 0; }
.listing-section { margin-bottom: var(--spacing-lg); }
.listing-section h2 {
    font-size: 1.625rem;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    padding-left: 0;
    border-left: 0;
    position: relative;
    padding-bottom: 0.75rem;
}
.listing-section h2::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-accent);
    position: absolute;
    bottom: 0;
    left: 0;
}
.listing-features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem 2rem;
}
.listing-feature dt {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.listing-feature dd {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-primary);
    font-weight: 400;
}
.listing-remarks {
    color: var(--color-text);
    white-space: pre-line;
    line-height: 1.8;
    max-width: none;
}
#map {
    height: 360px;
    width: 100%;
    border: 1px solid var(--color-border);
}

/* Single-column layout — sidebar becomes a centered contact band */
.listing-sidebar {
    background: var(--color-background-alt);
    border: 0;
    border-top: 1px solid var(--color-accent);
    padding: 2.5rem 2rem;
    border-radius: 0;
    text-align: center;
}
.listing-sidebar h3 {
    font-size: 1.625rem;
    margin-bottom: 1.75rem;
    color: var(--color-primary);
    font-weight: 400;
}
.listing-sidebar .lead-form { text-align: left; }

/* ============ Lead form ============ */

.lead-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.lead-form .form-field { margin-bottom: 1rem; }
.lead-form label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-light);
    margin-bottom: 0.4rem;
    font-weight: 500;
}
.lead-form input,
.lead-form textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    background: var(--color-input-bg);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: var(--transition-fast);
}
.lead-form input::placeholder,
.lead-form textarea::placeholder {
    color: var(--color-text-light);
}
.lead-form input:focus,
.lead-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-background);
    box-shadow: var(--focus-ring);
}
.lead-form textarea { resize: vertical; min-height: 100px; }
.lead-form .form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.lead-form .privacy-note {
    font-size: 0.75rem;
    color: var(--color-text-light);
    max-width: 240px;
}
.lead-form .honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.lead-form-consent {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-light);
}
.lead-form-consent input { margin-top: 0.2rem; flex: 0 0 auto; }

/* Selects inside the lead form (stepped funnels: type/timeline) — match inputs. */
.lead-form select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    background: var(--color-input-bg);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: var(--transition-fast);
}
.lead-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-background);
    box-shadow: var(--focus-ring);
}

/* ===== Seller / valuation funnel (3-step) ===== */
.form-intro {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0 0 1.75rem;
    max-width: 52ch;
}
.step-progress { display: none; }
.lead-form--stepped.js-stepped .step-progress {
    display: flex;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
.step-progress li {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--color-border);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.step-progress li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    transition: var(--transition-fast);
}
.step-progress li.is-active,
.step-progress li.is-done {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}
.step-progress li.is-active span {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}
.step-progress li.is-done span {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.form-step {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
}
.lead-form--stepped.js-stepped .form-step { display: none; }
.lead-form--stepped.js-stepped .form-step.is-active {
    display: block;
    animation: fadeIn 0.3s ease;
}
.form-step-nav {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .form-step-nav { flex-direction: column-reverse; }
    .form-step-nav .btn { width: 100%; }
    .step-progress li { letter-spacing: 0.04em; }
}
.lead-success {
    background: var(--color-background-alt);
    border-left: 3px solid var(--color-accent);
    padding: 1.5rem;
}
.lead-success-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}
.lead-error {
    color: #a52a2a;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

/* ============ Listings page ============ */

.listings-filter {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: var(--spacing-md);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.listings-filter .search-field input,
.listings-filter .search-field select {
    border-bottom: 1px solid var(--color-border);
    border-top: 0; border-left: 0; border-right: 0;
    padding: 0.5rem 0;
}
/* v3: white band following the navy intro */
.listings-page {
    background: white;
    padding: var(--spacing-xxl) 0;
}

/* ============ Animations ============ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scroll-reveal — IntersectionObserver toggles .is-visible on .reveal nodes */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1),
                transform 0.9s cubic-bezier(0.4,0,0.2,1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Responsive ============ */

@media (max-width: 1024px) {
    .hero-content,
    .listing-body,
    .contact-grid { grid-template-columns: 1fr; }
    /* Funnel landings: stack the form (2nd child) ABOVE the contact-info block. */
    .contact-grid--funnel > :nth-child(2) { order: -1; }
    .hero-image { display: none; }
    .why-grid { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; gap: 2rem; }
    .properties-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .featured-properties { padding: var(--spacing-lg) 0; }
    /* Keep the brand name + title beside the logo at all sizes (smaller than
       desktop so the header stays uncluttered). Fonts scale with the viewport
       so the long "Residential Real Estate Broker" line stays on ONE line down
       to ~320px — wrapping would grow the fixed header past --header-height. */
    .header-brand-name {
        font-size: clamp(0.6875rem, 2.6vw, 1rem);
        letter-spacing: 0.06em;
        white-space: nowrap;
    }
    .header-brand-name-last { margin-left: 0.3em; }
    .header-brand-title {
        font-size: clamp(0.40625rem, 1.5vw, 0.6875rem);
        letter-spacing: 0.04em;
        margin-top: 0.4rem;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    /* Dial back the v2 generous spacing on small screens */
    .why-choose,
    .about-bio,
    .about-expertise,
    .cta-section { padding: var(--spacing-lg) 0; }
    .featured-properties { padding: var(--spacing-lg) 0; }
    .why-grid { gap: var(--spacing-md); }
    /* Hero shorter on mobile so the scroll-cue is in viewport */
    .intro--tall { min-height: 70vh; }
    .intro-scroll-cue { bottom: 1.25rem; }
    .about-bio-prose p:first-child::first-letter {
        font-size: 2.5em;
        margin: 0.1em 0.1em 0 0;
    }

    .nav {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0; right: 0;
        background: white;
        flex-direction: column;
        gap: 0;
        padding: 1.5rem 2rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-top: 1px solid var(--color-border);
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        align-items: flex-start;
    }
    .nav.active { display: flex; }
    .nav a {
        padding: 1rem 0;
        border-bottom: 1px solid var(--color-border);
        width: 100%;
    }
    .nav a:last-child { border-bottom: none; }
    .nav a::after { display: none; }
    .lang-toggle { display: none !important; }
    .mobile-lang-toggle {
        display: inline-flex;
        align-items: center;
        background: var(--color-accent-text);   /* bronze — white text passes AA */
        color: white;
        border: 1px solid var(--color-accent-text);
        border-radius: 2px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.05em;
    }
    .mobile-menu-btn { display: flex; }
    /* Reclaim horizontal room for the brand name+title on phones WITHOUT
       changing the header's height (vertical padding + 64px logo stay = 96px,
       so --header-height offsets are untouched): trim the side padding, the
       brand gap/divider padding, and the FR/EN pill. */
    .header-content { padding: 1rem 1rem; }
    .header-brand { gap: 0.6rem; }
    .header-brand-text { padding-left: 0.6rem; }
    .mobile-lang-toggle { padding: 0.4rem 0.6rem; font-size: 0.75rem; letter-spacing: 0.03em; }
    .properties-grid { grid-template-columns: 1fr; }
    .search-grid { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; }
    .cta-buttons .btn { width: 100%; }
    .lead-form .form-row { grid-template-columns: 1fr; }
}

/* Dark bands (navy intro / CTA / footer / cookie bar) keep the brighter gold
   for text — it passes contrast on navy; the bronze token is for light surfaces. */
.intro, .cta-section, .footer, .cookie-consent { --color-accent-text: var(--color-accent); }

/* ---------------------------------------------------------------------------
   Single-property microsites
   Slim header chrome (no main-site nav): brand on the left, direct phone +
   FR/EN toggle on the right. Reuses .header / .header-brand / .lang-toggle;
   only the right-side action cluster is new.
---------------------------------------------------------------------------- */
.microsite-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.microsite-header-phone {
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text);
    white-space: nowrap;
}
.microsite-header-phone:hover { color: var(--color-accent-text); }

@media (max-width: 768px) {
    /* No hamburger on a microsite, so the FR/EN toggle must stay visible
       (the main site hides .lang-toggle on mobile in favour of the menu). */
    .header--microsite .lang-toggle { display: inline-flex !important; }
    .header--microsite .microsite-header-phone { display: none; } /* phone lives in the concierge button */
    .microsite-header-actions { gap: var(--spacing-sm); }
}

/* ---------------------------------------------------------------------------
   Income / revenue property detail — units table + "Détails financiers"
--------------------------------------------------------------------------- */
/* Compact overview spec strip — tiny label over value, wrapping, dense. */
.listing-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2.25rem;
}
.spec { display: flex; flex-direction: column; gap: 0.02rem; }
.spec-k {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--color-text-light);
    font-weight: 600;
}
.spec-v {
    font-size: 0.9375rem;
    color: var(--color-primary);
    font-weight: 500;
    line-height: 1.2;
}
/* Tight section — trims the heading gap + section spacing for the dense blocks. */
.listing-section--tight { margin-bottom: 1.25rem; }
.listing-section--tight h2 { font-size: 1.25rem; margin-bottom: 0.5rem; padding-bottom: 0.3rem; }

.listing-units-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.listing-units {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.875rem;
}
.listing-units th, .listing-units td {
    text-align: left;
    padding: 0.28rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.listing-units thead th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    font-weight: 600;
    border-bottom: 1px solid var(--color-primary);
}
.listing-units td { color: var(--color-primary); }
.listing-units .num { text-align: right; }
.listing-units tbody tr:last-child td { border-bottom: 0; }

.listing-financials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem 2.5rem;
}
.fin-title {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent-text);
    font-weight: 600;
    margin: 0 0 0.6rem;
}
.fin-block .listing-features-list { display: block; }
.fin-block .listing-feature {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}
.fin-block .listing-feature dt {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-text);
    font-weight: 400;
}
.fin-block .listing-feature dd {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-primary);
    white-space: nowrap;
}
.fin-block .fin-total {
    border-bottom: 0;
    border-top: 1px solid var(--color-primary);
    margin-top: 0.15rem;
}
.fin-block .fin-total dt, .fin-block .fin-total dd { font-weight: 700; }
.fin-caveat {
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-style: italic;
    margin: 0.7rem 0 0;
    line-height: 1.4;
}