/* ============================================================================
   HOUZZHUNT — CORPORATE DESIGN SYSTEM
   Phase 1: foundation (tokens, typography, buttons, forms, cards, nav, footer)
   Loaded LAST on every page so it governs the look. UI-only — no content/asset
   /link changes. Palette: charcoal base + single teal accent. Font: Helvetica.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
    /* neutrals / ink */
    --c-ink: #1c2329;
    /* headings, strong text */
    --c-body: #586470;
    /* body copy */
    --c-muted: #8a949b;
    /* captions, meta */

    /* accent (the only one) */
    --c-accent: #09747f;
    --c-accent-700: #0b5159;
    /* hover / deep */
    --c-accent-soft: rgba(9, 116, 127, 0.08);
    --c-gold: #edbb68;
    /* legacy secondary, used sparingly */

    /* surfaces */
    --c-surface: #ffffff;
    --c-surface-2: #f5f7f8;
    /* off-white section */
    --c-border: #e6eaec;
    /* hairline */
    --c-dark: #10242a;
    /* footer / dark sections */

    /* shape & depth */
    --c-radius: 16px;
    --c-radius-sm: 8px;
    --c-shadow: 0 16px 44px rgba(16, 36, 42, 0.10);
    --c-shadow-sm: 0 8px 22px rgba(16, 36, 42, 0.07);

    /* rhythm */
    --c-container: 1240px;
    --c-section-y: clamp(64px, 8vw, 96px);
    --c-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------------------
   2. BASE
   ---------------------------------------------------------------------------- */
body {
    color: var(--c-body);
    font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    transition: color 0.2s var(--c-ease);
}

::selection {
    background: var(--c-accent);
    color: #fff;
}

a:focus-visible,
button:focus-visible,
.gradient-btn:focus-visible,
.nav-cta-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* shared spacing helper (opt-in) */
.cx-section {
    padding: var(--c-section-y) 0;
}

.cx-surface-2 {
    background: var(--c-surface-2);
}

/* eyebrow label (opt-in, reusable) */
.cx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-accent);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
}

.cx-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--c-accent);
    display: inline-block;
}

/* ----------------------------------------------------------------------------
   3. BUTTONS (unify the project's button classes)
   ---------------------------------------------------------------------------- */
.gradient-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: var(--c-radius-sm);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background 0.25s var(--c-ease), color 0.25s var(--c-ease),
        transform 0.25s var(--c-ease), box-shadow 0.25s var(--c-ease),
        border-color 0.25s var(--c-ease);
}

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

/* primary — teal solid */
.btn-green-glossy {
    background: var(--c-accent) !important;
    color: #ffffff !important;
}

.btn-green-glossy:hover {
    background: var(--c-accent-700) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(9, 116, 127, 0.28);
}

/* secondary — gold (used on hero / dark CTA only) */
.btn-yellow-white {
    background: var(--c-gold) !important;
    color: #0b3b40 !important;
}

.btn-yellow-white:hover {
    background: #e6ad4f !important;
    color: #0b3b40 !important;
    box-shadow: 0 12px 26px rgba(237, 187, 104, 0.40);
}

/* outline variant (opt-in) */
.cx-btn-outline {
    background: transparent !important;
    color: var(--c-accent) !important;
    border: 1px solid var(--c-accent) !important;
}

.cx-btn-outline:hover {
    background: var(--c-accent) !important;
    color: #fff !important;
}

/* bootstrap primaries mapped to the accent */
.btn-primary,
.btn-theme {
    background-color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
    border-radius: var(--c-radius-sm) !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-theme:hover {
    background-color: var(--c-accent-700) !important;
    border-color: var(--c-accent-700) !important;
    color: #fff !important;
}

/* ----------------------------------------------------------------------------
   4. FORM FIELDS
   ---------------------------------------------------------------------------- */
.form-control {
    border-radius: var(--c-radius-sm);
    border: 1px solid var(--c-border);
    transition: border-color 0.2s var(--c-ease), box-shadow 0.2s var(--c-ease);
}

.form-control:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* ----------------------------------------------------------------------------
   5. NAVBAR (refine colours / states only — structure & behaviour preserved)
   ---------------------------------------------------------------------------- */
.navbar-custom .nav-link {
    transition: color 0.2s var(--c-ease);
}

.navbar-custom .nav-link:hover {
    color: var(--c-gold);
}

/* solid, on-brand bar once scrolled — keeps the white logo + links readable */
.navbar-custom.navbar-scrolled {
    background: var(--c-dark) !important;
    box-shadow: 0 8px 30px rgba(16, 36, 42, 0.25);
    transition: background 0.3s var(--c-ease), box-shadow 0.3s var(--c-ease);
}

/* nav CTA pill */
.nav-cta-btn {
    background: var(--c-accent);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--c-radius-sm);
    font-weight: 600;
    line-height: 1.2;
    transition: background 0.25s var(--c-ease), transform 0.25s var(--c-ease),
        box-shadow 0.25s var(--c-ease);
}

.nav-cta-btn:hover {
    background: var(--c-accent-700);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(9, 116, 127, 0.3);
}

/* mega-menu CTA */
.mega-cta-btn {
    background: var(--c-accent);
    color: #fff;
    border-radius: var(--c-radius-sm);
    transition: background 0.25s var(--c-ease);
}

.mega-cta-btn:hover {
    background: var(--c-accent-700);
    color: #fff;
}

/* ----------------------------------------------------------------------------
   6. FOOTER (charcoal base + teal accent)
   ---------------------------------------------------------------------------- */
.footer-section-five {
    background-color: var(--c-dark) !important;
    background-image: none !important;
    padding: clamp(48px, 7vw, 90px) 0 36px 0;
}

.footer-section-five h4 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 22px;
}

.footer-section-five .footer-menu-two li a,
.footer-section-five .footer-location-four li a,
.footer-section-five .footer-location-four li p {
    color: rgba(255, 255, 255, 0.72) !important;
    transition: color 0.2s var(--c-ease), padding-left 0.2s var(--c-ease);
}

.footer-section-five .footer-menu-two li a:hover {
    color: #ffffff !important;
    padding-left: 4px;
}

.footer-section-five .footer-location-four li a:hover {
    color: var(--c-gold) !important;
}

.footer-section-five .footer-location-four li span {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px;
}

.footer-section-five .footer-social-media-five a {
    transition: transform 0.2s var(--c-ease), opacity 0.2s var(--c-ease);
    display: inline-block;
}

.footer-section-five .footer-social-media-five a:hover {
    transform: translateY(-3px);
    opacity: 0.85;
}

.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 50px;
    padding: 22px 0 !important;
}

.site-footer .footer-left,
.site-footer .footer-right .footer-link {
    color: rgba(255, 255, 255, 0.6) !important;
}

.site-footer .footer-right .footer-link:hover {
    color: var(--c-gold) !important;
}

/* ----------------------------------------------------------------------------
   7. GENERIC CARD POLISH (bootstrap .card baseline)
   ---------------------------------------------------------------------------- */
.cx-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow-sm);
    transition: transform 0.3s var(--c-ease), box-shadow 0.3s var(--c-ease);
}

.cx-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--c-shadow);
}


/* ============================================================================
   Global typography + heading colour
   - One font across the whole site: Helvetica (icon fonts are left untouched, so
     Font Awesome / Boxicons / Bootstrap Icons keep rendering correctly).
   - All headings use a single colour: #222.
   ============================================================================ */
:root {
    --uniqo-heading-font: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --uniqo-body-font: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* `span` / `i` are intentionally NOT forced here so icon fonts (Font Awesome,
   Boxicons, Bootstrap Icons) keep working — text spans inherit Helvetica anyway. */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
ol,
li,
blockquote,
button,
input,
select,
textarea,
label,
table,
th,
td,
figure,
figcaption,
.btn,
[class*="title"],
[class*="heading"] {
    font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* ---- Single heading colour: force every heading to #222 ... ---- */
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
.heading-title,
.heading-title *,
.section-title,
.section-title *,
.sec-title,
.sub-title,
[class*="title"],
[class*="heading"],
.whiteYellow,
.text-gradientFont {
    color: #222 !important;
    -webkit-text-fill-color: #222 !important;
}

/* ---- ...then restore the headings that sit on dark / image backgrounds so
        they stay readable (white). Selectors that aren't used simply no-op. ---- */
.hero-content h1,
.hero-content h1 *,
#hero-content .hero-heading,
.service-left-one .heading-title,
.service-left-one .heading-title *,
.valunxt-heading,
.valunxt-heading *,
.counter-box h3.counter-number,
.mortgage-main-title,
.contact-title,
.permit-heading,
.hh-feature-title,
.page-header-heading,
.page-header-heading h2,
.page-header-heading *,
.banner-sub-title-one h2,
.banner-slide-item-one h1.heading-title,
.banner-heading-box-four h1,
.work-section-one .heading-title,
.work-section-one .sub-title,
.light .heading-title,
.light .sub-title,
.service-section-three .heading-title,
.cta-section-three .heading-title,
.footer-newslatter-three .heading-title,
.counter-box-one h4,
.about-list-inner-two h4,
.why-choose-box-two h4,
.work-section-two .nav-link h4,
.process-box-two h4,
.portfolio-details-two h4,
.footer-section-two h4,
.portfolio-title-three h4,
.portfolio-box-three-1 h4,
.portfolio-item-three h5,
.footer-section-three .footer-widget-two h4,
.service-details-four h4,
.service-box-five h4,
.process-box-five h4,
.why-choose-details-five h4,
.service-section-five .sub-title-two,
.process-section-five .sub-title-two,
.why-choose-inner-five .sub-title-two,
.service-details-cta-widget h5,
.place-order-box h4,
.order-product-info h6,
.why-choose-box-six h4,
.footer-section-five h1,
.footer-section-five h2,
.footer-section-five h3,
.footer-section-five h4,
.footer-section-five h5,
.footer-section-five h6,
.hh-hero-title,
.hh-hero-title * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ---- Uniform heading weight across the whole site ---- */
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
.heading-title,
.heading-title *,
.section-title,
.section-title *,
.sec-title,
.sub-title,
[class*="title"],
[class*="heading"] {
    font-weight: 500 !important;
}

/* ---- Make highlight spans match their heading: one solid colour per heading
        (white on dark sections, #222 on light) — no split dark/white text. ---- */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
.heading-title span,
.section-title span,
.sec-title span,
.sub-title span,
.whiteYellow,
.text-gradientFont {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* ---- Services section: left column sits on a teal background, so all of its
        text (eyebrow label, headings, paragraphs) must be white. The right
        column holds white service cards, so it is intentionally left alone. ---- */
.service-left-one small,
.service-left-one .text-uppercase,
.service-left-one .sub-title,
.service-left-one p,
.service-left-one .lead,
.service-left-one .service-left-details-one p {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ---- More sections on dark / teal / image backgrounds: keep ALL their text
        white (headings + labels + paragraphs). These headings were white in the
        theme and must stay white. ---- */
/* "Where Luxury Is Lived" (portfolio-section-three, teal) — subtitle */
.portfolio-section-three .heading-box p,
.heading-box.light p,
/* Newsletter (teal gradient card) */
.newsletter-content-side h2,
.newsletter-content-side h2 span,
.newsletter-label,
.newsletter-content-side>p,
.newsletter-trust-badges,
.newsletter-trust-badges .trust-item,
.newsletter-trust-badges .trust-item span,
.newsletter-trust-badges i,
/* Other dark/teal sections & cards */
.valuation-content h2,
.subscribe-info-card h2,
.subscribe-info-card p,
.why-wrapper h2,
.why-chooseList h6,
.card h5,
.noctis-card-overlay h4,
.popup-image-content h3,
.floorplans-section .floorplan-tab.active h4,
.service-card-content h5 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ============================================================================
   CORPORATE REDESIGN — homepage sections (neat, clean, houzzhunt colours)
   Palette: teal #09747f, deep teal #0b5159, gold accent #edbb68,
            ink #222, muted #6b7a7a, light surface #f4f8f8, hairline #e4ecec
   ============================================================================ */

/* ---------- 1. ABOUT US ---------- */
.about-section-one {
    padding: 90px 0;
    background: #ffffff;
}

.about-section-one .row {
    align-items: stretch;
}

.about-section-one .about-left-one {
    height: 100% !important;
    position: relative;
}

.about-section-one .about-left-one img {
    position: static !important;
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(9, 116, 127, 0.14);
}

.about-section-one .about-right-one {
    padding-left: 60px;
    margin-top: 0;
}

.about-section-one .heading-box small.text-uppercase {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #09747f !important;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 14px;
}

.about-section-one .heading-box small.text-uppercase::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #09747f;
    display: inline-block;
}

.about-section-one .heading-title {
    margin-bottom: 22px !important;
    line-height: 1.2;
}

.about-section-one .about-details-one {
    padding-left: 0;
    border-left: 0;
}

.about-section-one .about-details-one>p.lead {
    color: #5a6a6a;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 30px !important;
}

/* feature row -> clean card */
.about-section-one .about-details-inner-one {
    align-items: flex-start;
    column-gap: 20px;
    margin-bottom: 30px;
    padding: 24px;
    background: #f4f8f8;
    border: 1px solid #e4ecec;
    border-radius: 14px;
}

.about-section-one .about-details-inner-one>span {
    border: 0;
    padding: 0;
    flex-shrink: 0;
}

.about-section-one .about-details-inner-one>span>span {
    height: 64px;
    width: 64px;
    background: #09747f !important;
    border-radius: 14px;
}

.about-section-one .about-details-inner-one>span>span svg {
    width: 30px;
    height: 30px;
}

.about-section-one .about-details-inner-one>span>span svg path {
    stroke: #ffffff;
}

.about-section-one .about-details-box-title h5 {
    color: #222 !important;
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 6px;
}

.about-section-one .about-details-box-title p {
    color: #5a6a6a;
    font-size: 15px;
    line-height: 1.6;
}

/* stat block (fix the invisible gradient number) */
.about-section-one .about-project-one {
    margin-left: 0;
    border-top: 0;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
    border: 1px solid #e4ecec;
    border-radius: 14px;
    margin-bottom: 32px;
}

.about-section-one .about-project-one h4 {
    font-size: 52px;
    font-weight: 700;
    background: none !important;
    -webkit-text-fill-color: #09747f !important;
    color: #09747f !important;
    width: auto;
    text-align: left;
    border-right: 1px solid #e4ecec;
    padding-right: 22px;
    line-height: 1;
}

.about-section-one .about-project-one p {
    width: auto;
    padding: 0;
    color: #5a6a6a !important;
    font-size: 15px;
    line-height: 1.6;
}

.about-section-one .gradient-btn,
.about-section-one .btn-green-glossy {
    display: inline-block;
    background: #09747f !important;
    color: #ffffff !important;
    padding: 14px 36px;
    border-radius: 8px;
    font-weight: 600;
    border: 0;
    transition: background 0.25s ease, transform 0.25s ease;
}

.about-section-one .gradient-btn:hover,
.about-section-one .btn-green-glossy:hover {
    background: #0b5159 !important;
    transform: translateY(-2px);
}

/* ---------- 2. RESOURCE CENTER ---------- */
.noctis-cards-section {
    padding: 0px 0;
    background: #f4f8f8;
}

.noctis-cards-section .noctis-header {
    align-items: center;
    margin-bottom: 44px;
}

.noctis-cards-section .section-tag {
    background: #ffffff !important;
    border: 1px solid #d7e6e6;
    color: #09747f !important;
}

.noctis-cards-section .section-title {
    font-size: 38px;
}

.noctis-cards-section .noctis-nav-buttons button {
    width: 48px;
    height: 48px;
    border: 1px solid #09747f;
}

.noctis-cards-section .noctis-card {
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(9, 116, 127, 0.10);
}

.noctis-cards-section .noctis-card:hover {
    box-shadow: 0 22px 48px rgba(9, 116, 127, 0.18);
}

.noctis-cards-section .noctis-card-image {
    border-radius: 16px;
}

.noctis-cards-section .noctis-card-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- 3. WHERE LUXURY IS LIVED ---------- */
.hh-luxury-section.portfolio-section-three {
    background: linear-gradient(150deg, #10242a 0%, #123c44 100%) !important;
    padding: 90px 0 80px;
    border-radius: 0;
}

.hh-luxury-section .heading-box {
    margin-bottom: 44px;
}

.hh-luxury-section .heading-title {
    margin-bottom: 12px !important;
}

.hh-luxury-section .heading-box p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px;
    margin-bottom: 0 !important;
}

/* neat equal grid instead of expanding accordion */
.hh-luxury-section .portfolio-three {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    column-gap: 24px;
    margin-bottom: 0;
}

.hh-luxury-section .portfolio-box-three {
    width: auto !important;
    border-radius: 18px;
    overflow: hidden;
}

.hh-luxury-section .portfolio-box-three:hover {
    width: auto !important;
}

.hh-luxury-section .portfolio-image-three {
    height: 360px !important;
    border-radius: 18px;
}

.hh-luxury-section .portfolio-box-three:hover .portfolio-image-three {
    height: 360px !important;
}

.hh-luxury-section .portfolio-image-three::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 50, 55, 0.92) 0%, rgba(6, 50, 55, 0) 55%);
    border-radius: 18px;
    z-index: 1;
}

