/* =================================================================
   KM ENTERPRISES — Landing page styles
   -----------------------------------------------------------------
   1.  Theme variables (change colours here)
   2.  Base & typography
   3.  Shared components (buttons, headings, image placeholders)
   4.  Top bar
   5.  Header
   6.  Hero carousel
   7.  Marquee
   8.  About
   9.  Services (zig-zag)
   10. Why choose us (colour sweep)
   11. How it works
   12. Where we install (bento)
   13. Gallery + lightbox
   14. Testimonials
   15. FAQs
   16. CTA band
   17. Contact
   18. Footer
   19. Floating buttons & popup
   20. Scroll reveal & keyframes
   21. Responsive
   ================================================================= */


/* ---------- 1. THEME VARIABLES ---------- */
:root {
    --brand: #0E3B36;
    /* deep pine — headers, dark bands */
    --brand-2: #17564E;
    /* lighter pine — hovers, gradients */
    --accent: #F29A1F;
    /* safety amber — highlights, CTAs */
    --accent-dark: #CF7F0B;
    --steel: #5B6770;
    /* body text muted */
    --ink: #13201E;
    /* headings */
    --mint: #EDF5F2;
    /* soft section tint */
    --cloud: #F4F7F8;
    /* cool grey section tint */
    --line: #DCE5E3;
    /* borders */
    --white: #FFFFFF;
    --whatsapp: #25D366;

    --font-head: "Archivo", "Segoe UI", Arial, sans-serif;
    --font-body: "Public Sans", "Segoe UI", Arial, sans-serif;

    --radius-lg: 22px;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow-sm: 0 2px 10px rgba(14, 59, 54, .07);
    --shadow: 0 14px 34px -12px rgba(14, 59, 54, .22);
    --shadow-lg: 0 30px 60px -20px rgba(14, 59, 54, .35);
    --ease: cubic-bezier(.22, .8, .24, 1);
    --header-h: 76px;
}


/* ---------- 2. BASE & TYPOGRAPHY ---------- */
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--steel);
    background: var(--white);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-head);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.015em;
}

p {
    margin-bottom: 1rem;
}

strong {
    color: var(--ink);
    font-weight: 600;
}

a {
    color: var(--brand-2);
    text-decoration: none;
    transition: color .25s;
}

a:hover {
    color: var(--accent-dark);
}

img {
    max-width: 100%;
    display: block;
}

section[id],
[id="home"] {
    scroll-margin-top: var(--header-h);
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    background: var(--brand);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: 12px;
    color: #fff;
}

.section {
    padding: 100px 0;
    position: relative;
}


/* ---------- 3. SHARED COMPONENTS ---------- */

/* Section headings */
.section-title {
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    font-weight: 800;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 18px;
}

/* "Knot" underline: a cable with a small amber knot */
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 74px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 24px, var(--brand-2) 24px);
}

.section-head {
    max-width: 640px;
    margin-bottom: 56px;
}

.section-head p {
    font-size: 1.06rem;
    margin: 0;
}

.section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head--center .section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

.section-head--split {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.section-head--split .section-title {
    margin-bottom: 0;
}

.section-head--split p {
    max-width: 360px;
}

.lead-text {
    font-size: 1.1rem;
    color: #3E4A50;
}

/* Buttons — each type has its own hover */
.btn-main,
.btn-line,
.btn-amber,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .96rem;
    padding: 13px 24px;
    border-radius: 50px;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color .35s var(--ease), border-color .35s, transform .35s var(--ease), box-shadow .35s;
    cursor: pointer;
    line-height: 1.2;
}

/* Primary: amber fill slides in from the left */
.btn-main {
    background: var(--brand);
    color: #fff;
}

.btn-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.btn-main:hover {
    color: var(--ink);
    box-shadow: 0 10px 22px -8px rgba(242, 154, 31, .6);
}

.btn-main:hover::before {
    transform: scaleX(1);
}

/* Outline: fills with WhatsApp green and lifts */
.btn-line {
    border-color: var(--line);
    color: var(--ink);
    background: #fff;
}

.btn-line i {
    color: var(--whatsapp);
    transition: color .3s;
}

