/* =====================================================================
   Michael W Coleman — Shared Site Styles
   Denver Luxury Real Estate Advisor | Relocation & New Construction Specialist
   ===================================================================== */

:root {
    --color-primary: #000000;
    --color-accent: #FFFFFF;
    --color-text: #E5E5E5;
    --color-text-soft: #9CA3AF;
    --color-card: #0A0A0A;
    --color-button-border: #BBBBBB;
    --color-border: #1A1A1A;
    /* Editorial layer */
    --accent-warm: #B8956A;
    --accent-deep: #7B5F3C;
    --paper:       #EBE5DA;
    --paper-deep:  #D6CFC0;
    --paper-ink:   #14110D;
}
[data-theme="light"] {
    --color-primary: #FFFFFF;
    --color-accent: #0A0A0A;
    --color-text: #1A1A1A;
    --color-text-soft: #555555;
    --color-card: #F7F7F7;
    --color-button-border: #555555;
    --color-border: #E5E5E5;
}
[data-theme="light"] body { background-color: #FFFFFF; color: #1A1A1A; }
[data-theme="light"] .scrolled-nav { background-color: rgba(255,255,255,0.97) !important; border-bottom: 1px solid #E5E5E5; }
[data-theme="light"] .scrolled-nav #nav-left-links a,
[data-theme="light"] .scrolled-nav #nav-right-links a { color: #1A1A1A !important; }
[data-theme="light"] .scrolled-nav .theme-toggle-animated { color: #0A0A0A !important; }
[data-theme="light"] .scrolled-nav #nav-logo { filter: invert(1) !important; }
[data-theme="light"] #nav-left-links a, [data-theme="light"] #nav-right-links a { color: #FFFFFF; }
[data-theme="light"] .theme-toggle-animated { color: #FFFFFF; }
[data-theme="light"] #nav-logo { filter: none; }
[data-theme="light"] #hero .ghost-btn,
[data-theme="light"] .page-hero .ghost-btn { color: #FFFFFF !important; border-color: rgba(255,255,255,0.7) !important; }
[data-theme="light"] .ghost-btn { color: #0A0A0A; border-color: #555555; }
[data-theme="light"] .ghost-btn:hover { background-color: rgba(0,0,0,0.06); }
[data-theme="light"] .solid-btn { background-color: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
[data-theme="light"] section { background-color: #FFFFFF; }
[data-theme="light"] .bg-soft { background-color: #F7F7F7 !important; }
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 { color: #0A0A0A !important; }
[data-theme="light"] .body-copy { color: #444444 !important; }
[data-theme="light"] .micro { color: #666666 !important; }
[data-theme="light"] .text-white { color: #0A0A0A !important; }
/* Heroes always sit on a dark image / video — keep their text white regardless of theme */
[data-theme="light"] .page-hero h1,
[data-theme="light"] .page-hero h2,
[data-theme="light"] .page-hero h3,
[data-theme="light"] .page-hero p,
[data-theme="light"] .page-hero .text-white,
[data-theme="light"] .page-hero .body-copy,
[data-theme="light"] .page-hero .micro,
[data-theme="light"] .page-hero .eyebrow,
[data-theme="light"] #hero h1,
[data-theme="light"] #hero h2,
[data-theme="light"] #hero h3,
[data-theme="light"] #hero p,
[data-theme="light"] #hero .text-white,
[data-theme="light"] #hero .body-copy,
[data-theme="light"] #hero .micro,
[data-theme="light"] #hero .eyebrow { color: #FFFFFF !important; }
[data-theme="light"] .border-line { border-color: #E5E5E5 !important; }
[data-theme="light"] footer { background-color: #0A0A0A !important; }
[data-theme="light"] footer h2, [data-theme="light"] footer h3, [data-theme="light"] footer p { color: #CCCCCC !important; }
[data-theme="light"] footer a { color: #AAAAAA !important; }
[data-theme="light"] footer .text-white { color: #FFFFFF !important; }
[data-theme="light"] footer .ghost-btn { color: #FFFFFF !important; border-color: rgba(255,255,255,0.5) !important; }
[data-theme="light"] #mobile-menu { background-color: rgba(255,255,255,0.98) !important; }
[data-theme="light"] #mobile-menu a, [data-theme="light"] #mobile-menu .text-white { color: #111111 !important; }
[data-theme="light"] #brokerage-badge { background-color: #FFFFFF !important; border-color: #E5E5E5 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important; }
[data-theme="light"] #brokerage-badge .badge-text { color: #1A1A1A !important; }
[data-theme="light"] .service-card { background-color: #F7F7F7 !important; border-color: #E5E5E5 !important; }
[data-theme="light"] .service-card p,
[data-theme="light"] .service-card .text-white { color: #0A0A0A !important; }
[data-theme="light"] .service-card .body-copy { color: #444444 !important; }
[data-theme="light"] .review-card-scroll { background: linear-gradient(135deg, #FFFFFF 0%, #F7F7F7 100%) !important; border-color: #E5E5E5 !important; }
[data-theme="light"] .review-card-scroll p { color: #444444 !important; }
[data-theme="light"] .review-card-scroll .text-white { color: #1A1A1A !important; }
[data-theme="light"] .reviews-scroll-container::before { background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%) !important; }
[data-theme="light"] .reviews-scroll-container::after { background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%) !important; }
[data-theme="light"] .authority-cell { border-color: #E5E5E5 !important; }
[data-theme="light"] .page-hero { background-color: #0A0A0A; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-primary);
    color: var(--color-text);
    font-weight: 300;
    position: relative;
}
/* Layered film grain — adds tactile texture across both themes */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.075;
    /* Two-layer noise: fine + coarse for genuine film-grain feel rather than digital noise */
    background-image:
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'><filter id='n1'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n1)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n2)' opacity='0.55'/></svg>");
    background-size: 220px 220px, 400px 400px;
    mix-blend-mode: overlay;
}
[data-theme="light"] body::after {
    opacity: 0.085;
    mix-blend-mode: multiply;
}

/* Atmospheric soft light — subtle radial gradients give the page depth
   and a sense of being "lit" rather than flat. Used by luxury hospitality
   and watch sites (Aman, Cartier, etc.) at very low opacity. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 65%),
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(184, 149, 106, 0.035), transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.18) 100%);
}
[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184, 149, 106, 0.04), transparent 65%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.05) 100%);
}
h1, h2, h3, .section-headline, .hero-headline { text-wrap: balance; }
p, .body-copy { text-wrap: pretty; }
img { outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; }
[data-theme="dark"] img,
html:not([data-theme="light"]) img { outline-color: rgba(255, 255, 255, 0.06); }
/* Logos are not photography — never give them an outline */
#nav-logo,
.affil-logo,
.brand-pill img,
.footer-mhl img,
.inline-logo img,
.no-outline { outline: none !important; }

.display { font-family: 'Playfair Display', serif; font-weight: 400; letter-spacing: -0.01em; }

/* Buttons */
.ghost-btn {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-button-border);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 1rem 2.5rem;
    font-size: 0.7rem;
    display: inline-block;
}
.ghost-btn:hover {
    border-color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}
.solid-btn {
    background-color: var(--color-accent);
    color: var(--color-primary);
    border: 1px solid var(--color-accent);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 1rem 2.5rem;
    font-size: 0.7rem;
    display: inline-block;
}
.solid-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* Theme toggle */
.theme-toggle-animated {
    background: none; border: none; outline: none; cursor: pointer;
    padding: 0.4rem; display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; transition: all 0.3s ease; border-radius: 0.4rem; line-height: 1;
}
.theme-toggle-animated:hover { transform: scale(1.1); opacity: 0.8; }

/* Scrolled nav */
.scrolled-nav {
    background-color: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.scrolled-nav #nav-logo { height: 44px; }
@media (min-width: 1024px) { .scrolled-nav #nav-logo { height: 58px; } }

/* Hero (homepage) */
#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.75) 100%);
}

/* Page hero (sub-pages) */
.page-hero {
    position: relative;
    padding: 12rem 0 9rem;
    background-color: #000000;
    overflow: hidden;
}
.page-hero.with-image {
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary);
    color: white;
}
/* Subtle atmospheric scrim — lets ~30-40% of the photo through so the
   imagery has real presence, while still fading fully to body color at
   the bottom so the hero dissolves into the next section with no seam. */
.page-hero.with-image::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.68) 0%,
        rgba(0, 0, 0, 0.62) 30%,
        rgba(0, 0, 0, 0.82) 65%,
        var(--color-primary) 100%
    );
}
.page-hero.with-image > * { position: relative; z-index: 1; }

/* Scroll reveal */
.scroll-reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }

/* Nav layout — logo left, links right */
#navbar {
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
}
#nav-logo {
    height: 56px;
    width: auto;
    display: block;
    transition-property: height, opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
}
@media (min-width: 1024px) { #nav-logo { height: 78px; } }
#nav-links {
    display: none;
    align-items: center;
    gap: 1.65rem;
}
#nav-links a {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    transition-property: opacity, color;
    transition-duration: 200ms;
}
#nav-links a:hover { opacity: 0.6; }

/* Contact CTA — pill-shaped, brass, visually distinct from the rest of the nav */
#nav-links a.nav-cta {
    margin-left: 0.85rem;
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--accent-warm);
    border-radius: 999px;
    color: var(--accent-warm);
    transition-property: background-color, color, border-color, opacity;
    transition-duration: 280ms;
}
#nav-links a.nav-cta:hover {
    background-color: var(--accent-warm);
    color: var(--color-primary);
    border-color: var(--accent-warm);
    opacity: 1;
}
.scrolled-nav #nav-links a.nav-cta { color: var(--accent-warm); }
.scrolled-nav #nav-links a.nav-cta:hover { color: var(--color-primary); }

@media (min-width: 1024px) { #nav-links { display: flex; } }
.nav-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-icon-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; outline: none;
    color: #FFFFFF; cursor: pointer;
    transition-property: opacity, transform;
    transition-duration: 200ms;
}
.nav-icon-btn:hover { opacity: 0.7; }
.nav-icon-btn:active { transform: scale(0.94); }

#mobile-menu { transition: transform 0.35s ease-out; transform: translateX(100%); }
#mobile-menu.open { transform: translateX(0); }

/* Light theme nav */
[data-theme="light"] #navbar { background-color: rgba(0, 0, 0, 0.55); }
[data-theme="light"] #navbar.scrolled-nav { background-color: rgba(255,255,255,0.97); }
[data-theme="light"] .scrolled-nav #nav-links a { color: #1A1A1A; }
[data-theme="light"] .scrolled-nav #nav-logo { filter: invert(1); }
[data-theme="light"] .scrolled-nav .nav-icon-btn { color: #1A1A1A; }

/* Authority strip */
.authority-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
@media (min-width: 768px) { .authority-strip { grid-template-columns: repeat(5, 1fr); } }
.authority-cell {
    padding: 3rem 1.5rem;
    text-align: center;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.authority-cell:last-child { border-right: none; }
@media (max-width: 767px) {
    .authority-cell:nth-child(2n) { border-right: none; }
    .authority-cell:nth-last-child(-n+1) { border-bottom: none; }
}
@media (min-width: 768px) { .authority-cell { border-bottom: none; } }

/* Reviews carousel */
.reviews-scroll-container { overflow: hidden; position: relative; width: 100%; padding: 2rem 0; }
.reviews-scroll-container::before,
.reviews-scroll-container::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 120px; z-index: 10; pointer-events: none;
}
.reviews-scroll-container::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
.reviews-scroll-container::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
.reviews-wrapper {
    display: flex; gap: 2rem;
    animation: scroll-reviews 50s linear infinite;
    width: fit-content;
}
.reviews-wrapper:hover { animation-play-state: paused; }
@keyframes scroll-reviews {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.review-card-scroll {
    flex: 0 0 380px;
    background: linear-gradient(135deg, #0a0a0a 0%, #050505 100%);
    border: 1px solid #1a1a1a;
    padding: 2.5rem;
    min-height: 280px;
    display: flex; flex-direction: column;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.review-card-scroll:hover { border-color: #333; transform: translateY(-4px); }
@media (max-width: 640px) {
    .review-card-scroll { flex: 0 0 300px; padding: 2rem; }
    .reviews-scroll-container::before, .reviews-scroll-container::after { width: 40px; }
}

/* Service card (legacy — still used on aboutme.html and new-construction.html) */
.service-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    padding: 3rem 2.5rem;
    transition: all 0.4s ease;
    height: 100%;
}
.service-card:hover {
    border-color: var(--color-button-border);
    transform: translateY(-4px);
}

/* ===== Editorial Services triptych (homepage) ===== */
.editorial-svc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 768px) {
    .editorial-svc-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.editorial-svc {
    display: flex;
    flex-direction: column;
    background-color: var(--color-primary);
    border: 1px solid var(--color-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition-property: border-color, transform;
    transition-duration: 450ms;
    transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.editorial-svc:hover {
    border-color: var(--color-button-border);
    transform: translateY(-5px);
}

.editorial-svc-img {
    aspect-ratio: 5 / 4;
    overflow: hidden;
    position: relative;
}
.editorial-svc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.editorial-svc:hover .editorial-svc-img img {
    transform: scale(1.04);
}

.editorial-svc-body {
    padding: 2.25rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.editorial-svc-body .svc-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    color: var(--accent-warm);
    line-height: 1;
    margin-bottom: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.editorial-svc-body .svc-title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 1.7rem;
    line-height: 1.1;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.015em;
}
.editorial-svc-body .svc-rule {
    width: 36px;
    height: 1px;
    background-color: var(--accent-warm);
    margin: 1.5rem 0;
}
.editorial-svc-body p {
    color: var(--color-text);
    font-size: 0.975rem;
    line-height: 1.7;
    margin: 0 0 1.75rem;
    font-weight: 300;
    flex: 1;
}
.editorial-svc-body .svc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 2rem;
}
.editorial-svc-body .svc-tag {
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    white-space: nowrap;
}
.editorial-svc-body .svc-cta {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    transition: color 280ms;
}
.editorial-svc:hover .editorial-svc-body .svc-cta {
    color: var(--accent-warm);
}
.editorial-svc-body .svc-cta .arr {
    display: inline-block;
    transition: transform 280ms;
}
.editorial-svc:hover .editorial-svc-body .svc-cta .arr {
    transform: translateX(4px);
}

/* Checklist row (used on Relocation / New Construction) */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--color-border);
}
.check-row:last-child { border-bottom: none; }
.check-mark {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    border: 1px solid var(--color-button-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent);
    font-size: 0.7rem;
}

/* Typography */
.hero-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 6.5vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
}
.section-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-weight: 500;
}
.body-copy { color: var(--color-text); font-weight: 300; line-height: 1.75; }
.micro { color: var(--color-text-soft); font-weight: 400; }

/* Section padding */
section.section-pad { padding: 7rem 0; }
@media (min-width: 768px) { section.section-pad { padding: 10rem 0; } }

/* ===== Affiliation plaques — museum/gallery treatment for the Brokerage section ===== */
.affil-plaque-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.affil-plaque {
    background-color: var(--paper);
    color: var(--paper-ink);
    padding: 2.5rem 2rem 2.25rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}
/* Subtle paper grain inside each plaque — same texture language as the Beyond section */
.affil-plaque::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='ap1'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23ap1)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><filter id='ap2'><feTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23ap2)' opacity='0.4'/></svg>");
    background-size: 240px 240px, 500px 500px;
    opacity: 0.10;
    mix-blend-mode: multiply;
}
/* Brass hairline accent — centered, top edge */
.affil-plaque::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: var(--accent-deep);
    z-index: 2;
}

.affil-plaque > * { position: relative; z-index: 2; }

.affil-plaque .plaque-label {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin: 1.25rem 0 1.5rem;
}
.affil-plaque .plaque-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    margin: 0.5rem 0 1.5rem;
}
.affil-plaque .plaque-logo img {
    height: 72px;
    width: auto;
    display: block;
}
/* Mile High Lifestyles is a JPG (white bg baked in). Multiply blend
   strips the white over the cream paper so the artwork reads "transparent". */
.affil-plaque .plaque-logo.mhl-mark img {
    height: 72px;
    mix-blend-mode: multiply;
}
/* Zillow Premier Agent — bumped to fill the plaque more confidently */
.affil-plaque .plaque-logo.zpa-mark img {
    height: 96px;
}
.affil-plaque .plaque-note {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--paper-ink);
    opacity: 0.72;
    margin: 0 auto;
    max-width: 32ch;
    text-wrap: balance;
}

/* ===== Affiliation logos (legacy — still used on aboutme.html) ===== */
.affil-card {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.affil-card.row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2.5rem; }
.affil-divider {
    width: 100%; height: 1px;
    background-color: #E5E5E5;
}
.affil-card.row .affil-divider {
    width: 1px; height: 64px;
}
.affil-logo {
    display: block;
    max-width: 100%;
    height: auto;
    outline: none;
}
.affil-logo.mhl { width: 220px; }
.affil-logo.zpa { width: 200px; }
@media (max-width: 640px) {
    .affil-logo.mhl { width: 180px; }
    .affil-logo.zpa { width: 170px; }
}

/* Small MHL logo for footers + floating badge */
.brand-pill {
    background-color: #FFFFFF;
    padding: 0.85rem 1.1rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.30);
}
.brand-pill img { display: block; height: 48px; width: auto; outline: none; }
@media (min-width: 768px) { .brand-pill img { height: 56px; } }

/* Footer-scale MHL (legacy, no longer in markup) */
.footer-mhl {
    background-color: #FFFFFF;
    padding: 0.65rem 1rem;
    border-radius: 3px;
    display: inline-flex;
}
.footer-mhl img { display: block; height: 26px; width: auto; outline: none; }

/* Footer credentials row — MHL + Zillow Premier Agent side-by-side */
.footer-creds-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.85rem;
}
.footer-cred-pill {
    background-color: #FFFFFF;
    padding: 0.85rem 1.15rem;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 76px;
    flex: 0 0 auto;
}
.footer-cred-pill img {
    display: block;
    height: 44px;
    width: auto;
    outline: none;
    max-width: 100%;
    object-fit: contain;
}

/* Inline (contact sidebar) — small logos inline with text */
.inline-logo {
    background-color: #FFFFFF;
    padding: 0.4rem 0.7rem;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    margin-top: 0.4rem;
}
.inline-logo img { display: block; height: 22px; width: auto; outline: none; }

/* Form */
.form-input, .form-textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s ease;
}
.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--color-button-border);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: 0.5rem;
    color: var(--color-text-soft);
}

/* =====================================================================
   Editorial layer — added for the homepage redesign
   ===================================================================== */

/* Vertical chapter label (left edge of section) */
.chapter-label {
    position: absolute;
    top: 11rem;
    left: clamp(1rem, 3vw, 2rem);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--accent-warm);
    font-weight: 500;
    z-index: 3;
}
[data-theme="light"] .chapter-label { color: var(--accent-deep); }
/* Hide the vertical chapter label on mobile — it overlaps the content
   when the viewport is narrow. The eyebrow-mark inside .sticky-text
   still names the chapter. */
@media (max-width: 767px) {
    .chapter-label { display: none; }
}

/* ===== Selected Work — vertical sticky chapter ===== */
.sticky-chap {
    position: relative;
    padding: 7rem clamp(1.5rem, 4vw, 4rem);
    z-index: 2;
}
@media (min-width: 768px) { .sticky-chap { padding: 10rem clamp(1.5rem, 4vw, 4rem); } }

.sticky-chap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    max-width: 1320px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .sticky-chap-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
        align-items: start;
    }
    .sticky-chap-grid .sticky-text {
        position: sticky;
        top: 16vh;
        align-self: start;
    }
}