.hh-luxury-section .portfolio-image-three {
    position: relative;
}

/* details always visible, clean caption */
.hh-luxury-section .portfolio-details-three {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2;
    padding: 22px;
    align-items: flex-end;
}

.hh-luxury-section .portfolio-title-three h4 {
    font-size: 22px;
    margin-bottom: 6px;
    background-image: none !important;
    animation: none !important;
}

.hh-luxury-section .portfolio-title-three p {
    font-size: 14px !important;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}

.hh-luxury-section .portfolio-btn-three {
    height: 46px;
    width: 46px;
    background: #edbb68 !important;
    flex-shrink: 0;
}

.hh-luxury-section .portfolio-btn-three img {
    width: 18px;
    filter: brightness(0) invert(0);
}

/* ---------- 4. QUICK INSIGHTS (videos) ---------- */
#video-section {
    padding: 90px 0 !important;
    background: #ffffff !important;
}

#video-section .lef-video {
    padding-right: 40px;
}

#video-section .lef-video h2 {
    margin-bottom: 16px;
    font-size: clamp(28px, 2.3vw, 36px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.5px;
}

#video-section .lef-video h2 span {
    color: var(--c-ink) !important;
    -webkit-text-fill-color: var(--c-ink) !important;
}

#video-section .lef-video>p {
    color: #5a6a6a !important;
    font-size: 16px;
    line-height: 1.7;
    max-width: 360px;
}

#video-section .slider-nav-buttons button {
    border: 1.5px solid var(--c-accent);
    background: transparent;
    color: var(--c-accent);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform .3s var(--c-ease), background .3s var(--c-ease), color .3s var(--c-ease), box-shadow .3s var(--c-ease);
}

#video-section .slider-nav-buttons button.btn-active,
#video-section .slider-nav-buttons button:hover {
    background: var(--c-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(9, 116, 127, 0.3);
}

#video-section .video-slide {
    border-radius: 16px;
    margin: 0 10px;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .about-section-one .about-right-one {
        padding-left: 0;
        margin-top: 30px;
    }

    .hh-luxury-section .portfolio-three {
        grid-template-columns: repeat(2, 1fr);
    }

    #video-section .lef-video {
        padding-right: 0;
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .about-section-one .about-project-one {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .about-section-one .about-project-one h4 {
        border-right: 0;
        padding-right: 0;
    }

    .hh-luxury-section .portfolio-three {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   CORPORATE REDESIGN — PART 2: remaining homepage sections
   Same design language: teal #09747f / deep teal #0b5159, gold #edbb68 accent,
   ink #222, muted #5a6a6a, light surface #f4f8f8, hairline #e9efef.
   Shared: section padding 90px, eyebrow = teal caps + short rule, soft cards.
   ============================================================================ */

/* ---- shared eyebrow (small caps label with a short teal rule) ---- */
.divorce-left small.text-uppercase,
.mortgage-content small.text-uppercase {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #09747f !important;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 14px;
}

.divorce-left small.text-uppercase::before,
.mortgage-content small.text-uppercase::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #09747f;
    display: inline-block;
}

/* shared primary buttons */
.divorce-section .gradient-btn,
.mortgage-section .gradient-btn,
.consult-section .gradient-btn,
.news-blog-section .gradient-btn,
.cta-section-three .gradient-btn {
    display: inline-block;
    background: #09747f !important;
    color: #ffffff !important;
    padding: 14px 34px;
    border-radius: 8px;
    font-weight: 600;
    border: 0;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.divorce-section .gradient-btn:hover,
.mortgage-section .gradient-btn:hover,
.consult-section .gradient-btn:hover,
.news-blog-section .gradient-btn:hover {
    background: #0b5159 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(9, 116, 127, 0.25);
}

/* ---- HERO — centered content, no overlay ---- */
.hero {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 660px;
    background: var(--c-dark);
}

/* panorama stays full-bleed, behind everything */
.hero>img {
    z-index: 0 !important;
}

/* light, center-weighted overlay for content legibility */
.hero::before {
    display: block !important;
    z-index: 1 !important;
    background: radial-gradient(ellipse at center,
            rgba(16, 36, 42, 0.48) 0%,
            rgba(16, 36, 42, 0.30) 45%,
            rgba(16, 36, 42, 0.12) 100%) !important;
}

/* decorative scroll cue (no text/content added) */
.hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 24px;
    height: 38px;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    z-index: 2;
    animation: heroScrollCue 2.2s var(--c-ease) infinite;
}

@keyframes heroScrollCue {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateX(-50%) translateY(6px);
        opacity: 1;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    bottom: auto !important;
    text-align: center !important;
    max-width: var(--c-container) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100%;
}

.hero-content h1 {
    max-width: 780px;
    margin: 0 auto !important;
    padding-left: 0 !important;
    font-size: clamp(40px, 4.6vw, 62px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}

/* no accent bar in the centered layout */
.hero-content h1::before {
    display: none !important;
}

.hero-content h1 em {
    color: var(--c-gold) !important;
    -webkit-text-fill-color: var(--c-gold) !important;
    font-style: normal;
}

.hero-content p {
    max-width: 580px !important;
    margin: 24px auto 34px auto !important;
    font-size: 17px !important;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.hero-content .gradient-btn {
    display: inline-block;
    margin: 0 !important;
    background: var(--c-gold) !important;
    color: #0b3b40 !important;
    padding: 15px 40px;
    border-radius: var(--c-radius-sm);
    font-weight: 700;
    transition: transform .25s var(--c-ease), box-shadow .25s var(--c-ease);
}

.hero-content .gradient-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(237, 187, 104, 0.4);
}

@media (max-width: 767px) {
    .hero::after {
        display: none;
    }
}

/* ============================================================
   VIDEO HERO (homepage) — left-aligned, full-bleed background
   ============================================================ */
.hh-hero {
    position: relative;
    width: 100%;
    margin: 0;
    min-height: clamp(520px, 82vh, 860px);
    overflow: hidden;
    border-radius: 0;
    background: var(--c-dark);
}

/* the looping background video */
.hh-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* nudge the framing up so more of the subject/sky shows */
    object-position: center 30%;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 991px) {
    .hh-hero {
        margin: 0;
        min-height: 72vh;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hh-hero-video {
        display: none;
    }
}

/* ---- Hero overlay: copy + glass search card ---- */
.hh-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    /* very very light overlay — barely-there tint, slight extra at the left for text */
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .04) 35%, rgba(0, 0, 0, 0) 60%),
        rgba(0, 0, 0, .06);
}

.hh-hero-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hh-hero-copy {
    flex: 1 1 auto;
    color: #fff;
    max-width: 620px;
}