.btn-line:hover {
    background: var(--whatsapp);
    border-color: var(--whatsapp);
    color: #fff;
    transform: translateY(-3px);
}

.btn-line:hover i {
    color: #fff;
}

/* Amber (on dark): darkens + icon wiggles */
.btn-amber {
    background: var(--accent);
    color: var(--ink);
}

.btn-amber:hover {
    background: #fff;
    color: var(--brand);
}

.btn-amber:hover i {
    animation: ring .6s ease;
}

/* Ghost (on dark) */
.btn-ghost {
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    letter-spacing: .02em;
}

/* Image wrappers — show a neat netted placeholder if an image is missing */
.img-wrap {
    position: relative;
    overflow: hidden;
    background-color: var(--mint);
    background-image:
        repeating-linear-gradient(45deg, rgba(14, 59, 54, .09) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(-45deg, rgba(14, 59, 54, .09) 0 1px, transparent 1px 16px);
}

.img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-missing>img {
    opacity: 0;
}

/* Net-pattern utility */
.mesh-patch {
    background-image:
        repeating-linear-gradient(45deg, rgba(242, 154, 31, .55) 0 1.5px, transparent 1.5px 14px),
        repeating-linear-gradient(-45deg, rgba(242, 154, 31, .55) 0 1.5px, transparent 1.5px 14px);
}


/* ---------- 4. TOP BAR ---------- */
.topbar {
    background: var(--brand);
    color: rgba(255, 255, 255, .82);
    font-size: .86rem;
    padding: 8px 0;
}

.topbar-list {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topbar-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.topbar-list i {
    color: var(--accent);
}

.topbar a {
    color: rgba(255, 255, 255, .9);
}

.topbar a:hover {
    color: var(--accent);
}

.topbar-social {
    gap: 8px !important;
}

.topbar-social a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    transition: background .3s, transform .3s;
}

.topbar-social a i {
    color: #fff;
}

.topbar-social a:hover {
    background: var(--whatsapp);
    transform: rotate(-12deg);
}


/* ---------- 5. HEADER ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid transparent;
    transition: box-shadow .35s, border-color .35s;
}

.site-header.is-scrolled {
    box-shadow: 0 8px 26px -14px rgba(14, 59, 54, .35);
    border-color: var(--line);
}

.site-header .navbar {
    min-height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
}

.brand:hover {
    color: var(--ink);
}

.brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--brand);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-text strong {
    font-family: var(--font-head);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.brand-text small {
    font-size: .74rem;
    color: var(--steel);
    margin-top: 3px;
}

.site-header .nav-link {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    padding: 8px 14px !important;
    position: relative;
}

/* Link hover: underline grows from centre */
.site-header .nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .3s var(--ease);
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--brand-2);
}

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
    transform: scaleX(1);
}

.btn-call-header {
    margin-left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-head);
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 50px;
    transition: background .3s, color .3s, transform .3s;
}

.btn-call-header:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

/* Hamburger */
.menu-toggle {
    border: 0;
    padding: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    box-shadow: none !important;
}

.menu-toggle span {
    display: block;
    height: 2px;
    width: 24px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
    margin-left: auto;
    margin-right: auto;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ---------- 6. HERO CAROUSEL ---------- */
.hero {
    position: relative;
    background: var(--brand);
}

.hero .carousel-item {
    height: min(86vh, 740px);
    min-height: 540px;
    position: relative;
    overflow: hidden;
    background-color: var(--brand);
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px);
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 7s linear;
}

.carousel-item.active .hero-img {
    transform: scale(1);
}

/* Dark scrim so centred text stays readable on any photo */
.hero .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.575) 0%, rgba(0, 0, 0, 0.651) 70%);
}

.hero-caption {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    max-width: 900px;
    margin: 0 auto;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 18px;
}

.hero-kicker::before,
.hero-kicker::after {
    content: "";
    width: 28px;
    height: 1.5px;
    background: currentColor;
    opacity: .7;
}

.hero-title {
    color: #fff;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
    text-wrap: balance;
}

.hero-text {
    color: rgba(255, 255, 255, .86);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    max-width: 600px;
    margin: 0;
    text-wrap: balance;
}

