/* =========================================================================
   Class ON — Location landing pages (/delhi, /mumbai, ...)
   =========================================================================

   Loaded only on location pages. Every colour comes from a --loc-* custom
   property set per page from the theme editor, so a city can be re-themed
   from admin with no rebuild and no new stylesheet.

   Scoped under .loc-page so nothing here can leak into the rest of the site.
   ========================================================================= */

.loc-page {
    /* Fallbacks only. The real values arrive inline from the theme editor. */
    --loc-primary: #d32027;
    --loc-primary-light: #f2565d;
    --loc-primary-dark: #7a0f16;
    --loc-primary-darker: #4a0810;
    --loc-secondary: #1f2937;
    --loc-accent: #ff202b;
    --loc-hero-from: #1a0205;
    --loc-hero-to: #3d060d;
    --loc-surface: #ffffff;
    --loc-surface-alt: #faf7f7;
    --loc-text: #1a1a1a;
    --loc-text-muted: #5b6470;
    --loc-button-radius: 10px;
    --loc-card-radius: 16px;

    --loc-shell: 1240px;
    --loc-gap: 28px;
    --loc-section-y: 88px;

    font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--loc-text);
    background: var(--loc-surface);
    overflow-x: clip;
}

/* =========================================================================
   Location Page Header Navbar Styling
   ========================================================================= */

/* 1. At Top (Transparent Navbar) */
body:has(.loc-page) #header:not(.scroll):not(.is-scrolled),
.loc-page-body #header:not(.scroll):not(.is-scrolled),
body.loc-page-body #header:not(.scroll):not(.is-scrolled),
body:has(.loc-page) .wsmainfull:not(.scroll):not(.is-scrolled),
.loc-page-body .wsmainfull:not(.scroll):not(.is-scrolled),
body.loc-page-body .wsmainfull:not(.scroll):not(.is-scrolled) {
    background: transparent !important;
    box-shadow: none !important;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 992px) {
    /* 1. Header & Navigation Structure */
    body:has(.loc-page) #header,
    .loc-page-body #header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important;
        z-index: 1000 !important;
        background: transparent !important;
    }

    body:has(.loc-page) #header.scroll,
    .loc-page-body #header.scroll {
        position: fixed !important;
        background: #ffffff !important;
    }

    body:has(.loc-page) .header-wrapper,
    .loc-page-body .header-wrapper {
        height: 70px !important;
    }

    body:has(.loc-page) .wsmainfull,
    body:has(.loc-page) #header .wsmainfull,
    .loc-page-body .wsmainfull,
    .loc-page-body #header .wsmainfull {
        padding: 0 !important;
        margin: 0 !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        line-height: normal !important;
        display: flex !important;
        align-items: center !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    body:has(.loc-page) #header.scroll .wsmainfull,
    body:has(.loc-page) .wsmainfull.scroll,
    .loc-page-body #header.scroll .wsmainfull,
    .loc-page-body .wsmainfull.scroll {
        background-color: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }

    body:has(.loc-page) .wsmainwp,
    body:has(.loc-page) #header .wsmainwp,
    .loc-page-body .wsmainwp,
    .loc-page-body #header .wsmainwp {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 auto !important;
        line-height: normal !important;
        width: 100% !important;
    }

    /* 2. Logo Alignment (Both Default and Scrolled) */
    body:has(.loc-page) .desktoplogo,
    .loc-page-body .desktoplogo {
        order: 1 !important;
        height: 70px !important;
        display: flex !important;
        align-items: center !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
    }

    body:has(.loc-page) .desktoplogo a,
    .loc-page-body .desktoplogo a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 70px !important;
        line-height: normal !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.loc-page) .desktoplogo img,
    .loc-page-body .desktoplogo img {
        height: 42px !important;
        max-height: 42px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
    }

    /* Default (Transparent Header): Show White Logo, Hide Black Logo */
    body:has(.loc-page) #header:not(.scroll):not(.is-scrolled) .desktoplogo a.logo-black,
    .loc-page-body #header:not(.scroll):not(.is-scrolled) .desktoplogo a.logo-black,
    body:has(.loc-page) .wsmainfull:not(.scroll):not(.is-scrolled) .desktoplogo a.logo-black,
    .loc-page-body .wsmainfull:not(.scroll):not(.is-scrolled) .desktoplogo a.logo-black {
        display: none !important;
    }

    body:has(.loc-page) #header:not(.scroll):not(.is-scrolled) .desktoplogo a.logo-white,
    .loc-page-body #header:not(.scroll):not(.is-scrolled) .desktoplogo a.logo-white,
    body:has(.loc-page) .wsmainfull:not(.scroll):not(.is-scrolled) .desktoplogo a.logo-white,
    .loc-page-body .wsmainfull:not(.scroll):not(.is-scrolled) .desktoplogo a.logo-white {
        display: flex !important;
    }

    body:has(.loc-page) #header:not(.scroll):not(.is-scrolled) .desktoplogo:has(a.logo-black),
    .loc-page-body #header:not(.scroll):not(.is-scrolled) .desktoplogo:has(a.logo-black) {
        display: none !important;
    }

    body:has(.loc-page) #header:not(.scroll):not(.is-scrolled) .wsmenu > .wsmenu-list > li > a.h-link,
    .loc-page-body #header:not(.scroll):not(.is-scrolled) .wsmenu > .wsmenu-list > li > a.h-link,
    body:has(.loc-page) .wsmainfull:not(.scroll):not(.is-scrolled) .wsmenu > .wsmenu-list > li > a.h-link,
    .loc-page-body .wsmainfull:not(.scroll):not(.is-scrolled) .wsmenu > .wsmenu-list > li > a.h-link {
        color: rgba(255, 255, 255, 0.95) !important;
        font-weight: 500;
    }

    /* Scrolled (White Sticky Header): Show Black Logo, Hide White Logo */
    body:has(.loc-page) #header.scroll .desktoplogo a.logo-black,
    body:has(.loc-page) #header.is-scrolled .desktoplogo a.logo-black,
    .loc-page-body #header.scroll .desktoplogo a.logo-black,
    .loc-page-body #header.is-scrolled .desktoplogo a.logo-black,
    body:has(.loc-page) .wsmainfull.scroll .desktoplogo a.logo-black,
    body:has(.loc-page) .wsmainfull.is-scrolled .desktoplogo a.logo-black,
    .loc-page-body .wsmainfull.scroll .desktoplogo a.logo-black,
    .loc-page-body .wsmainfull.is-scrolled .desktoplogo a.logo-black {
        display: flex !important;
    }

    body:has(.loc-page) #header.scroll .desktoplogo a.logo-white,
    body:has(.loc-page) #header.is-scrolled .desktoplogo a.logo-white,
    .loc-page-body #header.scroll .desktoplogo a.logo-white,
    .loc-page-body #header.is-scrolled .desktoplogo a.logo-white,
    body:has(.loc-page) .wsmainfull.scroll .desktoplogo a.logo-white,
    body:has(.loc-page) .wsmainfull.is-scrolled .desktoplogo a.logo-white,
    .loc-page-body .wsmainfull.scroll .desktoplogo a.logo-white,
    .loc-page-body .wsmainfull.is-scrolled .desktoplogo a.logo-white {
        display: none !important;
    }

    body:has(.loc-page) #header.scroll .desktoplogo:has(a.logo-white),
    .loc-page-body #header.scroll .desktoplogo:has(a.logo-white) {
        display: none !important;
    }

    /* 3. Navigation Links */
    body:has(.loc-page) .wsmenu,
    .loc-page-body .wsmenu {
        order: 2 !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: 18px !important;
        height: 100% !important;
    }

    body:has(.loc-page) .wsmenu > .wsmenu-list,
    .loc-page-body .wsmenu > .wsmenu-list {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
    }

    body:has(.loc-page) .wsmenu > .wsmenu-list > li,
    .loc-page-body .wsmenu > .wsmenu-list > li {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    body:has(.loc-page) .wsmenu > .wsmenu-list > li.d-lg-none,
    .loc-page-body .wsmenu > .wsmenu-list > li.d-lg-none {
        display: none !important;
    }

    body:has(.loc-page) .wsmenu > .wsmenu-list > li > a.h-link,
    .loc-page-body .wsmenu > .wsmenu-list > li > a.h-link {
        display: flex !important;
        align-items: center !important;
        line-height: 70px !important;
        padding: 0 16px !important;
    }

    body:has(.loc-page) #header.scroll .wsmenu > .wsmenu-list > li > a.h-link,
    body:has(.loc-page) #header.is-scrolled .wsmenu > .wsmenu-list > li > a.h-link,
    .loc-page-body #header.scroll .wsmenu > .wsmenu-list > li > a.h-link,
    .loc-page-body #header.is-scrolled .wsmenu > .wsmenu-list > li > a.h-link,
    body:has(.loc-page) .wsmainfull.scroll .wsmenu > .wsmenu-list > li > a.h-link,
    body:has(.loc-page) .wsmainfull.is-scrolled .wsmenu > .wsmenu-list > li > a.h-link,
    .loc-page-body .wsmainfull.scroll .wsmenu > .wsmenu-list > li > a.h-link,
    .loc-page-body .wsmainfull.is-scrolled .wsmenu > .wsmenu-list > li > a.h-link {
        color: #1e293b !important;
        font-weight: 500;
    }

    body:has(.loc-page) #header.scroll .wsmenu > .wsmenu-list > li:hover > a.h-link,
    body:has(.loc-page) #header.is-scrolled .wsmenu > .wsmenu-list > li:hover > a.h-link,
    .loc-page-body #header.scroll .wsmenu > .wsmenu-list > li:hover > a.h-link,
    .loc-page-body #header.is-scrolled .wsmenu > .wsmenu-list > li:hover > a.h-link,
    body:has(.loc-page) .wsmainfull.scroll .wsmenu > .wsmenu-list > li:hover > a.h-link,
    body:has(.loc-page) .wsmainfull.is-scrolled .wsmenu > .wsmenu-list > li:hover > a.h-link,
    .loc-page-body .wsmainfull.scroll .wsmenu > .wsmenu-list > li:hover > a.h-link,
    .loc-page-body .wsmainfull.is-scrolled .wsmenu > .wsmenu-list > li:hover > a.h-link {
        color: #d32027 !important;
    }

    /* 4. Request Free Demo Button */
    body:has(.loc-page) .nl-simple.float-end,
    .loc-page-body .nl-simple.float-end {
        order: 3 !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
    }

    body:has(.loc-page) #header #testing-server,
    .loc-page-body #header #testing-server {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important;
        line-height: 1 !important;
        padding: 0 20px !important;
        margin: 0 !important;
        background-color: #d32027 !important;
        border-color: #d32027 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 14px rgba(211, 32, 39, 0.4) !important;
        vertical-align: middle !important;
    }
}

.loc-page *,
.loc-page *::before,
.loc-page *::after {
    box-sizing: border-box;
}

.loc-shell {
    width: min(100% - 40px, var(--loc-shell));
    margin-inline: auto;
}

.loc-section {
    padding-block: var(--loc-section-y);
    position: relative;
}

.loc-section--tight {
    padding-block: calc(var(--loc-section-y) * 0.65);
}

.loc-section--alt {
    background: var(--loc-surface-alt);
}

/* ---------------------------------------------------------------- type -- */

.loc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--loc-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.loc-eyebrow--ghost {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    backdrop-filter: blur(4px);
}

