/*
 * SIL Connect — modern public-site design layer (header, footer, homepage).
 * Purely additive: loaded after style.css/responsive.css via assets/styleLink.blade.php.
 * Shares design tokens with dashboard-modern.css (same --sc-* variables).
 */

:root {
    --sc-primary: #481d63;
    --sc-primary-dark: #34123f;
    --sc-primary-light: #f4eff7;
    --sc-accent: #3ba23f;
    --sc-accent-dark: #328e36;
    --sc-accent-light: #eaf7eb;
    --sc-text: #1a1a2e;
    --sc-text-muted: #6b7280;
    --sc-border: #ecebf0;
    --sc-surface: #ffffff;
    --sc-surface-alt: #f7f6fa;
    --sc-radius-sm: 10px;
    --sc-radius-md: 16px;
    --sc-radius-lg: 24px;
    --sc-radius-pill: 999px;
    --sc-shadow-sm: 0 2px 10px rgba(20, 10, 30, 0.06);
    --sc-shadow-md: 0 10px 30px rgba(20, 10, 30, 0.08);
    --sc-shadow-lg: 0 20px 50px rgba(20, 10, 30, 0.12);
    --sc-container: 1280px;
}

.sc-body {
    font-family: var(--body-font-family), sans-serif;
    color: var(--sc-text);
}

.sc-container {
    width: 100%;
    max-width: var(--sc-container);
    margin: 0 auto;
    padding: 0 24px;
}

.sc-section {
    padding: 72px 0;
}

@media (max-width: 767.98px) {
    .sc-section {
        padding: 44px 0;
    }
}

.sc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-primary);
    background: var(--sc-primary-light);
    padding: 6px 16px;
    border-radius: var(--sc-radius-pill);
    margin-bottom: 16px;
}

.sc-heading {
    font-family: var(--title-font-family), sans-serif;
    font-weight: 800;
    color: var(--sc-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.sc-heading-lg { font-size: clamp(32px, 4.2vw, 48px); }
.sc-heading-md { font-size: clamp(24px, 2.8vw, 34px); }

.sc-subtext {
    color: var(--sc-text-muted);
    font-size: 16px;
    line-height: 1.65;
}

.sc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 36px;
}

.sc-section-head-center {
    text-align: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.sc-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--sc-primary);
    white-space: nowrap;
    text-decoration: none;
}

.sc-view-all:hover { color: var(--sc-accent); }

/* ---------- Buttons ---------- */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--sc-radius-pill);
    padding: 13px 26px;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.sc-btn-primary {
    background: var(--sc-primary);
    color: #fff;
}
.sc-btn-primary:hover { background: var(--sc-primary-dark); color: #fff; transform: translateY(-1px); }

.sc-btn-accent {
    background: var(--sc-accent);
    color: #fff;
}
.sc-btn-accent:hover { background: var(--sc-accent-dark); color: #fff; transform: translateY(-1px); }

.sc-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.sc-btn-outline:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

.sc-btn-white {
    background: #fff;
    color: var(--sc-primary);
}
.sc-btn-white:hover { background: var(--sc-primary-light); color: var(--sc-primary); }

.sc-btn-sm { padding: 9px 18px; font-size: 13px; }
.sc-btn-block { width: 100%; }

/* ---------- Cards ---------- */
.sc-card {
    background: var(--sc-surface);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-md);
    border: 1px solid var(--sc-border);
    overflow: hidden;
}

.sc-card-dark {
    background: linear-gradient(155deg, var(--sc-primary) 0%, var(--sc-primary-dark) 100%);
    color: #fff !important;
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-lg);
}

.sc-card-dark h1, .sc-card-dark h2, .sc-card-dark h3, .sc-card-dark h4,
.sc-card-dark h5, .sc-card-dark h6, .sc-card-dark p, .sc-card-dark span {
    color: #fff !important;
}

/* ==========================================================
   HEADER
   ========================================================== */
.sc-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sc-border);
}

.sc-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
}

.sc-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

/* Source is a square 1024x1024 mark, so it scales up cleanly. Row padding is
   trimmed to 10px to keep the sticky bar from growing as much as the logo. */
.sc-header-logo img { height: 76px; width: auto; display: block; }

.sc-header-logo-text {
    font-family: var(--title-font-family), sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: var(--sc-text);
    white-space: nowrap;
}

.sc-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-nav > li { position: relative; }

.sc-nav > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--sc-text);
    text-decoration: none;
    border-radius: var(--sc-radius-sm);
    white-space: nowrap;
}

.sc-nav > li > a:hover { background: var(--sc-primary-light); color: var(--sc-primary); }

.sc-nav .sc-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-lg);
    border: 1px solid var(--sc-border);
    padding: 10px;
    margin-top: 8px;
    z-index: 20;
}

.sc-nav li:hover > .sc-dropdown-panel { display: block; }

.sc-nav .sc-dropdown-panel a {
    display: block;
    padding: 9px 14px;
    border-radius: var(--sc-radius-sm);
    color: var(--sc-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.sc-nav .sc-dropdown-panel a:hover { background: var(--sc-primary-light); color: var(--sc-primary); }

.sc-mega-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, 90vw);
    background: #fff;
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-lg);
    border: 1px solid var(--sc-border);
    padding: 20px;
    margin-top: 8px;
    z-index: 20;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    max-height: 60vh;
    overflow-y: auto;
}

