/* ====================================================================
   Oasis Cleaning – Global CSS
   File: assets/css/style.css
   Purpose: Base styles, layout, components, utilities, responsive
   Author: OTS
   ==================================================================== */
/* ------------------------------------------------
   0) ROOT, RESET & BASE
   ------------------------------------------------ */
:root {
    /* Brand */
    --navy: #0D3B66;
    --navy-700: #0A2746;
    --navy-500: #174F87;
    --sky-100: #E9F2FB;
    --accent: #2FBE72;

    /* CTA Green */
    --accent-600: #18A85C;
    --text: #12263A;
    --muted: #49627A;
    --line: #E7ECF2;
    --bg: #F7FAFD;
    --warning: #F4BE38;
    --orange: #F08A2C;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-1: 0 3px 10px rgba(10,39,70,.06);
    --shadow-2: 0 10px 24px rgba(10,39,70,.12);
    --shadow-3: 0 18px 42px rgba(10,39,70,.16);
    --container: 1160px;
}

*,

*::before,

*::after {
    box-sizing: border-box;
}

/* Avoid height: 100% on html/body to prevent white space below footer on long pages */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    color: var(--text);
    background: #fff;
    font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
        "Segoe UI Emoji";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Links */
a {
    color: var(--navy);
    text-underline-offset: 2px;
}

a:hover {
    text-decoration: none;
}

/* Headings */
h1,

h2,

h3,

h4 {
    margin: 0 0 .4em;
    color: var(--navy);
    line-height: 1.15;
}

h1 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
}

h2 {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 900;
}

h3 {
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 900;
}

.lead {
    font-size: clamp(18px, 1.9vw, 20px);
    color: var(--muted);
}

/* Helpers */
.small {
    font-size: .925rem;
}

.muted {
    color: var(--muted);
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.mt-8 {
    margin-top: 8px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mb-0 {
    margin-bottom: 0;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.kicker {
    display: inline-block;
    font: 800 .8rem/1 var(--font, inherit);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2C6AA2;
    background: #EDF4FC;
    padding: .45rem .75rem;
    border-radius: 999px;
}

/* Layout */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    max-width: 880px;
}

.section {
    padding: clamp(38px, 6vw, 72px) 0;
}

/* Service pages: when Photos is positioned right after hero, tighten the gap */
.section[data-priority-gallery="true"] {
    padding-top: clamp(18px, 3vw, 40px);
}

.strip {
    background: var(--bg);
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(18px, 3vw, 28px);
}

@media (max-width:800px){
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Cards */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(14px, 2.2vw, 18px);
    box-shadow: var(--shadow-1);
}

/* Divider */
hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 24px 0;
}

/* ------------------------------------------------
   1) BUTTONS & CHIPS
   ------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .75rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .2s ease, filter .15s ease;
}

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

.btn-primary {
    background: var(--accent);
    color: #0B3A25;
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(47,190,114,.24);
}

.btn-primary:hover {
    filter: brightness(.96);
}

.btn-ghost {
    background: #fff;
    color: var(--navy);
    border-color: var(--line);
    box-shadow: var(--shadow-1);
}

.btn-ghost:hover {
    border-color: #D9E8FA;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Chips & Badges */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: #EDF4FC;
    color: #2C6AA2;
    font-weight: 800;
    border: 1px solid #D9E8FA;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: #EFF7F2;
    color: #1E8E5A;
    font-weight: 800;
    border: 1px solid #DCEFE4;
}

.badge.brand {
    background: #EAFDF2;
    color: #126C46;
    border-color: #C7F1DA;
}

/* Wrapper for badge groups: even spacing on mobile/tablet/desktop */
.badge-row,
.cred-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
@media (min-width: 600px) {
    .badge-row,
    .cred-row {
        gap: 0.5rem 1rem;
    }
}

/* ------------------------------------------------
   2) HEADER / NAV
   ------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(180%) blur(3px);
}

.navbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    min-height: 72px;
}

/* Push Call Us + CTA to the right on desktop */
.header-call,
.header-phone {
    margin-left: auto;
}

.header-phone {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.header-phone:hover {
    color: var(--navy-500);
    text-decoration: none;
}

/* Call Us button: outline style, distinct from green Request a Quote */
.header-call.btn-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    color: var(--navy);
    border: 2px solid var(--navy);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(47,190,114,.3);
}

.header-cta:hover {
    filter: brightness(1.02);
    text-decoration: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    color: var(--navy);
    text-decoration: none;
    position: relative;
    z-index: 10;
    min-height: 44px;
    min-width: 120px;
    padding: 8px 4px;
    margin: -8px -4px;
    -webkit-tap-highlight-color: transparent;
}

.brand-logo {
    width: 26px;
    height: 26px;
    display: inline-block;
    background: url('/assets/images/logo/brand-mark.svg') center/contain no-repeat;
}

.nav-links {
    display: flex;
    gap: 18px;
    align-items: center;
}

.nav-links a {
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
}

.nav-links a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* CTA pill in header */
.cta-sm {
    background: var(--accent);
    color: #0B3A25;
    border: 1px solid var(--accent);
    font-weight: 800;
    border-radius: 999px;
    padding: .55rem .9rem;
    box-shadow: 0 6px 20px rgba(47,190,114,.25);
    text-decoration: none;
}

.cta-sm:hover {
    filter: brightness(.96);
}

/* Mobile button (min 44px touch target) */
.menu-btn {
    display: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 10px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.menu-btn span {
    display: block;
    height: 2px;
    background: #0A2746;
    margin: 7px 5px;
    border-radius: 2px;
}

/* Mobile panel – fixed under header (works from any scroll) */
.mobile-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h, 64px);
    display: none;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    max-height: calc(100vh - var(--header-h, 64px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 998;
}

/* Mobile: compact Call + Quote in header bar (hidden on desktop) */
.header-mobile-call,
.header-mobile-cta {
    display: none;
}

.mobile-panel .container,
.mobile-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
}

.mobile-panel a {
    color: var(--navy);
    font-weight: 800;
    text-decoration: none;
}

.mobile-panel a:hover {
    text-decoration: underline;
}

.mobile-panel-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-panel-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.mobile-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.mobile-panel-call {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 800;
    border: 2px solid var(--navy);
    color: var(--navy);
    background: transparent;
}

.mobile-panel-call:hover {
    background: var(--navy);
    color: #fff;
    text-decoration: none;
}

.mobile-panel-quote {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 12px 16px;
}

@media (max-width:1100px){
    .nav-links,
    .header-call,
    .header-phone,
    .header-cta {
        display: none !important;
    }

    /* Mobile/tablet: no "Call" / "Quote" pills in header — only logo + menu (desktop keeps full buttons) */
    .header-mobile-call,
    .header-mobile-cta {
        display: none !important;
    }

    .menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    .mobile-panel[data-open="true"] {
        display: block;
    }

    .navbar {
        min-height: 64px;
    }
}

.mobile-panel-phone {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--navy);
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}

.mobile-panel-phone:hover {
    text-decoration: none;
    color: var(--navy-500);
}

/* Scroll-lock (controlled by JS) */
body.scroll-lock {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* Shared lightbox overlays must not affect page layout when closed */
.lb,
.lb-overlay {
    display: none;
}

.lb[open],
.lb-overlay.open {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.92);
}

.lb__stage,
.lb-stage {
    position: relative;
    max-width: min(92vw, 1400px);
    max-height: 88vh;
}

.lb__img,
.lb-img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.lb__cap,
.lb-caption {
    margin-top: 12px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    opacity: .9;
}

.lb .lb-btn,
.lb-overlay .lb-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.16);
}

.lb .lb-btn:hover,
.lb-overlay .lb-btn:hover {
    background: rgba(255,255,255,.25);
}

.lb .lb-prev,
.lb-overlay .lb-prev {
    left: -56px;
}

.lb .lb-next,
.lb-overlay .lb-next {
    right: -56px;
}

.lb .lb-close,
.lb-overlay .lb-close {
    position: absolute;
    top: -56px;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.16);
}

@media (max-width:780px){
    .lb .lb-prev,
    .lb-overlay .lb-prev {
        left: 6px;
    }

    .lb .lb-next,
    .lb-overlay .lb-next {
        right: 6px;
    }

    .lb .lb-close,
    .lb-overlay .lb-close {
        top: -50px;
        right: -4px;
    }
}

/* ------------------------------------------------
   3) HERO
   ------------------------------------------------ */
.hero-alt {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 8vw, 72px) 0;
    background: radial-gradient(420px 280px at 3% 6%, rgba(13,59,102,.06), transparent 55%),
    radial-gradient(500px 380px at 96% -6%, rgba(47,190,114,.07), transparent 60%);
}

.hero-alt .container {
    position: relative;
    z-index: 2;
}

/* legal DBA */
.legal-dba {
    color: #5B7893;
    margin: .45rem 0 0;
}

.hero--drop {
    position: relative;
}

.hero--drop .lead {
    width: min(100%, 62ch);
}

.hero--drop::after {
    content: "";
    position: absolute;
    top: clamp(16px, 6vw, 40px);
    right: clamp(0px, 3vw, 32px);
    width: min(520px, 40vw);
    height: min(520px, 40vw);
    background: radial-gradient(160px 160px at 35% 35%, rgba(47,190,114,.22), rgba(47,190,114,0) 60%),
    url('/assets/images/logo/hero-drop.svg') center/contain no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 12px 24px rgba(13,59,102,.25));
    opacity: 1;
}

/* Compact drop variant for shorter heroes (avoid oversized empty area) */
.hero--drop-compact {
    padding: clamp(28px, 6vw, 56px) 0;
}

@media (min-width:1025px){
    .hero--drop {
        padding-right: clamp(240px, 35vw, 520px);
        min-height: 420px;
    }
}

/* Tablet and below: put drop below text so it never overlaps */
@media (max-width:1024px){
    .hero--drop::after {
        position: relative;
        right: auto;
        top: auto;
        display: block;
        margin: 24px auto 0;
        width: min(380px, 82vw);
        height: min(380px, 82vw);
    }
}

@media (min-width:1025px){
    .hero--drop.hero--drop-compact {
        padding-right: clamp(180px, 27vw, 360px);
        min-height: 0;
    }

    .hero--drop.hero--drop-compact::after {
        --drop-compact-size: min(360px, 27vw, calc(100% - 16px));
        top: 50%;
        right: clamp(0px, 1vw, 18px);
        width: var(--drop-compact-size);
        height: var(--drop-compact-size);
        transform: translateY(-50%);
    }
}

@media (max-width:1024px){
    .hero--drop.hero--drop-compact::after {
        width: min(300px, 72vw);
        height: min(300px, 72vw);
        margin-top: 12px;
    }
}

.hero-home {
    padding: clamp(26px, 6vw, 62px) 0 clamp(28px, 5vw, 54px);
}

.hero-home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}

.hero-home__content {
    max-width: 640px;
}

.hero-home__content .kicker {
    margin-bottom: 16px;
}

.hero-home h1 {
    max-width: 12ch;
    margin: 14px 0 16px;
    font-size: clamp(2rem, 4.2vw + 1rem, 4.1rem);
    line-height: .96;
    letter-spacing: -.04em;
}

.hero-home .lead {
    margin: 0;
    max-width: 60ch;
}

.hero-home__actions {
    align-items: center;
    margin-top: 22px;
}

.hero-home__actions .btn {
    min-width: 176px;
    padding: .9rem 1.2rem;
    border-radius: 999px;
}

.hero-home__text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-weight: 800;
    text-decoration: none;
}

