@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Montserrat:wght@400;500;600&display=swap');

:root {
    --ink: #111f1f;
    --ink-soft: #1b2c2b;
    --cream: #f6f1e7;
    --cream-light: #fbf8f1;
    --gold: #bf9855;
    --gold-soft: #d8bd86;
    --muted: #69736f;
    --line: rgba(17, 31, 31, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Montserrat", Arial, sans-serif;
}

a {
    color: inherit;
}

.site-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 100vh;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    padding: 28px 28px;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
}

.brand-mark {
    color: var(--ink);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 35px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-decoration: none;
    white-space: nowrap;
}

.brand-mark span {
    margin: 0 7px;
    color: var(--gold);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.main-nav a {
    position: relative;
    color: #243532;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    text-decoration: none;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width .25s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

.page-content {
    padding: 30px 28px 76px;
}


/* ========================================
   HERO
======================================== */

.luxury-hero {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    min-height: 475px;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(140deg, rgba(11, 27, 27, .98), rgba(23, 43, 41, .96));
    box-shadow: 0 26px 70px rgba(14, 27, 26, .16);
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 58px 62px;
}

.hero-kicker {
    margin: 0 0 20px;
    color: var(--gold-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.35px;
    line-height: 1.2;
    text-transform: uppercase;
}

.luxury-hero h1 {
    margin: 0;
    color: white;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(54px, 5.15vw, 71px);
    font-weight: 500;
    line-height: .97;
    letter-spacing: -1.15px;
}


.luxury-hero h1 span {
    white-space: nowrap;
}

.hero-services {
    margin: 30px 0 15px;
    color: #e4c98e;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.12;
}

.hero-support {
    max-width: 455px;
    margin: 0;
    color: rgba(255,255,255,.80);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
}

.hero-team {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    overflow: hidden;
    border-left: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
}

.team-hero-heading {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 88px;
    z-index: 5;
    color: #efd7a4;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 31px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0,0,0,.55);
    pointer-events: none;
}

.dual-hero-agents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    min-height: 475px;
}

.hero-person {
    position: relative;
    min-width: 0;
    height: 475px;
    overflow: hidden;
    background: #0f1c1b;
}

.hero-person:first-child {
    border-right: 1px solid rgba(255,255,255,.10);
}

.hero-agent-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-photo-david {
    object-position: center top;
    transform: none;
}

.hero-photo-yelena {
    object-position: center top;
    transform: none;
}

.team-agent-photo {
    object-position: center top !important;
    transform: none !important;
    filter: brightness(.86) saturate(.94);
}

.hero-person::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(7,17,17,.16) 0%,
            rgba(7,17,17,.02) 42%,
            rgba(7,17,17,.36) 68%,
            rgba(7,17,17,.96) 100%
        );
    pointer-events: none;
}

.hero-person-text {
    position: absolute;
    z-index: 6;
    left: 14px;
    right: 14px;
    bottom: 24px;
    text-align: center;
}

.hero-person-text h2 {
    margin: 0 0 5px;
    color: #f4e2b9;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
}

.hero-agent-details h2 {
    margin: 0 0 8px;
    color: #f4e2b9;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
}

.hero-person-text a {
    color: white;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.hero-agent-details a {
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.hero-brokerage {
    position: absolute;
    z-index: 7;
    left: 0;
    right: 0;
    bottom: 6px;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    letter-spacing: .35px;
    text-align: center;
}

.single-hero-agent {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 475px;
}

.single-hero-agent .hero-agent-photo {
    position: absolute;
    inset: 0;
    object-fit: contain;
    object-position: center bottom;
    background: #0f1c1b;
}

.single-hero-agent::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5,15,15,.08), rgba(5,15,15,.80));
}

.hero-agent-details {
    position: absolute;
    z-index: 3;
    left: 36px;
    right: 36px;
    bottom: 31px;
    text-align: center;
}

.hero-agent-label {
    margin: 0 auto 13px;
    color: #e4c98e;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.1;
}


/* ========================================
   SHARED HEADINGS
======================================== */

.center-heading {
    text-align: center;
}

.center-heading h2,
.marketing-header h2,
.results-heading h2,
.reviews-heading h2 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
}

.center-heading h2 {
    font-size: 45px;
}

.center-heading > span {
    display: block;
    width: 36px;
    height: 1px;
    margin: 10px auto 0;
    background: var(--gold);
}

.gold-kicker {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ========================================
   OPTIONS
======================================== */

.options-section {
    padding: 62px 6px 0;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.option-card {
    min-height: 185px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 27px;
    border: 1px solid rgba(191,152,85,.24);
    border-radius: 10px;
    background: var(--ink);
    color: white;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.option-card:hover {
    transform: translateY(-4px);
    border-color: rgba(191,152,85,.72);
    box-shadow: 0 16px 36px rgba(17,31,31,.12);
}

.option-card-wide {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 0;
}

.option-wide-inner {
    width: 100%;
    min-height: 104px;
    display: grid;
    grid-template-columns: 58px 1fr 42px;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
}

.option-wide-icon {
    margin: 0;
}

.option-wide-copy h3 {
    margin: 0;
}

.option-wide-copy p {
    margin-top: 4px;
}

.option-wide-arrow {
    color: #d1ae6b;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 34px;
    line-height: 1;
    text-align: right;
    transition: transform .2s ease;
}

.option-card-wide:hover .option-wide-arrow {
    transform: translateX(4px);
}

.option-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 22px;
}

.option-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #d1ae6b;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.option-card h3 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
}

.option-card p {
    max-width: 480px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.6;
}


/* ========================================
   RESULTS
======================================== */

.results-section {
    margin-top: 72px;
    padding: 64px 50px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.results-heading {
    max-width: 780px;
    margin: 0 auto 45px;
    text-align: center;
}

.results-heading > p {
    margin: 0 0 9px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.results-heading h2 {
    font-size: 43px;
}

.results-heading > span {
    display: block;
    margin-top: 10px;
    color: #5d6965;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 20px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
    margin: 0 auto;
}

.result {
    position: relative;
    text-align: center;
    padding: 10px 25px;
}

.result:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    width: 1px;
    height: 80%;
    background: rgba(191,152,85,.28);
}

.result strong {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 63px;
    font-weight: 500;
    line-height: .9;
}

.result span {
    display: block;
    margin-top: 10px;
    color: #55615d;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}


/* ========================================
   MARKETING
======================================== */

.marketing-section {
    padding: 86px 6px 0;
}

.marketing-header {
    max-width: 760px;
    margin-bottom: 36px;
}

.marketing-header h2 {
    font-size: 48px;
}

.marketing-header h3 {
    margin: 11px 0 0;
    color: #34443f;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 25px;
    font-weight: 600;
}

.marketing-header > p:last-child {
    max-width: 720px;
    margin: 14px 0 0;
    color: #65716d;
    font-size: 14px;
    line-height: 1.75;
}

.marketing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(191,152,85,.28);
    border-left: 1px solid rgba(191,152,85,.28);
}

.marketing-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 36px 32px;
    border-right: 1px solid rgba(191,152,85,.28);
    border-bottom: 1px solid rgba(191,152,85,.28);
    background: rgba(255,255,255,.24);
}

.marketing-feature {
    background: rgba(217,190,135,.12);
}


.marketing-card h3 {
    min-height: 64px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 29px;
    font-weight: 600;
    line-height: 1.08;
}

.marketing-card p {
    margin: 14px 0 0;
    color: #5f6c67;
    font-size: 13.5px;
    line-height: 1.72;
}


/* ========================================
   REVIEWS
======================================== */

.reviews-section {
    margin-top: 86px;
    padding: 72px 50px 42px;
    border-radius: 15px;
    background:
        radial-gradient(circle at 70% 25%, rgba(191,152,85,.09), transparent 28%),
        linear-gradient(145deg, #101f1f, #182b2a);
    color: white;
}

.reviews-heading {
    text-align: center;
}

.reviews-heading p {
    margin: 0 0 5px;
    color: #d4b06a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.reviews-heading h2 {
    color: white;
    font-size: 51px;
    line-height: 1;
}

.reviews-carousel {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    max-width: 980px;
    margin: 19px auto 0;
}

.review-stage {
    position: relative;
    min-height: 300px;
}

.review-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 35px;
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    text-align: center;
    transition: opacity .65s ease, transform .65s ease;
}

.review-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.review-stars {
    margin-bottom: 22px;
    color: #d9ac51;
    font-size: 15px;
    letter-spacing: 8px;
}

.review-slide blockquote {
    max-width: 790px;
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 34px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.27;
}

.review-author {
    margin-top: 25px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 23px;
    font-weight: 600;
}

.review-context {
    margin-top: 2px;
    color: #d5ba84;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.review-arrow {
    width: 43px;
    height: 43px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(215,181,113,.42);
    border-radius: 50%;
    background: transparent;
    color: #d8b66d;
    font-size: 18px;
    cursor: pointer;
}

.review-arrow:hover {
    background: rgba(255,255,255,.04);
}

.review-counter {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 7px;
    margin-top: 6px;
    color: rgba(255,255,255,.45);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.review-counter #reviewCurrent {
    color: #e4c47c;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 20px;
    letter-spacing: 0;
}

.review-counter-divider {
    color: rgba(255,255,255,.22);
}


/* ========================================
   AGENTS
======================================== */

.agents-section {
    padding: 88px 6px 0;
}

.agent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 38px;
}

.agent-card {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 345px;
    overflow: hidden;
    border: 1px solid rgba(191,152,85,.26);
    border-radius: 11px;
    background: rgba(255,255,255,.38);
}

.agent-image-wrap {
    min-width: 0;
    overflow: hidden;
    background: #ddd3c3;
}

.agent-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.david-agent-image {
    object-position: center top;
    transform: none;
}

.yelena-agent-image {
    object-position: center top;
    transform: none;
}

.agent-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 29px 27px;
}

.agent-content h3 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 31px;
    font-weight: 600;
}

.agent-specialties {
    margin: 12px 0 14px;
    color: #63706b;
    font-size: 11px;
    line-height: 1.7;
}

.agent-card-phone {
    margin-bottom: 21px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    text-decoration: none;
}

.agent-contact {
    width: 100%;
    padding: 12px 15px;
    border-radius: 5px;
    background: var(--ink);
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.agent-learn-more {
    width: 100%;
    margin-top: 9px;
    border: 1px solid rgba(17,31,31,.28);
    border-radius: 5px;
    background: transparent;
}

.agent-learn-more summary {
    padding: 10px 13px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.agent-learn-more p {
    margin: 0;
    padding: 0 14px 14px;
    color: #68736f;
    font-size: 11px;
    line-height: 1.65;
}


/* ========================================
   AREAS
======================================== */

.areas-section {
    padding: 92px 6px 18px;
}

.area-heading {
    margin-bottom: 35px;
}

.area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.area-card {
    position: relative;
    min-height: 285px;
    overflow: hidden;
    border-radius: 8px;
    background: #1c302e;
    color: white;
    text-decoration: none;
}

.area-slideshow,
.area-slide {
    position: absolute;
    inset: 0;
}

.area-slide {
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 1.1s ease, transform 6s ease;
}

.area-slide.active {
    opacity: 1;
    transform: scale(1.06);
}

.area-copy {
    position: absolute;
    z-index: 2;
    left: 24px;
    right: 24px;
    bottom: 21px;
}

.area-copy h3 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 31px;
    font-weight: 600;
}

.area-copy p {
    max-width: 320px;
    margin: 5px 0 0;
    color: rgba(255,255,255,.83);
    font-size: 10px;
    line-height: 1.5;
}

.area-explore {
    display: inline-block;
    margin-top: 10px;
    color: #efd59d;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .5px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
}

.area-card:hover .area-explore {
    opacity: 1;
    transform: translateY(0);
}

.port-charlotte-clean {
    background-position: center 45%;
}

.photo-credit-link {
    margin-top: 12px;
    text-align: right;
}

.photo-credit-link a {
    color: #6b756f;
    font-size: 9px;
}


/* ========================================
   EXISTING FORM PAGES
======================================== */

.page-content > h1,
.page-content > p,
.page-content > form,
.page-content > .choice,
.page-content > hr {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.page-content > h1 {
    margin-top: 38px;
    margin-bottom: 12px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 49px;
    font-weight: 600;
}

.page-content > h1 + p {
    margin-top: 0;
    margin-bottom: 34px;
    color: #66716d;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 19px;
    line-height: 1.5;
}

form {
    padding: 34px;
    border: 1px solid rgba(17,31,31,.10);
    border-radius: 12px;
    background: rgba(255,255,255,.62);
}

form p {
    margin: 0 0 23px;
    color: #293a35;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 8px;
    padding: 15px 16px;
    border: 1px solid #d7d9d5;
    border-radius: 7px;
    background: white;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(191,152,85,.12);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

button {
    font-family: inherit;
}

form button {
    width: 100%;
    margin-top: 5px;
    padding: 16px 22px;
    border: none;
    border-radius: 7px;
    background: var(--ink);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#land_questions,
#current_home_box,
#other_property_type_box,
#buying_area_box {
    padding: 21px 21px 1px;
    margin: -4px 0 24px;
    border-left: 2px solid var(--gold);
    border-radius: 7px;
    background: #efe9dd;
}

.choice {
    display: block;
    margin-top: 12px;
    padding: 19px 21px;
    border: 1px solid rgba(17,31,31,.11);
    border-radius: 8px;
    background: rgba(255,255,255,.58);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 19px;
    text-decoration: none;
}


/* ========================================
   FOOTER
======================================== */

.site-footer {
    margin: 0 28px;
    padding: 29px 10px 38px;
    border-top: 1px solid var(--line);
    color: #78817d;
    text-align: center;
}

.footer-agents {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 10px;
}

.footer-agents strong {
    color: #56615d;
}

.footer-divider {
    margin: 0 5px;
    color: var(--gold);
}

.site-footer p {
    margin: 5px 0;
    font-size: 9px;
    line-height: 1.5;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 980px) {
    .luxury-hero {
        grid-template-columns: 1fr .88fr;
    }

    .hero-copy {
        padding: 50px 39px;
    }

    .marketing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .agent-card {
        grid-template-columns: 1fr;
    }

    .agent-image-wrap {
        height: 320px;
    }
}

@media (max-width: 760px) {
    .site-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
        padding: 21px 18px;
    }

    .brand-mark {
        font-size: 24px;
    }

    .main-nav {
        width: 100%;
        gap: 22px;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .main-nav a {
        flex-shrink: 0;
        font-size: 15px;
    }

    .page-content {
        padding: 17px 14px 52px;
    }

    .luxury-hero {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        padding: 42px 25px 36px;
    }

    .luxury-hero h1 {
        font-size: clamp(47px, 13vw, 62px);
    }

    .luxury-hero h1 span {
        white-space: normal;
    }

    .hero-services {
        font-size: 24px;
    }

    .hero-team {
        min-height: 410px;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .dual-hero-agents {
        min-height: 410px;
    }

    .hero-person {
        height: 410px;
    }

    .team-hero-heading {
        bottom: 88px;
        font-size: 24px;
    }

    .hero-person-text h2 {
        font-size: 19px;
    }

    .option-grid,
    .marketing-grid,
    .agent-grid,
    .area-grid {
        grid-template-columns: 1fr;
    }

    .option-card-wide {
        grid-column: auto;
    }

    .center-heading h2,
    .marketing-header h2,
    .results-heading h2 {
        font-size: 37px;
    }

    .results-section {
        padding: 51px 15px;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .result {
        padding: 25px 10px;
    }

    .result:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 1px;
    }

    .reviews-section {
        padding: 58px 14px 35px;
    }

    .reviews-heading h2 {
        font-size: 41px;
    }

    .reviews-carousel {
        grid-template-columns: 38px minmax(0,1fr) 38px;
    }

    .review-stage {
        min-height: 360px;
    }

    .review-slide {
        padding: 10px;
    }

    .review-slide blockquote {
        font-size: 27px;
    }

    .area-card {
        min-height: 315px;
    }
}

@media (max-width: 480px) {
    .dual-hero-agents {
        grid-template-columns: 1fr 1fr;
        min-height: 365px;
    }

    .hero-person {
        height: 365px;
    }

    .hero-person:first-child {
        border-right: 1px solid rgba(255,255,255,.10);
        border-bottom: none;
    }

    .hero-team {
        min-height: 365px;
    }

    .team-hero-heading {
        position: absolute;
        bottom: 82px;
        padding: 0 10px;
        font-size: 21px;
    }

    .hero-brokerage {
        position: absolute;
        bottom: 5px;
        padding: 0;
        font-size: 8px;
    }

    .hero-person-text h2 {
        font-size: 18px;
    }

    .hero-person-text a {
        font-size: 10px;
    }
}



/* ========================================
   MORE AREAS SERVED
======================================== */

.more-areas-block {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 42px;
    align-items: center;
    margin-top: 26px;
    padding: 34px 36px;
    border: 1px solid rgba(191,152,85,.25);
    border-radius: 10px;
    background: rgba(255,255,255,.30);
}

.more-areas-copy h3 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
}

.more-areas-copy > p:last-child {
    max-width: 500px;
    margin: 9px 0 0;
    color: #66716d;
    font-size: 12px;
    line-height: 1.65;
}

.more-area-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.more-area-links a {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 17px;
    border: 1px solid rgba(17,31,31,.13);
    border-radius: 7px;
    background: var(--cream-light);
    color: var(--ink);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease;
}

.more-area-links a:hover {
    transform: translateY(-2px);
    border-color: rgba(191,152,85,.65);
}

.more-area-links strong {
    color: var(--gold);
    font-size: 22px;
    font-weight: 500;
}


/* ========================================
   LAND OPTIONS PAGE
======================================== */

.land-choice-page {
    padding: 54px 6px 26px;
}

.land-choice-heading {
    max-width: 820px;
    margin: 0 auto 42px;
    text-align: center;
}

.land-choice-heading h1 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(52px, 6vw, 76px);
    font-weight: 600;
    line-height: .98;
}

.land-choice-heading > p:last-child {
    max-width: 720px;
    margin: 18px auto 0;
    color: #62706b;
    font-size: 15px;
    line-height: 1.8;
}

.land-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto;
}

.land-choice-card {
    position: relative;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px;
    overflow: hidden;
    border: 1px solid rgba(191,152,85,.30);
    border-radius: 12px;
    background: linear-gradient(145deg, #10201f, #182b29);
    color: white;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.land-choice-card:hover {
    transform: translateY(-4px);
    border-color: rgba(210,174,105,.70);
    box-shadow: 0 20px 46px rgba(16,32,31,.15);
}

.land-choice-icon {
    width: 58px;
    height: 58px;
}

.land-choice-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #d3ae68;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.land-choice-card-copy {
    margin-top: 48px;
}

.land-choice-label {
    margin: 0 0 8px;
    color: #d6b56f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.land-choice-card h2 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
}

.land-choice-card-copy > p:last-child {
    max-width: 440px;
    margin: 13px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.75;
}

.land-choice-arrow {
    position: absolute;
    right: 30px;
    bottom: 28px;
    color: #d3ae68;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 34px;
    transition: transform .2s ease;
}

.land-choice-card:hover .land-choice-arrow {
    transform: translateX(4px);
}


/* ========================================
   AREA GUIDE PAGES
======================================== */

.area-guide-hero {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 16px;
    background: #152725;
    box-shadow: 0 24px 70px rgba(14,27,26,.14);
}

.area-guide-slideshow,
.area-guide-slide {
    position: absolute;
    inset: 0;
}

.area-guide-slide {
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 1.2s ease, transform 7s ease;
}

.area-guide-slide.active {
    opacity: 1;
    transform: scale(1.055);
}

.area-guide-overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 62px 62px;
    color: white;
}

.area-back-link {
    position: absolute;
    left: 62px;
    top: -392px;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-decoration: none;
}

.area-guide-kicker {
    margin: 0 0 10px;
    color: #e1c485;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.area-guide-overlay h1 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(70px, 7.5vw, 100px);
    font-weight: 500;
    line-height: .92;
}

.area-guide-tagline {
    max-width: 760px;
    margin: 16px 0 0;
    color: rgba(255,255,255,.88);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 29px;
    line-height: 1.25;
}

.area-guide-intro {
    padding: 88px 6px 0;
}

.area-guide-intro-copy {
    max-width: 900px;
}

.area-guide-intro-copy h2,
.area-guide-cta h2 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
}

.area-guide-intro-copy > p:last-child,
.area-guide-cta-copy > p:last-child {
    margin: 20px 0 0;
    color: #5f6c67;
    font-size: 16px;
    line-height: 1.9;
}

.area-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 46px;
    border-top: 1px solid rgba(191,152,85,.28);
    border-left: 1px solid rgba(191,152,85,.28);
}

.area-highlight {
    min-height: 230px;
    padding: 30px 27px;
    border-right: 1px solid rgba(191,152,85,.28);
    border-bottom: 1px solid rgba(191,152,85,.28);
    background: rgba(255,255,255,.28);
}

.area-highlight-accent {
    width: 28px;
    height: 1px;
    margin-bottom: 32px;
    background: var(--gold);
}

.area-highlight h3 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 29px;
    font-weight: 600;
    line-height: 1.02;
}

.area-highlight p {
    margin: 13px 0 0;
    color: #62706b;
    font-size: 13px;
    line-height: 1.75;
}