.hh-hero-title {
    font-size: clamp(44px, 5.6vw, 92px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hh-hero-sub {
    font-size: clamp(15px, 1.25vw, 19px);
    line-height: 1.5;
    max-width: 420px;
    margin: 0;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

/* Glass search card */
.hh-hero-search {
    flex: 0 0 360px;
    width: 360px;
    padding: 22px 22px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.hh-hs-field {
    margin-bottom: 13px;
}

.hh-hs-field>label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 6px;
}

.hh-hero-search select {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 12px;
    border: none;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .92);
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.hh-hero-search select:focus {
    outline: 2px solid rgba(255, 255, 255, .8);
    outline-offset: 1px;
}

/* Dual range slider */
.hh-hs-slider {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}

.hh-hs-track,
.hh-hs-fill {
    position: absolute;
    height: 4px;
    border-radius: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.hh-hs-track {
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .35);
}

.hh-hs-fill {
    background: #fff;
}

.hh-hs-slider input[type="range"] {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.hh-hs-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
}

.hh-hs-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
}

.hh-hs-bubbles {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.hh-hs-go {
    width: 100%;
    height: 46px;
    margin-top: 4px;
    border: none;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.hh-hs-go:hover {
    background: var(--c-accent, #e8743b);
    color: #fff;
}

.hh-hs-go:active {
    transform: translateY(1px);
}

@media (max-width: 1100px) {
    .hh-hero-inner {
        padding: 0 28px;
        gap: 28px;
    }

    .hh-hero-search {
        flex-basis: 360px;
        width: 360px;
    }
}

@media (max-width: 860px) {
    .hh-hero-overlay {
        position: relative;
        background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .6));
        padding: 64px 0 40px;
    }

    .hh-hero-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .hh-hero-copy {
        max-width: none;
    }

    .hh-hero-search {
        flex-basis: auto;
        width: 100%;
    }
}

/* ============================================================
   VALUE CARDS — 3-up coloured cards with image base
   ============================================================ */
.hh-vcards {
    padding: 90px 0;
    background: #ffffff;
}

.hh-vcards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1240px;
    margin: 0 auto;
}

.hh-vcard {
    position: relative;
    aspect-ratio: 47 / 57;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
}

/* faint vertical watermark on the right edge, clipped by the card */
.hh-vcard-watermark {
    position: absolute;
    top: 24%;
    right: 10px;
    z-index: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 128px;
    font-weight: 700;
    line-height: 0.82;
    letter-spacing: -14px;
    text-transform: lowercase;
    color: rgba(0, 0, 0, 0.06);
    pointer-events: none;
    user-select: none;
}

.hh-vcard-body {
    position: relative;
    z-index: 2;
    padding: 46px 44px 0;
}

.hh-vcard-title {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: inherit;
}

.hh-vcard-text {
    margin: 0 0 28px;
    max-width: 340px;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
}

.hh-vcard-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px !important;
    font-weight: 700;
    text-decoration: none;
    transition: gap .25s var(--c-ease);
}

.hh-vcard-link:hover {
    gap: 16px;
}

.hh-vcard-link svg {
    transition: transform .25s var(--c-ease);
}

/* image sits in a compact band flush at the bottom; card colour fills above.
   the band height is derived from its own (definite) width via aspect-ratio,
   so it never collapses the way a percentage-of-parent height can. */
.hh-vcard-media {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    aspect-ratio: inherit;
    overflow: hidden;
    pointer-events: none;
}

.hh-vcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

/* the lime card holds a cut-out (hand + model) — show it whole, not cropped */
.hh-vcard--lime .hh-vcard-media img {
    object-fit: contain;
    object-position: center bottom;
}

/* white-text utility — beats the global [class*="title"] !important rule
   (which also sets -webkit-text-fill-color, so we must override that too) */
.hh-vcard-title.text--white,
.text--white {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ---- colour variants ---- */
.hh-vcard--orange {
    background: #09747f;
}

.hh-vcard--orange .hh-vcard-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hh-vcard--orange .hh-vcard-text {
    color: rgba(255, 255, 255, 0.92);
}

.hh-vcard--orange .hh-vcard-link {
    color: #ffffff;
}

.hh-vcard--orange .hh-vcard-watermark {
    color: rgba(255, 255, 255, 0.10);
}

.hh-vcard--lime {
    background: #edbb68;
}

.hh-vcard--lime .hh-vcard-title {
    color: #111418;
}

.hh-vcard--lime .hh-vcard-text {
    color: rgba(17, 20, 24, 0.78);
}

.hh-vcard--lime .hh-vcard-link {
    color: #111418;
}

.hh-vcard--lime .hh-vcard-watermark {
    color: rgba(0, 0, 0, 0.07);
}

.hh-vcard--grey {
    background: #f1f2f2;
}

.hh-vcard--grey .hh-vcard-title {
    color: #111418;
}

.hh-vcard--grey .hh-vcard-text {
    color: rgba(17, 20, 24, 0.62);
}

.hh-vcard--grey .hh-vcard-link {
    color: #111418;
}

.hh-vcard--grey .hh-vcard-watermark {
    color: rgba(0, 0, 0, 0.05);
}

/* ---- responsive ---- */
@media (max-width: 991px) {
    .hh-vcards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 520px;
        margin: 0 auto;
    }

    .hh-vcards {
        padding: 60px 0;
    }
}

/* ============================================================
   OUR SERVICES — heading + right-side service list
   ============================================================ */
.hh-services {
    position: relative;
    padding: 70px 0;
    background: #f3f4f3;
    overflow: hidden;
    border-radius: 12px;
    width: 98%;
    margin: auto;
}

/* faint dotted texture behind the content */
.hh-services::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(16, 36, 42, 0.09) 1.2px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 0%, transparent 75%);
    opacity: 0.55;
    pointer-events: none;
}

.hh-services-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 54px;
    align-items: center;
}

/* ---- left intro ---- */
.hh-services-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border: 1px solid rgba(16, 36, 42, 0.2);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    background: rgba(255, 255, 255, 0.5);
}

.hh-services-title {
    margin: 22px 0 0;
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.5px;
    color: var(--c-ink);
}

.hh-services-text {
    margin: 22px 0 30px;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(16, 36, 42, 0.55);
}

/* ---- CTA — houzzhunt brand colours ---- */
.hh-services-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 26px;
    background: var(--c-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .3s var(--c-ease), box-shadow .3s var(--c-ease), background .3s var(--c-ease);
}

.hh-services-btn:hover {
    color: #ffffff;
    background: var(--c-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(9, 116, 127, 0.35);
}

.hh-services-btn-dot {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s var(--c-ease);
}

.hh-services-btn-dot svg {
    width: 17px;
    height: 17px;
}

.hh-services-btn:hover .hh-services-btn-dot {
    transform: translateX(4px);
}

/* ---- right service list ---- */
.hh-srv-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hh-srv-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    height: 104px;
    padding: 0 0 0 26px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(16, 36, 42, 0.05);
    transition: transform .35s var(--c-ease), box-shadow .35s var(--c-ease);
}

.hh-srv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(16, 36, 42, 0.13);
}

.hh-srv-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eef2f2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    transition: background .35s var(--c-ease), color .35s var(--c-ease);
}

.hh-srv-icon svg {
    width: 26px;
    height: 26px;
}

.hh-srv-card:hover .hh-srv-icon {
    background: var(--c-accent);
    color: #ffffff;
}

.hh-srv-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--c-ink);
    transition: color .35s var(--c-ease);
}

.hh-srv-card:hover .hh-srv-title {
    color: var(--c-accent);
}

.hh-srv-media {
    flex: 0 0 186px;
    align-self: stretch;
    overflow: hidden;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%);
}

.hh-srv-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--c-ease);
}

.hh-srv-card:hover .hh-srv-media img {
    transform: scale(1.07);
}

@media (max-width: 991px) {
    .hh-services {
        padding: 56px 0;
    }

    .hh-services-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hh-services::before {
        -webkit-mask-image: none;
        mask-image: none;
        opacity: 0.3;
    }
}

@media (max-width: 575px) {
    .hh-srv-title {
        font-size: 18px;
    }

    .hh-srv-media {
        flex-basis: 120px;
    }

    .hh-srv-card {
        gap: 14px;
        padding-left: 18px;
        height: 96px;
    }

    .hh-srv-icon {
        width: 50px;
        height: 50px;
    }
}

/* ============================================================
   LET'S TALK — contact section with image background
   ============================================================ */
.hh-talk {
    position: relative;
    margin: 24px;
    border-radius: 28px;
    overflow: hidden;
    padding: 72px 0;
}

.hh-talk-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.hh-talk-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, rgba(12, 30, 44, 0.92) 0%, rgba(13, 45, 56, 0.78) 50%, rgba(14, 52, 62, 0.62) 100%);
}

.hh-talk-inner {
    position: relative;
    z-index: 2;
}

.hh-talk-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 64px;
    align-items: center;
}

/* ---- left form card ---- */
.hh-talk-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 20px;
    padding: 38px 34px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
}

/* accent strip across the top of the card */
.hh-talk-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--c-accent), #edbb68);
}

.hh-talk-card-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-accent);
    background: rgba(9, 116, 127, 0.08);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.hh-talk-card-title {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -.5px;
}

.hh-talk-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 18px;
}

.hh-talk-field {
    margin-bottom: 0;
}

.hh-talk-recaptcha {
    margin-bottom: 16px;
    transform: scale(0.92);
    transform-origin: left center;
}

.hh-talk-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #3a3a3a;
}

.hh-talk-field label span {
    color: #e0382b;
}

.hh-talk-field input {
    width: 100%;
    border: 1px solid #e7e9eb;
    background: #f7f8f9;
    border-radius: 24px;
    padding: 13px 18px;
    font-size: 14px;
    color: #222;
    outline: none;
    transition: box-shadow .2s var(--c-ease), background .2s var(--c-ease), border-color .2s var(--c-ease);
}

.hh-talk-field input::placeholder {
    color: #a9b0b3;
}

.hh-talk-field input:focus {
    background: #ffffff;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(9, 116, 127, 0.15) !important;
}

.hh-talk-submit {
    width: 100%;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    background: linear-gradient(135deg, var(--c-accent) 0%, #0b5d66 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 15px;
    border-radius: 24px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(9, 116, 127, 0.28);
    transition: transform .25s var(--c-ease), box-shadow .25s var(--c-ease), background .25s var(--c-ease);
}

.hh-talk-submit svg {
    transition: transform .25s var(--c-ease);
}

.hh-talk-submit:hover {
    background: linear-gradient(135deg, #0b5d66 0%, var(--c-dark) 100%);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(9, 116, 127, 0.42);
}

.hh-talk-submit:hover svg {
    transform: translateX(4px);
}

.hh-talk-terms {
    margin: 14px 0 0;
    font-size: 12px;
    color: #9aa3a6;
}

.hh-talk-terms a {
    color: var(--c-accent);
    text-decoration: none;
}

/* ---- right content ---- */
.hh-talk-content {
    color: #ffffff;
}

.hh-talk-heading {
    margin: 0;
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hh-talk-heading em {
    position: relative;
    font-family: inherit;
    font-style: normal;
    font-weight: 700;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hh-talk-heading em::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 4px;
    height: 6px;
    border-radius: 4px;
    background: var(--c-accent);
    opacity: .85;
    z-index: -1;
}

.hh-talk-sub {
    margin: 18px 0 0;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

.hh-talk-sub span {
    color: #ffffff;
    font-weight: 600;
}

.hh-talk-divider {
    height: 1px;
    max-width: 430px;
    margin: 28px 0;
    background: rgba(255, 255, 255, 0.25);
}

.hh-talk-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 560px;
    margin-bottom: 34px;
}

.hh-talk-point h4 {
    margin: 0 0 10px;
    padding-left: 16px;
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hh-talk-point h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 4px;
    background: var(--c-accent);
}

.hh-talk-point p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
}

/* ---- glassy team card ---- */
.hh-talk-person {
    display: inline-flex;
    align-items: stretch;
    gap: 18px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    transition: transform .3s var(--c-ease), box-shadow .3s var(--c-ease), border-color .3s var(--c-ease);
}

.hh-talk-person:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 26px 54px rgba(0, 0, 0, 0.32);
}

.hh-talk-person-photo {
    position: relative;
    flex: 0 0 110px;
    width: 110px;
    border-radius: 12px;
    overflow: hidden;
}

/* online status dot */
.hh-talk-person-photo::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #34d27b;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(52, 210, 123, 0.3);
}

.hh-talk-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 80% center;
    display: block;
}

.hh-talk-person-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 12px;
}

.hh-talk-person-role {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}

.hh-talk-person-at {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.hh-talk-person-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
    letter-spacing: -.3px;
}

.hh-talk-person-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #f1c878, #e0a84e);
    color: #2a1e08;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(224, 168, 78, 0.35);
    transition: transform .25s var(--c-ease), box-shadow .25s var(--c-ease), filter .25s var(--c-ease);
}

.hh-talk-person-btn::after {
    content: "→";
    font-size: 14px;
    line-height: 1;
    transition: transform .25s var(--c-ease);
}

.hh-talk-person-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 12px 26px rgba(224, 168, 78, 0.5);
}

.hh-talk-person-btn:hover::after {
    transform: translateX(3px);
}


@media (max-width: 991px) {
    .hh-talk {
        margin: 16px;
        padding: 48px 0;
    }

    .hh-talk-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hh-talk-content {
        order: -1;
    }
}