/* Caption entrance on each slide */
.hero-caption>* {
    opacity: 0;
    transform: translateY(26px);
}

.carousel-item.active .hero-caption>* {
    animation: capIn .9s var(--ease) forwards;
}

.carousel-item.active .hero-caption>*:nth-child(2) {
    animation-delay: .15s;
}

.carousel-item.active .hero-caption>*:nth-child(3) {
    animation-delay: .3s;
}

/* Progress indicators */
.hero-progress {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}

.hero-progress button {
    width: 56px;
    height: 4px;
    border: 0;
    padding: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .3);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.hero-progress button::before {
    content: "";
    position: absolute;
    inset: -10px 0;
}

.hero-progress button span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
}

.hero-progress button.active span {
    animation: progress 5.5s linear forwards;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 1.2rem;
    display: grid;
    place-items: center;
    transition: background .3s, border-color .3s, transform .3s;
}

.hero-arrow--prev {
    left: 24px;
}

.hero-arrow--next {
    right: 24px;
}

.hero-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
}


/* ---------- 7. MARQUEE ---------- */
.marquee {
    background: var(--accent);
    overflow: hidden;
    padding: 16px 0;
    position: relative;
}

.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee-group {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.marquee-group li {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    white-space: nowrap;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 56px;
}

/* Small net-knot separator */
.marquee-group li::after {
    content: "";
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border: 2px solid var(--brand);
    margin-right: -28px;
    flex-shrink: 0;
}


/* ---------- 8. ABOUT ---------- */
.about {
    background: var(--white);
}

.about-media {
    position: relative;
    padding: 0 60px 70px 0;
}

.about-img {
    margin: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.about-img--main {
    aspect-ratio: 4 / 4.2;
}

.about-img--small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
    aspect-ratio: 1;
    border: 8px solid #fff;
    box-shadow: var(--shadow-lg);
}

.about-img img {
    transition: transform .8s var(--ease);
}

.about-media:hover .about-img--main img {
    transform: scale(1.05);
}

.about-badge {
    position: absolute;
    left: -14px;
    top: 36px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow);
    font-size: .92rem;
}

.about-badge i {
    font-size: 1.6rem;
    color: var(--accent);
}

.about-badge strong {
    display: block;
    font-family: var(--font-head);
}

.about .mesh-patch {
    position: absolute;
    right: 22px;
    top: -22px;
    width: 130px;
    height: 130px;
    z-index: -1;
    border-radius: var(--radius);
    opacity: .55;
}

.about-copy {
    padding-left: 12px;
}

.tick-grid {
    list-style: none;
    padding: 0;
    margin: 26px 0 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.tick-grid li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--ink);
    font-weight: 500;
    font-size: .96rem;
}

.tick-grid i {
    color: var(--accent-dark);
    font-size: 1.15rem;
    line-height: 1.4;
}

.about-contact {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding-top: 26px;
    border-top: 1px dashed var(--line);
}

.about-contact-note {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
}

.about-contact-note small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--steel);
    font-size: .82rem;
}

.about-contact-note a {
    color: var(--ink);
}

.about-contact-note a:hover {
    color: var(--accent-dark);
}


/* ---------- 9. SERVICES (ZIG-ZAG) ---------- */
.services {
    background: var(--cloud);
    overflow: hidden;
}

.svc {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 64px;
    margin-bottom: 90px;
}

.svc:last-child {
    margin-bottom: 0;
}

.svc--flip .svc-media {
    order: 2;
}

.svc-media {
    margin: 0;
    aspect-ratio: 16 / 11;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: visible;
    isolation: isolate;
}

.svc-media img {
    border-radius: var(--radius-lg);
    transition: filter .6s;
}