.hero-home__text-link::after {
    content: "→";
    transition: transform .15s ease;
}

.hero-home__text-link:hover {
    text-decoration: none;
}

.hero-home__text-link:hover::after {
    transform: translateX(2px);
}

.hero-home__trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.hero-home__trust-list li {
    display: inline-flex;
    align-items: center;
    padding: .55rem .82rem;
    border-radius: 999px;
    border: 1px solid rgba(13,59,102,.12);
    background: rgba(255,255,255,.82);
    box-shadow: 0 8px 20px rgba(13,59,102,.08);
    color: var(--navy);
    font-size: .88rem;
    font-weight: 800;
}

.hero-home__coverage {
    margin: 14px 0 0;
    max-width: 60ch;
}

.hero-home__coverage a {
    color: var(--navy);
    font-weight: 800;
    text-decoration: none;
}

.hero-home__coverage a:hover {
    text-decoration: underline;
}

.hero-home__legal {
    margin-top: 12px;
    font-size: .82rem;
}

.hero-home__visual {
    display: grid;
    gap: 14px;
}

.hero-home__media-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(13,59,102,.10);
    min-height: clamp(320px, 35vw, 470px);
    background:
    radial-gradient(220px 180px at 28% 24%, rgba(47,190,114,.15), rgba(47,190,114,0) 72%),
    radial-gradient(280px 220px at 78% 18%, rgba(44,106,162,.18), rgba(44,106,162,0) 76%),
    linear-gradient(180deg, #f7fbff 0%, #edf4fc 100%);
    box-shadow: 0 22px 50px rgba(10,39,70,.14);
}

.hero-home__media-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,31,55,.02) 0%, rgba(8,31,55,.1) 100%);
    pointer-events: none;
}

.hero-home__drop-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(320px, 35vw, 470px);
    padding: clamp(18px, 3vw, 36px);
}

.hero-home__drop-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(13,59,102,.08);
    background: rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.hero-home__drop-ring--one {
    width: min(84%, 340px);
    aspect-ratio: 1;
}

.hero-home__drop-ring--two {
    width: min(66%, 265px);
    aspect-ratio: 1;
    background: rgba(255,255,255,.4);
}

.hero-home__drop-mark {
    position: relative;
    z-index: 1;
    width: min(72%, 320px);
    height: auto;
    filter: drop-shadow(0 16px 30px rgba(13,59,102,.18));
}

.hero-home__service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hero-service-card {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 100%;
    padding: 16px 18px 18px;
    border-radius: 20px;
    border: 1px solid rgba(13,59,102,.10);
    background: #fff;
    box-shadow: 0 10px 24px rgba(13,59,102,.08);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hero-service-card:hover {
    transform: translateY(-2px);
    border-color: #CFE0F3;
    box-shadow: 0 14px 30px rgba(13,59,102,.12);
    text-decoration: none;
}

.hero-service-card--primary {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #f8fbff 0%, #ecf5ff 100%);
    border-color: #CFE0F3;
}

.hero-service-card__eyebrow {
    color: #2C6AA2;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.hero-service-card strong {
    color: var(--navy);
    font-size: 1rem;
    line-height: 1.3;
}

.hero-service-card span:last-child {
    color: var(--muted);
    line-height: 1.5;
}

@media (max-width:1100px){
    .hero-home__grid {
        gap: 32px;
    }
}

@media (max-width:1000px){
    .hero-home__grid {
        grid-template-columns: 1fr;
    }

    .hero-home__content,
    .hero-home__visual {
        max-width: 760px;
    }
}

@media (max-width:900px){
    .hero-home__actions .btn {
        flex: 1 1 220px;
    }

    .hero-home__media-card,
    .hero-home__drop-stage {
        min-height: 360px;
    }
}

@media (max-width:640px){
    .hero-home h1 {
        max-width: 11ch;
    }

    .hero-home__actions .btn,
    .hero-home__text-link {
        flex: 1 1 100%;
        justify-content: center;
        width: 100%;
    }

    .hero-home__trust-list {
        gap: 8px;
    }

    .hero-home__trust-list li {
        font-size: .82rem;
        padding: .5rem .75rem;
    }

    .hero-home__media-card {
        border-radius: 22px;
        min-height: 300px;
    }

    .hero-home__drop-stage {
        min-height: 300px;
        padding: 18px;
    }

    .hero-home__drop-mark {
        width: min(74%, 250px);
    }

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

    .hero-service-card--primary {
        grid-column: auto;
    }
}

/* ------------------------------------------------
   3.1) HOME – PREMIUM REDESIGN
   ------------------------------------------------ */
.page-home .site-header {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(14px);
}

.page-home .home-hero {
    padding: clamp(42px, 8vw, 88px) 0 clamp(34px, 5vw, 58px);
    background:
    radial-gradient(560px 340px at 8% 4%, rgba(31,145,255,.18), rgba(31,145,255,0) 60%),
    radial-gradient(540px 320px at 96% 0%, rgba(77,184,72,.15), rgba(77,184,72,0) 58%),
    radial-gradient(360px 220px at 58% 100%, rgba(255,208,103,.1), rgba(255,208,103,0) 72%),
    linear-gradient(135deg, #050a18 0%, #071a35 52%, #0b2851 100%);
}

.page-home .home-hero .kicker {
    color: #a9d4ff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(169,212,255,.18);
}

.home-hero__eyebrow {
    margin: 0 0 12px;
    color: rgba(233,243,255,.78);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.page-home .home-hero h1 {
    max-width: 15ch;
    color: #fff;
}

.page-home .home-hero .lead {
    max-width: 56ch;
    color: #d3e1ef;
}

.page-home .hero-home__text-link {
    color: #dbeeff;
}

.page-home .hero-home__trust-list li {
    color: #eef6ff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    box-shadow: none;
    backdrop-filter: blur(8px);
}

.page-home .hero-home__coverage {
    color: #c6d8ea;
}

.hero-home__proof-panel {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%);
    box-shadow: 0 18px 40px rgba(3,10,24,.24);
    backdrop-filter: blur(10px);
}

.hero-home__proof-eyebrow {
    margin: 0;
    color: #8fd3ff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-home__proof-grid {
    display: grid;
    gap: 12px;
}

.hero-home__proof-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
}

.hero-home__proof-card strong {
    color: #fff;
    line-height: 1.3;
}

.hero-home__proof-card span {
    color: #c7d8e9;
    line-height: 1.55;
}

.hero-home__panel-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: #f1f7ff;
    font-weight: 800;
    text-decoration: none;
}

.hero-home__panel-link::after {
    content: "→";
    transition: transform .15s ease;
}

.hero-home__panel-link:hover::after {
    transform: translateX(2px);
}

.home-hero__secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.24);
    box-shadow: none;
}

.home-hero__secondary:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.36);
}

.page-home .home-hero-card {
    min-height: 0;
    padding: clamp(18px, 2.8vw, 24px);
    background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.08) 100%);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 24px 60px rgba(3,10,24,.42);
    backdrop-filter: blur(12px);
}

.page-home .home-hero-card::after {
    display: none;
}

.home-hero-card__frame {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.14);
    background: #0a1730;
    position: relative;
}

.home-hero-card__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,10,24,0) 26%, rgba(5,10,24,.7) 100%);
    pointer-events: none;
}

.home-hero-card__frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.home-hero-card__frame figcaption {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    z-index: 1;
    color: #f5f9ff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.5;
}

.home-hero-card__signal {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,208,103,.24);
    background: linear-gradient(135deg, rgba(255,208,103,.14) 0%, rgba(255,255,255,.06) 100%);
}

.home-hero-card__label {
    display: inline-block;
    margin-bottom: 8px;
    color: #ffd067;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.home-hero-card__signal strong {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.45;
}

.page-home .hero-service-card {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 16px 34px rgba(3,10,24,.22);
}

.page-home .hero-service-card:hover {
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 20px 38px rgba(3,10,24,.32);
}

.page-home .hero-service-card--primary {
    background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(77,184,72,.14) 100%);
    border-color: rgba(77,184,72,.22);
}

.page-home .hero-service-card__eyebrow {
    color: #8fd3ff;
}

.page-home .hero-service-card strong {
    color: #fff;
}

.page-home .hero-service-card span:last-child {
    color: #c7d8e9;
}

.home-proof-band {
    padding-top: 18px;
    padding-bottom: 10px;
}

.home-proof-band__shell {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
    padding: clamp(22px, 3vw, 30px);
    border-radius: 28px;
    border: 1px solid #d8e6f4;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(245,249,253,.98) 100%);
    box-shadow: 0 18px 46px rgba(7,31,60,.08);
}

.home-proof-band__copy {
    display: grid;
    gap: 10px;
    align-content: start;
}

.home-proof-band__copy h2 {
    margin: 0;
    max-width: 14ch;
}

.home-proof-band__link {
    margin-top: 6px;
    color: var(--navy);
}

.home-proof-band__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.home-proof-band__item {
    display: grid;
    gap: 8px;
    min-height: 100%;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(13,59,102,.1);
    background: #fff;
    box-shadow: 0 12px 28px rgba(7,31,60,.06);
}

.home-proof-band__item span {
    color: #2d67a1;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-proof-band__item strong {
    color: var(--navy);
    line-height: 1.45;
}

.home-pillars {
    position: relative;
    z-index: 1;
    margin-top: -8px;
}

.home-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.home-pillar {
    position: relative;
    padding: 24px 22px 22px;
    border-radius: 24px;
    border: 1px solid #d9e5f0;
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
    box-shadow: 0 18px 42px rgba(7,31,60,.08);
}

.home-pillar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(90deg, #1e9fff 0%, #4db848 58%, #ffd067 100%);
}

.home-pillar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: #eef6ff;
    color: #0d3b66;
    font-weight: 900;
    letter-spacing: .04em;
}

.home-section-cta {
    align-self: center;
}

.home-signature {
    padding-top: 0;
}

.home-signature__panel {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: clamp(28px, 4vw, 42px);
    background:
    radial-gradient(320px 200px at 0% 0%, rgba(31,145,255,.12), rgba(31,145,255,0) 72%),
    radial-gradient(260px 180px at 100% 0%, rgba(255,208,103,.14), rgba(255,208,103,0) 68%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    border: 1px solid #d9e5f0;
    box-shadow: 0 22px 56px rgba(7,31,60,.08);
}

.home-signature__copy {
    max-width: 760px;
}

.home-signature__copy .lead {
    margin: 16px 0 0;
    color: #395674;
}

.home-signature__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.home-signature__card {
    position: relative;
    padding: 24px 22px 22px;
    border-radius: 24px;
    border: 1px solid rgba(13,59,102,.1);
    background: rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.home-signature__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #071a35 0%, #0d3b66 100%);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.home-signature__card h3 {
    margin: 0 0 10px;
}

.home-signature__card p {
    margin: 0;
    color: #395674;
}

.home-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

@media (min-width:1180px){
    .home-service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.home-service-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #d9e5f0;
    background: #fff;
    box-shadow: 0 18px 42px rgba(7,31,60,.08);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.home-service-card:hover,
.home-service-card:focus-within {
    transform: translateY(-4px);
    border-color: #c7d8ea;
    box-shadow: 0 24px 52px rgba(7,31,60,.13);
}

.home-service-card__card-link {
    display: block;
    min-height: 100%;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
}

.home-service-card__card-link:focus-visible {
    outline: 2px solid rgba(19,95,164,.26);
    outline-offset: -2px;
}

.home-service-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.home-service-card__body {
    display: grid;
    gap: 14px;
    padding: 24px;
}

.home-service-card__tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .5rem .78rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-service-card--janitorial .home-service-card__tag {
    background: #ecf6ff;
    color: #135fa4;
}

.home-service-card--dayporter .home-service-card__tag {
    background: #ebf8f1;
    color: #1a7552;
}

.home-service-card--post .home-service-card__tag {
    background: #f8f2df;
    color: #8c6511;
}

.home-service-card--medical .home-service-card__tag {
    background: #edf9f4;
    color: #1c7a57;
}

.home-service-card--floor .home-service-card__tag {
    background: #eff3ff;
    color: #3d58a3;
}

.home-service-card--carpet .home-service-card__tag {
    background: #e9f7ff;
    color: #0f5d83;
}

.home-service-card--power .home-service-card__tag {
    background: #ebf9f2;
    color: #17724a;
}

.home-service-card--window .home-service-card__tag {
    background: #eff3ff;
    color: #405ba8;
}

.home-service-card__body h3,
.home-mini-panel h3,
.home-feature-card__body h3 {
    margin: 0;
}

.home-service-card__body p,
.home-feature-card__body p {
    margin: 0;
    color: #395674;
}

.home-service-card__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    color: #294866;
}

.home-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-weight: 800;
    text-decoration: none;
}

