:root {
      --brand: #4b93cd;
      --brand-dark: #353374;
      --brand-accent: #cf3c38;
      --brand-blue: #4b93cd;
      --brand-blue-dark: #353374;
      --brand-soft: #eef6fc;
      --blue-soft: #f1f0f9;
      --ink: #2c2f4f;
      --muted: #677085;
      --line: #e1e7f0;
      --radius: 1.25rem;
    }

    html { scroll-behavior: smooth; }
    section[id] { scroll-margin-top: 96px; }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: #fff;
    }

    a { text-decoration: none; }
    .navbar { backdrop-filter: blur(14px); background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(226,236,239,.9); }
    .navbar-brand { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
    .brand-logo { height: 62px; width: auto; max-width: 300px; object-fit: contain; display:block; }
    @media (max-width: 575.98px) { .brand-logo { height: 48px; max-width: 225px; } }

    .btn-brand { background: var(--brand-dark); color: #fff; border: 1px solid var(--brand-dark); border-radius: 999px; padding: .8rem 1.15rem; font-weight: 700; }
    .btn-brand:hover { background: #29275f; color: #fff; border-color: #29275f; }
    .btn-soft { background: var(--brand-soft); color: var(--brand-dark); border-radius: 999px; padding: .8rem 1.15rem; font-weight: 700; }
    .btn-outline-blue { border:1px solid #cfe0f1; color:var(--brand-blue); background:#fff; border-radius:999px; padding:.8rem 1.15rem; font-weight:700; }
    .btn-outline-blue:hover { background:var(--blue-soft); color:var(--brand-blue-dark); border-color:#b9d1e9; }
    .topbar { background:var(--brand-dark); color:#fff; font-size:.82rem; }
    .topbar a { color:#fff; opacity:.94; }
    .topbar a:hover { opacity:1; }

    .hero {
      padding: 4.5rem 0 4.5rem;
      background: #2696d4;
      color: #fff;
    }
    .hero .eyebrow,
    .hero h1,
    .hero .lead-copy,
    .hero .small,
    .hero .text-secondary {
      color: #fff !important;
    }
    .hero .lead-copy { color: rgba(255,255,255,.88) !important; }
    .hero .small { color: rgba(255,255,255,.82) !important; }
    .hero .btn-soft {
      background: #fff;
      color: var(--brand-dark);
      border-color: #fff;
    }
    .hero .btn-soft:hover {
      background: rgba(255,255,255,.9);
      color: var(--brand-dark);
    }
    .hero .btn-outline-blue {
      color: #fff;
      border-color: rgba(255,255,255,.75);
      background: transparent;
    }
    .hero .btn-outline-blue:hover {
      background: #fff;
      color: var(--brand-dark);
      border-color: #fff;
    }
    .eyebrow { color: var(--brand-dark); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
    .hero h1 { font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.055em; max-width: 780px; }
    .lead-copy { font-size: 1.1rem; color: var(--muted); max-width: 660px; }

    .hero-slider { border-radius: 2rem; overflow:hidden; box-shadow: 0 24px 70px rgba(53,51,116,.16); position:relative; }
    .hero-slide-image { width:100%; min-height:560px; height:560px; object-fit:cover; }
    .hero-slider::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(30,39,76,.08), transparent 45%); }
    .hero-static-image {
      overflow: visible !important;
      position: relative;
    }
    .hero-static-image .hero-slide-image {
      display:block;
      width:100%;
      border-radius:inherit;
    }
    @media (min-width:576px) {
      .hero-static-image { margin-bottom:31px; }
    }
    @media (max-width:575.98px) {
      .hero-static-image { margin-bottom:24px; }
    }
    .est-badge {
      position:absolute;
      left:-31px; /* approx. 25% of 124px outside on the left */
      bottom:-31px; /* approx. 25% of 124px outside on the bottom */
      z-index:6;
      width:124px;
      height:124px;
      border-radius:50%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      background:rgba(255,255,255,.98);
      border:1px solid rgba(41,153,210,.28);
      box-shadow:0 10px 28px rgba(18,77,132,.16);
      backdrop-filter:blur(5px);
      -webkit-backdrop-filter:blur(5px);
    }
    .est-badge::before {
      content:"";
      position:absolute;
      inset:6px;
      border:2px solid var(--brand);
      border-radius:50%;
      pointer-events:none;
    }
    .est-badge::after {
      content:"";
      position:absolute;
      left:50%;
      bottom:18px;
      width:28px;
      height:2px;
      border-radius:999px;
      background:var(--brand-accent);
      transform:translateX(-50%);
      pointer-events:none;
    }
    .est-badge > * { position:relative; z-index:1; }
    .est-badge .est {
      color:var(--brand-dark);
      font-weight:800;
      letter-spacing:.08em;
      font-size:.66rem;
      line-height:1;
      margin-bottom:.22rem;
    }
    .est-badge .year {
      color:var(--brand-dark);
      font-size:1.95rem;
      line-height:.95;
      font-weight:800;
      letter-spacing:-.035em;
    }
    .est-badge .since {
      display:block;
      color:var(--brand);
      font-size:.54rem;
      line-height:1.15;
      font-weight:800;
      text-transform:uppercase;
      margin-top:.32rem;
      max-width:88px;
    }
    @media (max-width:575.98px) {
      .est-badge {
        width:96px;
        height:96px;
        left:-24px;
        bottom:-24px;
      }
      .est-badge::before { inset:5px; }
      .est-badge::after { bottom:14px; width:22px; }
      .est-badge .est { font-size:.52rem; margin-bottom:.18rem; }
      .est-badge .year { font-size:1.45rem; }
      .est-badge .since { font-size:.42rem; max-width:70px; margin-top:.22rem; }
    }

    .section { padding: 5rem 0; }
    .section-soft { background: #f7fbfc; }
    .section-title { max-width: 720px; }
    .section-title h2 { letter-spacing: -.035em; font-size: clamp(2rem, 4vw, 3.1rem); }
    .section-title p { color: var(--muted); }

    .trust-card, .service-card, .faq-shell, .contact-card { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
    .trust-card { padding: 1.25rem; height: 100%; }
    .trust-icon { width: 44px; height: 44px; border-radius: 14px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-size:1.15rem; }

    .service-card { overflow: hidden; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
    .service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(21,74,87,.10); }
    .service-card img { width:100%; height:220px; object-fit:cover; }
    .service-card .body { padding: 1.3rem; }
    .service-card p { color: var(--muted); }

    .about-image { width:100%; min-height:500px; object-fit:cover; border-radius:1.6rem; }
    .check { display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1rem; }
    .check i { color:var(--brand); font-size:1.1rem; margin-top:.15rem; }

    .faq-shell { overflow:hidden; }
    .accordion-button { font-weight: 700; color: var(--ink); }
    .accordion-button:not(.collapsed) { background: var(--brand-soft); color: var(--brand-dark); box-shadow:none; }
    .accordion-button:focus { box-shadow:none; }

    .contact-card { padding: 1.5rem; }
    .booking-card { border: 1px solid var(--line); background:#fff; border-radius:1.5rem; padding:clamp(1.35rem,3vw,2rem); box-shadow:0 20px 60px rgba(21,74,87,.08); }
    .form-label { font-weight:700; font-size:.9rem; }
    .form-control, .form-select { min-height:52px; border-radius:.85rem; border-color:var(--line); padding:.75rem 1rem; }
    .form-control:focus, .form-select:focus { border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(75,147,205,.14); }
    .contact-link { color:var(--ink); }
    .contact-link:hover { color:var(--brand); }
    .whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:1040; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#25D366; color:#fff; font-size:1.75rem; box-shadow:0 12px 34px rgba(0,0,0,.22); transition:transform .2s ease; }
    .whatsapp-float:hover { color:#fff; transform:translateY(-3px); }
    .contact-strip { background:var(--brand-dark); color:#fff; }
    .contact-strip a { color:#fff; opacity:.94; }
    .contact-strip a:hover { opacity:1; }
    .map-card { min-height: 360px; border-radius: var(--radius); background: linear-gradient(135deg, #eef6fc, #f3f1fa); position:relative; overflow:hidden; border:1px solid var(--line); }
    .map-grid { position:absolute; inset:0; opacity:.5; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px,transparent 1px); background-size:38px 38px; }
    .map-pin { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:2rem; }
    .map-pin i { font-size:2.2rem; color:var(--brand); }

    footer { border-top:1px solid var(--line); padding:2rem 0; color:var(--muted); }

    @media (max-width: 991.98px) {
      .hero { padding-top: 3.5rem; }
      .hero-slide-image { min-height: 430px; height:430px; }
    }

/* Hero trust strip */
.trust-strip {
  background: var(--brand-dark);
  color: #fff;
  padding-top: 2.25rem;
}
.trust-strip .trust-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.trust-strip .trust-card .text-secondary {
  color: rgba(255,255,255,.72) !important;
}
.trust-strip .trust-icon {
  background: rgba(255,255,255,.12);
  color: #fff;
}

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

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

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


/* =====================================================
   GOOGLE RATING
===================================================== */

.google-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: .7rem;

    width: fit-content;

    padding: .62rem .78rem .62rem .62rem;

    background: rgba(255,255,255,.97);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 1rem;

    color: var(--brand-dark);

    box-shadow:
        0 12px 34px rgba(32,55,94,.14);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform .22s ease,
        box-shadow .22s ease;

    animation:
        googleRatingEntrance .65s
        cubic-bezier(.2,.75,.3,1)
        .45s both;
}

.google-rating-badge:hover {
    color: var(--brand-dark);

    transform: translateY(-2px);

    box-shadow:
        0 16px 42px rgba(32,55,94,.19);
}


/* Google logo */

.google-logo {
    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: .72rem;

    background: #fff;
    border: 1px solid #edf0f4;

    box-shadow:
        0 3px 10px rgba(0,0,0,.06);
}

.google-logo svg {
    display: block;

    width: 22px;
    height: 22px;
}


/* Rating content */

.google-rating-content {
    display: flex;
    flex-direction: column;

    gap: .22rem;

    line-height: 1;
}

.google-rating-top {
    display: flex;
    align-items: center;

    gap: .48rem;
}

.google-rating-top strong {
    color: var(--brand-dark);

    font-size: 1.05rem;
    font-weight: 800;

    letter-spacing: -.02em;
}

.google-stars {
    color: #fbbc04;

    font-size: .82rem;

    letter-spacing: .03em;
}

.google-rating-label {
    color: #687384;

    font-size: .64rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .075em;
}

.google-rating-arrow {
    margin-left: .1rem;

    color: #87919e;

    font-size: .78rem;
}


/* =====================================================
   HERO BACKGROUND MOTION
===================================================== */

.hero-motion {
    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;
}


/* Large outline circles */

.hero-orbit {
    position: absolute;

    display: block;

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 50%;
}

.hero-orbit-1 {
    width: 360px;
    height: 360px;

    top: -210px;
    left: 6%;

    animation:
        heroOrbitFloat
        13s
        ease-in-out
        infinite;
}

.hero-orbit-2 {
    width: 230px;
    height: 230px;

    right: 35%;
    bottom: -155px;

    border-color:
        rgba(255,255,255,.10);

    animation:
        heroOrbitFloat
        10s
        ease-in-out
        1s
        infinite reverse;
}


/* Tiny floating dots */

.hero-dot {
    position: absolute;

    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.46);

    box-shadow:
        0 0 0 7px
        rgba(255,255,255,.05);
}

.hero-dot-1 {
    top: 19%;
    left: 48%;

    animation:
        heroDotFloat
        8s
        ease-in-out
        infinite;
}

.hero-dot-2 {
    left: 8%;
    bottom: 18%;

    width: 5px;
    height: 5px;

    animation:
        heroDotFloat
        10s
        ease-in-out
        1.4s
        infinite reverse;
}


/* =====================================================
   HERO ENTRANCE ANIMATION
===================================================== */

.hero .eyebrow {
    animation:
        heroContentEntrance
        .6s
        cubic-bezier(.2,.75,.3,1)
        both;
}

.hero h1 {
    animation:
        heroContentEntrance
        .65s
        cubic-bezier(.2,.75,.3,1)
        .07s both;
}

.hero .lead-copy {
    animation:
        heroContentEntrance
        .65s
        cubic-bezier(.2,.75,.3,1)
        .14s both;
}

.hero-actions {
    animation:
        heroContentEntrance
        .65s
        cubic-bezier(.2,.75,.3,1)
        .21s both;
}

.hero-location {
    animation:
        heroContentEntrance
        .65s
        cubic-bezier(.2,.75,.3,1)
        .36s both;
}

.hero-static-image {
    animation:
        heroImageEntrance
        .85s
        cubic-bezier(.2,.75,.3,1)
        .1s both;
}


/* =====================================================
   KEYFRAMES
===================================================== */

@keyframes heroContentEntrance {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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


@keyframes heroImageEntrance {

    from {
        opacity: 0;

        transform:
            translateY(14px)
            scale(.99);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes googleRatingEntrance {

    from {
        opacity: 0;

        transform:
            translateY(10px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes heroOrbitFloat {

    0%,
    100% {
        transform:
            translate3d(0,0,0);
    }

    50% {
        transform:
            translate3d(14px,16px,0);
    }
}


@keyframes heroDotFloat {

    0%,
    100% {
        transform:
            translateY(0);

        opacity: .40;
    }

    50% {
        transform:
            translateY(-15px);

        opacity: .78;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 575.98px) {

    .google-rating-badge {
        padding:
            .54rem
            .65rem
            .54rem
            .54rem;

        gap: .58rem;
    }

    .google-logo {
        width: 35px;
        height: 35px;
    }

    .google-logo svg {
        width: 20px;
        height: 20px;
    }

    .google-rating-top strong {
        font-size: .98rem;
    }

    .google-stars {
        font-size: .75rem;
    }

    .google-rating-label {
        font-size: .59rem;
    }


    .hero-orbit-1 {
        width: 280px;
        height: 280px;

        top: -165px;
        left: -90px;
    }

    .hero-orbit-2 {
        width: 180px;
        height: 180px;

        right: -70px;
        bottom: 15%;
    }

}


/* =====================================================
   REDUCED MOTION ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero .eyebrow,
    .hero h1,
    .hero .lead-copy,
    .hero-actions,
    .hero-location,
    .hero-static-image,
    .google-rating-badge,
    .hero-orbit,
    .hero-dot {
        animation: none !important;
    }

}
/* =====================================================
   MOBILE OVERFLOW + NAVIGATION REFINEMENTS
   Scoped to preserve the existing desktop/live design.
===================================================== */

/* Prevent decorative/offset elements from creating a page-level x-axis. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/* Keep intrinsically wide media from exceeding their containing column. */
img,
svg,
iframe {
    max-width: 100%;
}

.row > * {
    min-width: 0;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 991.98px) {
    #mainNavbar .container {
        position: relative;
    }

    #mainNavbar .navbar-toggler {
        width: 46px;
        height: 46px;
        padding: 0;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 14px;
        background: var(--brand-soft);
        color: var(--brand-dark);
        transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }

    #mainNavbar .navbar-toggler:hover {
        background: #e2f0fa;
    }

    #mainNavbar .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(75,147,205,.16);
    }

    #mainNavbar .navbar-toggler[aria-expanded="true"] {
        background: var(--brand-dark);
        color: #fff;
    }

    #mainNavbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        filter: brightness(0) invert(1);
    }

    #mainNavbar #mainNav {
        position: absolute;
        top: calc(100% + .5rem);
        left: .75rem;
        right: .75rem;
        z-index: 1050;
        margin: 0;
        padding: .7rem;
        border: 1px solid rgba(225,231,240,.95);
        border-radius: 1.25rem;
        background: rgba(255,255,255,.985);
        box-shadow: 0 20px 55px rgba(44,47,79,.14);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    #mainNavbar #mainNav .navbar-nav {
        align-items: stretch;
        gap: .15rem;
    }

    #mainNavbar #mainNav .nav-link {
        padding: .82rem .9rem;
        border-radius: .85rem;
        color: var(--ink);
        font-weight: 700;
        transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
    }

    #mainNavbar #mainNav .nav-link:hover,
    #mainNavbar #mainNav .nav-link:focus {
        background: var(--brand-soft);
        color: var(--brand-dark);
        padding-left: 1rem;
    }

    #mainNavbar #mainNav .nav-item.ms-lg-2 {
        margin-top: .35rem;
    }

    #mainNavbar #mainNav .btn-brand {
        width: 100%;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    #mainNavbar .container {
        flex-wrap: nowrap;
    }

    #mainNavbar .navbar-brand {
        min-width: 0;
        margin-right: .65rem;
    }

    #mainNavbar .brand-logo {
        max-width: min(225px, calc(100vw - 92px));
    }
}