@media (max-width: 575px) {
    .hh-talk-points {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hh-talk-person {
        flex-direction: column;
    }

    .hh-talk-person-photo {
        width: 100%;
        flex-basis: 160px;
    }
}

/* ============================================================
   FOOTER (houzzhunt) — light card layout
   ============================================================ */
.hh-footer {
    margin: 24px;
    border-radius: 28px;
    background: #f3f4f3;
    padding: 70px 0 34px;
    color: var(--c-ink);
}

.hh-footer-top {
    display: grid;
    grid-template-columns: 1.05fr 2fr;
    gap: 50px;
    padding-bottom: 50px;
}

/* ---- left intro ---- */
.hh-footer-intro {
    max-width: 420px;
}

.hh-footer-heading {
    margin: 0 0 20px;
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--c-ink) !important;
    -webkit-text-fill-color: var(--c-ink);
}

.hh-footer-text {
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.7;
    color: #4a5656;
}

.hh-footer-text a {
    color: var(--c-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s var(--c-ease);
}

.hh-footer-text a:hover {
    color: var(--c-accent);
}

.hh-footer-socials {
    display: flex;
    gap: 10px;
}

.hh-footer-socials a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 36, 42, 0.18);
    border-radius: 10px;
    color: var(--c-ink);
    font-size: 16px;
    text-decoration: none;
    transition: transform .25s var(--c-ease), background .25s var(--c-ease), color .25s var(--c-ease), border-color .25s var(--c-ease);
}

.hh-footer-socials a:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #ffffff;
    transform: translateY(-2px);
}

/* ---- link columns ---- */
.hh-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.hh-footer-col-label {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a9696;
}

.hh-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hh-footer-col li {
    margin-bottom: 12px;
}

.hh-footer-col a {
    color: var(--c-ink);
    font-size: 16px;
    text-decoration: none;
    transition: color .2s var(--c-ease);
}

.hh-footer-col a:hover {
    color: var(--c-accent);
}

/* ---- bottom row ---- */
.hh-footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 24px;
    padding-top: 34px;
    border-top: 1px solid rgba(16, 36, 42, 0.1);
}

.hh-footer-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hh-footer-brand img {
    height: 46px;
    width: auto;
}

.hh-footer-permit img {
    height: 46px;
    width: auto;
}

.hh-footer-contact p {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #4a5656;
}

.hh-footer-contact a {
    color: #4a5656;
    text-decoration: none;
}

.hh-footer-contact strong {
    color: var(--c-ink);
}

.hh-footer-copy {
    text-align: right;
}

.hh-footer-copy p {
    margin: 0 0 4px;
    font-size: 14px;
    color: #4a5656;
}

@media (max-width: 991px) {
    .hh-footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 767px) {
    .hh-footer {
        margin: 16px;
        padding: 48px 0 28px;
    }

    .hh-footer-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .hh-footer-bottom {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hh-footer-brand {
        justify-content: center;
    }

    .hh-footer-copy {
        text-align: center;
    }
}

/* ---- DIVORCE / intro split ---- */
.divorce-section {
    padding: 90px 0;
    background: #ffffff;
}

.divorce-left h2 {
    font-size: 42px;
    color: #222 !important;
    line-height: 1.2;
    margin: 0;
}

.divorce-right {
    padding-left: 32px;
    border-left: 3px solid #e9efef;
}

.divorce-right p {
    color: #5a6a6a;
    font-size: 16px;
    line-height: 1.85;
}

.divorce-right p:last-child {
    margin-bottom: 0;
}

/* ---- MORTGAGE / VALUATION split sections ---- */
.mortgage-section {
    padding: 90px 0 !important;
    background: #ffffff;
}

.mortgage-content h2 {
    font-size: 40px;
    color: #222 !important;
    line-height: 1.2;
    margin-bottom: 18px;
}

.mortgage-content .desc,
.mortgage-content p {
    color: #5a6a6a !important;
    font-size: 16px;
    line-height: 1.75;
}

.mortgage-image img {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(9, 116, 127, 0.14);
}

/* ---- SERVICES (teal panel + cards) ---- */
.service-section-one {
    background: linear-gradient(150deg, #10242a 0%, #123c44 100%) !important;
    padding: 90px 0 !important;
    margin-top: 0 !important;
}

.service-right-one .service-box-one {
    border-radius: 16px !important;
    padding: 34px 30px !important;
    border: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.service-right-one .service-box-one:hover {
    background: #f4f8f8 !important;
    transform: translateY(-8px);
    box-shadow: 0 26px 55px rgba(0, 0, 0, 0.2);
}

.service-right-one .service-box-one h4 {
    color: #222 !important;
    font-size: 20px;
    margin-bottom: 12px;
}

.service-right-one .service-box-one p {
    color: #5a6a6a !important;
    font-size: 15px;
    line-height: 1.6;
}

.service-right-one .service-btn-one {
    background: #09747f !important;
    color: #fff !important;
    border-radius: 10px !important;
}

.service-right-one .service-box-one:hover .service-btn-one {
    background: #edbb68 !important;
    color: #0b3b40 !important;
    border-radius: 10px !important;
}

/* ---- CTA band (Buy, Sell, Invest) ---- */
.cta-section-three {
    padding: 96px 0 !important;
}

.cta-section-three::before {
    background: linear-gradient(90deg, rgba(16, 36, 42, 0.92) 0%, rgba(18, 60, 68, 0.62) 100%) !important;
}

.cta-section-three .col-lg-12 {
    text-align: center;
}

.cta-section-three .heading-box {
    max-width: 860px;
    margin: 0 auto 26px;
}

.cta-section-three .heading-title {
    font-size: 40px !important;
    line-height: 1.25;
    margin-bottom: 0 !important;
}

.cta-section-three .gradient-btn {
    background: #edbb68 !important;
    color: #0b3b40 !important;
    font-weight: 700;
}

.cta-section-three .gradient-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(237, 187, 104, 0.4);
}

/* ---- AREAS grid ---- */


.area-section .area-header h2 {
    font-size: 40px;
}

.area-section .area-header p {
    color: #5a6a6a;
    font-size: 16px;
}

.area-section .area-card {
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(9, 116, 127, 0.08);
}

.area-section .area-card img {
    transition: transform .5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.area-section .area-card:hover img {
    transform: scale(1.07);
}

.area-section .area-card::after {
    background: linear-gradient(to top, rgba(6, 50, 55, 0.85) 0%, rgba(6, 50, 55, 0) 60%) !important;
}

.area-section .area-name {
    font-weight: 600;
    letter-spacing: 0.2px;
}

.area-section .tall-card {
    min-height: 100%;
}

/* ---- CONSULT card ---- */
.consult-section {
    padding: 90px 0 !important;
}

.consult-section .consult-content {
    background: #f4f8f8;
    border: 1px solid #e9efef;
    border-radius: 20px;
    padding: 48px 44px;
}

.consult-section .consult-heading {
    font-size: 34px;
    color: #222 !important;
    margin-bottom: 12px;
}

.consult-section .consultant-description p {
    color: #5a6a6a;
    font-size: 16px;
    line-height: 1.7;
    max-width: 640px;
}

.consult-section .social-item {
    color: #222;
    font-weight: 600;
    font-size: 14px;
}

.consult-section .social-icon {
    width: 42px;
    height: 42px;
    background: #ffffff;
    border: 1px solid #e9efef;
}

.consult-section .consult-form {
    background: #ffffff !important;
    border: 1px solid #e9efef;
    padding: 14px !important;
    border-radius: 12px !important;
    margin-top: 8px;
}

.consult-section .consult-form .form-control {
    background: transparent;
    border-bottom: 1px solid #d7e0e0 !important;
}

.consult-section .consult-image img {
    border-radius: 16px;
}

/* ---- NEWS / BLOG ---- */
/* ============================================================
   NEWS & BLOG — "Latest News Insight" 3-up cards (houzzhunt theme)
   ============================================================ */
.news-blog-section {
    padding: 84px 0 !important;
    background: #f6f7f6;
}

/* header: big heading left, View All Posts pill right */
.news-blog-section .news-blog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.news-blog-section .hh-blog-heading {
    margin: 0;
    max-width: 520px;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--c-ink) !important;
}

.news-blog-section .hh-blog-viewall {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--c-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .25s var(--c-ease), box-shadow .25s var(--c-ease), background .25s var(--c-ease);
}

.news-blog-section .hh-blog-viewall:hover {
    background: var(--c-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(9, 116, 127, 0.3);
}

/* cards */
.news-blog-section .news-blog-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(16, 36, 42, 0.05);
    transition: transform .3s var(--c-ease), box-shadow .3s var(--c-ease);
}

.news-blog-section .news-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(16, 36, 42, 0.12);
}

/* image inset with rounded corners + category pill */
.news-blog-section .news-blog-image {
    position: relative;
    margin: 0;
    width: 100%;
    height: auto;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 16 / 11;
}

.news-blog-section .news-blog-image a {
    display: block;
    height: 100%;
}

.news-blog-section .news-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--c-ease);
}

.news-blog-section .news-blog-card:hover .news-blog-image img {
    transform: scale(1.06);
}

.news-blog-section .blog-category {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--c-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
    letter-spacing: .2px;
}

/* content */
.news-blog-section .news-blog-content {
    padding: 18px 16px 26px;
}

.news-blog-section .blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1;
    color: #8a9797;
}

/* override the legacy .blog-date rule (margin/size) so the row aligns */
.news-blog-section .blog-meta .blog-date,
.news-blog-section .blog-meta .blog-author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 14px;
    line-height: 1;
    color: #8a9797;
}

.news-blog-section .blog-meta strong {
    color: #4a5a5a;
    font-weight: 700;
}

.news-blog-section .blog-meta-dot {
    color: #c2cccc;
}

.news-blog-section .blog-title {
    margin: 0 0 14px;
}

.news-blog-section .blog-title a {
    color: var(--c-ink) !important;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.3px;
    transition: color .25s var(--c-ease);
}

.news-blog-section .blog-title a:hover {
    color: var(--c-accent) !important;
}

.news-blog-section .blog-excerpt {
    margin: 0;
    color: #6a7676;
    font-size: 15px;
    line-height: 1.6;
}

.news-blog-section .blog-read-more {
    display: none;
}

/* ---- NEWSLETTER refinement ---- */
.newsletter-section-new {
    padding: 30px 0 80px !important;
}

.newsletter-card-wrapper {
    border-radius: 22px !important;
}

.newsletter-label {
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 30px;
}

/* ---- responsive (part 2) ---- */
@media (max-width: 991px) {
    .hero-content h1 {
        font-size: 40px !important;
    }

    .divorce-right {
        padding-left: 0;
        border-left: 0;
        margin-top: 20px;
    }

    .consult-section .consult-content {
        padding: 32px 24px;
    }
}

@media (max-width: 575px) {
    .hero-content h1 {
        font-size: 32px !important;
    }

    .divorce-left h2,
    .mortgage-content h2,
    .cta-section-three .heading-title,
    .consult-section .consult-heading {
        font-size: 28px !important;
    }
}

/* ============================================================================
   HOMEPAGE LAYOUT REWORK — About / Quick Insights / News & Blog
   New corporate layouts (content & images preserved).
   ============================================================================ */

/* ---- ABOUT: floating stat badge over the image ---- */
.about-section-one .about-left-one {
    position: relative;
}

.about-stat-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    max-width: 330px;
    background: linear-gradient(135deg, #0b5159 0%, #09747f 100%);
    color: #fff;
    padding: 22px 24px;
    border-radius: 14px;
    box-shadow: 0 20px 44px rgba(6, 50, 55, 0.40);
}

.about-stat-badge h4 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 38px;
    font-weight: 700 !important;
    line-height: 1;
    margin: 0 0 6px;
}

.about-stat-badge p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* ---- QUICK INSIGHTS: centered header on top + full-width reel carousel ---- */
/* ===== Video reels — split layout (left text / right slider), restyled ===== */
#video-section .container-fluid>.row {
    flex-direction: row;
    align-items: center;
}

#video-section .container-fluid>.row>.col-lg-4 {
    flex: 0 0 32%;
    max-width: 32%;
}

#video-section .container-fluid>.row>.col-lg-8 {
    flex: 0 0 68%;
    max-width: 68%;
}

#video-section .lef-video {
    max-width: 100%;
    margin: 0;
    text-align: left;
    padding: 0 36px 0 0 !important;
}

#video-section .lef-video .slider-nav-buttons {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 14px;
    float: none !important;
    margin-top: 30px !important;
}