/* Offset net frame behind the image that shifts on hover */
.svc-media::before {
    content: "";
    position: absolute;
    inset: 22px -22px -22px 22px;
    z-index: -1;
    border-radius: var(--radius-lg);
    border: 2px solid var(--accent);
    background-image:
        repeating-linear-gradient(45deg, rgba(242, 154, 31, .28) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(-45deg, rgba(242, 154, 31, .28) 0 1px, transparent 1px 14px);
    transition: inset .6s var(--ease);
}

.svc--flip .svc-media::before {
    inset: 22px 22px -22px -22px;
}

.svc:hover .svc-media::before {
    inset: 10px -10px -10px 10px;
}

.svc--flip:hover .svc-media::before {
    inset: 10px 10px -10px -10px;
}

.svc-media {
    transition: transform .6s var(--ease);
}

.svc:hover .svc-media {
    transform: translateY(-6px);
}

.svc:hover .svc-media img {
    filter: saturate(1.12) contrast(1.03);
}

.svc-body h3 {
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    font-weight: 800;
    margin-bottom: 14px;
}

.svc-body>p {
    font-size: 1.04rem;
}

.svc-points {
    list-style: none;
    padding: 0;
    margin: 20px 0 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.svc-points li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 7px 15px 7px 13px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.svc-points li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

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

/* Floating decorative icons */
.float-icon {
    position: absolute;
    color: var(--brand);
    opacity: .09;
    pointer-events: none;
    animation: floatY 6s ease-in-out infinite;
}

.float-icon--a {
    font-size: 7rem;
    top: 60px;
    right: 4%;
}

.float-icon--b {
    font-size: 5rem;
    bottom: 90px;
    left: 3%;
    animation-delay: -3s;
}

.float-y {
    animation: floatY 5s ease-in-out infinite;
}


/* ---------- 10. WHY CHOOSE US (colour sweep) ---------- */
.why {
    background: var(--brand);
    color: rgba(255, 255, 255, .8);
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 26px);
}

.why .section-title {
    color: #fff;
    margin-bottom: 0;
}

.why-intro {
    margin: 0;
    font-size: 1.06rem;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
}

.why-card {
    position: relative;
    isolation: isolate;
    padding: 40px 30px 38px;
    border-right: 1px solid rgba(255, 255, 255, .14);
    transition: transform .4s var(--ease);
}

.why-card:last-child {
    border-right: 0;
}

/* The colour that sweeps in from the left when the card is "lit" */
.why-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease);
}

.why-card.is-lit::before {
    transform: scaleX(1);
}

.why-card i {
    font-size: 2rem;
    color: var(--accent);
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    margin-bottom: 22px;
    transition: color .5s, background .5s, transform .6s var(--ease);
}

.why-card h3 {
    color: #fff;
    font-size: 1.22rem;
    margin-bottom: 10px;
    transition: color .5s;
}

.why-card p {
    margin: 0;
    font-size: .96rem;
    transition: color .5s;
}

.why-card.is-lit i {
    color: var(--brand);
    background: rgba(255, 255, 255, .55);
    transform: rotate(-8deg) scale(1.05);
}

.why-card.is-lit h3 {
    color: var(--ink);
}

.why-card.is-lit p {
    color: #2C3A36;
}


/* ---------- 11. HOW IT WORKS ---------- */
.process {
    background: var(--white);
}

.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

/* The "cable" line connecting the steps — draws in when visible */
.steps::before,
.steps::after {
    content: "";
    position: absolute;
    top: 31px;
    left: 12.5%;
    right: 12.5%;
    height: 3px;
    border-radius: 3px;
}

.steps::before {
    background: var(--line);
}

.steps::after {
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.8s var(--ease);
}

.steps.is-drawn::after {
    transform: scaleX(1);
}

.step {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 6px;
}

.step-node {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.4rem;
    background: #fff;
    color: var(--brand);
    border: 3px solid var(--line);
    transition: background .5s, color .5s, border-color .5s, transform .4s var(--ease);
}

.steps.is-drawn .step-node {
    border-color: var(--accent);
}

.steps.is-drawn .step:nth-child(1) .step-node {
    transition-delay: .1s;
}

.steps.is-drawn .step:nth-child(2) .step-node {
    transition-delay: .6s;
}

.steps.is-drawn .step:nth-child(3) .step-node {
    transition-delay: 1.1s;
}

.steps.is-drawn .step:nth-child(4) .step-node {
    transition-delay: 1.6s;
}

.step:hover .step-node {
    background: var(--brand);
    color: #fff;
    transform: translateY(-5px);
    transition-delay: 0s;
}

.step h3 {
    font-size: 1.18rem;
    margin-bottom: 8px;
}