.sticky-chap .eyebrow-mark {
    font-size: 10.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-warm);
    font-weight: 500;
    display: inline-block;
}
.sticky-chap .sticky-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(2.25rem, 5.5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 1.5rem 0 0;
    max-width: 14ch;
    color: var(--color-text);
}
.sticky-chap .sticky-body {
    margin-top: 2.5rem;
    max-width: 44ch;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-text-soft);
}
.sticky-chap .sticky-body p + p { margin-top: 1.25rem; }
.sticky-chap .sticky-cta { margin-top: 2.5rem; }

.scroll-images {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.scroll-images .work-block { display: block; }
.scroll-images figure { margin: 0; }
.scroll-images img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
.scroll-images figcaption {
    margin-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    color: var(--color-text-soft);
}
.scroll-images figcaption .num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--accent-warm);
    line-height: 1;
}
.scroll-images figcaption .title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--color-text);
    flex: 1;
    margin: 0;
}
.scroll-images figcaption .tag {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    text-align: right;
    white-space: nowrap;
}

/* =====================================================================
   Editorial Reviews — hero pull-quote + masonry of supporting reviews
   ===================================================================== */
.reviews-editorial {
    position: relative;
}

/* Hero pull-quote — single dramatic featured review */
.review-hero {
    max-width: 1000px;
    margin: 0 auto 7rem;
    text-align: center;
    position: relative;
    padding: 0 1rem;
}
.review-hero .quote-glyph {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(7rem, 14vw, 12rem);
    line-height: 0.5;
    color: var(--accent-warm);
    opacity: 0.35;
    display: block;
    margin-bottom: -1.5rem;
}
.review-hero-text {
    font-family: 'Playfair Display', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--color-text);
    margin: 0 0 2.75rem;
    text-wrap: balance;
}
.review-hero figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.review-hero .cite-rule {
    width: 36px;
    height: 1px;
    background-color: var(--accent-warm);
    display: block;
}
.review-hero .cite-name {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-text);
}
.review-hero .cite-meta {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

/* Masonry — native CSS columns. No JS, gracefully reflows. */
.reviews-masonry {
    column-count: 1;
    column-gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 720px) {
    .reviews-masonry { column-count: 2; column-gap: 4rem; }
}

.review-block {
    /* Prevent a block from being split across columns */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--accent-warm);
}
.review-block .r-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--accent-warm);
    margin: 0 0 1.25rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.review-block .r-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.975rem;
    line-height: 1.75;
    color: var(--color-text);
    font-weight: 300;
    margin: 0 0 1.75rem;
}
.review-block .r-cite {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin: 0;
}