/* reel cards — tall 9:16, rounded, hover lift */
.video-slider .slick-slide {
    padding: 8px 9px;
}

#video-section .video-slide {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 12px 30px rgba(16, 36, 42, 0.12);
    transition: transform .35s var(--c-ease), box-shadow .35s var(--c-ease);
}

#video-section .video-slide:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(16, 36, 42, 0.20);
}

#video-section .video-slide img.reelthumnail {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* readability gradient at the base of each reel */
#video-section .video-slide::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to top, rgba(16, 36, 42, 0.55), transparent);
    pointer-events: none;
    z-index: 1;
}

/* play button sits above the gradient */
#video-section .play-button {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--c-accent);
    border: none;
    z-index: 2;
    box-shadow: 0 6px 18px rgba(9, 116, 127, 0.45);
    transition: transform .3s var(--c-ease), background .3s var(--c-ease);
}

#video-section .video-slide:hover .play-button {
    background: var(--c-gold);
}

#video-section .play-button:hover {
    transform: scale(1.12);
}

@media (max-width: 991px) {
    #video-section .container-fluid>.row {
        flex-direction: column;
        align-items: stretch;
    }

    #video-section .container-fluid>.row>.col-lg-4,
    #video-section .container-fluid>.row>.col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #video-section .lef-video {
        text-align: center;
        padding: 0 !important;
        margin-bottom: 30px;
    }

    #video-section .lef-video .slider-nav-buttons {
        justify-content: center !important;
    }

    #video-section .lef-video>p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- NEWS & BLOG: featured-first editorial layout ---- */
.news-blog-section .news-blog-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* reset the old featured-first treatment — all cards are now equal */
.news-blog-section .news-blog-grid>.news-blog-card:first-child {
    grid-column: auto;
    display: block;
}

@media (max-width: 991px) {
    .about-stat-badge {
        position: static;
        max-width: 100%;
        margin-top: 16px;
    }

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

@media (max-width: 640px) {
    .news-blog-section .news-blog-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
}

/* ============================================================================
   PHASE 4 — INNER PAGES (shared components)
   The page-header banner is used on About, Services, Contact, Careers, Blogs,
   People, Residential, etc. Restyling it here propagates to every inner page.
   ============================================================================ */
.page-header-section {
    padding-top: clamp(150px, 22vh, 230px);
    padding-bottom: clamp(60px, 9vh, 110px);
    background-position: center;
    background-size: cover;
}

/* charcoal scrim for readable, on-brand banners */
/* .page-header-section::after {
    background: linear-gradient(105deg, rgba(16, 36, 42, 0.92) 0%, rgba(16, 36, 42, 0.6) 50%, rgba(16, 36, 42, 0.32) 100%) !important;
} */

.page-header-heading {
    margin-bottom: 0 !important;
    border-left: 3px solid var(--c-accent) !important;
    padding-left: 26px !important;
}

.page-header-heading h2 {
    font-size: clamp(34px, 4.5vw, 52px) !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.page-header-heading p,
.page-header-heading p.lead {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.6;
}

/* breadcrumb */
.page-header-section ul.breadcrumb {
    margin-top: 26px;
    margin-bottom: 0;
    align-items: center;
    flex-wrap: wrap;
}

.page-header-section ul.breadcrumb li a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    transition: color 0.2s var(--c-ease);
}

.page-header-section ul.breadcrumb li a:hover {
    color: var(--c-gold);
}

.page-header-section ul.breadcrumb li span {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}

/* ============================================================================
   UNIFIED LABEL / EYEBROW CHIPS
   Replaces the old "— line + caps" eyebrows with a refined corporate pill
   (soft teal tint + dot marker). Light variant for light sections, white
   variant for dark/teal sections. Applied to every section label.
   ============================================================================ */

/* light sections */
.divorce-left small.text-uppercase,
.mortgage-content small.text-uppercase,
.about-section-one .heading-box small.text-uppercase,
small.text-uppercase.text-muted,
.section-tag,
.news-blog-section .section-tag,
.noctis-cards-section .section-tag,
.cx-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--c-accent-soft) !important;
    color: var(--c-accent) !important;
    -webkit-text-fill-color: var(--c-accent) !important;
    border: 1px solid rgba(9, 116, 127, 0.25) !important;
    padding: 7px 16px !important;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    width: auto !important;
    margin-bottom: 18px !important;
}

.divorce-left small.text-uppercase::before,
.mortgage-content small.text-uppercase::before,
.about-section-one .heading-box small.text-uppercase::before,
small.text-uppercase.text-muted::before,
.section-tag::before,
.cx-eyebrow::before {
    content: "" !important;
    width: 6px !important;
    min-width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--c-accent) !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* dark / teal sections */
.service-left-one small.text-uppercase,
small.text-uppercase.text-white,
.newsletter-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    padding: 7px 16px !important;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    width: auto !important;
    margin-bottom: 18px !important;
}

.service-left-one small.text-uppercase::before,
small.text-uppercase.text-white::before,
.newsletter-label::before {
    content: "" !important;
    width: 6px !important;
    min-width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--c-gold) !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* ============================================================================
   ABOUT — new layout: clean image + "highlights" grid (feature + stat cards)
   ============================================================================ */
.about-section-one .about-highlights {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 8px;
    margin-bottom: 34px;
}

.about-section-one .about-highlights .about-details-inner-one,
.about-section-one .about-highlights .about-project-one {
    margin: 0 !important;
    height: 100%;
    border-radius: 18px !important;
    transition: transform 0.3s var(--c-ease), box-shadow 0.3s var(--c-ease);
}

/* feature card — soft surface, smooth teal-tinted border */
.about-section-one .about-highlights .about-details-inner-one {
    flex-direction: column;
    gap: 16px;
    padding: 30px !important;
    background: var(--c-surface-2) !important;
    border: 1px solid rgba(9, 116, 127, 0.14) !important;
    box-shadow: 0 12px 30px rgba(16, 36, 42, 0.05);
}

/* stat — teal accent card, smooth */
.about-section-one .about-highlights .about-project-one {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 32px 30px !important;
    background: linear-gradient(150deg, var(--c-accent-700) 0%, var(--c-accent) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 16px 38px rgba(9, 116, 127, 0.22);
}

.about-section-one .about-highlights .about-details-inner-one:hover,
.about-section-one .about-highlights .about-project-one:hover {
    transform: translateY(-4px);
}

/* remove the theme's stray vertical reveal line / left border on the about column */
.about-section-one .about-details-one {
    padding-left: 0 !important;
    border-left: 0 !important;
    position: static;
}

.about-section-one .about-details-one::after,
.about-section-one .about-details-one::before {
    display: none !important;
}

/* ============================================================================
   SERVICES — clean aligned 2x2 grid (was staggered/offset)
   ============================================================================ */
.service-right-one {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    column-gap: 24px !important;
    align-items: stretch;
    flex-wrap: nowrap;
}

/* unwrap the offset column wrappers so all 4 cards align in one grid */
.service-right-one .service-right-inner-one {
    display: contents !important;
}

.service-right-one .service-box-one {
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

/* push the arrow to the bottom, keep it a compact left-aligned button */
.service-right-one .service-box-one .service-btn-one {
    margin-top: auto;
    align-self: flex-start;
    width: 50px !important;
    min-width: 50px;
    height: 50px !important;
    padding: 0 !important;
    flex: 0 0 auto;
}

/* unified icon tile (matches the About feature icon) */
.service-right-one .service-icon-one {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: var(--c-accent-soft);
    margin-bottom: 18px;
}

.service-right-one .service-icon-one svg {
    width: 34px !important;
    height: 34px !important;
}

@media (max-width: 767px) {
    .service-right-one {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   MORE MEGA MENU — clean white corporate dropdown
   ============================================================================ */
.more-mega {
    background: #ffffff !important;
    box-shadow: 0 26px 60px rgba(16, 36, 42, 0.20) !important;
    border-radius: 0 0 16px 16px;
    border-top: 3px solid var(--c-accent);
}

.more-mega .mega-menu-section {
    border-right: 1px solid var(--c-border) !important;
}

.more-mega .col-lg-3:last-child .mega-menu-section {
    border-right: 0 !important;
}

/* column headings → charcoal caps with a teal underline */
.more-mega .mega-menu-title {
    color: var(--c-ink) !important;
    -webkit-text-fill-color: var(--c-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--c-border);
    position: relative;
}

.more-mega .mega-menu-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 36px;
    height: 2px;
    background: var(--c-accent);
}

/* links → muted, teal on hover */
.more-mega .mega-menu-links li a {
    color: var(--c-body) !important;
    -webkit-text-fill-color: var(--c-body) !important;
    font-weight: 500;
}

.more-mega .mega-menu-links li a:hover {
    color: var(--c-accent) !important;
    -webkit-text-fill-color: var(--c-accent) !important;
    padding-left: 8px;
}

.more-mega .mega-menu-links li a::before {
    background: var(--c-accent) !important;
}

/* CTA column */
.more-mega .mega-cta-image img {
    border-radius: 12px;
}

.more-mega .mega-cta-btn {
    background: var(--c-accent) !important;
    color: #ffffff !important;
    border-radius: var(--c-radius-sm);
    padding: 11px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.more-mega .mega-cta-btn:hover {
    background: var(--c-accent-700) !important;
    color: #ffffff !important;
}

/* ============================================================================
   FAQ SECTION — charcoal base, readable light text, card accordion
   ============================================================================ */
/* (legacy dark FAQ theme removed — superseded by the .hh-faq white design below) */

/* ============================================================================
   RESOURCE CENTER (guides swiper) — centered header + arrows below, crisp cards
   ============================================================================ */
.noctis-cards-section {
    background: #ffffff !important;
    padding: clamp(34px, 8vw, 50px) 0 !important;
}

.noctis-cards-section .noctis-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: 44px;
}

.noctis-cards-section .noctis-header-content {
    max-width: 680px;
    margin: 0 auto;
}

.noctis-cards-section .noctis-header-content .section-desc {
    margin: 0 auto;
}

/* arrows now sit centered below the carousel */
.noctis-cards-section .noctis-nav-buttons {
    justify-content: center;
    margin-top: 44px;
}

/* crisp card framing */
.noctis-cards-section .noctis-card {
    border-radius: 16px;
    border: 1px solid var(--c-border);
    box-shadow: 0 14px 34px rgba(16, 36, 42, 0.10);
    transition: transform 0.35s var(--c-ease), box-shadow 0.35s var(--c-ease);
}

.noctis-cards-section .noctis-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px rgba(16, 36, 42, 0.18);
}

/* clip the carousel to the container so cards have equal left/right margins
   (theme set overflow:visible which let cards bleed off the right edge) */
.noctisSwiper {
    overflow: hidden !important;
    padding: 14px 2px 18px !important;
}

.about-section-one .about-highlights .about-project-one h4 {
    border-right: 0 !important;
    padding-right: 0 !important;
    font-size: 44px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.about-section-one .about-highlights .about-project-one p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 575px) {
    .about-section-one .about-highlights {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   NAVBAR — LANDOR-STYLE WHITE HEADER (UI-only restyle, data preserved)
   White background, dark links, top contact bar, centered pill, CTA + phone.
   Appended last so it governs over earlier navbar rules.
   ============================================================================ */

/* ---- Top contact bar ---- */
.hh-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--c-border);
    font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hh-topbar-inner {
    max-width: 1660px;
    margin: 0 auto;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.hh-topbar-left {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.hh-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s var(--c-ease);
}

.hh-topbar-item i {
    color: var(--c-accent);
    font-size: 17px;
}

.hh-topbar-item:hover {
    color: var(--c-accent);
}

.hh-topbar-divider {
    width: 1px;
    height: 16px;
    background: var(--c-border);
}

.hh-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hh-topbar-follow {
    color: var(--c-ink);
    font-size: 14px;
    font-weight: 500;
    margin-right: 2px;
}

/* direct-child only, so it styles the social links — not nested search/lang menu links */
.hh-topbar-right > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* no chip background — colour lives in the icon glyph only */
    background: transparent;
    color: var(--c-accent);
    transition: color 0.25s var(--c-ease), transform 0.25s var(--c-ease);
}

.hh-topbar-right > a:hover {
    color: var(--c-accent-700);
    transform: translateY(-2px);
}

.hh-topbar-right > a i {
    font-size: 19px;
    line-height: 1;
}

/* ---- Main navbar: white, in-flow, sticky ---- */
nav.navbar-custom,
.navbar-custom {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff !important;
    padding: 10px 0 !important;
    box-shadow: 0 1px 0 rgba(16, 36, 42, 0.06);
    z-index: 1000;
    transition: box-shadow 0.3s var(--c-ease), padding 0.3s var(--c-ease);
}

/* scrolled state stays white, just lifts with a soft shadow */
.navbar-custom.navbar-scrolled {
    position: sticky !important;
    background: #ffffff !important;
    padding: 6px 0 !important;
    box-shadow: 0 10px 30px rgba(16, 36, 42, 0.10);
    animation: none;
}

/* never tint the bar teal on mega-menu hover */
.navbar-custom:has(.megamenu:hover),
.navbar-custom.mega-hover {
    background: #ffffff !important;
}

.hh-nav-inner {
    max-width: 1660px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.navbar-custom .navbar-brand {
    margin: 0;
    flex: 0 0 auto;
}

.navbar-custom .navbar-brand img,
.navbar-scrolled .navbar-brand img {
    height: auto;
}

/* center zone holds the link pill */
.hh-nav-center {
    flex: 1 1 auto;
    display: flex !important;
    justify-content: center;
}

/* no background — links sit directly on the bar */
.navbar-custom .navbar-nav {
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 2px;
}

/* links — dark on transparent */
.navbar-custom .navbar-nav .nav-link {
    padding: 18px 18px !important;
    margin: 0 !important;
    color: var(--c-ink) !important;
    font-size: 15px;
    font-weight: 400;
    border-radius: 0;
    transition: color 0.2s var(--c-ease);
}

/* the text gets its own box so the underline matches its exact width */
.navbar-custom .navbar-nav .nav-link .hh-link-text {
    position: relative;
    display: inline-block;
}

/* kill any old underline on the link itself */
.navbar-custom .navbar-nav .nav-link::after {
    display: none !important;
}

/* animated underline — exact text width, slides in left → right */
.navbar-custom .navbar-nav .nav-link .hh-link-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--c-ease);
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-item.show .nav-link,
.navbar-custom .navbar-nav .megamenu:hover .nav-link {
    color: var(--c-accent) !important;
    background: transparent;
}

.navbar-custom .navbar-nav .nav-link:hover .hh-link-text::after,
.navbar-custom .navbar-nav .nav-item.show .nav-link .hh-link-text::after,
.navbar-custom .navbar-nav .megamenu:hover .nav-link .hh-link-text::after {
    transform: scaleX(1);
}

.navbar-custom .dropdown-arrow {
    color: currentColor;
}

/* ---- Right cluster: phone + CTA ---- */
.hh-nav-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

.hh-nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-ink);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s var(--c-ease);
}

.hh-nav-phone:hover {
    color: var(--c-accent);
}

.hh-nav-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #ffffff;
    font-size: 19px;
    flex: 0 0 auto;
    transition: background 0.25s var(--c-ease), transform 0.25s var(--c-ease);
}