.home-service-card__link::after {
    content: "→";
    transition: transform .15s ease;
}

.home-service-card:hover .home-service-card__link::after {
    transform: translateX(2px);
}

.home-start {
    padding-top: 0;
}

.home-start-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (min-width:1180px){
    .home-start-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.home-start-card {
    display: grid;
    gap: 12px;
    min-height: 100%;
    padding: 24px;
    border-radius: 26px;
    border: 1px solid #d9e5f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 42px rgba(7,31,60,.08);
}

.home-start-card__label {
    display: inline-flex;
    width: fit-content;
    padding: .48rem .72rem;
    border-radius: 999px;
    background: #eef6ff;
    color: #135fa4;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-start-card h3,
.home-start-card p {
    margin: 0;
}

.home-start-card p {
    color: #395674;
}

.home-start-card--dark {
    background:
    radial-gradient(240px 180px at 90% 10%, rgba(77,184,72,.16), rgba(77,184,72,0) 70%),
    radial-gradient(220px 150px at 8% 100%, rgba(255,208,103,.14), rgba(255,208,103,0) 72%),
    linear-gradient(135deg, #071a35 0%, #0d3b66 100%);
    border-color: rgba(13,59,102,.34);
}

.home-start-card--dark .home-start-card__label {
    background: rgba(255,255,255,.12);
    color: #d9ebff;
}

.home-start-card--dark h3,
.home-start-card--dark p {
    color: #f2f7ff;
}

.home-proof-strip {
    background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
}

.home-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 24px;
    align-items: start;
}

.home-proof-copy {
    display: grid;
    gap: 18px;
}

.home-proof__list {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding-left: 20px;
    color: #355070;
}

.home-mini-grid,
.home-proof-cards {
    display: grid;
    gap: 18px;
}

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

.home-mini-panel {
    border-radius: 22px;
    border-color: #d9e5f0;
    box-shadow: 0 12px 28px rgba(7,31,60,.08);
}

.home-feature-card {
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #d9e5f0;
    background: #fff;
    box-shadow: 0 18px 42px rgba(7,31,60,.08);
}

.home-feature-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.home-feature-card__body {
    display: grid;
    gap: 12px;
    padding: 24px;
}

.home-feature-card__label {
    display: inline-flex;
    width: fit-content;
    padding: .48rem .72rem;
    border-radius: 999px;
    background: #eef6ff;
    color: #135fa4;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-feature-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-feature-card--resource {
    background:
    radial-gradient(260px 180px at 88% 10%, rgba(77,184,72,.16), rgba(77,184,72,0) 70%),
    radial-gradient(220px 160px at 8% 100%, rgba(255,208,103,.16), rgba(255,208,103,0) 72%),
    linear-gradient(135deg, #071a35 0%, #0d3b66 100%);
    border-color: rgba(13,59,102,.34);
}

.home-feature-card--resource .home-feature-card__label {
    background: rgba(255,255,255,.12);
    color: #d9ebff;
}

.home-feature-card--resource h3,
.home-feature-card--resource p {
    color: #f2f7ff;
}

.home-feature-card--resource .btn-ghost {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
}

.home-feature-card--resource .btn-ghost:hover {
    background: rgba(255,255,255,.12);
}

.home-compare-card {
    display: grid;
    gap: 0;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #d9e5f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 42px rgba(7,31,60,.08);
}

.home-compare-card__eyebrow {
    margin: 0;
    padding: 24px 24px 0;
    color: #2d67a1;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-compare-card h3 {
    margin: 6px 0 0;
    padding: 0 24px 2px;
}

.home-compare-row {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 18px;
    padding: 18px 24px;
    border-top: 1px solid rgba(13,59,102,.08);
}

.home-compare-row__pain,
.home-compare-row__fix {
    display: block;
    line-height: 1.55;
}

.home-compare-row__pain {
    color: #647f98;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.home-compare-row__fix {
    color: var(--navy);
    font-weight: 700;
}

.home-coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-coverage-card {
    border-radius: 22px;
    border-color: #d9e5f0;
    box-shadow: 0 12px 28px rgba(7,31,60,.08);
}

.home-coverage-card h3 {
    margin: 0 0 8px;
}

.home-coverage-card p {
    margin: 0;
}

.home-faq {
    padding-top: 0;
}

.home-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 24px;
    align-items: start;
}

.home-faq__copy {
    display: grid;
    gap: 12px;
    align-content: start;
}

.home-faq__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-faq__list {
    display: grid;
    gap: 0;
}

.home-faq__list .faq-item {
    margin-bottom: 14px;
    border-radius: 20px;
    border-color: #d9e5f0;
    box-shadow: 0 12px 28px rgba(7,31,60,.08);
}

.home-division {
    padding-top: 0;
}

.home-division__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr);
    gap: 24px;
    align-items: stretch;
    padding: clamp(28px, 4vw, 40px);
    border-radius: 32px;
    background:
    radial-gradient(260px 180px at 8% 8%, rgba(31,145,255,.16), rgba(31,145,255,0) 70%),
    radial-gradient(260px 180px at 90% 0%, rgba(77,184,72,.14), rgba(77,184,72,0) 72%),
    linear-gradient(135deg, #061120 0%, #0b2a52 58%, #0d3b66 100%);
    box-shadow: 0 26px 60px rgba(7,31,60,.18);
}

.home-division__copy .kicker {
    color: #bfe0ff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(191,224,255,.16);
}

.home-division__copy h2,
.home-division__copy .lead {
    color: #fff;
}

.home-division__copy .lead {
    margin: 14px 0 0;
    max-width: 56ch;
    color: #d4e2f1;
}

.home-division__card {
    align-self: stretch;
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.08) 100%);
    backdrop-filter: blur(10px);
}

.home-division__eyebrow {
    margin: 0;
    color: #ffd067;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.home-division__card h3,
.home-division__card p {
    margin: 0;
    color: #fff;
}

.home-division__card p {
    color: #d2deec;
}

.home-cta {
    padding-top: 0;
}

.home-cta__panel {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: clamp(28px, 4vw, 42px);
    background:
    radial-gradient(280px 180px at 90% 12%, rgba(77,184,72,.18), rgba(77,184,72,0) 68%),
    radial-gradient(260px 180px at 6% 100%, rgba(255,208,103,.18), rgba(255,208,103,0) 72%),
    linear-gradient(135deg, #061120 0%, #0b2a52 52%, #0d3b66 100%);
    box-shadow: 0 26px 60px rgba(7,31,60,.2);
}

.home-cta__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.home-cta__copy {
    max-width: 700px;
}

.home-cta__copy .kicker {
    color: #b7dcff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(183,220,255,.16);
}

.home-cta__copy h2 {
    color: #fff;
}

.home-cta__copy .lead {
    margin: 0;
    color: #cfdef0;
}

.home-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-cta__panel .btn-ghost {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.18);
    box-shadow: none;
}

.home-cta__panel .btn-ghost:hover {
    background: rgba(255,255,255,.12);
}

@media (max-width:980px){
    .home-proof-band__shell,
    .home-signature__grid,
    .home-pillar-grid,
    .home-service-grid,
    .home-faq__grid,
    .home-proof-grid,
    .home-mini-grid,
    .home-division__panel,
    .home-coverage-grid {
        grid-template-columns: 1fr;
    }

    .home-cta__content {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-proof-band__grid,
    .home-compare-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width:640px){
    .page-home .home-hero {
        padding-top: 32px;
    }

    .home-proof-band__item,
    .hero-home__proof-panel,
    .home-compare-card {
        border-radius: 22px;
    }

    .home-hero-card__frame figcaption {
        right: 14px;
        bottom: 14px;
        left: 14px;
        font-size: .9rem;
    }

    .home-service-card,
    .home-start-card,
    .home-feature-card,
    .home-signature__panel,
    .home-division__panel,
    .home-cta__panel {
        border-radius: 24px;
    }

    .home-service-card__body,
    .home-feature-card__body,
    .home-start-card {
        padding: 20px;
    }

    .home-feature-card__actions,
    .home-cta__actions,
    .home-faq__actions {
        width: 100%;
    }

    .home-feature-card__actions .btn,
    .home-faq__actions .btn,
    .home-start-card .btn,
    .home-cta__actions .btn,
    .home-section-cta {
        width: 100%;
    }

    .home-start-grid {
        grid-template-columns: 1fr;
    }

    .hero-home__proof-card {
        padding: 12px 14px;
    }

    .home-compare-row {
        gap: 10px;
        padding: 16px 18px;
    }

    .footer-contact-row {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-contact-pill {
        width: 100%;
    }
}

/* Why choose Oasis: expandable on mobile/tablet, always open on desktop */
.why-oasis-details {
    margin-top: 0.5rem;
}
.why-oasis-toggle {
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    list-style: none;
    padding: 0.5rem 0;
    display: inline-block;
}
.why-oasis-toggle::-webkit-details-marker,
.why-oasis-toggle::marker {
    display: none;
}
.why-oasis-toggle:hover {
    text-decoration: underline;
}
@media (min-width:981px){
    .why-oasis-teaser {
        display: none;
    }
    .why-oasis-details .why-oasis-toggle {
        display: none;
    }
    .why-oasis-details .why-oasis-list {
        display: block;
        margin-top: 1rem;
    }
}
@media (max-width:980px){
    .why-oasis-details:not([open]) .why-oasis-list {
        display: none;
    }
    .why-oasis-details[open] .why-oasis-list {
        display: block;
    }
}

/* Sticky CTA bar: mobile/tablet only, fixed at bottom */
.sticky-cta-bar {
    display: none;
}
@media (min-width:981px){
    .sticky-cta-bar {
        display: none !important;
    }
}
@media (max-width:980px){
    body {
        padding-bottom: 76px;
    }
    .sticky-cta-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
        background: #fff;
        box-shadow: 0 -4px 20px rgba(0,0,0,.1);
        border-top: 1px solid var(--line);
    }
    .sticky-cta-bar .btn {
        flex: 1;
        max-width: 200px;
        min-height: 44px;
        justify-content: center;
    }
}

/* ------------------------------------------------
   4) HOME – SERVICE CARDS WITH BIG ICONS
   ------------------------------------------------ */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

@media (max-width:900px){
    .svc-grid {
        grid-template-columns: 1fr;
    }
}

.svc-card a {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 18px 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-1);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.svc-card a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: #D9E8FA;
}

.svc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.svc-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 14px;
    background: radial-gradient(24px 20px at 30% 25%, rgba(255,255,255,.45), rgba(255,255,255,0)),
    linear-gradient(180deg, #0E3A63, #174F87);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(13,59,102,.18), inset 0 1px 0 rgba(255,255,255,.15);
}

.svc-icon img {
    width: 36px;
    height: 36px;
    display: block;
}

.svc-icon--green {
    background: linear-gradient(180deg,#1E9E66,#158753);
}

.svc-icon--sky {
    background: linear-gradient(180deg,#2C82D0,#1F69AE);
}

.svc-icon--amber {
    background: linear-gradient(180deg,#F4BE38,#D79E11);
}

.svc-icon--slate {
    background: linear-gradient(180deg,#6B7F95,#4E627A);
}

.svc-icon--orange {
    background: linear-gradient(180deg,#F08A2C,#D46C0D);
}

.svc-card h3 {
    margin: 0;
    font-size: clamp(18px,2.0vw,20px);
    color: #0A2746;
    line-height: 1.2;
}

.svc-card p {
    margin: 8px 0 10px;
    color: #355070;
}

.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-weight: 800;
}

.svc-link::after {
    content: "→";
    transition: transform .15s ease;
}

.svc-card a:hover .svc-link::after {
    transform: translateX(2px);
}

/* ------------------------------------------------
   4.1) HOME – WHAT WE DO REDESIGN (scoped)
   ------------------------------------------------ */
#home-services .svc-grid {
    gap: 20px;
}

#home-services {
    overflow-x: hidden;
}

#home-services .container,
#home-services .svc-grid,
#home-services .svc-grid > .svc-card,
#home-services .svc-card a,
#home-services .svc-head {
    min-width: 0;
}

#home-services .svc-grid > .svc-card {
    min-width: 0;
}

#home-services .svc-card a {
    display: flex;
    flex-direction: column;
    gap: .72rem;
    width: 100%;
    min-width: 0;
    border-radius: 18px;
    border: 1px solid rgba(13,59,102,.14);
    background: linear-gradient(180deg,#fbfdff 0%,#ffffff 100%);
    box-shadow: 0 10px 24px rgba(13,59,102,.08);
    padding: 14px;
    overflow: hidden;
}

#home-services .svc-card a:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(13,59,102,.14);
    border-color: rgba(13,59,102,.22);
}

