/* ==========================================================================
 COMPONENTS.CSS - Reusable UI Components
 Sell Chicago Properties
 Mobile-first component library - Chicago Summer theme
 ========================================================================== */

/* ---------------------------------------------------------------------------
 1. BUTTONS
 --------------------------------------------------------------------------- */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 padding: 0.75rem 1.75rem;
 font-family: var(--font-heading);
 font-size: 0.9375rem;
 font-weight: var(--fw-semibold);
 line-height: 1;
 text-decoration: none;
 border-radius: var(--radius-sm);
 border: 2px solid transparent;
 cursor: pointer;
 position: relative;
 overflow: hidden;
 transition: background-color 0.6s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
 color 0.6s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
 border-color 0.4s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
 box-shadow 0.6s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
 transform 0.6s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

/* Subtle lift on hover for all buttons */
.btn:hover {
 transform: translateY(-2px);
}
.btn:active {
 transform: translateY(0);
}

.btn:focus-visible {
 outline: 2px solid var(--color-accent);
 outline-offset: 2px;
}

/* Accent / Primary CTA */
.btn--accent {
 background-color: var(--color-accent);
 color: #FFFFFF;
 border-color: var(--color-accent);
}

.btn--accent:hover {
 background-color: var(--color-accent-hover);
 border-color: var(--color-accent-hover);
}

/* Navy / Secondary CTA */
.btn--navy {
 background-color: var(--color-navy);
 color: #FFFFFF;
 border-color: var(--color-navy);
}

.btn--navy:hover {
 background-color: var(--color-navy-light);
 border-color: var(--color-navy-light);
}

/* Outline */
.btn--outline {
 background-color: transparent;
 color: var(--color-navy);
 border-color: var(--color-navy);
}

.btn--outline:hover {
 background-color: var(--color-navy);
 color: #FFFFFF;
}

/* Outline on dark backgrounds */
.btn--outline-white {
 background-color: transparent;
 color: #FFFFFF;
 border-color: #FFFFFF;
}

.btn--outline-white:hover {
 background-color: #FFFFFF;
 color: var(--color-navy);
}

/* Size variants */
.btn--lg {
 padding: 1rem 2.25rem;
 font-size: 1.0625rem;
}

.btn--sm {
 padding: 0.5rem 1.25rem;
 font-size: 0.8125rem;
}

.btn--block {
 width: 100%;
}


/* ---------------------------------------------------------------------------
 2. NAVIGATION
 --------------------------------------------------------------------------- */

.nav {
 position: sticky;
 top: 0;
 z-index: 10000;
 background-color: var(--color-white);
 border-bottom: 1px solid var(--color-border);
 transition: box-shadow var(--transition-base);
 /* Belt-and-braces: dropdown menus must escape the nav's bounding box */
 overflow: visible !important;
}
.nav__inner, .nav__menu { overflow: visible !important; }

.nav--scrolled {
 box-shadow: var(--shadow-md);
 border-bottom-color: transparent;
}

.nav__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: var(--nav-height);
 padding-left: var(--space-4);
 padding-right: var(--space-4);
 max-width: var(--container-max);
 margin: 0 auto;
}

@media (min-width: 768px) {
 .nav__inner {
 padding-left: var(--space-6);
 padding-right: var(--space-6);
 }
}

/* Logo */
.nav__logo {
 flex-shrink: 0;
}

.nav__logo img {
 height: 40px;
 width: auto;
}

@media (min-width: 768px) {
 .nav__logo img {
 height: 44px;
 }
}

/* Mobile menu - full-screen navy overlay */
.nav__menu {
 position: fixed;
 inset: 0;
 z-index: 200;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: var(--space-5);
 background-color: var(--color-navy-dark);
 opacity: 0;
 visibility: hidden;
 transition: opacity var(--transition-base), visibility var(--transition-base);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 padding: var(--space-8) var(--space-4);
}

.nav__menu.is-open {
 opacity: 1;
 visibility: visible;
}

.nav__menu-link {
 display: block;
 padding: var(--space-3) var(--space-4);
 font-size: 1.25rem;
 font-weight: var(--fw-medium);
 color: #FFFFFF;
 transition: color var(--transition-fast);
}

.nav__menu-link:hover,
.nav__menu-link.is-active {
 color: var(--color-accent);
}

/* Mobile CTA in menu */
.nav__menu-cta {
 margin-top: var(--space-4);
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}

/* Nav CTA links - hyperlink style, not buttons */
.nav__cta-link {
 font-size: 0.875rem;
 font-weight: 600;
 text-decoration: none;
 white-space: nowrap;
 transition: color 0.2s ease;
}

.nav__call-link {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 color: var(--color-navy);
}

.nav__call-link:hover {
 color: var(--color-accent);
}

.nav__call-link svg {
 flex-shrink: 0;
}

.nav__estimate-link {
 color: var(--color-accent);
}

.nav__estimate-link:hover {
 color: var(--color-navy);
 text-decoration: underline;
}

/* Desktop menu */
@media (min-width: 768px) {
 .nav__menu {
 position: static;
 flex-direction: row;
 align-items: center;
 justify-content: flex-end;
 gap: var(--space-1);
 background-color: transparent;
 opacity: 1;
 visibility: visible;
 padding: 0;
 height: auto;
 }

 .nav__menu-link {
 padding: var(--space-2) var(--space-3);
 font-size: 0.875rem;
 color: var(--color-navy);
 white-space: nowrap;
 }

 .nav__menu-link:hover,
 .nav__menu-link.is-active {
 color: var(--color-accent);
 }

 .nav__menu-cta {
 margin-top: 0;
 margin-left: var(--space-3);
 flex-direction: row;
 gap: var(--space-4);
 align-items: center;
 }
}

@media (min-width: 768px) and (max-width: 1180px) {
 .nav__inner {
 padding-left: 18px;
 padding-right: 18px;
 }
 .nav__logo img {
 height: 38px;
 width: auto;
 }
 .nav__dropdown-toggle,
 .nav__menu-link {
 padding-left: 10px;
 padding-right: 10px;
 font-size: 0.92rem;
 }
 .nav__menu-cta {
 margin-left: 8px;
 gap: 12px;
 }
}

/* Nav CTA (desktop only - separate from menu) */
.nav__cta {
 display: none;
}

@media (min-width: 768px) {
 .nav__cta {
 display: inline-flex;
 margin-left: var(--space-4);
 }
}

