/* =============================================================
   Relentra Ventures Private Limited — "Coastal Teal"
   Public site stylesheet
   Palette: teal · coral · sand · mint  |  Outfit + Nunito Sans
   Design language: large radii, soft diffuse shadows, wave dividers
   ============================================================= */

:root {
    /* --- Palette ------------------------------------------- */
    --teal:        #0E7C7B;
    --teal-deep:   #0A5C5B;
    --teal-700:    #0C6E6D;
    --teal-100:    #C9E7E3;
    --coral:       #FF6B5A;
    --coral-deep:  #E8503F;
    --coral-100:   #FFE2DD;
    --sand:        #FFF8F0;
    --sand-200:    #F6E9DA;
    --mint:        #E6F4F1;
    --ink:         #173B3A;
    /* Darkened from #6E8B8A so secondary copy clears WCAG AA (4.5:1) on
       white, sand AND mint — the lightest of the three (mint) now measures
       4.8:1 instead of the 3.3:1 the old value gave. */
    --muted:       #52706F;
    --white:       #FFFFFF;
    --line:        #E4EFEC;

    /* --- Shape & depth ------------------------------------- */
    --r-xl:        32px;
    --r-card:      24px;
    --r-md:        18px;
    --r-sm:        12px;
    --r-pill:      999px;

    /* Layered shadows: a tight contact shadow, a mid ambient layer and a wide
       diffuse layer. Several low-opacity layers read as real depth, where a
       single large blur just looks blurry. */
    --shadow-xs:   0 1px 1px rgba(23,59,58,.04),
                   0 2px 6px -2px rgba(14,92,91,.10);
    --shadow-soft: 0 1px 2px rgba(23,59,58,.04),
                   0 4px 10px -4px rgba(14,92,91,.13),
                   0 14px 30px -16px rgba(14,92,91,.20);
    --shadow-lift: 0 2px 4px rgba(23,59,58,.05),
                   0 10px 22px -8px rgba(10,92,91,.18),
                   0 28px 56px -24px rgba(10,92,91,.28);
    --shadow-head: 0 1px 2px rgba(23,59,58,.04),
                   0 8px 26px -14px rgba(10,92,91,.24);

    /* Edge treatments — the quiet part of depth: a 1px top highlight makes a
       surface feel lit from above, a hairline gives it an edge. */
    --edge-top:    inset 0 1px 0 rgba(255,255,255,.7);
    --edge-hair:   0 0 0 1px rgba(14,124,123,.055);
    --lift-ease:   cubic-bezier(.22,1,.36,1);
    --ring:        0 0 0 4px rgba(255, 107, 90, .30);

    --container:   1180px;
    --ease:        cubic-bezier(.2, .9, .3, 1);

    /* --- Type ---------------------------------------------- */
    --font-display: "Outfit", "Trebuchet MS", sans-serif;
    --font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 120px;
}
body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink);
    background: var(--sand);
    line-height: 1.7;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--ink);
}
h1 { font-size: clamp(2.15rem, 5.2vw, 3.65rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p  { color: var(--muted); }

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.text-center { text-align: center; }

/* Default size for every inline icon() SVG; components override as needed. */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.eyebrow .icon { width: 15px; height: 15px; }

/* --- Accessibility ----------------------------------------- */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    /* teal-deep rather than coral: white-on-coral is only 2.8:1, and the very
       first control a keyboard user meets has to be legible. */
    background: var(--teal-deep); color: #fff;
    padding: .7rem 1.2rem; border-radius: 0 0 var(--r-md) 0;
    font-weight: 700; z-index: 300;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- Scroll progress bar ----------------------------------- */
.scroll-progress {
    position: fixed; inset: 0 auto auto 0;
    height: 4px; width: 100%;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--coral), var(--coral-deep));
    z-index: 250;
    will-change: transform;
}

/* =============================================================
   Buttons
   ============================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .85rem 1.7rem;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-weight: 700; font-size: .95rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease),
                background-color .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease);
    text-align: center;
}
.btn .icon { width: 18px; height: 18px; }
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 12px 26px -12px rgba(255,107,90,.85); }
.btn-coral:hover { background: var(--coral-deep); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(255,107,90,.9); }
.btn-teal { background: var(--teal); color: #fff; box-shadow: 0 12px 26px -14px rgba(14,124,123,.9); }
.btn-teal:hover { background: var(--teal-deep); transform: translateY(-2px); }
.btn-outline { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn-outline:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }
.btn-soft { background: var(--mint); color: var(--teal-deep); }
.btn-soft:hover { background: var(--teal-100); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--teal-deep); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-ghost-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }
.btn-whatsapp { background: #25D366; color: #08331b; }
.btn-whatsapp:hover { background: #1eb85a; transform: translateY(-2px); }
.btn-block { width: 100%; }

/* =============================================================
   Floating rounded header
   ============================================================= */