.loc-h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.loc-h3 {
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 10px;
}

.loc-accent {
    color: var(--loc-primary);
}

/* Section templates wrap the city name in .loc-accent-red inside a shared
   .loc-h2. Until now the only rules for it were scoped to two specific
   section titles, so everywhere else the span rendered in body ink and the
   highlight silently did nothing. Themed rather than hardcoded red, so a
   re-themed city accents in its own colour. */
.loc-accent-red {
    color: var(--loc-primary);
}

.loc-lead {
    font-size: 16px;
    line-height: 1.72;
    color: var(--loc-text-muted);
    margin: 0;
    max-width: 60ch;
}

.loc-center {
    text-align: center;
}

.loc-center .loc-lead {
    margin-inline: auto;
}

.loc-rich > *:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------- buttons -- */

.loc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--loc-button-radius);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.loc-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.loc-btn--primary {
    background: var(--loc-primary);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(211, 32, 39, 0.75);
}

.loc-btn--primary:hover {
    background: var(--loc-primary-dark);
    color: #fff;
    box-shadow: 0 16px 30px -12px rgba(211, 32, 39, 0.85);
}

.loc-btn--outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.loc-btn--outline:hover {
    background: #fff;
    color: var(--loc-primary-dark);
}

.loc-btn--light {
    background: #fff;
    color: var(--loc-primary);
}

.loc-btn--light:hover {
    color: var(--loc-primary-dark);
}

.loc-btn--cta-dark {
    background: rgba(0, 0, 0, 0.22);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
}

.loc-btn--cta-dark:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}

.loc-btn--ghost-dark {
    border-color: rgba(0, 0, 0, 0.16);
    color: var(--loc-text);
}

.loc-btn--ghost-dark:hover {
    border-color: var(--loc-primary);
    color: var(--loc-primary);
}

.loc-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

/* "View All Features" under the module cards: centred, clear of the cards,
   and above the section's background photo layer. */
.loc-modules__cta {
    justify-content: center;
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

/* ----------------------------------------------------------------- hero -- */

.loc-hero {
    position: relative;
    background: linear-gradient(135deg, #130103 0%, #200307 40%, #2e050a 100%);
    color: #fff;
    padding-block: 84px 104px;
    isolation: isolate;
    overflow: hidden;
}

/* Ambient backlight glow */
.loc-hero::before {
    content: '';
    position: absolute;
    inset-block-start: 35%;
    inset-inline-end: 25%;
    translate: 50% -50%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 28, 36, 0.28) 0%, rgba(230, 28, 36, 0.08) 50%, transparent 75%);
    z-index: -1;
    pointer-events: none;
}

/* Smooth organic bottom transition into white section */
.loc-hero::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 70px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.08) 100%);
    pointer-events: none;
}

.loc-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.loc-hero__title {
    font-size: clamp(34px, 4.2vw, 52px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.loc-hero__title span {
    display: inline;
    color: var(--loc-accent, #ff202b);
}

.loc-hero__bar {
    width: 48px;
    height: 3.5px;
    background: #d32027;
    border-radius: 2px;
    margin: 0 0 20px;
}

.loc-hero__text {
    font-size: 15.5px;
    line-height: 1.68;
    color: rgba(255, 255, 255, 0.88);
    max-width: 50ch;
    margin: 0;
}

.loc-hero__usps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.loc-hero__usp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.07);
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.loc-hero__usp:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 59, 71, 0.4);
}

.loc-hero__usp i {
    color: var(--loc-accent, #ff3b47);
    font-size: 15px;
    flex: none;
}

.loc-hero__art {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 360px;
}

.loc-hero__art img,
.loc-hero__art svg {
    width: 100%;
    height: auto;
    max-width: 520px;
    display: block;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
}

/* Floating "Proudly Serving" card */
.loc-floatcard {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 8px;
    z-index: 5;
}

.loc-floatcard--white {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 18px 24px;
    width: 180px;
    max-width: 180px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    overflow: hidden;
}

.loc-floatcard--white .loc-floatcard__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fee2e2;
    color: #d32027;
    display: grid;
    place-items: center;
    font-size: 22px;
    border: none;
    margin-bottom: 12px;
    box-shadow: none;
}

.loc-floatcard--white .loc-floatcard__title {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
    margin: 0 0 6px;
}

.loc-floatcard__sub {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

.loc-floatcard__skyline {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" fill="%23d32027" opacity="0.12"><path d="M0,20 L5,14 L8,14 L8,20 L15,20 L15,10 L22,10 L22,20 L30,20 L35,8 L40,20 L55,20 L55,12 L62,12 L62,20 L75,20 L80,6 L85,20 L100,20 Z"/></svg>') repeat-x bottom;
    background-size: 80px 16px;
    pointer-events: none;
}

/* ------------------------------------------------------- trust stat bar -- */

/* Pulled up so it straddles the hero edge, matching the mockup */
.loc-trustbar {
    margin-block-start: -44px;
    position: relative;
    z-index: 10;
}

.loc-trustbar__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 24px 36px;
    border-radius: 18px;
    background: linear-gradient(135deg, #a3141c 0%, #ba161f 50%, #d32027 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 45px -10px rgba(163, 20, 28, 0.55);
}

.loc-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-inline: 10px;
    position: relative;
}

.loc-stat + .loc-stat::before {
    content: '';
    position: absolute;
    inset-inline-start: -6px;
    inset-block: 6px;
    width: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.loc-stat__icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 32px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.loc-stat__value {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.loc-stat__label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    margin: 4px 0 0;
    line-height: 1.3;
}

/* ------------------------------------------------------- trusted badges -- */

.loc-badges {
    padding-block: 16px 28px;
    position: relative;
    z-index: 3;
}

.loc-badges__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 16px 26px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03);
}

.loc-badges__lead {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.loc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    padding: 6px 14px;
    background: #f8fafc;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.loc-badge:hover {
    background: #fef2f2;
    border-color: rgba(211, 32, 39, 0.25);
    color: var(--loc-primary);
    transform: translateY(-2px);
}

.loc-badge i {
    color: var(--loc-primary);
    font-size: 16px;
    line-height: 1;
}

/* ----------------------------------------------------------- intro/about -- */

.loc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.loc-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.loc-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
}

.loc-checklist i {
    color: var(--loc-primary);
    font-size: 17px;
    line-height: 1.4;
    flex: none;
}

/* Image mosaic: one tall lead image plus a stacked column. */
.loc-mosaic {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 14px;
    align-items: stretch;
}

.loc-mosaic__col {
    display: grid;
    gap: 14px;
    grid-template-rows: repeat(3, 1fr);
}

.loc-mosaic figure {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--loc-surface-alt);
}

.loc-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.loc-mosaic__lead {
    min-height: 340px;
}

/* --------------------------------------------------------------- features -- */

.loc-grid {
    display: grid;
    gap: 20px;
    margin-top: 44px;
}

.loc-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

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

.loc-card {
    padding: 26px 22px;
    border-radius: var(--loc-card-radius);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.loc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(211, 32, 39, 0.25);
    box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.55);
    color: inherit;
    text-decoration: none;
}

.loc-card__media {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 18px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.25s ease;
}

.loc-card__media img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
    background: transparent;
    border: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.09));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.loc-card:hover .loc-card__media img {
    transform: scale(1.12) translateY(-2px);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.16));
}

.loc-card__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #f8fafc;
    color: #fff;
    font-size: 24px;
    margin-bottom: 18px;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.loc-card__icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.loc-card__title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
}

.loc-card__text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--loc-text-muted);
    margin: 0;
}

/* --------------------------------------------------------------- showcase -- */

.loc-showcase__art {
    position: relative;
    display: flex;
    justify-content: center;
}

.loc-showcase__art img {
    width: 100%;
    height: auto;
    max-width: 620px;
    display: block;
}

.loc-bullets {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.loc-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
}

.loc-bullets i {
    color: var(--loc-primary);
    font-size: 18px;
    flex: none;
    line-height: 1.35;
}

/* ------------------------------------------------------------- why choose -- */

.loc-band {
    position: relative;
    background: linear-gradient(135deg, #150204 0%, #260409 50%, #38060c 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.loc-band__photo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.38;
    mix-blend-mode: luminosity;
    pointer-events: none;
    z-index: 1;
    filter: saturate(1.2) contrast(1.1);
}

.loc-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(211, 32, 39, 0.15), transparent 70%),
                linear-gradient(to bottom, #150204 0%, transparent 20%, transparent 80%, #150204 100%);
    pointer-events: none;
    z-index: 1;
}

/* Architectural line-art watermark, drawn as an inline SVG silhouette. */
.loc-band__art {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    opacity: 0.16;
    pointer-events: none;
    line-height: 0;
    z-index: 1;
}

.loc-band__art svg {
    width: 100%;
    height: auto;
    display: block;
}

.loc-band .loc-h2 {
    color: #fff;
}

.loc-benefits {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin-top: 42px;
    position: relative;
    z-index: 2;
}

.loc-benefit {
    text-align: center;
    padding: 24px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.loc-benefit:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 59, 71, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.loc-benefit__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: var(--loc-primary-light, #f2565d);
    font-size: 24px;
}

.loc-benefit__icon--standalone {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
    transition: transform 0.25s ease;
}

.loc-benefit:hover .loc-benefit__icon--standalone {
    transform: scale(1.14);
}

.loc-benefit__icon--standalone img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

.loc-benefit__title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 6px;
    color: #fff;
}

.loc-benefit__text {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

/* ----------------------------------------------------------- testimonials -- */

.loc-testimonials {
    background: #faf8f5;
    padding: 65px 0 70px;
    position: relative;
    border-top: 1px solid #f1ece4;
    border-bottom: 1px solid #f1ece4;
    overflow: hidden;
}

.loc-testimonials__art {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -40px;
    translate: 0 -50%;
    width: 420px;
    opacity: 0.09;
    pointer-events: none;
    line-height: 0;
}

.loc-testimonials__art svg {
    width: 100%;
    height: auto;
}

.loc-rule {
    width: 62px;
    height: 3px;
    border-radius: 3px;
    background: var(--loc-primary);
    margin: 0 0 26px;
}

.loc-center .loc-rule {
    margin-inline: auto;
}

.loc-quote {
    padding: 28px 26px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    position: relative;
}

.loc-quote:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -12px rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
}

.loc-quote__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.loc-quote__mark {
    font-size: 34px;
    line-height: 1;
    color: var(--loc-primary, #d32027);
    opacity: 0.85;
    font-family: Georgia, serif;
}

.loc-quote__stars {
    color: #f59e0b;
    font-size: 17px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.loc-quote__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.loc-quote__text {
    font-size: 14.5px;
    line-height: 1.7;
    color: #334155;
    margin: 0 0 24px;
    flex: 1;
    font-style: normal;
}

.loc-quote__person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    margin-top: auto;
}

.loc-quote__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2.5px solid #fee2e2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.loc-quote__avatar--initial {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #ffffff;
    font-weight: 800;
    font-size: 20px;
    flex-shrink: 0;
}

.loc-quote__info {
    flex: 1;
    min-width: 0;
}

.loc-quote__name {
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.3;
}

.loc-quote__designation {
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
    margin: 0 0 3px;
    line-height: 1.3;
}

