/* =========================================================
   CLEAN CONSOLIDATED CSS — NO MEDIA QUERIES
   Existing desktop overrides are merged into the base rules.
   Responsive media queries will be added separately later.
========================================================= */




* {
    box-sizing: border-box;
}

:root {
    --ink: #111214;
    --muted: #74767b;
    --line: #e8e8eb;
    --bg: #f5f5f7;
    --green: #14bf61;
    --r: 25px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.brand-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.brand-text small {
    font-size: 8px;
    letter-spacing: 1.35px;
    color: #777;
}

.mobile-menu.open {
    display: block;
}

.mobile-menu a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border-radius: 12px;
    color: #171717;
    text-decoration: none;
    font-size: 14px;
}

.mobile-menu a:active {
    background: #f5f5f7;
}

.pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 99px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    background: #ffffff0d;
    backdrop-filter: blur(8px);
}

h1,h2,h3,p {
    margin-top: 0;
}

/* =========================================
   SERVICE TITLE
========================================= */

.service-card__title {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 52px;

    display: block;
    width: auto;
    margin: 0;

    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.2px;
}

.service-card__description {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 14px;

    display: block;
    width: auto;
    margin: 0;
    padding-right: 25px;

    color: #e9eaee;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.service-card::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 35% 0 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, .35) 35%,
        rgba(0, 0, 0, .85) 100%
    );
    pointer-events: none;
}

/* =========================================
   SERVICE PRICE
========================================= */

.service-price {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
    color: #111214;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.service-price small {
    color: #85858b;
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 500;
}



.hero-content>p {
    font-size: 15px;
    color: #f1f1f1;
    margin: 0;
}

.hero-benefits span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hero-benefits i {
    font-size: 22px;
    flex-shrink: 0;
}

.action i {
    font-size: 21px;
}

.action-call {
    background: #050505;
    color: #fff;
    border: 1px solid #fff;
}

.action-whatsapp {
    background: #e9f5ee;
    color: #101010;
    border: 1px solid #e6e6e6;
}

.action-whatsapp i {
    color: var(--green);
    font-size: 24px;
}

.avatar-stack {
    display: flex;
    align-items: center;
    padding-left: 2px;
}

.avatar-stack span {
    width: 31px;
    height: 31px;
    margin-left: -3px;
    border: 2px solid white;
    background: #dedee2;
    color: #242424;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.avatar-stack span:nth-child(2) {
    background: #222;
    color: #ffca43;
}

.avatar-stack span:nth-child(3) {
    background: #e3e8e2;
    color: #222;
}

.rating-card strong {
    font-size: 14px;
}

.stars {
    color: #f5b400;
    letter-spacing: 1px;
    font-size: 14px;
}

.rating-card small {
    display: block;
    font-size: 11px;
    margin-top: 3px;
    color: #5d5d5d;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.section-title small,.booking-card>small {
    font-size: 9px;
    letter-spacing: 1.35px;
    font-weight: 700;
    color: #8a8b90;
}

.view-link {
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    white-space: nowrap;
}

.view-link i {
    margin-left: 7px;
}

.service-rail::-webkit-scrollbar {
    display: none;
}

.service-image {
    position: absolute;
    inset: 0 0 36px;
    overflow: hidden;
}

.service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}




.service-card:after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent,#f7f7f8 80%);
}

.round-arrow {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e4e4e6;
    font-size: 12px;
}

.quick-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.quick-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.quick-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.75) 52%, rgba(0,0,0,.12));
}

.pill-glass {
    font-size: 9px;
    padding: 6px 10px;
}

.why-section {
    padding-top: 31px;
}

.feature-card>i {
    font-size: 25px;
    margin-bottom: 14px;
}

.feature-card h3 {
    font-size: 13px;
    margin: 0 0 5px;
    letter-spacing: -.2px;
}

.feature-card p {
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    margin: 0;
}

.process-section {
    padding-top: 30px;
}

.process-step {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.step-number {
    width: 42px;
    height: 42px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #080808;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.process-step>i {
    font-size: 24px;
    margin-bottom: 9px;
}

.process-arrow {
    font-size: 13px;
    color: #a3a3a8;
    margin-top: -39px;
}

.photo-label {
    position: absolute;
    left: 13px;
    bottom: 13px;
    background: #ffffffed;
    border-radius: 99px;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 700;
}

.photo-label i {
    margin-right: 5px;
}

.field>i {
    font-size: 15px;
    width: 15px;
    text-align: center;
    flex-shrink: 0;
}

.field input,.field select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: 12px "DM Sans", sans-serif;
    color: #222;
    appearance: none;
    padding: 6px 8px;
}

option[value] {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 8px;
    color: #111214;
    background: #fff;
}

.field input::placeholder {
    color: #9a9aa0;
}

.field-chevron {
    font-size: 10px !important;
}

.book-submit {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    background: #080808;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 5px;
    padding: 0 13px;
}

.book-submit .fa-whatsapp {
    font-size: 21px;
}

.book-submit .fa-arrow-right {
    margin-left: auto;
    margin-right: 6px;
}

.privacy-note {
    font-size: 10px;
    line-height: 1.4;
    color: #8a8a90;
    margin: 12px 2px 0;
}

.privacy-note i {
    margin-right: 5px;
}

.faq-icon {
    width: 40px;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f1f3;
    font-size: 18px;
}

.faq-section details {
    border-bottom: 1px solid #ededf0;
}

.faq-section details:first-of-type {
    border-top: 1px solid #ededf0;
}

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

.faq-section summary i {
    font-size: 12px;
    transition: transform .2s;
}

.faq-section details[open] summary i {
    transform: rotate(45deg);
}

.faq-section details p {
    font-size: 12px;
    line-height: 1.6;
    color: #777;
    padding: 0 15px 13px 1px;
    margin: 0;
}

.trust-icon {
    width: 43px;
    height: 43px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 15px;
    background: #fff;
    font-size: 20px;
}

.trust-note strong {
    font-size: 12px;
}

.trust-note p {
    font-size: 10px;
    color: #777;
    line-height: 1.4;
    margin: 5px 0 0;
}

.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #888a90;
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    min-height: 50px;
}

.tab i {
    font-size: 19px;
}

.tab.active {
    color: #111;
}

.tab.active i {
    transform: translateY(-1px);
}

.bottom-cta, .contact-dock {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-dock a> i {
    font-size: 20px;
}

.dock-whatsapp>i {
    color: var(--green);
    font-size: 23px;
}

.bottom-cta.is-visible, .contact-dock.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.directory-card:active {
    transform: scale(.98);
}

.directory-card small {
    font-size: 11px;
    line-height: 1.45;
    color: #777;
}

.directory-card .directory-link {
    font-size: 11px;
    font-weight: 700;
    margin-top: auto;
}

.directory-card .directory-link i {
    margin-left: 5px;
}

.page-breadcrumb a {
    color: #333;
    text-decoration: none;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 24px 24px 50px;
    background: radial-gradient(ellipse at top, #e9e9ec, #f6f6f8 65%);
}

.app-shell {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 20px 70px #12121212;
    position: relative;
    width: 100%;
    max-width: 1200px;
    min-height: 0;
    margin: 0 auto;
    padding-bottom: 35px;
    border-radius: 30px;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,.94);
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid #f5f5f5;
    backdrop-filter: blur(20px);
    height: 86px;
    padding: 0 38px;
}

.menu-button {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    border: 1px solid #e2e3e7;
    background: #fff;
    font-size: 19px;
    align-items: center;
    justify-content: center;
    display: none;
}

.mobile-menu {
    position: absolute;
    z-index: 40;
    top: 72px;
    left: 12px;
    right: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 0 18px 45px #0002;
    display: none !important;
}

.brand-text strong {
    font: 800 12px Manrope,sans-serif;
    letter-spacing: -.45px;
    font-size: 14px;
}

.hero-card {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #171717;
    min-height: 460px;
    margin: 14px;
    border-radius: 28px;
}

.hero-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
}

.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.70) 38%, rgba(0,0,0,.12) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 590px;
    padding: 40px 38px;
}

.hero-content h1 {
    font: 800 clamp(39px, 5vw, 60px)/.99 Manrope,sans-serif;
    letter-spacing: -2.3px;
    margin: 15px 0 13px;
    max-width: 500px;
}

.hero-content > p {
    font-size: 17px;
}

.hero-benefits {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.hero-benefits b {
    line-height: 1.3;
    font-weight: 600;
    font-size: 11px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    max-width: 450px;
    margin-top: 28px;
}

.action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    border-radius: 16px;
    padding: 0 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 16px #0002;
    min-height: 58px;
    padding: 0 30px;
}