#home-services .svc-head {
    display: block;
    margin: 0;
}

#home-services .svc-icon {
    width: 100%;
    height: clamp(208px, 22vw, 292px);
    min-height: 0;
    flex: none;
    box-sizing: border-box;
    padding: clamp(14px, 2vw, 22px);
    border-radius: 14px;
    border: 1px solid rgba(13,59,102,.1);
    background: #ffffff;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 4px 14px rgba(13,59,102,.06);
}

#home-services .svc-icon img {
    width: 90%;
    height: auto;
    max-width: 640px;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    filter: drop-shadow(0 8px 14px rgba(10,36,68,.14));
}

#home-services .svc-card h3 {
    margin: 0;
    font-size: clamp(1.38rem, 1.08rem + .42vw, 1.72rem);
    line-height: 1.18;
    letter-spacing: -.01em;
}

#home-services .svc-card p {
    margin: 0 0 8px;
    color: #2f4d70;
    font-size: 1.05rem;
    line-height: 1.52;
    overflow-wrap: anywhere;
}

#home-services .svc-link {
    margin-top: auto;
    font-weight: 800;
}

@media (max-width:980px){
    #home-services .svc-card h3 {
        font-size: clamp(1.32rem, 1.12rem + .68vw, 1.58rem);
    }
}

@media (max-width:640px){
    #home-services .svc-grid {
        gap: 14px;
    }

    #home-services .svc-card a {
        padding: 12px;
        border-radius: 15px;
    }

    #home-services .svc-icon {
        height: 228px;
        min-height: 228px;
        aspect-ratio: auto;
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    #home-services .svc-icon img {
        width: 92%;
        max-width: 100%;
        max-height: 100%;
    }

    #home-services .svc-card h3 {
        font-size: 1.3rem;
    }

    #home-services .svc-card p {
        font-size: 1rem;
    }
}

/* iPhone fine-tune: more breathing room for large icon art */
@media (min-width:390px) and (max-width:430px){
    #home-services .svc-icon {
        height: 242px;
        min-height: 242px;
    }
}

/* ------------------------------------------------
   5) TABLES (e.g., Matrix)
   ------------------------------------------------ */
.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,

.table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.table th {
    background: #F6FAFF;
    color: #103A5C;
    font-weight: 800;
}

.table-compact th,

.table-compact td {
    padding: 10px 12px;
}

.table-nowrap td,

.table-nowrap th {
    white-space: nowrap;
}

/* ------------------------------------------------
   6) FAQ (details/summary)
   ------------------------------------------------ */
details.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-1);
}

.faq-summary {
    list-style: none;
    cursor: pointer;
    font-weight: 800;
    color: #0A2746;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-body {
    color: #355070;
    margin-top: 8px;
}

/* ------------------------------------------------
   7) BREADCRUMBS
   ------------------------------------------------ */
.breadcrumbs {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 8px 0 0;
}

.breadcrumbs li {
    color: #517294;
}

.breadcrumbs a {
    color: #2C6AA2;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------
   8) FORMS (minimal)
   ------------------------------------------------ */
.input,

select,

textarea {
    appearance: none;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .65rem .75rem;
    outline: none;
    background: #fff;
    color: var(--text);
}

.input:focus,

select:focus,

textarea:focus {
    border-color: #CFE2F6;
    box-shadow: 0 0 0 3px rgba(38,132,255,.12);
}

/* ------------------------------------------------
   9) FOOTER
   ------------------------------------------------ */
.site-footer {
    position: relative;
    overflow: hidden;
    background:
    radial-gradient(320px 220px at 8% 0%, rgba(31,145,255,.14), rgba(31,145,255,0) 72%),
    radial-gradient(280px 220px at 88% 8%, rgba(77,184,72,.13), rgba(77,184,72,0) 72%),
    linear-gradient(135deg, #040b17 0%, #08192f 48%, #0c2847 100%);
    color: #D4DFEA;
    padding-top: clamp(38px, 6vw, 64px);
    border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(31,145,255,0) 0%, rgba(31,145,255,.75) 18%, rgba(255,208,103,.8) 50%, rgba(77,184,72,.75) 82%, rgba(77,184,72,0) 100%);
}

.site-footer .footer-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(170px, .78fr) minmax(190px, .92fr) minmax(240px, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
}

.site-footer h4 {
    color: #fff;
    margin-bottom: 12px;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-footer a {
    color: #DCEAF8;
    text-decoration: none;
    transition: color .18s ease, opacity .18s ease;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: none;
}

.footer-brand {
    max-width: 460px;
}

.footer-brand-name {
    margin: 0 0 10px;
    color: rgba(255,255,255,.82);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.footer-slogan {
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.15;
    letter-spacing: -.03em;
}

.footer-intro {
    margin: 14px 0 0;
    max-width: 46ch;
    color: rgba(220,234,248,.82);
}

.footer-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.footer-contact-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .72rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    font-weight: 800;
}

.footer-contact-pill:hover {
    background: rgba(255,255,255,.1);
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.footer-list a {
    color: rgba(220,234,248,.88);
}

.footer-list a:hover {
    color: #fff;
}

.footer-standards {
    max-width: 430px;
    margin-top: 18px;
    padding: 14px 16px;
    line-height: 1.4;
    font-size: .84rem;
    color: rgba(212,223,234,.88);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.footer-standards-label {
    display: block;
    color: rgba(255,255,255,.96);
    font-weight: 800;
}

.footer-standards-copy {
    display: block;
    margin-top: 5px;
    color: rgba(212,223,234,.82);
}

/* Footer Locations (FOOTER-LOC-01 / FOOTER-LOC-02 polish) */
.footer-locations {
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.05) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.footer-locations h4 {
    color: #fff;
    margin-bottom: 10px;
}

.footer-area-copy {
    margin: 0 0 14px;
    color: rgba(220,234,248,.82);
    line-height: 1.55;
}

.footer-address-block {
    font-style: normal;
    margin-bottom: 12px;
    line-height: 1.45;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.footer-locations address,
.footer-locations address a {
    font-style: normal;
}

.footer-address-block:last-of-type {
    margin-bottom: 8px;
}

.footer-loc-label {
    color: rgba(255,255,255,.95);
    font-weight: 800;
}

.footer-locations address a {
    color: rgba(220,234,248,.9);
    text-decoration: none;
}

.footer-locations address a:hover {
    color: #fff;
}

.footer-trust-line {
    margin: 14px 0 0;
    color: rgba(212,223,234,.82);
    font-size: .84rem;
}

.footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    padding-bottom: 24px;
    margin-top: 26px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.footer-bottom__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.footer-bottom__links a {
    color: rgba(220,234,248,.82);
}

.footer-backtotop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}

.footer-backtotop::after {
    content: "↑";
    font-size: .95em;
}

/* Chamber membership badge (small footer footprint) */
.footer-membership-badge {
    margin-top: 12px;
    max-width: 168px;
}

.footer-membership-badge .mn-widget-member {
    display: grid;
    gap: 4px;
}

.footer-membership-badge .mn-widget-member-name {
    font-size: .72rem;
    line-height: 1.2;
    color: rgba(255,255,255,.92);
    font-weight: 600;
}

.footer-membership-badge .mn-widget-member-text {
    font-size: .68rem;
    color: rgba(212,223,234,.82);
}

.footer-membership-badge .mn-widget-member-link {
    display: inline-block;
}

.footer-membership-badge .mn-widget-member-logo {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
}

.footer-membership-fallback {
    display: inline-block;
    margin-top: 6px;
    font-size: .72rem;
    line-height: 1.25;
    color: #C5DAEE;
    text-decoration: underline;
}

.footer-membership-badge.is-loaded .footer-membership-fallback {
    display: none;
}

@media (max-width:900px){
    .site-footer .footer-columns {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        max-width: none;
    }

    .footer-address-block {
        margin-bottom: 14px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom__links {
        gap: 10px 14px;
    }

    .footer-membership-badge {
        max-width: 148px;
    }
}

/* ------------------------------------------------
   10) UTILITIES / GRID
   ------------------------------------------------ */
.grid {
    display: grid;
    gap: 16px;
}

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

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

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

@media (max-width:980px){
    .grid-2,
    
    .grid-3,
    
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Service city pages: local photo gallery cards */
[data-city-photos="v1"] .container.container-narrow {
    max-width: 1040px;
}

[data-city-photos="v1"] .grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

[data-city-photos="v1"] figure.card {
    margin: 0;
    padding: 0;
    border: 1px solid #dce6f1;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 10px 28px rgba(13,59,102,.10);
    transition: transform .22s ease, box-shadow .22s ease;
}

[data-city-photos="v1"] figure.card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-bottom: 1px solid var(--line);
    transition: transform .28s ease;
}

[data-city-photos="v1"] figure.card figcaption {
    padding: 13px 15px 15px;
    margin-top: 0;
    line-height: 1.45;
    color: #3c5a77;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    min-height: 74px;
    overflow-wrap: anywhere;
}

@media (hover:hover) and (pointer:fine){
    [data-city-photos="v1"] figure.card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(13,59,102,.16);
    }

    [data-city-photos="v1"] figure.card:hover img {
        transform: scale(1.03);
    }
}

@media (max-width:980px){
    [data-city-photos="v1"] .grid.grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width:640px){
    [data-city-photos="v1"] .container.container-narrow {
        max-width: 100%;
    }

    [data-city-photos="v1"] .grid.grid-3 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    [data-city-photos="v1"] figure.card figcaption {
        min-height: 0;
    }
}

/* “Back to top” link container spacing */
.backtop {
    text-align: center;
    margin-top: 18px;
}

/* ------------------------------------------------
   11) PRINT BASICS
   ------------------------------------------------ */
@media print{
    .site-header,
    
    .menu-btn,
    
    .mobile-panel,
    
    .btn,
    
    .cta-sm {
        display: none !important;
    }

    a {
        text-decoration: none;
    }

    body {
        background: #fff;
    }
}

/* ------------------------------------------------
   12) OPTIONAL COMPONENTS
   ------------------------------------------------ */
/* Pill counters, tags */
.tag {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: #F2F6FB;
    color: #2E5E96;
    font-weight: 800;
    font-size: .8rem;
    border: 1px solid #E3EEF8;
}

/* Simple alerts */
.alert {
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-1);
    color: #25455F;
}

/* Links that look like buttons in text */
.inline-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    text-decoration: none;
    color: var(--navy);
    border-bottom: 2px solid #D9E8FA;
    padding-bottom: 2px;
}

.inline-link-btn:hover {
    border-color: #BFD9F3;
}

/* ------------------------------------------------
   13) HEADER HEIGHT VAR (used by JS for mobile panel)
   ------------------------------------------------ */
/* default/fallback */
:root {
    --header-h: 64px;
}

/* ---- WHY OASIS: Carousel ---- */
.switch-carousel {
    position: relative;
    background: linear-gradient(180deg, rgba(13,59,102,.06), rgba(13,59,102,.03));
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--card-shadow,0 6px 22px rgba(0,0,0,.06));
}