.sc-nav li:hover > .sc-mega-panel { display: grid; }

.sc-mega-panel a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--sc-text);
    font-size: 13.5px;
    text-decoration: none;
}

.sc-mega-panel a:hover { background: var(--sc-primary-light); color: var(--sc-primary); }

.sc-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sc-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sc-surface-alt);
    color: var(--sc-primary);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.sc-icon-btn:hover { background: var(--sc-primary-light); color: var(--sc-primary); }

.sc-login-link {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--sc-text);
    text-decoration: none;
    padding: 10px 14px;
}
.sc-login-link:hover { color: var(--sc-primary); }

.sc-profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: var(--sc-radius-pill);
    background: var(--sc-surface-alt);
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: var(--sc-text);
    font-weight: 700;
    font-size: 14px;
}

.sc-profile-trigger img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.sc-profile-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 10px;
    min-width: 210px;
    background: #fff;
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-lg);
    border: 1px solid var(--sc-border);
    padding: 8px;
    z-index: 40;
}

.sc-profile-menu.sc-show { display: block; }

.sc-profile-menu a,
.sc-profile-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--sc-radius-sm);
    color: var(--sc-text);
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sc-profile-menu a:hover,
.sc-profile-menu button:hover { background: var(--sc-primary-light); color: var(--sc-primary); }

/* Mobile app-style top bar */
.sc-mobile-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
    background: #fff;
    border-bottom: 1px solid var(--sc-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.sc-mobile-bar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--sc-text);
    font-weight: 800;
    font-size: 16px;
}

.sc-mobile-bar-logo img { height: 54px; }

.sc-mobile-bar-actions { display: flex; align-items: center; gap: 8px; }

@media (max-width: 991.98px) {
    .sc-header { display: none; }
    .sc-mobile-bar { display: flex; }
}

/* ==========================================================
   HERO
   ========================================================== */
/* Shared by the homepage, listing.blade.php and serviceListing.blade.php.
   Keep this LIGHT — the listing pages use it as a compact search strip.
   The homepage's dark treatment lives under .sc-hero-home below. */
.sc-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 80px;
    background:
        radial-gradient(circle at 15% 20%, rgba(72, 29, 99, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 90% 15%, rgba(59, 162, 63, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #faf8fb 0%, #ffffff 100%);
}

.sc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
}

.sc-hero-title {
    font-family: var(--title-font-family), sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sc-text);
    margin-bottom: 20px;
}

/* Flat colour is the floor; the gradient upgrade only applies where
   background-clip:text is supported, so the word can never render invisible. */
.sc-hero-title .sc-highlight {
    position: relative;
    color: var(--sc-accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sc-hero-title .sc-highlight {
        background: linear-gradient(100deg, #47b94c 0%, var(--sc-accent) 45%, #2b7a2f 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.sc-hero-title .sc-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 0.13em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59, 162, 63, 0.6) 0%, rgba(59, 162, 63, 0.12) 100%);
}

.sc-hero-subtext {
    font-size: 17px;
    color: var(--sc-text-muted);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 32px;
}

.sc-hero-search {
    background: #fff;
    border-radius: var(--sc-radius-lg);
    box-shadow: 0 24px 60px rgba(72, 29, 99, 0.16);
    border: 1px solid rgba(72, 29, 99, 0.06);
    padding: 14px;
    max-width: 580px;
}

/* Centered hero variant (homepage + search pages) */
.sc-hero-centered { padding: 56px 0 64px; }

.sc-hero-inner {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sc-hero-centered .sc-hero-subtext {
    margin-left: auto;
    margin-right: auto;
    max-width: 620px;
}

.sc-hero-centered .sc-hero-search {
    max-width: 940px;
    width: 100%;
    text-align: left;
}

.sc-hero-centered .sc-hero-tabs { margin: 0 auto 10px; }

@media (max-width: 991.98px) {
    .sc-hero-centered { padding: 24px 0 36px; }
}

.sc-hero-tabs {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: var(--sc-surface-alt);
    border-radius: var(--sc-radius-pill);
    margin-bottom: 4px;
    width: fit-content;
}

.sc-hero-tab {
    border: none;
    background: transparent;
    padding: 11px 22px;
    border-radius: var(--sc-radius-pill);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--sc-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sc-hero-tab.sc-active {
    background: var(--sc-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(72, 29, 99, 0.25);
}

.sc-hero-search-form { display: none; }
.sc-hero-search-form.sc-active { display: block; }

.sc-hero-fields {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-wrap: wrap;
}

.sc-hero-field {
    flex: 1;
    min-width: 160px;
    position: relative;
    padding: 10px 16px 10px 42px;
    border-right: 1px solid var(--sc-border);
}

.sc-hero-field::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 16px;
    color: var(--sc-primary);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.sc-hero-field:nth-of-type(1)::before { content: '\f0ca'; }
.sc-hero-field:nth-of-type(2)::before { content: '\f3c5'; }
.sc-hero-field:nth-of-type(3)::before { content: '\f002'; }
.sc-hero-field:nth-of-type(4)::before { content: '\f073'; }

.sc-hero-field:last-of-type { border-right: none; }

.sc-hero-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sc-text-muted);
    margin-bottom: 3px;
}

.sc-hero-field select,
.sc-hero-field input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-text);
    background: transparent;
    padding: 0;
}

.sc-hero-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sc-primary);
    color: #fff;
    border: none;
    border-radius: var(--sc-radius-md);
    padding: 0 26px;
    /* Vertical size came only from `align-items: stretch` on .sc-hero-fields.
       That row wraps, and once the button lands on its own line there is
       nothing to stretch against, so it collapsed to text height. min-height
       matches the field height (10px + label + input + 10px) so it looks
       right whether it sits inline or wraps. */
    min-height: 54px;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
    white-space: nowrap;
}