.loc-quote__school {
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------- testimonial slider -- */

.loc-testimonials__wrapper {
    position: relative;
    margin-top: 36px;
    padding-inline: 4px;
}

.loc-testimonials__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 14px 10px 28px;
    align-items: stretch;
}

.loc-testimonials__track::-webkit-scrollbar {
    display: none;
}

.loc-quote--slide {
    flex: 0 0 380px;
    max-width: 380px;
    width: 380px;
    scroll-snap-align: start;
    min-height: 290px;
    height: auto;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .loc-quote--slide {
        flex: 0 0 85vw;
        max-width: 85vw;
        width: 85vw;
    }
}

.loc-slider-btn {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
    font-size: 22px;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s ease;
}

.loc-slider-btn:hover {
    background: var(--loc-primary, #d32027);
    color: #ffffff;
    border-color: var(--loc-primary, #d32027);
    box-shadow: 0 8px 22px rgba(211, 32, 39, 0.35);
}

.loc-slider-btn--prev {
    left: -20px;
}

.loc-slider-btn--next {
    right: -20px;
}

@media (max-width: 991px) {
    .loc-slider-btn {
        display: none;
    }
}

.loc-testimonials__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}

.loc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    display: inline-block;
    transition: all 0.2s ease;
}

.loc-dot--active {
    width: 24px;
    border-radius: 999px;
    background: var(--loc-primary);
}

/* --------------------------------------------------------- business stats -- */

.loc-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.loc-figure {
    text-align: center;
    padding: 32px 20px;
    border-radius: var(--loc-card-radius);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.loc-figure__icon {
    font-size: 26px;
    color: var(--loc-primary);
    margin-bottom: 12px;
}

.loc-figure__value {
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    line-height: 1;
    color: var(--loc-primary);
    margin: 0 0 8px;
}

.loc-figure__label {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.loc-figure__text {
    font-size: 12.5px;
    color: var(--loc-text-muted);
    margin: 6px 0 0;
    line-height: 1.5;
}

/* ---------------------------------------------------------- service areas -- */

.loc-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
    padding: 0;
    list-style: none;
}

.loc-area {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
    font-weight: 500;
    color: var(--loc-text);
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.loc-area i {
    color: var(--loc-primary);
    font-size: 15px;
}

a.loc-area:hover {
    border-color: var(--loc-primary);
    color: var(--loc-primary);
    transform: translateY(-2px);
    text-decoration: none;
}

/* -------------------------------------------------------------------- faq -- */

.loc-faq-section {
    background-color: #faf8f5;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 75px 0 85px;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.loc-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    max-width: 1160px;
    margin-inline: auto;
    margin-top: 36px;
    text-align: left;
}

@media (max-width: 860px) {
    .loc-faq {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.loc-faq__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.loc-faq__item {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.025);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.loc-faq__item:hover {
    border-color: #fca5a5;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.06);
}

.loc-faq__item.is-open {
    border-color: #f87171;
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.08);
}

.loc-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.25s ease;
    user-select: none;
}

.loc-faq__q-text {
    flex: 1;
    line-height: 1.4;
}

.loc-faq__item.is-open .loc-faq__q {
    color: #dc2626;
}

.loc-faq__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-faq__icon-minus {
    display: none;
}

.loc-faq__item.is-open .loc-faq__icon {
    background: #fee2e2;
    color: #dc2626;
    transform: rotate(180deg);
}

.loc-faq__item.is-open .loc-faq__icon-plus {
    display: none;
}

.loc-faq__item.is-open .loc-faq__icon-minus {
    display: block;
}

/* Smooth Accordion Animation via CSS Grid */
.loc-faq__collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-faq__item.is-open .loc-faq__collapse {
    grid-template-rows: 1fr;
}

.loc-faq__a {
    overflow: hidden;
    font-size: 14.5px;
    line-height: 1.75;
    color: #475569;
    padding: 0 22px;
    transition: padding 0.35s ease, opacity 0.3s ease;
    opacity: 0;
}

.loc-faq__item.is-open .loc-faq__a {
    padding: 14px 22px 20px;
    border-top: 1px dashed rgba(226, 232, 240, 0.7);
    opacity: 1;
}

.loc-faq__a p {
    margin-bottom: 12px;
}

.loc-faq__a > *:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------ related locations -- */

.loc-related {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}

.loc-related a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--loc-text);
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.loc-related a:hover {
    border-color: var(--loc-primary);
    color: var(--loc-primary);
    text-decoration: none;
}

/* -------------------------------------------------------------------- cta -- */

.loc-cta {
    padding-block: 30px 76px;
}

.loc-cta__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    padding: 36px 44px;
    border-radius: 20px;
    background: linear-gradient(115deg, #a3141c 0%, #c41822 45%, #e61c24 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(196, 24, 34, 0.45);
}

.loc-cta__art-img {
    position: relative;
    z-index: 1;
    flex: none;
    line-height: 0;
}

.loc-cta__art-img img {
    height: 72px;
    width: auto;
    object-fit: contain;
    display: block;
}

.loc-cta__art {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 260px;
    opacity: 0.16;
    pointer-events: none;
    line-height: 0;
}

.loc-cta__art svg {
    width: 100%;
    height: auto;
}

.loc-cta__copy {
    position: relative;
    z-index: 1;
    max-width: 58ch;
}

.loc-cta__title {
    font-size: clamp(23px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 8px;
}

.loc-cta__text {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
}

.loc-cta__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ------------------------------------------------------------ breadcrumb -- */

.loc-crumbs {
    padding-block: 16px;
    background: var(--loc-surface-alt);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.loc-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--loc-text-muted);
}

.loc-crumbs li + li::before {
    content: '/';
    margin-inline-end: 8px;
    color: rgba(0, 0, 0, 0.25);
}

.loc-crumbs a {
    color: var(--loc-text-muted);
    text-decoration: none;
}

.loc-crumbs a:hover {
    color: var(--loc-primary);
}

.loc-crumbs [aria-current='page'] {
    color: var(--loc-primary);
    font-weight: 600;
}

/* --------------------------------------------------------- custom section -- */

.loc-custom__media {
    border-radius: var(--loc-card-radius);
    overflow: hidden;
}

.loc-custom__media img {
    width: 100%;
    height: auto;
    display: block;
}

.loc-split--reverse .loc-split__media {
    order: -1;
}

/* Sections whose artwork has not been added yet: the copy takes the full
   width rather than sitting beside an empty column. */
.loc-split--single {
    grid-template-columns: minmax(0, 1fr);
}

.loc-split--single .loc-lead {
    max-width: 76ch;
}

.loc-split--single .loc-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.loc-split--single .loc-bullets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loc-hero__grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
}