.switch-viewport {
    overflow: hidden;
    border-radius: 14px;
}

.switch-track {
    display: flex;
    transition: transform .6s var(--ease, cubic-bezier(.22,.61,.36,1));
    will-change: transform;
}

.switch-slide {
    min-width: 100%;
    background: #fff;
    padding: 28px 24px;
    display: grid;
    gap: 12px;
}

.switch-slide-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.switch-emoji {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(13,59,102,.12));
}

.switch-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.switch-cta {
    margin-top: 6px;
}

.switch-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: #0D3B66;
    color: #fff;
    opacity: .9;
    box-shadow: 0 8px 20px rgba(13,59,102,.25);
}

.switch-btn:hover {
    opacity: 1;
}

.switch-btn.prev {
    left: 10px;
}

.switch-btn.next {
    right: 10px;
}

.switch-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px 2px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #cbd5e1;
    opacity: .9;
}

.dot.is-active {
    background: #0D3B66;
    opacity: 1;
}

@media (max-width: 640px){
    .switch-carousel {
        padding: 12px;
    }

    .switch-slide {
        padding: 22px 16px;
    }

    .switch-btn {
        display: none;
    }

    /* flechas fuera en móvil, usamos swipe */
}

/* Reveal (opcional) */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s, transform .5s;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Respeto a usuarios con motion reducido */
@media (prefers-reduced-motion: reduce){
    .switch-track {
        transition: none !important;
    }

    .reveal {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ---- WHY OASIS (static cards) ---- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

@media (max-width:900px){
    .why-grid {
        grid-template-columns: 1fr;
    }
}

.why-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 8px 24px rgba(13,59,102,.08);
    border: 1px solid rgba(13,59,102,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(13,59,102,.12);
}

.why-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.why-emoji {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(13,59,102,.12));
}

.why-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.why-cta {
    margin-top: 10px;
}

/* motion-respect */
@media (prefers-reduced-motion:reduce){
    .why-card {
        transition: none;
    }
}

/* ---- WHY OASIS tweaks ---- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

@media (max-width:900px){
    .why-grid {
        grid-template-columns: 1fr;
    }
}

.why-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 8px 24px rgba(13,59,102,.08);
    border: 1px solid rgba(13,59,102,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(13,59,102,.12);
}

.why-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.why-emoji {
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 8px 14px rgba(13,59,102,.14));
}

@media (min-width:1100px){
    .why-emoji {
        font-size: 40px;
    }
}

.why-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.why-cta {
    margin-top: 10px;
}

/* ---- KPIs ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}

@media (max-width:900px){
    .kpi-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:560px){
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 8px 24px rgba(13,59,102,.08);
    border: 1px solid rgba(13,59,102,.08);
    text-align: center;
}

.kpi-value {
    font-weight: 800;
    font-size: 40px;
    letter-spacing: .5px;
    color: #0D3B66;

    /* tu navy */
    margin-bottom: 6px;
}

.kpi-label {
    margin: 0;
    color: rgba(0,0,0,.6);
}

/* motion-respect */
@media (prefers-reduced-motion:reduce){
    .why-card {
        transition: none;
    }
}

/* ============ HOW WE WORK ============ */
.how-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    counter-reset: step;
}

@media (max-width:1100px){
    .how-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:560px){
    .how-grid {
        grid-template-columns: 1fr;
    }
}

.how-card {
    background: #fff;
    border: 1px solid rgba(13,59,102,.08);
    border-radius: 16px;
    padding: 20px 18px 18px;
    box-shadow: 0 8px 24px rgba(13,59,102,.08);
    transform: translateY(8px);
    opacity: .001;
    transition: transform .45s ease, opacity .45s ease, box-shadow .25s ease;
}

.how-card:hover {
    box-shadow: 0 14px 32px rgba(13,59,102,.12);
}

.how-card.in {
    transform: none;
    opacity: 1;
}

.how-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.how-num {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #0D3B66;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 6px 12px rgba(13,59,102,.18);
}

.how-emoji {
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 8px 14px rgba(13,59,102,.14));
}

@media (min-width:1100px){
    .how-emoji {
        font-size: 40px;
    }
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
    .how-card {
        transition: none;
    }
}

/* HOTFIX How we work: visibles por defecto y animan si hay JS */
.how-card {
    opacity: 1;
    transform: none;
}

.how-card.in {
    animation: howPop .45s ease both;
}

@keyframes howPop{
    from {
        transform: translateY(8px);
        opacity: .001;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* How we work: ocultar numeración nativa del <ol> */
#how-we-work .how-grid {
    list-style: none;

    /* quita números */
    padding-left: 0;

    /* elimina sangría del <ol> */
    margin-left: 0;
}

#how-we-work .how-grid > li {
    list-style: none;

    /* refuerzo para algunos navegadores */
}

#how-we-work .how-grid > li::marker {
    content: '';

    /* fix extra para Safari/iOS */
}

/* WHY Oasis – ajuste de grilla y estilo de iconos */
#why-oasis .why-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

@media (min-width: 720px){
    #why-oasis .why-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (min-width: 1024px){
    #why-oasis .why-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

/* Oculta cualquier marcador nativo del <ol> (Safari/iOS) */
#why-oasis .why-grid > li::marker {
    content: '';
}

/* Tarjetas */
#why-oasis .why-card {
    background: #fff;
    border: 1px solid var(--border, #e8edf3);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(13,59,102,.04), 0 8px 24px rgba(13,59,102,.04);
    padding: 18px 18px 16px;
    transition: box-shadow .2s ease, transform .2s ease;
}

#why-oasis .why-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 0 rgba(13,59,102,.05), 0 16px 36px rgba(13,59,102,.08);
}

/* Cabecera de cada tarjeta */
#why-oasis .why-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Número circular (azul) que ya usas en otras secciones */
#why-oasis .why-num {
    counter-increment: why;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #0d3b66;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

#why-oasis .why-num::before {
    content: counter(why);
}

/* Emoji más grande para llamar la atención */
#why-oasis .why-emoji {
    font-size: 24px;
    line-height: 1;
}

/* Ajustes de tipografía y listas */
#why-oasis .why-card h3 {
    margin: 2px 0 6px;
}

#why-oasis .why-card ul {
    margin: 0 0 10px;
    padding-left: 18px;
}

#why-oasis .why-card li {
    margin: 4px 0;
}

/* Botón pequeño coherente */
#why-oasis .btn.small {
    padding: 6px 10px;
    font-size: .9rem;
}

/* ========== Floating menu (mobile) ========== */
.fab-menu {
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));

    /* deja espacio a tu barra fija */
    z-index: 10000;
}

@media (max-width: 900px){
    .fab-menu[hidden] {
        display: block;
        visibility: visible;
    }
}

@media (min-width: 901px){
    .fab-menu {
        display: none;
    }
}

/* solo móvil/tablet */
.fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    outline: none;
    background: var(--accent, #2ecc71);
    box-shadow: 0 6px 18px rgba(13,59,102,.18), 0 2px 4px rgba(13,59,102,.12);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

.fab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13,59,102,.22), 0 2px 6px rgba(13,59,102,.14);
}

.fab-btn:active {
    transform: translateY(0);
}