.sc-hero-submit:hover { background: var(--sc-primary-dark); }

.sc-hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.sc-hero-avatars {
    display: flex;
}

.sc-hero-avatars img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -10px;
}

.sc-hero-avatars img:first-child { margin-left: 0; }

.sc-hero-trust-text { font-size: 13.5px; color: var(--sc-text-muted); font-weight: 600; }
.sc-hero-trust-text strong { color: var(--sc-text); }

.sc-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Soft coloured glow behind the portrait, so it sits in the page rather than
   floating on flat white. Absolutely positioned so it stays out of the flex flow. */
.sc-hero-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92%;
    aspect-ratio: 1 / 1;
    transform: translate(-47%, -52%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 29, 99, 0.18) 0%, rgba(59, 162, 63, 0.10) 46%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

/* Arch, not blob. The old organic `border-radius: 45% 55% 60% 40% / ...` was
   the most dated element on the page. */
.sc-hero-blob {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 468px;
    aspect-ratio: 5 / 6;
    border-radius: 234px 234px 28px 28px;
    overflow: hidden;
    box-shadow: 0 34px 72px -20px rgba(45, 15, 63, 0.42);
}

.sc-hero-blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Grounds the base of the arch so the float cards have something to sit against */
.sc-hero-blob::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(45, 15, 63, 0) 48%, rgba(45, 15, 63, 0.44) 100%);
}

.sc-hero-float-card {
    position: absolute;
    z-index: 2;
    bottom: 8%;
    left: -6%;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--sc-radius-md);
    box-shadow: 0 20px 44px -14px rgba(45, 15, 63, 0.34);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 220px;
    animation: sc-hero-float 6s ease-in-out infinite;
}

/* Second card, opposite corner — the layered depth the original was reaching
   for with a single card. */
.sc-hero-float-card.is-top {
    top: 7%;
    bottom: auto;
    left: auto;
    right: -5%;
    animation-delay: -3s;
}

@keyframes sc-hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
    .sc-hero-float-card { animation: none; }
}

.sc-hero-float-card .sc-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sc-accent-light);
    color: var(--sc-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.sc-hero-float-card strong { display: block; font-size: 15px; color: var(--sc-text); }
.sc-hero-float-card span { font-size: 12px; color: var(--sc-text-muted); }

@media (max-width: 991.98px) {
    .sc-hero { padding: 20px 0 40px; }
    .sc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .sc-hero-visual { display: none; }
    .sc-hero-search { max-width: 100%; }
    .sc-hero-fields { flex-direction: column; }
    /* Keep the left padding so the absolutely-positioned field icon doesn't
       sit on top of the label/value when the fields stack vertically. */
    .sc-hero-field { border-right: none; border-bottom: 1px solid var(--sc-border); padding: 12px 14px 12px 46px; }
    .sc-hero-field::before { left: 16px; }
    .sc-hero-field:last-of-type { border-bottom: none; }
    .sc-hero-submit { width: 100%; padding: 14px; margin-top: 4px; }
}

/* App-style quick actions (mobile only, guest) */
.sc-quick-actions {
    display: none;
    gap: 12px;
    padding: 20px;
}

.sc-quick-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--sc-surface-alt);
    border-radius: var(--sc-radius-md);
    padding: 18px 10px;
    text-decoration: none;
    color: var(--sc-text);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
}

.sc-quick-action .sc-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

@media (max-width: 991.98px) {
    .sc-quick-actions { display: flex; }
}

/* ==========================================================
   EXPLORE SERVICES CHIP ROW
   ========================================================== */
.sc-chip-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}

.sc-chip-row::-webkit-scrollbar { display: none; }

.sc-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 128px;
    padding: 20px 12px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-sm);
    text-decoration: none;
    color: var(--sc-text);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sc-chip:hover {
    transform: translateY(-3px);
    box-shadow: var(--sc-shadow-md);
    color: var(--sc-text);
}

.sc-chip-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* ==========================================================
   STATS / HUB SECTION
   ========================================================== */
.sc-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0;
}

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

.sc-stat-number {
    font-family: var(--title-font-family), sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3vw, 36px);
    color: var(--sc-primary);
}

.sc-stat-label {
    font-size: 13.5px;
    color: var(--sc-text-muted);
    font-weight: 600;
}