/* Hamburger toggle */
.nav__toggle {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 5px;
 width: 32px;
 height: 32px;
 padding: 4px;
 cursor: pointer;
 position: relative; /* required for z-index to apply */
 z-index: 250;
}

.nav__toggle span {
 display: block;
 width: 100%;
 height: 2px;
 background-color: var(--color-navy);
 border-radius: 1px;
 /* Smoother, more luxurious hamburger swap.
    Was: var(--transition-fast) = 150ms ease (too snappy).
    Now: 380ms cubic-bezier(0.65, 0, 0.35, 1) — same easing as the cinematic curtain. */
 transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1),
 opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
 background-color 240ms ease-out;
 transform-origin: center;
 will-change: transform, opacity;
}
.nav__toggle.is-open span:nth-child(1),
.nav__toggle.is-open span:nth-child(3) {
 /* Slight stagger between the two arms of the X for a soft snap */
 transition-delay: 40ms;
}
.nav__toggle.is-open span:nth-child(2) {
 /* Middle bar fades faster than the X arms rotate */
 transition-duration: 200ms;
}

/* Animate to X when open */
.nav__toggle.is-open span {
 background-color: #FFFFFF;
}

.nav__toggle.is-open span:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
}

.nav__toggle.is-open span:nth-child(2) {
 opacity: 0;
}

.nav__toggle.is-open span:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
 .nav__toggle {
 display: none;
 }
}


/* ---------------------------------------------------------------------------
 3. FOOTER
 --------------------------------------------------------------------------- */

.footer {
 background-color: #111D33;
 color: #FFFFFF;
 padding-top: var(--space-10);
 padding-bottom: 0;
}

.footer__grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
 padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
 .footer__grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 1024px) {
 .footer__grid {
 grid-template-columns: 2fr 1fr 1fr 1fr;
 }
}

.footer__heading {
 font-family: var(--font-heading);
 font-size: 0.875rem;
 font-weight: var(--fw-semibold);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--color-accent);
 margin-bottom: var(--space-4);
}

.footer p,
.footer strong,
.property-page .footer p,
.property-page .footer strong {
 color: rgba(255, 255, 255, 0.88);
}

.footer a:not(.btn),
.property-page .footer a:not(.btn) {
 color: rgba(255, 255, 255, 0.9);
 text-decoration: underline;
 text-decoration-color: rgba(236, 154, 41, 0.55);
 text-underline-offset: 3px;
 transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.footer a:not(.btn):hover,
.footer a:not(.btn):focus,
.property-page .footer a:not(.btn):hover,
.property-page .footer a:not(.btn):focus {
 color: var(--color-accent);
 text-decoration-color: var(--color-accent);
}

.footer__col > a {
 display: block;
 margin-bottom: var(--space-2);
}

.footer__list {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}

/* Multi-column footer list for areas/situations */
.footer__list--multi {
 columns: 2;
 column-gap: var(--space-4);
}

@media (min-width: 1024px) {
 .footer__list--multi {
 columns: 3;
 column-gap: var(--space-5);
 }
}

.footer__list--multi li {
 break-inside: avoid;
}

/* Full-width footer section for area links */
.footer__areas {
 padding-top: var(--space-6);
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 margin-top: var(--space-2);
}

.footer__areas-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-5);
}

@media (min-width: 768px) {
 .footer__areas-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 1024px) {
 .footer__areas-grid {
 grid-template-columns: repeat(4, 1fr);
 }
}

.footer__link {
 color: rgba(255, 255, 255, 0.88);
 font-size: 0.875rem;
 transition: color var(--transition-fast);
}

.footer__link:hover {
 color: #FFFFFF;
}

.footer__text {
 font-size: 0.875rem;
 color: rgba(255, 255, 255, 0.82);
 line-height: 1.7;
}

.footer__bottom {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 padding: var(--space-5) 0;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 font-size: 0.875rem;
 color: rgba(255, 255, 255, 0.78);
}

@media (min-width: 768px) {
 .footer__bottom {
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 }
}

.footer__bottom a {
 color: rgba(255, 255, 255, 0.86);
 transition: color var(--transition-fast);
}

.footer__bottom a:hover {
 color: #FFFFFF;
}


/* ---------------------------------------------------------------------------
 4. CARDS
 --------------------------------------------------------------------------- */

.card {
 background: var(--color-white);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-md);
 padding: var(--space-6);
 box-shadow: var(--shadow-sm);
 transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.card:hover {
 box-shadow: 0 8px 24px rgba(0,0,0,0.1);
 transform: translateY(-3px);
 border-color: var(--color-accent);
}

/* Situation card (icon + title + description) */
.card--situation {
 text-align: center;
 padding: var(--space-6) var(--space-5);
}

.card--situation .card__icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 56px;
 height: 56px;
 margin: 0 auto var(--space-4);
 background-color: var(--color-accent-light);
 border-radius: var(--radius-full);
 color: var(--color-accent);
 font-size: 1.5rem;
}

.card--situation .card__title {
 font-family: var(--font-heading);
 font-size: 1.125rem;
 font-weight: var(--fw-semibold);
 color: var(--color-navy);
 margin-bottom: var(--space-2);
}

.card--situation .card__desc {
 font-size: 0.875rem;
 color: var(--color-text-muted);
 line-height: 1.7;
}


/* ---------------------------------------------------------------------------
 5. FORMS
 --------------------------------------------------------------------------- */

.form-group {
 margin-bottom: 1.25rem;
}

.form-label {
 display: block;
 font-size: 0.875rem;
 font-weight: var(--fw-semibold);
 color: var(--color-navy);
 margin-bottom: 6px;
}

.form-input,
.form-select {
 display: block;
 width: 100%;
 height: 48px;
 padding: 0 1rem;
 font-size: 1rem;
 color: var(--color-text);
 background-color: var(--color-sand-light);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-sm);
 transition: border-color var(--transition-fast),
 box-shadow var(--transition-fast);
}

.form-textarea {
 display: block;
 width: 100%;
 min-height: 120px;
 padding: 0.75rem 1rem;
 font-size: 1rem;
 color: var(--color-text);
 background-color: var(--color-sand-light);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-sm);
 resize: vertical;
 transition: border-color var(--transition-fast),
 box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
 color: var(--color-text-muted);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
 outline: none;
 border-color: var(--color-navy);
 box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.1);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
 opacity: 0.6;
 cursor: not-allowed;
}