.step p {
    font-size: .95rem;
    margin: 0;
    max-width: 250px;
    margin-inline: auto;
}


/* ---------- 12. WHERE WE INSTALL (BENTO) ---------- */
.places {
    background: var(--mint);
}

.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 230px;
    gap: 16px;
}

.bento-tile {
    border-radius: var(--radius);
    display: block;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.bento-tile--tall {
    grid-row: span 2;
}

.bento-tile--wide {
    grid-column: span 2;
}

.bento-tile img {
    transition: transform .8s var(--ease);
}

.bento-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 36, 33, .85) 100%);
    transition: opacity .4s;
}

.bento-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    transform: translateY(22px);
    transition: transform .45s var(--ease);
}

.bento-cap strong {
    color: #fff;
    font-family: var(--font-head);
    font-size: 1.15rem;
}

.bento-cap small {
    color: rgba(255, 255, 255, .85);
    opacity: 0;
    transition: opacity .4s;
    font-size: .88rem;
}

/* Hover: caption slides up, subtitle appears, image zooms */
.bento-tile:hover {
    color: #fff;
}

.bento-tile:hover img {
    transform: scale(1.08);
}

.bento-tile:hover .bento-cap {
    transform: translateY(0);
}

.bento-tile:hover .bento-cap small {
    opacity: 1;
}


/* ---------- 13. GALLERY + LIGHTBOX ---------- */
.gallery {
    background: var(--white);
}

.g-item {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    border-radius: var(--radius-sm);
    cursor: zoom-in;
}

.g-item img {
    filter: grayscale(.35);
    transition: filter .5s, transform .6s var(--ease);
}

.g-item i {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--ink);
    font-size: 1.1rem;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .4s var(--ease);
}

.g-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 59, 54, .35);
    opacity: 0;
    transition: opacity .4s;
}

/* Hover: colour returns, slight rotate-zoom, icon pops */
.g-item:hover img {
    filter: grayscale(0);
    transform: scale(1.1) rotate(1.5deg);
}

.g-item:hover::after {
    opacity: 1;
}

.g-item:hover i,
.g-item:focus-visible i {
    transform: translate(-50%, -50%) scale(1);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(8, 24, 22, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 70px;
    animation: fadeIn .3s ease;
}

.lightbox[hidden] {
    display: none;
}

.lb-figure {
    margin: 0;
    max-width: 1000px;
    width: 100%;
    text-align: center;
}

.lb-figure img {
    max-height: 78vh;
    width: auto;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    background: var(--brand-2);
    min-width: 200px;
    min-height: 140px;
}

.lb-figure figcaption {
    color: rgba(255, 255, 255, .8);
    margin-top: 14px;
    font-size: .95rem;
}

.lb-close,
.lb-nav {
    position: absolute;
    border: 0;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    transition: background .3s;
}

.lb-close:hover,
.lb-nav:hover {
    background: var(--accent);
    color: var(--ink);
}

.lb-close {
    top: 18px;
    right: 18px;
}

.lb-nav--prev {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.lb-nav--next {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}


/* ---------- 14. TESTIMONIALS ---------- */
.reviews {
    background: var(--cloud);
    overflow: hidden;
}

.reviews-intro {
    font-size: 1.05rem;
}

.reviews-nav {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.rv-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    background: transparent;
    color: var(--brand);
    font-size: 1.15rem;
    display: grid;
    place-items: center;
    transition: background .3s, color .3s, transform .3s;
}

.rv-btn:hover {
    background: var(--brand);
    color: #fff;
}

#rvPrev:hover {
    transform: translateX(-4px);
}

#rvNext:hover {
    transform: translateX(4px);
}

.rv-viewport {
    overflow: hidden;
    border-radius: var(--radius-lg);
    touch-action: pan-y;
}

.rv-track {
    display: flex;
    transition: transform .7s var(--ease);
}

.rv-card {
    flex: 0 0 100%;
    margin: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 44px 46px 36px;
    box-shadow: var(--shadow-sm);
    position: relative;
    border-left: 5px solid var(--accent);
}

.rv-card::before {
    content: "\201C";
    position: absolute;
    right: 34px;
    top: -6px;
    font-family: Georgia, serif;
    font-size: 9rem;
    line-height: 1;
    color: var(--mint);
}