/* ===== Credentials list (lives inside .sticky-text) ===== */
.credentials-list {
    margin-top: 3rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--color-border);
}
.credentials-list .cred-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-warm);
    font-weight: 500;
    margin-bottom: 1.5rem;
    display: block;
}
.credentials-list .cred-row {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--color-border);
}
.credentials-list .cred-row:last-child { border-bottom: none; }
.credentials-list .cred-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--accent-warm);
    font-weight: 400;
    flex: 0 0 86px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.credentials-list .cred-num.faint {
    color: var(--color-text-soft);
    font-style: normal;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}
.credentials-list .cred-label {
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text);
    font-weight: 400;
    line-height: 1.5;
}

/* ===== Beyond Real Estate — cream paper art-stack ===== */
.beyond-section {
    background-color: var(--paper);
    color: var(--paper-ink);
    padding: 9rem 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
@media (min-width: 768px) { .beyond-section { padding: 12rem 0; } }
/* Paper-texture overlay — stronger on cream paper so it reads as actual paper */
.beyond-section::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
    /* Two-layer paper grain: fine fiber + coarse spots, like aged editorial paper */
    background-image:
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='p1'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23p1)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'><filter id='p2'><feTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23p2)' opacity='0.45'/></svg>");
    background-size: 240px 240px, 500px 500px;
    opacity: 0.14;
    mix-blend-mode: multiply;
}
/* Soft warm edge vignette — like aged paper darkens at the corners */
.beyond-section::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 90% 70% at 50% 50%, transparent 45%, rgba(20, 17, 13, 0.10) 100%);
}
.beyond-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    position: relative;
    z-index: 2;
}
@media (min-width: 900px) {
    .beyond-grid { grid-template-columns: 1fr 1fr; gap: 8rem; }
}
.beyond-section .eyebrow-paper {
    font-size: 10.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-deep);
    font-weight: 500;
    display: inline-block;
}
.beyond-section h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.98;
    color: var(--paper-ink) !important;
    margin: 1.5rem 0 2rem;
    letter-spacing: -0.02em;
}
.beyond-section .beyond-body {
    color: rgba(20, 17, 13, 0.72);
    max-width: 46ch;
    font-size: 1.05rem;
    line-height: 1.7;
}
.art-stack {
    position: relative;
    aspect-ratio: 1 / 1;
}
.art-stack img {
    position: absolute;
    width: 78%;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}