@media (max-width: 1024px) {
    .loc-split--single .loc-checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .loc-split--single .loc-checklist,
    .loc-split--single .loc-bullets {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------- preview notice -- */

.loc-preview-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 18px;
    background: #1f2937;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.loc-preview-bar span {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--loc-primary);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* =========================================================================
   Responsive. Layouts are re-composed at each step rather than scaled down:
   multi-column grids drop to counts that keep card text readable, and the
   hero switches to a stacked order on tablet.
   ========================================================================= */

@media (max-width: 1440px) {
    .loc-page {
        --loc-shell: 1180px;
    }
}

@media (max-width: 1280px) {
    .loc-page {
        --loc-shell: 1080px;
        --loc-section-y: 76px;
    }

    /* Kept at 5 down to 1024: the module list is typically 10 cards, and 4
       columns would leave a two-card orphan row. */
    .loc-grid--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .loc-card {
        padding: 22px 18px;
    }

    .loc-benefits {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 1024px) {
    .loc-page {
        --loc-section-y: 64px;
    }

    .loc-hero {
        padding-block: 72px 116px;
    }

    .loc-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    /* Column layout so the floating card sits above the artwork rather than
       squeezing beside it once it leaves its absolute position. */
    .loc-hero__art {
        min-height: 0;
        order: 2;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Off the artwork and into the flow. A pill shape reads as a blob at this
       width, so it becomes a normal card. */
    .loc-floatcard {
        position: static;
        max-width: none;
        width: fit-content;
        margin-bottom: 24px;
        translate: none;
        border-radius: var(--loc-card-radius);
        padding: 14px 22px 14px 14px;
    }

    .loc-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .loc-split--reverse .loc-split__media {
        order: 0;
    }

    .loc-trustbar__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 24px;
    }

    .loc-stat + .loc-stat::before {
        display: none;
    }

    .loc-grid--5,
    .loc-grid--4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .loc-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 20px;
    }

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

    .loc-mosaic__lead {
        min-height: 260px;
    }

    .loc-testimonials__art {
        display: none;
    }
}

@media (max-width: 768px) {
    .loc-page {
        --loc-section-y: 52px;
        --loc-card-radius: 14px;
    }

    .loc-shell {
        width: min(100% - 32px, var(--loc-shell));
    }

    .loc-hero {
        padding-block: 56px 104px;
        text-align: left;
    }

    .loc-hero__usps {
        gap: 10px 18px;
        margin-top: 28px;
    }

    .loc-grid--5,
    .loc-grid--4,
    .loc-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .loc-checklist {
        grid-template-columns: minmax(0, 1fr);
    }

    .loc-mosaic {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .loc-mosaic__lead {
        min-height: 220px;
    }

    .loc-badges__inner {
        justify-content: flex-start;
        padding: 18px 20px;
    }

    .loc-cta__inner {
        padding: 34px 26px;
        flex-direction: column;
        align-items: flex-start;
    }

    .loc-cta__art {
        width: 180px;
    }
}

@media (max-width: 560px) {
    .loc-page {
        --loc-section-y: 44px;
    }

    .loc-hero {
        padding-block: 44px 96px;
    }

    .loc-hero__title {
        font-size: clamp(28px, 8.4vw, 36px);
    }

    .loc-trustbar {
        margin-block-start: -70px;
    }

    .loc-trustbar__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .loc-grid--5,
    .loc-grid--4,
    .loc-grid--3,
    .loc-benefits,
    .loc-figures {
        grid-template-columns: minmax(0, 1fr);
    }

    .loc-btn-row .loc-btn {
        flex: 1 1 100%;
    }

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

    .loc-cta__actions {
        width: 100%;
    }

    .loc-cta__actions .loc-btn {
        flex: 1 1 100%;
    }

    .loc-faq__q {
        padding: 15px 16px;
        font-size: 14.5px;
    }

    .loc-faq__a {
        padding: 0 16px 16px;
    }
}

/* Carousel dots for the testimonial slider on small screens. */
.loc-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 26px;
}

.loc-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: background 0.18s ease, width 0.18s ease;
}

.loc-dots button.is-active {
    background: var(--loc-primary);
    width: 20px;
    border-radius: 999px;
}

/* =========================================================================
   Host stylesheet isolation
   =========================================================================

   The site-wide custom.css styles bare elements (h1-h6 navy, p justified,
   centred card text). Those rules are not scoped, so they reach into this
   page and, for example, painted the hero H1 dark against the dark hero.

   Everything below re-asserts the intended value at .loc-page specificity so
   the section styles above hold regardless of what the global sheet does.
   Keep this block last in the file.
   ========================================================================= */

.loc-page h1,
.loc-page h2,
.loc-page h3,
.loc-page h4,
.loc-page h5,
.loc-page h6,
.loc-page p,
.loc-page li,
.loc-page span,
.loc-page blockquote,
.loc-page figcaption,
.loc-page summary {
    text-align: inherit;
    letter-spacing: inherit;
}

/* No text-align here: the `inherit` above already cancels the site-wide
   `p { text-align: justify }`. A hard `left` pulled every paragraph under a
   centred heading (Serving Schools Across ..., Why Schools in ...) back to
   the left edge, so the text sat off-centre beneath its own title. */
.loc-page p,
.loc-page li,
.loc-page blockquote {
    text-justify: auto;
}

.loc-page .loc-center p,
.loc-page .loc-center > .loc-lead {
    text-align: center;
}

/* Headings inherit the surface they sit on rather than the global navy. */
.loc-page .loc-hero__title {
    color: #fff;
}

/* The accent line uses a lifted red rather than the brand red: at 56px on the
   burgundy hero the base red only reaches ~2:1 contrast, which is below the
   3:1 WCAG floor for large text. */
.loc-page .loc-hero__title span {
    color: var(--loc-primary-light, #f2565d);
}

.loc-page .loc-h2,
.loc-page .loc-h3 {
    color: var(--loc-text);
}

.loc-page .loc-band .loc-h2,
.loc-page .loc-band .loc-h3,
.loc-page .loc-band .loc-benefit__title {
    color: #fff;
}

.loc-page .loc-accent {
    color: var(--loc-primary);
}

.loc-page .loc-card__title,
.loc-page .loc-quote__name,
.loc-page .loc-figure__label {
    color: var(--loc-text);
    text-align: left;
}

/* Cards keep left-aligned copy even inside a centred section. The element
   selectors are needed to outrank the `.loc-center p` rule above. */
.loc-page .loc-card,
.loc-page .loc-card p,
.loc-page .loc-card h3,
.loc-page .loc-quote,
.loc-page .loc-quote p,
.loc-page .loc-quote blockquote,
.loc-page .loc-faq p,
.loc-page .loc-faq li {
    text-align: left;
}

/* Titles reserve two lines so the descriptions below them start on the same
   baseline across a row, however the titles happen to wrap. */
.loc-page .loc-card__title {
    min-height: 2.7em;
}

.loc-page .loc-figure,
.loc-page .loc-figure__label,
.loc-page .loc-figure__text,
.loc-page .loc-benefit,
.loc-page .loc-benefit__title,
.loc-page .loc-benefit__text {
    text-align: center;
}

.loc-page .loc-figure__value {
    color: var(--loc-primary);
}

.loc-page .loc-hero__text {
    color: rgba(255, 255, 255, 0.82);
}

.loc-page .loc-lead {
    color: var(--loc-text-muted);
}

.loc-page .loc-band .loc-lead {
    color: rgba(255, 255, 255, 0.78);
}

.loc-page .loc-cta__title,
.loc-page .loc-cta__text,
.loc-page .loc-floatcard__title {
    color: #fff;
}

/* The global sheet underlines and recolours links inside content areas. */
.loc-page .loc-btn,
.loc-page .loc-card,
.loc-page .loc-area,
.loc-page .loc-related a {
    text-decoration: none;
}

.loc-page ul {
    margin-bottom: 0;
    padding-left: 0;
}

.loc-page img {
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .loc-page *,
    .loc-page *::before,
    .loc-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .loc-btn:hover,
    .loc-card:hover,
    a.loc-area:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------- delhi mockup redesign -- */

.loc-hero--panoramic {
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #2b0409;
    min-height: 720px;
    position: relative;
    padding-top: 150px;
    padding-bottom: 170px;
    border-bottom-left-radius: 44px;
    border-bottom-right-radius: 44px;
    overflow: hidden;
    isolation: isolate;
}

.loc-hero--panoramic::before {
    content: '';
    position: absolute;
    inset: 0;
    /* This replaces the base hero's round glow, so undo its geometry too.
       Left in place, the shading was drawn as a 500px circle shifted up
       behind the headline instead of covering the hero. */
    width: auto;
    height: auto;
    border-radius: 0;
    translate: none;
    background: linear-gradient(to right, #1f0307 0%, rgba(35, 4, 9, 0.94) 38%, rgba(35, 4, 9, 0.4) 65%, transparent 100%),
                linear-gradient(to bottom, rgba(31, 3, 7, 0.35) 0%, transparent 20%, transparent 40%, rgba(45, 5, 12, 0.75) 60%, #2b0409 95%);
    z-index: 1;
    pointer-events: none;
}

.loc-hero--panoramic .loc-shell {
    position: relative;
    z-index: 3;
}

.loc-hero__top-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 209, 59, 0.15);
    border: 1px solid rgba(255, 209, 59, 0.4);
    color: #ffd13b;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    backdrop-filter: blur(8px);
}

.loc-hero__top-badge i {
    font-size: 13px;
    color: #ffd13b;
    animation: locBadgeSparkle 2s infinite ease-in-out;
}

@keyframes locBadgeSparkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.8; }
}

.loc-hero--panoramic .loc-hero__title {
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    color: #ffffff;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.loc-hero--panoramic .loc-hero__title span.loc-accent {
    color: #e5252d;
    display: inline;
}

.loc-hero--panoramic .loc-hero__title span.loc-accent--yellow {
    color: #ffd13b;
    display: inline;
    text-shadow: 0 0 20px rgba(255, 209, 59, 0.4);
}

.loc-btn--yellow {
    background: #ffd13b;
    color: #140205 !important;
    font-weight: 800 !important;
    font-size: 14.5px;
    border-radius: 8px;
    padding: 12px 26px;
    box-shadow: 0 10px 25px rgba(255, 209, 59, 0.35);
    border: 1px solid #ffd13b;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.loc-btn--yellow:hover {
    background: #ffc107;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 209, 59, 0.5);
}

.loc-hero--panoramic .loc-hero__text {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 520px;
    margin: 0;
}

.loc-hero__usps-inline {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 24px 0 32px;
}

.loc-hero__usp-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #ffffff;
}

.loc-hero__usp-item i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
}

.loc-floatcard-delhi {
    position: absolute;
    bottom: 110px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(18, 2, 5, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 209, 59, 0.3);
    border-radius: 999px;
    padding: 10px 14px 10px 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 209, 59, 0.15);
    z-index: 5;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-floatcard-delhi__text {
    display: flex;
    flex-direction: column;
    text-align: right;
    align-items: flex-end;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-floatcard-delhi__title {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.loc-floatcard-delhi__sub {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-across-label {
    display: inline-block;
    white-space: nowrap;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.loc-city-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    height: 18px;
    vertical-align: middle;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-city-cycler {
    display: inline-block;
    color: #ffd13b;
    font-weight: 800;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(255, 209, 59, 0.5);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease-out;
}

.loc-city-exit {
    transform: translateY(-14px);
    opacity: 0;
}

.loc-city-enter {
    transform: translateY(14px);
    opacity: 0;
    animation: locCitySlideIn 0.38s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

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

.loc-floatcard-delhi__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 209, 59, 0.18);
    border: 1.5px solid rgba(255, 209, 59, 0.55);
    color: #ffd13b;
    font-size: 26px;
    display: grid;
    place-items: center;
    animation: locPinYellowGlow 2.4s infinite ease-in-out;
    flex: none;
}

@keyframes locPinYellowGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 209, 59, 0.35), 0 0 22px rgba(255, 193, 7, 0.2);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 209, 59, 0.9), 0 0 45px rgba(255, 193, 7, 0.55);
    }
}