.rv-stars {
    color: var(--accent);
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    position: relative;
}

.rv-card blockquote {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.8vw, 1.38rem);
    color: var(--ink);
    line-height: 1.5;
    margin: 0 0 28px;
    position: relative;
}

.rv-card figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rv-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
}

.rv-card figcaption strong {
    display: block;
    font-family: var(--font-head);
}

.rv-card figcaption small {
    color: var(--steel);
}

.rv-dots {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.rv-dots button {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: 0;
    padding: 0;
    background: #C5D2CF;
    transition: width .4s var(--ease), background .3s;
}

.rv-dots button.active {
    width: 34px;
    background: var(--accent);
}


/* ---------- 15. FAQs ---------- */
.faqs {
    background: var(--white);
}

.faq-side {
    position: sticky;
    top: calc(var(--header-h) + 30px);
}

.faq-card {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 28px;
    background: var(--mint);
    border-radius: var(--radius);
    padding: 22px 24px;
    border: 1px solid var(--line);
}

.faq-card i {
    font-size: 2rem;
    color: var(--brand);
}

.faq-card strong {
    display: block;
    font-family: var(--font-head);
    margin-bottom: 2px;
}

.faq-card a {
    display: block;
    font-weight: 600;
    color: var(--brand-2);
}

.faq-list .accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--radius) !important;
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow .3s, border-color .3s;
}

.faq-list .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.faq-list .accordion-header {
    margin: 0;
}

.faq-list .accordion-button {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    padding: 20px 24px;
    background: #fff;
    box-shadow: none;
    gap: 16px;
}

.faq-list .accordion-button:not(.collapsed) {
    background: #fff;
    color: var(--brand);
}

.faq-list .accordion-button::after {
    background-image: none;
    content: "+";
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    font-weight: 500;
    background: var(--mint);
    color: var(--brand);
    transition: transform .35s var(--ease), background .3s;
}

.faq-list .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
    background: var(--accent);
    color: var(--ink);
}

.faq-list .accordion-body {
    padding: 0 24px 22px;
    font-size: .98rem;
}


/* ---------- 16. CTA BAND ---------- */
.cta-band {
    padding: 100px 0;
    background: var(--white);
}

.cta-inner {
    background: var(--brand);
    border-radius: var(--radius-lg);
    padding: 50px 56px;
    color: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cta-inner::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 300px;
    height: 300px;
    z-index: -1;
    opacity: .35;
    background-image:
        repeating-linear-gradient(45deg, var(--accent) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(-45deg, var(--accent) 0 1px, transparent 1px 18px);
    border-radius: 50%;
}

.cta-inner h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    margin-bottom: 6px;
}

.cta-inner p {
    margin: 0;
}

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


/* ---------- 17. CONTACT ---------- */
.contact {
    background: var(--cloud);
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 28px 0;
}

.info-list li {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.info-list li:first-child {
    padding-top: 0;
}

.info-list i {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #fff;
    color: var(--accent-dark);
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
    transition: background .3s, color .3s;
}

.info-list li:hover i {
    background: var(--brand);
    color: #fff;
}

.info-list strong {
    display: block;
    font-family: var(--font-head);
    margin-bottom: 2px;
}

.info-list a {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.info-list a:hover {
    color: var(--accent-dark);
}

.areas strong {
    font-family: var(--font-head);
    display: block;
    margin-bottom: 12px;
}

.areas ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.areas li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: .88rem;
    color: var(--ink);
    transition: border-color .3s, background .3s;
}

.areas li:hover {
    border-color: var(--accent);
    background: #FFF7EA;
}

.contact-form {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow);
    border-top: 5px solid var(--brand);
}

.contact-form h3 {
    font-size: 1.5rem;
    margin-bottom: 22px;
}

.form-label {
    font-weight: 600;
    color: var(--ink);
    font-size: .9rem;
    margin-bottom: 6px;
}

.form-control,
.form-select {
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 12px 15px;
    font-size: .98rem;
    color: var(--ink);
    transition: border-color .3s, box-shadow .3s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 4px rgba(23, 86, 78, .12);
}