/* Select dropdown arrow */
.form-select {
 padding-right: 2.5rem;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 1rem center;
 appearance: none;
 cursor: pointer;
}

/* Two inputs side by side */
.form-row {
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
}

@media (min-width: 768px) {
 .form-row {
 flex-direction: row;
 }

 .form-row .form-group {
 flex: 1;
 margin-bottom: 0;
 }
}

/* Form error state */
.form-input--error,
.form-textarea--error,
.form-select--error,
.form-input.is-error,
.form-textarea.is-error,
.form-select.is-error {
 border-color: var(--color-error);
}

.form-error,
.field-error {
 font-size: 0.75rem;
 color: var(--color-error);
 margin-top: var(--space-1);
}

.field-error {
 display: block;
 margin-top: 0;
 margin-bottom: var(--space-1);
 font-weight: var(--fw-bold);
}


/* ---------------------------------------------------------------------------
 6. FAQ ACCORDION
 --------------------------------------------------------------------------- */

.faq-item {
 border-bottom: 1px solid var(--color-border);
}

.faq-question {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-4);
 width: 100%;
 padding: 1.25rem 0;
 font-family: var(--font-heading);
 font-size: 1.0625rem;
 font-weight: var(--fw-semibold);
 color: var(--color-navy);
 text-align: left;
 cursor: pointer;
 background: none;
 border: none;
 transition: color var(--transition-fast);
}

.faq-question:hover {
 color: var(--color-accent);
}

.faq-chevron {
 flex-shrink: 0;
 width: 20px;
 height: 20px;
 transition: transform 0.25s ease;
}

.faq-item.is-open .faq-chevron {
 transform: rotate(180deg);
}

/* Collapsible answer */
.faq-answer {
 max-height: 0;
 overflow: hidden;
 padding: 0;
 transition: max-height var(--transition-base);
}

.faq-answer__inner {
 padding: 0 0 1.25rem;
 color: var(--color-text-light);
 line-height: 1.7;
}

.faq-item.is-open .faq-answer {
 max-height: 500px;
}


/* ---------------------------------------------------------------------------
 7. STAT BAR / TRUST BAR
 --------------------------------------------------------------------------- */

.stat-bar {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: var(--space-8);
 padding: var(--space-8) var(--space-4);
 background: var(--color-white);
 border-top: 1px solid var(--color-border);
 border-bottom: 1px solid var(--color-border);
}

.stat-bar__item {
 text-align: center;
}

.stat-bar__number {
 font-family: var(--font-heading);
 font-size: 2.25rem;
 font-weight: var(--fw-bold);
 color: var(--color-navy);
 line-height: 1;
}

.stat-bar__label {
 font-size: 0.875rem;
 color: var(--color-text-muted);
 margin-top: 0.25rem;
}


/* ---------------------------------------------------------------------------
 8. TESTIMONIALS
 --------------------------------------------------------------------------- */

.testimonial-card {
 background: var(--color-white);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-md);
 padding: var(--space-6);
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
}

.testimonial-card__stars {
 color: var(--color-accent);
 font-size: 1.125rem;
}

.testimonial-card__text {
 font-size: 1rem;
 line-height: 1.7;
 color: var(--color-text-light);
 font-style: italic;
}

.testimonial-card__author {
 display: flex;
 align-items: center;
 gap: 0.75rem;
}

.testimonial-card__photo {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 object-fit: cover;
}

.testimonial-card__name {
 font-weight: var(--fw-semibold);
 color: var(--color-navy);
 font-size: 0.9375rem;
}

.testimonial-card__detail {
 font-size: 0.8125rem;
 color: var(--color-text-muted);
}


/* ---------------------------------------------------------------------------
 8b. TESTIMONIAL CAROUSEL
 --------------------------------------------------------------------------- */

.testimonial-carousel {
 max-width: 720px;
 margin: 0 auto;
 text-align: center;
 position: relative;
}

.testimonial-carousel__track {
 position: relative;
 min-height: 280px;
}

.testimonial-carousel__slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 opacity: 0;
 transform: translateY(8px);
 transition: opacity 0.5s ease, transform 0.5s ease;
 pointer-events: none;
 margin: 0;
 padding: 0;
 border: none;
}

.testimonial-carousel__slide.is-active {
 position: relative;
 opacity: 1;
 transform: translateY(0);
 pointer-events: auto;
}

.testimonial-carousel__stars {
 color: #D4A843;
 font-size: 1.5rem;
 letter-spacing: 0.15em;
 margin-bottom: var(--space-4);
}

.testimonial-carousel__quote {
 font-size: 1.25rem;
 line-height: 1.8;
 color: var(--color-text);
 font-style: italic;
 margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
 .testimonial-carousel__quote {
 font-size: 1.375rem;
 }
}

.testimonial-carousel__author {
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 text-align: left;
}

.testimonial-carousel__photo {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid var(--color-border);
}

.testimonial-carousel__name {
 font-weight: var(--fw-semibold);
 color: var(--color-navy);
 font-size: 1rem;
 font-style: normal;
 display: block;
}

.testimonial-carousel__detail {
 font-size: 0.875rem;
 color: var(--color-text-muted);
 display: block;
}

.testimonial-carousel__dots {
 display: flex;
 justify-content: center;
 gap: 0.5rem;
 margin-top: var(--space-5);
}

.testimonial-carousel__dot {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 border: none;
 background: var(--color-border);
 cursor: pointer;
 transition: background 0.3s ease, transform 0.3s ease;
 padding: 0;
}

.testimonial-carousel__dot.is-active {
 background: var(--color-accent);
 transform: scale(1.2);
}

.testimonial-carousel__dot:hover {
 background: var(--color-accent-dark, var(--color-accent));
}


/* ---------------------------------------------------------------------------
 9. BREADCRUMB
 --------------------------------------------------------------------------- */

.breadcrumb-bar {
 padding: var(--space-3) 0;
 background: var(--color-cream);
 border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 font-size: 0.875rem;
 color: var(--color-text-muted);
}

.breadcrumb li + li::before {
 content: '/';
 margin-right: 0.5rem;
 color: var(--color-border);
}

.breadcrumb a:hover {
 color: var(--color-accent);
}