.loc-hero__skyline {
    position: absolute;
    bottom: 64px;
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
    line-height: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.loc-hero__skyline-img,
.loc-hero__skyline svg {
    width: 100%;
    /* --loc-skyline-h is the per-page override from the Images tab. The strip
       always spans the full width, so height is the only useful dimension. */
    height: var(--loc-skyline-h, 125px);
    max-height: var(--loc-skyline-h, 135px);
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

.loc-trustbar--white-card {
    position: relative;
    margin-top: -65px;
    z-index: 6;
    padding-bottom: 36px;
}

.loc-trustbar--white-card .loc-trustbar__inner {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 44px;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.loc-trustbar--white-card .loc-trustbar__top-header {
    display: none;
}

.loc-trustbar--white-card .loc-trustbar__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

.loc-trustbar--white-card .loc-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.loc-trustbar--white-card .loc-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 15%;
    height: 70%;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.loc-trustbar--white-card .loc-stat__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--loc-primary, #d32027);
    font-size: 28px;
    flex: none;
    background: transparent;
}

.loc-trustbar--white-card .loc-stat__body {
    display: flex;
    flex-direction: column;
}

.loc-trustbar--white-card .loc-stat__value {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 20px;
    font-weight: 800 !important;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.02em;
}

.loc-counter,
.loc-counter-prefix {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: inherit;
    font-weight: 800 !important;
    color: inherit;
    line-height: inherit;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.loc-trustbar--white-card .loc-stat__label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
    line-height: 1.2;
}

.loc-trustbar--white-card .loc-stat__check {
    display: none;
}

.loc-intro-showcase {
    background: #ffffff;
    padding: 60px 0 65px;
}

.loc-intro-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 44px;
    align-items: center;
}

@media (max-width: 1024px) {
    .loc-intro-showcase__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.loc-intro-showcase__heading {
    margin-bottom: 14px;
    line-height: 1.25;
}

.loc-intro-showcase__lead {
    font-size: 15px;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 22px;
}

.loc-feature-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .loc-feature-tabs {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.loc-feature-tab {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 17px;
    border-radius: 16px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
    user-select: none;
    text-align: left;
}

/* "Images follow the feature tabs" switched off: the tabs are a plain list,
   so nothing about them should suggest they can be clicked. */
.loc-feature-tabs--static .loc-feature-tab {
    cursor: default;
}

.loc-feature-tabs--static .loc-feature-tab:hover {
    border-color: #e2e8f0;
    transform: none;
    box-shadow: none;
}

.loc-feature-tab:hover {
    border-color: #fca5a5;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.08);
}

.loc-feature-tab.is-active {
    border-color: #dc2626;
    background: #fff8f8;
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.12);
}

.loc-feature-tab__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    display: grid;
    place-items: center;
    font-size: 19px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.loc-feature-tab.is-active .loc-feature-tab__icon {
    background: #dc2626;
    color: #ffffff;
}

.loc-feature-tab__title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
    line-height: 1.25;
}

.loc-feature-tab__desc {
    font-size: 11.5px;
    line-height: 1.45;
    color: #64748b;
    margin: 0;
}

.loc-browser-frame {
    border-radius: 18px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid #1e293b;
    box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.loc-browser-frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 60px -12px rgba(220, 38, 38, 0.18);
}

.loc-browser-frame__header {
    background: #1e293b;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.loc-browser-frame__dots {
    display: flex;
    gap: 6px;
}

.loc-browser-frame__dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.loc-browser-frame__dots span:nth-child(1) { background: #ef4444; }
.loc-browser-frame__dots span:nth-child(2) { background: #f59e0b; }
.loc-browser-frame__dots span:nth-child(3) { background: #10b981; }

.loc-browser-frame__address {
    background: #0f172a;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.loc-browser-frame__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10.2;
    background: #f8fafc;
    overflow: hidden;
}

.loc-screenshot-track {
    display: flex;
    /* Was a hardcoded 400% / 25% pair, which only worked with exactly four
       slides. The count is set inline from the number of rows. */
    width: calc(100% * var(--loc-slides, 4));
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.loc-screenshot-slide {
    width: calc(100% / var(--loc-slides, 4));
    height: 100%;
    flex-shrink: 0;
}

.loc-screenshot-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
}

.loc-browser-frame__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    padding: 2px 8px;
    border-radius: 999px;
}

.loc-live-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: locLivePulse 1.8s infinite ease-in-out;
}

@keyframes locLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

.loc-slider-nav {
    display: none !important;
}

.loc-slider-nav:hover {
    opacity: 1;
    background: #dc2626;
    border-color: #dc2626;
    transform: translateY(-50%) scale(1.08);
}

.loc-slider-prev { left: 10px; }
.loc-slider-next { right: 10px; }

.loc-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 0 12px;
    background: #1e293b;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.loc-slider-dot {
    width: 22px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-slider-dot.is-active {
    width: 32px;
    background: #dc2626;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

.loc-section--dark-crimson {
    background: linear-gradient(145deg, #140205 0%, #290409 50%, #3a050d 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 50px 0 60px;
}

.loc-modules__photo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.38;
    pointer-events: none;
    z-index: 1;
}

.loc-section--dark-crimson .loc-shell {
    position: relative;
    z-index: 2;
}

.loc-section--dark-crimson .loc-h2 {
    color: #ffffff;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    margin-bottom: 8px;
}

.loc-section--dark-crimson .loc-h2 span.loc-accent,
.loc-section--dark-crimson .loc-h2 span.loc-accent-yellow,
.loc-section--dark-crimson .loc-h2 span.loc-accent--yellow {
    color: #ffd13b !important;
    text-shadow: 0 0 20px rgba(255, 209, 59, 0.45);
}

.loc-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.loc-card--modern {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 22px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    height: 100%;
}

.loc-card--modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -10px rgba(0, 0, 0, 0.14);
}

.loc-card__3d-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 16px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.loc-card__3d-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
    filter: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-card--modern:hover .loc-card__3d-icon img {
    transform: translateY(-3px) scale(1.06);
}

/* Bell Shake/Chime Animation on New Notification Slide */
@keyframes locBellRing {
    0% { transform: rotate(0); }
    15% { transform: rotate(15deg); }
    30% { transform: rotate(-14deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}

.loc-card__3d-icon img.is-ringing {
    transform-origin: top center;
    animation: locBellRing 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.loc-page .loc-card--modern .loc-card__title,
.loc-card--modern .loc-card__title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
    min-height: auto !important;
}

.loc-page .loc-card--modern .loc-card__text,
.loc-card--modern .loc-card__text {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* Double-Wide Combined Card: School Notices + Live Scrolling Feed */
.loc-card--combined-notices {
    grid-column: span 2;
    display: grid !important;
    grid-template-columns: 1fr 1.15fr;
    gap: 22px;
    align-items: center;
    padding: 24px 26px !important;
}

.loc-combined-notices__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.loc-combined-notices__right {
    width: 100%;
}

@media (max-width: 991px) {
    .loc-modules-grid {
        grid-template-columns: 1fr;
    }
    .loc-card--combined-notices {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }
}

/* Compact 1-at-a-time Slide Up Notification Stage */
.loc-single-notif-stage {
    position: relative;
    height: 108px;
    width: 100%;
    overflow: hidden;
}

.loc-single-notif-stage .loc-notif-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.loc-single-notif-stage .loc-notif-item.loc-notif-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.loc-single-notif-stage .loc-notif-item.loc-notif-exit {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.loc-notif-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.loc-notif-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loc-notif-badge--fee {
    color: #dc2626;
}

.loc-notif-badge--att {
    color: #059669;
}

.loc-notif-badge--hw {
    color: #b91c1c;
}

.loc-notif-badge--ptm {
    color: #b45309;
}

.loc-notif-time {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
}

.loc-notif-item__title {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 2px;
}

.loc-notif-item__desc {
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
}

/* =========================================================================
   Why Choose Class ON (Target Layout v2)
   ========================================================================= */
.loc-why-v2 {
    background: #faf8f5;
    padding: 36px 0 0;
    position: relative;
    border-top: 1px solid #f1ece4;
    border-bottom: 1px solid #f1ece4;
    overflow: hidden;
}

.loc-why-v2__wrapper {
    display: grid;
    /* minmax(0, ...) matters more than the ratio here. A bare `1.1fr` means
       `minmax(auto, 1.1fr)`, so the benefit cards' min-content width is a floor
       on the right track - a city page with wordier benefit titles stole width
       from the artwork column and rendered the landmark at half the size Delhi
       shows. With a 0 minimum the split is purely proportional, so every city
       page draws the artwork identically. 29.2% is the share Delhi was already
       resolving to; because the old split was content-driven it drifted with
       viewport width, so Delhi's artwork is a little narrower than before on
       wide screens and unchanged at 1280.

       --loc-why-art is the per-page override the Images tab writes. The min()
       stops a large value from crowding the benefit cards off the row. */
    grid-template-columns:
        minmax(0, min(var(--loc-why-art, 29.2%), 46%))
        minmax(0, 1fr);
    gap: 34px;
    align-items: flex-end;
}

.loc-why-v2__left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.loc-why-v2__art-wrap {
    position: relative;
    width: 100%;
    max-width: 650px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 0;
    margin-top: 0;
}

/* Flat Yellow Sun Circle */
.loc-why-v2__sun {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #ffc107;
    bottom: -85px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    box-shadow: none !important;
    filter: none !important;
}

.loc-why-v2__birds {
    position: absolute;
    bottom: 155px;
    top: auto;
    left: calc(50% + 16px);
    right: auto;
    width: 115px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

.loc-why-v2__building {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 650px;
    height: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 0;
    vertical-align: bottom;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,0.06));
}

.loc-why-v2__right {
    width: 100%;
    padding-bottom: 26px;
}

.loc-why-v2__head {
    margin-bottom: 16px;
    /* Centred over the six cards, as on phones. */
    text-align: center;
}

/* The eyebrow and paragraph this layout was quietly dropping. Sized to sit
   above the heading without competing with it. */
.loc-why-v2__badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 99px;
    background: rgba(220, 38, 38, 0.09);
    color: #b91c1c;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loc-why-v2__lead {
    /* Auto sides: the paragraph has a max-width, so centring the text alone
       would leave the block itself pinned to the left. */
    margin: 10px auto 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #475569;
    max-width: 62ch;
}

.loc-why-v2__title {
    font-size: clamp(23px, 2.5vw, 32px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .loc-why-v2__title {
        white-space: normal;
    }
}

.loc-why-v2__title .loc-accent-red {
    color: #dc2626 !important;
}

/* 6 Points Bento Card Matrix */
.loc-why-v2__grid {
    display: grid;
    /* minmax(0, auto), not 1fr. `auto` keeps the columns sized to their own
       label - which is why one card can be wider than its neighbour and no
       title has to be cut - while the 0 minimum lets them shrink instead of
       running off the page when the artwork beside them is set wide from the
       Images tab. Plain `1fr` would force three equal columns and start
       truncating the longest label at 1280px. */
    /* As many equal columns as fit at 200px each - three on a wide screen, two
       when the column beside the artwork is narrower. Labels wrap instead of
       being cut to "Support for Del...", and 200px keeps the longest single
       word ("Implementation") on one line rather than breaking it mid-word,
       which fixed three columns did between 1025px and 1440px. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 12px;
}

.loc-why-v2__item {
    display: flex;
    align-items: center;
    /* Lets the card shrink into a narrow column; the title wraps rather than
       pushing the row past the edge of the screen. */
    min-width: 0;
    gap: 12px;
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.025);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

.loc-why-v2__item:hover {
    transform: translateY(-2px);
    border-color: #fecaca;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.08);
}

.loc-why-v2__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.loc-why-v2__icon img {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
    filter: none !important;
}

.loc-why-v2__item:hover .loc-why-v2__icon {
    transform: scale(1.12);
}

.loc-why-v2__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.loc-why-v2__item-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
    /* Full label always visible. It was one line with an ellipsis, which cut
       "Support for Delhi Schools" to "Support for Del..." at desktop widths. */
    white-space: normal;
    overflow-wrap: break-word;
}

.loc-why-v2__item-text {
    font-size: 12.5px;
    line-height: 1.4;
    color: #64748b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .loc-why-v2__wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .loc-why-v2__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

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

.loc-why-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.loc-why-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(211, 32, 39, 0.08);
    color: var(--loc-primary, #d32027);
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.loc-why-card:hover .loc-why-card__icon {
    transform: scale(1.08);
    background: var(--loc-primary, #d32027);
    color: #ffffff;
}

.loc-why-card__title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
    line-height: 1.3;
}

.loc-why-card__text {
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

.loc-partners-crimson {
    background: linear-gradient(135deg, #180205 0%, #2e050b 50%, #40060e 100%);
    padding: 38px 0 44px;
    overflow: hidden;
    position: relative;
}

.loc-partners-crimson__title {
    font-size: clamp(20px, 2.4vw, 25px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 22px;
    text-align: center;
    letter-spacing: -0.01em;
}

.loc-partners-crimson__title .loc-accent,
.loc-partners-crimson__title .loc-accent-yellow {
    color: #ffc107 !important;
    font-weight: 800;
}

.loc-partners-crimson__marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    padding: 8px 0 12px;
}

.loc-partners-crimson__marquee-track {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    width: max-content;
    animation: locMarqueeScroll 30s linear infinite;
    will-change: transform;
}

.loc-partners-crimson__marquee:hover .loc-partners-crimson__marquee-track {
    animation-play-state: paused;
}

/* Too few schools to loop: each shown once, centred, wrapping on small screens. */
.loc-partners-crimson__marquee--static {
    justify-content: center;
    mask-image: none;
    -webkit-mask-image: none;
}

.loc-partners-crimson__marquee--static .loc-partners-crimson__marquee-track {
    animation: none;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 16px;
}

@keyframes locMarqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.loc-school-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    text-align: left;
}

.loc-school-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.loc-school-card__logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.loc-school-card__logo img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    display: block;
}

.loc-school-card__info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.loc-school-card__name {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.loc-school-card__loc {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    margin-top: 3px;
    white-space: nowrap;
}

.loc-cta-delhi {
    background: #0f0103;
    padding: 64px 0;
    color: #ffffff;
}

.loc-cta-delhi__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 991px) {
    .loc-cta-delhi__grid {
        grid-template-columns: 1fr;
    }
}

.loc-cta-delhi__title {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px;
    line-height: 1.2;
}

.loc-cta-delhi__text {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 32px;
    max-width: 520px;
}

.loc-cta-delhi__trust-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.loc-cta-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.loc-cta-trust-item__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 20px;
}

.loc-cta-trust-item__title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.loc-cta-trust-item__sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    margin: 2px 0 0;
}

.loc-cta-delhi__card {
    background: linear-gradient(135deg, #c91820 0%, #e5252d 100%);
    border-radius: 20px;
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(201, 24, 32, 0.35);
}

.loc-cta-delhi__card-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
}

.loc-cta-delhi__card-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 24px;
}

.loc-cta-delhi__card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: #ffffff;
    color: #c91820;
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loc-cta-delhi__card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    color: #a3141a;
}

/* =========================================================================
   Admission Growth & YouTube Videos (Dark Theme)
   ========================================================================= */
.loc-videos-dark {
    background: linear-gradient(135deg, #0c0103 0%, #1a0306 45%, #2a050a 100%);
    padding: 65px 0 70px;
    position: relative;
    border-top: 1px solid rgba(220, 38, 38, 0.25);
    border-bottom: 1px solid rgba(220, 38, 38, 0.25);
    overflow: hidden;
}

.loc-videos-dark__bg-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 380px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.14) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.loc-videos-dark__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.loc-videos-dark__heading {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.loc-videos-dark__heading .loc-accent-yellow {
    color: #ffc107 !important;
}

.loc-videos-dark__lead {
    font-size: 15px;
    line-height: 1.65;
    color: #cbd5e1;
    max-width: 680px;
    margin: 0 auto 40px;
}

.loc-videos-dark__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

/* Past three videos the row becomes a horizontal rail rather than wrapping
   into a second, ragged line. Driven by the same arrows as the testimonials
   slider, so there is one scrolling behaviour on the page rather than two. */
.loc-videos-dark__wrapper {
    position: relative;
    /* Matches .loc-testimonials__wrapper, so the arrows overlap the first and
       last card by the same 10px they do on the testimonials slider. */
    padding-inline: 4px;
}

/* The shared .loc-slider-btn is a white disc, which is right on the cream
   testimonials band and glares against this one. Same size and position, but
   dressed like the cards it sits between: translucent dark, hairline border,
   red on hover. */
.loc-videos-dark__wrapper .loc-slider-btn {
    background: rgba(18, 6, 8, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
}

.loc-videos-dark__wrapper .loc-slider-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(220, 38, 38, 0.42);
}

.loc-videos-dark__grid--rail {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* Same 10px inset the testimonials track uses, so the arrows sit against
       the card edge here exactly as they do there. */
    padding-inline: 10px;
    scroll-padding-inline: 10px;
    -webkit-overflow-scrolling: touch;

    /* No scrollbar: the arrows say the row moves, and a bar across a dark
       band under the cards read as part of the design. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.loc-videos-dark__grid--rail::-webkit-scrollbar {
    display: none;
}

.loc-videos-dark__grid--rail > .loc-video-card {
    flex: 0 0 clamp(260px, 31%, 360px);
    scroll-snap-align: start;
}

@media (max-width: 991px) {
    .loc-videos-dark__grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }

    /* A rail already scrolls, so it stays a rail on a phone - just with cards
       wide enough to read. */
    .loc-videos-dark__grid--rail > .loc-video-card {
        flex-basis: min(80%, 320px);
    }
}

.loc-video-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.loc-video-card:hover {
    transform: translateY(-5px);
    border-color: rgba(220, 38, 38, 0.45);
    box-shadow: 0 20px 45px -10px rgba(220, 38, 38, 0.25);
}

.loc-video-card__player {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000000;
    cursor: pointer;
    overflow: hidden;
}

.loc-video-card__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.loc-video-card:hover .loc-video-card__thumb {
    transform: scale(1.05);
}

.loc-video-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.loc-video-card:hover .loc-video-card__overlay {
    background: rgba(0, 0, 0, 0.1);
}

.loc-video-card__play-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;
    border: none;
    font-size: 24px;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 7px rgba(220, 38, 38, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.loc-video-card:hover .loc-video-card__play-btn {
    transform: scale(1.12);
    background: #ef4444;
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0.45);
}

.loc-video-card__duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.82);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Once playing, the thumbnail furniture goes and the iframe fills the frame.
   YouTube's own controls are switched off in the player vars, so the bar
   below is the only chrome on screen. */
.loc-video-card__mount {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

/* The YouTube API REPLACES the mount div with the iframe rather than nesting
   one inside it, keeping the class but bringing its own width="640"
   height="360" attributes. A descendant rule matches nothing, so the frame is
   sized here, on the iframe itself. */
.loc-video-card__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.loc-video-card__player.is-playing iframe {
    opacity: 1;
    pointer-events: auto;
}

.loc-video-card__player.is-playing .loc-video-card__thumb,
.loc-video-card__player.is-playing .loc-video-card__overlay,
.loc-video-card__player.is-playing .loc-video-card__duration {
    display: none;
}

.loc-video-card__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 12px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    /* Visible on hover and while paused; out of the way during playback. */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.loc-video-card__player:hover .loc-video-card__controls,
.loc-video-card__player:focus-within .loc-video-card__controls {
    opacity: 1;
}

/* A paused video is someone deciding what to do next - they need the bar. */
.loc-video-card__player.is-playing:not(.is-active) .loc-video-card__controls {
    opacity: 1;
}

@media (hover: none) {
    /* Nothing hovers on a phone, so the bar would never appear. */
    .loc-video-card__player.is-playing .loc-video-card__controls {
        opacity: 1;
    }
}

.loc-video-card__ctrl {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 17px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.loc-video-card__ctrl:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.loc-video-card__scrub {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    position: relative;
}

.loc-video-card__scrub:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 3px;
}

.loc-video-card__scrub-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: #dc2626;
    position: relative;
}

/* The head only appears on hover, so the bar reads as a progress line at rest. */
.loc-video-card__scrub-fill::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    translate: 0 -50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc2626;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.loc-video-card__scrub:hover .loc-video-card__scrub-fill::after {
    opacity: 1;
}

.loc-video-card__time {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 575px) {
    /* Narrow cards cannot hold five controls and a readable clock. */
    .loc-video-card__time {
        display: none;
    }
}

.loc-video-card__body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
}

.loc-video-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.loc-video-card__tag {
    font-size: 11.5px;
    font-weight: 700;
    color: #fecaca;
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
}

.loc-video-card__action {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loc-video-card__action i {
    color: #ff0000;
    font-size: 15px;
}

.loc-video-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
}

.loc-videos-dark__footer {
    margin-top: 40px;
}

/* Channel / playlist button under the video cards. */
.loc-videos-dark__channel {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* The strip's two buttons side by side; stacked and centred on phones. */
.loc-videos-dark__cta-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 767px) {
    .loc-videos-dark__cta-btn {
        justify-content: center;
    }
}

/* Same pill as "Book Strategy Call", on white. */
.loc-btn--gold.loc-btn--gold-white {
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.18);
}