.rating-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px 16px;
    background: rgba(255,255,255,.94);
    color: #141414;
    border-radius: 19px;
    position: relative;
    width: 350px;
    transform: none;
    box-shadow: 0 6px 30px #0002;
    margin-top: 20px;
    display: none;
}

.section {
    padding: 40px 38px 0;
}

.section-title h2 {
    font: 800 25px/1.12 Manrope,sans-serif;
    letter-spacing: -1.1px;
    margin: 5px 0 0;
    font-size: 30px;
}

.service-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 20px 7px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
}

.service-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 12px 14px;
    background: #f0f0f2;
    color: #111;
    text-decoration: none;
    scroll-snap-align: start;
    min-width: 0;
    min-height: 205px;
    flex: initial;
    border-radius: 20px;
}

.service-card strong {
    position: relative;
    z-index: 1;
    line-height: 1.35;
    max-width: 92px;
    font-size: 13px;
}

/* ================================
   HOB BRAND SECTION
================================ */

.brand-section {
    padding: 30px 38px 0;
    min-width: 0;
}

.brand-heading {
    margin-bottom: 20px;
}

.brand-heading small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--muted);
    margin-bottom: 7px;
}

.brand-heading h2 {
    font-size: 23px;
    font-weight: 750;
    color: var(--ink);
    margin: 0 0 6px;
}

.brand-heading p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

.brand-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.brand-card {
    display: flex;
    flex: 0 0 calc((100% - 48px) / 5);
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 82px;
    padding: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.brand-card img {
    display: block;
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    height: 42px;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.brand-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    font-size: 12px;
    color: var(--muted);
}

.brand-note i {
    color: #21865b;
    font-size: 14px;
}

/* Brand logo responsive rules are consolidated at the end of this file. */

.quick-book {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    text-decoration: none;
    background: #111;
    margin: 32px 38px 0;
    min-height: 215px;
}

.quick-content {
    position: relative;
    padding: 30px 34px;
}

.quick-book h2 {
    font: 800 25px/1.08 Manrope,sans-serif;
    letter-spacing: -.9px;
    margin: 13px 0 8px;
    font-size: 32px;
}

.quick-book p {
    color: #eee;
    margin: 0;
    font-size: 14px;
}

.quick-arrow {
    position: absolute;
    width: 35px;
    height: 35px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff70;
    border-radius: 50%;
    right: 30px;
    bottom: 30px;
}

.feature-grid {display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.feature-card {
    background: #f2f2f4;
    border-radius: 20px;
    width: auto;
    min-height: 155px;
    padding: 22px;
}

.process-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 850px;
    margin: 0 auto;
    gap: 12px;
}

.process-step h3 {
    margin: 0 0 4px;
    font-size: 13px;
}

.process-step p {
    color: #777;
    line-height: 1.35;
    margin: 0;
    font-size: 11px;
}

.booking-layout {
    display: flex;
    border: 1px solid #eee;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px #00000008;
    margin: 35px 38px 0;
    flex-direction: row;
    min-height: 380px;
}

.booking-photo {
    position: relative;
    overflow: hidden;
    width: 40%;
    min-height: 380px;
}

.booking-photo > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.booking-card {
    flex: 1;
    padding: 32px;
}

.booking-card h2 {
    font: 800 25px Manrope,sans-serif;
    letter-spacing: -1px;
    margin: 6px 0 17px;
    font-size: 30px;
}

.field {
    border: 1px solid #e0e0e5;
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    margin-bottom: 9px;
    color: #222;
    background: #fff;
    min-height: 51px;
}

.faq-section {
    padding-top: 40px;
}

.faq-section summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 20px 1px;
    font-size: 14px;
}

.trust-note {
    background: #f2f2f4;
    border-radius: 20px;
    display: flex;
    gap: 13px;
    align-items: center;
    margin: 32px 38px 0;
    padding: 23px;
}

/* Bottom Navigation */
.tab-bar {
    position: fixed;
    z-index: 9999;

    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    display: flex !important;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    width: min(100%, 480px);
    min-height: 65px;

    padding: 6px 9px calc(6px + env(safe-area-inset-bottom));

    background: rgba(255,255,255,.96);
    border-top: 1px solid #e9e9ed;

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

    box-shadow: 0 -7px 25px #00000008;
}

/* Navigation Items */
.tab-bar .tab {
    flex: 1;
    min-width: 0;
    min-height: 50px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    text-decoration: none;
    color: #888a90;

    font-size: 10px;
    font-weight: 600;
}

.tab-bar .tab i {
    font-size: 19px;
}

.tab-bar .tab.active {
    color: #0B2D50;
}

/* Content spacing */
body {
    padding-bottom: 100px;
}

.contact-dock {
    display: flex;
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: min(440px, calc(100% - 40px));
    padding: 8px;
    gap: 8px;
    background: rgba(255,255,255,.96);
    border-radius: 20px;
    box-shadow: 0 10px 35px #0002;
    backdrop-filter: blur(20px);
}

.contact-dock a {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 15px;
    text-decoration: none;
    justify-content: space-evenly;
}

.dock-call {
    background: #080808;
    color: #fff;
}

.dock-whatsapp {
    background: #e9f5ee;
    color: #111;
}

.dock-whatsapp > i {
    color: var(--green);
}

.contact-dock a > i {
    font-size: 22px;
}

.contact-dock b, .contact-dock small {
    display: block;
}

.contact-dock b {
    font-size: 12px;
}

.contact-dock small {
    opacity: .72;
    font-size: 10px;
    margin-top: 3px;
}

.bottom-cta {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: 440px;
    bottom: 100px;
}

.service-directory {display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 16px;
}

.directory-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #ececf0;
    border-radius: 19px;
    color: #111;
    text-decoration: none;
    background: #fff;
    transition: transform .2s ease,box-shadow .2s ease;
    min-width: 0;
    flex: initial;
    padding: 16px;
}

.directory-art {
    height: 155px;
    overflow: hidden;
    border-radius: 14px;
}

.directory-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.directory-card strong {
    font: 800 14px Manrope,sans-serif;
    font-size: 15px;
}

.service-intro {
    padding: 32px 38px 0;
}

.service-intro h2 {
    font: 800 24px/1.12 Manrope,sans-serif;
    letter-spacing: -.8px;
    margin: 6px 0 0;
    font-size: 30px;
}

.service-intro p {
    line-height: 1.7;
    color: #686970;
    margin: 12px 0 0;
    font-size: 14px;
}

.page-breadcrumb {
    font-size: 10px;
    color: #777;
    padding: 20px 38px 0;
}


/* =========================================================
   RESPONSIVE MEDIA QUERIES
   Order: Desktop → Tablet → Mobile → Small Mobile
   Base/shared styles above remain unchanged.
========================================================= */

/* =========================================================
   1. DESKTOP — 1024px and above
========================================================= */


/* =========================================================
   2. TABLET — 600px to 1023px
========================================================= */


/* =========================================================
   3. MOBILE — 376px to 599px
========================================================= */


/* =========================================================
   4. SMALL MOBILE — 361px to 375px
========================================================= */


/* =========================================================
   5. EXTRA-SMALL MOBILE — 360px and below
========================================================= */


/* =========================================================
   RESPONSIVE ACCESSIBILITY / OVERFLOW SAFETY
========================================================= */



/* =========================================================
   FLEXBOX LAYOUTS
   All former CSS Grid layouts use Flexbox.
   Adjust the column counts here in one place.
========================================================= */

/* Centered icon / compact controls */
.brand-icon,
.avatar-stack span,
.round-arrow,
.step-number,
.faq-icon,
.trust-icon,
.quick-arrow,
.menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Service cards */
.service-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.service-rail > .service-card {
    flex: 1 1 calc((100% - 64px) / 5);
    min-width: 0;
}

/* Brand logos */
.brand-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.brand-grid > .brand-card {
    flex: 1 1 calc((100% - 48px) / 5);
    min-width: 0;
}

/* Feature cards */
.feature-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.feature-grid > .feature-card {
    flex: 1 1 calc((100% - 45px) / 4);
    min-width: 0;
}