.form-control.is-bad {
    border-color: #C0392B;
}

.form-error {
    color: #B03A2E;
    font-size: .9rem;
    min-height: 1.3em;
    margin: 12px 0 6px;
}

.btn-submit {
    margin-top: 4px;
}

.map-wrap {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    height: 360px;
    margin-top: 20px;
    background: var(--mint);
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* ---------- 18. FOOTER ---------- */
.site-footer {
    background: #0A2B27;
    color: rgba(255, 255, 255, .72);
    padding: 80px 0 0;
    font-size: .95rem;
}

.brand--footer .brand-text strong {
    color: #fff;
}

.brand--footer .brand-text small {
    color: rgba(255, 255, 255, .6);
}

.footer-about {
    margin-top: 18px;
    max-width: 340px;
}

.footer-title {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

/* Footer link hover: slides right with an amber dash */
.footer-links a {
    color: rgba(255, 255, 255, .72);
    display: inline-flex;
    align-items: center;
    gap: 0;
    transition: color .3s, gap .3s;
}

.footer-links a::before {
    content: "";
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .3s;
}

.footer-links a:hover {
    color: #fff;
    gap: 8px;
}

.footer-links a:hover::before {
    width: 12px;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.footer-contact i {
    color: var(--accent);
    margin-top: 2px;
}

.footer-contact a {
    color: rgba(255, 255, 255, .85);
    overflow-wrap: anywhere;
}

.footer-contact a:hover {
    color: var(--accent);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 50px;
    padding: 22px 70px 26px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .88rem;
}

.footer-bottom p {
    margin: 0;
}


/* ---------- 19. FLOATING BUTTONS & POPUP ---------- */
.float-btn {
    position: fixed;
    bottom: 22px;
    z-index: 1040;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .35);
    transition: transform .3s var(--ease);
}

.float-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    z-index: -1;
    animation: pulse 2s ease-out infinite;
}

.float-btn:hover {
    color: #fff;
    transform: scale(1.1);
}

.float-btn--wa {
    left: 22px;
    background: var(--whatsapp);
}

.float-btn--call {
    right: 22px;
    background: var(--accent-dark);
}

.float-btn--call i {
    animation: ring 2.4s ease-in-out infinite;
}

.popup {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(8, 24, 22, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .3s ease;
}

.popup[hidden] {
    display: none;
}

.popup-box {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 36px 32px 30px;
    width: 100%;
    max-width: 380px;
    position: relative;
    box-shadow: var(--shadow-lg);
    border-top: 5px solid var(--accent);
    animation: popIn .45s var(--ease);
}

.popup-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.popup-box p {
    font-size: .95rem;
}

.popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--cloud);
    color: var(--ink);
    display: grid;
    place-items: center;
    transition: background .3s, transform .3s;
}

.popup-close:hover {
    background: var(--accent);
    transform: rotate(90deg);
}

.popup-form .form-control {
    margin-bottom: 4px;
}

.popup-form .form-error {
    margin: 6px 0 10px;
}


/* ---------- 20. SCROLL REVEAL & KEYFRAMES ---------- */
.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal[data-reveal="left"] {
    transform: translateX(40px);
}

.reveal[data-reveal="right"] {
    transform: translateX(-40px);
}

.reveal[data-reveal="zoom"] {
    transform: scale(.94);
}

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