.sc-features-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.sc-feature-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    padding: 28px;
    text-decoration: none;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sc-feature-card:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-md); }

.sc-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--sc-primary-light);
    color: var(--sc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.sc-feature-card h3 { font-size: 17px; font-weight: 800; color: var(--sc-text); margin-bottom: 6px; }
.sc-feature-card p { font-size: 14px; color: var(--sc-text-muted); margin: 0; }

@media (max-width: 767.98px) {
    .sc-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .sc-features-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ==========================================================
   LISTING / SERVICE / NEWS CARDS
   ========================================================== */
.sc-split-row {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .sc-split-row { grid-template-columns: minmax(0, 1fr); }
}

.sc-promo-card {
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
}

.sc-promo-card h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; color: #fff !important; }
.sc-promo-card p { font-size: 14px; opacity: 0.85; margin-bottom: 20px; color: #fff !important; }

.sc-carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.sc-carousel-track::-webkit-scrollbar { display: none; }

.sc-carousel-track > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

.sc-listing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Fixed width only inside a horizontal carousel track; in a grid the card fills its column */
.sc-carousel-track > .sc-listing-card { width: 300px; }

.sc-listing-thumb {
    position: relative;
    height: 190px;
    flex-shrink: 0;
}

.sc-listing-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-listing-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--sc-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--sc-radius-pill);
    text-transform: uppercase;
}

.sc-listing-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sc-listing-body h4 {
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--sc-text);
    /* Reserve two lines so 1-line and 2-line titles keep cards aligned */
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-listing-body h4 a { color: inherit; text-decoration: none; }

.sc-listing-meta { font-size: 13px; color: var(--sc-text-muted); margin-bottom: 10px; }

.sc-listing-facts {
    display: flex;
    gap: 14px;
    font-size: 12.5px;
    color: var(--sc-text-muted);
    margin-bottom: 14px;
}

.sc-listing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--sc-border);
    padding-top: 12px;
    /* Pin the footer to the bottom so every card's CTA lines up */
    margin-top: auto;
}

.sc-listing-provider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sc-text-muted);
}

.sc-listing-provider img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.sc-service-card {
    width: 260px;
}

.sc-service-thumb { height: 150px; position: relative; }
.sc-service-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-service-icon {
    position: absolute;
    bottom: -18px;
    left: 18px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--sc-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-primary);
    font-size: 18px;
}

.sc-service-body { padding: 26px 18px 18px; }
.sc-service-body span.sc-service-sub {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sc-accent);
}
.sc-service-body h4 { font-size: 15px; font-weight: 700; margin: 6px 0 12px; color: var(--sc-text); }
.sc-service-body a.sc-explore {
    font-size: 13px;
    font-weight: 700;
    color: var(--sc-primary);
    text-decoration: none;
}

.sc-news-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sc-news-thumb { height: 160px; position: relative; }
.sc-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-news-date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    border-radius: var(--sc-radius-sm);
    padding: 6px 10px;
    text-align: center;
    box-shadow: var(--sc-shadow-sm);
    line-height: 1.1;
}
.sc-news-date-badge .sc-day { display: block; font-weight: 800; font-size: 16px; color: var(--sc-primary); }
.sc-news-date-badge .sc-month { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--sc-text-muted); }

.sc-news-body { padding: 18px; }
.sc-news-tag { font-size: 12px; font-weight: 700; color: var(--sc-accent); }
.sc-news-body h4 { font-size: 15.5px; font-weight: 700; margin: 6px 0; color: var(--sc-text); }
.sc-news-body p { font-size: 13.5px; color: var(--sc-text-muted); margin: 0; }

/* Carousel nav buttons — scoped per-instance via [data-carousel] */
.sc-carousel-nav { display: flex; gap: 8px; }
.sc-carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--sc-border);
    background: #fff;
    color: var(--sc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sc-carousel-btn:hover { background: var(--sc-primary); color: #fff; border-color: var(--sc-primary); }
.sc-carousel-btn:disabled { opacity: 0.35; cursor: default; }
.sc-carousel-btn:disabled:hover { background: #fff; color: var(--sc-primary); }

@media (max-width: 767.98px) {
    .sc-carousel-track > .sc-listing-card,
    .sc-carousel-track > .sc-service-card { width: 78vw; }
}

/* ==========================================================
   STATES GRID
   ========================================================== */
.sc-states-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 130px;
    gap: 16px;
}

.sc-state-card {
    position: relative;
    border-radius: var(--sc-radius-md);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    color: #fff;
    grid-column: span 1;
    grid-row: span 1;
}

.sc-state-card.sc-large { grid-column: span 2; grid-row: span 2; }
.sc-state-card.sc-wide { grid-column: span 2; }

.sc-state-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-state-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 8, 30, 0) 40%, rgba(20, 8, 30, 0.75) 100%);
}

.sc-state-card-body {
    position: relative;
    z-index: 1;
    padding: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.sc-state-card-body strong { font-size: 15px; }
.sc-state-card-body span { font-size: 12px; opacity: 0.85; display: block; }

.sc-state-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .sc-states-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 110px; }
    .sc-state-card.sc-large { grid-column: span 2; grid-row: span 1; }
    .sc-state-card.sc-wide { grid-column: span 2; }
}