/* Service directory cards */
.service-directory {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.service-directory > .directory-card {
    flex: 1 1 calc((100% - 48px) / 4);
    min-width: 0;
}

/* Two-column benefit rows on smaller screens */
.hero-benefits {
    display: flex;
    flex-wrap: nowrap;
}

.hero-benefits > span {
    flex: 1 1 calc((100% - 10px) / 2);
    min-width: 0;
}

/* Two-column process cards on smaller screens */
.process-rail {
    display: flex;
    flex-wrap: nowrap;
}

.process-rail > .process-step {
    flex: 1 1 calc((100% - 12px) / 2);
    min-width: 0;
}

/* =========================================================
   RESPONSIVE FLEX SIZING
========================================================= */










/* =========================================================
   SERVICE DETAILS POPUP
   Content-driven height with safe viewport scrolling.
========================================================= */

html.service-modal-open,
body.service-modal-open {
    overflow: hidden !important;
}

.service-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: opacity .22s ease, visibility .22s ease;
}

.service-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.service-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(10, 16, 24, .62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.service-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: min(760px, 100%);
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    min-height: 0;
    margin: auto;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 25px;
    background: #fff;
    color: #111214;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    outline: none;
    transform: translateY(12px) scale(.985);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}

.service-modal.is-open .service-modal__panel {
    transform: translateY(0) scale(1);
}

.service-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #111;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .13);
    cursor: pointer;
}

.service-modal__hero {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: clamp(150px, 25vw, 230px);
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: #eef0f2;
}

.service-modal__hero::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(0deg, rgba(0, 0, 0, .38), transparent 62%);
    pointer-events: none;
}

.service-modal__hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #eef0f2;
}

.service-modal__eyebrow {
    position: absolute;
    left: 16px;
    bottom: 13px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 99px;
    background: rgba(255, 255, 255, .94);
    color: #222;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;
}

.service-modal__eyebrow i {
    color: #0b6d43;
}

.service-modal__body {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 20px 22px 22px;
    overflow: visible;
}

.service-modal__location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #777a81;
    font-size: 10px;
    font-weight: 600;
}

.service-modal__location i {
    color: #0b2d50;
}

.service-modal__body h2 {
    margin: 8px 0;
    color: #111214;
    font: 800 clamp(22px, 4vw, 29px)/1.12 Manrope, sans-serif;
    letter-spacing: -.8px;
    overflow-wrap: anywhere;
}

.service-modal__body > p {
    margin: 0;
    color: #666a72;
    font: 400 13px/1.6 "DM Sans", sans-serif;
    overflow-wrap: anywhere;
}

.service-modal__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 17px;
    flex-direction: column;
}

.service-modal__actions a {
    display: flex;
    flex: 1 1 180px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 13px;
    text-decoration: none;
    font: 700 13px "DM Sans", sans-serif;
    transition: transform .18s ease, filter .18s ease;
}

.service-modal__actions a:active {
    transform: scale(.98);
}

.service-modal__call {
  background: #050505;
    color: #fff;
    border: 1px solid #fff;

}

.service-modal__whatsapp {
    border: 1px solid #d5efdf;
    background: #eaf8ef;
    color: #123d28;
}

.service-modal__whatsapp i {
    color: #18a957;
    font-size: 19px;
}

.service-modal__related-wrap {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-width: 0;
    margin-top: 19px;
    padding-top: 14px;
    overflow: hidden;
    border-top: 1px solid #eceef1;
}

.service-modal__related-heading {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.service-modal__related-heading strong {
    color: #111214;
    font: 800 12px Manrope, sans-serif;
}

.service-modal__related-heading span {
    color: #858991;
    font: 500 9px "DM Sans", sans-serif;
    text-align: right;
}

.service-modal__related {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 9px;
    width: 100%;
    min-width: 0;
    padding: 1px 1px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
}

.service-modal__related::-webkit-scrollbar {
    display: none;
}

.service-modal__related-item {
    display: flex;
    flex: 0 0 88px;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e6e8ec;
    border-radius: 11px;
    background: #fff;
    color: #17181a;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
    font: inherit;
}

.service-modal__related-item.is-active {
    border-color: #0b2d50;
    background: #f0f5f9;
    box-shadow: 0 0 0 1px #0b2d50 inset;
}

.service-modal__related-item img {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 55px;
    object-fit: cover;
    object-position: center;
    background: #f0f0f2;
}

.service-modal__related-item span {
    display: block;
    min-height: 34px;
    padding: 6px;
    color: inherit;
    font: 700 9px/1.3 "DM Sans", sans-serif;
    overflow-wrap: anywhere;
}

.service-modal__related-item:focus-visible,
.service-modal__close:focus-visible,
.service-modal__actions a:focus-visible {
    outline: 3px solid rgba(11, 45, 80, .35);
    outline-offset: 2px;
}

/* Mobile */


/* Extra-small phones */


/* Respect reduced-motion settings */



/* =========================================================
   FINAL BRAND LOGO RESPONSIVE FIX
   One consistent Flexbox system for every viewport.
   Desktop: 5 columns | Laptop: 4 | Tablet: 4
   Mobile: 3 | Small phones: 2
========================================================= */

.brand-section {
    width: 100%;
    min-width: 0;
}

.brand-grid {
    display: flex !important;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.brand-grid > .brand-card {
    display: flex;
    flex: 0 0 calc((100% - 48px) / 5);
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 82px;
    padding: 12px;
    overflow: hidden;
}

.brand-grid > .brand-card img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 42px;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

/* Laptop and small desktop */


/* Tablet */


/* Large mobile */


/* Small mobile */


/* Very narrow phones */




/* =========================================================
   FINAL SERVICE RAIL + IMAGE BOTTOM OVERLAY
   This block intentionally comes last to override legacy
   service-card rules and responsive declarations above.
========================================================= */

.service-rail {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
}

.service-rail > .service-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 1 calc((100% - 42px) / 4);
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    min-width: 0;
    min-height: 235px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: #ececec;
    color: #fff;
    text-decoration: none;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

/* Full-card image: text sits over the lower part of the image. */
.service-rail > .service-card > .service-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #292929;
}

.service-rail > .service-card > .service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform .45s ease;
}

/* Bottom gradient keeps white copy readable over every image. */
.service-rail > .service-card::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 25% 0 0;
    display: block;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .12) 28%,
        rgba(0, 0, 0, .66) 66%,
        rgba(0, 0, 0, .92) 100%
    );
    pointer-events: none;
}