.hh-nav-phone:hover .hh-nav-phone-icon {
    background: var(--c-accent-700);
    transform: translateY(-1px);
}

/* CTA pill — single teal outline, trailing teal dot, smooth fill-from-dot hover */
.navbar-custom .nav-cta-btn {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ffffff !important;
    color: var(--c-ink) !important;
    border: 1.5px solid var(--c-accent);
    padding: 11px 14px 11px 24px;
    box-shadow: none !important;
    margin-left: 0 !important;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.35s var(--c-ease), border-color 0.45s var(--c-ease),
        transform 0.35s var(--c-ease), box-shadow 0.35s var(--c-ease);
}

/* teal wash that grows out of the dot to fill the pill on hover (above the white
   background, below the label/dot which carry z-index:1) */
.navbar-custom .nav-cta-btn::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 27px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-accent);
    transform: translateY(-50%) scale(0);
    transition: transform 0.5s var(--c-ease);
}

.navbar-custom .nav-cta-btn .hh-cta-label {
    position: relative;
    z-index: 1;
}

.navbar-custom .nav-cta-btn .hh-cta-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-accent);
    flex: 0 0 auto;
    transition: background 0.35s var(--c-ease), transform 0.35s var(--c-ease);
}

.navbar-custom .nav-cta-btn .hh-cta-dot i {
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
    transition: color 0.35s var(--c-ease);
}

.navbar-custom .nav-cta-btn:hover .hh-cta-dot i {
    color: var(--c-accent);
}

.navbar-custom .nav-cta-btn:hover {
    color: #ffffff !important;
    border-color: var(--c-accent-700);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(9, 116, 127, 0.28) !important;
}

.navbar-custom .nav-cta-btn:hover::before {
    transform: translateY(-50%) scale(13);
}

.navbar-custom .nav-cta-btn:hover .hh-cta-dot {
    background: #ffffff;
    transform: scale(1.08);
}

/* toggler (only relevant if collapsed) */
.navbar-custom .navbar-toggler {
    border-color: var(--c-border);
}

/* mega menu sits flush under the white bar (no gap that would expose the page) */
.navbar-custom .mega-dropdown-menu {
    margin-top: 0;
}

.navbar-custom .custom-dropdown {
    margin-top: 8px;
}

/* hide the desktop top bar on tablet/mobile (mobile nav takes over) */
@media (max-width: 1024px) {
    .hh-topbar {
        display: none;
    }
}

/* ---- Mobile nav: white bar + dark logo for consistency ---- */
.mobile-nav .navbar {
    background: #ffffff;
}

/* ============================================================================
   MEGA MENU — CLEAN WHITE (Knight Frank-style columns). Content unchanged.
   ============================================================================ */

/* contain the full-bleed (100vw) mega panel without a horizontal scrollbar.
   `clip` (not `hidden`) doesn't create a scroll container, so sticky nav still works. */
html,
body {
    overflow-x: clip;
}

/* panel: crisp full-bleed white block, flush under the nav (overrides old teal) */
.navbar-custom .mega-dropdown-menu.hh-mega,
.navbar-custom .services-mega.hh-mega,
.navbar-custom .more-mega.hh-mega {
    background: #ffffff !important;
    top: 100% !important;
    /* true full-viewport width, centred — immune to whichever centred ancestor
       is the positioning context, and no transform so the drop animation works */
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 0 0 -50vw !important;
    border-top: 1px solid var(--c-border);
    /* downward-only shadow (negative spread) so it doesn't bleed out the sides */
    box-shadow: 0 18px 28px -10px rgba(16, 36, 42, 0.18);
    border-radius: 0 !important;
    padding: 0;
}

.hh-mega .hh-mega-inner {
    max-width: 1660px;
    margin: 0 auto;
    /* generous breathing room + clear gap from the left & right edges */
    padding: 54px 64px 58px;
}

/* ---- Services: left intro + clean link columns ---- */
.hh-mega-inner:not(.hh-mega-inner-more) {
    display: flex;
    gap: 80px;
    align-items: stretch;
}

.hh-mega-intro {
    flex: 0 0 320px;
    max-width: 320px;
}

.hh-mega-heading {
    font-size: 38px;
    font-weight: 700;
    color: var(--c-ink) !important;
    margin: 0 0 18px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.hh-mega-desc {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--c-body);
    margin: 0 0 26px;
    max-width: 300px;
}

.hh-mega-cols-services {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 36px;
    /* subtle divider + space separating the intro from the columns */
    padding-left: 80px;
    border-left: 1px solid var(--c-border);
}

.hh-mega-item {
    display: block;
    text-decoration: none;
    padding: 16px 18px;
    margin: -4px 0;
    border-radius: 12px;
    transition: background 0.25s var(--c-ease), transform 0.25s var(--c-ease);
}

.hh-mega-item-title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-ink);
    transition: color 0.2s var(--c-ease);
}

.hh-mega-item-desc {
    display: block;
    font-size: 13px;
    line-height: 1.55;
    color: var(--c-muted);
    margin-top: 6px;
}

.hh-mega-item:hover {
    background: var(--c-accent-soft);
    transform: translateY(-2px);
}

.hh-mega-item:hover .hh-mega-item-title {
    color: var(--c-accent);
}

/* ---- More: four clean columns (titles + bold links + CTA) ---- */
.hh-mega-inner-more {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 56px;
}

.hh-mega-title {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 0 0 18px;
    padding-bottom: 14px;
}

/* refined divider under each section title */
.hh-mega-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--c-border);
}

.hh-mega-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 34px;
    height: 2px;
    background: var(--c-accent);
    z-index: 1;
}

.hh-mega-list {
    list-style: none;
    margin: 0 -10px;
    padding: 0;
}

.hh-mega-list li {
    margin-bottom: 2px;
}

.hh-mega-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
    transition: background 0.2s var(--c-ease), color 0.2s var(--c-ease), transform 0.2s var(--c-ease);
}

/* arrow that reveals on hover — same premium feel as the Services cards */
.hh-mega-list li a::after {
    content: "→";
    font-size: 14px;
    color: var(--c-accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s var(--c-ease), transform 0.2s var(--c-ease);
}

.hh-mega-list li a:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    transform: translateX(2px);
}

.hh-mega-list li a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* View all — underlined accent link */
.hh-mega-viewall {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-accent);
    text-decoration: none;
    border-bottom: 1.5px solid var(--c-accent);
    padding-bottom: 2px;
    transition: color 0.2s var(--c-ease), border-color 0.2s var(--c-ease);
}

.hh-mega-viewall:hover {
    color: var(--c-accent-700);
    border-color: var(--c-accent-700);
}

/* More: Get-in-Touch CTA column */
.hh-mega-cta-image {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 16px 34px rgba(16, 36, 42, 0.18);
}

/* subtle gradient veil on the CTA image for depth */
.hh-mega-cta-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 45, 56, 0) 45%, rgba(13, 45, 56, 0.35) 100%);
}

.hh-mega-cta-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s var(--c-ease);
}

.hh-mega-cta-image:hover img {
    transform: scale(1.04);
}

.hh-mega-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-700) 100%);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: var(--c-radius-sm);
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(9, 116, 127, 0.3);
    transition: box-shadow 0.25s var(--c-ease), transform 0.25s var(--c-ease), filter 0.25s var(--c-ease);
}

.hh-mega-cta-btn svg {
    transition: transform 0.25s var(--c-ease);
}

.hh-mega-cta-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(9, 116, 127, 0.42);
}

.hh-mega-cta-btn:hover svg {
    transform: translateX(4px);
}

/* responsive: stack on tablet widths where the desktop nav still shows */
@media (max-width: 1200px) {
    .hh-mega .hh-mega-inner {
        padding: 28px;
    }

    .hh-mega-inner:not(.hh-mega-inner-more) {
        gap: 32px;
    }

    .hh-mega-intro {
        flex-basis: 240px;
    }

    .hh-mega-cols-services {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   MOBILE (≤767px) — font-size & box adjustments for the homepage
   ============================================================ */
@media (max-width: 767px) {

    /* generic section headings */
    .heading-title {
        font-size: 28px !important;
        line-height: 1.22;
    }

    .section-title {
        font-size: 28px !important;
    }

    /* ---- Hero (video) ---- */
    .hh-hero {
        margin: 0;
        border-radius: 0;
        min-height: 66vh;
    }

    /* ---- Value cards ---- */
    .hh-vcards {
        padding: 46px 0;
    }

    .hh-vcards-grid {
        gap: 18px;
        max-width: 440px;
    }

    .hh-vcard-body {
        padding: 30px 26px 0;
    }

    .hh-vcard-title {
        font-size: 24px;
    }

    .hh-vcard-text {
        font-size: 14.5px;
        max-width: 100%;
    }

    .hh-vcard-watermark {
        font-size: 90px;
        letter-spacing: -6px;
        top: 18px;
        right: 8px;
    }

    /* ---- Our Services ---- */
    .hh-services {
        padding: 46px 0;
    }

    .hh-services-grid {
        gap: 30px;
    }

    .hh-services-badge {
        font-size: 12px;
    }

    .hh-services-title {
        font-size: 26px;
    }

    .hh-services-text {
        font-size: 15px;
    }

    .hh-services-btn {
        font-size: 14px;
        padding: 10px 12px 10px 22px;
    }

    .hh-srv-card {
        height: 92px;
        gap: 14px;
        padding-left: 16px;
    }

    .hh-srv-title {
        font-size: 17px;
    }

    .hh-srv-icon {
        width: 50px;
        height: 50px;
    }

    .hh-srv-icon svg {
        width: 22px;
        height: 22px;
    }

    .hh-srv-media {
        flex-basis: 130px;
    }

    /* ---- Let's talk ---- */
    .hh-talk {
        margin: 14px;
        padding: 40px 0;
    }

    .hh-talk-card {
        padding: 26px 22px;
    }

    .hh-talk-card-title {
        font-size: 22px;
    }

    .hh-talk-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hh-talk-field {
        margin-bottom: 14px;
    }

    .hh-talk-field input {
        font-size: 14px;
        padding: 12px 16px;
    }

    .hh-talk-recaptcha {
        transform: scale(0.84);
        transform-origin: left center;
    }

    .hh-talk-heading {
        font-size: 34px;
    }

    .hh-talk-sub {
        font-size: 16px;
    }

    .hh-talk-points {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hh-talk-point h4 {
        font-size: 17px;
    }

    /* ---- Video reels ---- */
    #video-section {
        padding: 46px 0 !important;
    }

    #video-section .lef-video h2 {
        font-size: 26px;
    }

    #video-section .lef-video>p {
        font-size: 15px;
    }

    #video-section .slider-nav-buttons button {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    /* ---- News & Blog ---- */
    .news-blog-section {
        padding: 46px 0 !important;
    }

    .news-blog-section .news-blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 28px;
    }

    .news-blog-section .hh-blog-heading {
        font-size: 32px;
    }

    .news-blog-section .hh-blog-viewall {
        font-size: 14px;
        padding: 12px 22px;
    }

    .news-blog-section .blog-title a {
        font-size: 20px;
    }

    .news-blog-section .blog-excerpt {
        font-size: 14px;
    }

    .news-blog-section .blog-meta {
        font-size: 13px;
    }

    /* ---- Footer ---- */
    .hh-footer-heading {
        font-size: 28px;
    }

    .hh-footer-text {
        font-size: 15px;
    }

    .hh-footer-col a {
        font-size: 15px;
    }

    .hh-footer-contact p,
    .hh-footer-copy p {
        font-size: 13px;
    }
}