/* ==========================================================
   CTA BANNERS
   ========================================================== */
.sc-cta-banner {
    border-radius: var(--sc-radius-lg);
    background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-dark) 100%);
    color: #fff !important;
    padding: 56px 48px;
    text-align: center;
}

.sc-cta-banner h1, .sc-cta-banner h2, .sc-cta-banner h3, .sc-cta-banner p, .sc-cta-banner span {
    color: #fff !important;
}

.sc-cta-banner h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 12px; }
.sc-cta-banner p { opacity: 0.85; max-width: 560px; margin: 0 auto 28px; }
.sc-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 767.98px) {
    .sc-cta-banner { padding: 36px 24px; }
}

/* ==========================================================
   FOOTER
   ========================================================== */
.sc-footer {
    background: var(--sc-primary-dark);
    color: rgba(255, 255, 255, 0.82);
    padding: 64px 0 0;
}

.sc-footer p, .sc-footer span, .sc-footer a, .sc-footer h6, .sc-footer li {
    color: rgba(255, 255, 255, 0.82);
}

.sc-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr) 1.2fr;
    gap: 36px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sc-footer h6 {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 20px;
}

.sc-footer-logo img { height: 64px; margin-bottom: 16px; }
.sc-footer-desc { font-size: 13px; line-height: 1.7; opacity: 0.75; margin-bottom: 20px; }

.sc-footer-contact { margin-bottom: 14px; }
.sc-footer-contact .sc-label { font-size: 12px; opacity: 0.6; margin-bottom: 2px; }
.sc-footer-contact a, .sc-footer-contact span { color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }

.sc-footer-links { list-style: none; margin: 0; padding: 0; }
.sc-footer-links li { margin-bottom: 12px; }
.sc-footer-links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px; }
.sc-footer-links a:hover { color: #fff; }

.sc-footer-newsletter {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--sc-radius-pill);
    padding: 5px;
    margin-bottom: 24px;
}

.sc-footer-newsletter input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    padding: 10px 16px;
    font-size: 14px;
}

.sc-footer-newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }

.sc-footer-newsletter button {
    background: var(--sc-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.sc-footer-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

.sc-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    font-size: 13px;
    opacity: 0.65;
    flex-wrap: wrap;
    gap: 10px;
}

.sc-footer-social { display: flex; gap: 10px; }
.sc-footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.sc-footer-social a:hover { background: var(--sc-accent); }

@media (max-width: 991.98px) {
    .sc-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; }
}

@media (max-width: 575.98px) {
    .sc-footer-grid { grid-template-columns: minmax(0, 1fr); }
    .sc-footer-bottom { flex-direction: column; text-align: center; }
}

/* ==========================================================
   LIVE SUGGESTION DROPDOWNS (property/provider name autosuggest)
   ========================================================== */
.nh-suggestions-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: var(--sc-radius-sm);
    box-shadow: var(--sc-shadow-lg);
    border: 1px solid var(--sc-border);
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 50;
}

.nh-suggestions-list:empty { display: none; }
.nh-suggestions-list:not(:empty) { display: block; }

.nh-suggestions-list .suggestion-item {
    padding: 10px 16px;
    font-size: 13.5px;
    color: var(--sc-text);
    cursor: pointer;
}

.nh-suggestions-list .suggestion-item:hover { background: var(--sc-primary-light); color: var(--sc-primary); }

/* ==========================================================
   PROPERTY LISTING PAGE (filters + results)
   ========================================================== */
.sc-listing-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.sc-filter-panel {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-sm);
    padding: 22px;
    position: sticky;
    top: 90px;
}

.sc-filter-panel-head { display: none; }

.sc-filter-group { margin-bottom: 18px; }
.sc-filter-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sc-text-muted);
    margin-bottom: 8px;
}

.sc-filter-group .form-control,
.sc-filter-group select {
    border-radius: var(--sc-radius-sm);
    border: 1px solid var(--sc-border);
    font-size: 14px;
}

.sc-filter-backdrop { display: none; }

.sc-listing-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sc-listing-count { font-size: 13.5px; color: var(--sc-text-muted); font-weight: 600; }

.sc-filter-toggle { display: none; }

.sc-btn-outline-dark {
    background: transparent;
    border-color: var(--sc-border);
    color: var(--sc-text);
}
.sc-btn-outline-dark:hover { background: var(--sc-surface-alt); color: var(--sc-text); }

.sc-sort-form { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sc-sort-form select {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sc-text);
}

.sc-listing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1199.98px) {
    .sc-listing-layout { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    .sc-listing-layout { grid-template-columns: minmax(0, 1fr); }
    .sc-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sc-filter-toggle { display: inline-flex; }

    .sc-filter-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(340px, 88vw);
        border-radius: 0;
        z-index: 2010;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sc-filter-panel.sc-open { transform: translateX(0); }

    .sc-filter-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--sc-border);
    }

    .sc-filter-panel-head h3 { font-size: 18px; font-weight: 800; margin: 0; }

    .sc-filter-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: var(--sc-surface-alt);
        color: var(--sc-text);
    }

    .sc-filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 5, 15, 0.45);
        z-index: 2000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .sc-filter-backdrop.sc-open { opacity: 1; pointer-events: auto; }
}