.fab-btn[aria-expanded="true"] {
    background: var(--brand, #0D3B66);
}

/* Ícono hamburguesa */
.fab-icon,

.fab-icon::before,

.fab-icon::after {
    display: block;
    position: relative;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

.fab-icon {
    top: 0;
}

.fab-icon::before,

.fab-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.fab-icon::before {
    top: -7px;
}

.fab-icon::after {
    top: 7px;
}

/* Animación a X cuando está abierto */
.fab-btn[aria-expanded="true"] .fab-icon {
    background: transparent;
}

.fab-btn[aria-expanded="true"] .fab-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.fab-btn[aria-expanded="true"] .fab-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Respetar preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
    .fab-btn,
    
    .fab-icon,
    
    .fab-icon::before,
    
    .fab-icon::after {
        transition: none;
    }
}

/* Opcional: si no tienes barra fija inferior en alguna página y quieres acercar el FAB:
.fab-menu{ bottom:calc(18px + env(safe-area-inset-bottom, 0px)); } */
/* ===== Trust / Proof block ===== */
.trust .logo-row {
    display: flex;
    gap: .5rem .75rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0 20px;
}

.trust .logo-chip {
    filter: grayscale(1);
    opacity: .85;
    border-radius: 999px;
    background: var(--surface, #f3f6f9);
}

.trust .logo-chip:hover {
    filter: none;
    opacity: 1;
}

.trust-grid {
    align-items: stretch;
}

.quote-card .quote {
    font-size: clamp(1rem, 1vw + .8rem, 1.25rem);
    line-height: 1.4;
    margin-bottom: 12px;
}

.quote-card .quote-meta {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.quote-card .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0d3b66;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.kpi-card {
    padding-block: 18px;
}

.kpi-number {
    font-weight: 800;
    font-size: clamp(2rem, 4vw + .5rem, 3rem);
    line-height: 1;
    letter-spacing: .5px;
}

.kpi-suffix {
    font-weight: 700;
    margin-left: 2px;
}

.kpi-label {
    margin-top: 6px;
    color: var(--muted, #4f5b67);
}

.trust-pack .trust-list {
    display: grid;
    gap: 8px;
    padding-left: 20px;
    margin: 0;
    list-style: disc;
}

/* Responsive tweaks */
@media (max-width: 900px){
    .trust .section-header {
        row-gap: .5rem;
    }

    .kpi-card {
        text-align: center;
    }
}

/* ===== Services: links sin subrayado fijo, con subrayado en hover/focus ===== */
.page-services a:not(.btn):not(.chip):not(.badge):not(.cta-sm):not(.brand) {
    text-decoration: none !important;

    /* fuera subrayado fijo */
    background-image: linear-gradient(currentColor,currentColor);
    background-size: 0% 2px;

    /* subrayado "oculto" */
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .18s ease;
}

/* Mostrar la línea solo al interactuar (mouse o teclado) */
.page-services a:not(.btn):not(.chip):not(.badge):not(.cta-sm):not(.brand):hover,

.page-services a:not(.btn):not(.chip):not(.badge):not(.cta-sm):not(.brand):focus-visible {
    background-size: 100% 2px;
    outline: none;
}

/* Un poco más de presencia en links dentro de tarjetas */
.page-services .card a:not(.btn),

.page-services .service-card a:not(.btn) {
    font-weight: 600;
}

/* Accesibilidad: foco visible en enlaces de texto */
.page-services a:not(.btn):focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #2bb673) 25%, transparent);
    border-radius: 4px;
}

/* Opcional: flechita con micro-animación si usas .link-arrow */
.page-services .link-arrow::after {
    content: " →";
    transition: transform .15s ease;
}

.page-services .link-arrow:hover::after,

.page-services .link-arrow:focus-visible::after {
    transform: translateX(2px);
}

/* ---------- Emoji sizing across service detail pages ---------- */
/* Ajusta un solo número y todo se reescala */
:root {
    --emoji-scale: 1.35;

    /* 1.25–1.6 suele verse bien */
    --emoji-y-nudge: 1px;

    /* baja/sube un poquito el emoji */
}

/* Caso A: el emoji está en su propio span (.emoji / .icon) */
.service-industries .emoji,

.service-industries .icon,

.industries-grid .emoji,

.industries-grid .icon,

.industries-list .emoji,

.industries-list .icon {
    font-size: calc(1em * var(--emoji-scale));
    line-height: 1;
    display: inline-block;
    transform: translateY(var(--emoji-y-nudge));
    margin-right: .35rem;
}

/* Caso B: el emoji está escrito “a pelo” como primer carácter del título/enlace */
/* Usamos ::first-letter para sobredimensionarlo únicamente en esos bloques */
.service-industries .industries-grid a::first-letter,

.service-industries .industries-grid h3::first-letter,

.service-industries .industries-grid h4::first-letter,

.industries-grid a::first-letter,

.industries-grid h3::first-letter,

.industries-grid h4::first-letter,

.industries-list a::first-letter,

.industries-list h3::first-letter,

.industries-list h4::first-letter {
    font-size: calc(1em * var(--emoji-scale));
    line-height: 1;
}

/* Un pelín de espacio cuando el emoji va pegado al texto (fallback) */
.industries-grid a,

.industries-grid h3,

.industries-grid h4,

.industries-list a,

.industries-list h3,

.industries-list h4 {
    text-decoration-thickness: 2px;

    /* opcional: subrayado consistente */
    text-underline-offset: 2px;
}

/* Si el título es enlace, que no cambie de color sólo el emoji */
.industries-grid a,

.industries-list a {
    color: inherit;
}

/* ===== Bigger emojis in service/industry blocks (strong override) ===== */
:root {
    /* Sube/baja este multiplicador global */
    --emoji-scale: 2.05;

    /* prueba 2.0–2.4 */
    --emoji-y-nudge: 2px;

    /* ajusta la línea base del emoji */
}

/* 1) Cuando el emoji está en su propio span */
:where(.industries-grid, .industries-list, .service-industries, .section--industries)  :is(.emoji, .icon, .emoji-bullet) {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
    font-size: calc(1em * var(--emoji-scale)) !important;
    line-height: 1 !important;
    display: inline-block !important;
    transform: translateY(var(--emoji-y-nudge)) !important;
    margin-right: .5rem !important;
}

/* 2) Cuando el emoji está escrito directamente al inicio del título/enlace */
:where(.industries-grid, .industries-list, .service-industries, .section--industries)  :is(h2,h3,h4,a,li)::first-letter {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",inherit !important;
    font-size: calc(1em * var(--emoji-scale)) !important;
    line-height: 1 !important;
}

/* Asegura buen espaciado y que el color del enlace no afecte al emoji */
:where(.industries-grid, .industries-list, .service-industries)  :is(h3,h4,a) {
    color: inherit !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* Opcional: en pantallas grandes podemos subir un poco más */
@media (min-width: 1200px){
    :root {
        --emoji-scale: 2.25;
    }
}

/* ========= Links sin subrayado por defecto (Industries + Services) ========= */
/* Cubre los hubs y sus listas/tarjetas */
:where(#cards, .industry-section, .industries-grid, .industries-list, .service-sections, .services-hub, .section--industries) a {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Subrayado sólo en hover/enfoque (accesible) */
:where(#cards, .industry-section, .industries-grid, .industries-list, .service-sections, .services-hub, .section--industries) a:hover,

:where(#cards, .industry-section, .industries-grid, .industries-list, .service-sections, .services-hub, .section--industries) a:focus,

:where(#cards, .industry-section, .industries-grid, .industries-list, .service-sections, .services-hub, .section--industries) a:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
}

/* Asegura que botones/“chips” nunca se subrayen */
a.btn,

.btn,

.chip,

.badge,

.cta-sm {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Títulos enlazados en las tarjetas (por si el tema fuerza el subrayado) */
:where(#cards, .industry-section, .industries-grid, .industries-list) :is(h2,h3,h4) > a {
    text-decoration: none !important;
}

:where(#cards, .industry-section, .industries-grid, .industries-list) :is(h2,h3,h4) > a:hover,

:where(#cards, .industry-section, .industries-grid, .industries-list) :is(h2,h3,h4) > a:focus {
    text-decoration: underline !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: .6rem 1rem;
    background: #0D3B66;
    color: #fff;
    border-radius: 8px;
    z-index: 9999;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    outline: 0;
}

:focus-visible {
    outline: 3px solid #0D3B66;
    outline-offset: 2px;
}

/* Floating call button (mobile) */
.fab-call {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2BB673;

    /* green brand */
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform .15s ease, filter .15s ease;
}

.fab-call:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

@media (min-width: 960px){
    .fab-call {
        display: none;
    }
}

/* Kill any floating FAB that might be lingering */
.fab-call,

.fab-menu,

.mobile-fab,

.floating-cta,

.floating-menu {
    display: none !important;
}

/* ===== Announcement / Notice Bar (Home) ===== */
.site-notice {
    position: sticky;

    /* queda visible al hacer scroll */
    top: 0;
    z-index: 1100;
    background: #E9F9EE;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.site-notice .notice-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
}

.site-notice .notice-text {
    color: #0b3a66;
    font-size: .95rem;
    line-height: 1.35;
}

.site-notice .notice-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-notice .btn.btn-sm {
    padding: 6px 10px;
    font-size: .9rem;
}

/* variante vendor (ligero gradiente) */
.site-notice--vendor {
    background: linear-gradient(0deg,#E9F9EE 0%,#F4FFF7 100%);
}

.notice-badge {
    display: inline-block;
    background: #17a34a;
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 3px 8px;
    margin-right: 8px;
    font-size: .75rem;
    vertical-align: middle;
}

.notice-list {
    display: inline-block;
    margin-left: 8px;
    color: #0b3a66;
    opacity: .78;
    font-size: .9rem;
}

.notice-close {
    appearance: none;
    border: 0;
    background: #0b3a66;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, opacity .2s ease;
}

.notice-close:hover {
    transform: scale(1.05);
    opacity: .9;
}

/* Responsive */
@media (max-width:900px){
    .site-notice .notice-inner {
        flex-wrap: wrap;
        gap: 10px;
    }

    .site-notice .notice-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width:640px){
    .notice-list {
        display: none;
    }

    /* no alargamos demasiado la barra en móvil */
}

/* Active link (top nav + mobile) */
.nav-links a.is-active {
    font-weight: 700;
}

#mobile-nav .container a.is-active {
    font-weight: 700;
}

/* BIG industry emojis */
.i-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: .6rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    font-size: 2.2rem;

    /* móvil */
}

@media (min-width:640px){
    .i-emoji {
        font-size: 2.8rem;
    }
}

/* tablet */
@media (min-width:1024px){
    .i-emoji {
        font-size: 3.2rem;
    }
}

/* desktop */
@media (min-width:1400px){
    .i-emoji {
        font-size: 3.6rem;
    }
}

/* desktop grande */
/* Asegura alineación bonita cuando el emoji va antes del título */
h3 .i-emoji,

h4 .i-emoji {
    transform: translateY(2px);
}

/* BIG industry emojis (reforzado) */
.i-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: .6rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    font-size: 2.6rem !important;

    /* móvil */
}

@media (min-width:640px){
    .i-emoji {
        font-size: 3.2rem !important;
    }
}

/* tablet */
@media (min-width:1024px){
    .i-emoji {
        font-size: 3.6rem !important;
    }
}

/* desktop */
@media (min-width:1400px){
    .i-emoji {
        font-size: 4.0rem !important;
    }
}

/* XL */
/* BIG industry emojis (reforzado) */
.i-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: .6rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    font-size: 2.8rem !important;

    /* móvil */
}

@media (min-width:640px){
    .i-emoji {
        font-size: 3.4rem !important;
    }
}

/* tablet */
@media (min-width:1024px){
    .i-emoji {
        font-size: 3.8rem !important;
    }
}

/* desktop */
@media (min-width:1400px){
    .i-emoji {
        font-size: 4.2rem !important;
    }
}

/* XL */
h3 .i-emoji,

h4 .i-emoji {
    transform: translateY(2px);
}

/* BIG industry emojis (refuerzo final) */
.i-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: .6rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    font-size: 2.8rem !important;

    /* móvil */
}

@media (min-width:640px){
    .i-emoji {
        font-size: 3.4rem !important;
    }
}

/* tablet */
@media (min-width:1024px){
    .i-emoji {
        font-size: 3.8rem !important;
    }
}

/* desktop */
@media (min-width:1400px){
    .i-emoji {
        font-size: 4.2rem !important;
    }
}

/* XL */
h3 .i-emoji,

h4 .i-emoji {
    transform: translateY(2px);
}

/* ===== Industries | tamaño grande para los emojis de las tarjetas ===== */
#cards .industry-card {
    display: grid;

    /* icono a la izquierda, texto a la derecha */
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .75rem;
}

#cards .industry-icon {
    font-size: 2.8rem !important;

    /* móvil */
    line-height: 1 !important;
    display: inline-block !important;
    transform: translateY(2px);
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    margin-right: .25rem;
}

/* ===== Industries: icono grande bien alineado ===== */
#cards .industry-card {
    display: grid;
    grid-template-columns: 64px 1fr;

    /* columna del icono + columna de texto */
    align-items: start;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    padding: 12px 12px 10px;
}

#cards .industry-icon {
    font-size: 3.2rem;

    /* tamaño base desktop */
    line-height: 1;
    display: inline-block;
    transform: translateY(2px);
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
}

#cards .industry-card h3,

#cards .industry-card p,

#cards .industry-card ul {
    grid-column: 2;

    /* todo el contenido va en la 2ª columna */
    margin: 0;
}

#cards .industry-card h3 {
    margin-top: 2px;
}

#cards .industry-card p {
    margin: 6px 0 8px;
    color: var(--muted);
}

#cards .industry-card ul {
    padding-left: 18px;
}

@media (max-width: 900px){
    #cards .industry-card {
        grid-template-columns: 56px 1fr;
    }

    #cards .industry-icon {
        font-size: 2.8rem;
    }
}

@media (max-width: 640px){
    #cards .industry-card {
        grid-template-columns: 48px 1fr;
    }

    #cards .industry-icon {
        font-size: 2.4rem;
    }
}