/* ============================================================
   FAQ — "Frequently asked questions" (houzzhunt theme)
   ============================================================ */
.hh-faq.faq-section {
    padding: 90px 0 !important;
    background: #ffffff !important;
}

/* ---- left intro ---- */
.hh-faq .hh-faq-intro {
    max-width: 440px;
}

.hh-faq .hh-faq-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border: 1px solid rgba(16, 36, 42, 0.2);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
}

.hh-faq .hh-faq-title {
    margin: 22px 0 0 !important;
    font-size: clamp(34px, 3.6vw, 52px) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: -1px;
    font-style: normal !important;
    font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: var(--c-ink) !important;
    -webkit-text-fill-color: var(--c-ink);
}

.hh-faq .hh-faq-text {
    margin: 22px 0 32px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(16, 36, 42, 0.6);
}

.hh-faq .hh-faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px 11px 26px;
    background: var(--c-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .25s var(--c-ease), box-shadow .25s var(--c-ease), background .25s var(--c-ease);
}

.hh-faq .hh-faq-btn:hover {
    background: var(--c-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(9, 116, 127, 0.3);
}

.hh-faq .hh-faq-btn-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ---- accordion ---- */
.hh-faq .hh-faq-acc .accordion-item {
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(16, 36, 42, 0.04);
}

.hh-faq .hh-faq-acc .accordion-header {
    margin: 0;
}

.hh-faq .hh-faq-acc .accordion-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 22px 24px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    color: var(--c-ink) !important;
    -webkit-text-fill-color: var(--c-ink);
    font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left;
}

.hh-faq .hh-faq-acc .accordion-button::after {
    display: none !important;
}

.hh-faq .hh-faq-acc .accordion-button:focus {
    box-shadow: none !important;
}

.hh-faq .hh-faq-num {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-ink) !important;
    -webkit-text-fill-color: var(--c-ink) !important;
}

.hh-faq .hh-faq-q {
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-ink) !important;
    -webkit-text-fill-color: var(--c-ink) !important;
}

.hh-faq .hh-faq-acc .accordion-button:not(.collapsed) .hh-faq-q,
.hh-faq .hh-faq-acc .accordion-button:not(.collapsed) .hh-faq-num {
    color: var(--c-accent) !important;
    -webkit-text-fill-color: var(--c-accent) !important;
}

/* +/- toggle circle */
.hh-faq .hh-faq-toggle {
    flex: 0 0 auto;
    position: relative;
    width: 34px;
    height: 34px;
    margin-left: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(16, 36, 42, 0.25);
    transition: background .25s var(--c-ease), border-color .25s var(--c-ease);
}

.hh-faq .hh-faq-toggle::before,
.hh-faq .hh-faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--c-ink);
    transform: translate(-50%, -50%);
    transition: all .25s var(--c-ease);
}

.hh-faq .hh-faq-toggle::before {
    width: 12px;
    height: 2px;
}

.hh-faq .hh-faq-toggle::after {
    width: 2px;
    height: 12px;
}

/* expanded → filled accent circle with a minus */
.hh-faq .accordion-button:not(.collapsed) .hh-faq-toggle {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.hh-faq .accordion-button:not(.collapsed) .hh-faq-toggle::before {
    background: #ffffff;
}

.hh-faq .accordion-button:not(.collapsed) .hh-faq-toggle::after {
    height: 0;
    background: #ffffff;
}

.hh-faq .hh-faq-acc .accordion-body {
    padding: 0 24px 24px 64px;
    color: #5a6a6a !important;
    -webkit-text-fill-color: #5a6a6a !important;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 991px) {
    .hh-faq.faq-section {
        padding: 56px 0;
    }
    .hh-faq .hh-faq-intro {
        max-width: 100%;
        margin-bottom: 36px;
    }
}

@media (max-width: 575px) {
    .hh-faq .hh-faq-acc .accordion-button {
        padding: 18px 16px !important;
        gap: 8px;
    }
    .hh-faq .hh-faq-q { font-size: 15px; }
    .hh-faq .hh-faq-num { font-size: 15px; }
    .hh-faq .hh-faq-acc .accordion-body {
        padding: 0 16px 20px 16px;
        font-size: 14px;
    }
    .hh-faq .hh-faq-toggle { width: 30px; height: 30px; margin-left: 8px; }
}

/* ============================================================
   MOBILE NAV — polished slide-in panel (≤800px)
   ============================================================ */
@media (max-width: 800px) {
    .mobile-nav .nav-links {
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        background: linear-gradient(165deg, #0b5159 0%, #09747f 72%) !important;
        padding: 18px 20px 30px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
        transition: left .45s cubic-bezier(.16, 1, .3, 1) !important;
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        line-height: normal !important;
    }

    .mobile-nav .nav-links .sidebar-logo {
        padding: 6px 2px 16px !important;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mobile-nav .sidebar-logo .logo-name img {
        width: 140px !important;
    }

    .mobile-nav .sidebar-logo i.bx-x {
        color: #ffffff !important;
        font-size: 24px !important;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 50%;
        cursor: pointer;
        transition: background .25s ease, transform .35s ease;
    }

    .mobile-nav .sidebar-logo i.bx-x:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: rotate(90deg);
    }

    .mobile-nav .nav-links .links {
        margin-top: 4px !important;
    }

    .mobile-nav .nav-links .links > li {
        position: relative;
        display: block;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .mobile-nav .nav-links .links > li > a {
        display: block;
        color: rgba(255, 255, 255, 0.92) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        letter-spacing: .2px;
        padding: 14px 8px !important;
        margin: 0 !important;
        border-radius: 8px;
        transition: color .2s ease, padding-left .25s var(--c-ease), background .2s ease;
    }

    .mobile-nav .nav-links .links > li > a:hover {
        color: #ffffff !important;
        padding-left: 16px !important;
        background: rgba(255, 255, 255, 0.06);
    }

    .mobile-nav .nav-links .links li .arrow {
        position: absolute !important;
        right: 4px;
        top: 8px !important;
        left: auto !important;
        margin: 0 !important;
        font-size: 20px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        transition: transform .35s var(--c-ease), background .2s ease !important;
    }

    .mobile-nav .nav-links .links li .arrow:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .mobile-nav .nav-links .links li .arrow.rotated {
        transform: rotate(180deg) !important;
    }

    .mobile-nav .nav-links .links li .sub-menu {
        display: block !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding-left: 12px;
        box-shadow: none !important;
        transition: max-height .4s var(--c-ease), opacity .3s ease, padding .3s ease;
    }

    .mobile-nav .nav-links .links li .sub-menu.open {
        max-height: 380px;
        opacity: 1;
        padding-bottom: 6px;
    }

    .mobile-nav .nav-links .links li .sub-menu li {
        border-bottom: none !important;
    }

    .mobile-nav .nav-links .links li .sub-menu li a {
        display: block;
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 14.5px !important;
        font-weight: 400 !important;
        padding: 9px 8px !important;
        margin: 0 !important;
        transition: color .2s ease, padding-left .2s ease;
    }

    .mobile-nav .nav-links .links li .sub-menu li a:hover {
        color: #ffffff !important;
        padding-left: 16px !important;
    }

    .mobile-nav-extra {
        margin-top: auto;
        padding-top: 26px;
    }

    .mobile-nav-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #ffffff;
        color: #09747f !important;
        font-size: 16px;
        font-weight: 700;
        padding: 14px;
        border-radius: 12px;
        text-decoration: none;
        transition: transform .25s var(--c-ease), box-shadow .25s var(--c-ease);
    }

    .mobile-nav-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
    }

    .mobile-nav-cta i {
        font-size: 20px;
    }

    .mobile-nav-contact {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 22px;
    }

    .mobile-nav-contact a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 14px;
        text-decoration: none;
    }

    .mobile-nav-contact a i {
        font-size: 18px;
        color: #ffffff;
    }

    .mobile-nav-social {
        display: flex;
        gap: 10px;
        margin-top: 22px;
    }

    .mobile-nav-social a {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 10px;
        color: #ffffff !important;
        font-size: 17px;
        transition: background .25s ease, transform .25s ease;
    }

    .mobile-nav-social a:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
    }
}

/* ===== Connect With Us CTA ===== */
.hh-cta {
    padding: 0 0 100px;
    background: #ffffff;
}

.hh-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    background: #09747f;
    border-radius: 28px;
    overflow: hidden;
    min-height: 440px;
    box-shadow: 0 24px 60px rgba(16, 36, 42, 0.18);
}

.hh-cta-content {
    padding: 64px 30px 64px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hh-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 22px;
}

.hh-cta-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-accent);
}

.hh-cta-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 52px;
    line-height: 1.1;
    font-weight: 500;
    margin: 0 0 40px;
}

.hh-cta-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px 13px 30px;
    background:#edbb68;
    color: #222;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .3s var(--c-ease), box-shadow .3s var(--c-ease),
        background .3s var(--c-ease), color .3s var(--c-ease);
}

/* .hh-cta-btn:hover {
    background: var(--c-accent-700);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(9, 116, 127, 0.3);
} */

.hh-cta-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s var(--c-ease);
}

.hh-cta-btn:hover .hh-cta-btn-icon {
    transform: translate(3px, -3px);
}

.hh-cta-media {
    position: relative;
    min-height: 100%;
}

.hh-cta-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 991px) {
    .hh-cta-title {
        font-size: 40px;
    }

    .hh-cta-content {
        padding: 50px 30px 50px 44px;
    }
}

@media (max-width: 767px) {
    .hh-cta {
        padding: 0 0 60px;
    }

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

    .hh-cta-content {
        padding: 44px 26px;
        order: 2;
    }

    .hh-cta-media {
        order: 1;
        min-height: 240px;
    }

    .hh-cta-title {
        font-size: 32px;
        margin-bottom: 28px;
    }

    .hh-cta-title br {
        display: none;
    }
}

/* =====================================================================
   Navbar search + language switcher
   ===================================================================== */
.hh-search {
    position: relative;
    display: flex;
    align-items: center;
}

/* Toggles sit on the always-white navbar: dark ink + teal accent, like the nav links */
.hh-search-toggle,
.hh-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(16, 36, 42, 0.16);
    color: var(--c-ink);
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s var(--c-ease), border-color .25s var(--c-ease), color .25s var(--c-ease);
}

.hh-search-toggle {
    width: 40px;
    height: 40px;
    justify-content: center;
    font-size: 19px;
}