.area-guide-cta {
    margin-top: 86px;
    padding: 58px;
    border-radius: 14px;
    background: linear-gradient(140deg, #10201f, #1d302e);
    color: white;
}

.area-guide-cta .gold-kicker {
    color: #d8b976;
}

.area-guide-cta h2 {
    color: white;
}

.area-guide-cta-copy {
    max-width: 820px;
}

.area-guide-cta-copy > p:last-child {
    color: rgba(255,255,255,.70);
}

.area-guide-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    margin-top: 35px;
}

.area-action-card {
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 25px;
    border: 1px solid rgba(216,185,118,.42);
    border-radius: 8px;
    background: #f4eddf;
    color: #172825;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(5,15,15,.08);
    transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.area-action-card:hover {
    transform: translateY(-3px);
    border-color: rgba(191,152,85,.72);
    background: #fbf7ef;
    box-shadow: 0 13px 30px rgba(5,15,15,.13);
}

.area-action-label {
    display: block;
    margin-bottom: 7px;
    color: #a77f43;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.area-action-card h3 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05;
}

.area-action-card p {
    max-width: 430px;
    margin: 8px 0 0;
    color: #5d6965;
    font-size: 12px;
    line-height: 1.6;
}

.area-action-card > strong {
    flex: 0 0 auto;
    color: #ad8343;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 500;
    transition: transform .2s ease;
}

.area-action-card:hover > strong {
    transform: translateX(4px);
}

.area-guide-photo-credit {
    margin-top: 12px;
    text-align: right;
}

.area-guide-photo-credit a {
    color: #6b756f;
    font-size: 10px;
}

@media (max-width: 980px) {
    .more-areas-block {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .area-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .more-area-links,
    .land-choice-grid,
    .area-guide-actions {
        grid-template-columns: 1fr;
    }

    .more-areas-block {
        padding: 28px 22px;
    }

    .land-choice-page {
        padding-top: 36px;
    }

    .land-choice-heading h1 {
        font-size: clamp(48px, 14vw, 64px);
    }

    .land-choice-heading > p:last-child {
        font-size: 14px;
    }

    .land-choice-card {
        min-height: 300px;
        padding: 28px 24px;
    }

    .area-guide-hero {
        min-height: 500px;
    }

    .area-guide-overlay {
        padding: 42px 25px 44px;
    }

    .area-back-link {
        left: 25px;
        top: -354px;
        font-size: 11px;
    }

    .area-guide-overlay h1 {
        font-size: clamp(58px, 17vw, 78px);
    }

    .area-guide-tagline {
        font-size: 23px;
    }

    .area-guide-intro {
        padding-top: 62px;
    }

    .area-guide-intro-copy h2,
    .area-guide-cta h2 {
        font-size: 42px;
    }

    .area-guide-intro-copy > p:last-child,
    .area-guide-cta-copy > p:last-child {
        font-size: 14px;
    }

    .area-highlights {
        grid-template-columns: 1fr;
    }

    .area-highlight {
        min-height: 0;
    }

    .area-guide-cta {
        margin-top: 62px;
        padding: 36px 22px;
    }

    .area-action-card {
        min-height: 135px;
    }
}


/* V4 portrait + marketing polish */
@media (max-width: 760px) {
    .hero-kicker {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .hero-support {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.6;
    }

    .marketing-card {
        min-height: 0;
        padding: 30px 25px;
    }

    .marketing-card h3 {
        min-height: 0;
        font-size: 27px;
    }

    .marketing-card p {
        font-size: 13px;
    }
}


/* ========================================
   PRIVATE LEADS DASHBOARD — V1
======================================== */

body.leads-dashboard-body {
    min-height: 100vh;
    margin: 0;
    background: #f3eee5;
    color: #172825;
}

.leads-app {
    width: min(1500px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0 58px;
}

.leads-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 16px 0 23px;
    border-bottom: 1px solid rgba(17,31,31,.12);
}

.leads-brand {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: 1.4px;
}

.leads-brand span {
    color: #b88e4d;
}

.leads-private-label {
    padding: 7px 10px;
    border: 1px solid rgba(184,142,77,.35);
    border-radius: 999px;
    color: #8c6b38;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.leads-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    padding: 44px 0 27px;
}

.leads-heading-copy p {
    margin: 0 0 6px;
    color: #b18443;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.leads-heading-copy h1 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 53px;
    font-weight: 600;
    line-height: .95;
}

.leads-heading-copy span {
    display: block;
    max-width: 680px;
    margin-top: 12px;
    color: #66716d;
    font-size: 13px;
    line-height: 1.65;
}

.leads-home-link {
    flex: 0 0 auto;
    color: #253733;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.leads-home-link:hover {
    color: #a77f43;
}

.leads-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.leads-stat {
    min-height: 112px;
    padding: 20px 21px;
    border: 1px solid rgba(17,31,31,.10);
    border-radius: 9px;
    background: rgba(255,255,255,.52);
}

.leads-stat strong {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1;
}

.leads-stat span {
    display: block;
    margin-top: 8px;
    color: #68736f;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.leads-controls {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(145px, .65fr));
    gap: 10px;
    margin-bottom: 22px;
    padding: 14px;
    border: 1px solid rgba(17,31,31,.10);
    border-radius: 10px;
    background: rgba(255,255,255,.44);
}

.leads-control {
    position: relative;
}

.leads-control input,
.leads-control select {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(17,31,31,.13);
    border-radius: 7px;
    background: #fbf8f1;
    color: #1a2c28;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11px;
    outline: none;
}

.leads-control input:focus,
.leads-control select:focus {
    border-color: rgba(184,142,77,.72);
    box-shadow: 0 0 0 3px rgba(184,142,77,.10);
}

.leads-results-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 2px 12px;
    color: #6d7773;
    font-size: 10px;
}

.leads-list {
    display: grid;
    gap: 11px;
}

.lead-card {
    overflow: hidden;
    border: 1px solid rgba(17,31,31,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 5px 18px rgba(17,31,31,.025);
}

.lead-card-main {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) minmax(200px, .95fr) minmax(210px, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 21px 23px;
}

.lead-card:hover {
    border-color: rgba(184,142,77,.32);
}

.lead-person h2 {
    margin: 7px 0 4px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}

.lead-id {
    color: #9a9f9c;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}

.lead-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.lead-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e8e2d8;
    color: #44514d;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.lead-badge-type {
    background: #172825;
    color: white;
}

.lead-badge-agent {
    background: #e7dcc7;
    color: #775a2e;
}

.lead-badge-opportunity {
    background: #f0dfb8;
    color: #6e501f;
}

.lead-contact {
    display: grid;
    gap: 5px;
}

.lead-contact a {
    color: #283a35;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
}

.lead-contact a:hover {
    color: #9d7639;
}

.lead-quickfacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 15px;
}

.lead-fact span {
    display: block;
    margin-bottom: 3px;
    color: #939a96;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.lead-fact strong {
    display: block;
    overflow: hidden;
    color: #3b4945;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.lead-expand {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(17,31,31,.15);
    border-radius: 50%;
    background: transparent;
    color: #a1793d;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.lead-card.open .lead-expand {
    transform: rotate(45deg);
    background: #f2e8d8;
}

.lead-details {
    display: none;
    padding: 0 23px 24px;
    border-top: 1px solid rgba(17,31,31,.08);
}

.lead-card.open .lead-details {
    display: block;
}

.lead-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    padding-top: 20px;
}

.lead-detail {
    min-height: 74px;
    padding: 13px 14px;
    border-radius: 7px;
    background: #f3eee5;
}

.lead-detail span {
    display: block;
    margin-bottom: 6px;
    color: #8b938f;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.lead-detail strong,
.lead-detail p {
    margin: 0;
    color: #354541;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.55;
}

.lead-detail-notes {
    grid-column: 1 / -1;
}

.leads-empty {
    display: none;
    padding: 65px 25px;
    border: 1px solid rgba(17,31,31,.10);
    border-radius: 10px;
    background: rgba(255,255,255,.48);
    text-align: center;
}

.leads-empty h3 {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
}

.leads-empty p {
    margin: 7px 0 0;
    color: #6d7773;
    font-size: 11px;
}

@media (max-width: 1100px) {
    .leads-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .leads-controls {
        grid-template-columns: 1fr 1fr;
    }

    .lead-card-main {
        grid-template-columns: minmax(220px, 1.2fr) 1fr auto;
    }

    .lead-quickfacts {
        grid-column: 1 / 3;
        padding-top: 4px;
    }

    .lead-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .leads-app {
        width: min(100% - 22px, 1500px);
        padding-top: 10px;
    }

    .leads-topbar,
    .leads-heading {
        align-items: flex-start;
    }

    .leads-heading {
        flex-direction: column;
        padding-top: 32px;
    }

    .leads-heading-copy h1 {
        font-size: 43px;
    }

    .leads-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .leads-controls {
        grid-template-columns: 1fr;
    }

    .lead-card-main {
        grid-template-columns: 1fr auto;
        gap: 15px;
    }

    .lead-contact,
    .lead-quickfacts {
        grid-column: 1 / -1;
    }

    .lead-quickfacts {
        grid-template-columns: repeat(2, 1fr);
    }

    .lead-detail-grid {
        grid-template-columns: 1fr;
    }

    .lead-detail-notes {
        grid-column: auto;
    }
}


/* ========================================
   V4.2 — HERO + MOBILE POLISH
======================================== */

/* Mobile navigation button is desktop-hidden. */
.mobile-nav-toggle {
    display: none;
}

/* Remove older floating hero labels/text. */
.team-hero-heading,
.hero-person-text,
.hero-agent-details,
.hero-brokerage {
    display: none !important;
}

/* -------- SOLO / TRACKED HERO -------- */

.single-hero-agent {
    min-height: 475px;
    background: #0f1c1b;
}

.single-hero-agent .solo-agent-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    background: #0f1c1b;
    filter: brightness(.94) saturate(.96);
}

.single-hero-agent::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(6,17,16,.03) 0%,
            rgba(6,17,16,.02) 48%,
            rgba(6,17,16,.18) 66%,
            rgba(6,17,16,.76) 100%
        );
    pointer-events: none;
}

.solo-agent-band {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 126px;
    padding: 27px 32px 16px;
    background:
        linear-gradient(
            180deg,
            rgba(10,24,22,0) 0%,
            rgba(10,24,22,.84) 25%,
            rgba(10,24,22,.97) 100%
        );
    text-align: center;
}

.solo-agent-label {
    margin: 0 0 5px;
    color: #d7b46e;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.65px;
    line-height: 1.3;
    text-transform: uppercase;
}

.solo-agent-band h2 {
    margin: 0;
    color: #f3dfb4;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1;
}

.solo-agent-phone {
    display: inline-block;
    margin-top: 6px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.solo-agent-brokerage {
    margin: 7px 0 0;
    color: rgba(255,255,255,.56);
    font-size: 8px;
    letter-spacing: .35px;
}

/* -------- DIRECT / TEAM HERO -------- */

.dual-hero-agents {
    position: absolute;
    inset: 0;
    min-height: 475px;
}

.hero-person {
    height: 475px;
}

.team-agent-photo {
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    filter: brightness(.91) saturate(.96);
}

.hero-person::after {
    background:
        linear-gradient(
            180deg,
            rgba(7,17,17,.08) 0%,
            rgba(7,17,17,.02) 48%,
            rgba(7,17,17,.16) 65%,
            rgba(7,17,17,.74) 100%
        );
}

.team-agent-band {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 130px;
    padding: 25px 28px 14px;
    background:
        linear-gradient(
            180deg,
            rgba(8,20,19,0) 0%,
            rgba(8,20,19,.86) 24%,
            rgba(8,20,19,.98) 100%
        );
    text-align: center;
}

.team-agent-label {
    margin: 0 0 8px;
    color: #d7b46e;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.team-agent-names {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.team-agent-names > div:first-child {
    border-right: 1px solid rgba(255,255,255,.13);
}

.team-agent-names h2 {
    margin: 0;
    color: #f3dfb4;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
}

.team-agent-names a {
    display: inline-block;
    margin-top: 5px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.team-agent-brokerage {
    margin: 8px 0 0;
    color: rgba(255,255,255,.53);
    font-size: 8px;
    letter-spacing: .35px;
}

/* The lower agent-card containers stay identical.
   Only Yelena uses a corrected source image with no baked-in green strip. */
.yelena-agent-image {
    object-fit: cover;
    object-position: center top;
    transform: none;
}

/* Better touch behavior. */
.option-card,
.area-card,
.agent-contact,
.area-action-card,
.land-choice-card,
.leads-home-link {
    -webkit-tap-highlight-color: transparent;
}


/* ========================================
   TABLET + MOBILE QA — <= 820px
======================================== */

@media (max-width: 820px) {

    .site-shell {
        max-width: 100%;
    }

    .site-header {
        position: relative;
        z-index: 50;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 17px;
    }

    .brand-mark {
        font-size: 29px;
        letter-spacing: 2px;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: auto;
        min-width: 74px;
        margin: 0;
        padding: 8px 0 8px 12px;
        border: 0;
        background: transparent;
        color: #21332f;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-nav-icon {
        width: 19px;
        display: grid;
        gap: 5px;
    }

    .mobile-nav-icon i {
        display: block;
        width: 19px;
        height: 1px;
        background: #a77f43;
        transition: transform .22s ease;
    }

    .site-header.nav-open .mobile-nav-icon i:first-child {
        transform: translateY(3px) rotate(45deg);
    }

    .site-header.nav-open .mobile-nav-icon i:last-child {
        transform: translateY(-3px) rotate(-45deg);
    }

    .main-nav {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        z-index: 60;
        width: 100%;
        display: grid;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0 17px;
        background: #f6f1e7;
        border-bottom: 1px solid rgba(17,31,31,.10);
        box-shadow: 0 16px 28px rgba(17,31,31,.08);
        opacity: 0;
        transform: translateY(-5px);
        transition:
            max-height .28s ease,
            padding .28s ease,
            opacity .2s ease,
            transform .2s ease;
    }

    .site-header.nav-open .main-nav {
        max-height: 310px;
        padding-top: 8px;
        padding-bottom: 15px;
        opacity: 1;
        transform: translateY(0);
    }

    .main-nav a {
        width: 100%;
        padding: 13px 2px;
        border-bottom: 1px solid rgba(17,31,31,.07);
        font-size: 20px;
    }

    .main-nav a:last-child {
        border-bottom: 0;
    }

    .main-nav a::after {
        display: none;
    }

    .page-content {
        padding: 15px 12px 48px;
    }

    /* Hero stacks into a clean two-part mobile composition. */
    .luxury-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 12px;
    }

    .hero-copy {
        min-height: 365px;
        padding: 37px 24px 35px;
    }

    .hero-kicker {
        margin-bottom: 16px;
        font-size: 10px;
        letter-spacing: 1.85px;
    }

    .luxury-hero h1 {
        font-size: clamp(45px, 10.5vw, 60px);
        line-height: .96;
        letter-spacing: -.8px;
    }

    .luxury-hero h1 span {
        white-space: normal;
    }

    .hero-services {
        margin-top: 25px;
        font-size: 25px;
    }

    .hero-support {
        max-width: 510px;
        font-size: 14px;
        line-height: 1.58;
    }

    .hero-team {
        min-height: 430px;
        border-top: 1px solid rgba(255,255,255,.08);
        border-left: 0;
    }

    .single-hero-agent {
        min-height: 430px;
    }

    .single-hero-agent .solo-agent-photo {
        object-position: center top;
    }

    .solo-agent-band {
        min-height: 115px;
        padding: 23px 19px 13px;
    }

    .solo-agent-label {
        font-size: 9px;
        letter-spacing: 1.35px;
    }

    .solo-agent-band h2 {
        font-size: 31px;
    }

    .solo-agent-phone {
        font-size: 14px;
    }

    .dual-hero-agents,
    .hero-person {
        min-height: 430px;
        height: 430px;
    }

    .team-agent-band {
        min-height: 116px;
        padding: 22px 15px 12px;
    }

    .team-agent-label {
        font-size: 9px;
        letter-spacing: 1.35px;
    }

    .team-agent-names h2 {
        font-size: 22px;
    }

    .team-agent-names a {
        font-size: 10px;
    }

    /* Home sections */
    .options-section {
        padding-top: 50px;
    }

    .option-grid {
        gap: 11px;
    }

    .option-card {
        min-height: 150px;
        padding: 23px;
    }

    .option-card h3 {
        font-size: 29px;
    }

    .option-card-wide {
        min-height: 0;
    }

    .option-wide-inner {
        min-height: 94px;
        grid-template-columns: 48px 1fr 30px;
        gap: 14px;
        padding: 18px 21px;
    }

    .results-section {
        margin-top: 56px;
        padding: 48px 17px;
    }

    .marketing-section,
    .agents-section,
    .areas-section {
        padding-top: 65px;
    }

    .marketing-grid {
        grid-template-columns: 1fr;
    }

    .marketing-card {
        min-height: 0;
        padding: 29px 24px;
    }

    .reviews-section {
        margin-top: 66px;
        border-radius: 12px;
    }

    .agent-grid {
        grid-template-columns: 1fr;
    }

    .agent-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .agent-image-wrap {
        height: 410px;
    }

    .agent-content {
        padding: 26px 23px;
    }

    .area-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .area-card {
        min-height: 275px;
    }

    .more-areas-block {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 24px;
    }

    /* Form pages */
    .page-content > h1 {
        margin-top: 26px;
        font-size: 42px;
        line-height: 1;
    }

    .page-content > h1 + p {
        font-size: 18px;
    }

    form {
        padding: 24px 20px;
        border-radius: 10px;
    }

    input,
    select,
    textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS input zoom. */
    }

    textarea {
        min-height: 120px;
    }

    /* Area-guide pages */
    .area-guide-hero {
        min-height: 470px;
        border-radius: 12px;
    }

    .area-guide-overlay {
        padding: 36px 24px 40px;
    }

    .area-guide-overlay h1 {
        font-size: clamp(53px, 13vw, 75px);
    }

    .area-guide-tagline {
        font-size: 21px;
    }

    .area-guide-intro {
        padding-top: 57px;
    }

    .area-guide-intro-copy h2,
    .area-guide-cta h2 {
        font-size: 39px;
    }

    .area-highlights {
        grid-template-columns: 1fr;
    }

    .area-guide-cta {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 57px;
        padding: 31px 20px;
        border-radius: 12px;
    }

    .area-guide-actions {
        grid-template-columns: 1fr;
    }

    .area-action-card {
        min-height: 125px;
    }

    /* Footer */
    .site-footer {
        margin: 0 12px;
        padding: 25px 5px 31px;
    }

    .footer-agents {
        gap: 5px 7px;
    }
}


/* ========================================
   PHONE POLISH — <= 430px
======================================== */