/* === Services > Industries: hacer grandes todos los emojis === */
/* Afecta cualquier tarjeta con .industry-card y su .industry-icon, en todo el sitio */
:where(.section, .strip) :is(.industry-card) :is(.industry-icon, .icon, .emoji) {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
    font-size: clamp(2.1rem, 2.4vw + 1rem, 3.2rem) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(2px) !important;
    margin-right: .5rem !important;
}

/* Asegura una buena alineación de la tarjeta (icono + título/texto) */
:where(.industry-card) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: .75rem;
}

:where(.industry-card) h3 {
    margin: 0 0 .25rem;
}

/* ===== Services > Industries: fijar layout 2 columnas y alinear iconos ===== */
/* 1) Solo tarjetas que NO son enlaces (las de servicios son <div>, en la página
      de Industries principal las tarjetas son <a> y no queremos tocarlas) */
:where(.section) :where(.grid) > .industry-card:not(a) {
    display: grid !important;
    grid-template-columns: 3.2rem 1fr;

    /* ancho fijo para el icono */
    align-items: start;
    column-gap: .8rem;
}

/* 2) El icono grande, alineado a la línea base y con ancho “caja” estable */
:where(.section) :where(.grid) > .industry-card:not(a) .industry-icon {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
    font-size: clamp(2.2rem, 2.2vw + 1rem, 3rem) !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center;
    width: 3.2rem;

    /* coincide con la 1ª columna */
    min-width: 3.2rem;
    height: 3.2rem;

    /* da “caja” al emoji y alinea todas las filas */
    transform: translateY(2px);
}

/* 3) Ajustes tipográficos dentro de la tarjeta */
:where(.section) :where(.grid) > .industry-card:not(a) h3 {
    margin: 0 0 .25rem;
}

:where(.section) :where(.grid) > .industry-card:not(a) p {
    margin: 0;
}

/* 4) Asegura que las tarjetas/enlaces de la página Industries NO cambien */
a.industry-card {
    display: block;
}

/* ===== FIX: Services > Industries — icono a la col.1 y texto a la col.2 ===== */
:where(.section) :where(.grid) > .industry-card:not(a) {
    display: grid !important;
    grid-template-columns: 3.2rem 1fr;

    /* icono | contenido */
    grid-auto-rows: min-content;
    column-gap: .8rem;
    row-gap: .25rem;
}

/* Icono ocupa la primera columna y “dos filas” (título + párrafo) */
:where(.section) :where(.grid) > .industry-card:not(a) .industry-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid !important;
    place-items: center;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
    font-size: clamp(2.2rem, 2.2vw + 1rem, 3rem) !important;
    line-height: 1 !important;
    transform: translateY(2px);
}

/* Título y párrafo siempre en la columna 2 (ancha) */
:where(.section) :where(.grid) > .industry-card:not(a) h3,

:where(.section) :where(.grid) > .industry-card:not(a) p {
    grid-column: 2;
}

:where(.section) :where(.grid) > .industry-card:not(a) h3 {
    margin: 0 0 .25rem;
}

:where(.section) :where(.grid) > .industry-card:not(a) p {
    margin: 0;
}

/* ===== Service pages: Industry cards (consistent big emoji) ===== */
.service-industries .industry-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow: var(--shadow-1);
}

.service-industries .industry-icon {
    font-size: 40px;
    line-height: 1;
    margin-top: .125rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
}

.service-industries h3 {
    margin: 0;
}

.service-industries p.muted {
    margin: .25rem 0 0;
}

@media (max-width:720px){
    .service-industries .industry-icon {
        font-size: 36px;
    }
}

<style>
  /* Emojis como iconos en Home (Services grid) */
  .svc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-icon .svc-emoji {
    font-size: 36px;
    line-height: 1;
}

@media (min-width:1024px){
    .svc-icon .svc-emoji {
        font-size: 38px;
    }
}

</style>
<style>
/* ——— Industries Marquee ——— */
.section--industries .section-header .kicker {
    letter-spacing: .08em;
}

.ind-marquee {
    position: relative;
    overflow: hidden;
    padding: .5rem 0;
    --fade: 72px;

    /* desvanecido en bordes */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

.ind-track {
    display: flex;
    gap: 12px;
    align-items: center;
    width: max-content;

    /* se ajusta con JS */
    animation: ind-scroll var(--ind-duration, 40s) linear infinite;
}

.ind-marquee:hover .ind-track {
    animation-play-state: paused;
}

@keyframes ind-scroll{
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ind-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    white-space: nowrap;
    font-weight: 700;
    color: #0D2B4A;
    text-decoration: none;
}

.ind-chip .dot {
    width: .55rem;
    height: .55rem;
    border-radius: 9999px;
    background: #9aa3ad;
    flex: 0 0 auto;
}

.ind-chip .emoji {
    font-size: 1.05rem;
    line-height: 1;
}

/* Responsive + accesibilidad */
@media (max-width:680px){
    .ind-chip {
        padding: .55rem .85rem;
    }

    .section--industries h2 {
        font-size: 1.75rem;
    }
}

/* Respeta reduced-motion */
@media (prefers-reduced-motion: reduce){
    .ind-track {
        animation: none !important;
    }

    .ind-marquee {
        -webkit-mask-image: none;
        mask-image: none;
        overflow: auto;
    }
}

</style>
<style>
/* ——— Industries Marquee ——— */
.section--industries .section-header .kicker {
    letter-spacing: .08em;
}

.ind-marquee {
    position: relative;
    overflow: hidden;
    padding: .5rem 0;
    --fade: 72px;

    /* desvanecido en bordes */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

.ind-track {
    display: flex;
    gap: 12px;
    align-items: center;
    width: max-content;

    /* se ajusta con JS */
    animation: ind-scroll var(--ind-duration, 40s) linear infinite;
}

.ind-marquee:hover .ind-track {
    animation-play-state: paused;
}

@keyframes ind-scroll{
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ind-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    white-space: nowrap;
    font-weight: 700;
    color: #0D2B4A;
    text-decoration: none;
}

.ind-chip .dot {
    width: .55rem;
    height: .55rem;
    border-radius: 9999px;
    background: #9aa3ad;
    flex: 0 0 auto;
}

.ind-chip .emoji {
    font-size: 1.05rem;
    line-height: 1;
}

/* Responsive + accesibilidad */
@media (max-width:680px){
    .ind-chip {
        padding: .55rem .85rem;
    }

    .section--industries h2 {
        font-size: 1.75rem;
    }
}

/* Respeta reduced-motion */
@media (prefers-reduced-motion: reduce){
    .ind-track {
        animation: none !important;
    }

    .ind-marquee {
        -webkit-mask-image: none;
        mask-image: none;
        overflow: auto;
    }
}

</style>
/* ====== Brand size overrides ====== */
.site-header .brand {
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
    display: flex;
    align-items: center;
}

/* Tamaño del logo (más grande y legible) */
.brand-lockup {
    height: 44px !important;

    /* antes: 32px */
    width: auto;
    display: block;
}

/* Ajuste para móvil */
@media (max-width: 991px){
    .brand-lockup {
        height: 30px !important;
    }
}

/* Por si otras reglas lo limitan */
.site-header .brand .brand-logo {
    display: none !important;
}

/* oculta el span viejo, si aparece */
/* ===== Header / Brand ===== */
.site-header {
    background: #fff;
}

/* se queda blanco */
.site-header .brand {
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    line-height: 0;
    background: transparent;
}

/* Aumenta el tamaño del logo y quita límites previos */
.brand-lockup {
    height: 56px !important;

    /* ↑ antes estaba en 32px */
    max-height: none !important;
    width: auto;
    display: block;

    /* Contraste rápido: un delineado suave alrededor del SVG */
    filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
}

@media (max-width:1200px){
    .brand-lockup {
        height: 48px !important;
    }
}

@media (max-width:991px){
    .brand-lockup {
        height: 34px !important;
    }
}

/* Si existe el span viejo del logo, ocultarlo */
.site-header .brand .brand-logo {
    display: none !important;
}

/* Ajustes por si el menú se aprieta con el logo más grande */
@media (min-width:992px){
    .site-nav ul {
        gap: 18px;
    }

    /* reduce separación */
    .site-nav a {
        padding: 0 8px;
    }

    /* o baja el padding */
}

/* ===== THEME: Header oscuro ===== */
.site-header {
    background: linear-gradient(90deg,#0F2038 0%, #0B1830 100%);

    /* azul marino */
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
}

/* Links del menú en claro */
.site-header .site-nav a {
    color: #E6F0FF;

    /* texto claro */
    transition: color .2s ease;
}

.site-header .site-nav a:hover,

.site-header .site-nav .active > a {
    color: #ffffff;
}

/* Botón “Submit a Project” encima del fondo oscuro */
.site-header .btn,

.site-header .button,

.site-header .cta,

.site-header a.button-primary {
    background: #28B34B;
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(40,179,75,.35);
}

.site-header .btn:hover,

.site-header .button:hover,

.site-header .cta:hover,

.site-header a.button-primary:hover {
    filter: brightness(1.05);
}

/* Logo: tamaño y limpieza (sin sombra ahora) */
.brand-lockup {
    height: 56px !important;

    /* desktop */
    width: auto;
    display: block;
    filter: none !important;

    /* quitamos drop-shadow del paso anterior */
}

@media (max-width:1200px){
    .brand-lockup {
        height: 48px !important;
    }
}

@media (max-width:991px){
    .brand-lockup {
        height: 34px !important;
    }
}

/* Iconos/hamburguesa en móvil (si aplica) */
.nav-toggle,
.hamburger,
.hamburger span {
    background: #fff !important;
}

/* ===== Header: azul marino suave (ligero, no tan oscuro) ===== */
.site-header {
    /* cambia estos 2 colores si lo quieres más claro/oscuro */
    background: linear-gradient(90deg, #1E2E46 0%, #15253B 100%);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    border-bottom: 0;
}

/* Navegación sobre header oscuro */
.site-header .site-nav a {
    color: #E8F1FF;
    transition: color .2s ease;
}

.site-header .site-nav a:hover,

.site-header .site-nav .active > a {
    color: #FFFFFF;
}

/* Botón CTA */
.site-header .btn,

.site-header a.button-primary {
    background: #28B34B;
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(40,179,75,.35);
}

.site-header .btn:hover,

.site-header a.button-primary:hover {
    filter: brightness(1.05);
}

/* Logo: tamaño legible y sin sombras */
.brand-lockup {
    height: 56px !important;

    /* desktop */
    width: auto;
    display: block;
    filter: none !important;

    /* por si antes agregamos drop-shadow */
}

@media (max-width:1200px){
    .brand-lockup {
        height: 48px !important;
    }
}

@media (max-width:991px){
    .brand-lockup {
        height: 34px !important;
    }
}

/* Hamburguesa/iconos en móvil */
.nav-toggle,
.hamburger,
.hamburger span {
    background: #fff !important;
}

/* Por compatibilidad: oculta el span del logo si quedó en alguna página */
.site-header .brand .brand-logo {
    display: none !important;
}

/* ==== NAV: alto contraste sobre header oscuro ==== */
.site-header .site-nav a {
    color: #F3F8FF !important;

    /* casi blanco */
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);

    /* define el borde del texto */
    position: relative;
    transition: color .15s ease;
}

.site-header .site-nav a:hover,

.site-header .site-nav a:focus,

.site-header .site-nav .active > a {
    color: #FFFFFF !important;
}

/* Indicador de hover/activo debajo del link */
.site-header .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 2px;
    background: #28B34B;

    /* verde de la marca */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}

.site-header .site-nav a:hover::after,

.site-header .site-nav .active > a::after {
    transform: scaleX(1);
}

/* Un poco más de separación si lo necesitas */
@media (min-width:992px){
    .site-nav ul {
        gap: 20px;
    }

    .site-nav a {
        padding: 0 8px;
    }
}

/* ==== NAV: blanco brillante sobre header ==== */
.site-header .site-nav a {
    color: #FFFFFF !important;

    /* blanco sólido */
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);

    /* define el borde en fondo oscuro */
    transition: opacity .15s ease;
    opacity: .95;

    /* un pelín de suavidad */
}

.site-header .site-nav a:hover,

.site-header .site-nav a:focus,

.site-header .site-nav .active > a {
    opacity: 1;
}

/* Indicador verde bajo el link (opcional) */
.site-header .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 2px;
    background: #28B34B;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}

.site-header .site-nav a:hover::after,

.site-header .site-nav .active > a::after {
    transform: scaleX(1);
}

/* Mobile hamburger en blanco */
.nav-toggle,
.hamburger,
.hamburger span {
    background: #FFFFFF !important;
}

/* Por si hay submenús */
.site-header .site-nav ul ul a {
    color: #FFFFFF !important;
}

/* === OASIS header fixes (auto-applied) === */
.site-header {
    background: linear-gradient(90deg, #1E2E46 0%, #15253B 100%);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    border-bottom: 0;
}

.site-header .brand {
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 0;
    background: transparent;
    border: 0;
}

.brand-lockup {
    height: 56px !important;
    width: auto;
    display: block !important;
}

@media (max-width:1200px){
    .brand-lockup {
        height: 48px !important;
    }
}

@media (max-width:991px){
    .brand-lockup {
        height: 34px !important;
    }
}

/* Menu text in white across different nav class names */
.site-header .site-nav a,

.site-header .nav-links a,

.site-header nav a,

.site-header .header-phone {
    color: #FFFFFF !important;
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
    position: relative;
    transition: opacity .15s ease, color .15s ease;
}

.site-header .header-phone:hover {
    color: #E8F1FF !important;
    opacity: .95;
}

/* Call Us button on dark header: white outline, distinct from green CTA */
.site-header .header-call.btn-call {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,.85) !important;
    background: transparent !important;
}

.site-header .header-call.btn-call:hover {
    background: rgba(255,255,255,.12) !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.site-header .site-nav a:hover,

.site-header .nav-links a:hover,

.site-header nav a:hover,

.site-header .site-nav .active > a,

.site-header .nav-links .active > a {
    color: #FFFFFF !important;
    opacity: 1;
}

.nav-toggle,
.hamburger,
.hamburger span {
    background: #FFFFFF !important;
}

.site-header .brand .brand-logo {
    display: none !important;
}

/* === end header fixes === */
/* === HOTFIX: force dark header even if a page injects inline `background: unset` === */
.site-header {
    background: linear-gradient(90deg, #1E2E46 0%, #15253B 100%) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
    border-bottom: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

/* Ensure nav stays bright on all pages */
.site-header .nav-links a,

.site-header .site-nav a,

.site-header nav a {
    color: #FFFFFF !important;
}

/* === Mobile menu button visibility/stacking guard (global) === */
@media (max-width: 980px){
    .menu-btn {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .menu-btn span {
        width: 24px;
        height: 2px;
        margin: 0;
        border-radius: 2px;
    }

    /* Keep hamburger visible on dark header backgrounds (iOS/mobile). */
    .site-header .menu-btn span {
        background: #FFFFFF !important;
    }
}

/* ========== Service Hub: icon tiles como en index (solo CSS) ========== */
/* Pastilla base */
.svc-card .svc-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;

    /* tamaño consistente */
    border-radius: 14px;

    /* esquinas suaves tipo iOS */
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;

    /* fondo + anillo + relieve (sobrescribibles por --icon-bg) */
    background: var(--icon-bg, #eef2ff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
    0 6px 16px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.08);
}

/* Service Hub icon rendering: larger + crisper without affecting home cards */
.page-services .svc-card .svc-icon img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 4px 8px rgba(13, 59, 102, .12));
}

/* Sutileza en hover/focus, igual que tus cards */
.svc-card:hover .svc-icon,

.svc-card:focus-visible .svc-icon {
    transform: translateY(-1px);
    transition: transform .18s ease;
}

/* Paleta por servicio (no toca el HTML; usa el href del card) */
.svc-card[href*="janitorial"]           .svc-icon {
    --icon-bg: #E7F1FF;
}

/* azul suave */
.svc-card[href*="landscaping"]          .svc-icon {
    --icon-bg: #EAF7ED;
}

/* verde */
.svc-card[href*="snow-removal"]         .svc-icon {
    --icon-bg: #EAF5FF;
}

/* celeste */
.svc-card[href*="electrical"]           .svc-icon {
    --icon-bg: #FFF1E8;
}

/* ámbar */
.svc-card[href*="plumbing"]             .svc-icon {
    --icon-bg: #E8F7FF;
}

/* aqua */
.svc-card[href*="flooring"]             .svc-icon {
    --icon-bg: #EFEAFF;
}

/* lila */
.svc-card[href*="painting"]             .svc-icon {
    --icon-bg: #FFF3E8;
}

/* durazno */
.svc-card[href*="roofing-siding"]       .svc-icon {
    --icon-bg: #FFF0F0;
}

/* rojo suave */
.svc-card[href*="decks-outdoor-builds"] .svc-icon {
    --icon-bg: #F5EFE6;
}

/* madera */
.svc-card[href*="renovation"]           .svc-icon {
    --icon-bg: #EAF3FF;
}

/* azul claro */
.svc-card[href*="general-contractor"]   .svc-icon {
    --icon-bg: #EAF7FF;
}

/* celeste gris */
.svc-card[href*="handyman"]             .svc-icon {
    --icon-bg: #EEF2F7;
}

/* gris azulado */
/* Ajustes responsivos opcionales */
@media (min-width:1024px){
    .svc-card .svc-icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }

    .page-services .svc-card .svc-icon img {
        width: 84%;
        height: 84%;
    }
}

/* Service pages: industries as full clickable cards */
a.industry-card.industry-card-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 16px 14px;
    box-shadow: var(--shadow-1);
    transition: background-color .18s ease, box-shadow .18s ease;
}