/* Title: bottom overlay, above description. */
.service-rail > .service-card > .service-card__title,
.service-rail > .service-card > strong.service-card__title {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 64px;
    left: 12px;

    display: block;
    width: auto;
    max-width: none;
    margin: 0;

    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.2px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/* Description: directly below the title. */
.service-rail > .service-card > .service-card__description {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 43px;
    left: 12px;

    display: -webkit-box;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;

    overflow: hidden;
    color: rgba(255, 255, 255, .88);
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Price stays at the lower-left; arrow stays at lower-right. */
.service-rail > .service-card > .service-price {
    position: absolute;
    z-index: 3;
    right: 48px;
    bottom: 12px;
    left: 12px;

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;

    width: fit-content;
    max-width: calc(100% - 66px);
    margin: 0;
    padding: 0;

    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.service-rail > .service-card > .service-price small {
    color: rgba(255, 255, 255, .82);
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 500;
}

/* Arrow button remains above the image and gradient. */
.service-rail > .service-card > .round-arrow {
    position: absolute;
    z-index: 4;
    right: 10px;
    bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;

    width: 30px;
    height: 30px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;

    background: rgba(255, 255, 255, .96);
    color: #111214;
    font-size: 11px;
    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

/* Hover and keyboard states. */


.service-rail > .service-card:active {
    transform: scale(.985);
}

.service-rail > .service-card:focus-visible {
    outline: 3px solid rgba(11, 45, 80, .55);
    outline-offset: 3px;
}

/* Desktop: four cards across. */


/* Tablet: three cards across. */


/* Mobile: two cards across. */


/* Very narrow phones: preserve two-column cards without text collisions. */


/* Respect the user's reduced-motion preference. */




/* =========================================================
   SERVICE MODAL — PREMIUM NAVY THEME
   Final override layer for chimney and hob service popups.
========================================================= */
.service-modal {
    z-index: 100000;
    align-items: center;
    padding: 14px;
}
.service-modal__panel {
    width: min(560px, 100%);
    max-height: min(88dvh, 760px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(5,20,36,.30);
    scrollbar-width: thin;
    scrollbar-color: #c9d4df transparent;
}
.service-modal__hero { height: clamp(109px, 21vw, 154px); }
.service-modal__close {
    width: 36px; height: 36px; top: 11px; right: 11px;
    border: 1px solid rgba(11,45,80,.12);
    background: rgba(255,255,255,.96); color: #0b2d50;
    box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.service-modal__eyebrow { background: rgba(255,255,255,.96); color: #0b2d50; letter-spacing: .55px; }
.service-modal__eyebrow i { color: #0b2d50; }
.service-modal__body { padding: 17px 20px 19px; gap: 0; }
.service-modal__topline {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 7px 12px;
}
.service-modal__location, .service-modal__availability {
    display: inline-flex; align-items: center; gap: 6px;
    color: #667487; font: 600 10px/1.3 "DM Sans",sans-serif;
}
.service-modal__location i, .service-modal__availability i { color: #0b2d50; }
.service-modal__body h2 {
    margin: 9px 0 5px; color: #102b46;
    font: 800 clamp(21px,4vw,27px)/1.16 Manrope,sans-serif;
    letter-spacing: -.65px;
}
.service-modal__description { margin: 0; color: #657181; font: 400 12px/1.55 "DM Sans",sans-serif; }
.service-modal__price-card {
    display: flex; align-items: center; gap: 11px; margin-top: 14px;
    padding: 12px 13px; border: 1px solid #dce6ef; border-radius: 15px;
    background: linear-gradient(135deg,#f3f7fb 0%,#edf3f8 100%);
}
.service-modal__price-icon {
    display: flex; flex: 0 0 38px; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 12px;
    background: #0b2d50; color: #fff; font-size: 15px;
}
.service-modal__price-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 3px; }
.service-modal__price-copy strong { color: #173550; font: 800 11px/1.3 Manrope,sans-serif; }
.service-modal__price-copy small { color: #728092; font: 500 10px/1.3 "DM Sans",sans-serif; }
.service-modal__price-value { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; }
.service-modal__price-value strong { color: #0b2d50; font: 800 21px/1 Manrope,sans-serif; letter-spacing: -.6px; }
.service-modal__price-value small { color: #758294; font: 600 10px/1.2 "DM Sans",sans-serif; }
.service-modal__price-disclaimer { margin: 7px 1px 0; color: #778292; font: 400 9px/1.45 "DM Sans",sans-serif; }
.service-modal__trust { display: flex; flex-wrap: wrap; align-items: stretch; gap: 7px; margin-top: 13px; }
.service-modal__trust-item {
    display: flex; flex: 1 1 135px; align-items: center; gap: 8px; min-width: 0;
    padding: 9px 8px; border: 1px solid #edf0f3; border-radius: 12px; background: #fbfcfd;
}
.service-modal__trust-icon {
    display: flex; flex: 0 0 29px; align-items: center; justify-content: center;
    width: 29px; height: 29px; border-radius: 9px;
    background: #eaf0f6; color: #0b2d50; font-size: 12px;
}
.service-modal__trust-item > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.service-modal__trust-item strong { color: #26394d; font: 800 9px/1.25 Manrope,sans-serif; }
.service-modal__trust-item small { color: #7b8794; font: 500 8px/1.25 "DM Sans",sans-serif; }
.service-modal__actions { display: flex; flex-wrap: nowrap; gap: 9px; margin-top: 14px; }
.service-modal__actions a {
    flex: 1 1 0; min-height: 46px; border-radius: 13px;
    font: 800 12px Manrope,sans-serif;
}
.service-modal__call { border: 1px solid #0b2d50; background: #0b2d50; color: #fff; }
.service-modal__call i { color: #fff; }
.service-modal__whatsapp { border: 1px solid #d7e2ed; background: #edf3f8; color: #0b2d50; }
.service-modal__whatsapp i { color: #25D366; font-size: 21px; }
.service-modal__related-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e9edf1; }
.service-modal__related-heading { margin-bottom: 8px; }
.service-modal__related-heading strong { color: #173550; font: 800 11px Manrope,sans-serif; }
.service-modal__related-heading span { color: #7a8794; font: 500 9px "DM Sans",sans-serif; }
.service-modal__related-item { flex-basis: 86px; border-color: #e4eaf0; border-radius: 11px; }
.service-modal__related-item.is-active { border-color: #0b2d50; background: #edf3f8; box-shadow: 0 0 0 1px #0b2d50 inset; }
.service-modal__related-item span { color: #26394d; }
.service-modal__related-item:focus-visible, .service-modal__close:focus-visible, .service-modal__actions a:focus-visible {
    outline: 3px solid rgba(11,45,80,.28); outline-offset: 2px;
}





/* =========================================================
   FINAL POPUP UX/UI POLISH — THE SOUL OF SERVICE
   Shared navy CTA treatment for Call and WhatsApp.
   ========================================================= */

:root {
    --sos-navy: #0B2D50;
    --sos-navy-hover: #123F6B;
    --sos-navy-soft: #EEF3F8;
    --sos-border: #DCE5EE;
    --sos-text: #142334;
}

/* Keep the popup surface crisp, calm and premium. */
.service-modal__panel {
    width: min(540px, 100%);
    max-height: min(88dvh, 760px);
    border: 1px solid rgba(11, 45, 80, .10);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(8, 31, 54, .28);
}

.service-modal__hero {
    position: relative;
    background: #E9EEF3;
}

.service-modal__hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.service-modal__body {
    color: var(--sos-text);
}

.service-modal__topline {
    align-items: center;
    gap: 8px 12px;
}

.service-modal__location,
.service-modal__availability {
    color: #607286;
}

.service-modal__body h2 {
    color: var(--sos-navy);
    letter-spacing: -.65px;
}

.service-modal__description {
    color: #657386;
    line-height: 1.55;
}

/* Clear, scannable price block. */
.service-modal__price-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #DCE6F0;
    border-radius: 16px;
    background: linear-gradient(135deg, #F5F8FB 0%, #EDF3F8 100%);
    padding: 13px 14px;
}

.service-modal__price-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--sos-navy);
    color: #fff;
}

.service-modal__price-copy {
    min-width: 0;
}

.service-modal__price-copy strong {
    color: #233B53;
}

.service-modal__price-copy small,
.service-modal__price-disclaimer {
    color: #718094;
}

.service-modal__price-value {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.service-modal__price-value strong {
    color: var(--sos-navy);
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    letter-spacing: -.5px;
}

.service-modal__price-value small {
    color: #748397;
}

/* Trust indicators: factual, compact and easy to scan. */
.service-modal__trust {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 13px;
}

.service-modal__trust-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 9px;
    border: 1px solid #E7EDF3;
    border-radius: 13px;
    background: #fff;
    flex-wrap: wrap;
}

.service-modal__trust-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--sos-navy-soft);
    color: var(--sos-navy);
}

.service-modal__trust-item strong {
    display: block;
    color: #263D54;
    font: 800 10px/1.25 "Manrope", sans-serif;
}

.service-modal__trust-item small {
    display: block;
    margin-top: 3px;
    color: #7B8795;
    font: 500 9px/1.3 "DM Sans", sans-serif;
}

/* Both CTA buttons use the same navy surface for visual compatibility.
   WhatsApp keeps its official green icon as a small brand cue. */
.service-modal__actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.service-modal__actions a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 11px 14px;
    border-radius: 13px;
    font: 800 13px/1 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 5px 13px rgba(11, 45, 80, .12);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    background: #050505;
    color: #fff;
    border: 1px solid #fff;
}

.service-modal__actions a i {
    font-size: 17px;
    color: #fff;
}

.service-modal__actions .service-modal__whatsapp i {
    color: #25D366;
    font-size: 21px;
}

.service-modal__actions a:hover {
    background: var(--sos-navy-hover);
    border-color: var(--sos-navy-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(11, 45, 80, .18);
}

.service-modal__actions a:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(11, 45, 80, .14);
}

.service-modal__actions a:focus-visible,
.service-modal__close:focus-visible,
.service-modal__related-item:focus-visible {
    outline: 3px solid rgba(11, 45, 80, .28);
    outline-offset: 3px;
}

/* Related service selector. */
.service-modal__related-wrap {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid #E8EDF2;
}

.service-modal__related-heading strong {
    color: var(--sos-navy);
}

.service-modal__related-item {
    border-color: #E1E8EF;
    border-radius: 12px;
    background: #fff;
}

.service-modal__related-item.is-active {
    border-color: var(--sos-navy);
    background: #EEF3F8;
    box-shadow: 0 0 0 1px var(--sos-navy) inset;
}

.service-modal__related-item span {
    color: #31465B;
}

/* Apply the same navy family to page-level WhatsApp actions too. */
.action-whatsapp {
    background: var(--sos-navy);
    border: 1px solid var(--sos-navy);
    color: #fff;
}

.action-whatsapp b,
.action-whatsapp small,
.action-whatsapp span {
    color: #fff;
}

.action-whatsapp i {
    color: #25D366;
}

.action-whatsapp:hover,
.action-whatsapp:focus-visible {
    background: var(--sos-navy-hover);
    border-color: var(--sos-navy-hover);
    color: #fff;
}

/* Compact mobile layout without squeezing labels. */






/* =========================================================
   FINAL COLOR CORRECTION — THE SOUL OF SERVICE
   Popup layout remains unchanged.
   Call: original black style.
   WhatsApp: requested soft-green brand palette.
   Popup accents: monochrome black / neutral grey.
========================================================= */

:root {
    --sos-popup-ink: #111214;
    --sos-popup-muted: #74767B;
    --sos-popup-line: #E8E8EB;
    --sos-popup-soft: #F5F5F7;

    --sos-whatsapp-bg: #E9F5EE;
    --sos-whatsapp-text: #075E54;
    --sos-whatsapp-icon: #25D366;
    --sos-whatsapp-border: #D5EFDF;
}

/* ---------- Popup: remove navy/blue accents ---------- */

.service-modal__panel {
    border-color: rgba(17, 18, 20, .08);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .22);
    scrollbar-color: #C9C9CE transparent;
}

.service-modal__close {
    border-color: rgba(17, 18, 20, .10);
    color: #111214;
}

.service-modal__eyebrow {
    color: #222326;
}

.service-modal__eyebrow i {
    color: #111214;
}

.service-modal__location i,
.service-modal__availability i {
    color: #55565B;
}

.service-modal__body h2 {
    color: #111214;
}

.service-modal__price-card {
    border-color: #E8E8EB;
    background: linear-gradient(135deg, #FAFAFB 0%, #F3F3F5 100%);
}

.service-modal__price-icon {
    background: #111214;
    color: #FFFFFF;
}

.service-modal__price-copy strong {
    color: #25262A;
}

.service-modal__price-copy small,
.service-modal__price-disclaimer {
    color: #74767B;
}

.service-modal__price-value strong {
    color: #111214;
}

.service-modal__price-value small {
    color: #74767B;
}

/* Trust cards stay clean and neutral. */
.service-modal__trust-item {
    border-color: #E8E8EB;
    background: #FAFAFB;
}

.service-modal__trust-icon {
    background: #F0F0F2;
    color: #222326;
}

.service-modal__trust-item strong {
    color: #222326;
}

.service-modal__trust-item small {
    color: #777980;
}

/* ---------- Popup CTA buttons ---------- */

/* Call button: restore the original black appearance. */
.service-modal__call {
    border: 1px solid #FFFFFF;
    background: #050505;
    color: #FFFFFF;
}

.service-modal__call i {
    color: #FFFFFF;
}

/* WhatsApp button: exact palette requested. */
.service-modal__actions .service-modal__whatsapp {
    border: 1px solid #D5EFDF;
    background: #E9F5EE;
    color: #075E54;
}

.service-modal__actions .service-modal__whatsapp span {
    color: #075E54;
}

.service-modal__actions .service-modal__whatsapp i {
    color: #25D366;
    font-size: 21px;
}

/* Separate hover feedback while preserving each button's identity. */
.service-modal__call:hover,
.service-modal__call:focus-visible {
    border-color: #222326;
    background: #222326;
    color: #FFFFFF;
}

.service-modal__actions .service-modal__whatsapp:hover,
.service-modal__actions .service-modal__whatsapp:focus-visible {
    border-color: #BFE5CE;
    background: #DFF1E6;
    color: #075E54;
}

.service-modal__actions .service-modal__whatsapp:hover span,
.service-modal__actions .service-modal__whatsapp:focus-visible span {
    color: #075E54;
}

.service-modal__actions .service-modal__whatsapp:hover i,
.service-modal__actions .service-modal__whatsapp:focus-visible i {
    color: #25D366;
}

/* ---------- Related services: neutral active state ---------- */

.service-modal__related-wrap {
    border-top-color: #E8E8EB;
}

.service-modal__related-heading strong {
    color: #111214;
}

.service-modal__related-item {
    border-color: #E5E5E8;
    background: #FFFFFF;
    color: #222326;
}

.service-modal__related-item.is-active {
    border-color: #111214;
    background: #F3F3F5;
    box-shadow: 0 0 0 1px #111214 inset;
}

.service-modal__related-item span {
    color: #222326;
}

.service-modal__related-item:focus-visible,
.service-modal__close:focus-visible,
.service-modal__actions a:focus-visible {
    outline-color: rgba(17, 18, 20, .28);
}

/* Neutral popup scrollbar. */
.service-modal__panel {
    scrollbar-color: #C9C9CE transparent;
}

/* ---------- Page-level WhatsApp buttons ---------- */
/* Call buttons are deliberately untouched. */

.action-whatsapp,
.dock-whatsapp {
    background: #E9F5EE;
    border: 1px solid #D5EFDF;
    color: #075E54;
}

.action-whatsapp b,
.action-whatsapp small,
.action-whatsapp span,
.dock-whatsapp b,
.dock-whatsapp small,
.dock-whatsapp span {
    color: #075E54;
}

.action-whatsapp i,
.dock-whatsapp > i {
    color: #25D366;
}

.action-whatsapp:hover,
.action-whatsapp:focus-visible,
.dock-whatsapp:hover,
.dock-whatsapp:focus-visible {
    background: #DFF1E6;
    border-color: #BFE5CE;
    color: #075E54;
}

/* Keep the WhatsApp icon green in all interactive states. */
.action-whatsapp:hover i,
.action-whatsapp:focus-visible i,
.dock-whatsapp:hover > i,
.dock-whatsapp:focus-visible > i {
    color: #25D366;
}

/* The modal design and responsive dimensions are intentionally unchanged. */

/* =========================================
   LAPTOP — 1024px to 1199px
========================================= */

@media screen and (min-width: 1024px) and (max-width: 1199px) {

    .brand-grid > .brand-card {
        flex: 0 0 calc((100% - 36px) / 4);
    }

}

/* =========================================
   TABLET — 769px to 1023px
========================================= */

@media screen and (min-width: 769px) and (max-width: 1023px) {

    /* Main spacing */
    .section {
        padding-right: 28px;
        padding-left: 28px;
    }

    .brand-section {
        padding-right: 28px;
        padding-left: 28px;
    }

    .service-intro {
        padding-right: 28px;
        padding-left: 28px;
    }

    .page-breadcrumb {
        padding-right: 28px;
        padding-left: 28px;
    }

    /* Header */
    .app-header {
        padding-right: 28px;
        padding-left: 28px;
    }

    /* Service cards — 3 columns */
    .service-rail > .service-card {
        flex: 1 1 calc((100% - 28px) / 3);
    }

    /* Brand logos — 4 columns */
    .brand-grid > .brand-card {
        flex: 0 0 calc((100% - 36px) / 4);
    }

    /* Feature cards — 2 columns */
    .feature-grid > .feature-card {
        flex: 1 1 calc((100% - 15px) / 2);
    }

    /* Service directory — 2 columns */
    .service-directory > .directory-card {
        flex: 1 1 calc((100% - 16px) / 2);
    }

    /* Booking section */
    .booking-layout {
        margin-right: 28px;
        margin-left: 28px;
    }

}

/* =========================================
   MOBILE — 376px to 768px
========================================= */

@media screen and (min-width: 376px) and (max-width: 768px) {

    /* Page layout */
    body {
        padding: 0 0 30px;
    }

    .app-shell {
        border-radius: 0;
        box-shadow: none;
    }

    /* Header */
    .app-header {
        height: 72px;
        padding: 0 18px;
    }

    .menu-button {
        display: flex;
    }

    .mobile-menu.open {
        display: block !important;
    }

    /* Hero section */
    .hero-card {
        min-height: 390px;
        margin: 10px;
        border-radius: 22px;
    }

    .hero-content {
        padding: 28px 22px;
    }

    .hero-content h1 {
        font-size: clamp(34px, 7vw, 46px);
        letter-spacing: -1.5px;
    }

    .hero-content > p {
        font-size: 14px;
    }

    .hero-benefits {
        flex-wrap: wrap;
        gap: 14px 10px;
        margin-top: 25px;
    }

    .hero-benefits > span {
        flex: 1 1 calc((100% - 10px) / 2);
    }

    .hero-actions {
        gap: 8px;
        margin-top: 20px;
    }

    .action {
        min-height: 52px;
        padding: 0 12px;
        font-size: 12px;
    }

    .rating-card {
        width: 100%;
        max-width: 320px;
        margin-top: 25px;
        padding: 12px 16px;
    }

    /* Main sections */
    .section {
        padding: 32px 18px 0;
    }

    .section-title h2 {
        font-size: 25px;
    }

    /* Service cards — 2 columns */
    .service-rail > .service-card {
        flex: 1 1 calc((100% - 14px) / 2);
        min-height: 200px;
    }

    /* Brand logos — 3 columns */
    .brand-section {
        padding: 28px 18px 0;
    }

    .brand-grid {
        gap: 12px;
    }

    .brand-grid > .brand-card {
        flex: 0 0 calc((100% - 24px) / 3);
        height: 76px;
        padding: 10px;
    }

    .brand-grid > .brand-card img {
        height: 38px;
    }

    /* Quick booking */
    .quick-book {
        margin: 28px 18px 0;
        min-height: 190px;
    }

    .quick-content {
        padding: 24px 22px;
    }

    .quick-book h2 {
        font-size: 26px;
    }

    .quick-arrow {
        right: 20px;
        bottom: 20px;
    }

    /* Feature cards — 2 columns */
    .feature-grid {
        gap: 12px;
    }

    .feature-grid > .feature-card {
        flex: 1 1 calc((100% - 12px) / 2);
        min-height: 140px;
        padding: 16px;
    }

    /* Process steps — 2 columns */
    .process-rail {
        gap: 20px 12px;
    }

    .process-rail > .process-step {
        flex: 1 1 calc((100% - 12px) / 2);
    }

    .process-arrow {
        display: none;
    }

    /* Booking section — vertical layout */
    .booking-layout {
        flex-direction: column;
        margin: 30px 18px 0;
        min-height: 0;
    }

    .booking-photo {
        width: 100%;
        min-height: 190px;
    }

    .booking-card {
        padding: 24px 20px;
    }

    .booking-card h2 {
        font-size: 25px;
    }

    /* Service directory — 2 columns */
    .service-directory {
        gap: 12px;
    }

    .service-directory > .directory-card {
        flex: 1 1 calc((100% - 12px) / 2);
        padding: 12px;
    }

    .directory-art {
        height: 125px;
    }

    /* Service introduction */
    .service-intro {
        padding: 26px 18px 0;
    }

    .service-intro h2 {
        font-size: 25px;
    }

    .service-intro p {
        font-size: 13px;
    }

    .page-breadcrumb {
        padding: 16px 18px 0;
    }

    /* Bottom CTA */
    .bottom-cta {
        width: calc(100% - 36px);
        max-width: 440px;
        bottom: 85px;
    }

}



/* ========================================================================
   FINAL RESPONSIVE + BOTTOM NAVIGATION SYSTEM
   The Soul Of Service
   Desktop/tablet: bottom navigation hidden.
   Mobile: premium fixed navigation with safe-area support.
   This block is intentionally last and is the authoritative responsive layer.
======================================================================== */

/* ---------- Shared viewport safety ---------- */

html {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

.app-shell,
.section,
.service-intro,
.brand-section,
.booking-layout,
.service-directory,
.service-rail,
.feature-grid,
.process-rail {
    min-width: 0;
}

/* ---------- Bottom navigation: hidden by default (desktop/tablet) ---------- */

.tab-bar {
    display: none !important;
}

/* Keep desktop/tablet page spacing independent of mobile navigation. */
@media screen and (min-width: 769px) {
    body {
        padding-bottom: 50px;
    }

    .tab-bar {
        display: none !important;
    }

    .contact-dock {
        bottom: 8px;
    }

    .bottom-cta {
        bottom: 100px;
    }
}

/* ---------- Premium mobile bottom navigation ---------- */

@media screen and (max-width: 768px) {
    body {
        padding: 0 0 calc(82px + env(safe-area-inset-bottom));
    }

    .app-shell {
        padding-bottom: 12px;
    }

    .tab-bar {
        position: fixed !important;
        z-index: 10000 !important;
        right: 0;
        bottom: 0;
        left: 0;

        display: flex !important;
        flex-flow: row nowrap;
        align-items: stretch;
        justify-content: space-around;
        gap: 2px;

        width: 100%;
        max-width: 480px;
        min-width: 0;
        min-height: 68px;
        height: auto;

        margin: 0 auto;
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom));

        border: 0;
        border-top: 1px solid rgba(20, 25, 32, .08);
        border-radius: 18px 18px 0 0;

        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        backdrop-filter: saturate(180%) blur(22px);

        box-shadow:
            0 -5px 24px rgba(18, 28, 40, .07),
            0 -1px 3px rgba(18, 28, 40, .025);

        transform: translateX(-50%);
        isolation: isolate;
    }

    .tab-bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 34px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: rgba(17, 18, 20, .10);
        transform: translateX(-50%);
        pointer-events: none;
    }

    .tab-bar .tab {
        position: relative;
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;

        min-width: 0;
        min-height: 52px;
        padding: 5px 2px 3px;

        border: 0;
        border-radius: 12px;
        background: transparent;

        color: #858991;
        font-family: "DM Sans", sans-serif;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -.1px;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;

        -webkit-tap-highlight-color: transparent;
        transition:
            color .2s ease,
            background-color .2s ease,
            transform .2s ease;
    }

    .tab-bar .tab i {
        display: block;
        flex: 0 0 auto;
        margin: 0;
        color: currentColor;
        font-size: 19px;
        line-height: 1;
        transition: transform .2s ease;
    }

    .tab-bar .tab.active {
        color: #0B2D50;
        background: rgba(11, 45, 80, .055);
        font-weight: 800;
    }

    .tab-bar .tab.active i {
        color: #0B2D50;
        transform: translateY(-1px);
    }

    .tab-bar .tab:active {
        transform: scale(.96);
        background: rgba(11, 45, 80, .07);
    }

    .tab-bar .tab:focus-visible {
        outline: 2px solid rgba(11, 45, 80, .35);
        outline-offset: -2px;
    }

    /* Floating actions sit above the navigation, never behind it. */
    contact-dock {
        bottom: calc(78px + env(safe-area-inset-bottom));
        width: min(440px, calc(100% - 28px));
    }

bottom-cta {
        bottom: calc(86px + env(safe-area-inset-bottom));
        width: calc(100% - 36px);
        max-width: 440px;
    }

    /* Main page gutters */
    .section {
        padding-right: 18px;
        padding-left: 18px;
    }

    .brand-section {
        padding-right: 18px;
        padding-left: 18px;
    }

    .service-intro {
        padding-right: 18px;
        padding-left: 18px;
    }

    .page-breadcrumb {
        padding-right: 18px;
        padding-left: 18px;
    }

    .app-header {
        padding-right: 18px;
        padding-left: 18px;
    }

    .quick-book {
        margin-right: 18px;
        margin-left: 18px;
    }

    .booking-layout {
        margin-right: 18px;
        margin-left: 18px;
    }

    .trust-note {
        margin-right: 18px;
        margin-left: 18px;
    }
}

/* ---------- Large phones: 376px to 425px ---------- */

@media screen and (min-width: 376px) and (max-width: 425px) {
    .hero-card {
        min-height: 380px;
        margin: 9px;
        border-radius: 21px;
    }

    .hero-content {
        padding: 25px 19px;
    }

    .hero-content h1 {
        max-width: 100%;
        font-size: clamp(33px, 8.5vw, 39px);
        letter-spacing: -1.35px;
        overflow-wrap: break-word;
    }

    .hero-content > p {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.5;
    }

    .hero-benefits {
        gap: 12px 8px;
        margin-top: 22px;
    }

    .hero-benefits > span {
        flex: 1 1 calc(50% - 8px);
        font-size: 10px;
    }

    .hero-benefits i {
        font-size: 18px;
    }

    .hero-actions {
        gap: 12px;
        margin-top: 18px;
    }

    .action {
        min-width: 0;
        min-height: 49px;
        gap: 6px;
        padding: 0 9px;
        font-size: 11px;
    }

    .action i {
        font-size: 17px;
    }

    .rating-card {
        width: min(100%, 300px);
        gap: 10px;
        padding: 11px 13px;
    }

    .section {
        padding-top: 29px;
    }

    .section-title {
        gap: 10px;
    }

    .section-title h2 {
        font-size: 23px;
    }

    .service-rail {
        gap: 11px;
    }

    .service-rail > .service-card {
        flex: 1 1 calc((100% - 11px) / 2);
        min-height: 185px;
    }

    .service-rail > .service-card > .service-card__title {
        right: 10px;
        bottom: 61px;
        left: 10px;
        font-size: 12px;
    }

    .service-rail > .service-card > .service-card__description {
        right: 10px;
        bottom: 40px;
        left: 10px;
        font-size: 9px;
    }

    .service-rail > .service-card > .service-price {
        bottom: 10px;
        left: 10px;
        font-size: 12px;
    }

    .service-rail > .service-card > .round-arrow {
        right: 8px;
        bottom: 8px;
        width: 27px;
        height: 27px;
    }

    .brand-grid {
        gap: 9px;
    }

    .brand-grid > .brand-card {
        flex: 0 0 calc((100% - 18px) / 3);
        height: 70px;
        padding: 8px;
    }

    .brand-grid > .brand-card img {
        height: 35px;
    }

    .feature-grid {
        gap: 10px;
    }

    .feature-grid > .feature-card {
        flex: 1 1 calc((100% - 10px) / 2);
        min-height: 132px;
        padding: 14px;
    }

    .service-directory {
        gap: 10px;
    }

    .service-directory > .directory-card {
        flex: 1 1 calc((100% - 10px) / 2);
        padding: 10px;
    }

    .directory-art {
        height: 112px;
    }

    .quick-book {
        min-height: 175px;
    }

    .quick-content {
        padding: 22px 19px;
    }

    .quick-book h2 {
        max-width: 85%;
        font-size: 24px;
    }

    .booking-card {
        padding: 21px 17px;
    }

    .booking-card h2 {
        font-size: 23px;
    }

    .field {
        gap: 9px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .service-modal {
        padding: 12px;
    }

    .service-modal__panel {
        width: 100%;
        border-radius: 20px;
    }

    .service-modal__body {
        padding: 16px 16px 18px;
    }
}

/* ---------- Small phones: 361px to 375px ---------- */

@media screen and (min-width: 361px) and (max-width: 375px) {
    body {
        padding-right: 0;
        padding-left: 0;
    }

    .app-header {
        height: 68px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .brand {
        gap: 7px;
    }

    .brand-icon {
        width: 39px;
        height: 39px;
    }

    .brand-text strong {
        font-size: 12px;
    }

    .menu-button {
        width: 40px;
        height: 40px;
    }

    .hero-card {
        min-height: 365px;
        margin: 8px;
        border-radius: 19px;
    }

    .hero-content {
        padding: 23px 16px;
    }

    .hero-content h1 {
        font-size: 34px;
        letter-spacing: -1.25px;
    }

    .hero-content > p {
        font-size: 12px;
        line-height: 1.5;
    }

    .hero-benefits {
        gap: 10px 7px;
        margin-top: 19px;
    }

    .hero-benefits > span {
        flex: 1 1 calc(50% - 7px);
        font-size: 10px;
    }

    .hero-benefits i {
        font-size: 17px;
    }

    .hero-actions {
        gap: 6px;
        margin-top: 16px;
    }

    .action {
        min-height: 46px;
        padding: 0 7px;
        font-size: 10px;
    }

    .action i {
        font-size: 16px;
    }

    .rating-card {
        max-width: 280px;
        gap: 8px;
        padding: 10px 12px;
    }

    .section {
        padding: 27px 14px 0;
    }

    .section-title h2 {
        font-size: 22px;
    }

    .service-rail {
        gap: 9px;
    }

    .service-rail > .service-card {
        flex: 1 1 calc((100% - 9px) / 2);
        min-height: 176px;
        border-radius: 15px;
    }

    .service-rail > .service-card > .service-card__title {
        right: 9px;
        bottom: 58px;
        left: 9px;
        font-size: 11px;
    }

    .service-rail > .service-card > .service-card__description {
        right: 9px;
        bottom: 37px;
        left: 9px;
        font-size: 8px;
    }

    .service-rail > .service-card > .service-price {
        bottom: 9px;
        left: 9px;
        font-size: 11px;
    }

    .brand-section,
    .service-intro {
        padding-right: 14px;
        padding-left: 14px;
    }

    .brand-grid {
        gap: 8px;
    }

    .brand-grid > .brand-card {
        flex: 0 0 calc((100% - 16px) / 3);
        height: 66px;
        padding: 7px;
    }

    .brand-grid > .brand-card img {
        height: 33px;
    }

    .quick-book {
        margin: 24px 14px 0;
        min-height: 165px;
    }

    .quick-content {
        padding: 19px 16px;
    }

    .quick-book h2 {
        font-size: 22px;
    }

    .feature-grid {
        gap: 9px;
    }

    .feature-grid > .feature-card {
        flex: 1 1 calc((100% - 9px) / 2);
        min-height: 125px;
        padding: 12px;
    }

    .feature-card > i {
        font-size: 21px;
        margin-bottom: 10px;
    }

    .feature-card h3 {
        font-size: 12px;
    }

    .feature-card p {
        font-size: 10px;
    }

    .process-rail {
        gap: 17px 9px;
    }

    .process-rail > .process-step {
        flex: 1 1 calc((100% - 9px) / 2);
    }

    .booking-layout {
        margin: 25px 14px 0;
    }

    .booking-card {
        padding: 19px 15px;
    }

    .booking-card h2 {
        font-size: 22px;
    }

    .service-directory {
        gap: 9px;
    }

    .service-directory > .directory-card {
        flex: 1 1 calc((100% - 9px) / 2);
        padding: 9px;
    }

    .directory-art {
        height: 100px;
    }

    .directory-card strong {
        font-size: 12px;
    }

    .directory-card small {
        font-size: 10px;
    }

    .page-breadcrumb {
        padding: 14px 14px 0;
    }

    .service-intro h2 {
        font-size: 23px;
    }

    .service-intro p {
        font-size: 12px;
    }

    .tab-bar {
        min-height: 64px;
        padding-right: 6px;
        padding-left: 6px;
    }

    .tab-bar .tab {
        gap: 3px;
        min-height: 49px;
        font-size: 9px;
    }

    .tab-bar .tab i {
        font-size: 18px;
    }

    .contact-dock {
        width: calc(100% - 22px);
        padding: 6px;
        gap: 8px;
    }

    .contact-dock a {
        gap: 6px;
        padding: 9px 6px;
    }

    .contact-dock b {
        font-size: 11px;
    }

    .contact-dock small {
        font-size: 9px;
    }
}

/* ---------- Extra-small phones: 360px and below ---------- */

@media screen and (max-width: 360px) {
    body {
        padding-right: 0;
        padding-left: 0;
    }

    .app-header {
        height: 64px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .brand {
        gap: 6px;
    }

    .brand-icon {
        width: 36px;
        height: 36px;
    }

    .brand-text strong {
        font-size: 11px;
    }

    .brand-text small {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .menu-button {
        display: flex;
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .hero-card {
        min-height: 350px;
        margin: 7px;
        border-radius: 17px;
    }

    .hero-content {
        padding: 21px 14px;
    }

    .hero-content h1 {
        max-width: 100%;
        font-size: clamp(29px, 9vw, 33px);
        letter-spacing: -1.1px;
        overflow-wrap: anywhere;
    }

    .hero-content > p {
        font-size: 11px;
        line-height: 1.45;
    }

    .hero-benefits {
        gap: 9px 6px;
        margin-top: 17px;
    }

    .hero-benefits > span {
        flex: 1 1 calc(50% - 6px);
        gap: 6px;
        font-size: 9px;
    }

    .hero-benefits b {
        font-size: 9px;
    }

    .hero-benefits i {
        font-size: 15px;
    }

    .hero-actions {
        gap: 5px;
        margin-top: 14px;
    }

    .action {
        min-width: 0;
        min-height: 43px;
        gap: 5px;
        padding: 0 5px;
        border-radius: 12px;
        font-size: 9px;
    }

    .action i {
        font-size: 14px;
    }

    .rating-card {
        width: 100%;
        max-width: 260px;
        gap: 7px;
        padding: 9px 10px;
    }

    .rating-card strong {
        font-size: 12px;
    }

    .rating-card small {
        font-size: 9px;
    }

    .stars {
        font-size: 12px;
    }

    .section {
        padding: 24px 12px 0;
    }

    .section-title {
        gap: 7px;
        margin-bottom: 13px;
    }

    .section-title h2 {
        font-size: 20px;
    }

    .section-title small {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .view-link {
        font-size: 10px;
    }

    .service-rail {
        gap: 8px;
    }

    .service-rail > .service-card {
        flex: 1 1 calc((100% - 8px) / 2);
        min-height: 165px;
        padding: 9px;
        border-radius: 14px;
    }

    .service-rail > .service-card > .service-card__title {
        right: 8px;
        bottom: 55px;
        left: 8px;
        font-size: 10px;
    }

    .service-rail > .service-card > .service-card__description {
        right: 8px;
        bottom: 35px;
        left: 8px;
        font-size: 8px;
        line-height: 1.3;
    }

    .service-rail > .service-card > .service-price {
        right: 37px;
        bottom: 8px;
        left: 8px;
        font-size: 10px;
    }

    .service-rail > .service-card > .round-arrow {
        right: 7px;
        bottom: 7px;
        width: 25px;
        height: 25px;
    }

    .brand-section,
    .service-intro {
        padding-right: 12px;
        padding-left: 12px;
    }

    .brand-heading h2 {
        font-size: 20px;
    }

    .brand-heading p {
        font-size: 11px;
    }

    .brand-grid {
        gap: 8px;
    }

    .brand-grid > .brand-card {
        flex: 0 0 calc((100% - 8px) / 2);
        height: 64px;
        padding: 7px;
    }

    .brand-grid > .brand-card img {
        height: 32px;
    }

    .brand-note {
        font-size: 10px;
    }

    .quick-book {
        margin: 22px 12px 0;
        min-height: 155px;
        border-radius: 19px;
    }

    .quick-content {
        padding: 17px 14px;
    }

    .quick-book h2 {
        max-width: 82%;
        font-size: 20px;
    }

    .quick-book p {
        max-width: 90%;
        font-size: 11px;
    }

    .quick-arrow {
        right: 14px;
        bottom: 14px;
        width: 31px;
        height: 31px;
    }

    .feature-grid {
        gap: 8px;
    }

    .feature-grid > .feature-card {
        flex: 1 1 calc((100% - 8px) / 2);
        min-height: 118px;
        padding: 11px;
        border-radius: 15px;
    }

    .feature-card > i {
        margin-bottom: 8px;
        font-size: 19px;
    }

    .feature-card h3 {
        font-size: 11px;
    }

    .feature-card p {
        font-size: 9px;
    }

    process-rail {
        flex-wrap: wrap;
        gap: 15px 8px;
    }

    .process-rail > .process-step {
        flex: 1 1 calc((100% - 8px) / 2);
    }

    .step-number {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .process-step h3 {
        font-size: 11px;
    }

    .process-step p {
        font-size: 9px;
    }

    .booking-layout {
        flex-direction: column;
        margin: 22px 12px 0;
        border-radius: 18px;
    }

    .booking-photo {
        width: 100%;
        min-height: 155px;
    }

    .booking-card {
        padding: 17px 13px;
    }

    .booking-card h2 {
        font-size: 20px;
    }

    .field {
        min-height: 47px;
        gap: 8px;
        padding: 0 9px;
    }

    .field input,
    .field select {
        font-size: 11px;
    }

    .book-submit {
        min-height: 46px;
        font-size: 12px;
    }

    .service-directory {
        gap: 8px;
    }

    .service-directory > .directory-card {
        flex: 1 1 calc((100% - 8px) / 2);
        padding: 8px;
        border-radius: 14px;
    }

    .directory-art {
        height: 88px;
        border-radius: 10px;
    }

    .directory-card strong {
        font-size: 11px;
    }

    .directory-card small {
        font-size: 9px;
    }

    .directory-card .directory-link {
        font-size: 10px;
    }

    .service-intro h2 {
        font-size: 21px;
    }

    .service-intro p {
        font-size: 11px;
    }

    .page-breadcrumb {
        padding: 12px 12px 0;
        font-size: 9px;
    }

    .trust-note {
        gap: 9px;
        margin: 22px 12px 0;
        padding: 14px;
    }

    .trust-icon {
        width: 36px;
        height: 36px;
    }

    .trust-note strong {
        font-size: 11px;
    }

    .trust-note p {
        font-size: 9px;
    }

    /* Compact but still thumb-friendly navigation. */
    .tab-bar {
        min-height: 62px;
        gap: 0;
        padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
        border-radius: 15px 15px 0 0;
    }

    .tab-bar .tab {
        min-height: 47px;
        gap: 3px;
        padding: 4px 1px;
        font-size: 8px;
    }

    .tab-bar .tab i {
        font-size: 17px;
    }

    .contact-dock {
        width: calc(100% - 16px);
        padding: 5px;
        gap: 8px;
        border-radius: 15px;
    }

    .contact-dock a {
        gap: 5px;
        padding: 8px 5px;
        border-radius: 11px;
    }

    .contact-dock a > i {
        font-size: 17px;
    }

    .contact-dock b {
        font-size: 10px;
    }

    .contact-dock small {
        font-size: 8px;
    }

    .bottom-cta {
        width: calc(100% - 24px);
    }

    /* Popup remains inside the narrow viewport. */
    .service-modal {
        padding: 8px;
    }

    .service-modal__panel {
        width: 100%;
        border-radius: 17px;
    }

    .service-modal__hero {
        height: 145px;
        border-radius: 16px 16px 0 0;
    }

    .service-modal__body {
        padding: 14px 12px 15px;
    }

    .service-modal__body h2 {
        font-size: 21px;
    }

    .service-modal__body > p {
        font-size: 11px;
    }

    .service-modal__actions {
        gap: 7px;
    }

    .service-modal__actions a {
        min-height: 43px;
        gap: 6px;
        padding: 8px;
        font-size: 11px;
    }

    .service-modal__trust {
        gap: 6px;
    }

    .service-modal__trust-item {
        gap: 5px;
        padding: 7px 5px;
    }

    .service-modal__trust-item strong {
        font-size: 8px;
    }

    .service-modal__trust-item small {
        font-size: 7px;
    }
}

/* ---------- Reduced motion and keyboard/accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .tab-bar *,
    .tab-bar .tab,
    .tab-bar .tab i {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Safe-area fallback for browsers without env support ---------- */

@supports not (padding: env(safe-area-inset-bottom)) {
    @media screen and (max-width: 768px) {
        .tab-bar {
            padding-bottom: 7px;
        }

        body {
            padding-bottom: 82px;
        }
    }
}

/* =========================================================
   FINAL IMAGE SYSTEM — AUTHORITATIVE RULES
   Service-card images remain absolute backgrounds.
   Popup images use their own independent layout rules.
========================================================= */

/* Hero image */
.hero-card {
    isolation: isolate;
}

.hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #171717;
    pointer-events: none;
}

.hero-image > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 52%;
}

/* Service-card image: do not change this to position: relative. */
.service-rail > .service-card {
    isolation: isolate;
}

.service-rail > .service-card > .service-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #292929;
    pointer-events: none;
}

.service-rail > .service-card > .service-image > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Quick-book image */
.quick-book {
    position: relative;
    isolation: isolate;
}

.quick-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.quick-bg > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.quick-content {
    position: relative;
    z-index: 1;
}

/* Booking image */
.booking-photo {
    position: relative;
    flex: 0 0 40%;
    min-width: 0;
    overflow: hidden;
    background: #e9eef3;
}

.booking-photo > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 55%;
}

/* Service directory images */
.directory-art {
    position: relative;
    overflow: hidden;
    background: #e9eef3;
}

.directory-art > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Brand logos must fit without cropping. */
.brand-card > img,
.brand-grid > .brand-card > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 42px;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

/* Popup hero has a separate, content-independent image frame. */
.service-modal__hero {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    overflow: hidden;
    background: #e9eef3;
    isolation: isolate;
}

.service-modal__hero > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    background: #e9eef3;
    transition: opacity .18s ease;
}

.service-modal__hero > img.is-image-loaded {
    opacity: 1;
}

/* Related-service thumbnails */
.service-modal__related-item > img {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 55px;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    background: #e9eef3;
}

.service-modal__related,
.service-modal__related-item {
    isolation: isolate;
}

/* Desktop image geometry */
@media screen and (min-width: 1024px) {
    .hero-card {
        min-height: 460px;
    }

    .service-rail {
        display: flex;
        flex-flow: row wrap;
        align-items: stretch;
    }

    .service-rail > .service-card {
        flex: 1 1 calc((100% - 42px) / 4);
        min-height: 235px;
    }

    .booking-layout {
        flex-direction: row;
    }

    .booking-photo {
        flex: 0 0 40%;
        width: 40%;
        min-height: 380px;
    }
}

/* Prevent image elements from expanding their layout containers. */
img,
video,
iframe {
    max-width: 100%;
}


/* =========================================================
   FINAL DESKTOP SAFETY
   Desktop/tablet never show the mobile bottom navigation.
========================================================= */
@media screen and (min-width: 769px) {
    .tab-bar {
        display: none !important;
    }
}