.loc-btn--gold.loc-btn--gold-white:hover {
    box-shadow: 0 10px 24px rgba(255, 255, 255, 0.3);
}

.loc-btn--gold-white .ri-youtube-fill {
    color: #ff0000;
    font-size: 1.2em;
}

.loc-videos-dark__cta-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 16px;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    text-align: left;
    backdrop-filter: blur(10px);
}

.loc-videos-dark__cta-text h3 {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px;
}

.loc-videos-dark__cta-text p {
    font-size: 13px;
    color: #cbd5e1;
    margin: 0;
}

@media (max-width: 767px) {
    .loc-videos-dark__cta-box {
        flex-direction: column;
        text-align: center;
    }
}

.loc-btn--gold {
    background: linear-gradient(135deg, #ffc107 0%, #d97706 100%);
    color: #000000 !important;
    font-weight: 800;
    font-size: 14px;
    border: none;
    padding: 11px 22px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(255, 193, 7, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loc-btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 193, 7, 0.4);
    color: #000000 !important;
}

/* =========================================================================
   Hardware & 3rd-Party Integrations Section (Dark Theme & Minimalist Graphic)
   ========================================================================= */
.loc-integrations-dark {
    background: linear-gradient(135deg, #0c0103 0%, #1a0306 45%, #2a050a 100%);
    padding: 68px 0 75px;
    position: relative;
    border-top: 1px solid rgba(220, 38, 38, 0.25);
    border-bottom: 1px solid rgba(220, 38, 38, 0.25);
    overflow: hidden;
}

.loc-integrations-dark__glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 380px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.loc-integrations-dark__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.loc-integrations-dark__heading {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.loc-integrations-dark__heading .loc-accent-yellow {
    color: #ffc107 !important;
}

.loc-integrations-dark__lead {
    font-size: 15px;
    line-height: 1.65;
    color: #cbd5e1;
    max-width: 700px;
    margin: 0 auto 40px;
}

.loc-integrations-dark__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 991px) {
    .loc-integrations-dark__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .loc-integrations-dark__grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
}

.loc-integ-dark-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 30px 22px 28px;
    text-align: center;
    backdrop-filter: blur(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.loc-integ-dark-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(220, 38, 38, 0.45);
    box-shadow: 0 20px 45px -10px rgba(220, 38, 38, 0.25);
    background: rgba(255, 255, 255, 0.055);
}

.loc-integ-dark-card .loc-card__3d-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.loc-integ-dark-card .loc-card__3d-icon img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
    filter: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-integ-dark-card:hover .loc-card__3d-icon img {
    transform: translateY(-4px) scale(1.12);
}

.loc-integ-dark-card__title {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
    line-height: 1.3;
}

.loc-integ-dark-card__highlight {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =========================================================================
   High-Converting Animated Demo Booking Form & Closing CTA (Light Theme)
   ========================================================================= */
.loc-cta-delhi-premium {
    background: linear-gradient(135deg, #ffffff 0%, #fff6f6 45%, #feeded 100%);
    padding: 85px 0 90px;
    position: relative;
    overflow: hidden;
    color: #0f172a;
    border-top: 1px solid #fee2e2;
    border-bottom: 1px solid #fee2e2;
}

.loc-cta-delhi__skyline-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 360px;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.16;
    pointer-events: none;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    mix-blend-mode: multiply;
    z-index: 1;
}

.loc-cta-delhi__bg-glow {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0) 70%);
    pointer-events: none;
}

.loc-cta-delhi__container {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 54px;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .loc-cta-delhi__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.loc-cta-delhi__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.loc-cta-delhi__main-title {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.loc-cta-delhi__main-title .loc-accent-red {
    color: #dc2626 !important;
}

.loc-cta-delhi__main-desc {
    font-size: 15.5px;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 32px;
}

.loc-cta-delhi__perks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 34px;
}

.loc-cta-perk {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 13px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.loc-cta-perk:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.08);
    border-color: #fecaca;
}

.loc-cta-perk__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    color: #dc2626;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}

.loc-cta-perk__text h3 {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.25;
}

.loc-cta-perk__text p {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

.loc-cta-delhi__social-proof {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.loc-cta-avatars {
    display: flex;
}

.loc-avatar-pill {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    display: grid;
    place-items: center;
    font-size: 16px;
    margin-left: -8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.loc-avatar-pill:first-child {
    margin-left: 0;
}

.loc-cta-proof-text {
    font-size: 13px;
    color: #475569;
    margin: 0;
}

.loc-cta-proof-text strong {
    color: #0f172a;
}

/* Satisfying Form Card (Light Theme) */
.loc-satisfying-form-card {
    background: #ffffff;
    border: 1.5px solid #fecaca;
    border-radius: 24px;
    padding: 34px 32px 30px;
    box-shadow: 0 20px 50px -10px rgba(220, 38, 38, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    text-align: left;
    position: relative;
}

/* Reply shown inside the demo form card after submitting. */
.loc-form-thanks {
    text-align: center;
    padding: 28px 8px 12px;
    animation: locThanksIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.loc-form-thanks__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: grid;
    place-items: center;
    font-size: 42px;
}

.loc-form-thanks__title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
}

.loc-form-thanks__text {
    font-size: 15px;
    line-height: 1.55;
    color: #475569;
    margin: 0 auto;
    max-width: 340px;
}

@keyframes locThanksIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.loc-form-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 14px;
    line-height: 1.4;
}

.loc-form-alert i {
    font-size: 18px;
    flex-shrink: 0;
}

.loc-satisfying-form__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}

.loc-satisfying-form__header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.3);
    flex-shrink: 0;
}