:where(.section) :where(.grid) > a.industry-card.industry-card-link {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    grid-auto-rows: min-content;
    column-gap: .8rem;
    row-gap: .25rem;
}

:where(.section) :where(.grid) > a.industry-card.industry-card-link .industry-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid !important;
    place-items: center;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    transform: translateY(2px);
}

:where(.section) :where(.grid) > a.industry-card.industry-card-link h3,
:where(.section) :where(.grid) > a.industry-card.industry-card-link p {
    grid-column: 2;
}

a.industry-card.industry-card-link:hover {
    background: rgba(13,59,102,.03);
    box-shadow: 0 8px 20px rgba(10,39,70,.10);
}

a.industry-card.industry-card-link:focus-visible {
    outline: 2px solid rgba(13,59,102,.35);
    outline-offset: 2px;
}

/* ===== HOME & SERVICE HUB: ensure large tiled service icons stay large ===== */
/* Home "What we do" grid */
#home-services .svc-icon {
    width: 100% !important;
    height: clamp(190px, 20vw, 260px) !important;
    padding: clamp(10px, 1.4vw, 16px) !important;
}

#home-services .svc-icon img {
    width: 96% !important;
    height: auto !important;
    max-height: 100% !important;
}

/* Services Hub category grids (Facility, Exterior, Interior, etc.) */
.page-services .service-card.svc-card .svc-icon {
    width: 100% !important;
    height: clamp(224px, 22vw, 332px) !important;
}

.page-services .service-card.svc-card .svc-icon img {
    width: 90% !important;
    height: auto !important;
    max-height: 100% !important;
}

/* ===== LANDSCAPE: tablet/mobile horizontal — reduce padding when height is limited ===== */
@media (orientation: landscape) and (max-height: 500px) {
    .section {
        padding-top: clamp(24px, 4vw, 40px);
        padding-bottom: clamp(24px, 4vw, 40px);
    }
    body {
        padding-bottom: 68px;
    }
    .sticky-cta-bar {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
    }
}

/* Mobile panel: better height on browsers with dynamic viewport (avoids address bar jump in landscape) */
@supports (height: 100dvh) {
    .mobile-panel {
        max-height: calc(100dvh - var(--header-h, 64px));
    }
}

/* ------------------------------------------------
   9) BRAND REFRESH - HEADER / HOME / FOOTER OVERRIDES
   ------------------------------------------------ */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: rgba(255,255,255,.985) !important;
    border-bottom: 1px solid rgba(7,31,60,.06) !important;
    box-shadow: 0 12px 24px rgba(6,17,32,.05) !important;
    backdrop-filter: saturate(180%) blur(16px) !important;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #1e9fff 0%, #4db848 58%, #ffd067 100%);
    pointer-events: none;
}

.site-header .navbar {
    position: relative;
    min-height: 84px;
    max-width: 1360px;
    flex-wrap: nowrap;
    gap: 12px 18px;
    overflow: visible;
}

.site-header .brand {
    min-width: 0;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

.brand-lockup {
    width: clamp(180px, 14vw, 230px) !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    filter: none;
}

.site-header .brand .brand-logo {
    display: none !important;
}

.site-header .nav-links a,
.site-header .site-nav a,
.site-header nav a,
.site-header .header-phone {
    color: var(--navy) !important;
    font-weight: 800;
    font-size: clamp(.94rem, .8vw, 1.05rem);
    letter-spacing: .01em;
    text-shadow: none !important;
    opacity: 1;
    white-space: nowrap;
}

.site-header .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: 12px;
}

.site-header .header-call,
.site-header .header-cta {
    flex: 0 0 auto;
}

.site-header .header-call {
    margin-left: 0;
}

.site-header .nav-links a:hover,
.site-header .site-nav a:hover,
.site-header nav a:hover,
.site-header .nav-links a:focus-visible,
.site-header .site-nav a:focus-visible,
.site-header nav a:focus-visible {
    color: #0d3b66 !important;
}

.site-header .header-call.btn-call {
    color: var(--navy) !important;
    border: 1.5px solid rgba(7,31,60,.16) !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 12px 24px rgba(7,31,60,.08);
}

.site-header .header-call.btn-call:hover {
    color: var(--navy) !important;
    background: #fff !important;
    border-color: rgba(7,31,60,.26) !important;
}

.site-header .header-cta {
    box-shadow: 0 14px 28px rgba(47,190,114,.24);
}

.site-header .menu-btn span {
    background: var(--navy) !important;
}

.page-home .home-hero {
    padding-top: clamp(52px, 8vw, 96px);
}

.footer-contact-pill {
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

@media (max-width:1200px){
    .site-header .navbar {
        min-height: 82px;
        max-width: 1240px;
        gap: 10px 14px;
    }

    .brand-lockup {
        width: clamp(170px, 20vw, 215px) !important;
    }

    .site-header .nav-links {
        gap: 10px;
    }

    .site-header .header-call.btn-call,
    .site-header .header-cta {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width:1100px){
    .site-header .navbar {
        min-height: 78px;
        gap: 12px 16px;
    }

    .brand-lockup {
        width: 165px !important;
    }
}

@media (max-width:640px){
    .site-header .navbar {
        min-height: 72px;
    }

    .brand-lockup {
        width: 145px !important;
    }
}