@media (max-width: 575.98px) {
    .sc-listing-grid { grid-template-columns: minmax(0, 1fr); }
    .sc-listing-results-head { gap: 10px; }
    .sc-sort-form { margin-left: 0; width: 100%; }
    .sc-sort-form select { flex: 1; }
}

/* ==========================================================
   PROPERTY DETAIL PAGE
   ========================================================== */
.sc-property-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.sc-gallery { margin-bottom: 24px; }

.sc-gallery-stage {
    position: relative;
    border-radius: var(--sc-radius-lg);
    overflow: hidden;
    background: var(--sc-surface-alt);
    box-shadow: var(--sc-shadow-md);
}

.sc-gallery-stage-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    position: relative;
}

.sc-gallery-stage-btn img {
    width: 100%;
    height: clamp(240px, 46vw, 460px);
    object-fit: cover;
    display: block;
}

.sc-gallery-expand {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 10, 30, 0.72);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--sc-radius-pill);
    backdrop-filter: blur(6px);
}

.sc-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--sc-primary);
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--sc-shadow-sm);
    z-index: 2;
}

.sc-gallery-nav:hover { background: #fff; }
.sc-gallery-prev { left: 14px; }
.sc-gallery-next { right: 14px; }

.sc-gallery-thumbs {
    display: flex;
    gap: 10px;
    padding: 14px 2px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sc-gallery-thumbs::-webkit-scrollbar { display: none; }

.sc-gallery-thumb {
    flex: 0 0 auto;
    width: 92px;
    height: 66px;
    padding: 0;
    border-radius: var(--sc-radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.65;
    background: none;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.sc-gallery-thumb:hover { opacity: 1; }
.sc-gallery-thumb.sc-active { border-color: var(--sc-primary); opacity: 1; }
.sc-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fullscreen lightbox */
.sc-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(12, 6, 18, 0.94);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sc-lightbox.sc-open { display: flex; }

.sc-lightbox-figure {
    margin: 0;
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.sc-lightbox-figure img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--sc-radius-md);
}

.sc-lightbox-counter { color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 600; }

.sc-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.sc-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }

.sc-lightbox-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 12px;
}

.sc-lightbox-nav:hover { background: rgba(255, 255, 255, 0.26); }

@media (max-width: 767.98px) {
    .sc-lightbox { padding: 12px; }
    .sc-lightbox-nav {
        position: absolute;
        bottom: 24px;
        margin: 0;
    }
    .sc-lightbox-prev { left: 24px; }
    .sc-lightbox-next { right: 24px; }
    .sc-lightbox-figure img { max-height: 68vh; }
}

.sc-property-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.sc-features-list { display: flex; flex-direction: column; gap: 12px; }

.sc-feature-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--sc-text);
}

.sc-feature-row i { color: var(--sc-accent); width: 18px; text-align: center; }

.sc-feature-hidden { display: none; }

.sc-filter-group-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-text-muted);
    margin-bottom: 6px;
}

.sc-property-sidebar { position: sticky; top: 90px; }

/* Sticky mobile enquiry bar (hidden on desktop) */
.sc-property-mobile-cta { display: none; }

@media (max-width: 1199.98px) {
    .sc-property-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
}

@media (max-width: 991.98px) {
    .sc-property-layout { grid-template-columns: minmax(0, 1fr); }
    .sc-property-sidebar { position: static; }

    .sc-property-mobile-cta {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        background: #fff;
        border-top: 1px solid var(--sc-border);
        box-shadow: 0 -6px 20px rgba(20, 10, 30, 0.08);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

    /* Keep the sticky CTA clear of the global bottom tab bar */
    body.has-mobile-footer-nav .sc-property-mobile-cta {
        bottom: 64px;
    }

    body.has-mobile-footer-nav .sc-property-page {
        padding-bottom: 80px;
    }
}

@media (max-width: 575.98px) {
    .sc-gallery-nav { width: 36px; height: 36px; font-size: 13px; }
    .sc-gallery-prev { left: 8px; }
    .sc-gallery-next { right: 8px; }
    .sc-gallery-thumb { width: 74px; height: 56px; }
    .sc-property-badges .sc-eyebrow { font-size: 11px; padding: 5px 12px; }
}

/* Video modal (property detail page) */
.video-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

.video-modal-content {
    position: relative;
    width: min(900px, 92vw);
    aspect-ratio: 16 / 9;
}

.video-modal-iframe { width: 100%; height: 100%; border-radius: var(--sc-radius-md); }

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

/* ==========================================================
   PROVIDER (SERVICE) LISTING CARDS
   ========================================================== */
.sc-provider-list { display: flex; flex-direction: column; gap: 18px; }

.sc-provider-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    align-items: flex-start;
}