.hh-search-toggle:hover,
.hh-lang-toggle:hover,
.hh-search.is-open .hh-search-toggle,
.hh-lang.is-open .hh-lang-toggle {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/* Compact sizing when the controls live in the thin topbar */
.hh-topbar .hh-search-toggle {
    width: 34px;
    height: 34px;
    font-size: 17px;
}

.hh-topbar .hh-lang-toggle {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

/* The expanding search panel */
.hh-search-panel {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) scaleX(0.7);
    transform-origin: right center;
    display: flex;
    align-items: center;
    width: 340px;
    max-width: 70vw;
    height: 46px;
    padding: 0 8px 0 16px;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 18px 40px rgba(16, 36, 42, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s var(--c-ease), transform .25s var(--c-ease), visibility .25s;
    z-index: 1100;
}

.hh-search.is-open .hh-search-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scaleX(1);
}


.hh-search-panel-icon {
    color: var(--c-accent);
    font-size: 18px;
    flex: 0 0 auto;
    margin-right: 8px;
}

.hh-search-input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #10242a;
    min-width: 0;
}

.hh-search-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    background: #f1f4f4;
    color: #10242a;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.hh-search-close:hover {
    background: #e3e9e9;
}

/* Live results dropdown */
.hh-search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 36, 42, 0.22);
    padding: 8px;
    display: none;
}

.hh-search-results.is-visible {
    display: block;
}

.hh-search-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-accent);
    padding: 10px 12px 6px;
}

.hh-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #10242a;
    transition: background .15s var(--c-ease);
}

.hh-search-result:hover,
.hh-search-result.is-active {
    background: #f3f7f7;
    color: #10242a;
}

.hh-search-result-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    object-fit: cover;
    background: #eef2f2;
}

.hh-search-result-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.hh-search-result-body {
    min-width: 0;
}

.hh-search-result-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hh-search-result-sub {
    display: block;
    font-size: 12px;
    color: #6b7a7d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hh-search-state {
    padding: 18px 14px;
    text-align: center;
    color: #6b7a7d;
    font-size: 13px;
}

.hh-search-viewall {
    display: block;
    text-align: center;
    padding: 11px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-accent);
    text-decoration: none;
    border-top: 1px solid #eef2f2;
}

.hh-search-viewall:hover {
    color: var(--c-accent-700);
}

/* Language switcher */
.hh-lang {
    position: relative;
}

.hh-lang-toggle {
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
}

.hh-lang-current {
    letter-spacing: 0.5px;
}

.hh-lang-arrow {
    transition: transform .25s var(--c-ease);
}

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

.hh-lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 150px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(16, 36, 42, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--c-ease), transform .2s var(--c-ease), visibility .2s;
    z-index: 1100;
}

.hh-lang.is-open .hh-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hh-lang-option {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #10242a;
    text-decoration: none;
}

.hh-lang-option:hover {
    background: #f3f7f7;
    color: #10242a;
}

.hh-lang-option.is-active {
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

/* Mobile search + language */
.mobile-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

.mobile-search i {
    color: #ffffff;
    font-size: 18px;
}

.mobile-search input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    min-width: 0;
}

.mobile-search input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.mobile-nav-lang {
    margin: 18px 0 6px;
}

.mobile-nav-lang-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
}

.mobile-nav-lang-options {
    display: flex;
    gap: 10px;
}

.mobile-nav-lang-options a {
    flex: 1 1 0;
    text-align: center;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
}

.mobile-nav-lang-options a.is-active {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

@media (max-width: 991px) {
    .hh-search,
    .hh-lang {
        display: none;
    }
}

/* =====================================================================
   Full search results page
   ===================================================================== */
.hh-search-page {
    padding: 130px 0 90px;
    background: #ffffff;
    min-height: 70vh;
}

.hh-search-page-form {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 6px 6px 6px 20px;
    background: #f4f7f7;
    border: 1px solid #e2e9e9;
    border-radius: 999px;
}

.hh-search-page-form i {
    font-size: 20px;
    color: var(--c-accent);
}

.hh-search-page-form input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: #10242a;
    min-width: 0;
}

.hh-search-page-form button {
    flex: 0 0 auto;
    padding: 12px 26px;
    background: var(--c-accent);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s var(--c-ease);
}

.hh-search-page-form button:hover {
    background: var(--c-accent-700);
}

.hh-search-page-heading {
    font-size: 26px;
    font-weight: 600;
    color: #10242a;
    margin-bottom: 30px;
}

.hh-search-page-count {
    color: #8a9799;
    font-weight: 500;
}

.hh-search-page-empty {
    text-align: center;
    padding: 30px 0 50px;
}

.hh-search-page-empty h1 {
    font-size: 30px;
    color: #10242a;
}

.hh-search-page-empty p,
.hh-search-page-none {
    color: #6b7a7d;
}

.hh-sr-group {
    margin-bottom: 40px;
}

.hh-sr-group-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--c-accent);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f2;
}

.hh-sr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

.hh-sr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid #eef2f2;
    border-radius: 14px;
    text-decoration: none;
    color: #10242a;
    transition: box-shadow .25s var(--c-ease), transform .25s var(--c-ease), border-color .25s var(--c-ease);
}

.hh-sr-card:hover {
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(16, 36, 42, 0.12);
    transform: translateY(-2px);
    color: #10242a;
}

.hh-sr-thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef2f2;
}

.hh-sr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-sr-body {
    min-width: 0;
}

.hh-sr-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.hh-sr-sub {
    display: block;
    font-size: 13px;
    color: #6b7a7d;
    margin-top: 2px;
}

.hh-sr-price {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-accent);
    margin-top: 3px;
}

@media (max-width: 991px) {
    .hh-sr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .hh-search-page {
        padding: 110px 0 60px;
    }

    .hh-search-page-form button {
        padding: 12px 18px;
    }

    .hh-sr-grid,
    .hh-sr-grid-pages {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Services UI — Atamisa-style numbered cards (houzzhunt theme)
   Used on services.php (main)
   Colors: teal #09747f / gold #edbb68 ; font: inherited (Plus Jakarta Sans)
   ========================================================= */
.hh-svc-section {
    background: #fff;
    padding: 90px 0 100px;
}

/* --- Section header --- */
.hh-svc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 52px;
}

.hh-svc-head-left {
    max-width: 640px;
}

.hh-svc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #09747f;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hh-svc-kicker::before {
    content: "";
    width: 30px;
    height: 2px;
    background: #edbb68;
    display: inline-block;
}

.hh-svc-title {
    font-size: 40px;
    line-height: 1.18;
    font-weight: 600;
    color: #1b2429;
    margin: 0;
}

.hh-svc-title span {
    color: #09747f;
}

.hh-svc-viewall {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 40px;
    background: #09747f;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: background 0.3s ease, transform 0.3s ease;
}

.hh-svc-viewall:hover {
    background: #edbb68;
    color: #1b2429;
    transform: translateY(-2px);
}

.hh-svc-viewall svg {
    width: 18px;
    height: 18px;
}

/* --- Grid --- */
.hh-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- Card --- */
.hh-svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eaeeee;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.hh-svc-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 24px 55px rgba(9, 116, 127, 0.16);
}

.hh-svc-media {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.hh-svc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hh-svc-card:hover .hh-svc-media img {
    transform: scale(1.07);
}

.hh-svc-num {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    color: #09747f;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    padding: 7px 15px;
    border-radius: 30px;
    backdrop-filter: blur(4px);
}

.hh-svc-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 28px;
}

.hh-svc-body h4 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: #1b2429;
    transition: color 0.3s ease;
}

.hh-svc-card:hover .hh-svc-body h4 {
    color: #09747f;
}

.hh-svc-body p {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.65;
    color: #667070;
}

.hh-svc-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1b2429;
    transition: color 0.3s ease;
}

.hh-svc-card:hover .hh-svc-link {
    color: #09747f;
}

.hh-svc-link .hh-svc-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #d9e0e0;
    color: #09747f;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.hh-svc-link .hh-svc-arrow svg {
    width: 17px;
    height: 17px;
}

.hh-svc-card:hover .hh-svc-link .hh-svc-arrow {
    background: #09747f;
    border-color: #09747f;
    color: #fff;
    transform: rotate(-45deg);
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .hh-svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hh-svc-title {
        font-size: 32px;
    }
}

@media (max-width: 575px) {
    .hh-svc-section {
        padding: 60px 0 70px;
    }

    .hh-svc-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hh-svc-title {
        font-size: 26px;
    }

    .hh-svc-head {
        margin-bottom: 36px;
    }
}

/* =========================================================
   Services UI v2 — staggered masonry ("services we offer" ref)
   Used on services.php ; houzzhunt theme (teal #09747f / gold #edbb68)
   ========================================================= */
.hh-svc2-section {
    background: #fff;
    padding: 90px 0 100px;
}

.hh-svc2-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.hh-svc2-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* staggered vertical offsets */
.hh-svc2-col--mid {
    margin-top: 190px;
}

.hh-svc2-col--end {
    margin-top: 80px;
}

/* --- intro block --- */
.hh-svc2-intro {
    padding: 6px 10px 8px 0;
}

.hh-svc2-badge {
    display: inline-block;
    border: 1px solid #e2e6e6;
    border-radius: 30px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #1b2429;
    margin-bottom: 24px;
}

.hh-svc2-title {
    font-size: 38px;
    line-height: 1.16;
    font-weight: 600;
    font-style: normal;
    color: #1b2429;
    margin: 0 0 34px;
}

.hh-svc2-title span {
    color: #09747f !important;
    font-style: normal;
    /* explicitly NOT italic */
}

/* Explore Services CTA — matches navbar "Enquire Now" pill (fill-from-dot) */
.hh-svc2-explore {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    color: var(--c-ink, #1b2429);
    border: 1.5px solid var(--c-accent, #09747f);
    padding: 11px 14px 11px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.35s ease, border-color 0.45s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

/* teal wash that grows out of the dot to fill the pill on hover */
.hh-svc2-explore::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 27px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-accent, #09747f);
    transform: translateY(-50%) scale(0);
    transition: transform 0.5s ease;
}

.hh-svc2-explore .hh-cta-label {
    position: relative;
    z-index: 1;
}

.hh-svc2-explore .hh-cta-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-accent, #09747f);
    flex: 0 0 auto;
    transition: background 0.35s ease, transform 0.35s ease;
}

.hh-svc2-explore .hh-cta-dot i {
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
    transition: color 0.35s ease;
}

.hh-svc2-explore:hover {
    color: #ffffff;
    border-color: var(--c-accent-700, #075a63);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(9, 116, 127, 0.28);
}

.hh-svc2-explore:hover::before {
    transform: translateY(-50%) scale(13);
}

.hh-svc2-explore:hover .hh-cta-dot {
    background: #ffffff;
    transform: scale(1.08);
}

.hh-svc2-explore:hover .hh-cta-dot i {
    color: var(--c-accent, #09747f);
}

/* --- card --- */
.hh-svc2-card {
    position: relative;
    display: block;
    background: #f5f6f6;
    border-radius: 22px;
    padding: 18px 18px 72px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.hh-svc2-card:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 22px 50px rgba(9, 116, 127, 0.14);
}

.hh-svc2-img {
    height: 185px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 22px;
}

.hh-svc2-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hh-svc2-card:hover .hh-svc2-img img {
    transform: scale(1.06);
}

.hh-svc2-icon {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 0 16px 6px;
    color: #09747f;
}

.hh-svc2-icon svg {
    width: 100%;
    height: 100%;
}

.hh-svc2-card h4 {
    font-size: 20px;
    font-weight: 600;
    color: #1b2429;
    margin: 0 0 10px 6px;
    transition: color 0.3s ease;
}

.hh-svc2-card:hover h4 {
    color: #09747f;
}

.hh-svc2-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #6a7373;
    margin: 0 0 0 6px;
    max-width: 86%;
}

.hh-svc2-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b2429;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.hh-svc2-arrow svg {
    width: 17px;
    height: 17px;
}

.hh-svc2-card:hover .hh-svc2-arrow {
    background: #09747f;
    color: #fff;
    transform: rotate(-45deg);
}

/* --- responsive --- */
@media (max-width: 991px) {
    .hh-svc2-row {
        flex-wrap: wrap;
    }

    .hh-svc2-col {
        flex: 1 1 calc(50% - 15px);
        margin-top: 0;
    }

    .hh-svc2-title {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    .hh-svc2-section {
        padding: 56px 0 64px;
    }

    .hh-svc2-col {
        flex: 1 1 100%;
    }

    .hh-svc2-title {
        font-size: 26px;
    }
}