@keyframes capIn {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes floatY {

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

    50% {
        transform: translateY(-14px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: .6;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

@keyframes ring {

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

    10%,
    30% {
        transform: rotate(-14deg);
    }

    20%,
    40% {
        transform: rotate(14deg);
    }

    50% {
        transform: rotate(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.96);
    }

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

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-img {
        transition: none;
        transform: none;
    }
}


/* ---------- 21. RESPONSIVE ---------- */
@media (max-width: 1199.98px) {
    .site-header .nav-link {
        padding: 8px 10px !important;
    }

    .site-header .nav-link::after {
        left: 10px;
        right: 10px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --header-h: 68px;
    }

    .section {
        padding: 80px 0;
    }

    .site-header .navbar {
        padding: 8px 0;
    }

    .navbar-collapse {
        background: #fff;
        border-top: 1px solid var(--line);
        margin-top: 8px;
        padding: 10px 0 18px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .site-header .nav-link {
        padding: 11px 4px !important;
        border-bottom: 1px solid var(--cloud);
    }

    .site-header .nav-link::after {
        display: none;
    }

    .btn-call-header {
        margin: 16px 0 0;
        justify-content: center;
        width: 100%;
    }

    .about-media {
        padding: 0 40px 50px 0;
        margin-bottom: 20px;
    }

    .about-copy {
        padding-left: 0;
    }

    .svc,
    .svc--flip {
        grid-template-columns: 1fr;
        gap: 44px;
        margin-bottom: 80px;
    }

    .svc--flip .svc-media {
        order: 0;
    }

    .svc-media {
        margin-right: 22px;
    }

    .svc--flip .svc-media {
        margin-right: 0;
        margin-left: 22px;
    }

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

    .why-card:nth-child(2) {
        border-right: 0;
    }

    .why-card:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 48px;
    }

    .steps::before,
    .steps::after {
        display: none;
    }

    .steps .step-node {
        border-color: var(--accent);
    }

    .bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .bento-tile--wide {
        grid-column: span 2;
    }

    .faq-side {
        position: static;
    }

    .cta-inner {
        padding: 40px 34px;
    }

    .contact-form {
        padding: 32px 26px;
    }
}

@media (max-width: 767.98px) {
    .topbar {
        font-size: .8rem;
    }

    .topbar-list {
        gap: 14px;
    }

    .topbar .container>.topbar-list:first-child span {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero .carousel-item {
        height: 74vh;
        min-height: 460px;
    }

    .hero-arrow {
        display: none;
    }

    .hero-progress {
        bottom: 24px;
    }

    .hero-progress button {
        width: 42px;
    }

    .marquee-group li {
        font-size: 1rem;
    }

    .tick-grid {
        grid-template-columns: 1fr;
    }

    .about-badge {
        left: 0;
        top: 18px;
        padding: 10px 14px;
        font-size: .85rem;
    }

    .section-head {
        margin-bottom: 40px;
    }

    .float-icon {
        display: none;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-card {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
        padding: 30px 24px;
    }

    .why-card:last-child {
        border-bottom: 0;
    }

    .steps {
        grid-template-columns: 1fr;
        row-gap: 0;
        text-align: left;
    }

    /* Vertical cable on mobile */
    .step {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 20px;
        text-align: left;
        padding: 0 0 34px;
    }

    .step::before {
        content: "";
        position: absolute;
        left: 31px;
        top: 64px;
        bottom: 0;
        width: 3px;
        background: var(--accent);
        opacity: .35;
    }

    .step:last-child::before {
        display: none;
    }

    .step-node {
        grid-row: span 2;
        margin: 0;
    }

    .step h3 {
        align-self: end;
        margin-top: 8px;
    }

    .step p {
        margin: 0;
        max-width: none;
    }

    .bento {
        grid-auto-rows: 160px;
        gap: 10px;
    }

    .bento-tile--tall {
        grid-row: span 2;
    }

    .bento-cap {
        padding: 14px;
        transform: none;
    }

    .bento-cap strong {
        font-size: 1rem;
    }

    .bento-cap small {
        display: none;
    }

    .rv-card {
        padding: 34px 26px 28px;
    }

    .rv-card::before {
        font-size: 6rem;
        right: 18px;
    }

    .cta-band {
        padding: 70px 0;
    }

    .cta-inner {
        padding: 34px 24px;
    }

    .cta-actions,
    .cta-actions a {
        width: 100%;
        justify-content: center;
    }

    .map-wrap {
        height: 280px;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
        padding: 22px 0 88px;
    }

    .float-btn {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
        bottom: 16px;
    }

    .float-btn--wa {
        left: 14px;
    }

    .float-btn--call {
        right: 14px;
    }
}

@media (max-width: 400px) {
    .brand-text strong {
        font-size: 1.08rem;
    }

    .brand-text small {
        display: none;
    }

    .svc-actions a {
        flex: 1 1 auto;
        justify-content: center;
    }

    .about-media {
        padding: 0 24px 40px 0;
    }
}