.loc-satisfying-form__title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
    letter-spacing: -0.01em;
}

.loc-satisfying-form__subtitle {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

.loc-animated-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.loc-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 600px) {
    .loc-input-row {
        grid-template-columns: 1fr;
    }
}

.loc-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.loc-input-group label {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.01em;
}

.loc-req {
    color: #dc2626;
    font-weight: 900;
}

.loc-input-field {
    position: relative;
    display: flex;
    align-items: center;
}

.loc-input-field i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 16px;
    pointer-events: none;
    transition: color 0.25s ease;
}

.loc-input-field input,
.loc-input-field select {
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px 12px 42px;
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.loc-input-field input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.loc-input-field input:focus,
.loc-input-field select:focus {
    background: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15), 0 4px 16px rgba(220, 38, 38, 0.08);
}

.loc-input-field input:focus + i,
.loc-input-field:focus-within i {
    color: #dc2626;
}

.loc-select-field select option {
    background: #ffffff;
    color: #0f172a;
}

/* Form Submit Button */
.loc-form-submit-btn {
    position: relative;
    width: 100%;
    margin-top: 6px;
    padding: 15px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #b91c1c 100%);
    border: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(220, 38, 38, 0.45);
}

.loc-form-submit-btn:active {
    transform: translateY(0);
}

.loc-btn-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.loc-btn-content i {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.loc-form-submit-btn:hover .loc-btn-content i {
    transform: translateX(4px);
}

.loc-btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: locBtnShimmer 3.5s infinite;
}

@keyframes locBtnShimmer {
    0% { left: -100%; }
    25% { left: 200%; }
    100% { left: 200%; }
}

.loc-form-privacy-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: #64748b;
    margin-top: 4px;
}

.loc-form-privacy-note i {
    color: #16a34a;
    font-size: 14px;
}

/* =========================================================================
   Comprehensive Mobile & Tablet Responsive Optimizations (< 991px / < 768px)
   ========================================================================= */