.sc-provider-logo {
    width: 88px;
    height: 88px;
    border-radius: var(--sc-radius-md);
    background: var(--sc-surface-alt);
    border: 1px solid var(--sc-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sc-provider-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.sc-provider-body { flex: 1; min-width: 0; }

.sc-provider-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.sc-provider-head h3 { font-size: 17px; font-weight: 800; margin: 0; }
.sc-provider-head h3 a { color: var(--sc-text); text-decoration: none; }
.sc-provider-head h3 a:hover { color: var(--sc-primary); }

.sc-provider-service {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sc-accent);
    margin-bottom: 8px;
}

.sc-provider-desc {
    font-size: 13.5px;
    color: var(--sc-text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.sc-provider-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 575.98px) {
    .sc-provider-card { flex-direction: column; gap: 14px; }
    .sc-provider-logo { width: 64px; height: 64px; }
    .sc-provider-actions .sc-btn { flex: 1; }
}

/* Provider profile hero + news rows */
.sc-provider-hero { display: flex; gap: 24px; padding: 24px; align-items: flex-start; }

.sc-provider-hero-logo {
    width: 120px;
    height: 120px;
    border-radius: var(--sc-radius-md);
    background: var(--sc-surface-alt);
    border: 1px solid var(--sc-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sc-provider-hero-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.sc-provider-hero-body { flex: 1; min-width: 0; }

.sc-provider-news {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--sc-border);
}
.sc-provider-news:last-child { border-bottom: none; padding-bottom: 0; }
.sc-provider-news img {
    width: 110px;
    height: 78px;
    object-fit: cover;
    border-radius: var(--sc-radius-sm);
    flex-shrink: 0;
}
.sc-provider-news h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.sc-news-text { font-size: 13.5px; color: var(--sc-text-muted); line-height: 1.6; }

@media (max-width: 575.98px) {
    .sc-provider-hero { flex-direction: column; gap: 16px; }
    .sc-provider-hero-logo { width: 80px; height: 80px; }
    .sc-provider-news { flex-direction: column; }
    .sc-provider-news img { width: 100%; height: 150px; }
}

/* ==========================================================
   HOMEPAGE HERO — immersive dark treatment
   ==========================================================
   Scoped to .sc-hero-home. The bare .sc-hero above is shared with
   listing.blade.php and serviceListing.blade.php, which use it as a light
   search strip — never move these rules onto .sc-hero.

   Appended at the end of the file deliberately: the responsive rules for
   .sc-hero live in media queries further up, and this block has to win.

   Green is the light source here — aurora, active tab, submit, icon circles
   and the highlighted word all carry it, against a deep purple ground.
   ========================================================== */
.sc-hero-home {
    padding: 96px 0 132px;
    color: #fff;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 48px),
        radial-gradient(ellipse 58% 48% at 80% 6%, rgba(59, 162, 63, 0.40) 0%, transparent 62%),
        radial-gradient(ellipse 55% 45% at 6% 94%, rgba(59, 162, 63, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 22% 10%, rgba(122, 56, 162, 0.52) 0%, transparent 62%),
        linear-gradient(160deg, #3d1553 0%, #2a0e39 52%, #1c0926 100%);
}

/* The aurora itself */
.sc-hero-home::before {
    content: '';
    position: absolute;
    top: -24%;
    right: -10%;
    width: 64%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(80, 210, 86, 0.46) 0%, rgba(59, 162, 63, 0.16) 44%, transparent 68%);
    filter: blur(72px);
}

/* Dissolves the dark ground into the white section below */
.sc-hero-home::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 170px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 52%, #ffffff 100%);
}

.sc-hero-home > * {
    position: relative;
    z-index: 1;
}

/* ---- Type ---- */
.sc-hero-home .sc-hero-title {
    color: #fff;
    font-size: clamp(38px, 5vw, 62px);
    letter-spacing: -0.03em;
    margin-bottom: 22px;
}

.sc-hero-home .sc-hero-subtext {
    color: rgba(255, 255, 255, 0.70);
    font-size: 17.5px;
    max-width: 540px;
}

.sc-hero-home .sc-hero-title .sc-highlight { color: #6ee073; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sc-hero-home .sc-hero-title .sc-highlight {
        background: linear-gradient(100deg, #9df3a1 0%, #4ecb54 55%, #35a83b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.sc-hero-home .sc-hero-title .sc-highlight::after {
    background: linear-gradient(90deg, rgba(110, 224, 115, 0.95) 0%, rgba(110, 224, 115, 0.08) 100%);
    box-shadow: 0 0 18px rgba(110, 224, 115, 0.5);
}

/* ---- Eyebrow pill ---- */
.sc-hero-home .sc-eyebrow {
    color: #a8f0ac;
    background: rgba(59, 162, 63, 0.16);
    border: 1px solid rgba(110, 224, 115, 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sc-hero-home .sc-eyebrow i { color: #6ee073; }

/* ---- Search card: stays light for legibility, but lifted off the dark ---- */
.sc-hero-home .sc-hero-search {
    max-width: 620px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 36px 80px -24px rgba(0, 0, 0, 0.62);
}

.sc-hero-home .sc-hero-tabs { background: #f1eff5; }

.sc-hero-home .sc-hero-tab.sc-active {
    background: linear-gradient(135deg, #43b849 0%, #2f8433 100%);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(47, 132, 51, 0.6);
}

/* Three 160px fields + the button need ~590px but the row only has 578px
   (the hero's left grid column caps the card at 620px), so the button always
   wrapped. Rather than let it land as a stubby pill, give it the full row
   deliberately — the fields get a roomy 193px each and the green CTA reads
   as the primary action. */
.sc-hero-home .sc-hero-submit {
    flex: 1 0 100%;
    min-height: 56px;
    margin-top: 6px;
    font-size: 15px;
    background: linear-gradient(135deg, #43b849 0%, #2f8433 100%);
    box-shadow: 0 12px 26px -10px rgba(47, 132, 51, 0.7);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.sc-hero-home .sc-hero-submit:hover {
    background: linear-gradient(135deg, #4ac451 0%, #35973a 100%);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(47, 132, 51, 0.75);
}

/* ---- Visual column ---- */
.sc-hero-home .sc-hero-visual::before {
    background: radial-gradient(circle, rgba(80, 210, 86, 0.32) 0%, rgba(110, 224, 115, 0.10) 46%, transparent 70%);
    filter: blur(44px);
}

/* Offset outline arch — echoes the portrait and carries the green accent */
.sc-hero-home .sc-hero-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74%;
    aspect-ratio: 5 / 6;
    transform: translate(-40%, -54%) rotate(5deg);
    border: 1.5px solid rgba(110, 224, 115, 0.36);
    border-radius: 234px 234px 28px 28px;
    pointer-events: none;
}

.sc-hero-home .sc-hero-blob {
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 42px 92px -24px rgba(0, 0, 0, 0.72);
}

.sc-hero-home .sc-hero-float-card {
    background: rgba(28, 12, 38, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.7);
}

.sc-hero-home .sc-hero-float-card strong { color: #fff; }
.sc-hero-home .sc-hero-float-card span { color: rgba(255, 255, 255, 0.66); }

.sc-hero-home .sc-hero-float-card .sc-icon-circle {
    background: linear-gradient(135deg, #43b849 0%, #2f8433 100%);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(47, 132, 51, 0.7);
}

/* ---- Mobile quick actions (guests) ----
   Solid dark, not translucent white: these sit near the foot of the hero where
   the ::after fade is already turning white, so a white-on-white chip would
   disappear. */
.sc-hero-home .sc-quick-action {
    background: rgba(30, 13, 41, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sc-hero-home .sc-quick-action .sc-icon-circle {
    background: linear-gradient(135deg, #43b849 0%, #2f8433 100%);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .sc-hero-home { padding: 60px 0 92px; }
    .sc-hero-home::after { height: 130px; }

    /* The shared rule hides .sc-hero-visual below 992px. Bring it back for the
       homepage only — the listing pages have no visual column anyway. */
    .sc-hero-home .sc-hero-visual {
        display: flex;
        margin-top: 8px;
    }

    .sc-hero-home .sc-hero-blob {
        max-width: 380px;
        aspect-ratio: 5 / 6;
    }

    /* The offset outline arch is rotated and sized off the desktop column;
       at this width it just collides with the portrait. */
    .sc-hero-home .sc-hero-visual::after { display: none; }

    /* Two cards at left:-6% / right:-5% overflow a full-bleed column and
       overlap each other. Keep one, docked inside the frame. */
    .sc-hero-home .sc-hero-float-card.is-top { display: none; }

    .sc-hero-home .sc-hero-float-card {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .sc-hero-home { padding: 36px 0 68px; }
    .sc-hero-home .sc-hero-title { font-size: clamp(30px, 8.4vw, 42px); }
    .sc-hero-home .sc-hero-subtext { font-size: 16px; }
    .sc-hero-home .sc-hero-search { max-width: 100%; }
    .sc-hero-home::after { height: 56px; }

    /* A 5:6 arch is ~430px tall on a phone — too much of the fold. Switch to a
       landscape banner with a softer arch top. */
    .sc-hero-home .sc-hero-blob {
        max-width: 100%;
        aspect-ratio: 16 / 11;
        border-radius: 110px 110px 18px 18px;
    }

    .sc-hero-home .sc-hero-float-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 11px 14px;
    }
}

/* ==========================================================
   MOBILE OVERFLOW GUARDS
   ==========================================================
   Companion to the minmax(0, 1fr) change on every grid above.

   Grid AND flex children default to `min-width: auto`, which resolves to their
   min-content width — so a card refuses to shrink and pushes the layout wider
   than the screen instead. body has `overflow-x: hidden` (style.css:33), so
   the excess got silently chopped off the right edge rather than scrolling,
   which is why this looked like "cut off content" on phones and was invisible
   in desktop devtools at the same width.
   ========================================================== */
.sc-listing-card,
.sc-listing-body,
.sc-card,
.sc-split-row > *,
.sc-listing-layout > * {
    min-width: 0;
}

/* Long unbroken strings (URLs, run-on titles, emails) are the other way a
   single element forces the page wider than the viewport. */
.sc-listing-body h4,
.sc-listing-meta,
.sc-heading,
.sc-subtext,
.sc-footer-desc {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Nothing should be able to exceed the screen width. */
img,
video,
iframe,
svg,
table {
    max-width: 100%;
}