.site-header {
    position: sticky;
    top: 14px;
    z-index: 200;
    padding: 14px 0 0;
}
.header-card {
    position: relative;
    display: flex; align-items: center; gap: 1rem;
    background: var(--white);
    border-radius: 20px;
    padding: .7rem .85rem .7rem 1.1rem;
    box-shadow: var(--shadow-head);
    border: 1px solid rgba(14,124,123,.07);
    transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.scrolled .header-card {
    box-shadow: 0 18px 44px -16px rgba(10,92,91,.34);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.brand-logo {
    /* Logos are wider than they are tall — height-driven with a max width and
       object-fit:contain so the mark is never cropped. */
    height: 42px; width: auto; max-width: 74px;
    border-radius: 10px; object-fit: contain;
    background: #fff; padding: 2px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.06rem; color: var(--teal-deep); letter-spacing: -.02em;
}
.brand-text em {
    font-style: normal; font-size: .64rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
}

.primary-nav { margin-inline: auto; }
.primary-nav ul { display: flex; align-items: center; gap: .15rem; }
.nav-link {
    display: block; padding: .55rem .85rem;
    border-radius: var(--r-pill);
    font-size: .92rem; font-weight: 600; color: var(--ink);
    transition: background-color .2s var(--ease), color .2s var(--ease);
    white-space: nowrap;
}
.nav-link:hover { background: var(--mint); color: var(--teal-deep); }
.nav-link.active { background: var(--mint); color: var(--teal); }
.nav-cta-mobile { display: none; }

.header-cta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--coral); color: #fff;
    padding: .68rem 1.35rem; border-radius: var(--r-pill);
    font-weight: 700; font-size: .9rem;
    box-shadow: 0 10px 22px -12px rgba(255,107,90,.95);
    transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.header-cta:hover { background: var(--coral-deep); transform: translateY(-2px); }
.header-cta.active { background: var(--teal); box-shadow: 0 10px 22px -12px rgba(14,124,123,.9); }

.nav-toggle {
    display: none; margin-left: auto;
    width: 44px; height: 44px; border: none; border-radius: 14px;
    background: var(--mint); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
    display: block; width: 19px; height: 2px; border-radius: 2px;
    background: var(--teal-deep); transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   Sections & wave dividers
   ============================================================= */
.section        { padding: clamp(3.4rem, 7vw, 5.6rem) 0; }
.section-tight  { padding: clamp(2.2rem, 4vw, 3.2rem) 0; }
.bg-sand  { background: var(--sand); }
.bg-white { background: var(--white); }
.bg-mint  { background: var(--mint); }
/* Vertical (not diagonal) so the top edge is exactly --teal and the bottom
   edge exactly --teal-deep — the wave dividers above and below can then match
   those two colours precisely and meet the section with no seam. */
.bg-teal  { background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%); color: #fff; }
.bg-teal h1, .bg-teal h2, .bg-teal h3, .bg-teal h4 { color: #fff; }
.bg-teal p { color: rgba(255,255,255,.82); }

.wave-divider { line-height: 0; }
.wave-divider svg {
    display: block; width: 100%;
    height: clamp(38px, 5.5vw, 78px);
}

.section-head { max-width: 720px; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: .8rem; font-size: 1.03rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--coral-100); color: var(--coral-deep);
    padding: .38rem 1rem; border-radius: var(--r-pill);
    font-size: .74rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 1rem;
}
.bg-teal .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.bg-mint .eyebrow { background: #fff; color: var(--teal); }

/* =============================================================
   Hero
   ============================================================= */
.hero {
    position: relative;
    background: var(--sand);
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
    overflow: hidden;
}
.hero-blob {
    position: absolute; pointer-events: none; border-radius: 50%;
    filter: blur(70px); opacity: .55;
}
.hero-blob.b1 { width: 460px; height: 460px; right: -80px; top: -60px;
    background: radial-gradient(circle at 30% 30%, rgba(255,107,90,.55), transparent 65%); }
.hero-blob.b2 { width: 520px; height: 520px; right: 120px; top: 180px;
    background: radial-gradient(circle at 60% 40%, rgba(14,124,123,.40), transparent 65%); }
.hero-blob.b3 { width: 340px; height: 340px; left: -140px; bottom: -120px;
    background: radial-gradient(circle at 50% 50%, rgba(14,124,123,.28), transparent 65%); }

.hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 .accent {
    color: var(--teal);
    background-image: linear-gradient(transparent 62%, rgba(255,107,90,.32) 62%);
}
.hero-lead { font-size: 1.1rem; max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.trust-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
    margin-top: 2.1rem; padding-top: 1.4rem;
    border-top: 1px dashed var(--sand-200);
}
.trust-row span {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .86rem; font-weight: 600; color: var(--teal-deep);
}
.trust-row .icon { width: 17px; height: 17px; color: var(--coral); }

/* --- Three overlapping rotated cards ----------------------- */
.hero-stack {
    position: relative;
    min-height: 510px;
}
.stack-card {
    position: absolute;
    background: #fff;
    border-radius: var(--r-card);
    box-shadow: var(--shadow-lift);
    padding: 1.5rem 1.5rem 1.6rem;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    border: 1px solid rgba(14,124,123,.07);
}
.stack-card h3 { font-size: 1.02rem; margin-bottom: .8rem; }
.stack-card:hover { transform: rotate(0deg) translateY(-6px); z-index: 6; }

.sc-services { width: 74%; left: 0; top: 0; transform: rotate(-4.5deg); z-index: 3; }
.sc-services ul { display: grid; gap: .55rem; }
.sc-services li {
    display: flex; align-items: center; gap: .6rem;
    font-size: .88rem; font-weight: 600; color: var(--ink);
}
.sc-services li .dot-ic {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--mint); color: var(--teal);
    display: grid; place-items: center; flex-shrink: 0;
}
.sc-services li .dot-ic .icon { width: 16px; height: 16px; }

.sc-stat {
    width: 47%; right: 0; top: 168px; z-index: 5;
    transform: rotate(5deg);
    background: linear-gradient(150deg, var(--teal), var(--teal-deep));
    color: #fff; border-color: transparent;
}
.sc-stat .big {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2.5rem; line-height: 1; color: #fff;
}
.sc-stat .lbl { font-size: .8rem; color: rgba(255,255,255,.85); margin-top: .3rem; }
.sc-stat hr { border: none; border-top: 1px solid rgba(255,255,255,.25); margin: .9rem 0; }

.sc-contact {
    width: 58%; left: 0; bottom: 0; z-index: 4;
}
.sc-contact { transform: rotate(3deg); }
.sc-contact .wa-mark {
    width: 42px; height: 42px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: grid; place-items: center; margin-bottom: .7rem;
}
.sc-contact p { font-size: .85rem; margin-bottom: .7rem; }
.sc-contact .num { font-weight: 700; color: var(--teal-deep); font-size: .95rem; }

/* =============================================================
   Icon-circle feature blocks
   ============================================================= */
.feature-grid {
    display: grid; gap: 1.4rem;
    grid-template-columns: repeat(4, 1fr);
}
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.feature {
    background: #fff;
    border-radius: var(--r-card);
    padding: 1.9rem 1.6rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(14,124,123,.06);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.icon-circle {
    width: 62px; height: 62px; border-radius: 50%;
    background: var(--mint); color: var(--teal);
    display: grid; place-items: center;
    margin-bottom: 1.1rem;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.icon-circle .icon { width: 27px; height: 27px; }
.feature:hover .icon-circle { background: var(--coral-100); color: var(--coral-deep); }
.feature h3 { margin-bottom: .5rem; }
.feature p { font-size: .93rem; }
.feature-link {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: 1rem; font-weight: 700; font-size: .88rem; color: var(--coral-deep);
}
.feature-link .icon { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.feature-link:hover .icon { transform: translateX(4px); }

.bg-teal .feature { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); box-shadow: none; }
.bg-teal .feature h3 { color: #fff; }
.bg-teal .feature p { color: rgba(255,255,255,.8); }
.bg-teal .icon-circle { background: rgba(255,255,255,.16); color: #fff; }
.bg-teal .feature:hover .icon-circle { background: #fff; color: var(--teal-deep); }

/* =============================================================
   Services carousel (scroll-snap)
   ============================================================= */
.carousel { position: relative; }
.carousel-viewport {
    display: flex; gap: 1.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* No CSS scroll-behavior here on purpose: combined with mandatory snapping
       it swallows programmatic scrolls. main.js animates scrollLeft itself. */
    padding: .6rem .2rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--teal-100) transparent;
    -webkit-overflow-scrolling: touch;
}
.carousel-viewport::-webkit-scrollbar { height: 8px; }
.carousel-viewport::-webkit-scrollbar-track { background: transparent; }
.carousel-viewport::-webkit-scrollbar-thumb { background: var(--teal-100); border-radius: var(--r-pill); }

.svc-card {
    scroll-snap-align: start;
    flex: 0 0 360px; max-width: 86vw;
    background: #fff;
    border-radius: var(--r-card);
    padding: 1.9rem 1.7rem 1.7rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(14,124,123,.06);
    display: flex; flex-direction: column;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* The final card snaps to the END of the viewport. Without this the last few
   snap positions sit beyond the maximum scroll offset, and mandatory snapping
   would drag the track back to the first card on every attempt to scroll. */
.carousel-viewport > :last-child { scroll-snap-align: end; }

.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.svc-card h3 { font-size: 1.28rem; margin-bottom: .55rem; }
.svc-card > p { font-size: .93rem; }
.svc-card .chip-list { margin: 1.1rem 0 1.3rem; }
.svc-card .btn { margin-top: auto; align-self: flex-start; }
.svc-count {
    display: block; margin-bottom: 1.1rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}

.carousel-controls { display: none; align-items: center; justify-content: center; gap: 1.1rem; }
.carousel.is-enhanced .carousel-controls { display: flex; }
.car-btn {
    width: 48px; height: 48px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    color: var(--teal-deep);
    display: grid; place-items: center; cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: transform .25s var(--ease), background-color .25s var(--ease),
                color .25s var(--ease);
}
.car-btn:hover { background: var(--coral); color: #fff; transform: translateY(-2px); }
.car-btn[hidden] { display: none; }
.car-btn .icon { width: 20px; height: 20px; }
.car-dots { display: flex; align-items: center; gap: 0; }
/* 10px dot painted inside a 34px tap target (content-box + padding). */
.car-dot {
    box-sizing: content-box;
    width: 10px; height: 10px; padding: 12px;
    border: none; border-radius: var(--r-pill); cursor: pointer;
    background: var(--teal-100); background-clip: content-box;
    transition: width .25s var(--ease), background-color .25s var(--ease);
}
.car-dot:hover { background: var(--muted); background-clip: content-box; }
.car-dot.active { width: 30px; background: var(--coral); background-clip: content-box; }

/* --- Chips ------------------------------------------------- */
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    display: inline-block;
    background: var(--mint); color: var(--teal-deep);
    padding: .36rem .85rem; border-radius: var(--r-pill);
    font-size: .82rem; font-weight: 600;
}
.bg-mint .chip { background: var(--sand); }
.bg-teal .chip { background: rgba(255,255,255,.14); color: #fff; }
.chip-coral { background: var(--coral-100); color: var(--coral-deep); }

/* =============================================================
   Vertical detail blocks (services.php)
   ============================================================= */
.vertical {
    display: grid; grid-template-columns: 300px 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    background: #fff;
    border-radius: var(--r-xl);
    padding: clamp(1.6rem, 3.5vw, 2.6rem);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(14,124,123,.06);
    margin-bottom: 1.6rem;
    scroll-margin-top: 130px;
}
.vertical h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.vertical .v-side p { font-size: .93rem; margin-bottom: 1.2rem; }
.v-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.v-item {
    display: flex; align-items: flex-start; gap: .65rem;
    background: var(--sand); border-radius: var(--r-md);
    padding: .8rem 1rem; font-size: .9rem; font-weight: 600; color: var(--ink);
}
.v-item .icon { width: 17px; height: 17px; color: var(--teal); flex-shrink: 0; margin-top: 4px; }

/* =============================================================
   Split blocks
   ============================================================= */
.split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 3.6rem); align-items: center;
}
.split-media {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    background: linear-gradient(150deg, var(--mint), #fff);
    display: grid; place-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    aspect-ratio: 4 / 3;
}
.split-media img { object-fit: contain; max-height: 100%; border-radius: var(--r-md); }

.check-list { display: grid; gap: .65rem; margin: 1.3rem 0 1.7rem; }
.check-list li {
    display: flex; align-items: flex-start; gap: .65rem;
    font-size: .96rem; color: var(--ink); font-weight: 600;
}
.check-list li::before {
    content: ""; flex-shrink: 0;
    width: 22px; height: 22px; margin-top: 3px; border-radius: 50%;
    background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C7B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.bg-teal .check-list li { color: #fff; }

/* =============================================================
   Steps / process
   ============================================================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.step {
    background: #fff; border-radius: var(--r-card);
    padding: 1.8rem 1.5rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(14,124,123,.06);
}
.step-num {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--coral-100); color: var(--coral-deep);
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    margin-bottom: 1rem;
}
.step h4 { font-size: 1.08rem; margin-bottom: .4rem; }
.step p { font-size: .9rem; }

/* =============================================================
   Stats band
   ============================================================= */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.stat {
    text-align: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--r-card);
    padding: 1.7rem 1rem;
}
.stat .num {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1; color: #fff;
}
.stat .lbl {
    font-size: .84rem; margin-top: .5rem;
    color: rgba(255,255,255,.82); font-weight: 600;
    letter-spacing: .03em;
}

/* =============================================================
   Tag cloud
   ============================================================= */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .65rem; }
.tag {
    background: #fff; color: var(--teal-deep);
    border: 1px solid var(--line);
    padding: .55rem 1.15rem; border-radius: var(--r-pill);
    font-size: .89rem; font-weight: 600;
    transition: transform .25s var(--ease), background-color .25s var(--ease),
                color .25s var(--ease), border-color .25s var(--ease);
}
.tag:hover { background: var(--coral); color: #fff; border-color: var(--coral); transform: translateY(-2px); }
.bg-teal .tag { background: rgba(255,255,255,.11); color: #fff; border-color: rgba(255,255,255,.2); }
.bg-teal .tag:hover { background: #fff; color: var(--teal-deep); }

/* =============================================================
   Page hero (inner pages)
   ============================================================= */
.page-hero {
    position: relative; overflow: hidden;
    background: var(--sand);
    padding: clamp(2.4rem, 5vw, 3.8rem) 0 clamp(2.6rem, 5vw, 4rem);
}
.page-hero .container { position: relative; z-index: 1; max-width: 880px; }
.page-hero h1 { margin-bottom: .9rem; }
.page-hero p { font-size: 1.06rem; max-width: 62ch; }
.breadcrumb {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem; font-weight: 600;
}
.breadcrumb a:hover { color: var(--coral-deep); }
.breadcrumb span { opacity: .5; }
.leopard-logo-lg {
    height: 104px; width: auto; max-width: 280px;
    border-radius: var(--r-card); object-fit: contain;
    background: #fff; padding: .7rem 1rem;
    margin-bottom: 1.3rem; box-shadow: var(--shadow-soft);
}

/* =============================================================
   CTA card
   ============================================================= */
.cta-card {
    position: relative; overflow: hidden;
    border-radius: var(--r-xl);
    background: linear-gradient(140deg, var(--teal), var(--teal-deep));
    color: #fff;
    padding: clamp(2.2rem, 5vw, 3.6rem);
    text-align: center;
    box-shadow: var(--shadow-lift);
}
.cta-card::after {
    content: ""; position: absolute; inset: auto -60px -120px auto;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,107,90,.55), transparent 68%);
    pointer-events: none;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { color: #fff; margin-bottom: .7rem; }
.cta-card p { color: rgba(255,255,255,.85); max-width: 56ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }

/* =============================================================
   Contact page
   ============================================================= */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.6rem; align-items: start; }

.info-card {
    background: #fff; border-radius: var(--r-card);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(14,124,123,.06);
    display: flex; gap: 1rem; align-items: flex-start;
    margin-bottom: 1rem;
    transition: transform .3s var(--ease);
}
.info-card:hover { transform: translateY(-4px); }
.info-card .icon-circle { width: 50px; height: 50px; margin: 0; flex-shrink: 0; }
.info-card .icon-circle .icon { width: 22px; height: 22px; }
.info-card h4 { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.info-card p, .info-card a { font-size: .95rem; color: var(--ink); font-weight: 600; }
.info-card a:hover { color: var(--coral-deep); }

.form-card {
    background: #fff; border-radius: var(--r-xl);
    padding: clamp(1.6rem, 3.5vw, 2.6rem);
    box-shadow: var(--shadow-lift);
    border: 1px solid rgba(14,124,123,.06);
}
.form-card > p { margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label {
    display: block; font-weight: 700; font-size: .84rem;
    color: var(--teal-deep); margin-bottom: .4rem;
}
.field .req { color: var(--coral-deep); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: .85rem 1.05rem;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: var(--sand);
    font-size: .96rem;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--coral); background: #fff; box-shadow: var(--ring);
}
.field-error { display: block; color: var(--coral-deep); font-size: .82rem; margin-top: .3rem; font-weight: 700; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: .9rem; text-align: center; }

.alert {
    padding: 1rem 1.3rem; border-radius: var(--r-md);
    margin-bottom: 1.3rem; font-weight: 700; font-size: .94rem;
}
.alert-success { background: var(--mint); color: var(--teal-deep); border: 1px solid var(--teal-100); }
.alert-error { background: var(--coral-100); color: var(--coral-deep); border: 1px solid #f7c4bd; }

.map-embed {
    border-radius: var(--r-xl); overflow: hidden;
    box-shadow: var(--shadow-soft); background: var(--mint);
    line-height: 0;
}
.map-embed iframe { width: 100%; height: 400px; border: 0; display: block; }

/* --- FAQ accordion ----------------------------------------- */
.faq { max-width: 840px; margin-inline: auto; display: grid; gap: .9rem; }
.faq-item {
    background: #fff; border-radius: var(--r-card);
    border: 1px solid rgba(14,124,123,.08);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow .3s var(--ease);
}
.faq-item.open { box-shadow: var(--shadow-soft); }
.faq-q {
    width: 100%; display: flex; align-items: center; gap: 1rem;
    background: none; border: none; cursor: pointer;
    padding: 1.2rem 1.4rem; text-align: left;
    font-family: var(--font-display); font-weight: 600; font-size: 1.03rem;
    color: var(--ink);
}
.faq-q:hover { color: var(--teal); }
.faq-mark {
    position: relative; margin-left: auto; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--mint); color: var(--teal);
    display: grid; place-items: center;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.faq-mark::before, .faq-mark::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 13px; height: 2.5px; margin: -1.25px 0 0 -6.5px;
    border-radius: 2px; background: currentColor;
}
.faq-mark::after { transform: rotate(90deg); transition: transform .3s var(--ease), opacity .3s; }
.faq-item.open .faq-mark { background: var(--coral); color: #fff; }
.faq-item.open .faq-mark::after { transform: rotate(0deg); opacity: 0; }
.faq-a { padding: 0 1.4rem 1.35rem; }
.faq-a p { font-size: .96rem; }

/* =============================================================
   Gallery
   ============================================================= */
.gallery-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filter-btn {
    background: #fff; border: 1px solid var(--line); color: var(--teal-deep);
    padding: .55rem 1.25rem; border-radius: var(--r-pill);
    font-size: .89rem; font-weight: 700; cursor: pointer;
    transition: all .25s var(--ease);
}
.filter-btn:hover { border-color: var(--coral); color: var(--coral-deep); }
.filter-btn.active { background: var(--coral); border-color: var(--coral); color: #fff; }

.masonry { columns: 3; column-gap: 1.2rem; }
.gallery-item {
    break-inside: avoid; margin: 0 0 1.2rem;
    position: relative; overflow: hidden;
    border-radius: var(--r-card);
    box-shadow: var(--shadow-soft);
    cursor: zoom-in;
    background: var(--mint);
}
.gallery-item img { width: 100%; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gi-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(232,80,63,.94), rgba(255,107,90,.55) 55%, rgba(255,107,90,0));
    opacity: 0; transition: opacity .35s var(--ease);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.3rem; color: #fff;
}
.gallery-item:hover .gi-overlay, .gallery-item:focus-within .gi-overlay { opacity: 1; }
.gi-cat {
    align-self: flex-start;
    background: rgba(255,255,255,.26);
    padding: .2rem .7rem; border-radius: var(--r-pill);
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: .5rem;
}
.gi-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }

.gallery-empty {
    text-align: center; background: #fff;
    border-radius: var(--r-xl); padding: clamp(2.4rem, 6vw, 4rem);
    box-shadow: var(--shadow-soft);
}
.gallery-empty .icon-circle { margin: 0 auto 1.2rem; }
.gallery-empty p { margin-top: .6rem; }

.lightbox {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(10, 92, 91, .94);
    display: none; place-items: center; padding: 1.5rem;
}
.lightbox.open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--r-card); box-shadow: var(--shadow-lift); }
.lightbox-close {
    position: absolute; top: 1.2rem; right: 1.2rem;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--coral); color: #fff; border: none;
    font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: var(--coral-deep); }

/* =============================================================
   Mega footer
   ============================================================= */
.site-footer { background: var(--teal-deep); color: rgba(255,255,255,.72); }
/* The global `p { color: var(--muted) }` rule wins over the footer's inherited
   colour, which left the copyright line as grey-teal on teal-deep (2.1:1).
   Re-assert the footer's own text colour for every paragraph inside it; the
   more specific .footer-strip / .footer-about rules below still take over. */
.site-footer p { color: rgba(255,255,255,.72); }

.footer-strip { background: var(--teal); }
.footer-strip-inner {
    display: grid; grid-template-columns: 1fr auto; gap: 1.6rem;
    align-items: center;
    padding: clamp(1.8rem, 4vw, 2.6rem) 0;
}
.footer-strip h3 { color: #fff; font-size: 1.4rem; margin-bottom: .35rem; }
.footer-strip p { color: rgba(255,255,255,.78); font-size: .93rem; }
.profile-form { display: flex; flex-wrap: wrap; gap: .7rem; }
.profile-form input[type="email"] {
    width: min(320px, 70vw);
    padding: .85rem 1.2rem;
    border-radius: var(--r-pill);
    border: 2px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.12);
    color: #fff; font-size: .95rem;
}
.profile-form input[type="email"]::placeholder { color: rgba(255,255,255,.62); }
.profile-form input[type="email"]:focus {
    outline: none; border-color: #fff; background: rgba(255,255,255,.2);
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    padding: clamp(2.6rem, 5vw, 4rem) 0 2.4rem;
}
.footer-col h4 {
    color: #fff; font-size: .8rem; letter-spacing: .14em;
    text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a { font-size: .93rem; transition: color .2s, padding-left .2s; }
.footer-col ul a:hover { color: var(--coral); padding-left: 4px; }
.footer-about p { color: rgba(255,255,255,.7); font-size: .93rem; margin-bottom: 1.2rem; }
.footer-logo {
    height: 58px; width: auto; max-width: 150px;
    border-radius: var(--r-md); object-fit: contain;
    background: #fff; padding: .45rem .6rem;
    margin-bottom: 1rem;
}
.footer-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-social a {
    background: rgba(255,255,255,.1); color: #fff;
    padding: .35rem .9rem; border-radius: var(--r-pill);
    font-size: .82rem; font-weight: 600;
}
.footer-social a:hover { background: var(--coral); }
.footer-contact { display: grid; gap: .85rem; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; }
.ficon { width: 19px; height: 19px; color: var(--coral); flex-shrink: 0; margin-top: 4px; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom-inner {
    display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
    justify-content: space-between; align-items: center;
    padding: 1.3rem 0; font-size: .84rem;
}

/* --- Floating WhatsApp ------------------------------------- */
.whatsapp-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 220;
    display: inline-flex; align-items: center; gap: .55rem;
    background: #25D366; color: #fff;
    padding: .8rem 1.25rem; border-radius: var(--r-pill);
    font-weight: 700; font-size: .9rem;
    box-shadow: 0 16px 34px -12px rgba(37,211,102,.8);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.03); }

/* =============================================================
   Reveal on scroll
   ============================================================= */
.reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1080px) {
    .primary-nav ul { gap: 0; }
    .nav-link { padding: .5rem .55rem; font-size: .85rem; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .stats-band { grid-template-columns: repeat(2, 1fr); }
    .masonry { columns: 2; }
    .vertical { grid-template-columns: 240px 1fr; }
}

@media (max-width: 960px) {
    body { font-size: 16px; }
    .site-header { top: 10px; padding-top: 10px; }
    .nav-toggle { display: flex; }
    .header-cta { display: none; }
    .primary-nav {
        position: absolute; left: 0; right: 0; top: calc(100% + 10px);
        background: #fff; border-radius: 20px;
        box-shadow: var(--shadow-lift);
        padding: .8rem; margin: 0;
        display: none;
    }
    .primary-nav.open { display: block; }
    .primary-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
    .nav-link { padding: .8rem 1rem; font-size: .98rem; border-radius: 14px; }
    .nav-cta-mobile {
        display: block; text-align: center; margin-top: .4rem;
        background: var(--coral); color: #fff; padding: .85rem 1rem;
        border-radius: var(--r-pill); font-weight: 700; font-size: .95rem;
    }
    .nav-cta-mobile:hover { background: var(--coral-deep); color: #fff; }

    .hero-inner { grid-template-columns: 1fr; }
    .hero-stack { min-height: 440px; max-width: 500px; margin-inline: auto; width: 100%; }
    .split { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .vertical { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-strip-inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .feature-grid, .feature-grid.cols-3, .feature-grid.cols-2 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .v-items { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .masonry { columns: 1; }
    .footer-grid { grid-template-columns: 1fr; }
    .profile-form { width: 100%; }
    .profile-form input[type="email"] { width: 100%; }
    .profile-form .btn { width: 100%; }
    .hero-stack { min-height: 0; display: grid; gap: 1rem; max-width: none; }
    .stack-card { position: static; width: 100%; transform: none; }
    .stack-card:hover { transform: translateY(-4px); }
}

@media (max-width: 420px) {
    .container { width: min(100% - 1.4rem, var(--container)); }
    .brand-text strong { font-size: .95rem; }
    .brand-logo { height: 38px; width: auto; max-width: 66px; }
    .svc-card { flex-basis: 80vw; padding: 1.5rem 1.3rem; }
    .btn { padding: .8rem 1.25rem; font-size: .9rem; }
    .stats-band { grid-template-columns: 1fr; }
    .whatsapp-float span { display: none; }
    .whatsapp-float { padding: .9rem; }
}

/* --- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- Print -------------------------------------------------- */
@media print {
    .site-header, .whatsapp-float, .scroll-progress, .carousel-controls { display: none !important; }
    body { background: #fff; }
}

/* =============================================================
   GALLERY — layout, shape, hover and scroll effects
   All variants are driven by Admin → Settings → Gallery.
   ============================================================= */

/* ---- Spacing ---- */
.gal { --gal-gap: 1.25rem; }
.gal--gap-tight  { --gal-gap: .55rem; }
.gal--gap-normal { --gal-gap: 1.25rem; }
.gal--gap-wide   { --gal-gap: 2.1rem; }

/* ---- Layout: uniform grid ---- */
.gal--grid { display: grid; gap: var(--gal-gap); grid-template-columns: repeat(var(--gal-cols, 3), 1fr); }
.gal--cols-2 { --gal-cols: 2; }
.gal--cols-3 { --gal-cols: 3; }
.gal--cols-4 { --gal-cols: 4; }

/* ---- Layout: masonry (CSS columns, natural heights) ---- */
.gal--masonry { column-count: var(--gal-cols, 3); column-gap: var(--gal-gap); }
.gal--masonry .gallery-item { break-inside: avoid; margin-bottom: var(--gal-gap); display: block; width: 100%; }

/* ---- Layout: horizontal scroll carousel ---- */
.gal--carousel {
    display: flex; gap: var(--gal-gap); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .6rem; scroll-behavior: smooth;
    scrollbar-width: thin; scrollbar-color: rgba(14,124,123,.35) transparent;
}
.gal--carousel::-webkit-scrollbar { height: 8px; }
.gal--carousel::-webkit-scrollbar-thumb { background: rgba(14,124,123,.3); border-radius: 4px; }
.gal--carousel .gallery-item {
    flex: 0 0 clamp(240px, 32%, 380px); scroll-snap-align: start; margin: 0;
}
.gal-nav { display: flex; justify-content: center; gap: .7rem; margin-top: 1.4rem; }
.gal-arrow {
    width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(14,124,123,.28);
    background: #fff; color: var(--teal, #0E7C7B); font-size: 1.1rem; cursor: pointer;
    transition: all .25s ease; display: grid; place-items: center;
}
.gal-arrow:hover { background: var(--teal, #0E7C7B); color: #fff; transform: translateY(-2px); }
.gal-arrow[disabled] { opacity: .35; cursor: default; transform: none; }

/* ---- Image shape ---- */
.gal .gallery-item img { width: 100%; display: block; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.gal--ratio-auto  .gallery-item img { height: auto; }
.gal--ratio-4-3   .gallery-item img { aspect-ratio: 4/3; object-fit: cover; }
.gal--ratio-1-1   .gallery-item img { aspect-ratio: 1/1; object-fit: cover; }
.gal--ratio-3-4   .gallery-item img { aspect-ratio: 3/4; object-fit: cover; }

.gal .gallery-item {
    position: relative; overflow: hidden; border-radius: 20px; cursor: pointer;
    background: #eef4f3; box-shadow: 0 6px 22px rgba(23,59,58,.08);
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.gal .gallery-item:focus-visible { outline: 3px solid var(--coral, #FF6B5A); outline-offset: 3px; }

/* ---- Hover effects ---- */
.gal--hover-zoom  .gallery-item:hover img { transform: scale(1.08); }
.gal--hover-lift  .gallery-item:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(23,59,58,.20); }
.gal--hover-tint  .gallery-item .gi-overlay { background: linear-gradient(to top, rgba(255,107,90,.86), rgba(255,107,90,.18)); opacity: 0; }
.gal--hover-tint  .gallery-item:hover .gi-overlay { opacity: 1; }
.gal--hover-reveal .gallery-item .gi-overlay { transform: translateY(100%); opacity: 1; }
.gal--hover-reveal .gallery-item:hover .gi-overlay { transform: translateY(0); }
.gal--hover-none  .gallery-item:hover img { transform: none; }
.gal--hover-none  .gallery-item .gi-overlay { opacity: 1; }

.gal .gi-overlay {
    position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.2rem;
    background: linear-gradient(to top, rgba(23,59,58,.9), transparent);
    color: #fff; display: flex; flex-direction: column; gap: .15rem;
    transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.gal .gi-overlay--bare { padding: 0; height: 40%; }
.gal .gi-cat { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-soft, #FFB3A8); font-weight: 700; }
.gal .gi-title { font-family: var(--font-display, inherit); font-size: 1.05rem; line-height: 1.25; }

/* ---- Scroll-in animation ---- */
.gal[data-reveal]:not([data-reveal="none"]) .gallery-item { opacity: 0; will-change: opacity, transform; }
.gal[data-reveal="fade-up"]    .gallery-item { transform: translateY(26px); }
.gal[data-reveal="fade"]       .gallery-item { transform: none; }
.gal[data-reveal="zoom-in"]    .gallery-item { transform: scale(.92); }
.gal[data-reveal="slide-side"] .gallery-item:nth-child(odd)  { transform: translateX(-34px); }
.gal[data-reveal="slide-side"] .gallery-item:nth-child(even) { transform: translateX(34px); }
/* Must out-specify the :not() rule above (0,4,0), otherwise revealed items
   stay at opacity 0 and the gallery renders blank. */
.gal[data-reveal]:not([data-reveal="none"]) .gallery-item.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
/* Safety net: if JavaScript never runs, never leave the gallery invisible. */
.no-js .gal .gallery-item { opacity: 1 !important; transform: none !important; }
.gal[data-stagger="1"] .gallery-item.is-in { transition-delay: calc(var(--i, 0) * 65ms); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .gal--grid, .gal--masonry { --gal-cols: 2; }
    .gal--masonry { column-count: 2; }
    .gal--carousel .gallery-item { flex-basis: clamp(220px, 60%, 320px); }
}
@media (max-width: 560px) {
    .gal--grid { grid-template-columns: 1fr; }
    .gal--masonry { column-count: 1; }
    .gal--carousel .gallery-item { flex-basis: 82%; }
    .gal { --gal-gap: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .gal .gallery-item { opacity: 1 !important; transform: none !important; transition: none !important; }
    .gal--carousel { scroll-behavior: auto; }
}

/* =============================================================
   CMS CONTENT BLOCKS
   Rendered by theme/views/blocks.php for anything the client adds
   under Admin → Pages → Content sections.
   ============================================================= */
.section-head { max-width: 46rem; margin: 0 auto 2.6rem; text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }
.section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin: .5rem 0 .7rem; }
.section-head .lead { color: var(--muted, #6E8B8A); font-size: 1.06rem; }

.block-rich { color: var(--muted, #6E8B8A); line-height: 1.75; }
.block-rich > *:first-child { margin-top: 0; }
.block-rich h2, .block-rich h3 { color: var(--ink, #173B3A); margin: 1.4rem 0 .6rem; }
.block-rich p { margin: 0 0 1rem; }
.block-rich ul, .block-rich ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.block-rich li { margin-bottom: .4rem; }
.block-rich a { color: var(--teal, #0E7C7B); text-decoration: underline; }
.block-rich blockquote { margin: 1.2rem 0; padding: .6rem 0 .6rem 1.1rem;
    border-left: 4px solid var(--coral, #FF6B5A); font-style: italic; color: var(--ink, #173B3A); }
.block-rich img { max-width: 100%; border-radius: 18px; }

.block-media { margin: 0 auto 1.8rem; max-width: 60rem; border-radius: 24px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(23,59,58,.12); }
.block-media img { width: 100%; display: block; }
.block-cta { margin-top: 1.6rem; text-align: center; }
.section-head--left + .block-rich + .block-cta, .split .block-cta { text-align: left; }

/* --- Card grid --- */
.card-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(var(--cg, 3), 1fr); }
.card-grid.cols-1 { --cg: 1; }
.card-grid.cols-2 { --cg: 2; }
.card-grid.cols-3 { --cg: 3; }
.card-grid.cols-4 { --cg: 4; }

.feature-card, .step-card, .quote-card {
    background: #fff; border: 1px solid rgba(14,124,123,.10); border-radius: 24px; padding: 1.9rem;
    box-shadow: 0 6px 22px rgba(23,59,58,.06);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.feature-card:hover, .step-card:hover, .quote-card:hover {
    transform: translateY(-6px); box-shadow: 0 20px 44px rgba(23,59,58,.14);
}
.feature-card h3, .step-card h3 { font-size: 1.22rem; margin: .9rem 0 .5rem; }
.feature-card p, .step-card p, .fc-body { color: var(--muted, #6E8B8A); font-size: .97rem; }
.fc-body > *:first-child { margin-top: 0; }
.fc-body > *:last-child { margin-bottom: 0; }
.feature-card .chip-list { margin-top: 1rem; }

.step-num { display: inline-block; font-family: var(--font-display, inherit); font-size: 2.1rem;
    font-weight: 700; color: var(--coral, #FF6B5A); opacity: .5; line-height: 1; }

.quote-card { position: relative; }
.quote-card .quote-mark { position: absolute; top: .4rem; right: 1.2rem; font-size: 3.4rem;
    line-height: 1; color: rgba(255,107,90,.28); font-family: Georgia, serif; }
.quote-card p { font-style: italic; color: var(--ink, #173B3A); }
.quote-card footer { margin-top: 1rem; display: flex; flex-direction: column; }
.quote-card footer strong { color: var(--teal, #0E7C7B); font-size: .95rem; }
.quote-card footer span { color: var(--muted, #6E8B8A); font-size: .84rem; }

/* --- Split block --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split--flip .split-copy { order: 2; }
[data-block] .split-media { border-radius: 26px; overflow: hidden; box-shadow: 0 16px 44px rgba(23,59,58,.14); }
[data-block] .split-media img { width: 100%; display: block; }
.split-placeholder { aspect-ratio: 4/3; display: grid; place-items: center;
    background: linear-gradient(150deg, rgba(14,124,123,.12), rgba(255,107,90,.16)); }
.split-placeholder svg { width: 62px; height: 62px; color: var(--teal, #0E7C7B); opacity: .55; }

/* --- Map --- */
.map-embed { border-radius: 24px; overflow: hidden; box-shadow: 0 10px 34px rgba(23,59,58,.12); }

.muted { color: var(--muted, #6E8B8A); }

/* --- Block reveal --- */
.card-grid .reveal, .feature-card, .step-card, .quote-card { will-change: transform; }
[data-block] .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

@media (max-width: 900px) {
    .card-grid.cols-3, .card-grid.cols-4 { --cg: 2; }
    .split { grid-template-columns: 1fr; gap: 2rem; }
    .split--flip .split-copy { order: 0; }
}
@media (max-width: 620px) {
    .card-grid { --cg: 1 !important; }
    .section-head { margin-bottom: 2rem; }
}


/* =============================================================
   Logo containment
   Logos are wide lockups. They must always be contained inside their
   frame — never cropped by object-fit:cover, and never stretched.
   ============================================================= */
.split-media img[alt*="logo"], .split-media img[alt*="Logo"] {
    object-fit: contain;
    width: auto; max-width: 78%; max-height: 74%;
    margin: 0 auto; display: block;
    filter: drop-shadow(0 6px 18px rgba(23,59,58,.10));
}
.split-media:has(img[alt*="logo"]), .split-media:has(img[alt*="Logo"]) {
    display: grid; place-items: center; padding: 2.2rem;
    background: linear-gradient(150deg, #fff, var(--mint, #E6F4F1));
    aspect-ratio: 4 / 3;
}
@media (max-width: 620px) {
    .brand-logo { height: 36px; max-width: 62px; }
    .leopard-logo-lg { height: 78px; max-width: 210px; }
}

/* =============================================================
   DEPTH
   A restrained elevation pass: layered shadows, a 1px top highlight
   and a hairline edge so surfaces sit above the page rather than
   floating on a single soft blur. Deliberately subtle.
   ============================================================= */

/* --- Raised surfaces ------------------------------------------------- */
.feature-card, .step-card, .quote-card,
.card, .stat-card, .info-card, .value-card, .svc-card,
.form-card, .faq, .map-embed, .cta-card {
    box-shadow: var(--edge-hair), var(--shadow-soft), var(--edge-top);
    transition: transform .38s var(--lift-ease), box-shadow .38s var(--lift-ease);
}
.feature-card:hover, .step-card:hover, .quote-card:hover,
.card:hover, .value-card:hover, .svc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--edge-hair), var(--shadow-lift), var(--edge-top);
}

/* --- Media ------------------------------------------------------------ */
.split-media, .gallery-item, .block-media, .leopard-logo-lg, .footer-logo {
    box-shadow: var(--edge-hair), var(--shadow-soft);
}
.gallery-item { transition: transform .38s var(--lift-ease), box-shadow .38s var(--lift-ease); }
.gallery-item:hover { box-shadow: var(--edge-hair), var(--shadow-lift); }

/* --- Small pieces: the ones that usually stay flat -------------------- */
.chip, .tag, .filter-btn, .gal-filter, .pill, .badge {
    box-shadow: 0 1px 1px rgba(23,59,58,.04), 0 1px 3px -1px rgba(14,92,91,.10);
    transition: transform .25s var(--lift-ease), box-shadow .25s var(--lift-ease);
}
.chip:hover, .tag:hover, .filter-btn:hover, .gal-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(23,59,58,.05), 0 4px 10px -3px rgba(14,92,91,.18);
}

.icon-circle {
    box-shadow: var(--edge-top), 0 1px 2px rgba(23,59,58,.05), 0 6px 14px -6px rgba(14,92,91,.22);
}

/* --- Buttons: a touch of lift, pressed state pushes back in ----------- */
.btn {
    box-shadow: 0 1px 1px rgba(23,59,58,.05), 0 3px 8px -3px rgba(14,92,91,.22);
    transition: transform .25s var(--lift-ease), box-shadow .25s var(--lift-ease), background-color .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 3px rgba(23,59,58,.06), 0 10px 20px -6px rgba(14,92,91,.30); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 1px rgba(23,59,58,.06), 0 1px 3px rgba(14,92,91,.18); }
.btn-coral:hover { box-shadow: 0 2px 3px rgba(23,59,58,.06), 0 10px 22px -6px rgba(255,107,90,.42); }

/* --- Header: sits above the page, a little more so once scrolled ------ */
.site-header, .header-inner, .nav-shell {
    box-shadow: var(--edge-hair), var(--shadow-head), var(--edge-top);
}

/* --- Form fields: inset, so inputs read as recessed ------------------- */
.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    box-shadow: inset 0 1px 2px rgba(23,59,58,.05);
    transition: box-shadow .25s var(--lift-ease), border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
    box-shadow: inset 0 1px 2px rgba(23,59,58,.03), 0 0 0 3px rgba(255,107,90,.16);
}

/* --- Floating affordances -------------------------------------------- */
.wa-float, .whatsapp-float, .wa {
    box-shadow: 0 2px 4px rgba(23,59,58,.10), 0 10px 24px -8px rgba(37,211,102,.50);
}

/* Depth should never fight the section colour it sits on. */
.bg-teal .feature-card, .bg-teal .card, .bg-teal .quote-card {
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 26px -12px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
}

@media (prefers-reduced-motion: reduce) {
    .feature-card, .step-card, .quote-card, .card, .gallery-item,
    .chip, .tag, .filter-btn, .btn { transition: none !important; }
    .feature-card:hover, .step-card:hover, .quote-card:hover, .card:hover,
    .chip:hover, .tag:hover, .filter-btn:hover, .btn:hover { transform: none !important; }
}

/* =============================================================
   PHOTO MEDIA IN CONTENT BLOCKS
   The base .split-media is a 4:3 frame built for wide logos. Photographs
   (portraits especially) need their own frame or they get cropped.
   These rules target images that are NOT logos.
   ============================================================= */

[data-block] .split-media:has(img:not([alt*="logo"]):not([alt*="Logo"])) {
    aspect-ratio: 1 / 1;              /* matches our square portraits */
    padding: 0;                        /* photo goes edge to edge */
    position: relative;
    isolation: isolate;
    background: linear-gradient(150deg, var(--mint, #E6F4F1), #fff);
}

[data-block] .split-media img:not([alt*="logo"]):not([alt*="Logo"]) {
    width: 100%;
    height: 100%;
    max-height: none;                  /* clear the logo-era constraint */
    object-fit: cover;
    object-position: 50% 20%;          /* bias upward so faces stay in frame */
    border-radius: inherit;
    display: block;
    transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .6s ease;
    will-change: transform;
}

/* --- Effect 1: slow, gentle zoom on hover --------------------------- */
[data-block] .split-media:hover img:not([alt*="logo"]) {
    transform: scale(1.045);
    filter: saturate(1.06) contrast(1.02);
}

/* --- Effect 2: soft vignette, grounding the photo in the frame ------ */
[data-block] .split-media:has(img:not([alt*="logo"]))::after {
    content: "";
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        linear-gradient(to top, rgba(23,59,58,.24), rgba(23,59,58,.05) 34%, transparent 62%),
        radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(23,59,58,.16) 100%);
    opacity: .85;
    transition: opacity .6s ease;
}
[data-block] .split-media:hover::after { opacity: .6; }

/* --- Effect 3: inner hairline ring, so the photo reads as framed ---- */
[data-block] .split-media:has(img:not([alt*="logo"]))::before {
    content: "";
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.34),
        inset 0 0 0 6px rgba(255,255,255,.12);
}

/* --- Effect 4: a warm accent edge on the mirrored block -------------- */
[data-block] .split--flip .split-media:has(img:not([alt*="logo"]))::before {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.34),
        inset 0 0 0 6px rgba(255,107,90,.14);
}

/* --- Effect 5: lift the whole frame slightly on hover ---------------- */
[data-block] .split-media {
    transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
[data-block] .split-media:hover {
    transform: translateY(-5px);
    box-shadow: var(--edge-hair), var(--shadow-lift);
}

/* Wider than tall? Give landscape photos a 4:3 frame instead. */
@supports not (selector(:has(*))) {
    /* Fallback for browsers without :has() — never crop, letterbox instead. */
    [data-block] .split-media img { object-fit: contain; }
}

/* Keep portraits portrait on small screens too — a 4:3 frame here would
   cover-crop a square photo top and bottom and cut off chins. */
@media (max-width: 900px) {
    [data-block] .split-media:has(img:not([alt*="logo"]):not([alt*="Logo"])) {
        aspect-ratio: 1 / 1;
        max-width: 420px;
        margin-inline: auto;
    }
}
@media (max-width: 480px) {
    [data-block] .split-media:has(img:not([alt*="logo"]):not([alt*="Logo"])) {
        max-width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-block] .split-media, [data-block] .split-media img { transition: none !important; }
    [data-block] .split-media:hover, [data-block] .split-media:hover img { transform: none !important; }
}

/* --- Footer developer credit ----------------------------------------- */
.footer-credit { font-size: .82rem; opacity: .72; }
.footer-credit a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.28);
    padding-bottom: 1px;
    transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: var(--coral, #FF6B5A);
    border-bottom-color: var(--coral, #FF6B5A);
}
@media (max-width: 760px) {
    .footer-credit { margin-top: .35rem; }
}

/* =============================================================
   Touch targets
   -------------------------------------------------------------
   Scoped to touch pointers so the desktop layout is untouched.
   WCAG 2.5.8 asks for 44x44px; the footer links, carousel dots
   and filter chips were all under that on a phone.
   ============================================================= */
@media (hover: none) and (pointer: coarse) {

    /* Footer link columns: pad each row out to a comfortable 44px
       without changing the visible text size or the column rhythm. */
    .footer-col ul { gap: 0; }
    .footer-col ul li > a,
    .footer-contact li > a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-block: .25rem;
    }
    .footer-contact li { align-items: center; }

    /* The footer credit sits alone on its own line, so give it room too. */
    .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

    /* Carousel dots: keep the small visual dot, enlarge the hit area
       around it using a transparent border rather than a bigger dot. */
    .car-dots { gap: .15rem; }
    .car-dot {
        min-width: 44px;
        min-height: 44px;
        border: 14px solid transparent;
        background-clip: content-box;
        box-sizing: border-box;
    }
    .car-dot.active { width: 44px; background-clip: content-box; }

    /* Gallery / section filter chips. */
    .filter-btn, .gal-filter, .chip, .tag, .pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* 16px is the threshold below which iOS Safari zooms the page in
       when a field receives focus. Hold every control at or above it. */
    .field input, .field select, .field textarea,
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="url"], input[type="search"], textarea, select {
        font-size: 16px;
    }
}