@media (max-width: 991.98px) {
    /* Base wrapper safety */
    .loc-page {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .loc-shell {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Mobile Menu Drawer Styling */
    .wsmenu {
        background-color: #ffffff !important;
    }
    .wsmenu .wsmenu-list {
        background-color: #ffffff !important;
    }
    .wsmenu .wsmenu-list > li > a,
    .wsmenu .wsmenu-list > li > a.h-link,
    .wsmenu > .wsmenu-list > li > a,
    body .wsmenu > .wsmenu-list > li > a,
    body .wsmenu > .wsmenu-list > li > a.h-link,
    body:has(.loc-page) .wsmenu > .wsmenu-list > li > a.h-link,
    .loc-page-body .wsmenu > .wsmenu-list > li > a.h-link {
        color: #0f172a !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        line-height: 24px !important;
        padding: 14px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid #f1f5f9 !important;
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .wsmenu .wsmenu-list > li > a:hover,
    .wsmenu .wsmenu-list > li > a:focus {
        color: #dc2626 !important;
        background-color: #fef2f2 !important;
    }
    .wsmenu .sub-menu,
    .wsmenu .wsmegamenu {
        background-color: #f8fafc !important;
    }
    .wsmenu .sub-menu li a,
    .wsmenu .wsmegamenu li a {
        color: #334155 !important;
        font-size: 14px !important;
        padding: 10px 24px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .wsmenu .sub-menu li a:hover,
    .wsmenu .wsmegamenu li a:hover {
        color: #dc2626 !important;
        background-color: #fee2e2 !important;
    }
    .wsmenu-click i {
        border-color: #64748b transparent transparent transparent !important;
    }

    /* 1. Hero Section */
    .loc-hero--panoramic {
        min-height: auto !important;
        padding-top: 105px !important;
        padding-bottom: 40px !important;
        border-bottom-left-radius: 28px !important;
        border-bottom-right-radius: 28px !important;
        background-position: center center !important;
        background-size: cover !important;
    }

    .loc-hero--panoramic::before {
        background: linear-gradient(to bottom, rgba(20, 2, 5, 0.82) 0%, rgba(35, 4, 9, 0.94) 100%) !important;
    }

    .loc-hero__top-badge {
        font-size: 11px !important;
        padding: 5px 13px !important;
        margin-top: 4px !important;
        margin-bottom: 14px !important;
    }

    .loc-hero__grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    .loc-hero--panoramic .loc-hero__title {
        font-size: clamp(26px, 6.5vw, 36px) !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    .loc-hero--panoramic .loc-hero__text {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    .loc-hero__usps-inline {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px 10px !important;
        margin: 16px 0 20px !important;
    }

    .loc-hero__usp-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        backdrop-filter: blur(6px) !important;
    }

    .loc-hero__usp-item i {
        color: #ffd13b !important;
        font-size: 14px !important;
    }

    .loc-btn-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .loc-btn-row .loc-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 18px !important;
        border-radius: 10px !important;
    }

    .loc-btn--yellow {
        font-weight: 800 !important;
        font-size: 14px !important;
        box-shadow: 0 8px 20px rgba(255, 209, 59, 0.4) !important;
    }

    .loc-btn--outline {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        font-size: 13.5px !important;
    }

    .loc-floatcard-delhi {
        position: static !important;
        margin: 22px auto 0 !important;
        max-width: 100% !important;
        width: fit-content !important;
        z-index: 2 !important;
        padding: 10px 16px 10px 22px !important;
        background: rgba(18, 2, 5, 0.92) !important;
        border: 1.5px solid rgba(255, 209, 59, 0.4) !important;
        border-radius: 999px !important;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 209, 59, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .loc-floatcard-delhi__title {
        font-size: 14.5px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
    }

    .loc-floatcard-delhi__sub {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        gap: 5px !important;
        margin-top: 2px !important;
    }

    .loc-city-wrapper {
        height: 19px !important;
    }

    .loc-city-cycler {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #ffd13b !important;
        text-shadow: 0 0 12px rgba(255, 209, 59, 0.5) !important;
    }

    .loc-floatcard-delhi__icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background: rgba(255, 209, 59, 0.18) !important;
        border: 1.5px solid rgba(255, 209, 59, 0.6) !important;
        color: #ffd13b !important;
        font-size: 22px !important;
        display: grid !important;
        place-items: center !important;
        flex: none !important;
        box-shadow: 0 0 16px rgba(255, 209, 59, 0.45) !important;
    }

    .loc-hero__skyline {
        display: none !important;
    }

    /* 2. Trust Stats Bar (Exact Desktop Format in 2x2 Grid) */
    .loc-trustbar--white-card {
        margin-top: -24px !important;
        padding-bottom: 24px !important;
    }

    .loc-trustbar--white-card .loc-trustbar__inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px 14px !important;
        padding: 20px 18px !important;
        background: #ffffff !important;
        border-radius: 18px !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    }

    .loc-trustbar--white-card .loc-stat {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .loc-trustbar--white-card .loc-stat:not(:last-child)::after {
        display: none !important;
    }

    .loc-trustbar--white-card .loc-stat__icon {
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
        color: #d32027 !important;
        font-size: 24px !important;
        display: block !important;
        flex: none !important;
    }

    .loc-trustbar--white-card .loc-stat__body {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .loc-trustbar--white-card .loc-stat__value {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin: 0 0 1px !important;
        line-height: 1.2 !important;
        font-variant-numeric: tabular-nums !important;
        font-feature-settings: "tnum" !important;
    }

    .loc-trustbar--white-card .loc-stat__label {
        font-size: 11.5px !important;
        font-weight: 500 !important;
        color: #64748b !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* 3. Intro Section (Designed for Schools in Delhi) */
    .loc-intro-showcase {
        padding: 40px 0 50px !important;
        background: #ffffff !important;
    }

    .loc-intro-showcase__grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .loc-intro-showcase__left {
        text-align: center !important;
    }

    .loc-intro-showcase__left .loc-eyebrow {
        margin: 0 auto 10px !important;
        display: inline-flex !important;
    }

    .loc-intro-showcase__heading {
        font-size: clamp(24px, 5.5vw, 32px) !important;
        margin-bottom: 10px !important;
    }

    .loc-intro-showcase__lead {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin: 0 auto 18px !important;
        max-width: 480px !important;
    }

    .loc-feature-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .loc-feature-tab {
        padding: 10px 12px !important;
        border-radius: 14px !important;
        gap: 10px !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        align-items: center !important;
    }

    .loc-feature-tab.is-active {
        background: #ffffff !important;
        border-color: #dc2626 !important;
        box-shadow: 0 6px 18px rgba(220, 38, 38, 0.14) !important;
    }

    .loc-feature-tab__icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }

    .loc-feature-tab__title {
        font-size: 12.5px !important;
        margin: 0 !important;
        font-weight: 800 !important;
        text-align: left !important;
    }

    .loc-feature-tab__desc {
        display: none !important;
    }

    .loc-browser-frame {
        border-radius: 16px !important;
        box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.22) !important;
        border: 1px solid #334155 !important;
        margin-top: 6px !important;
    }

    .loc-browser-frame__header {
        padding: 8px 12px !important;
    }

    .loc-browser-frame__dots span {
        width: 7px !important;
        height: 7px !important;
    }

    .loc-browser-frame__address {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    .loc-browser-frame__live-badge {
        font-size: 9.5px !important;
        padding: 1px 6px !important;
    }

    .loc-slider-nav {
        width: 30px !important;
        height: 30px !important;
        font-size: 18px !important;
    }

    .loc-slider-prev { left: 6px !important; }
    .loc-slider-next { right: 6px !important; }

    .loc-slider-dots {
        padding: 8px 0 !important;
        gap: 6px !important;
    }

    .loc-slider-dot {
        width: 16px !important;
        height: 5px !important;
    }

    .loc-slider-dot.is-active {
        width: 24px !important;
    }

    /* 4. Powerful Modules Grid */
    .loc-modules {
        padding: 50px 0 !important;
    }

    .loc-modules__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* 5. Testimonials Section */
    .loc-testimonials {
        padding: 50px 0 !important;
    }

    .loc-testimonials__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* 6. Hardware & 3rd Party Integrations (Dark Theme) */
    .loc-integrations-dark {
        padding: 55px 0 !important;
    }

    .loc-integ-dark-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .loc-integ-dark-card {
        padding: 20px 14px !important;
        border-radius: 16px !important;
    }

    .loc-integ-dark-card .loc-card__3d-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 12px !important;
    }

    .loc-integ-dark-card .loc-card__3d-icon img {
        width: 44px !important;
        height: 44px !important;
    }

    .loc-integ-dark-card__title {
        font-size: 14.5px !important;
    }

    .loc-integ-dark-card__highlight {
        font-size: 11.5px !important;
    }

    /* 7. Why Choose Section (Building fully visible on mobile) */
    .loc-why-v2 {
        padding: 45px 0 0 !important;
        overflow: hidden !important;
    }

    .loc-why-v2__wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
        position: relative !important;
    }

    .loc-why-v2__right {
        order: 1 !important;
        width: 100% !important;
        padding-bottom: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .loc-why-v2__head {
        text-align: center !important;
        margin-bottom: 18px !important;
    }

    .loc-why-v2__title {
        font-size: 24px !important;
        white-space: normal !important;
    }

    .loc-why-v2__grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .loc-why-v2__item {
        position: relative !important;
        z-index: 10 !important;
        background: #ffffff !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
        border: 1px solid rgba(226, 232, 240, 0.95) !important;
    }

    .loc-why-v2__item-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 14.5px !important;
    }

    .loc-why-v2__left {
        order: 2 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 2 !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .loc-why-v2__art-wrap {
        max-width: 330px !important;
        width: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        z-index: 2 !important;
        padding-top: 25px !important;
    }

    .loc-why-v2__sun {
        width: 175px !important;
        height: 175px !important;
        bottom: -35px !important;
        z-index: 1 !important;
    }

    .loc-why-v2__birds {
        bottom: 80px !important;
        width: 65px !important;
        z-index: 2 !important;
    }

    .loc-why-v2__building {
        width: 100% !important;
        max-width: 330px !important;
        height: auto !important;
        display: block !important;
        margin-bottom: 0 !important;
        vertical-align: bottom !important;
        position: relative !important;
        z-index: 3 !important;
    }

    /* 8. YouTube Video Masterclasses */
    .loc-videos-dark {
        padding: 55px 0 !important;
    }

    .loc-videos-dark .loc-videos-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* 9. FAQ Section */
    .loc-faq {
        padding: 50px 0 !important;
    }

    .loc-faq__masonry {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 10. Trusted By Schools Ribbon */
    .loc-trust-ribbon {
        padding: 40px 0 !important;
        overflow: hidden !important;
    }

    .loc-trust-ribbon__card {
        padding: 10px 18px !important;
    }

    /* 11. Closing Demo Booking Form CTA */
    .loc-cta-delhi-premium {
        padding: 50px 0 !important;
    }

    .loc-cta-delhi__container {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .loc-cta-delhi__main-title {
        font-size: clamp(24px, 5.5vw, 32px) !important;
    }

    .loc-cta-delhi__main-desc {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    .loc-cta-perk {
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .loc-cta-perk__icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
    }

    .loc-cta-perk__text h3 {
        font-size: 13.5px !important;
    }

    .loc-cta-perk__text p {
        font-size: 11.5px !important;
    }

    .loc-satisfying-form-card {
        padding: 24px 18px 20px !important;
        border-radius: 18px !important;
    }

    .loc-satisfying-form__header {
        margin-bottom: 18px !important;
        padding-bottom: 14px !important;
    }

    .loc-satisfying-form__header-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }

    .loc-satisfying-form__title {
        font-size: 17.5px !important;
    }

    .loc-input-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .loc-input-field input,
    .loc-input-field select {
        padding: 10px 12px 10px 38px !important;
        font-size: 13px !important;
    }

    .loc-form-submit-btn {
        padding: 13px 18px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .loc-modules__grid {
        grid-template-columns: 1fr !important;
    }

    .loc-integ-dark-grid {
        grid-template-columns: 1fr !important;
    }
}


/* --- Interactive Hover Cards (Modules) --- */

.loc-card--interactive {
    position: relative;
    overflow: hidden;
}

.loc-card__main-content {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.loc-card--interactive:hover .loc-card__main-content {
    transform: translateX(-110%);
    opacity: 0;
}

/* The hover panel is absolutely positioned, so its content never influences the
   card's height. With centred content and overflow:hidden that silently cut the
   top and bottom off four of the five panels - the card was simply too short for
   what slides into it. Roomier cards, tighter padding, and a scroll of last
   resort so content can never be lost without trace. */
.loc-card--interactive {
    min-height: 248px;
}

.loc-card__hover-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow-y: auto;
    background: #ffffff;
    transform: translateX(110%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
}

.loc-card--interactive:hover .loc-card__hover-content {
    transform: translateX(0);
    pointer-events: auto;
}

.loc-attendance-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.loc-attendance-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.loc-att-label {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.loc-att-val {
    font-weight: 800;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.loc-att-bar-wrap {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #f1f5f9;
    display: flex;
    overflow: hidden;
    margin-top: 6px;
}

.loc-att-bar {
    height: 100%;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-att-bar--present { background: #10b981; }
.loc-att-bar--absent { background: #ef4444; }
.loc-att-bar--leave { background: #f59e0b; }

.loc-att-subtitle {
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
    text-align: center;
    font-weight: 500;
}

/* =========================================================================
   Service areas / regional coverage
   =========================================================================
   Follows the same card language as .loc-why-v2__item: white surface, 14px
   radius, hairline slate border, soft shadow, 2px hover lift. Colours come
   from the --loc-* theme tokens so a re-themed city restyles this too.
   ========================================================================= */

.loc-page .loc-service-areas-premium {
    padding: 70px 0 80px;
    background-color: #faf8f5;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    border-top: 1px solid #f1ece4;
    border-bottom: 1px solid #f1ece4;
}

.loc-page .loc-service-areas-premium > .loc-shell {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------- header -- */

.loc-page .loc-service-areas__header {
    text-align: center;
    max-width: 780px;
    margin-inline: auto;
    margin-bottom: 40px;
}

/* ------------------------------------------------------------ pillars -- */

.loc-page .loc-service-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 36px;
    position: relative;
}

.loc-page .loc-pillar-card--step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left !important;
    background: #ffffff;
    padding: 24px 22px 22px;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.03);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    height: 100%;
}

.loc-page .loc-pillar-card--step:hover {
    transform: translateY(-4px);
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 16px 32px -8px rgba(220, 38, 38, 0.10);
}

.loc-page .loc-pillar-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 14px;
    text-align: left !important;
}

.loc-page .loc-pillar-card__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 0;
}

.loc-page .loc-icon-crimson {
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
}

.loc-page .loc-icon-blue {
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
}

.loc-page .loc-icon-green {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.loc-page .loc-pillar-card__title {
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
    margin: 0;
    text-align: left !important;
    flex: 1 1 auto;
}

.loc-page .loc-pillar-card__text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    text-align: left !important;
}

/* Graphical Step Connector */
.loc-page .loc-pillar-connector {
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #fee2e2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.12);
    z-index: 5;
    transition: all 0.3s ease;
}

.loc-page .loc-pillar-card--step:hover .loc-pillar-connector {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.25);
    transform: translateY(-50%) scale(1.08);
}

/* Green Tick for 3rd Tile */
.loc-page .loc-pillar-connector--success {
    background: #10b981;
    border-color: #a7f3d0;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

.loc-page .loc-pillar-card--step:hover .loc-pillar-connector--success {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35);
    transform: translateY(-50%) scale(1.08);
}

.loc-page .loc-connector-mobile {
    display: none;
}

.loc-page .loc-connector-desktop {
    display: block;
}

@media (max-width: 991px) {
    .loc-page .loc-service-pillars {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .loc-page .loc-pillar-connector {
        top: auto;
        bottom: -15px;
        right: 50%;
        transform: translateX(50%);
    }

    .loc-page .loc-pillar-card--step:hover .loc-pillar-connector {
        transform: translateX(50%) scale(1.08);
    }

    .loc-page .loc-connector-mobile {
        display: block;
    }

    .loc-page .loc-connector-desktop {
        display: none;
    }
}

/* -------------------------------------------------------------- zones -- */

.loc-page .loc-zones-container {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    padding: 24px 24px 26px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.03);
}

/* --------------------------------------------------- zones disclosure -- */

.loc-page .loc-zones-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.loc-page .loc-zones-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 0 16px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.loc-page .loc-zones-toggle:focus-visible {
    outline: 2px solid var(--loc-primary);
    outline-offset: 4px;
    border-radius: 6px;
}

.loc-page .loc-zones-toggle__label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.loc-page .loc-zones-toggle__label i {
    color: var(--loc-primary);
    font-size: 19px;
}

.loc-page .loc-zones-toggle__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.loc-page .loc-zones-count {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--loc-primary);
    background: rgba(220, 38, 38, 0.08);
    border-radius: 999px;
    padding: 6px 14px;
    white-space: nowrap;
}

.loc-page .loc-zones-chev {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.08);
    color: var(--loc-primary);
    font-size: 18px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}

.loc-page .loc-zones-toggle:hover .loc-zones-chev {
    background: rgba(220, 38, 38, 0.16);
}

.loc-page .loc-zones-container.is-open .loc-zones-chev {
    transform: rotate(180deg);
}

/* Collapsed by CSS only - the markup always carries every area name.

   max-height rather than the grid-template-rows 0fr/1fr trick: that trick
   needs min-height:0 + overflow:hidden on the inner, and in this layout the
   pair makes the fr track resolve to the padding alone once the grid goes
   single-column, so the panel opened to 20px on mobile while working on
   desktop. The open height is set in px by the toggle script and then
   released to `none` when the transition ends, so content can never be
   clipped even if that measurement is ever wrong. */
.loc-page .loc-zones-panel {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Peek: the closed panel shows the first row of areas instead of nothing, so
   the collapsed state reads as content the reader can already scan. */
.loc-page .loc-zones-container:not(.is-open) .loc-zones-panel--peek {
    max-height: 170px;
}

/* Fade the cut edge so the row reads as "there is more", not as clipping. */
.loc-page .loc-zones-container:not(.is-open) .loc-zones-panel--peek::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 74px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
    pointer-events: none;
}

.loc-page .loc-zones-panel__inner {
    padding-top: 20px;
}

/* "Show all 11" / "Show less" */
.loc-page .loc-zones-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--loc-primary);
    white-space: nowrap;
}

.loc-page .loc-zones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.loc-page .loc-zone-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                background 0.25s ease,
                box-shadow 0.25s ease;
}

.loc-page .loc-zone-card:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: rgba(220, 38, 38, 0.35);
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.08);
}

.loc-page .loc-zone-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.loc-page .loc-zone-card__pin {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(220, 38, 38, 0.09);
    color: var(--loc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.loc-page .loc-zone-card__name {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.loc-page .loc-zone-card__desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--loc-text-muted);
    margin: 9px 0 0;
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 992px) {
    .loc-page .loc-service-pillars {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .loc-page .loc-zones-container {
        padding: 20px 16px 22px;
    }

    .loc-page .loc-zones-grid {
        grid-template-columns: 1fr;
    }

    .loc-page .loc-zones-toggle {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .loc-page .loc-zones-toggle__meta {
        width: 100%;
        justify-content: space-between;
    }

    .loc-page .loc-coverage-rings {
        width: 230px;
        height: 230px;
        opacity: 0.16;
    }

    /* One card is taller when the grid goes single-column. */
    .loc-page .loc-zones-container:not(.is-open) .loc-zones-panel--peek {
        max-height: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loc-page .loc-pillar-card,
    .loc-page .loc-zone-card,
    .loc-page .loc-pillar-connector,
    .loc-page .loc-zones-chev {
        transition: none;
    }

    /* Snap open/closed instead of animating the height. */
    .loc-page .loc-zones-panel {
        transition: none;
    }

    .loc-page .loc-pillar-card:hover,
    .loc-page .loc-zone-card:hover {
        transform: none;
    }

    /* Connector pucks are centred with a transform, so null the hover scale
       without dropping the centring translate. */
    .loc-page .loc-pillar-card--step:hover .loc-pillar-connector {
        transform: translateY(-50%);
    }
}