/* Breadcrumbs - BEM variant (matches HTML)
 Minimal, non-disruptive: small muted text at top of content area */
.breadcrumbs {
 background: transparent;
 padding: 0.5rem 0 0;
 margin: 0;
}

.breadcrumbs .container {
 max-width: var(--container-max);
 margin: 0 auto;
 padding-left: var(--space-4);
 padding-right: var(--space-4);
}

.breadcrumbs__list {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.25rem;
 list-style: none;
 margin: 0;
 padding: 0;
 font-size: 0.6875rem;
 letter-spacing: 0.03em;
 text-transform: uppercase;
 color: var(--color-text-muted);
 opacity: 0.6;
}

.breadcrumbs__item + .breadcrumbs__item::before {
 content: '/';
 margin-right: 0.25rem;
 color: var(--color-border);
 font-size: 0.625rem;
}

.breadcrumbs__link {
 color: var(--color-text-muted);
 text-decoration: none;
 transition: color 0.2s;
}

.breadcrumbs__link:hover {
 color: var(--color-accent);
 opacity: 1;
}

.breadcrumbs__item[aria-current="page"] {
 color: var(--color-text);
}

@media (min-width: 768px) {
 .breadcrumbs .container {
 padding-left: var(--space-6);
 padding-right: var(--space-6);
 }
}

@media (min-width: 1280px) {
 .breadcrumbs .container {
 padding-left: var(--space-8);
 padding-right: var(--space-8);
 }
}


/* ---------------------------------------------------------------------------
 10. CTA BOX (within articles/pages)
 --------------------------------------------------------------------------- */

.cta-box {
 background: var(--color-navy);
 color: #FFFFFF;
 border-radius: var(--radius-md);
 padding: var(--space-8);
 text-align: center;
}

.cta-box h2,
.cta-box h3 {
 color: #FFFFFF;
}

.cta-box p {
 color: rgba(255, 255, 255, 0.8);
}

.cta-box__phone {
 display: inline-block;
 font-family: var(--font-heading);
 font-size: 1.75rem;
 font-weight: var(--fw-bold);
 color: var(--color-accent);
 margin-top: var(--space-3);
 margin-bottom: var(--space-4);
 transition: color var(--transition-fast);
}

.cta-box__phone:hover {
 color: var(--color-accent-hover);
}


/* ---------------------------------------------------------------------------
 11. CTA BAND (full-width section)
 --------------------------------------------------------------------------- */

.cta-band {
 background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 50%, #2E4A7A 100%);
 color: #FFFFFF;
 padding: var(--space-12) var(--space-4);
 text-align: center;
}

.cta-band h2 {
 color: #FFFFFF;
 margin-bottom: var(--space-3);
}

.cta-band p {
 color: rgba(255, 255, 255, 0.8);
 margin-bottom: var(--space-6);
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}

.cta-band__actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: var(--space-4);
}


/* ---------------------------------------------------------------------------
 12. BADGE
 --------------------------------------------------------------------------- */

.badge {
 display: inline-block;
 padding: 0.25rem 0.75rem;
 font-size: 0.75rem;
 font-weight: var(--fw-semibold);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 border-radius: var(--radius-full);
 background: var(--color-accent-light);
 color: var(--color-accent-dark);
}


/* ---------------------------------------------------------------------------
 13. STEPS / PROCESS
 --------------------------------------------------------------------------- */

.steps {
 display: grid;
 gap: var(--space-6);
}

@media (min-width: 768px) {
 .steps {
 grid-template-columns: repeat(3, 1fr);
 }
}

.step {
 text-align: center;
 padding: var(--space-6);
}

.step__number {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 48px;
 height: 48px;
 border-radius: 50%;
 background: var(--color-accent);
 color: #FFFFFF;
 font-family: var(--font-heading);
 font-weight: var(--fw-bold);
 font-size: 1.25rem;
 margin-bottom: var(--space-4);
}

.step__image {
 width: 100%;
 height: 200px;
 object-fit: cover;
 border-radius: var(--radius-md);
 margin-bottom: var(--space-4);
}

.step__title {
 font-size: 1.25rem;
 font-weight: var(--fw-semibold);
 color: var(--color-navy);
 margin-bottom: var(--space-2);
}

.step__text {
 font-size: 0.9375rem;
 color: var(--color-text-light);
 line-height: 1.6;
}


/* ---------------------------------------------------------------------------
 14. DUAL-TEXT BUTTON (engaged.be inspired)
 Text slides up on hover, revealing duplicate text from below
 --------------------------------------------------------------------------- */

.btn--slide {
 overflow: hidden;
}

.btn--slide .btn__text {
 display: block;
 position: relative;
 transition: transform 0.8s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

.btn--slide .btn__text::after {
 content: attr(data-text);
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 text-align: center;
}

.btn--slide:hover .btn__text {
 transform: translateY(-100%);
}


/* ---------------------------------------------------------------------------
 15. ENHANCED CARD HOVER EFFECTS
 --------------------------------------------------------------------------- */

.card,
.situation-card,
.testimonial-card,
.booking-card {
 transition: box-shadow 0.6s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
 border-color 0.6s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
 transform 0.6s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

.card:hover,
.booking-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-lg);
}

.situation-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-lg);
 border-color: var(--color-accent);
}

.testimonial-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}


/* ---------------------------------------------------------------------------
 16. IMAGE HOVER ZOOM (for step images, blog cards, etc.)
 --------------------------------------------------------------------------- */

.img-zoom {
 overflow: hidden;
 border-radius: var(--radius-md);
}