.art-stack img:nth-child(1) { top: 0; left: 0; }
.art-stack img:nth-child(2) { bottom: 0; right: 0; transform: translateY(8%); }
.beyond-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 2.5rem;
    padding: 1rem 1.85rem;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--paper-ink);
    border: 1px solid var(--paper-ink);
    border-radius: 999px;
    background: transparent;
    transition: background-color 250ms, color 250ms;
    text-decoration: none;
    cursor: pointer;
}
.beyond-btn:hover { background-color: var(--paper-ink); color: var(--paper); }
.beyond-btn .arr {
    display: inline-block;
    width: 20px; height: 1px;
    background: currentColor;
    position: relative;
    transition: width 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.beyond-btn .arr::after {
    content: ''; position: absolute; right: 0; top: 50%;
    width: 5px; height: 5px;
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.beyond-btn:hover .arr { width: 28px; }

/* Ensure body content sits above the grain overlay where needed */
nav, footer, main, section, .modal-overlay, .lightbox, .inq-modal {
    position: relative;
    z-index: 2;
}
nav#navbar { z-index: 50; }

/* =====================================================================
   Slide-deck mode (homepage only — scoped to html.slide-mode)
   Each top-level <section> snaps to viewport top on scroll. Tall sections
   like .sticky-chap and .reviews-editorial keep their natural height and
   scroll through naturally before the next snap engages. Short sections
   are forced to 100vh and center their content.
   ===================================================================== */
html.slide-mode {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
html.slide-mode body > section,
html.slide-mode body > footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    position: relative;
}
/* Tall sections (sticky chapters, editorial reviews) — let users scroll
   through naturally. Keep snap-align so the top still snaps in when
   entered, but allow flicks to pass through without forced stops. */
html.slide-mode body > section.sticky-chap,
html.slide-mode body > section.reviews-editorial {
    scroll-snap-stop: normal;
}
/* Short sections center their content vertically when filling 100vh */
html.slide-mode body > section.section-pad:not(.reviews-editorial),
html.slide-mode body > section.beyond-section,
html.slide-mode body > footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =====================================================================
   Atmospheric per-section glow — soft radial light that gives dark
   slides subtle depth and eases the contrast against bright imagery.
   Very low opacity, off-center placement, no animation. Reference:
   Aman / Cartier hero treatment. Layered as background-image so it
   composites cleanly over an inline background-color when present.
   ===================================================================== */
.lit-glow {
    background-image:
        radial-gradient(ellipse 60% 55% at 80% 18%, rgba(184, 149, 106, 0.11), transparent 65%),
        radial-gradient(ellipse 70% 60% at 18% 88%, rgba(255, 255, 255, 0.04), transparent 65%);
}
.lit-glow--tl {
    background-image:
        radial-gradient(ellipse 60% 55% at 20% 18%, rgba(184, 149, 106, 0.11), transparent 65%),
        radial-gradient(ellipse 70% 60% at 82% 88%, rgba(255, 255, 255, 0.04), transparent 65%);
}
.lit-glow--c {
    background-image:
        radial-gradient(ellipse 55% 45% at 50% 35%, rgba(184, 149, 106, 0.09), transparent 65%),
        radial-gradient(ellipse 90% 55% at 50% 100%, rgba(255, 255, 255, 0.032), transparent 70%);
}
/* Additional variant — bottom-right brass glow with subtle top-left wash */
.lit-glow--br {
    background-image:
        radial-gradient(ellipse 60% 55% at 82% 82%, rgba(184, 149, 106, 0.10), transparent 65%),
        radial-gradient(ellipse 70% 60% at 18% 18%, rgba(255, 255, 255, 0.035), transparent 65%);
}

/* Beyond Real Estate slide — frame the cream paper with dark bars
   above and below, matching the surrounding slides. Pure background
   gradient so no HTML changes are needed; the paper-texture pseudos
   are inset to stay within the cream band. */
html.slide-mode body > section.beyond-section {
    background: linear-gradient(
        to bottom,
        var(--color-card) 0,
        var(--color-card) 6vh,
        var(--paper) 6vh,
        var(--paper) calc(100% - 6vh),
        var(--color-card) calc(100% - 6vh),
        var(--color-card) 100%
    );
}
html.slide-mode body > section.beyond-section::before,
html.slide-mode body > section.beyond-section::after {
    inset: 6vh 0;
}

/* Final CTA + footer share the last slide. CTA is the snap point;
   footer follows naturally below within the same viewport. The two
   min-heights add up to ~100vh so the browser can fully snap the CTA
   to the top — otherwise the previous slide leaks in at the top. */
html.slide-mode body > section.final-cta-slide {
    min-height: 60vh;
    padding: 4rem 0 2rem;
    /* Allow flicks to pass through — otherwise the snap traps users
       at the CTA and they can't reach the bottom of the footer on
       short or mobile viewports where the footer extends past 100vh. */
    scroll-snap-stop: normal;
}
html.slide-mode body > footer {
    min-height: 40vh;
    /* Bottom-of-footer becomes a valid snap point so mandatory snap
       can land users at the end of the page instead of pulling them
       back up to the CTA. */
    scroll-snap-align: end;
    scroll-snap-stop: normal;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
html.slide-mode body > footer .max-w-7xl {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
html.slide-mode body > footer .grid {
    margin-bottom: 1.5rem;
}

/* Scroll cue — small brass label + pulsing vertical line at the bottom
   of the Why Coleman slide, signalling "keep scrolling". */
.scroll-cue {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;
    z-index: 3;
}
.scroll-cue-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-warm);
    font-weight: 500;
    opacity: 0.85;
}
.scroll-cue-line {
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, var(--accent-warm) 0%, var(--accent-warm) 40%, transparent 100%);
    transform-origin: top center;
    animation: scroll-cue-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-cue-pulse {
    0%   { transform: scaleY(0.25); opacity: 0.35; }
    50%  { transform: scaleY(1);    opacity: 1; }
    100% { transform: scaleY(0.25); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue-line { animation: none; opacity: 0.7; }
}

/* Respect prefers-reduced-motion — no snapping for users who opted out */
@media (prefers-reduced-motion: reduce) {
    html.slide-mode { scroll-snap-type: none; scroll-behavior: auto; }
}