@media (max-width: 430px) {

    .site-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .brand-mark {
        font-size: 27px;
    }

    .page-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero-copy {
        min-height: 340px;
        padding: 32px 20px 31px;
    }

    .luxury-hero h1 {
        font-size: clamp(43px, 12vw, 52px);
    }

    .hero-services {
        font-size: 23px;
    }

    .hero-team,
    .single-hero-agent {
        min-height: 405px;
    }

    .dual-hero-agents,
    .hero-person {
        min-height: 405px;
        height: 405px;
    }

    .solo-agent-band {
        min-height: 111px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .solo-agent-label {
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
        font-size: 8px;
    }

    .solo-agent-band h2 {
        font-size: 29px;
    }

    .team-agent-band {
        min-height: 112px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .team-agent-label {
        font-size: 8px;
    }

    .team-agent-names h2 {
        font-size: 18px;
    }

    .team-agent-names a {
        font-size: 9px;
    }

    .team-agent-brokerage,
    .solo-agent-brokerage {
        font-size: 7px;
    }

    .center-heading h2,
    .marketing-header h2,
    .results-heading h2 {
        font-size: 35px;
    }

    .option-card {
        min-height: 138px;
        padding: 21px;
    }

    .option-icon {
        margin-bottom: 16px;
    }

    .results-heading > span {
        font-size: 18px;
    }

    .result strong {
        font-size: 57px;
    }

    .reviews-carousel {
        grid-template-columns: 32px minmax(0,1fr) 32px;
    }

    .review-arrow {
        width: 33px;
        height: 33px;
        font-size: 15px;
    }

    .review-stage {
        min-height: 340px;
    }

    .review-slide blockquote {
        font-size: 25px;
    }

    .agent-image-wrap {
        height: 365px;
    }

    .area-card {
        min-height: 245px;
    }

    .area-copy {
        left: 18px;
        right: 18px;
        bottom: 17px;
    }

    .area-copy h3 {
        font-size: 28px;
    }

    .land-options-hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    .land-choice-card {
        padding: 25px 21px;
    }

    /* Leads dashboard on smaller phones */
    .leads-app {
        width: calc(100% - 18px);
    }

    .leads-topbar {
        padding-top: 13px;
    }

    .leads-brand {
        font-size: 25px;
    }

    .leads-private-label {
        font-size: 7px;
    }

    .leads-heading-copy h1 {
        font-size: 41px;
    }

    .leads-summary {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .leads-stat {
        min-height: 96px;
        padding: 17px;
    }

    .lead-card-main {
        padding: 18px;
    }

    .lead-person h2 {
        font-size: 26px;
    }

    .lead-quickfacts {
        grid-template-columns: 1fr 1fr;
    }
}


/* ========================================
   V4.2.2 — MOBILE COMPACT HOMEPAGE
   PHONE ONLY: desktop/tablet are untouched.
======================================== */

@media (max-width: 430px) {

    /* ------------------------------------
       1) SHORTER HERO COPY PANEL
    ------------------------------------ */

    .hero-copy {
        min-height: 278px;
        padding: 25px 20px 23px;
    }

    .hero-kicker {
        margin-bottom: 13px;
        font-size: 9px;
        letter-spacing: 1.55px;
    }

    .luxury-hero h1 {
        font-size: 40px;
        line-height: .94;
        letter-spacing: -.55px;
    }

    .hero-services {
        margin-top: 18px;
        margin-bottom: 10px;
        font-size: 21px;
        line-height: 1.05;
    }

    .hero-support {
        max-width: 330px;
        font-size: 12.5px;
        line-height: 1.45;
    }


    /* ------------------------------------
       2) MORE THAN A LISTING — 3 x 2
    ------------------------------------ */

    .marketing-section {
        padding-top: 52px;
    }

    .marketing-header {
        margin-bottom: 24px;
    }

    .marketing-header h2 {
        font-size: 35px;
    }

    .marketing-header h3 {
        margin-top: 8px;
        font-size: 21px;
        line-height: 1.12;
    }

    .marketing-header > p:last-child {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.55;
    }

    .marketing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketing-card {
        min-height: 192px;
        padding: 14px 11px 13px;
    }

    .marketing-card h3 {
        min-height: 70px;
        margin: 0;
        font-size: 17px;
        line-height: 1.03;
        overflow-wrap: anywhere;
    }

    .marketing-card p {
        margin-top: 7px;
        font-size: 9px;
        line-height: 1.42;
        overflow-wrap: anywhere;
    }


    /* ------------------------------------
       3) MEET DAVID & YELENA — SIDE BY SIDE
    ------------------------------------ */

    .agents-section {
        padding-top: 54px;
    }

    .agents-section .center-heading {
        margin-bottom: 0;
    }

    .agents-section .center-heading h2 {
        font-size: 35px;
    }

    .agent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 27px;
    }

    .agent-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        border-radius: 8px;
    }

    .agent-image-wrap {
        width: 100%;
        height: 178px;
        flex: 0 0 178px;
    }

    .agent-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .agent-content {
        min-width: 0;
        padding: 13px 11px 12px;
    }

    .agent-content h3 {
        font-size: 21px;
        line-height: 1;
        overflow-wrap: anywhere;
    }

    /* Keep the mobile cards useful without becoming giant. */
    .agent-specialties,
    .agent-learn-more {
        display: none;
    }

    .agent-card-phone {
        margin: 10px 0 11px;
        font-size: 16px;
        white-space: nowrap;
    }

    .agent-contact {
        padding: 10px 6px;
        font-size: 9px;
    }


    /* ------------------------------------
       4) EXPLORE SWFL — 3 x 2
    ------------------------------------ */

    .areas-section {
        padding-top: 57px;
    }

    .area-heading {
        margin-bottom: 24px;
    }

    .area-heading h2 {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        font-size: 35px;
        line-height: .98;
    }

    .area-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .area-card {
        min-height: 150px;
        border-radius: 6px;
    }

    .area-copy {
        left: 10px;
        right: 8px;
        bottom: 9px;
    }

    .area-copy h3 {
        font-size: 20px;
        line-height: .95;
        overflow-wrap: anywhere;
    }

    /* Descriptions are too cramped at 3-across; keep tiles visual and clean. */
    .area-copy p {
        display: none;
    }

    .area-explore {
        display: none;
    }

    /* On touch screens, use a slightly stronger image overlay for title legibility. */
    .area-slide {
        background-position: center;
    }


    /* Slightly tighten the section transition after the 3x2 city grid. */
    .more-areas-block {
        margin-top: 18px;
    }
}


/* ========================================
   V4.2.3 — MOBILE POLISH
   PHONE ONLY: desktop remains untouched.
======================================== */

@media (max-width: 430px) {

    /* ------------------------------------
       1) TRACKED / SOLO HERO — DESKTOP-LIKE
          SIDE-BY-SIDE COMPOSITION
       Direct/team hero stays as-is.
    ------------------------------------ */

    .luxury-hero:has(.single-hero-agent) {
        grid-template-columns: 48% 52%;
        min-height: 326px;
    }

    .luxury-hero:has(.single-hero-agent) .hero-copy {
        min-height: 326px;
        padding: 24px 13px 22px 17px;
        justify-content: center;
    }

    .luxury-hero:has(.single-hero-agent) .hero-kicker {
        margin-bottom: 13px;
        font-size: 6.8px;
        line-height: 1.2;
        letter-spacing: 1.25px;
    }

    .luxury-hero:has(.single-hero-agent) h1 {
        font-size: 29px;
        line-height: .94;
        letter-spacing: -.45px;
    }

    .luxury-hero:has(.single-hero-agent) .hero-services {
        margin-top: 19px;
        margin-bottom: 9px;
        font-size: 15.5px;
        line-height: 1.08;
    }

    .luxury-hero:has(.single-hero-agent) .hero-support {
        max-width: 160px;
        font-size: 9.4px;
        line-height: 1.42;
    }

    .luxury-hero:has(.single-hero-agent) .hero-team,
    .luxury-hero:has(.single-hero-agent) .single-hero-agent {
        min-height: 326px;
        height: 326px;
        border-top: 0;
        border-left: 1px solid rgba(255,255,255,.08);
    }

    .luxury-hero:has(.single-hero-agent) .single-hero-agent .solo-agent-photo {
        object-fit: contain;
        object-position: center top;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-band {
        min-height: 94px;
        padding: 19px 7px 9px;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-label {
        max-width: 175px;
        margin-left: auto;
        margin-right: auto;
        font-size: 5.8px;
        line-height: 1.25;
        letter-spacing: .75px;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-band h2 {
        font-size: 20px;
        white-space: nowrap;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-phone {
        margin-top: 4px;
        font-size: 10px;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-brokerage {
        margin-top: 4px;
        font-size: 5.6px;
    }


    /* ------------------------------------
       2) CLIENT EXPERIENCES — SHORTER
    ------------------------------------ */

    .reviews-section {
        margin-top: 50px;
        padding: 42px 9px 25px;
    }

    .reviews-heading p {
        margin-bottom: 4px;
        font-size: 8px;
        letter-spacing: 1.8px;
    }

    .reviews-heading h2 {
        font-size: 35px;
    }

    .reviews-carousel {
        grid-template-columns: 29px minmax(0, 1fr) 29px;
        margin-top: 10px;
    }

    .review-stage {
        min-height: 258px;
    }

    .review-slide {
        padding: 7px 6px;
    }

    .review-stars {
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 5px;
    }

    .review-slide blockquote {
        font-size: 21px;
        line-height: 1.18;
    }

    .review-author {
        margin-top: 16px;
        font-size: 19px;
    }

    .review-context {
        font-size: 8px;
    }

    .review-arrow {
        width: 29px;
        height: 29px;
        font-size: 13px;
    }

    .review-counter {
        margin-top: 2px;
    }


    /* ------------------------------------
       3) MEET DAVID & YELENA
          FULL NAMES ON ONE LINE
    ------------------------------------ */

    .agent-content {
        padding-left: 9px;
        padding-right: 9px;
    }

    .agent-content h3 {
        font-size: 17px;
        line-height: 1;
        letter-spacing: -.25px;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .agent-card-phone {
        font-size: 14.5px;
    }


    /* ------------------------------------
       4) MORE OF FLORIDA'S GULF COAST
          SMALLER / MORE PROPORTIONAL
    ------------------------------------ */

    .more-areas-block {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 15px;
        padding: 20px 15px;
        border-radius: 8px;
    }

    .more-areas-copy {
        text-align: center;
    }

    .more-areas-copy .gold-kicker {
        margin-bottom: 5px;
        font-size: 7.5px;
        letter-spacing: 1.5px;
    }

    .more-areas-copy h3 {
        font-size: 25px;
        line-height: 1;
    }

    .more-areas-copy > p:last-child {
        max-width: 330px;
        margin: 7px auto 0;
        font-size: 9.5px;
        line-height: 1.45;
    }

    .more-area-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .more-area-links a {
        min-height: 66px;
        gap: 5px;
        padding: 10px 7px;
        border-radius: 6px;
        font-size: 14px;
        line-height: .98;
        text-align: left;
    }

    .more-area-links strong {
        font-size: 16px;
    }


    /* ------------------------------------
       5) FOOTER AGENT / LICENSE SYMMETRY
       390px + 430px
    ------------------------------------ */

    .site-footer {
        padding-top: 25px;
    }

    .footer-agents {
        width: 100%;
        max-width: 360px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "david yelena"
            "david-license yelena-license";
        column-gap: 12px;
        row-gap: 4px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-agents > :nth-child(1) {
        grid-area: david;
    }

    .footer-agents > :nth-child(2) {
        grid-area: david-license;
    }

    .footer-agents > :nth-child(3) {
        display: none;
    }

    .footer-agents > :nth-child(4) {
        grid-area: yelena;
    }

    .footer-agents > :nth-child(5) {
        grid-area: yelena-license;
    }

    .footer-agents strong {
        font-size: 9px;
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
    }

    .footer-agents > span:not(.footer-divider) {
        font-size: 7.5px;
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
    }

    .site-footer > p {
        margin-top: 9px;
        font-size: 7.5px;
        line-height: 1.4;
    }

    .site-footer > p + p {
        margin-top: 4px;
    }
}


/* ========================================
   V4.2.4 — MOBILE TIGHTENING
   PHONE ONLY: desktop remains untouched.
======================================== */

@media (max-width: 430px) {

    /* ------------------------------------
       1) EXPLORE YOUR OPTIONS
          Four main services = 2x2
          Buy & Sell = compact full-width row
    ------------------------------------ */

    .options-section {
        padding-top: 42px;
    }

    .options-section .center-heading h2 {
        font-size: 33px;
    }

    .option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 22px;
    }

    .option-card {
        min-height: 132px;
        padding: 15px 13px;
        border-radius: 7px;
    }

    .option-icon {
        width: 31px;
        height: 31px;
        margin-bottom: 12px;
    }

    .option-card h3 {
        font-size: 19px;
        line-height: 1.02;
    }

    .option-card p {
        margin-top: 6px;
        font-size: 8.7px;
        line-height: 1.35;
    }

    .option-card-wide {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .option-wide-inner {
        min-height: 72px;
        grid-template-columns: 34px 1fr 25px;
        gap: 10px;
        padding: 12px 14px;
    }

    .option-wide-icon {
        width: 30px;
        height: 30px;
        margin: 0;
    }

    .option-wide-copy h3 {
        font-size: 20px;
    }

    .option-wide-copy p {
        margin-top: 2px;
        font-size: 8.7px;
        line-height: 1.25;
    }

    .option-wide-arrow {
        font-size: 26px;
    }


    /* ------------------------------------
       2) TRACKED SOLO HERO — SMALLER
       Keep desktop-style side-by-side,
       but reduce overall footprint.
    ------------------------------------ */

    .luxury-hero:has(.single-hero-agent) {
        grid-template-columns: 47% 53%;
        min-height: 282px;
    }

    .luxury-hero:has(.single-hero-agent) .hero-copy {
        min-height: 282px;
        padding: 19px 10px 17px 14px;
    }

    .luxury-hero:has(.single-hero-agent) .hero-kicker {
        margin-bottom: 10px;
        font-size: 6px;
        letter-spacing: 1.05px;
    }

    .luxury-hero:has(.single-hero-agent) h1 {
        font-size: 25px;
        line-height: .93;
    }

    .luxury-hero:has(.single-hero-agent) .hero-services {
        margin-top: 14px;
        margin-bottom: 7px;
        font-size: 13.5px;
        line-height: 1.05;
    }

    .luxury-hero:has(.single-hero-agent) .hero-support {
        max-width: 148px;
        font-size: 8.4px;
        line-height: 1.35;
    }

    .luxury-hero:has(.single-hero-agent) .hero-team,
    .luxury-hero:has(.single-hero-agent) .single-hero-agent {
        min-height: 282px;
        height: 282px;
    }

    .luxury-hero:has(.single-hero-agent) .single-hero-agent .solo-agent-photo {
        object-fit: cover;
        object-position: center 12%;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-band {
        min-height: 80px;
        padding: 15px 6px 7px;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-label {
        max-width: 170px;
        margin-bottom: 3px;
        font-size: 5.2px;
        letter-spacing: .65px;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-band h2 {
        font-size: 18px;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-phone {
        margin-top: 3px;
        font-size: 9px;
    }

    .luxury-hero:has(.single-hero-agent) .solo-agent-brokerage {
        margin-top: 3px;
        font-size: 5px;
    }


    /* ------------------------------------
       3) PROVEN RESULTS — COMPACT 3-COLUMN
       One row instead of long stacked stats.
    ------------------------------------ */

    .results-section {
        margin-top: 44px;
        padding: 38px 10px 31px;
    }

    .results-heading {
        margin-bottom: 28px;
    }

    .results-heading > p {
        margin-bottom: 6px;
        font-size: 9px;
        letter-spacing: 1.7px;
    }

    .results-heading h2 {
        font-size: 31px;
        line-height: 1;
    }

    .results-heading > span {
        max-width: 320px;
        margin: 8px auto 0;
        font-size: 14px;
        line-height: 1.25;
    }

    .results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .result {
        min-width: 0;
        padding: 13px 7px 9px;
    }

    .result:not(:last-child)::after {
        top: 12%;
        right: 0;
        bottom: auto;
        left: auto;
        width: 1px;
        height: 76%;
        background: rgba(191,152,85,.30);
    }

    .result strong {
        font-size: 34px;
        line-height: .9;
        white-space: nowrap;
    }

    .result span {
        margin-top: 7px;
        font-size: 6.7px;
        line-height: 1.2;
        letter-spacing: .65px;
    }
}


/* ========================================
   V4.2.5 — MOBILE FINAL PROPORTIONS
   PHONE ONLY (<= 430px)
   Desktop remains untouched.
======================================== */

@media (max-width: 430px) {

    /* ------------------------------------
       1) DIRECT / INCOGNITO TEAM HERO
       Compact desktop-style side-by-side:
       left copy + both agents on right.
    ------------------------------------ */

    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 43% 57%;
        min-height: 290px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy {
        min-height: 290px;
        padding: 18px 9px 16px 13px;
        justify-content: center;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-kicker {
        margin-bottom: 10px;
        font-size: 5.8px;
        line-height: 1.2;
        letter-spacing: 1px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 {
        font-size: 24px;
        line-height: .94;
        letter-spacing: -.4px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-services {
        margin-top: 14px;
        margin-bottom: 7px;
        font-size: 13px;
        line-height: 1.05;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-support {
        max-width: 142px;
        font-size: 8.1px;
        line-height: 1.34;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-team {
        min-height: 290px;
        height: 290px;
        border-top: 0;
        border-left: 1px solid rgba(255,255,255,.08);
    }

    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 290px;
        height: 290px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-photo {
        object-fit: cover !important;
        object-position: center 8% !important;
        transform: none !important;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-band {
        min-height: 76px;
        padding: 14px 5px 7px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-label {
        margin-bottom: 5px;
        font-size: 5px;
        line-height: 1.2;
        letter-spacing: .7px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names a {
        margin-top: 3px;
        font-size: 6.6px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-brokerage {
        margin-top: 5px;
        font-size: 4.8px;
    }


    /* ------------------------------------
       2) PICTURED CITY CARDS
       Slightly smaller / smoother to match
       the secondary Gulf Coast section.
    ------------------------------------ */

    .areas-section {
        padding-top: 51px;
    }

    .area-heading {
        margin-bottom: 20px;
    }

    .area-grid {
        gap: 7px;
    }

    .area-card {
        min-height: 128px;
        border-radius: 9px;
    }

    .area-copy {
        left: 9px;
        right: 7px;
        bottom: 8px;
    }

    .area-copy h3 {
        font-size: 17px;
        line-height: .98;
        letter-spacing: -.15px;
    }

    .area-slide {
        border-radius: 9px;
    }

    .more-areas-block {
        margin-top: 13px;
    }


    /* ------------------------------------
       3) MORE THAN A LISTING
       Keep 3x2, but reduce overall visual
       weight to match the rest of mobile.
    ------------------------------------ */

    .marketing-section {
        padding-top: 45px;
    }

    .marketing-header {
        margin-bottom: 18px;
    }

    .marketing-header .gold-kicker {
        margin-bottom: 5px;
        font-size: 7.5px;
        letter-spacing: 1.45px;
    }

    .marketing-header h2 {
        font-size: 30px;
        line-height: 1;
    }

    .marketing-header h3 {
        margin-top: 7px;
        font-size: 17px;
        line-height: 1.08;
    }

    .marketing-header > p:last-child {
        margin-top: 8px;
        font-size: 10px;
        line-height: 1.43;
    }

    .marketing-card {
        min-height: 156px;
        padding: 11px 8px 10px;
    }

    .marketing-card h3 {
        min-height: 55px;
        font-size: 14px;
        line-height: 1.01;
    }

    .marketing-card p {
        margin-top: 5px;
        font-size: 7.6px;
        line-height: 1.34;
    }


    /* ------------------------------------
       4) CLIENT EXPERIENCES
       Slightly smaller again for 390/430.
    ------------------------------------ */

    .reviews-section {
        margin-top: 46px;
        padding: 32px 7px 19px;
        border-radius: 10px;
    }

    .reviews-heading p {
        margin-bottom: 3px;
        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .reviews-heading h2 {
        font-size: 31px;
    }

    .reviews-carousel {
        grid-template-columns: 27px minmax(0, 1fr) 27px;
        margin-top: 7px;
    }

    .review-stage {
        min-height: 220px;
    }

    .review-slide {
        padding: 5px 4px;
    }

    .review-stars {
        margin-bottom: 10px;
        font-size: 10px;
        letter-spacing: 4px;
    }

    .review-slide blockquote {
        font-size: 18.5px;
        line-height: 1.16;
    }

    .review-author {
        margin-top: 13px;
        font-size: 17px;
    }

    .review-context {
        margin-top: 1px;
        font-size: 7px;
    }

    .review-arrow {
        width: 27px;
        height: 27px;
        font-size: 12px;
    }

    .review-counter #reviewCurrent {
        font-size: 16px;
    }
}


/* ========================================
   MASTER FUNNEL PAGE — BUY V1
   This becomes the design system for the
   other public lead-capture forms.
======================================== */

.funnel-page {
    width: 100%;
    padding: 4px 0 20px;
}

.funnel-shell {
    display: grid;
    grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
    overflow: hidden;
    border: 1px solid rgba(17,31,31,.09);
    border-radius: 16px;
    background: #fbf8f1;
    box-shadow: 0 24px 65px rgba(17,31,31,.09);
}


/* ----------------------------------------
   LEFT INTRO PANEL
---------------------------------------- */

.funnel-intro {
    position: relative;
    min-width: 0;
    background:
        linear-gradient(145deg, #10211f, #1b302d);
    color: white;
}

.funnel-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 15%, rgba(191,152,85,.07), transparent 30%);
}

.funnel-intro-inner {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 58px 48px 45px;
}

.funnel-eyebrow {
    margin: 0 0 17px;
    color: #d4ad63;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.funnel-intro h1 {
    margin: 0;
    color: #fffdf7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(47px, 4.2vw, 66px);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -1px;
}

.funnel-lead {
    max-width: 520px;
    margin: 23px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.72;
}

.funnel-rule {
    width: 42px;
    height: 1px;
    margin: 30px 0;
    background: rgba(214,179,111,.72);
}

.funnel-benefits {
    display: grid;
    gap: 21px;
}

.funnel-benefit {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
}

.funnel-benefit svg {
    width: 37px;
    height: 37px;
    fill: none;
    stroke: #d2ab64;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.funnel-benefit strong {
    display: block;
    color: #f6e4be;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.05;
}

.funnel-benefit span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.59);
    font-size: 10px;
    line-height: 1.55;
}

.funnel-agent-note {
    margin-top: auto;
    padding-top: 44px;
}

.funnel-agent-note::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: 19px;
    background: rgba(255,255,255,.10);
}

.funnel-agent-note span {
    display: block;
    color: rgba(255,255,255,.42);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.funnel-agent-note strong {
    display: block;
    margin-top: 5px;
    color: #ead3a2;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
}

.funnel-agent-note small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.42);
    font-size: 7px;
}


/* ----------------------------------------
   FORM PANEL
---------------------------------------- */

.funnel-form-panel {
    min-width: 0;
    padding: 52px 56px 48px;
    background:
        linear-gradient(180deg, #fbf8f1, #f7f2e9);
}

.funnel-form-heading {
    max-width: 680px;
    margin-bottom: 32px;
}

.funnel-form-heading > p {
    margin: 0 0 7px;
    color: #ae8446;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.funnel-form-heading h2 {
    margin: 0;
    color: #172825;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
}

.funnel-form-heading > span {
    display: block;
    max-width: 560px;
    margin-top: 10px;
    color: #6a7570;
    font-size: 12px;
    line-height: 1.55;
}


/* Override legacy global form treatment. */
form.funnel-form {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.funnel-form-section {
    padding: 27px 0;
    border-top: 1px solid rgba(17,31,31,.10);
}

.funnel-form-section:first-child {
    padding-top: 25px;
}

.funnel-section-heading {
    display: grid;
    grid-template-columns: 145px minmax(0,1fr);
    gap: 20px;
    align-items: baseline;
    margin-bottom: 18px;
}

.funnel-section-heading > span {
    color: #1d302c;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
}

.funnel-section-heading > p {
    margin: 0;
    color: #87908c;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.4;
}

.funnel-field-grid {
    display: grid;
    gap: 16px;
}

.funnel-field-grid-2 {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.funnel-field {
    display: block;
    min-width: 0;
}

.funnel-field > span {
    display: block;
    margin-bottom: 7px;
    color: #45534e;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.35;
}

.funnel-field input,
.funnel-field select,
.funnel-field textarea {
    width: 100%;
    min-height: 49px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #d8d6cf;
    border-radius: 7px;
    background: rgba(255,255,255,.82);
    color: #172825;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.funnel-field textarea {
    min-height: 118px;
    resize: vertical;
    line-height: 1.55;
}

.funnel-field input::placeholder,
.funnel-field textarea::placeholder {
    color: #a3a9a5;
}

.funnel-field input:focus,
.funnel-field select:focus,
.funnel-field textarea:focus {
    border-color: rgba(174,132,70,.70);
    background: white;
    box-shadow: 0 0 0 3px rgba(174,132,70,.09);
}

.funnel-conditional {
    padding: 14px 15px;
    border-left: 2px solid #b68b4a;
    border-radius: 6px;
    background: #eee6d7;
}

.funnel-conditional[hidden] {
    display: none !important;
}

.funnel-submit-wrap {
    padding-top: 28px;
    border-top: 1px solid rgba(17,31,31,.10);
}

.funnel-submit {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
    padding: 15px 19px;
    border: 0;
    border-radius: 7px;
    background: #132623;
    color: white;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.funnel-submit:hover {
    transform: translateY(-2px);
    background: #1b322e;
}

.funnel-submit span {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
}

.funnel-submit strong {
    color: #d3ab65;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 27px;
    font-weight: 400;
}

.funnel-submit-wrap > p {
    margin: 10px 0 0;
    color: #929995;
    font-size: 8px;
    font-weight: 500;
    text-align: center;
}


/* ----------------------------------------
   TABLET
---------------------------------------- */

@media (max-width: 980px) {

    .funnel-shell {
        grid-template-columns: .8fr 1.2fr;
    }

    .funnel-intro-inner {
        padding: 46px 32px 38px;
    }

    .funnel-intro h1 {
        font-size: 48px;
    }

    .funnel-form-panel {
        padding: 45px 37px 42px;
    }

    .funnel-field-grid-2 {
        grid-template-columns: 1fr;
    }

}


/* ----------------------------------------
   MOBILE
---------------------------------------- */

@media (max-width: 700px) {

    .funnel-page {
        padding-top: 0;
    }

    .funnel-shell {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }

    .funnel-intro-inner {
        min-height: 0;
        padding: 34px 24px 29px;
    }

    .funnel-eyebrow {
        margin-bottom: 12px;
        font-size: 8px;
        letter-spacing: 1.6px;
    }

    .funnel-intro h1 {
        font-size: 43px;
        line-height: .95;
    }

    .funnel-lead {
        margin-top: 17px;
        font-size: 12px;
        line-height: 1.58;
    }

    .funnel-rule {
        margin: 22px 0;
    }

    .funnel-benefits {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 8px;
    }

    .funnel-benefit {
        display: block;
        min-width: 0;
    }

    .funnel-benefit svg {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
    }

    .funnel-benefit strong {
        font-size: 16px;
        line-height: 1;
    }

    .funnel-benefit span {
        margin-top: 5px;
        font-size: 7.5px;
        line-height: 1.4;
    }

    .funnel-agent-note {
        padding-top: 24px;
    }

    .funnel-agent-note::before {
        margin-bottom: 13px;
    }

    .funnel-agent-note strong {
        font-size: 18px;
    }

    .funnel-form-panel {
        padding: 34px 21px 31px;
    }

    .funnel-form-heading {
        margin-bottom: 24px;
    }

    .funnel-form-heading h2 {
        font-size: 36px;
    }

    .funnel-form-heading > span {
        font-size: 11px;
    }

    .funnel-form-section {
        padding: 23px 0;
    }

    .funnel-section-heading {
        display: block;
        margin-bottom: 15px;
    }

    .funnel-section-heading > span {
        font-size: 20px;
    }

    .funnel-section-heading > p {
        margin-top: 2px;
        font-size: 8px;
    }

    .funnel-field-grid-2 {
        grid-template-columns: 1fr;
    }

    .funnel-field {
        min-width: 0;
    }

    .funnel-field > span {
        font-size: 9px;
    }

    .funnel-field input,
    .funnel-field select,
    .funnel-field textarea {
        min-height: 49px;
        font-size: 16px; /* prevents iOS zoom */
    }

    .funnel-field textarea {
        min-height: 115px;
    }

    .funnel-submit {
        min-height: 54px;
    }

}


/* ----------------------------------------
   SMALL PHONE
---------------------------------------- */

@media (max-width: 430px) {

    .funnel-intro-inner {
        padding: 29px 19px 25px;
    }

    .funnel-intro h1 {
        font-size: 38px;
    }

    .funnel-lead {
        font-size: 11px;
    }

    .funnel-benefits {
        gap: 6px;
    }

    .funnel-benefit strong {
        font-size: 14px;
    }

    .funnel-benefit span {
        font-size: 6.8px;
    }

    .funnel-form-panel {
        padding: 30px 17px 28px;
    }

    .funnel-form-heading h2 {
        font-size: 33px;
    }

    .funnel-submit span {
        font-size: 21px;
    }

}


/* ========================================
   BUY + LEADS MOBILE COMPACT HOTFIX V1
   MOBILE ONLY — desktop remains untouched.
======================================== */

@media (max-width: 700px) {

    /* ------------------------------------
       BUY FUNNEL — REDUCE VERTICAL BULK
       Keep inputs finger-friendly.
    ------------------------------------ */

    .funnel-form-panel {
        padding: 27px 18px 25px;
    }

    .funnel-form-heading {
        margin-bottom: 18px;
    }

    .funnel-form-heading > p {
        margin-bottom: 5px;
        font-size: 8px;
    }

    .funnel-form-heading h2 {
        font-size: 32px;
        line-height: .98;
    }

    .funnel-form-heading > span {
        margin-top: 7px;
        font-size: 10px;
        line-height: 1.45;
    }

    .funnel-form-section {
        padding: 18px 0;
    }

    .funnel-form-section:first-child {
        padding-top: 17px;
    }

    .funnel-section-heading {
        margin-bottom: 11px;
    }

    .funnel-section-heading > span {
        font-size: 18px;
    }

    .funnel-section-heading > p {
        margin-top: 1px;
        font-size: 7.5px;
    }

    .funnel-field-grid {
        gap: 11px;
    }

    .funnel-field > span {
        margin-bottom: 5px;
        font-size: 8.5px;
        line-height: 1.3;
    }

    .funnel-field input,
    .funnel-field select,
    .funnel-field textarea {
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 6px;
        font-size: 16px; /* preserve no-zoom behavior on iPhone */
    }

    .funnel-field textarea {
        min-height: 90px;
    }

    .funnel-conditional {
        padding: 11px 12px;
    }

    .funnel-submit-wrap {
        padding-top: 20px;
    }

    .funnel-submit {
        min-height: 50px;
        padding: 12px 16px;
    }

    .funnel-submit span {
        font-size: 20px;
    }

    .funnel-submit strong {
        font-size: 24px;
    }

    .funnel-submit-wrap > p {
        margin-top: 7px;
        font-size: 7px;
    }


    /* ------------------------------------
       LEADS DASHBOARD — MOBILE COMPACT
    ------------------------------------ */

    .leads-app {
        width: calc(100% - 16px);
        padding: 6px 0 30px;
    }

    .leads-topbar {
        gap: 12px;
        padding: 10px 0 14px;
    }

    .leads-brand {
        font-size: 23px;
    }

    .leads-private-label {
        padding: 5px 7px;
        font-size: 6.5px;
        letter-spacing: .8px;
    }

    .leads-heading {
        gap: 9px;
        padding: 23px 0 17px;
    }

    .leads-heading-copy p {
        margin-bottom: 3px;
        font-size: 7.5px;
        letter-spacing: 1.4px;
    }

    .leads-heading-copy h1 {
        font-size: 37px;
    }

    .leads-heading-copy span {
        margin-top: 7px;
        font-size: 10px;
        line-height: 1.45;
    }

    .leads-home-link {
        font-size: 15px;
    }

    .leads-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 10px;
    }

    .leads-stat {
        min-height: 72px;
        padding: 11px 10px;
        border-radius: 7px;
    }

    .leads-stat strong {
        font-size: 27px;
    }

    .leads-stat span {
        margin-top: 5px;
        font-size: 6.3px;
        line-height: 1.15;
        letter-spacing: .55px;
    }

    .leads-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 12px;
        padding: 8px;
        border-radius: 8px;
    }

    .leads-control:first-child {
        grid-column: 1 / -1;
    }

    .leads-control input,
    .leads-control select {
        height: 40px;
        padding: 0 9px;
        border-radius: 6px;
        font-size: 9px;
    }

    .leads-results-meta {
        gap: 8px;
        margin: 0 2px 8px;
        font-size: 8px;
    }

    .leads-list {
        gap: 8px;
    }

    .lead-card {
        border-radius: 8px;
    }

    .lead-card-main {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px;
        padding: 13px 14px;
    }

    .lead-id {
        font-size: 7px;
        letter-spacing: .7px;
    }

    .lead-person h2 {
        margin: 5px 0 3px;
        font-size: 23px;
    }

    .lead-badges {
        gap: 4px;
    }

    .lead-badge {
        min-height: 19px;
        padding: 3px 6px;
        font-size: 6.3px;
        letter-spacing: .25px;
    }

    .lead-contact {
        gap: 3px;
    }

    .lead-contact a {
        font-size: 9.5px;
    }

    .lead-quickfacts {
        gap: 7px 11px;
        padding-top: 1px;
    }

    .lead-fact span {
        margin-bottom: 2px;
        font-size: 5.8px;
        letter-spacing: .55px;
    }

    .lead-fact strong {
        font-size: 8.5px;
        line-height: 1.25;
    }

    .lead-expand {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .lead-details {
        padding: 0 14px 15px;
    }

    .lead-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding-top: 12px;
    }

    .lead-detail {
        min-height: 58px;
        padding: 9px 10px;
    }

    .lead-detail span {
        margin-bottom: 4px;
        font-size: 5.8px;
    }

    .lead-detail strong,
    .lead-detail p {
        font-size: 8.5px;
        line-height: 1.4;
    }

    .lead-detail-notes {
        grid-column: 1 / -1;
    }
}


@media (max-width: 430px) {

    /* Final small-phone tightening */

    .funnel-form-panel {
        padding-left: 15px;
        padding-right: 15px;
    }

    .funnel-form-heading h2 {
        font-size: 30px;
    }

    .funnel-field-grid {
        gap: 10px;
    }

    .leads-heading-copy h1 {
        font-size: 35px;
    }

    .leads-summary {
        gap: 5px;
    }

    .leads-stat {
        min-height: 68px;
        padding: 10px 8px;
    }

    .leads-stat strong {
        font-size: 25px;
    }

    .leads-stat span {
        font-size: 5.9px;
    }

    .leads-controls {
        gap: 5px;
        padding: 7px;
    }

    .leads-control input,
    .leads-control select {
        height: 38px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: 8.3px;
    }

    .lead-card-main {
        padding: 12px;
    }

    .lead-person h2 {
        font-size: 22px;
    }
}


/* ========================================
   FUNNEL MASTER V1 — REMAINING PAGES
======================================== */

.funnel-field-spaced {
    margin-top: 16px;
}

.funnel-conditional-spaced {
    margin-top: 16px;
}


/* ----------------------------------------
   LAND CHOICE PAGE
---------------------------------------- */

.land-choice-page {
    padding: 60px 0 34px;
}

.land-choice-hero {
    max-width: 790px;
    margin: 0 auto 34px;
    text-align: center;
}

.land-choice-hero .funnel-eyebrow {
    color: #ae8446;
}

.land-choice-hero h1 {
    margin: 0;
    color: #182a27;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 600;
    line-height: .96;
    letter-spacing: -1px;
}

.land-choice-hero > span {
    display: block;
    max-width: 620px;
    margin: 15px auto 0;
    color: #69746f;
    font-size: 12px;
    line-height: 1.65;
}

.land-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 13px;
}

.land-choice-card {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    padding: 42px;
    border: 1px solid rgba(20,39,35,.10);
    border-radius: 13px;
    background: linear-gradient(145deg, #132623, #1c3430);
    color: white;
    text-decoration: none;
    box-shadow: 0 20px 45px rgba(17,31,31,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.land-choice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 54px rgba(17,31,31,.13);
}

.land-choice-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: auto;
}

.land-choice-icon svg {
    width: 50px;
    height: 50px;
    fill: none;
    stroke: #d1a95f;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.land-choice-card > p {
    margin: 35px 0 5px;
    color: #d3ab65;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.land-choice-card h2 {
    margin: 0;
    color: #fffdf7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 45px;
    font-weight: 600;
    line-height: 1;
}

.land-choice-card > span {
    display: block;
    max-width: 440px;
    margin-top: 12px;
    color: rgba(255,255,255,.61);
    font-size: 11px;
    line-height: 1.6;
}

.land-choice-card > strong {
    display: block;
    margin-top: 26px;
    color: #eed6a4;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
}

.land-choice-footnote {
    max-width: 600px;
    margin: 20px auto 0;
    color: #87908b;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}


@media (max-width: 700px) {

    .funnel-field-spaced,
    .funnel-conditional-spaced {
        margin-top: 11px;
    }

    .land-choice-page {
        padding: 38px 0 24px;
    }

    .land-choice-hero {
        margin-bottom: 23px;
        padding: 0 12px;
    }

    .land-choice-hero h1 {
        font-size: 42px;
    }

    .land-choice-hero > span {
        margin-top: 10px;
        font-size: 10px;
        line-height: 1.5;
    }

    .land-choice-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .land-choice-card {
        min-height: 215px;
        padding: 23px 22px;
        border-radius: 10px;
    }

    .land-choice-icon {
        width: 36px;
        height: 36px;
    }

    .land-choice-icon svg {
        width: 35px;
        height: 35px;
    }

    .land-choice-card > p {
        margin-top: 23px;
        font-size: 7px;
    }

    .land-choice-card h2 {
        font-size: 35px;
    }

    .land-choice-card > span {
        margin-top: 8px;
        font-size: 9px;
        line-height: 1.5;
    }

    .land-choice-card > strong {
        margin-top: 17px;
        font-size: 16px;
    }

    .land-choice-footnote {
        margin-top: 14px;
        padding: 0 14px;
        font-size: 7.5px;
    }

}


/* ========================================
   LAND CHOICE MOBILE HOTFIX V1
   Mobile-only: compact two-card decision UI
======================================== */

@media (max-width: 430px) {

    .land-choice-page {
        padding-top: 34px;
    }

    .land-choice-hero {
        margin-bottom: 18px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .land-choice-hero h1 {
        font-size: 39px;
        line-height: .96;
    }

    .land-choice-hero > span {
        max-width: 350px;
        margin-top: 9px;
        font-size: 9.5px;
        line-height: 1.48;
    }

    .land-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .land-choice-card {
        min-height: 178px;
        padding: 16px 13px 14px;
        border-radius: 9px;
    }

    .land-choice-icon {
        width: 31px;
        height: 31px;
        margin-bottom: 14px;
    }

    .land-choice-icon svg {
        width: 30px;
        height: 30px;
    }

    .land-choice-card > p {
        margin: 0 0 5px;
        font-size: 5.8px;
        line-height: 1.15;
        letter-spacing: .85px;
    }

    .land-choice-card h2 {
        font-size: 27px;
        line-height: .95;
        white-space: nowrap;
    }

    .land-choice-card > span {
        margin-top: 8px;
        font-size: 7.4px;
        line-height: 1.42;
    }

    .land-choice-card > strong {
        margin-top: auto;
        padding-top: 10px;
        font-size: 11.5px;
        line-height: 1.1;
    }

    .land-choice-footnote {
        margin-top: 12px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 7px;
        line-height: 1.4;
    }
}


/* Stack only on unusually narrow phones. */
@media (max-width: 340px) {

    .land-choice-grid {
        grid-template-columns: 1fr;
    }

    .land-choice-card {
        min-height: 165px;
    }

}


/* ========================================
   GLOBAL MOBILE FUNNEL INTRO COMPACT V1
   Applies to Buy / Sell / New Construction
   / Land Buyer / Land Seller.
   Desktop remains untouched.
======================================== */

@media (max-width: 430px) {

    .funnel-intro-inner {
        padding: 22px 16px 18px;
    }

    .funnel-eyebrow {
        margin-bottom: 8px;
        font-size: 6.8px;
        line-height: 1.2;
        letter-spacing: 1.25px;
    }

    .funnel-intro h1 {
        font-size: 31px;
        line-height: .94;
        letter-spacing: -.45px;
    }

    .funnel-lead {
        max-width: 350px;
        margin-top: 11px;
        font-size: 9.4px;
        line-height: 1.43;
    }

    .funnel-rule {
        width: 34px;
        margin: 15px 0 14px;
    }

    .funnel-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .funnel-benefit svg {
        width: 23px;
        height: 23px;
        margin-bottom: 6px;
    }

    .funnel-benefit strong {
        font-size: 12.5px;
        line-height: .98;
    }

    .funnel-benefit span {
        margin-top: 4px;
        font-size: 6.2px;
        line-height: 1.32;
    }

    .funnel-agent-note {
        padding-top: 15px;
    }

    .funnel-agent-note::before {
        margin-bottom: 10px;
    }

    .funnel-agent-note span {
        font-size: 5.8px;
        letter-spacing: .9px;
    }

    .funnel-agent-note strong {
        margin-top: 3px;
        font-size: 15px;
        line-height: 1;
    }

    .funnel-agent-note small {
        margin-top: 2px;
        font-size: 5.7px;
    }

    .funnel-form-panel {
        padding-top: 24px;
    }
}


/* ========================================
   HOME TEAM HERO — MOBILE PORTRAIT HOTFIX V1
   Direct/incognito homepage only.
   Gives David + Yelena more horizontal room
   and reduces the tall/narrow portrait crop.
   Desktop + tracked solo hero are untouched.
======================================== */

@media (max-width: 430px) {

    /* Wider portrait side, shorter overall hero */
    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 38% 62%;
        min-height: 252px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy {
        min-height: 252px;
        padding: 14px 7px 13px 11px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-kicker {
        margin-bottom: 8px;
        font-size: 5.1px;
        letter-spacing: .82px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 {
        font-size: 21px;
        line-height: .93;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-services {
        margin-top: 11px;
        margin-bottom: 6px;
        font-size: 11px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-support {
        max-width: 122px;
        font-size: 7px;
        line-height: 1.32;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 252px;
        height: 252px;
    }

    /*
       The shorter/wider portrait columns reduce the aggressive side crop.
       A tiny scale-down adds a little breathing room without creating
       obvious empty bars.
    */
    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-photo {
        object-fit: cover !important;
        object-position: center top !important;
        transform: scale(.96) !important;
        transform-origin: center top;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        background: #0d1d1b;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-band {
        min-height: 65px;
        padding: 11px 4px 6px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-label {
        margin-bottom: 3px;
        font-size: 4.3px;
        letter-spacing: .55px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: 9.5px;
        line-height: 1;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names a {
        margin-top: 2px;
        font-size: 5.8px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-brokerage {
        margin-top: 4px;
        font-size: 4.2px;
    }
}


/* Give 390px screens a touch more portrait room */
@media (max-width: 400px) {

    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 36% 64%;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy {
        padding-left: 10px;
        padding-right: 6px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 {
        font-size: 20px;
    }
}


/* ========================================
   HOME TEAM HERO — MOBILE ZOOM OUT HOTFIX V2
   Slightly more breathing room for David + Yelena
   on the direct/incognito homepage mobile hero.
   Keeps desktop and solo tracked hero untouched.
======================================== */
@media (max-width: 430px) {
    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 37% 63%;
        min-height: 246px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 246px;
        height: 246px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy {
        padding: 14px 8px 12px 11px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-photo {
        object-fit: cover !important;
        object-position: center 7% !important;
        transform: scale(.92) !important;
        transform-origin: center top;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-band {
        min-height: 61px;
        padding: 9px 4px 5px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-label {
        margin-bottom: 2px;
        font-size: 4.1px;
        letter-spacing: .52px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: 9px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names a {
        font-size: 5.6px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-brokerage {
        margin-top: 3px;
        font-size: 4px;
    }
}

@media (max-width: 400px) {
    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 35% 65%;
        min-height: 242px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 242px;
        height: 242px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-photo {
        transform: scale(.90) !important;
        object-position: center 8% !important;
    }
}


/* ========================================
   HOME TEAM HERO — SMALLER MOBILE PORTRAITS V1
   Direct/incognito homepage only.
   Less photo dominance + more natural framing.
   Desktop and tracked solo heroes untouched.
======================================== */

@media (max-width: 430px) {

    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 36% 64%;
        min-height: 226px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 226px;
        height: 226px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy {
        padding: 12px 6px 11px 10px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-kicker {
        margin-bottom: 7px;
        font-size: 4.8px;
        letter-spacing: .75px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 {
        font-size: 19px;
        line-height: .94;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-services {
        margin-top: 9px;
        margin-bottom: 5px;
        font-size: 10px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-support {
        max-width: 112px;
        font-size: 6.5px;
        line-height: 1.3;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        background: #0d1d1b;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-photo {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        object-position: center 3% !important;
        transform: scale(.86) !important;
        transform-origin: center top;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-band {
        min-height: 56px;
        padding: 8px 3px 4px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-label {
        margin-bottom: 2px;
        font-size: 3.8px;
        letter-spacing: .48px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: 8.5px;
        line-height: 1;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names a {
        margin-top: 2px;
        font-size: 5.2px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-brokerage {
        margin-top: 3px;
        font-size: 3.8px;
    }
}


@media (max-width: 400px) {

    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 34% 66%;
        min-height: 218px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 218px;
        height: 218px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 {
        font-size: 18px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-photo {
        object-position: center 4% !important;
        transform: scale(.84) !important;
    }
}


/* ========================================
   HOME TEAM HERO — DESKTOP PORTRAIT POLISH V1
   Direct/incognito homepage only.
   Slightly zooms David + Yelena out on desktop.
   Mobile and tracked solo hero remain untouched.
======================================== */

@media (min-width: 701px) {

    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        background: #0f1c1b;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-photo {
        object-fit: cover !important;
        object-position: center 2% !important;
        transform: scale(.94) !important;
        transform-origin: center top;
    }
}


/* ========================================
   HOME TEAM HERO — NAME FONT HOTFIX V1
   Direct/incognito homepage only.
   Makes David + Yelena names easier to read
   without changing portrait sizing or hero height.
======================================== */

/* Desktop / tablet */
@media (min-width: 701px) {
    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: 28px;
        line-height: 1;
    }
}

/* 390–430px mobile */
@media (max-width: 430px) {
    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: 11.5px;
        line-height: 1;
        white-space: nowrap;
    }
}

/* Small end of our mobile QA range */
@media (max-width: 400px) {
    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: 11px;
    }
}


/* ========================================
   HOME TEAM HERO — LOWER NAME POSITION V1
   Direct/incognito homepage only.
   Nudges the David/Yelena name + phone row
   slightly lower inside the bottom info band.
======================================== */

@media (min-width: 701px) {
    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names {
        transform: translateY(5px);
    }
}

@media (max-width: 430px) {
    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names {
        transform: translateY(3px);
    }
}


/* ========================================
   V4.3.0 — RESPONSIVE DENSITY PASS
   Goal: preserve the existing luxury design while
   reducing mobile/tablet scroll length substantially.
   Appended last intentionally so these rules are the
   final responsive authority for the public funnels.
======================================== */

/* ----------------------------------------
   TABLETS / LARGE MOBILE — <= 1024px
---------------------------------------- */
@media (max-width: 1024px) {
    .page-content {
        padding-bottom: 44px;
    }

    .options-section {
        padding-top: 46px;
    }

    .results-section {
        margin-top: 50px;
        padding-top: 43px;
        padding-bottom: 37px;
    }

    .marketing-section,
    .agents-section,
    .areas-section {
        padding-top: 58px;
    }

    .reviews-section {
        margin-top: 58px;
    }

    .marketing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketing-card {
        min-height: 190px;
        padding: 23px 19px;
    }

    .marketing-card h3 {
        min-height: 0;
        font-size: 23px;
    }

    .marketing-card p {
        margin-top: 10px;
        font-size: 11px;
        line-height: 1.5;
    }

    .agent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .agent-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
    }

    .agent-image-wrap {
        height: clamp(205px, 27vw, 275px);
        flex: 0 0 auto;
    }

    .agent-content {
        padding: 20px 18px 18px;
    }

    .area-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .area-card {
        min-height: clamp(175px, 23vw, 225px);
    }

    .area-copy {
        left: 15px;
        right: 12px;
        bottom: 13px;
    }

    .area-copy h3 {
        font-size: clamp(23px, 3vw, 29px);
        line-height: .98;
    }
}

/* ----------------------------------------
   PHONES + SMALL TABLETS — <= 820px
---------------------------------------- */
@media (max-width: 820px) {
    .page-content {
        padding: 13px 11px 38px;
    }

    /* Keep both homepage hero variants horizontal instead of stacking. */
    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 40% 60%;
        min-height: 330px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 330px;
        height: 330px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy {
        padding: 25px 17px 22px 22px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 {
        font-size: clamp(31px, 6.2vw, 47px);
        line-height: .94;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-kicker {
        margin-bottom: 10px;
        font-size: clamp(6.5px, 1.2vw, 9px);
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-services {
        margin-top: 15px;
        margin-bottom: 7px;
        font-size: clamp(15px, 2.8vw, 22px);
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-support {
        max-width: 260px;
        font-size: clamp(8.5px, 1.55vw, 12px);
        line-height: 1.42;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-team {
        border-top: 0;
        border-left: 1px solid rgba(255,255,255,.08);
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-band {
        min-height: 78px;
        padding: 14px 7px 8px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-label {
        margin-bottom: 4px;
        font-size: clamp(5px, 1vw, 7px);
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: clamp(12px, 2.2vw, 18px);
        white-space: nowrap;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names a {
        margin-top: 3px;
        font-size: clamp(7px, 1.3vw, 10px);
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-brokerage {
        margin-top: 4px;
        font-size: clamp(5px, .95vw, 7px);
    }

    .luxury-hero:has(.single-hero-agent) {
        grid-template-columns: 47% 53%;
        min-height: 330px;
    }

    .luxury-hero:has(.single-hero-agent) .hero-copy,
    .luxury-hero:has(.single-hero-agent) .hero-team,
    .luxury-hero:has(.single-hero-agent) .single-hero-agent {
        min-height: 330px;
        height: 330px;
    }

    .luxury-hero:has(.single-hero-agent) .hero-copy {
        padding: 24px 16px 21px 20px;
    }

    .luxury-hero:has(.single-hero-agent) h1 {
        font-size: clamp(32px, 6vw, 46px);
    }

    .luxury-hero:has(.single-hero-agent) .hero-services {
        margin-top: 16px;
        margin-bottom: 7px;
        font-size: clamp(16px, 2.8vw, 22px);
    }

    .luxury-hero:has(.single-hero-agent) .hero-support {
        max-width: 245px;
        font-size: clamp(9px, 1.5vw, 12px);
        line-height: 1.42;
    }

    .options-section {
        padding-top: 40px;
    }

    .option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 21px;
    }

    .option-card {
        min-height: clamp(112px, 20vw, 142px);
        padding: 15px 14px;
    }

    .option-icon {
        width: clamp(30px, 5vw, 38px);
        height: clamp(30px, 5vw, 38px);
        margin-bottom: 11px;
    }

    .option-card h3 {
        font-size: clamp(20px, 3.8vw, 27px);
        line-height: 1;
    }

    .option-card p {
        margin-top: 5px;
        font-size: clamp(8.5px, 1.45vw, 11px);
        line-height: 1.35;
    }

    .option-card-wide {
        grid-column: 1 / -1;
    }

    .option-wide-inner {
        min-height: 70px;
        grid-template-columns: 35px 1fr 24px;
        gap: 10px;
        padding: 11px 14px;
    }

    .results-section {
        margin-top: 40px;
        padding: 34px 8px 29px;
    }

    .results-heading {
        margin-bottom: 24px;
    }

    .results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .result {
        padding: 10px 5px 7px;
    }

    .result:not(:last-child)::after {
        top: 12%;
        right: 0;
        bottom: auto;
        left: auto;
        width: 1px;
        height: 76%;
    }

    .result strong {
        font-size: clamp(34px, 7vw, 49px);
        white-space: nowrap;
    }

    .result span {
        margin-top: 6px;
        font-size: clamp(6.5px, 1.1vw, 8.5px);
        line-height: 1.2;
    }

    .marketing-section,
    .agents-section,
    .areas-section {
        padding-top: 49px;
    }

    .marketing-header {
        margin-bottom: 21px;
    }

    .marketing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketing-card {
        min-height: clamp(135px, 24vw, 185px);
        padding: 14px 12px;
    }

    .marketing-card h3 {
        min-height: 0;
        font-size: clamp(15px, 2.7vw, 21px);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .marketing-card p {
        margin-top: 7px;
        font-size: clamp(8px, 1.25vw, 10.5px);
        line-height: 1.4;
    }

    .reviews-section {
        margin-top: 48px;
        padding: 39px 10px 24px;
    }

    .reviews-carousel {
        margin-top: 9px;
    }

    .review-stage {
        min-height: clamp(220px, 36vw, 280px);
    }

    .review-slide blockquote {
        font-size: clamp(21px, 4vw, 29px);
        line-height: 1.2;
    }

    .agent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 24px;
    }

    .agent-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
    }

    .agent-image-wrap {
        height: clamp(165px, 31vw, 235px);
        flex: 0 0 auto;
    }

    .agent-content {
        padding: 14px 12px 13px;
    }

    .agent-content h3 {
        font-size: clamp(18px, 3.2vw, 24px);
        line-height: 1;
        white-space: nowrap;
    }

    .agent-specialties {
        margin: 8px 0 10px;
        font-size: clamp(8px, 1.25vw, 10px);
        line-height: 1.45;
    }

    .agent-card-phone {
        margin: 0 0 11px;
        font-size: clamp(15px, 2.5vw, 19px);
        white-space: nowrap;
    }

    .agent-contact {
        padding: 9px 7px;
        font-size: 9px;
    }

    .agent-learn-more {
        display: none;
    }

    .area-heading {
        margin-bottom: 21px;
    }

    .area-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .area-card {
        min-height: clamp(125px, 27vw, 190px);
        border-radius: 6px;
    }

    .area-copy {
        left: 9px;
        right: 7px;
        bottom: 9px;
    }

    .area-copy h3 {
        font-size: clamp(17px, 3.6vw, 24px);
        line-height: .96;
        overflow-wrap: anywhere;
    }

    .area-copy p,
    .area-explore {
        display: none;
    }

    .more-areas-block {
        gap: 14px;
        margin-top: 16px;
        padding: 18px 14px;
    }

    .more-area-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .more-area-links a {
        min-height: 62px;
        padding: 9px 7px;
    }
}

/* ----------------------------------------
   STANDARD + LARGE PHONES — <= 430px
---------------------------------------- */
@media (max-width: 430px) {
    .site-header {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .page-content {
        padding: 10px 9px 32px;
    }

    .center-heading h2,
    .marketing-header h2,
    .results-heading h2,
    .reviews-heading h2 {
        font-size: 31px;
    }

    .gold-kicker {
        font-size: 7px;
        letter-spacing: 1.35px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 36% 64%;
        min-height: 226px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 226px;
        height: 226px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-photo {
        object-fit: cover !important;
        object-position: center 4% !important;
        transform: scale(.87) !important;
        transform-origin: center top;
    }

    .options-section {
        padding-top: 34px;
    }

    .option-grid {
        gap: 6px;
        margin-top: 17px;
    }

    .option-card {
        min-height: 106px;
        padding: 11px 10px;
    }

    .option-icon {
        width: 27px;
        height: 27px;
        margin-bottom: 8px;
    }

    .option-card h3 {
        font-size: 17px;
    }

    .option-card p {
        margin-top: 4px;
        font-size: 7.8px;
        line-height: 1.3;
    }

    .option-wide-inner {
        min-height: 60px;
        grid-template-columns: 28px 1fr 21px;
        gap: 8px;
        padding: 9px 11px;
    }

    .option-wide-copy h3 {
        font-size: 17px;
    }

    .option-wide-copy p {
        font-size: 7.8px;
    }

    .results-section {
        margin-top: 34px;
        padding: 29px 6px 24px;
    }

    .results-heading {
        margin-bottom: 20px;
    }

    .results-heading > span {
        font-size: 12px;
    }

    .result strong {
        font-size: 31px;
    }

    .result span {
        font-size: 5.9px;
    }

    .marketing-section,
    .agents-section,
    .areas-section {
        padding-top: 40px;
    }

    .marketing-header {
        margin-bottom: 17px;
    }

    .marketing-header h3 {
        margin-top: 6px;
        font-size: 18px;
    }

    .marketing-header > p:last-child {
        margin-top: 8px;
        font-size: 10px;
        line-height: 1.45;
    }

    /* Six seller points: 3 columns x 2 rows. Titles carry the message on phones. */
    .marketing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketing-card {
        min-height: 116px;
        padding: 10px 7px;
        justify-content: center;
    }

    .marketing-card h3 {
        min-height: 0;
        font-size: 13.2px;
        line-height: 1.02;
        text-align: center;
    }

    .marketing-card p {
        display: none;
    }

    .reviews-section {
        margin-top: 40px;
        padding: 33px 7px 20px;
    }

    .reviews-heading h2 {
        font-size: 31px;
    }

    .review-stage {
        min-height: 210px;
    }

    .review-slide {
        padding: 5px 4px;
    }

    .review-stars {
        margin-bottom: 10px;
    }

    .review-slide blockquote {
        font-size: 19px;
        line-height: 1.17;
    }

    .review-author {
        margin-top: 12px;
        font-size: 17px;
    }

    /* Meet David & Yelena: two compact cards side-by-side. */
    .agent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-top: 19px;
    }

    .agent-image-wrap {
        height: 145px;
    }

    .agent-content {
        padding: 10px 7px 9px;
    }

    .agent-content h3 {
        font-size: 15.5px;
        letter-spacing: -.18px;
        white-space: nowrap;
    }

    .agent-specialties,
    .agent-learn-more {
        display: none;
    }

    .agent-card-phone {
        margin: 8px 0 9px;
        font-size: 12.5px;
    }

    .agent-contact {
        padding: 8px 4px;
        font-size: 8px;
    }

    /* Six city photos: 3 columns x 2 rows. */
    .areas-section {
        padding-bottom: 10px;
    }

    .area-heading {
        margin-bottom: 17px;
    }

    .area-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .area-card {
        min-height: 118px;
        border-radius: 5px;
    }

    .area-copy {
        left: 7px;
        right: 5px;
        bottom: 7px;
    }

    .area-copy h3 {
        font-size: 15.5px;
        line-height: .94;
    }

    .more-areas-block {
        margin-top: 13px;
        padding: 16px 11px;
    }

    .more-areas-copy h3 {
        font-size: 22px;
    }

    .more-areas-copy > p:last-child {
        font-size: 8.5px;
    }

    .more-area-links a {
        min-height: 53px;
        padding: 8px 6px;
        font-size: 12px;
    }

    /* The large green intro on funnel pages gets noticeably shorter. */
    .funnel-intro-inner {
        padding: 17px 13px 14px;
    }

    .funnel-eyebrow {
        margin-bottom: 6px;
        font-size: 6px;
        letter-spacing: 1.05px;
    }

    .funnel-intro h1 {
        font-size: 28px;
        line-height: .93;
    }

    .funnel-lead {
        margin-top: 8px;
        font-size: 8.6px;
        line-height: 1.38;
    }

    .funnel-rule {
        margin: 11px 0 10px;
    }

    .funnel-benefits {
        gap: 5px;
    }

    .funnel-benefit svg {
        width: 20px;
        height: 20px;
        margin-bottom: 4px;
    }

    .funnel-benefit strong {
        font-size: 11px;
    }

    .funnel-benefit span {
        margin-top: 3px;
        font-size: 5.7px;
        line-height: 1.25;
    }

    .funnel-agent-note {
        padding-top: 11px;
    }

    .funnel-agent-note::before {
        margin-bottom: 7px;
    }

    .funnel-agent-note strong {
        font-size: 13px;
    }

    .funnel-form-panel {
        padding-top: 20px;
    }

    /* Land Buy/Sell decision cards stay side-by-side and tighter. */
    .land-choice-page {
        padding-top: 29px;
    }

    .land-choice-hero {
        margin-bottom: 16px;
    }

    .land-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .land-choice-card {
        min-height: 154px;
        padding: 13px 10px 11px;
    }

    .land-choice-icon {
        width: 27px;
        height: 27px;
        margin-bottom: 10px;
    }

    .land-choice-icon svg {
        width: 27px;
        height: 27px;
    }

    .land-choice-card h2 {
        font-size: 24px;
    }

    .land-choice-card > span {
        margin-top: 6px;
        font-size: 6.8px;
        line-height: 1.35;
    }
}

/* ----------------------------------------
   SMALL PHONES — <= 360px
   Keep the 3x2 layouts, just scale the labels.
---------------------------------------- */
@media (max-width: 360px) {
    .page-content {
        padding-left: 7px;
        padding-right: 7px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 34% 66%;
        min-height: 214px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 214px;
        height: 214px;
    }

    .option-card {
        min-height: 101px;
        padding: 10px 8px;
    }

    .option-card h3 {
        font-size: 16px;
    }

    .marketing-card {
        min-height: 110px;
        padding: 8px 5px;
    }

    .marketing-card h3 {
        font-size: 12px;
        line-height: 1.01;
    }

    .agent-image-wrap {
        height: 132px;
    }

    .agent-content {
        padding-left: 5px;
        padding-right: 5px;
    }

    .agent-content h3 {
        font-size: 13.8px;
    }

    .agent-card-phone {
        font-size: 11px;
    }

    .agent-contact {
        font-size: 7.3px;
    }

    .area-card {
        min-height: 108px;
    }

    .area-copy h3 {
        font-size: 14px;
    }
}


/* ========================================
   V4.3.1 — RESPONSIVE QA CORRECTIONS
   Manual QA fixes after checking 320–1024px:
   1) Smaller/cleaner joint hero typography on phones
   2) Shorter Meet-the-Team white info panels on 480–1024px
   3) Shorter mobile funnel fields
   4) Reviews reduced, but kept at least hero-like visual weight
======================================== */


/* ----------------------------------------
   TABLET / LARGE MOBILE — <= 1024px
---------------------------------------- */
@media (max-width: 1024px) {

    /* Keep portraits dominant instead of letting the white copy panel grow. */
    .agent-card {
        min-height: 0;
    }

    .agent-image-wrap {
        height: clamp(220px, 31vw, 315px);
        flex: 0 0 auto;
    }

    .agent-content {
        padding: 12px 14px 13px;
    }

    .agent-content h3 {
        font-size: clamp(19px, 2.7vw, 26px);
        line-height: 1;
    }

    .agent-specialties,
    .agent-learn-more {
        display: none;
    }

    .agent-card-phone {
        margin: 7px 0 9px;
        font-size: clamp(14px, 2.1vw, 18px);
        line-height: 1;
    }

    .agent-contact {
        padding: 8px 7px;
        font-size: 8.5px;
    }

    /* Reviews: smaller than before, but still a substantial feature block. */
    .reviews-section {
        margin-top: 46px;
        min-height: 340px;
        padding: 27px 16px 15px;
    }

    .reviews-heading p {
        margin-bottom: 3px;
        font-size: 8px;
        letter-spacing: 1.8px;
    }

    .reviews-heading h2 {
        font-size: clamp(31px, 4.5vw, 40px);
    }

    .reviews-carousel {
        grid-template-columns: 35px minmax(0, 1fr) 35px;
        margin-top: 5px;
    }

    .review-stage {
        min-height: 205px;
    }

    .review-slide {
        padding: 4px 10px;
    }

    .review-stars {
        margin-bottom: 8px;
        font-size: 12px;
        letter-spacing: 6px;
    }

    .review-slide blockquote {
        max-width: 720px;
        font-size: clamp(19px, 3vw, 25px);
        line-height: 1.17;
    }

    .review-author {
        margin-top: 9px;
        font-size: clamp(15px, 2.2vw, 19px);
    }

    .review-context {
        margin-top: 1px;
        font-size: 7.5px;
    }

    .review-arrow {
        width: 31px;
        height: 31px;
        font-size: 14px;
    }

    .review-counter {
        margin-top: 1px;
    }

    .review-counter #reviewCurrent {
        font-size: 17px;
    }
}


/* ----------------------------------------
   PHONE FUNNELS — <= 600px
   Shorter fields, while retaining 16px input
   text so iPhone Safari does not zoom on focus.
---------------------------------------- */
@media (max-width: 600px) {

    .funnel-form-panel {
        padding: 18px 15px 22px;
    }

    .funnel-form-heading {
        margin-bottom: 15px;
    }

    .funnel-form-section {
        padding: 14px 0;
    }

    .funnel-form-section:first-child {
        padding-top: 13px;
    }

    .funnel-section-heading {
        margin-bottom: 9px;
    }

    .funnel-field-grid {
        gap: 8px;
    }

    .funnel-field > span {
        margin-bottom: 4px;
        font-size: 8px;
    }

    .funnel-field input,
    .funnel-field select,
    .funnel-field textarea {
        min-height: 41px;
        margin-top: 5px;
        padding: 7px 10px;
        border-radius: 5px;
        font-size: 16px;
        line-height: 1.2;
    }

    .funnel-field textarea {
        min-height: 76px;
    }

    .funnel-submit-wrap {
        padding-top: 16px;
    }

    .funnel-submit {
        min-height: 46px;
        padding: 10px 13px;
    }
}


/* ----------------------------------------
   STANDARD + LARGE PHONES — <= 430px
---------------------------------------- */
@media (max-width: 430px) {

    /* Joint hero: give copy slightly more width and scale typography down. */
    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 39% 61%;
        min-height: 226px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 226px;
        height: 226px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy {
        justify-content: center;
        padding: 12px 6px 11px 11px;
        overflow: hidden;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-kicker {
        margin-bottom: 6px;
        font-size: clamp(5.5px, 1.6vw, 7px);
        letter-spacing: .85px;
        line-height: 1.15;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 {
        font-size: clamp(25.5px, 7.15vw, 30.5px);
        line-height: .90;
        letter-spacing: -.28px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 span {
        white-space: normal;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-services {
        margin: 10px 0 5px;
        font-size: clamp(12px, 3.45vw, 15px);
        line-height: 1.02;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-support {
        max-width: 132px;
        font-size: clamp(6.5px, 1.9vw, 8px);
        line-height: 1.27;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-band {
        min-height: 66px;
        padding: 10px 5px 6px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-label {
        margin-bottom: 3px;
        font-size: 5px;
        letter-spacing: .7px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names h2 {
        font-size: clamp(10.5px, 3vw, 13px);
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-names a {
        margin-top: 2px;
        font-size: clamp(5.8px, 1.7vw, 7.2px);
    }

    .luxury-hero:not(:has(.single-hero-agent)) .team-agent-brokerage {
        margin-top: 3px;
        font-size: 4.8px;
    }

    /* Reviews: approximately hero-height, never a tiny strip. */
    .reviews-section {
        margin-top: 35px;
        min-height: 226px;
        padding: 18px 6px 10px;
        border-radius: 10px;
    }

    .reviews-heading p {
        margin-bottom: 2px;
        font-size: 6.5px;
        letter-spacing: 1.3px;
    }

    .reviews-heading h2 {
        font-size: 27px;
        line-height: .98;
    }

    .reviews-carousel {
        grid-template-columns: 29px minmax(0, 1fr) 29px;
        margin-top: 1px;
    }

    .review-stage {
        min-height: 145px;
    }

    .review-slide {
        padding: 2px 4px;
    }

    .review-stars {
        margin-bottom: 5px;
        font-size: 10px;
        letter-spacing: 5px;
    }

    .review-slide blockquote {
        font-size: 16.5px;
        line-height: 1.12;
    }

    .review-author {
        margin-top: 7px;
        font-size: 14.5px;
    }

    .review-context {
        font-size: 6px;
        letter-spacing: .65px;
    }

    .review-arrow {
        width: 27px;
        height: 27px;
        font-size: 12px;
    }

    .review-counter {
        gap: 5px;
        margin-top: 0;
        font-size: 7px;
    }

    .review-counter #reviewCurrent {
        font-size: 14px;
    }

    /* Compact phone agent cards. */
    .agent-image-wrap {
        height: 145px;
    }

    .agent-content {
        padding: 9px 7px 8px;
    }

    .agent-content h3 {
        font-size: 15px;
    }

    .agent-card-phone {
        margin: 7px 0 8px;
        font-size: 12px;
    }

    .agent-contact {
        padding: 7px 4px;
        font-size: 7.5px;
    }
}


/* ----------------------------------------
   VERY SMALL PHONES — <= 360px
---------------------------------------- */
@media (max-width: 360px) {

    .luxury-hero:not(:has(.single-hero-agent)) {
        grid-template-columns: 40% 60%;
        min-height: 214px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-team,
    .luxury-hero:not(:has(.single-hero-agent)) .dual-hero-agents,
    .luxury-hero:not(:has(.single-hero-agent)) .hero-person {
        min-height: 214px;
        height: 214px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-copy {
        padding-left: 9px;
        padding-right: 4px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) h1 {
        font-size: clamp(23.5px, 7.25vw, 26px);
        line-height: .89;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-services {
        font-size: 11.5px;
    }

    .luxury-hero:not(:has(.single-hero-agent)) .hero-support {
        max-width: 120px;
        font-size: 6.2px;
    }

    .funnel-field input,
    .funnel-field select,
    .funnel-field textarea {
        min-height: 39px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .reviews-section {
        min-height: 214px;
        padding-top: 16px;
        padding-bottom: 9px;
    }

    .review-stage {
        min-height: 137px;
    }

    .review-slide blockquote {
        font-size: 15.5px;
    }
}


/* ========================================
   V4.3.2 — FINAL HOMEPAGE + AREA GUIDE DENSITY
   QA targets:
   - Homepage agent portrait crop corrected at 768 / 820 / 1024.
   - Forms intentionally untouched.
   - Area landing pages compressed ~40% on 320–820px.
   - Area facts = 2 x 2.
   - Area Buy / Sell / New Construction / Land actions = 2 x 2.
======================================== */


/* ----------------------------------------
   HOMEPAGE — KEEP THE SAME PORTRAIT RATIO
   AS THE GOOD <=600px VERSION
   Applies only above 600px through 1024px.
---------------------------------------- */
@media (min-width: 601px) and (max-width: 1024px) {

    .agent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-card {
        min-height: 0;
    }

    .agent-image-wrap {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        aspect-ratio: 1.27 / 1;
    }

    .agent-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .agent-content {
        padding: 11px 13px 12px;
    }

    .agent-content h3 {
        font-size: clamp(19px, 2.55vw, 25px);
        line-height: 1;
    }

    .agent-specialties,
    .agent-learn-more {
        display: none;
    }

    .agent-card-phone {
        margin: 7px 0 9px;
        font-size: clamp(14px, 2vw, 18px);
        line-height: 1;
    }

    .agent-contact {
        padding: 8px 7px;
        font-size: 8.5px;
    }
}


/* ========================================
   AREA / CITY LANDING PAGES — <= 820px
======================================== */
@media (max-width: 820px) {

    /* HERO — materially shorter, same luxury image treatment */
    .area-guide-hero {
        min-height: clamp(280px, 47vw, 385px);
        border-radius: 10px;
    }

    .area-guide-overlay {
        padding: clamp(20px, 4vw, 30px) clamp(16px, 3.5vw, 27px)
                 clamp(22px, 4.2vw, 32px);
    }

    .area-guide-kicker {
        margin-bottom: 6px;
        font-size: clamp(7px, 1.3vw, 9px);
        letter-spacing: 1.45px;
    }

    .area-guide-overlay h1 {
        font-size: clamp(44px, 10.5vw, 66px);
        line-height: .9;
    }

    .area-guide-tagline {
        max-width: 620px;
        margin-top: 9px;
        font-size: clamp(15px, 3.2vw, 21px);
        line-height: 1.18;
    }

    /* The old back-link offset was tied to the much taller hero. */
    .area-back-link {
        display: none;
    }


    /* INTRO — cut blank space and body scale while preserving readability */
    .area-guide-intro {
        padding: 34px 2px 0;
    }

    .area-guide-intro-copy {
        max-width: 760px;
    }

    .area-guide-intro-copy .gold-kicker {
        margin-bottom: 6px;
        font-size: 7.5px;
        letter-spacing: 1.45px;
    }

    .area-guide-intro-copy h2,
    .area-guide-cta h2 {
        font-size: clamp(31px, 6.7vw, 43px);
        line-height: .96;
    }

    .area-guide-intro-copy > p:last-child,
    .area-guide-cta-copy > p:last-child {
        margin-top: 11px;
        font-size: clamp(11px, 1.8vw, 13px);
        line-height: 1.55;
    }


    /* FOUR CITY FACTS — always 2 x 2 on requested sizes */
    .area-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 24px;
    }

    .area-highlight {
        min-width: 0;
        min-height: clamp(122px, 20vw, 158px);
        padding: clamp(13px, 2.3vw, 19px) clamp(11px, 2.1vw, 18px);
    }

    .area-highlight-accent {
        width: 20px;
        margin-bottom: 12px;
    }

    .area-highlight h3 {
        font-size: clamp(18px, 3.4vw, 24px);
        line-height: 1;
        overflow-wrap: anywhere;
    }

    .area-highlight p {
        margin-top: 7px;
        font-size: clamp(9.2px, 1.45vw, 11px);
        line-height: 1.42;
        overflow-wrap: anywhere;
    }


    /* CTA BLOCK — smaller overall */
    .area-guide-cta {
        margin-top: 36px;
        padding: clamp(21px, 3.5vw, 29px) clamp(14px, 3vw, 24px);
        border-radius: 10px;
    }

    .area-guide-cta .gold-kicker {
        margin-bottom: 6px;
        font-size: 7.5px;
        letter-spacing: 1.4px;
    }

    .area-guide-cta-copy > p:last-child {
        max-width: 680px;
    }


    /* BUY / SELL / NEW CONSTRUCTION / LAND — 2 x 2 */
    .area-guide-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 20px;
    }

    .area-action-card {
        min-width: 0;
        min-height: clamp(82px, 14vw, 105px);
        align-items: center;
        gap: 7px;
        padding: clamp(10px, 1.9vw, 14px);
        border-radius: 7px;
    }

    .area-action-label {
        margin-bottom: 4px;
        font-size: clamp(6px, 1vw, 7.5px);
        letter-spacing: .85px;
    }

    .area-action-card h3 {
        font-size: clamp(17px, 3.1vw, 22px);
        line-height: .98;
        overflow-wrap: anywhere;
    }

    /* The title itself communicates the action; removing this paragraph
       is what lets the 2x2 grid stay readable rather than cramped. */
    .area-action-card p {
        display: none;
    }

    .area-action-card > strong {
        font-size: clamp(19px, 3.3vw, 25px);
    }

    .area-guide-photo-credit {
        margin-top: 8px;
    }
}


/* ----------------------------------------
   SMALL / STANDARD PHONES — <= 430px
---------------------------------------- */
@media (max-width: 430px) {

    .area-guide-hero {
        min-height: 278px;
    }

    .area-guide-overlay {
        padding: 17px 15px 20px;
    }

    .area-guide-overlay h1 {
        font-size: clamp(42px, 13vw, 54px);
    }

    .area-guide-tagline {
        margin-top: 7px;
        font-size: clamp(14px, 4.4vw, 18px);
    }

    .area-guide-intro {
        padding-top: 29px;
    }

    .area-guide-intro-copy h2,
    .area-guide-cta h2 {
        font-size: clamp(29px, 9vw, 37px);
    }

    .area-guide-intro-copy > p:last-child,
    .area-guide-cta-copy > p:last-child {
        margin-top: 9px;
        font-size: 10.5px;
        line-height: 1.5;
    }

    .area-highlights {
        margin-top: 20px;
    }

    .area-highlight {
        min-height: 118px;
        padding: 12px 10px;
    }

    .area-highlight-accent {
        width: 18px;
        margin-bottom: 10px;
    }

    .area-highlight h3 {
        font-size: clamp(17px, 5.2vw, 20px);
    }

    .area-highlight p {
        margin-top: 6px;
        font-size: clamp(8.8px, 2.7vw, 10px);
        line-height: 1.38;
    }

    .area-guide-cta {
        margin-top: 30px;
        padding: 19px 11px;
    }

    .area-guide-actions {
        gap: 6px;
        margin-top: 16px;
    }

    .area-action-card {
        min-height: 78px;
        padding: 10px 9px;
    }

    .area-action-card h3 {
        font-size: clamp(16px, 5vw, 19px);
    }

    .area-action-card > strong {
        font-size: 19px;
    }
}


/* ----------------------------------------
   VERY SMALL PHONES — <= 360px
---------------------------------------- */
@media (max-width: 360px) {

    .area-guide-hero {
        min-height: 264px;
    }

    .area-guide-overlay h1 {
        font-size: 41px;
    }

    .area-guide-tagline {
        font-size: 14px;
    }

    .area-highlight {
        min-height: 115px;
        padding: 11px 9px;
    }

    .area-highlight h3 {
        font-size: 16.5px;
    }

    .area-highlight p {
        font-size: 8.5px;
    }

    .area-action-card {
        min-height: 74px;
        padding: 9px 8px;
    }

    .area-action-label {
        font-size: 5.8px;
    }

    .area-action-card h3 {
        font-size: 15.5px;
    }

    .area-action-card > strong {
        font-size: 18px;
    }
}


/* ========================================
   V4.3.3 — CITY PAGE FINAL DENSITY
   - City hero photos ~25% shorter at <=820px
   - Tighter vertical rhythm so users reach actions/footer faster
   - Shared area-guide classes = applies to every city page
======================================== */

@media (max-width: 820px) {

    /* ~25% shorter than V4.3.2 */
    .area-guide-hero {
        min-height: clamp(210px, 35vw, 290px);
    }

    /* Keep title readable in the shallower image. */
    .area-guide-overlay {
        padding: clamp(14px, 2.7vw, 21px)
                 clamp(14px, 3vw, 23px)
                 clamp(16px, 3vw, 23px);
    }

    .area-guide-kicker {
        margin-bottom: 4px;
    }

    .area-guide-overlay h1 {
        font-size: clamp(38px, 8.5vw, 56px);
        line-height: .9;
    }

    .area-guide-tagline {
        margin-top: 6px;
        font-size: clamp(13px, 2.7vw, 18px);
        line-height: 1.14;
    }

    /* Tighten the run from hero → intro → facts. */
    .area-guide-intro {
        padding-top: 25px;
    }

    .area-guide-intro-copy .gold-kicker {
        margin-bottom: 5px;
    }

    .area-guide-intro-copy > p:last-child {
        margin-top: 8px;
    }

    .area-highlights {
        margin-top: 17px;
    }

    .area-highlight {
        min-height: clamp(108px, 17vw, 136px);
        padding: clamp(11px, 1.8vw, 15px)
                 clamp(10px, 1.8vw, 15px);
    }

    .area-highlight-accent {
        margin-bottom: 9px;
    }

    .area-highlight p {
        margin-top: 5px;
    }

    /* Pull the CTA upward and tighten its internal spacing. */
    .area-guide-cta {
        margin-top: 24px;
        padding: clamp(17px, 2.8vw, 23px)
                 clamp(12px, 2.5vw, 20px);
    }

    .area-guide-cta .gold-kicker {
        margin-bottom: 4px;
    }

    .area-guide-cta-copy > p:last-child {
        margin-top: 8px;
    }

    /* Keep 2x2 actions close together without looking cramped. */
    .area-guide-actions {
        gap: 5px;
        margin-top: 13px;
    }

    .area-action-card {
        min-height: clamp(72px, 11vw, 88px);
        gap: 5px;
        padding: clamp(8px, 1.5vw, 11px);
    }

    .area-action-label {
        margin-bottom: 3px;
    }

    .area-guide-photo-credit {
        margin-top: 6px;
    }
}


@media (max-width: 430px) {

    /* Roughly 25% shorter than the previous 278px phone hero. */
    .area-guide-hero {
        min-height: 208px;
    }

    .area-guide-overlay {
        padding: 13px 12px 15px;
    }

    .area-guide-overlay h1 {
        font-size: clamp(35px, 10.8vw, 44px);
    }

    .area-guide-tagline {
        margin-top: 5px;
        font-size: clamp(12px, 3.7vw, 15px);
    }

    .area-guide-intro {
        padding-top: 22px;
    }

    .area-guide-intro-copy h2,
    .area-guide-cta h2 {
        font-size: clamp(27px, 8.2vw, 34px);
    }

    .area-guide-intro-copy > p:last-child,
    .area-guide-cta-copy > p:last-child {
        margin-top: 7px;
        line-height: 1.45;
    }

    .area-highlights {
        margin-top: 15px;
    }

    .area-highlight {
        min-height: 103px;
        padding: 10px 9px;
    }

    .area-highlight-accent {
        margin-bottom: 8px;
    }

    .area-highlight p {
        margin-top: 4px;
    }

    .area-guide-cta {
        margin-top: 20px;
        padding: 16px 10px;
    }

    .area-guide-actions {
        gap: 5px;
        margin-top: 11px;
    }

    .area-action-card {
        min-height: 68px;
        padding: 8px 7px;
    }
}


@media (max-width: 360px) {

    .area-guide-hero {
        min-height: 198px;
    }

    .area-guide-overlay h1 {
        font-size: 34px;
    }

    .area-guide-tagline {
        font-size: 11.5px;
    }

    .area-highlight {
        min-height: 100px;
    }

    .area-action-card {
        min-height: 66px;
    }
}


/* ========================================
   V4.4 — FINAL PUBLIC FORM SYSTEM
   Shared across Buy / Sell / Land / New Construction
   and every public funnel using .funnel-* classes.

   Benchmarked target:
   - phone controls: 44px minimum
   - tablet controls: 44–46px
   - desktop controls: 46px
   - mobile text inputs: 16px to avoid iOS focus zoom
======================================== */


/* ----------------------------------------
   ALL FORM PAGES — TYPE + CONTROL RHYTHM
---------------------------------------- */

.funnel-form-heading > p,
.funnel-eyebrow,
.funnel-field > span,
.funnel-section-heading > p,
.funnel-submit-wrap > p {
    font-family: "Montserrat", Arial, sans-serif;
}

.funnel-form-heading h2,
.funnel-section-heading > span,
.funnel-submit span,
.funnel-benefit strong,
.funnel-agent-note strong {
    font-family: "Cormorant Garamond", Georgia, serif;
}

/* Keep the right panel polished but less visually bulky. */
.funnel-form-panel {
    padding: 46px 50px 43px;
}

.funnel-form-heading {
    margin-bottom: 27px;
}

.funnel-form-heading > p {
    margin-bottom: 6px;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 1.65px;
}

.funnel-form-heading h2 {
    font-size: 40px;
    line-height: .98;
    letter-spacing: -.25px;
}

.funnel-form-heading > span {
    max-width: 570px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
}

/* Form sections: enough separation to scan, no dead vertical space. */
.funnel-form-section {
    padding: 23px 0;
}

.funnel-form-section:first-child {
    padding-top: 21px;
}

.funnel-section-heading {
    margin-bottom: 15px;
}

.funnel-section-heading > span {
    font-size: 20px;
    line-height: 1;
}

.funnel-section-heading > p {
    font-size: 9px;
    line-height: 1.35;
}

/* Professional default field spacing. */
.funnel-field-grid {
    gap: 13px;
}

.funnel-field > span {
    margin-bottom: 5px;
    color: #45534e;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .05px;
}

/* Desktop: compact professional field, not oversized luxury-form field. */
.funnel-field input,
.funnel-field select,
.funnel-field textarea {
    min-height: 46px;
    padding: 10px 13px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.3;
}

.funnel-field textarea {
    min-height: 102px;
    padding-top: 11px;
    line-height: 1.5;
}

.funnel-field input::placeholder,
.funnel-field textarea::placeholder {
    color: #9ca39f;
    opacity: 1;
}

/* More intentional interaction state without making it flashy. */
.funnel-field input:focus,
.funnel-field select:focus,
.funnel-field textarea:focus {
    border-color: rgba(174,132,70,.78);
    box-shadow: 0 0 0 2px rgba(174,132,70,.10);
}

/* Conditional follow-up questions should feel part of the form,
   not like a second giant card. */
.funnel-conditional {
    padding: 11px 12px;
    border-radius: 5px;
}

/* CTA: prominent, but not taller than necessary. */
.funnel-submit-wrap {
    padding-top: 22px;
}

.funnel-submit {
    min-height: 52px;
    padding: 12px 17px;
    border-radius: 6px;
}

.funnel-submit span {
    font-size: 21px;
    line-height: 1;
}

.funnel-submit strong {
    font-size: 25px;
}

.funnel-submit-wrap > p {
    margin-top: 8px;
    font-size: 8px;
    line-height: 1.35;
}


/* ----------------------------------------
   TABLET / NARROW DESKTOP — <= 1024px
---------------------------------------- */
@media (max-width: 1024px) {

    .funnel-form-panel {
        padding: 34px 29px 32px;
    }

    .funnel-form-heading {
        margin-bottom: 22px;
    }

    .funnel-form-heading h2 {
        font-size: clamp(34px, 4.8vw, 39px);
    }

    .funnel-form-heading > span {
        font-size: 11px;
    }

    .funnel-form-section {
        padding: 19px 0;
    }

    .funnel-section-heading {
        margin-bottom: 12px;
    }

    .funnel-field-grid {
        gap: 11px;
    }

    .funnel-field input,
    .funnel-field select,
    .funnel-field textarea {
        min-height: 45px;
        padding: 9px 12px;
        font-size: 14px;
    }

    .funnel-field textarea {
        min-height: 92px;
    }

    .funnel-submit {
        min-height: 50px;
    }
}


/* ----------------------------------------
   PHONE / SMALL TABLET — <= 700px
---------------------------------------- */
@media (max-width: 700px) {

    .funnel-form-panel {
        padding: 21px 16px 23px;
    }

    .funnel-form-heading {
        margin-bottom: 16px;
    }

    .funnel-form-heading > p {
        margin-bottom: 4px;
        font-size: 7.5px;
        letter-spacing: 1.35px;
    }

    .funnel-form-heading h2 {
        font-size: clamp(30px, 8.3vw, 35px);
        line-height: .96;
    }

    .funnel-form-heading > span {
        margin-top: 6px;
        font-size: 10px;
        line-height: 1.42;
    }

    .funnel-form-section {
        padding: 15px 0;
    }

    .funnel-form-section:first-child {
        padding-top: 14px;
    }

    .funnel-section-heading {
        display: block;
        margin-bottom: 9px;
    }

    .funnel-section-heading > span {
        font-size: 18px;
    }

    .funnel-section-heading > p {
        margin-top: 2px;
        font-size: 7.5px;
        line-height: 1.3;
    }

    .funnel-field-grid {
        gap: 9px;
    }

    .funnel-field > span {
        margin-bottom: 4px;
        font-size: 8.5px;
        line-height: 1.25;
    }

    /* FINAL MOBILE TARGET:
       44px tall, 16px text. Comfortable tapping without giant fields. */
    .funnel-field input,
    .funnel-field select,
    .funnel-field textarea {
        min-height: 44px;
        margin: 0;
        padding: 8px 11px;
        border-radius: 6px;
        font-size: 16px;
        line-height: 1.25;
    }

    .funnel-field textarea {
        min-height: 82px;
        padding-top: 9px;
        line-height: 1.4;
    }

    .funnel-conditional {
        padding: 9px 10px;
    }

    .funnel-submit-wrap {
        padding-top: 17px;
    }

    .funnel-submit {
        min-height: 48px;
        padding: 10px 14px;
    }

    .funnel-submit span {
        font-size: 20px;
    }

    .funnel-submit strong {
        font-size: 23px;
    }

    .funnel-submit-wrap > p {
        margin-top: 7px;
        font-size: 7.5px;
    }
}


/* ----------------------------------------
   VERY SMALL PHONES — <= 360px
   Do NOT make controls shorter than 44px.
---------------------------------------- */
@media (max-width: 360px) {

    .funnel-form-panel {
        padding-left: 13px;
        padding-right: 13px;
    }

    .funnel-form-heading h2 {
        font-size: 29px;
    }

    .funnel-field-grid {
        gap: 8px;
    }

    .funnel-field input,
    .funnel-field select,
    .funnel-field textarea {
        min-height: 44px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 16px;
    }

    .funnel-field textarea {
        min-height: 80px;
    }

    .funnel-submit {
        min-height: 48px;
    }
}


/* ----------------------------------------
   ACCESSIBILITY / INPUT QUALITY
---------------------------------------- */

/* Give keyboard users the same clear state as touch/mouse users. */
.funnel-submit:focus-visible,
.funnel-field input:focus-visible,
.funnel-field select:focus-visible,
.funnel-field textarea:focus-visible {
    outline: 2px solid rgba(174,132,70,.62);
    outline-offset: 2px;
}

/* Prevent browser-native select text from looking vertically off-center. */
.funnel-field select {
    line-height: 1.25;
}

/* Keep autofill from wrecking the cream/white visual system in WebKit. */
.funnel-field input:-webkit-autofill,
.funnel-field input:-webkit-autofill:hover,
.funnel-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #172825;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s ease-out 0s;
}


/* ========================================
   V4.4.1 — AGENT CONTACT ACTION HOTFIX
   Clear mobile-first Call + Text actions.
======================================== */

.agent-contact-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.agent-contact-actions .agent-contact {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 8px;
    margin: 0;
    border-radius: 5px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .75px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
}

.agent-contact-call {
    background: var(--ink);
    color: #fff;
}

.agent-contact-text {
    border: 1px solid rgba(17,31,31,.30);
    background: transparent;
    color: var(--ink);
}

.agent-contact-call:hover {
    background: #1b322e;
}

.agent-contact-text:hover {
    border-color: rgba(191,152,85,.72);
    background: rgba(191,152,85,.08);
}

.agent-contact-actions .agent-contact:focus-visible {
    outline: 2px solid rgba(174,132,70,.62);
    outline-offset: 2px;
}


/* Tablet / large mobile cards */
@media (max-width: 1024px) {

    .agent-contact-actions {
        gap: 6px;
    }

    .agent-contact-actions .agent-contact {
        min-height: 36px;
        padding: 8px 6px;
        font-size: 8px;
        letter-spacing: .6px;
    }
}


/* Phone cards stay compact even when two agent cards sit side-by-side. */
@media (max-width: 430px) {

    .agent-contact-actions {
        gap: 4px;
    }

    .agent-contact-actions .agent-contact {
        min-height: 31px;
        padding: 7px 3px;
        border-radius: 4px;
        font-size: 7px;
        letter-spacing: .45px;
    }
}


@media (max-width: 360px) {

    .agent-contact-actions {
        gap: 3px;
    }

    .agent-contact-actions .agent-contact {
        min-height: 30px;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 6.7px;
        letter-spacing: .35px;
    }
}


/* ========================================
   PRIVATE CRM — LEAD STATUS WORKFLOW V1
======================================== */

/* 6 dashboard summary cards now fit evenly. */
.leads-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Search + type + agent + source + status. */
.leads-controls {
    grid-template-columns:
        minmax(240px, 1.55fr)
        repeat(4, minmax(135px, .62fr));
}

/* Status badge */
.lead-badge-status {
    border: 1px solid rgba(17,31,31,.10);
}

.lead-badge-status-new {
    background: #f3e5c2;
    color: #73531f;
}

.lead-badge-status-contacted {
    background: #e1e9e8;
    color: #405b57;
}

.lead-badge-status-appointment {
    background: #e7e3ed;
    color: #564b68;
}

.lead-badge-status-active-client {
    background: #dfe9df;
    color: #385541;
}

.lead-badge-status-under-contract {
    background: #d9e5dd;
    color: #2d5340;
}

.lead-badge-status-closed {
    background: #e5e3df;
    color: #555c59;
}

/* Compact status editor sits directly below the identity badges. */
.lead-status-form {
    width: min(100%, 220px);
    margin-top: 9px;
}

.lead-status-form label {
    display: block;
}

.lead-status-form label > span {
    display: block;
    margin-bottom: 4px;
    color: #8a928e;
    font-size: 6.5px;
    font-weight: 600;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.lead-status-select {
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 29px 0 10px;
    border: 1px solid rgba(17,31,31,.14);
    border-radius: 6px;
    background: #fbf8f1;
    color: #263934;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}

.lead-status-select:hover,
.lead-status-select:focus {
    border-color: rgba(184,142,77,.68);
    box-shadow: 0 0 0 2px rgba(184,142,77,.08);
}

.lead-status-select:disabled {
    cursor: wait;
    opacity: .62;
}


/* -----------------------------
   TABLET / NARROW DESKTOP
----------------------------- */
@media (max-width: 1100px) {

    .leads-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leads-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leads-control:first-child {
        grid-column: 1 / -1;
    }
}


/* -----------------------------
   MOBILE DASHBOARD
----------------------------- */
@media (max-width: 700px) {

    .leads-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leads-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leads-control:first-child {
        grid-column: 1 / -1;
    }

    /* Status filter gets a full clean row on narrow screens. */
    .leads-control:last-child {
        grid-column: 1 / -1;
    }

    .lead-status-form {
        width: min(100%, 190px);
        margin-top: 7px;
    }

    .lead-status-form label > span {
        margin-bottom: 3px;
        font-size: 5.8px;
    }

    .lead-status-select {
        height: 32px;
        padding-left: 8px;
        font-size: 8px;
    }
}


@media (max-width: 430px) {

    .leads-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leads-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .leads-control:first-child,
    .leads-control:last-child {
        grid-column: 1 / -1;
    }

    .lead-status-form {
        width: 100%;
        max-width: 175px;
    }

    .lead-status-select {
        height: 31px;
        font-size: 7.6px;
    }
}

/* ========================================
   PRIVATE CRM — READABILITY / ACCESSIBILITY V1
   Larger type, stronger contrast, larger controls.
   Scoped to the private leads dashboard only.
======================================== */

body.leads-dashboard-body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

.leads-app {
    width: min(1580px, calc(100% - 36px));
    padding-top: 26px;
}

.leads-brand {
    font-size: 34px;
}

.leads-private-label {
    padding: 9px 13px;
    color: #725426;
    font-size: 11px;
    letter-spacing: .85px;
}

.leads-heading {
    padding-top: 46px;
    padding-bottom: 32px;
}

.leads-heading-copy p {
    font-size: 12px;
}

.leads-heading-copy h1 {
    font-size: 58px;
    line-height: 1;
}

.leads-heading-copy span {
    max-width: 760px;
    margin-top: 14px;
    color: #4f5d58;
    font-size: 15px;
    line-height: 1.7;
}

.leads-home-link {
    font-size: 20px;
}

.leads-summary {
    gap: 12px;
    margin-bottom: 22px;
}

.leads-stat {
    min-height: 126px;
    padding: 23px 22px;
    background: rgba(255,255,255,.74);
}

.leads-stat strong {
    font-size: 42px;
}

.leads-stat span {
    margin-top: 10px;
    color: #53615c;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .7px;
}

.leads-controls {
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255,255,255,.66);
}

.leads-control input,
.leads-control select {
    height: 52px;
    padding: 0 15px;
    border-color: rgba(17,31,31,.20);
    font-size: 14px;
    font-weight: 500;
}

.leads-results-meta {
    margin-bottom: 14px;
    color: #52605b;
    font-size: 12px;
}

.leads-list {
    gap: 14px;
}

.lead-card {
    background: rgba(255,255,255,.82);
    border-color: rgba(17,31,31,.14);
    box-shadow: 0 7px 22px rgba(17,31,31,.035);
}

.lead-card-main {
    grid-template-columns: minmax(260px, 1.35fr) minmax(220px, .95fr) minmax(250px, 1fr) auto;
    gap: 26px;
    padding: 25px 26px;
}

.lead-id {
    color: #6d7773;
    font-size: 10px;
    letter-spacing: .9px;
}

.lead-person h2 {
    margin-top: 8px;
    font-size: 33px;
    line-height: 1.05;
}

.lead-badges {
    gap: 6px;
}

.lead-badge {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: .35px;
}

.lead-contact {
    gap: 8px;
}

.lead-contact a {
    color: #1f332e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-color: rgba(184,142,77,.35);
    text-underline-offset: 3px;
}

.lead-quickfacts {
    gap: 13px 18px;
}

.lead-fact span {
    margin-bottom: 5px;
    color: #5d6a65;
    font-size: 10px;
    letter-spacing: .6px;
}

.lead-fact strong {
    color: #263934;
    font-size: 13px;
    line-height: 1.45;
}

.lead-expand {
    width: 46px;
    height: 46px;
    font-size: 27px;
}

.lead-details {
    padding: 0 26px 28px;
}

.lead-detail-grid {
    gap: 15px;
    padding-top: 23px;
}

.lead-detail {
    min-height: 86px;
    padding: 16px;
    background: #f1ece3;
}

.lead-detail span {
    margin-bottom: 7px;
    color: #5e6a66;
    font-size: 10px;
    letter-spacing: .65px;
}

.lead-detail strong,
.lead-detail p {
    color: #253833;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.lead-status-form {
    width: min(100%, 245px);
    margin-top: 12px;
}

.lead-status-form label > span {
    margin-bottom: 5px;
    color: #5d6965;
    font-size: 10px;
    letter-spacing: .65px;
}

.lead-status-select {
    height: 44px;
    padding: 0 34px 0 12px;
    border-color: rgba(17,31,31,.22);
    font-size: 13px;
}

.leads-empty h3 {
    font-size: 34px;
}

.leads-empty p {
    font-size: 13px;
}

/* Keep the dashboard spacious on tablets instead of compressing tiny text. */
@media (max-width: 1200px) {
    .leads-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leads-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leads-control:first-child {
        grid-column: 1 / -1;
    }

    .lead-card-main {
        grid-template-columns: minmax(250px, 1.2fr) 1fr auto;
        gap: 20px;
    }

    .lead-quickfacts {
        grid-column: 1 / 3;
    }
}

/* Phone accessibility pass: readable type wins over maximum density. */
@media (max-width: 700px) {
    .leads-app {
        width: calc(100% - 22px);
        padding: 10px 0 34px;
    }

    .leads-topbar {
        gap: 10px;
        padding: 13px 0 17px;
    }

    .leads-brand {
        font-size: 27px;
    }

    .leads-private-label {
        padding: 7px 9px;
        font-size: 9px;
        line-height: 1.25;
        letter-spacing: .5px;
    }

    .leads-heading {
        gap: 12px;
        padding: 28px 0 22px;
    }

    .leads-heading-copy p {
        font-size: 10px;
    }

    .leads-heading-copy h1 {
        font-size: 43px;
    }

    .leads-heading-copy span {
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.6;
    }

    .leads-home-link {
        font-size: 18px;
    }

    .leads-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    .leads-stat {
        min-height: 94px;
        padding: 16px 14px;
    }

    .leads-stat strong {
        font-size: 34px;
    }

    .leads-stat span {
        margin-top: 7px;
        font-size: 10px;
        line-height: 1.3;
    }

    .leads-controls {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 16px;
        padding: 10px;
    }

    .leads-control:first-child,
    .leads-control:last-child {
        grid-column: auto;
    }

    .leads-control input,
    .leads-control select {
        height: 48px;
        padding: 0 12px;
        font-size: 14px;
    }

    .leads-results-meta {
        gap: 10px;
        margin-bottom: 10px;
        font-size: 11px;
    }

    .lead-card-main {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 13px;
        padding: 18px;
    }

    .lead-id {
        font-size: 9px;
    }

    .lead-person h2 {
        margin: 6px 0 5px;
        font-size: 29px;
    }

    .lead-badge {
        min-height: 26px;
        padding: 5px 8px;
        font-size: 9px;
    }

    .lead-status-form {
        width: 100%;
        max-width: 230px;
        margin-top: 10px;
    }

    .lead-status-form label > span {
        font-size: 9px;
    }

    .lead-status-select {
        height: 44px;
        padding-left: 11px;
        font-size: 13px;
    }

    .lead-contact,
    .lead-quickfacts {
        grid-column: 1 / -1;
    }

    .lead-contact {
        gap: 7px;
    }

    .lead-contact a {
        font-size: 14px;
    }

    .lead-quickfacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
        padding-top: 4px;
    }

    .lead-fact span {
        font-size: 9px;
    }

    .lead-fact strong {
        font-size: 13px;
    }

    .lead-expand {
        width: 44px;
        height: 44px;
        font-size: 25px;
    }

    .lead-details {
        padding: 0 18px 20px;
    }

    .lead-detail-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        padding-top: 16px;
    }

    .lead-detail {
        min-height: 0;
        padding: 14px;
    }

    .lead-detail span {
        font-size: 9px;
    }

    .lead-detail strong,
    .lead-detail p {
        font-size: 13px;
        line-height: 1.55;
    }

    .lead-detail-notes {
        grid-column: auto;
    }
}

@media (max-width: 430px) {
    .leads-app {
        width: calc(100% - 18px);
    }

    .leads-topbar-actions {
        gap: 7px;
    }

    .leads-private-label {
        max-width: 124px;
        text-align: center;
        white-space: normal;
    }

    .leads-heading-copy h1 {
        font-size: 40px;
    }

    .leads-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .leads-stat {
        min-height: 90px;
        padding: 14px 12px;
    }

    .leads-stat strong {
        font-size: 32px;
    }

    .leads-stat span {
        font-size: 9.5px;
    }

    .lead-card-main {
        padding: 16px;
    }

    .lead-person h2 {
        font-size: 28px;
    }

    .lead-quickfacts {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lead-expand,
    .lead-card,
    .lead-status-select,
    .leads-logout-link {
        transition: none !important;
    }
}

/* ========================================
   PRIVATE CRM — DEVICE OPTIMIZATION V2
   iPad 13" + iPhone 16/17 Pro
   Keeps desktop roomy, compacts tablet/mobile,
   and makes lead details visible without "+"
======================================== */

/* ---- iPad Pro 13 landscape / narrow desktop ---- */
@media (max-width: 1400px) {
    .leads-app {
        width: min(1320px, calc(100% - 28px));
        padding-top: 18px;
    }

    .leads-heading {
        padding: 34px 0 22px;
    }

    .leads-heading-copy h1 {
        font-size: 50px;
    }

    .leads-heading-copy span {
        max-width: 700px;
        font-size: 14px;
    }

    /* Smaller summary tiles without sacrificing legibility. */
    .leads-summary {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 15px;
    }

    .leads-stat {
        min-height: 88px;
        padding: 14px 15px;
    }

    .leads-stat strong {
        font-size: 31px;
    }

    .leads-stat span {
        margin-top: 6px;
        font-size: 8.5px;
        line-height: 1.2;
        letter-spacing: .45px;
    }

    /* Compact all filters into one useful toolbar on large iPad. */
    .leads-controls {
        grid-template-columns: minmax(240px, 1.45fr) repeat(4, minmax(130px, .72fr));
        gap: 8px;
        padding: 10px;
        margin-bottom: 15px;
    }

    .leads-control:first-child,
    .leads-control:last-child {
        grid-column: auto;
    }

    .leads-control input,
    .leads-control select {
        height: 43px;
        padding: 0 11px;
        font-size: 11px;
    }

    .leads-results-meta {
        margin-bottom: 9px;
        font-size: 10px;
    }

    /* Lead card header becomes tighter and easier to scan. */
    .lead-card-main {
        grid-template-columns: minmax(235px, 1.25fr) minmax(190px, .9fr) minmax(225px, 1fr);
        gap: 15px 20px;
        padding: 17px 19px 14px;
    }

    .lead-person h2 {
        margin: 5px 0 3px;
        font-size: 28px;
    }

    .lead-id {
        font-size: 8px;
    }

    .lead-badge {
        min-height: 22px;
        padding: 3px 7px;
        font-size: 7.5px;
    }

    .lead-status-form {
        width: min(100%, 190px);
        margin-top: 7px;
    }

    .lead-status-form label > span {
        margin-bottom: 3px;
        font-size: 7px;
    }

    .lead-status-select {
        height: 35px;
        padding-left: 9px;
        font-size: 10px;
    }

    .lead-contact {
        gap: 5px;
    }

    .lead-contact a {
        font-size: 11.5px;
        line-height: 1.35;
    }

    .lead-quickfacts {
        gap: 7px 13px;
    }

    .lead-fact span {
        margin-bottom: 2px;
        font-size: 7.5px;
    }

    .lead-fact strong {
        font-size: 10.5px;
        line-height: 1.3;
    }

    /*
      Tablet/mobile CRM should not require the + button.
      All submitted lead details are visible by default.
    */
    .lead-expand {
        display: none;
    }

    .lead-details,
    .lead-card.open .lead-details {
        display: block;
        padding: 0 19px 16px;
        border-top: 1px solid rgba(17,31,31,.07);
    }

    .lead-detail-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
        padding-top: 11px;
    }

    .lead-detail {
        min-height: 54px;
        padding: 8px 10px;
        border-radius: 6px;
    }

    .lead-detail span {
        margin-bottom: 3px;
        font-size: 6.8px;
        letter-spacing: .45px;
    }

    .lead-detail strong,
    .lead-detail p {
        font-size: 9.5px;
        line-height: 1.35;
    }
}


/* ---- iPad 13 portrait / smaller tablets ---- */
@media (max-width: 1100px) {
    .leads-app {
        width: calc(100% - 24px);
    }

    .leads-topbar {
        padding: 12px 0 16px;
    }

    .leads-heading {
        padding: 27px 0 19px;
    }

    .leads-heading-copy h1 {
        font-size: 44px;
    }

    .leads-heading-copy span {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.5;
    }

    .leads-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 12px;
    }

    .leads-stat {
        min-height: 76px;
        padding: 11px 13px;
    }

    .leads-stat strong {
        font-size: 28px;
    }

    .leads-stat span {
        font-size: 8px;
    }

    .leads-controls {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
        padding: 9px;
        margin-bottom: 13px;
    }

    .leads-control:first-child {
        grid-column: 1 / -1;
    }

    .leads-control:last-child {
        grid-column: auto;
    }

    .leads-control input,
    .leads-control select {
        height: 42px;
        font-size: 11px;
    }

    .lead-card-main {
        grid-template-columns: minmax(230px, 1.05fr) minmax(180px, .8fr);
        gap: 12px 18px;
        padding: 15px 17px 12px;
    }

    .lead-person {
        grid-column: 1 / 2;
    }

    .lead-contact {
        grid-column: 2 / 3;
    }

    .lead-quickfacts {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-top: 1px;
    }

    .lead-detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ---- iPhone 16/17 Pro widths and similar phones ---- */
@media (max-width: 700px) {
    .leads-app {
        width: calc(100% - 14px);
        padding: 6px 0 26px;
    }

    .leads-topbar {
        gap: 7px;
        padding: 9px 0 11px;
    }

    .leads-brand {
        font-size: 22px;
    }

    .leads-private-label {
        max-width: none;
        padding: 5px 7px;
        font-size: 7px;
        line-height: 1.1;
        letter-spacing: .35px;
        white-space: nowrap;
    }

    .leads-topbar-actions {
        gap: 5px;
    }

    .leads-logout-link {
        min-height: 31px;
        padding: 0 9px;
        font-size: 8px;
        letter-spacing: .35px;
    }

    .leads-heading {
        gap: 6px;
        padding: 17px 0 13px;
    }

    .leads-heading-copy p {
        margin-bottom: 2px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .leads-heading-copy h1 {
        font-size: 35px;
    }

    .leads-heading-copy span {
        margin-top: 5px;
        font-size: 11.5px;
        line-height: 1.45;
    }

    .leads-home-link {
        font-size: 15px;
    }

    /* 3 x 2 compact stat grid instead of oversized 2 x 3. */
    .leads-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 8px;
    }

    .leads-stat {
        min-height: 66px;
        padding: 8px 8px;
        border-radius: 6px;
    }

    .leads-stat strong {
        font-size: 25px;
    }

    .leads-stat span {
        margin-top: 3px;
        font-size: 7.3px;
        line-height: 1.12;
        letter-spacing: .25px;
    }

    /* Search full width, remaining four filters in a compact 2 x 2 grid. */
    .leads-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 9px;
        padding: 6px;
        border-radius: 7px;
    }

    .leads-control:first-child {
        grid-column: 1 / -1;
    }

    .leads-control:last-child {
        grid-column: auto;
    }

    .leads-control input,
    .leads-control select {
        height: 38px;
        padding: 0 8px;
        font-size: 9.5px;
    }

    .leads-results-meta {
        gap: 6px;
        margin: 0 1px 6px;
        font-size: 8.5px;
    }

    .leads-list {
        gap: 7px;
    }

    .lead-card {
        border-radius: 7px;
    }

    /* Compact lead "hero": identity, status, contact and facts all visible. */
    .lead-card-main {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 11px 12px 9px;
    }

    .lead-person,
    .lead-contact,
    .lead-quickfacts {
        grid-column: auto;
    }

    .lead-id {
        font-size: 7px;
        letter-spacing: .5px;
    }

    .lead-person h2 {
        margin: 3px 0 3px;
        font-size: 23px;
    }

    .lead-badges {
        gap: 3px;
    }

    .lead-badge {
        min-height: 18px;
        padding: 2px 5px;
        font-size: 6.2px;
        line-height: 1.1;
        letter-spacing: .15px;
    }

    /* Status becomes a small inline control instead of a large boxed section. */
    .lead-status-form {
        width: min(100%, 168px);
        margin-top: 5px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .lead-status-form label > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .lead-status-select {
        height: 34px;
        padding: 0 27px 0 8px;
        border-radius: 5px;
        font-size: 9px;
    }

    .lead-contact {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        padding-top: 1px;
    }

    .lead-contact a {
        font-size: 10.5px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .lead-quickfacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 10px;
        padding-top: 2px;
    }

    .lead-fact span {
        margin-bottom: 1px;
        font-size: 6.5px;
        letter-spacing: .35px;
    }

    .lead-fact strong {
        font-size: 9.5px;
        line-height: 1.25;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* No plus button on phone; details are already visible. */
    .lead-expand {
        display: none !important;
    }

    .lead-details,
    .lead-card.open .lead-details {
        display: block;
        padding: 0 12px 11px;
    }

    /* Two-column detail grid keeps every submitted field visible without a huge card. */
    .lead-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding-top: 8px;
    }

    .lead-detail {
        min-height: 45px;
        padding: 7px 8px;
        border-radius: 5px;
    }

    .lead-detail span {
        margin-bottom: 2px;
        font-size: 6.1px;
        line-height: 1.1;
        letter-spacing: .25px;
    }

    .lead-detail strong,
    .lead-detail p {
        font-size: 8.7px;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    .lead-detail-notes {
        grid-column: 1 / -1;
    }
}


/* ---- iPhone Pro small-width safeguard (roughly 390-410 CSS px) ---- */
@media (max-width: 430px) {
    .leads-app {
        width: calc(100% - 12px);
    }

    .leads-brand {
        font-size: 21px;
    }

    .leads-private-label {
        padding: 4px 6px;
        font-size: 6.5px;
    }

    .leads-heading-copy h1 {
        font-size: 33px;
    }

    .leads-summary {
        gap: 4px;
    }

    .leads-stat {
        min-height: 63px;
        padding: 7px;
    }

    .leads-stat strong {
        font-size: 23px;
    }

    .leads-stat span {
        font-size: 6.8px;
    }

    .leads-control input,
    .leads-control select {
        height: 37px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: 9px;
    }

    .lead-card-main {
        padding: 10px 11px 8px;
    }

    .lead-person h2 {
        font-size: 22px;
    }

    .lead-contact a {
        font-size: 10px;
    }

    .lead-fact strong {
        font-size: 9.2px;
    }

    .lead-details {
        padding-left: 11px;
        padding-right: 11px;
    }
}

/* ========================================
   PRIVATE CRM — ANALYTICS V1
   Readable on desktop, iPad Pro 13", and
   iPhone 16/17 Pro class screen widths.
======================================== */

.crm-analytics {
    margin: 0 0 18px;
}

.crm-analytics-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 2px 11px;
}

.crm-analytics-heading p {
    margin: 0 0 3px;
    color: #a57b3d;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.crm-analytics-heading h2 {
    margin: 0;
    color: #1b2d29;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 31px;
    font-weight: 600;
    line-height: 1;
}

.crm-analytics-heading > span {
    color: #596762;
    font-size: 12px;
    line-height: 1.4;
}

.crm-analytics-grid {
    display: grid;
    grid-template-columns: 1.15fr .9fr .9fr;
    gap: 10px;
}

.crm-analytics-panel {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid rgba(17,31,31,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.68);
    box-shadow: 0 5px 18px rgba(17,31,31,.025);
}

.crm-agent-panel {
    grid-row: span 2;
}

.crm-type-panel {
    grid-column: 2 / -1;
}

.crm-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(17,31,31,.08);
}

.crm-panel-heading h3 {
    margin: 0;
    color: #20332e;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
}

.crm-panel-heading span {
    color: #68736f;
    font-size: 10px;
    line-height: 1.35;
    text-align: right;
}

.crm-agent-list {
    display: grid;
    gap: 9px;
    padding-top: 11px;
}

.crm-agent-row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding: 10px 11px;
    border-radius: 7px;
    background: #f3eee5;
}

.crm-agent-name strong {
    display: block;
    color: #21342f;
    font-size: 13px;
    line-height: 1.3;
}

.crm-agent-name span {
    display: block;
    margin-top: 3px;
    color: #64706b;
    font-size: 10px;
}

.crm-agent-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(48px, 1fr));
    gap: 7px;
}

.crm-agent-metrics div {
    min-width: 48px;
    text-align: center;
}

.crm-agent-metrics strong {
    display: block;
    color: #1c302b;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.crm-agent-metrics span {
    display: block;
    margin-top: 3px;
    color: #66726d;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.crm-bar-list {
    display: grid;
    gap: 10px;
    padding-top: 12px;
}

.crm-bar-row {
    min-width: 0;
}

.crm-bar-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.crm-bar-meta strong {
    overflow: hidden;
    color: #2a3c37;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-bar-meta span {
    flex: 0 0 auto;
    color: #69746f;
    font-size: 10px;
    font-weight: 500;
}

.crm-bar-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8e1d5;
}

.crm-bar-track span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #17312b, #b98c49);
}

.crm-pipeline-list .crm-bar-track span {
    background: linear-gradient(90deg, #24483e, #7b9d7f);
}

.crm-type-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding-top: 12px;
}

.crm-type-item {
    min-width: 0;
    min-height: 78px;
    padding: 10px;
    border-radius: 7px;
    background: #f3eee5;
}

.crm-type-item strong {
    display: block;
    color: #1d312c;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
}

.crm-type-item span {
    display: block;
    margin-top: 6px;
    color: #394b46;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.25;
}

.crm-type-item small {
    display: block;
    margin-top: 3px;
    color: #737d78;
    font-size: 9px;
}

/* iPad Pro 13" landscape / narrow desktop */
@media (max-width: 1400px) {
    .crm-analytics {
        margin-bottom: 14px;
    }

    .crm-analytics-heading h2 {
        font-size: 28px;
    }

    .crm-analytics-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 8px;
    }

    .crm-agent-panel {
        grid-row: span 2;
    }

    .crm-type-panel {
        grid-column: 2 / 3;
    }

    .crm-analytics-panel {
        padding: 14px 15px;
    }

    .crm-panel-heading h3 {
        font-size: 21px;
    }

    .crm-agent-row {
        gap: 11px;
        min-height: 62px;
        padding: 9px 10px;
    }

    .crm-agent-name strong {
        font-size: 12px;
    }

    .crm-agent-name span {
        font-size: 9.5px;
    }

    .crm-agent-metrics strong {
        font-size: 20px;
    }

    .crm-agent-metrics span {
        font-size: 7.5px;
    }

    .crm-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .crm-type-item {
        min-height: 67px;
        padding: 9px;
    }
}

/* iPad portrait */
@media (max-width: 1100px) {
    .crm-analytics-heading {
        align-items: flex-start;
    }

    .crm-analytics-grid {
        grid-template-columns: 1fr 1fr;
    }

    .crm-agent-panel,
    .crm-type-panel {
        grid-column: auto;
        grid-row: auto;
    }

    .crm-agent-panel {
        grid-column: 1 / -1;
    }

    .crm-agent-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .crm-agent-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 8px;
    }

    .crm-agent-metrics {
        width: 100%;
    }

    .crm-type-panel {
        grid-column: 1 / -1;
    }

    .crm-type-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* iPhone 16/17 Pro class widths */
@media (max-width: 700px) {
    .crm-analytics {
        margin-bottom: 9px;
    }

    .crm-analytics-heading {
        display: block;
        margin: 0 1px 7px;
    }

    .crm-analytics-heading p {
        margin-bottom: 2px;
        font-size: 8.5px;
        letter-spacing: .8px;
    }

    .crm-analytics-heading h2 {
        font-size: 24px;
    }

    .crm-analytics-heading > span {
        display: block;
        margin-top: 3px;
        font-size: 10.5px;
    }

    .crm-analytics-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .crm-agent-panel,
    .crm-type-panel {
        grid-column: auto;
    }

    .crm-analytics-panel {
        padding: 10px 11px;
        border-radius: 7px;
    }

    .crm-panel-heading {
        gap: 8px;
        padding-bottom: 7px;
    }

    .crm-panel-heading h3 {
        font-size: 18px;
    }

    .crm-panel-heading span {
        font-size: 9px;
    }

    .crm-agent-list {
        grid-template-columns: 1fr;
        gap: 5px;
        padding-top: 7px;
    }

    .crm-agent-row {
        grid-template-columns: minmax(108px, 1fr) auto;
        gap: 9px;
        min-height: 52px;
        padding: 7px 8px;
    }

    .crm-agent-name strong {
        font-size: 11px;
    }

    .crm-agent-name span {
        margin-top: 2px;
        font-size: 9px;
    }

    .crm-agent-metrics {
        grid-template-columns: repeat(3, minmax(39px, 1fr));
        gap: 4px;
    }

    .crm-agent-metrics div {
        min-width: 39px;
    }

    .crm-agent-metrics strong {
        font-size: 18px;
    }

    .crm-agent-metrics span {
        margin-top: 2px;
        font-size: 7px;
        letter-spacing: .15px;
    }

    .crm-bar-list {
        gap: 7px;
        padding-top: 8px;
    }

    .crm-bar-meta {
        margin-bottom: 3px;
    }

    .crm-bar-meta strong {
        font-size: 10px;
    }

    .crm-bar-meta span {
        font-size: 9px;
    }

    .crm-bar-track {
        height: 6px;
    }

    .crm-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        padding-top: 8px;
    }

    .crm-type-item {
        min-height: 59px;
        padding: 7px;
    }

    .crm-type-item strong {
        font-size: 20px;
    }

    .crm-type-item span {
        margin-top: 4px;
        font-size: 8px;
        line-height: 1.15;
    }

    .crm-type-item small {
        margin-top: 2px;
        font-size: 8px;
    }
}

/* Small iPhone safeguard */
@media (max-width: 430px) {
    .crm-agent-row {
        grid-template-columns: 1fr;
    }

    .crm-agent-metrics {
        max-width: 190px;
    }

    .crm-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================
   PRIVATE CRM — ORGANIZATION V2
   Analytics is secondary; leads are primary.
   No expandable lead cards.
======================================== */

/* ---------- Analytics drawer ---------- */
.crm-analytics-drawer {
    margin: 0 0 10px;
    border: 1px solid rgba(17,31,31,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.58);
    box-shadow: none;
}

.crm-analytics-drawer > summary {
    list-style: none;
}

.crm-analytics-drawer > summary::-webkit-details-marker {
    display: none;
}

.crm-analytics-summary {
    min-height: 50px;
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 9px 14px;
    cursor: pointer;
    user-select: none;
}

.crm-analytics-summary-title {
    min-width: 0;
}

.crm-analytics-summary-title span {
    display: block;
    margin-bottom: 2px;
    color: #a57b3d;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.crm-analytics-summary-title strong {
    display: block;
    color: #1d302b;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.crm-analytics-peek {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

.crm-analytics-peek span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f0ebe2;
    color: #53615c;
    font-size: 9.5px;
    line-height: 1;
    white-space: nowrap;
}

.crm-analytics-peek b {
    color: #1f342e;
    font-size: 11px;
}

.crm-analytics-summary-action {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #866532;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .25px;
    white-space: nowrap;
}

.crm-analytics-chevron {
    display: inline-block;
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1;
    transition: transform .2s ease;
}

.crm-analytics-drawer[open] .crm-analytics-chevron {
    transform: rotate(180deg);
}

.crm-analytics-content {
    padding: 0 10px 10px;
    border-top: 1px solid rgba(17,31,31,.08);
}

.crm-analytics-content .crm-analytics-grid {
    grid-template-columns: 1.15fr 1fr 1fr 1.05fr;
    gap: 7px;
    padding-top: 8px;
}

.crm-analytics-content .crm-agent-panel,
.crm-analytics-content .crm-type-panel {
    grid-column: auto;
    grid-row: auto;
}

.crm-analytics-content .crm-analytics-panel {
    min-height: 0;
    padding: 11px 12px;
    border-radius: 7px;
}

.crm-analytics-content .crm-panel-heading {
    gap: 7px;
    padding-bottom: 7px;
}

.crm-analytics-content .crm-panel-heading h3 {
    font-size: 18px;
}

.crm-analytics-content .crm-panel-heading span {
    font-size: 8.5px;
}

.crm-analytics-content .crm-agent-list {
    grid-template-columns: 1fr;
    gap: 5px;
    padding-top: 7px;
}

.crm-analytics-content .crm-agent-row {
    grid-template-columns: minmax(95px, 1fr) auto;
    gap: 7px;
    min-height: 45px;
    padding: 6px 7px;
}

.crm-analytics-content .crm-agent-name strong {
    font-size: 10.5px;
}

.crm-analytics-content .crm-agent-name span {
    margin-top: 1px;
    font-size: 8.5px;
}

.crm-analytics-content .crm-agent-metrics {
    grid-template-columns: repeat(3, minmax(34px, 1fr));
    gap: 3px;
}

.crm-analytics-content .crm-agent-metrics div {
    min-width: 34px;
}

.crm-analytics-content .crm-agent-metrics strong {
    font-size: 17px;
}

.crm-analytics-content .crm-agent-metrics span {
    font-size: 6.8px;
}

.crm-analytics-content .crm-bar-list {
    gap: 6px;
    padding-top: 7px;
}

.crm-analytics-content .crm-bar-meta {
    margin-bottom: 3px;
}

.crm-analytics-content .crm-bar-meta strong {
    font-size: 9.5px;
}

.crm-analytics-content .crm-bar-meta span {
    font-size: 8.5px;
}

.crm-analytics-content .crm-bar-track {
    height: 5px;
}

.crm-analytics-content .crm-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding-top: 7px;
}

.crm-analytics-content .crm-type-item {
    min-height: 48px;
    padding: 6px 7px;
}

.crm-analytics-content .crm-type-item strong {
    font-size: 18px;
}

.crm-analytics-content .crm-type-item span {
    margin-top: 2px;
    font-size: 8px;
}

.crm-analytics-content .crm-type-item small {
    margin-top: 1px;
    font-size: 7.5px;
}


/* ---------- Lead cards: one card, all data visible ---------- */
.lead-card {
    overflow: hidden;
}

.lead-card-main {
    grid-template-columns: minmax(275px, 1.1fr) minmax(180px, .72fr) minmax(360px, 1.35fr);
    align-items: start;
    gap: 12px 22px;
    padding: 15px 20px 10px;
}

.lead-person h2 {
    margin: 4px 0 3px;
    font-size: 27px;
}

.lead-badges {
    gap: 4px;
}

.lead-badge {
    min-height: 21px;
    padding: 3px 7px;
    font-size: 7.8px;
}

.lead-status-form {
    width: min(100%, 185px) !important;
    margin-top: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lead-status-form label {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.lead-status-form label > span {
    margin-bottom: 3px;
    font-size: 7.5px;
}

.lead-status-select {
    height: 35px;
    padding-left: 9px;
    font-size: 10.5px;
}

.lead-contact {
    gap: 5px;
    padding-top: 21px;
}

.lead-contact a {
    font-size: 11.5px;
    line-height: 1.35;
}

.lead-quickfacts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 13px;
    padding-top: 20px;
}

.lead-fact span {
    margin-bottom: 2px;
    font-size: 7.5px;
}

.lead-fact strong {
    font-size: 10.5px;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* The old + button must never appear at any width. */
.lead-expand {
    display: none !important;
}

/* Details are permanently visible and visually part of the same white card. */
.lead-details,
.lead-card.open .lead-details {
    display: block !important;
    padding: 0 20px 13px;
    border-top: 0;
}

.lead-detail-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid rgba(17,31,31,.08);
}

.lead-detail {
    min-height: 48px;
    padding: 7px 9px;
    border-radius: 5px;
    background: #f3eee5;
}

.lead-detail span {
    margin-bottom: 2px;
    font-size: 7.2px;
    line-height: 1.15;
    letter-spacing: .35px;
}

.lead-detail strong,
.lead-detail p {
    font-size: 10px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.lead-detail-notes {
    grid-column: span 2;
}


/* ---------- Laptop / iPad 13 landscape ---------- */
@media (max-width: 1400px) {
    .crm-analytics-summary {
        grid-template-columns: minmax(160px, auto) 1fr auto;
        gap: 12px;
        min-height: 47px;
        padding: 8px 11px;
    }

    .crm-analytics-summary-title strong {
        font-size: 20px;
    }

    .crm-analytics-content .crm-analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lead-card-main {
        grid-template-columns: minmax(245px, 1.05fr) minmax(165px, .72fr) minmax(300px, 1.25fr);
        gap: 10px 16px;
        padding: 13px 16px 9px;
    }

    .lead-details,
    .lead-card.open .lead-details {
        padding: 0 16px 11px;
    }

    .lead-detail-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lead-detail-notes {
        grid-column: span 2;
    }
}


/* ---------- iPad 13 portrait / tablet ---------- */
@media (max-width: 1100px) {
    .crm-analytics-summary {
        grid-template-columns: 1fr auto;
    }

    .crm-analytics-peek {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .crm-analytics-summary-action {
        grid-column: 2;
        grid-row: 1;
    }

    .crm-analytics-content .crm-analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lead-card-main {
        grid-template-columns: minmax(235px, 1fr) minmax(190px, .8fr);
        gap: 8px 14px;
        padding: 12px 14px 8px;
    }

    .lead-person {
        grid-column: 1 / 2;
    }

    .lead-contact {
        grid-column: 2 / 3;
        padding-top: 19px;
    }

    .lead-quickfacts {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-top: 0;
    }

    .lead-details,
    .lead-card.open .lead-details {
        padding: 0 14px 10px;
    }

    .lead-detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ---------- iPhone 16 / 17 Pro class ---------- */
@media (max-width: 700px) {
    .crm-analytics-drawer {
        margin-bottom: 7px;
    }

    .crm-analytics-summary {
        min-height: 43px;
        grid-template-columns: 1fr auto;
        gap: 5px 8px;
        padding: 7px 8px;
    }

    .crm-analytics-summary-title span {
        font-size: 7.5px;
    }

    .crm-analytics-summary-title strong {
        font-size: 18px;
    }

    .crm-analytics-peek {
        gap: 4px;
    }

    .crm-analytics-peek span {
        padding: 4px 6px;
        font-size: 8px;
    }

    .crm-analytics-peek b {
        font-size: 9.5px;
    }

    .crm-analytics-view-label {
        display: none;
    }

    .crm-analytics-chevron {
        font-size: 17px;
    }

    .crm-analytics-content {
        padding: 0 6px 6px;
    }

    .crm-analytics-content .crm-analytics-grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .crm-analytics-content .crm-analytics-panel {
        padding: 9px;
    }

    /* Keep phone card readable while sharply reducing vertical waste. */
    .lead-card-main {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 11px 7px;
    }

    .lead-person,
    .lead-contact,
    .lead-quickfacts {
        grid-column: auto;
    }

    .lead-person h2 {
        font-size: 22px;
    }

    .lead-badge {
        min-height: 18px;
        padding: 2px 5px;
        font-size: 7px;
    }

    .lead-status-form {
        width: min(100%, 158px) !important;
        margin-top: 5px !important;
    }

    .lead-status-form label > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .lead-status-select {
        height: 32px;
        font-size: 10px;
    }

    .lead-contact {
        display: flex;
        flex-wrap: wrap;
        gap: 3px 11px;
        padding-top: 0;
    }

    .lead-contact a {
        font-size: 10.5px;
    }

    .lead-quickfacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 9px;
        padding-top: 1px;
    }

    .lead-fact span {
        font-size: 7.5px;
    }

    .lead-fact strong {
        font-size: 10px;
    }

    .lead-details,
    .lead-card.open .lead-details {
        padding: 0 11px 9px;
    }

    .lead-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding-top: 6px;
    }

    .lead-detail {
        min-height: 42px;
        padding: 6px 7px;
    }

    .lead-detail span {
        font-size: 7.2px;
    }

    .lead-detail strong,
    .lead-detail p {
        font-size: 9.5px;
        line-height: 1.25;
    }

    .lead-detail-notes {
        grid-column: 1 / -1;
    }
}


/* ---------- Narrow iPhone safeguard ---------- */
@media (max-width: 430px) {
    .crm-analytics-peek span {
        padding-left: 5px;
        padding-right: 5px;
    }

    .lead-detail strong,
    .lead-detail p {
        font-size: 9.3px;
    }
}