.img-zoom img {
 transition: transform 1.2s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

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


/* ---------------------------------------------------------------------------
 17. SECTION LABEL ANIMATION
 --------------------------------------------------------------------------- */

.section__label {
 display: inline-block;
 font-size: 1rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: var(--color-accent);
 margin-bottom: var(--space-3);
 position: relative;
 padding-left: 2rem;
 padding-right: 2rem;
}

.section__label::before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 width: 1.25rem;
 height: 2px;
 background: var(--color-accent);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.8s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

.section__label::after {
 content: '';
 position: absolute;
 right: 0;
 top: 50%;
 width: 1.25rem;
 height: 2px;
 background: var(--color-accent);
 transform: scaleX(0);
 transform-origin: right;
 transition: transform 0.8s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

.visible .section__label::before,
.section__header.visible .section__label::before {
 transform: scaleX(1);
}

.visible .section__label::after,
.section__header.visible .section__label::after {
 transform: scaleX(1);
}


/* ---------------------------------------------------------------------------
 18. LINK UNDERLINE ANIMATION
 --------------------------------------------------------------------------- */

.link-animated {
 position: relative;
 display: inline;
}

.link-animated::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 100%;
 height: 1px;
 background: currentColor;
 transform: scaleX(0);
 transform-origin: right;
 transition: transform 0.6s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

.link-animated:hover::after {
 transform: scaleX(1);
 transform-origin: left;
}


/* ---------------------------------------------------------------------------
 19. FOOTER LINK HOVER (slide-right effect)
 --------------------------------------------------------------------------- */

.footer__link {
 transition: color 0.3s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),
 transform 0.3s var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

.footer__link:hover {
 color: #FFFFFF;
 transform: translateX(4px);
}


/* ---------------------------------------------------------------------------
 20. INTRO SPLASH SCREEN - "GET PAID FOR YOUR PROPERTY"
 Full-screen overlay that animates out on page load
 --------------------------------------------------------------------------- */

.intro-splash {
 position: fixed;
 inset: 0;
 z-index: 9999;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 background: var(--color-navy-dark);
 overflow: hidden;
 transition: opacity 0.6s ease, visibility 0.6s ease;
}

.intro-splash.is-hidden {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}

.intro-splash__text {
 text-align: center;
 line-height: 1.05;
}

.intro-splash__line {
 display: block;
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 font-weight: 800;
 font-style: normal;
 color: #E63946;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 opacity: 0;
 transform: translateY(60px) scale(0.95);
 animation: splashLineIn 0.8s var(--ease-out-expo) forwards;
}

.intro-splash__line:nth-child(1) {
 font-size: clamp(3rem, 10vw, 7rem);
 animation-delay: 0.1s;
}

.intro-splash__line:nth-child(2) {
 font-size: clamp(2.5rem, 8vw, 5.5rem);
 animation-delay: 0.25s;
}

.intro-splash__line:nth-child(3) {
 font-size: clamp(3.5rem, 12vw, 8rem);
 animation-delay: 0.4s;
}

@keyframes splashLineIn {
 to {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

/* Subtle red glow pulse behind text */
.intro-splash::after {
 content: '';
 position: absolute;
 width: 400px;
 height: 400px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(230, 57, 70, 0.15) 0%, transparent 70%);
 animation: splashGlow 2s ease-in-out infinite alternate;
 pointer-events: none;
}

@keyframes splashGlow {
 from { transform: scale(0.8); opacity: 0.5; }
 to { transform: scale(1.2); opacity: 1; }
}


/* ---------------------------------------------------------------------------
 21. NAV DROPDOWN (hover-activated on desktop)
 --------------------------------------------------------------------------- */

.nav__dropdown {
 position: relative;
}

.nav__dropdown-trigger {
 display: flex;
 align-items: center;
 gap: 4px;
 cursor: pointer;
}

.nav__dropdown-arrow {
 width: 10px;
 height: 10px;
 transition: transform 0.4s var(--ease-out-expo);
}

.nav__dropdown:hover .nav__dropdown-arrow {
 transform: rotate(180deg);
}

.nav__dropdown-menu {
 display: none;
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
 min-width: 220px;
 background: var(--color-white);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-lg);
 padding: var(--space-2) 0;
 opacity: 0;
 z-index: 300;
 margin-top: 0;
}

/* Hover bridge - invisible area connecting trigger to menu */
.nav__dropdown-menu::before {
 content: '';
 position: absolute;
 top: -12px;
 left: 0;
 right: 0;
 height: 12px;
}

@media (min-width: 768px) {
 .nav__dropdown:hover .nav__dropdown-menu,
 .nav__dropdown:focus-within .nav__dropdown-menu {
 display: block;
 animation: dropdownIn 0.35s var(--ease-out-expo) forwards;
 }
}

@keyframes dropdownIn {
 from {
 opacity: 0;
 transform: translateX(-50%) translateY(8px);
 }
 to {
 opacity: 1;
 transform: translateX(-50%) translateY(0);
 }
}

.nav__dropdown-link {
 display: block;
 padding: var(--space-2) var(--space-4);
 font-size: 0.8125rem;
 font-weight: var(--fw-medium);
 color: var(--color-text);
 transition: background 0.2s ease, color 0.2s ease;
 white-space: nowrap;
}

.nav__dropdown-link:hover {
 background: var(--color-sand-light);
 color: var(--color-accent);
}

/* Mobile: dropdown items collapsible on tap */
@media (max-width: 767px) {
 .nav__dropdown-menu {
 display: none;
 position: static;
 transform: none;
 opacity: 1;
 background: transparent;
 border: none;
 box-shadow: none;
 padding: 0 0 0 var(--space-4);
 min-width: auto;
 margin-top: 0;
 }

 .nav__dropdown-menu::before {
 display: none;
 }

 .nav__dropdown.is-open .nav__dropdown-menu {
 display: block;
 }

 .nav__dropdown-link {
 color: rgba(255,255,255,0.7);
 font-size: 1rem;
 padding: var(--space-1) var(--space-4);
 }

 .nav__dropdown-link:hover {
 color: #FFFFFF;
 background: transparent;
 }

 .nav__dropdown-arrow {
 width: 12px;
 height: 12px;
 transition: transform 0.3s ease;
 }

 .nav__dropdown.is-open .nav__dropdown-arrow {
 transform: rotate(180deg);
 }
}


/* ---------------------------------------------------------------------------
 22. PAGE TRANSITION OVERLAY (Chicago imagery)
 --------------------------------------------------------------------------- */

.page-transition {
 position: fixed;
 inset: 0;
 z-index: 8000;
 display: flex;
 align-items: center;
 justify-content: center;
 pointer-events: none;
 overflow: hidden;
}

.page-transition__panel {
 position: absolute;
 inset: 0;
 background: var(--color-navy-dark);
 transform: translateY(100%);
 transition: transform 0.6s var(--ease-out-expo);
}

.page-transition.is-active .page-transition__panel {
 transform: translateY(0);
}

.page-transition.is-leaving .page-transition__panel {
 transform: translateY(-100%);
 transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.page-transition__city {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 200px;
 background: linear-gradient(to top, rgba(27, 42, 74, 0.8), transparent);
 display: flex;
 align-items: flex-end;
 justify-content: center;
 padding-bottom: var(--space-6);
}

.page-transition__label {
 font-family: var(--font-heading);
 font-size: 0.875rem;
 font-weight: var(--fw-semibold);
 text-transform: uppercase;
 letter-spacing: 0.2em;
 color: rgba(255,255,255,0.6);
 opacity: 0;
 transform: translateY(10px);
}

.page-transition.is-active .page-transition__label {
 animation: transLabelIn 0.5s 0.3s var(--ease-out-expo) forwards;
}

@keyframes transLabelIn {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* Splash text inside page transition ("GET PAID FOR YOUR PROPERTY") */
.page-transition__splash {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 z-index: 2;
 pointer-events: none;
}

.page-transition__splash-line {
 display: block;
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 font-weight: 800;
 color: #E63946;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 line-height: 1.05;
 opacity: 0;
 transform: translateY(30px) scale(0.95);
}

.page-transition__splash-line:nth-child(1) {
 font-size: clamp(2rem, 8vw, 5rem);
}

.page-transition__splash-line:nth-child(2) {
 font-size: clamp(1.75rem, 6vw, 4rem);
}

.page-transition__splash-line:nth-child(3) {
 font-size: clamp(2.25rem, 9vw, 5.5rem);
}

.page-transition.is-active .page-transition__splash-line {
 animation: transSplashIn 0.5s var(--ease-out-expo) forwards;
}

.page-transition.is-active .page-transition__splash-line:nth-child(1) {
 animation-delay: 0.15s;
}

.page-transition.is-active .page-transition__splash-line:nth-child(2) {
 animation-delay: 0.25s;
}

.page-transition.is-active .page-transition__splash-line:nth-child(3) {
 animation-delay: 0.35s;
}

@keyframes transSplashIn {
 to {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

/* ---------------------------------------------------------------------------
 PROPERTY TYPE ICONS
 --------------------------------------------------------------------------- */

.property-type-icon {
 width: 40px;
 height: 40px;
 color: var(--color-accent);
 margin-bottom: 0.5rem;
 flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 MOBILE PHONE FAB
 Floating phone button on mobile, positioned above the chatbot FAB
 --------------------------------------------------------------------------- */

.mobile-phone-fab {
 display: none;
}

@media (max-width: 767px) {
 .mobile-phone-fab {
 display: flex;
 align-items: center;
 justify-content: center;
 position: fixed;
 bottom: 96px;
 right: 24px;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: var(--color-navy);
 color: #fff;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 z-index: 9998;
 text-decoration: none;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .mobile-phone-fab:hover,
 .mobile-phone-fab:active {
 transform: scale(1.1);
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
 color: #fff;
 }

 .mobile-phone-fab svg {
 width: 22px;
 height: 22px;
 }
}

/* ---------------------------------------------------------------------------
 VIDEO STORY SECTION
 Side-by-side: vertical video in phone frame + text/CTA
 --------------------------------------------------------------------------- */

.video-story {
 padding: 4rem 0;
 background: var(--color-navy, #1B2A4A);
 color: #fff;
 overflow: hidden;
}

.video-story__inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
 display: grid;
 grid-template-columns: 1fr;
 gap: 2.5rem;
 align-items: center;
}

.video-story__phone {
 justify-self: center;
 position: relative;
 width: 220px;
 height: 390px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.video-story__phone video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.video-story__content {
 text-align: center;
}

.video-story__label {
 display: inline-block;
 font-size: 0.75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.15em;
 color: var(--color-accent, #D4A843);
 margin-bottom: 0.75rem;
}

.video-story__title {
 font-family: var(--font-heading, 'Inter', sans-serif);
 font-size: 1.75rem;
 font-weight: 700;
 line-height: 1.2;
 margin: 0 0 1rem;
 color: #fff;
}

.video-story__text {
 font-size: 1rem;
 line-height: 1.7;
 color: rgba(255, 255, 255, 0.8);
 margin: 0 0 1.5rem;
}

.video-story__text strong {
 color: #fff;
}

@media (min-width: 768px) {
 .video-story {
 padding: 5rem 0;
 }

 .video-story__inner {
 grid-template-columns: auto 1fr;
 gap: 4rem;
 padding: 0 3rem;
 }

 .video-story__phone {
 width: 260px;
 height: 462px;
 border-radius: 32px;
 }

 .video-story__content {
 text-align: left;
 }

 .video-story__title {
 font-size: 2rem;
 }
}

@media (min-width: 1024px) {
 .video-story__phone {
 width: 300px;
 height: 533px;
 border-radius: 36px;
 }

 .video-story__title {
 font-size: 2.25rem;
 }

 .video-story__inner {
 gap: 5rem;
 }
}

/* ===========================================================================
 P3 - Nav dropdowns (Sell, Buy, About, Resources)
 CSS-only hover + focus-within reveal on desktop; accordion on mobile.
 =========================================================================== */

.nav__dropdown {
 position: relative;
 display: inline-block;
}

.nav__dropdown-toggle {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 background: none;
 border: 0;
 padding: var(--space-3) var(--space-4);
 font-family: inherit;
 font-size: 1rem;
 font-weight: var(--fw-medium);
 color: inherit;
 cursor: pointer;
 text-decoration: none;
}

.nav__dropdown-toggle.is-active {
 color: var(--color-accent);
}

.nav__dropdown-toggle::after {
 content: "▾";
 font-size: 0.7em;
 opacity: 0.6;
 transition: transform 0.2s ease;
}

.nav__dropdown:hover .nav__dropdown-toggle::after,
.nav__dropdown:focus-within .nav__dropdown-toggle::after { transform: rotate(180deg); }

.nav__submenu {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 min-width: 320px;
 max-width: min(420px, 92vw);
 background: white;
 border: 1px solid rgba(27, 42, 74, 0.08);
 border-radius: 10px;
 box-shadow: 0 16px 40px rgba(15, 25, 50, 0.18);
 padding: 12px;
 display: none;
 z-index: 10001;           /* above any hero / sticky element */
 list-style: none;
 margin: 0;
 /* Invisible bridge above the menu so cursor can travel from the toggle to the
    menu without :hover dropping out. */
 border-top: 6px solid transparent;
 background-clip: padding-box;
}

/* Right-anchor the last two dropdowns so they never extend past the viewport.
   Works for any 4+ item nav where the rightmost columns risk being clipped. */
.nav__dropdown:nth-last-child(-n+2) .nav__submenu,
.nav__dropdown.nav__dropdown--right .nav__submenu {
 left: auto;
 right: 0;
}

.nav__dropdown:hover .nav__submenu,
.nav__dropdown:focus-within .nav__submenu { display: block; animation: nav-submenu-in 220ms cubic-bezier(0.2, 0.85, 0.2, 1); }

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

.nav__submenu li { padding: 0; margin: 0; }

.nav__submenu--listings {
 min-width: 390px;
}

.nav__submenu-section {
 padding: 10px 14px 5px;
 font-size: 0.68rem;
 font-weight: 800;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: #778DA9;
}

.nav__submenu a {
 display: block;
 padding: 12px 14px;
 font-size: 0.9375rem;
 color: var(--color-navy);
 text-decoration: none;
 border-radius: 6px;
 transition: background 0.15s ease, color 0.15s ease;
 line-height: 1.3;
}

/* Parent/child two-line item: bold label + subtitle on a second line.
   Markup: <a><strong>Label</strong><small>Subtitle</small></a> */
.nav__submenu a strong {
 display: block;
 font-weight: 600;
 font-size: 0.95rem;
 letter-spacing: -0.012em;
}
.nav__submenu a small {
 display: block;
 font-size: 0.78rem;
 color: #6B7280;
 font-weight: 400;
 margin-top: 2px;
 letter-spacing: 0;
}

.nav__submenu a:hover,
.nav__submenu a:focus {
 background: rgba(197, 123, 22, 0.10);
 color: var(--color-navy);
}
.nav__submenu a:hover small,
.nav__submenu a:focus small { color: #3D4B66; }

.nav__submenu a.is-featured {
 font-weight: 700;
 color: #C57B16;
 background: linear-gradient(180deg, rgba(197,123,22,0.06) 0%, transparent 100%);
}
.nav__submenu a.is-featured strong { color: #C57B16; }

.nav__submenu a.is-featured::before {
 content: "→ ";
 color: #C57B16;
 font-weight: 700;
}

/* Subtle amber accent rule at the top of each submenu */
.nav__submenu::before {
 content: "";
 position: absolute;
 top: -1px; left: 24px; right: 24px;
 height: 2px;
 background: linear-gradient(90deg, #C57B16, transparent 80%);
 border-radius: 1px;
 pointer-events: none;
}

/* Mobile - accordion pattern inside full-screen nav__menu overlay */
@media (max-width: 767px) {
 .nav__menu {
 align-items: center;
 justify-content: flex-start;
 gap: 10px;
 padding: 88px 24px 32px;
 }
 .nav__dropdown {
 width: min(100%, 380px);
 text-align: center;
 }
 .nav__dropdown-toggle {
 width: 100%;
 justify-content: center;
 color: white;
 font-size: 1.1rem;
 padding: 12px 0;
 text-align: center;
 }
 .nav__submenu {
 position: static;
 background: transparent;
 border: 0;
 box-shadow: none;
 padding: 0;
 margin-top: 8px;
 margin-bottom: 8px;
 display: none;
 text-align: center;
 }
 .nav__submenu--listings {
 min-width: auto;
 }
 .nav__submenu-section {
 color: rgba(255, 255, 255, 0.48);
 padding-top: 14px;
 }
 .nav__dropdown.is-open .nav__submenu { display: block; }
 .nav__submenu a {
 color: rgba(255, 255, 255, 0.85);
 padding: 9px 12px;
 text-align: center;
 }
 .nav__submenu a small { margin-left: auto; margin-right: auto; }
	 .nav__menu-cta {
	 width: min(100%, 380px);
	 align-items: center;
	 text-align: center;
	 }
	 .nav__menu .nav__menu-cta .nav__call-link {
	 color: rgba(255, 255, 255, 0.88) !important;
	 }
	 .nav__menu .nav__menu-cta .nav__estimate-link {
	 color: var(--color-accent) !important;
	 }
	 .nav__submenu a:hover,
	 .nav__submenu a:focus,
	 .nav__submenu a.is-featured {
 color: var(--color-accent);
 background: transparent;
 }
}

/* ===========================================================================
 Footer-legal compact block (used across all pages)
 =========================================================================== */
.footer-legal,
.property-page .footer-legal {
 margin-top: var(--space-5);
 padding-top: var(--space-4);
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 font-size: 0.8125rem;
 color: rgba(255, 255, 255, 0.82);
 text-align: center;
 line-height: 1.8;
}
.footer-legal a,
.property-page .footer-legal a {
 color: rgba(255, 255, 255, 0.9);
 text-decoration: none;
}
.footer-legal a:hover,
.property-page .footer-legal a:hover {
 color: var(--color-accent);
 text-decoration: underline;
}

/* ===========================================================================
 P3 - Homepage hero with full-bleed AI/Ken-Burns background
 =========================================================================== */
.home-hero {
 position: relative;
 min-height: 88vh;
 display: flex;
 align-items: center;
 overflow: hidden;
 color: white;
 isolation: isolate;
}
.home-hero__bg {
 position: absolute;
 inset: 0;
 z-index: 0;
}
.home-hero__bg video,
.home-hero__bg .home-hero__kenburns {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}
.home-hero__kenburns {
 background-size: cover;
 background-position: center;
 animation: kenBurnsHome 26s ease-in-out infinite alternate;
 will-change: transform;
}
@keyframes kenBurnsHome {
 0% { transform: scale(1.0); }
 100% { transform: scale(1.08); }
}
.home-hero__overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(15,22,45,0.7), rgba(27,42,74,0.55) 70%, rgba(15,22,45,0.78));
 z-index: 1;
}
.home-hero__content {
 position: relative;
 z-index: 2;
 max-width: var(--container-max);
 width: 100%;
 margin: 0 auto;
 padding: var(--space-8) var(--space-4);
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-6);
 align-items: center;
}
@media (min-width: 1024px) {
 .home-hero__content {
 grid-template-columns: 1.2fr 1fr;
 gap: var(--space-8);
 padding: var(--space-12) var(--space-6);
 }
}
.home-hero__headline {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: clamp(2.4rem, 5vw, 4.2rem);
 font-weight: 600;
 line-height: 1.05;
 margin: 0 0 var(--space-4);
 color: white;
 letter-spacing: -0.01em;
}
.home-hero__lede {
 font-size: 1.125rem;
 line-height: 1.6;
 color: rgba(255, 255, 255, 0.85);
 margin: 0 0 var(--space-5);
 max-width: 540px;
}
.home-hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-3);
}
@media (prefers-reduced-motion: reduce) {
 .home-hero__kenburns { animation: none; transform: none; }
 .home-hero__bg video { display: none; }
}

/* Featured property card (homepage hero right side) */
.home-featured {
 position: relative;
 background: white;
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
 color: var(--color-navy);
 transform-style: preserve-3d;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 will-change: transform;
}
.home-featured:hover {
 transform: translateY(-4px);
 box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}
.home-featured__badge {
 position: absolute;
 top: 16px;
 left: 16px;
 z-index: 3;
 background: #d4a843;
 color: var(--color-navy);
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 padding: 6px 12px;
 border-radius: 20px;
}
.home-featured__image {
 position: relative;
 aspect-ratio: 16 / 10;
 background: linear-gradient(135deg, #1B2A4A, #0F162D);
 overflow: hidden;
}
.home-featured__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.home-featured__body {
 padding: var(--space-5);
}
.home-featured__price {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: 2.4rem;
 font-weight: 600;
 color: var(--color-navy);
 line-height: 1;
 margin: 0 0 8px;
}
.home-featured__address {
 font-size: 1.0625rem;
 font-weight: 600;
 color: var(--color-navy);
 margin: 0 0 6px;
}
.home-featured__specs {
 font-size: 0.875rem;
 color: var(--color-text-light);
 margin: 0 0 var(--space-4);
 letter-spacing: 0.01em;
}
.home-featured__cta {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 background: var(--color-navy);
 color: white;
 padding: 12px 18px;
 border-radius: 8px;
 text-decoration: none;
 font-weight: 600;
 font-size: 0.9375rem;
 transition: background 0.2s ease;
}
.home-featured__cta:hover {
 background: var(--color-accent);
 color: var(--color-navy);
}

/* Homepage 6-card seller scenarios grid */
.home-scenarios {
 padding: var(--space-12) var(--space-4);
 background: var(--color-cream);
}
.home-scenarios__grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-4);
 max-width: 1200px;
 margin: 0 auto;
}
@media (min-width: 768px) { .home-scenarios__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-scenarios__grid { grid-template-columns: repeat(3, 1fr); } }

.scenario-card {
 position: relative;
 background: white;
 border: 1px solid rgba(27, 42, 74, 0.08);
 border-radius: 14px;
 padding: var(--space-5);
 text-decoration: none;
 color: var(--color-navy);
 transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.scenario-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 16px 40px rgba(15, 25, 50, 0.1);
 border-color: rgba(212, 168, 67, 0.5);
}
.scenario-card__icon {
 font-size: 32px;
 line-height: 1;
}
.scenario-card__title {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: 1.5rem;
 font-weight: 600;
 margin: 0;
 color: var(--color-navy);
}
.scenario-card__text {
 font-size: 0.9375rem;
 color: var(--color-text-light);
 line-height: 1.55;
 margin: 0;
 flex: 1;
}
.scenario-card__cta {
 font-size: 0.8125rem;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--color-accent);
 font-weight: 700;
}

/* ============================================================
 HOMEPAGE - Services + Process grids (Coolors palette aligned)
 ============================================================ */
.home-services { padding: 88px 24px; background: #FFFFFF; }
.services-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 max-width: 1280px;
 margin: 0 auto;
}
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
 background: #FFFFFF;
 border: 1px solid rgba(13, 27, 42, 0.10);
 border-top: 3px solid #EC9A29;
 border-radius: 8px;
 padding: 28px 24px;
 display: flex;
 flex-direction: column;
 gap: 14px;
 transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 16px 36px rgba(13, 27, 42, 0.10);
}
.service-card__num {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: 2.6rem;
 font-weight: 600;
 line-height: 1;
 color: #EC9A29;
 letter-spacing: -0.02em;
}
.service-card__title {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: 1.4rem;
 font-weight: 600;
 color: #0D1B2A;
 margin: 0;
 line-height: 1.2;
}
.service-card__body {
 color: #3D4B66;
 font-size: 0.95rem;
 line-height: 1.6;
 margin: 0;
 flex: 1;
}
.service-card__cta {
 font-size: 0.78rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #C57B16;
 font-weight: 700;
 text-decoration: none;
 border-bottom: 2px solid transparent;
 align-self: flex-start;
 padding-bottom: 2px;
 transition: border-color 0.2s ease;
}
.service-card__cta:hover { border-bottom-color: #C57B16; }

/* Process steps */
.home-process { padding: 88px 24px; }
.process-grid {
 list-style: none;
 margin: 0 auto;
 padding: 0;
 max-width: 1280px;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 28px;
 counter-reset: process;
}
@media (max-width: 1024px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; gap: 20px; } }
.process-step {
 background: #FFFFFF;
 border: 1px solid rgba(13, 27, 42, 0.10);
 border-radius: 10px;
 padding: 32px 28px 28px;
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 16px;
 box-shadow: 0 4px 16px rgba(13, 27, 42, 0.05);
}
.process-step__num {
 display: inline-block;
 background: #1B263B;
 color: #EC9A29;
 font-size: 0.68rem;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 padding: 5px 12px;
 border-radius: 999px;
 align-self: flex-start;
 margin-bottom: 4px;
}
.process-step__title {
 /* Sans-serif w/ tight tracking — Cormorant's italic ampersand reads off in titles.
    Manrope's ampersand is upright and balanced. */
 font-family: 'Manrope', 'Inter', system-ui, sans-serif;
 font-size: 1.18rem;
 font-weight: 700;
 color: #0D1B2A;
 line-height: 1.3;
 letter-spacing: -0.012em;
 margin: 0;
 text-wrap: balance;
}
.process-step__body {
 color: #3D4B66;
 font-size: 0.95rem;
 line-height: 1.65;
 margin: 0;
 flex: 1;
}
.process-step__lead {
 font-size: 0.78rem;
 color: #778DA9;
 margin: 0;
 padding-top: 12px;
 border-top: 1px solid rgba(13, 27, 42, 0.08);
 letter-spacing: 0.02em;
 line-height: 1.5;
}
.process-step__lead strong { color: #1B263B; font-weight: 600; }