/* ============================================================
   In Home Doctor — Fluent-inspired design system
   Palette: In Home Doctor logo blue + Fluent neutrals
   Typography: Segoe UI Variable / Segoe UI (system fallback)
   ============================================================ */

:root {
    /* ---- In Home Doctor logo blue ---- */
    --brand-blue-logo: #6A9EAB;
    --brand-blue-rgb: 106, 158, 171;
    --brand-title: #DCAD7E;
    --ms-blue: #659ba9; /* accessible primary derived from the logo */
    --ms-blue-hover: #3A6570;
    --ms-blue-press: #2C5059;
    --ms-blue-light: #DCEBED;
    --ms-blue-lighter: #F1F7F8;
    /* ---- Parrot green (logo accent) — used sparingly as a highlight ---- */
    --light-orange: #DCAD7E;
    /* ---- Parrot green (logo accent) — used sparingly as a highlight ---- */
    --parrot-green: #7AC143;
    --parrot-green-hover: #6AAA38;
    --parrot-green-light: #E9F5DD;
    /* ---- Microsoft neutral palette (Fluent) ---- */
    --grey-0: #FFFFFF;
    --grey-10: #FAF9F8;
    --grey-20: #F3F2F1; /* neutralLighterAlt */
    --grey-30: #EDEBE9; /* neutralLighter */
    --grey-40: #E1DFDD; /* neutralLight */
    --grey-50: #D2D0CE; /* neutralQuaternaryAlt */
    --grey-90: #A19F9D; /* neutralTertiaryAlt */
    --grey-110: #8A8886; /* neutralTertiary */
    --grey-130: #605E5C; /* neutralSecondary */
    --grey-150: #3B3A39; /* neutralPrimaryAlt */
    --grey-160: #323130; /* neutralPrimary */
    --grey-180: #201F1E; /* neutralDark */
    /* ---- Semantic ---- */
    --text: var(--grey-160);
    --text-muted: var(--grey-130);
    --text-subtle: var(--grey-110);
    --bg: var(--grey-0);
    --bg-alt: var(--grey-20);
    --border: var(--grey-40);
    --border-strong: var(--grey-90);
    --focus: #000000;
    /* ---- Status (Microsoft) ---- */
    --success: #107C10;
    --warning: #FFB900;
    --error: #A4262C;
    --info: var(--ms-blue);
    /* ---- Type ---- */
    --font: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "IBM Plex Sans Arabic", sans-serif;
    /* Fluent type ramp */
    --fs-100: 12px; /* caption */
    --fs-200: 14px; /* body */
    --fs-300: 16px; /* body-large */
    --fs-400: 20px; /* subtitle */
    --fs-500: 24px; /* title-3 */
    --fs-600: 28px; /* title-2 */
    --fs-700: 32px; /* title-1 */
    --fs-800: 40px; /* display */
    --fs-900: 68px; /* large display */

    --lh-tight: 1.2;
    --lh-body: 1.5;
    /* ---- Spacing (4px rhythm) ---- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 48px;
    --s-10: 64px;
    /* ---- Elevation (Fluent shadows) ---- */
    --shadow-2: 0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
    --shadow-4: 0 2px 4px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
    --shadow-8: 0 4px 8px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
    --shadow-16: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
    --shadow-28: 0 14px 28px rgba(0,0,0,.24), 0 0 8px rgba(0,0,0,.20);
    /* ---- Radii ---- */
    --r-2: 2px; /* Fluent small */
    --r-4: 4px; /* Fluent standard */
    --r-6: 6px;
    --r-8: 8px;
    /* ---- Motion ---- */
    --ease: cubic-bezier(0.33, 0, 0.67, 1); /* Fluent standard */
    --dur-fast: 100ms;
    --dur: 200ms;
}

/* ============================================================
   RTL / Arabic
   ============================================================ */
html[lang="ar"] {
    --font: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, "Segoe UI", sans-serif;
}

    html[lang="ar"] body {
        font-family: var(--font);
        line-height: 1.75;
        letter-spacing: 0;
    }

    html[lang="ar"] h1,
    html[lang="ar"] h2,
    html[lang="ar"] h3,
    html[lang="ar"] h4,
    html[lang="ar"] h5,
    html[lang="ar"] h6,
    html[lang="ar"] button,
    html[lang="ar"] input,
    html[lang="ar"] select,
    html[lang="ar"] textarea {
        font-family: var(--font);
    }

    html[lang="ar"] h1,
    html[lang="ar"] h2,
    html[lang="ar"] h3 {
        font-weight: 700;
        line-height: 1.35;
    }

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-200);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--ms-blue);
    text-decoration: none;
}

    a:hover {
        color: var(--ms-blue-hover);
        text-decoration: underline;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    font-weight: 600;
    line-height: var(--lh-tight);
    margin: 0 0 var(--s-3);
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--fs-800);
    font-weight: 600;
    color: var(--brand-title);
}

h2 {
    font-size: var(--fs-600);
    font-weight: 600;
    color: #4d9f0d;
}

h3 {
    font-size: var(--fs-500);
    font-weight: 600;
}

h4 {
    font-size: var(--fs-400);
    font-weight: 600;
}

p {
    margin: 0 0 var(--s-4);
}

/* Fluent underline-link style */
a.link {
    color: var(--ms-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

    a.link:hover {
        color: var(--ms-blue-press);
    }

/* ============================================================
   Layout
   ============================================================ */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--s-6);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ms-blue);
    color: #fff;
    padding: var(--s-3) var(--s-4);
    z-index: 999;
    border-radius: var(--r-4);
}

    .skip-link:focus {
        left: var(--s-4);
        top: var(--s-4);
    }

/* Fluent focus: 2px black outline + inner white, on 2px offset */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    box-shadow: inset 0 0 0 2px #fff;
    border-radius: var(--r-4);
}

/* ============================================================
   Buttons (Fluent)
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 32px;
    padding: 6px 20px;
    font-family: var(--font);
    font-size: var(--fs-200);
    font-weight: 600;
    line-height: 20px;
    border: 1px solid transparent;
    border-radius: var(--r-4);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    text-decoration: none;
    user-select: none;
}

/* Primary */
.btn--primary {
    background: var(--ms-blue);
    color: #fff;
    border-color: var(--ms-blue);
}

    .btn--primary:hover {
        background: var(--ms-blue-hover);
        border-color: var(--ms-blue-hover);
        color: #fff;
        text-decoration: none;
    }

    .btn--primary:active {
        background: var(--ms-blue-press);
        border-color: var(--ms-blue-press);
    }

/* Secondary (outline) */
.btn--ghost {
    background: #fff;
    color: var(--grey-160);
    border-color: var(--grey-90);
}

    .btn--ghost:hover {
        background: var(--grey-20);
        border-color: var(--grey-110);
        color: var(--grey-180);
        text-decoration: none;
    }

    .btn--ghost:active {
        background: var(--grey-30);
    }

/* Subtle / transparent */
.btn--subtle {
    background: transparent;
    color: var(--ms-blue);
    border-color: transparent;
}

    .btn--subtle:hover {
        background: var(--grey-20);
        color: var(--ms-blue-hover);
        text-decoration: none;
    }

/* Accent — parrot green, matches the logo's heart accent */
.btn--accent {
    background: var(--parrot-green);
    color: #fff;
    border-color: var(--parrot-green);
}

    .btn--accent:hover {
        background: var(--parrot-green-hover);
        border-color: var(--parrot-green-hover);
        color: #fff;
        text-decoration: none;
    }

.btn--sm {
    min-height: 24px;
    padding: 2px 12px;
    font-size: var(--fs-100);
}

.btn--lg {
    min-height: 40px;
    padding: 8px 24px;
    font-size: var(--fs-300);
}

.btn:disabled {
    background: var(--grey-20);
    color: var(--grey-90);
    border-color: var(--grey-30);
    cursor: not-allowed;
}

/* ============================================================
   Utility bar
   ============================================================ */
.utility {
    background: linear-gradient(90deg, #47a0b6, var(--ms-blue));
    color: #fff;
    font-size: var(--fs-100);
    border-bottom: 1px solid rgba(var(--brand-blue-rgb), .45);
}

.utility__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: 6px 0;
}

.utility__left, .utility__right {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.utility__left {
    flex: 1 1 640px;
    min-width: 0;
}

.utility-heartbeat {
    display: flex;
    flex: 0 1 50%;
    align-items: center;
    width: 50%;
    min-width: 165px;
    max-width: 158px;
    height: 28px;
    overflow: hidden;
    pointer-events: none;
}

    .utility-heartbeat svg {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .utility-heartbeat path {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        stroke-width: 2.25;
    }

.utility-heartbeat__track {
    stroke: rgba(255, 255, 255, .5);
}

.utility-heartbeat__pulse {
    stroke: url(#utilityHeartbeatWave);
    stroke-dasharray: 82 318;
    stroke-dashoffset: 82;
    filter: drop-shadow(0 0 3px rgba(127, 255, 212, .9));
    animation: utilityHeartbeat .8s linear infinite;
}

@keyframes utilityHeartbeat {
    to {
        stroke-dashoffset: -318;
    }
}

@media (prefers-reduced-motion: reduce) {
    .utility-heartbeat__pulse {
        animation: none;
        stroke-dasharray: none;
    }
}

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

    .utility a:hover {
        color: #fff;
        text-decoration: none;
    }

.utility__cta {
    color: var(--ms-blue);
    font-weight: 600;
}

.translate-widget {
    display: inline-flex;
    align-items: center;
    height: 30px;
}

/* Microsoft-styled Google Translate widget — blue pill to match brand accent */
#google_translate_element {
    display: inline-flex !important;
    align-items: center;
    height: 30px;
}

#google_translate_element .goog-te-gadget {
    font-family: var(--font) !important;
    font-size: var(--fs-100) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    line-height: normal;
}
.utility a {
    color: #fff!important;
}
/* Hide the "Powered by Google Translate" text/line-break the gadget appends after the selector */
#google_translate_element .goog-te-gadget > br,
#google_translate_element .goog-te-gadget > .VIpgJd-ZVi9od-l4eHX-hSRGPd,
#google_translate_element .goog-te-gadget > span:not(.goog-te-gadget-simple) {
    display: none !important;
}

#google_translate_element .goog-te-gadget-simple {
    box-sizing: border-box;
    background: var(--ms-blue) !important;
    border: 1px solid var(--ms-blue) !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    color: #fff !important;
    height: 30px;
    line-height: 28px;
  /*  display: inline-flex !important;*/
    align-items: center;
    cursor: pointer;
}

    #google_translate_element .goog-te-gadget-simple:hover {
        background: var(--ms-blue-hover) !important;
        border-color: var(--ms-blue-hover) !important;
    }

#google_translate_element .goog-te-gadget-icon {
    display: none !important;
}

#google_translate_element .goog-te-menu-value {
    display: inline-flex !important;
    align-items: center;
}

#google_translate_element .goog-te-menu-value span,
#google_translate_element .goog-te-menu-value {
    color: #fff !important;
}

    #google_translate_element .goog-te-menu-value span:first-child::before {
        content: "🌐";
        margin-right: 6px;
    }

/* Native <select> fallback (SIMPLE layout before the widget script finishes loading) */
#google_translate_element select.goog-te-combo {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-family: var(--font) !important;
    font-size: var(--fs-100) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    background: var(--ms-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    background-size: 10px 7px;
    border: 1px solid var(--ms-blue) !important;
    border-radius: 999px !important;
    height: 30px;
    line-height: 30px;
    min-width: 150px;
    padding: 0 30px 0 14px;
    cursor: pointer;
}

    #google_translate_element select.goog-te-combo option {
        color: var(--grey-160);
        background: #fff;
    }

/* Google injects a fixed translation banner after a language is selected.
   Hide both its legacy and current variants while retaining our own selector. */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
}

html,
body {
    top: 0 !important;
    margin-top: 0 !important;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--grey-40);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    min-height: 48px;
    padding: var(--s-3) 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--grey-180);
    font-weight: 600;
    font-size: var(--fs-300);
    text-decoration: none;
}

    .brand:hover {
        text-decoration: none;
        color: var(--grey-180);
    }

.brand__mark {
    width: 28px;
    height: 28px;
    color: var(--ms-blue);
}

.primary-nav {
    margin-left: 400px;
}

    .primary-nav ul {
        display: flex;
        gap: var(--s-4);
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: var(--fs-500)!important;
        font-weight: 400;
    }

    .primary-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 6px 10px;
        color: #DCAD7E;
        font-size: var(--fs-300);
        font-weight: 400;
        border-radius: var(--r-4);
        text-decoration: none;
        position: relative;
        transition: background var(--dur-fast) var(--ease);
    }

        .primary-nav a:hover {
            background: var(--grey-20);
            color: var(--ms-blue);
          
            text-decoration: none;
        }

        .primary-nav a.is-active {
            color: var(--ms-blue);
            font-weight: 600;
        }
            /* Fluent pivot underline */
            .primary-nav a.is-active::after {
                content: "";
                position: absolute;
                left: 10px;
                right: 10px;
                bottom: 2px;
                height: 2px;
                background: var(--ms-blue);
                border-radius: 1px;
            }

/* ============================================================
   Mega menu (columned dropdown) — "About"
   ============================================================ */
.nav-item {
    position: relative;
}

.nav-mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-4);
    font-family: inherit;
    font-size: var(--fs-300);
    color: #50ab0a;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

    .nav-mega-trigger:hover {
        background: var(--grey-20);
        color: var(--ms-blue);
       
    }

.nav-item.is-open .nav-mega-trigger {
    background: var(--grey-20);
    color: var(--grey-180);
}

.nav-mega-caret {
    transition: transform var(--dur) var(--ease);
}

.nav-item:hover .nav-mega-caret,
.nav-item:focus-within .nav-mega-caret,
.nav-item.is-open .nav-mega-caret {
    transform: rotate(180deg);
}

.mega-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(2, 160px) 220px;
    min-width: 400px;
    background: #fff;
    border: 1px solid var(--grey-40);
    border-radius: var(--r-8);
    box-shadow: var(--shadow-28);
    padding: var(--s-6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.nav-item.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}

.mega-menu__col {
    padding: 0 var(--s-2);
    border-right: 1px solid var(--grey-30);
}

    .mega-menu__col:first-child {
        padding-left: 0;
    }

.mega-menu__heading {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-100);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-subtle);
}

.mega-menu__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-2);
}

.mega-menu__col a {
    display: block;
    padding: 4px 0;
    color: var(--grey-160);
    font-size: var(--fs-200);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

    .mega-menu__col a:hover {
        color: var(--ms-blue);
        padding-left: 4px;
        text-decoration: none;
    }

.mega-menu__feature {
    display: flex;
    flex-direction: column;
    margin-left: var(--s-5);
    padding: var(--s-5);
    background: linear-gradient(160deg, var(--ms-blue-lighter), var(--parrot-green-light));
    border-radius: var(--r-8);
}

.mega-menu__feature-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--ms-blue);
    margin-bottom: var(--s-3);
}

    .mega-menu__feature-icon svg {
        width: 26px;
        height: 26px;
    }

.mega-menu__feature h4 {
    font-size: var(--fs-300);
    color: var(--grey-180);
    margin-bottom: var(--s-2);
}

.mega-menu__feature p {
    font-size: var(--fs-100);
    color: var(--text-muted);
    margin-bottom: var(--s-3);
}

.mega-menu__feature-link {
    margin-top: auto;
    color: var(--ms-blue);
    font-weight: 600;
    font-size: var(--fs-100);
    text-decoration: none;
}

    .mega-menu__feature-link:hover {
        text-decoration: underline;
    }

@media (prefers-reduced-motion: reduce) {
    .mega-menu,
    .nav-mega-caret {
        transition: none;
    }
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-4);
    padding: var(--s-2);
    cursor: pointer;
    color: var(--grey-160);
}

    .nav-toggle:hover {
        background: var(--grey-20);
    }

    .nav-toggle span {
        display: block;
        width: 20px;
        height: 1.5px;
        background: currentColor;
        margin: 4px 0;
        border-radius: 1px;
    }

.mobile-nav {
    border-top: 1px solid var(--grey-40);
    background: #fff;
    box-shadow: var(--shadow-8);
}

    .mobile-nav ul {
        list-style: none;
        margin: 0;
        padding: var(--s-2) var(--s-6);
    }

    .mobile-nav li {
        border-bottom: 1px solid var(--grey-30);
    }

    .mobile-nav a {
        display: block;
        padding: var(--s-3) var(--s-2);
        color: var(--grey-160);
        border-radius: var(--r-4);
    }

        .mobile-nav a:hover {
            background: var(--grey-20);
            text-decoration: none;
        }

/* ============================================================
   Hero
   ============================================================ */
.home-page {
    min-height: 100vh;
    background-color: #f7faf9;
    background-image: linear-gradient(90deg, #eef7f5 0%, #f7faf9 18%, #f7faf9 82%, #eef7f5 100%);
    isolation: isolate;
}

.home-page::before,
.home-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: clamp(150px, 18vw, 360px);
    background-image: url("../img/hero-care-network.png");
    background-position: right center;
    background-size: auto 100vh;
    background-repeat: no-repeat;
    pointer-events: none;
}

.home-page::before {
    right: 0;
}

.home-page::after {
    left: 0;
    transform: scaleX(-1);
}

.home-page #main {
    background: #fff;
}

.hero {
    padding: clamp(24px, 4vw, 24px) 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}
    /* Subtle Microsoft acrylic hint */
    .hero::before {
        content: "";
        position: absolute;
        top: -200px;
        right: -200px;
        width: 600px;
        height: 600px;
        background: none;
        pointer-events: none;
    }

.hero::after {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -280px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: none;
    pointer-events: none;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
    gap: clamp(18px, 2vw, 32px);
    align-items: stretch;
    position: relative;
    z-index: 1;
    padding: clamp(16px, 2vw, 28px);
    border: 1px solid rgba(35, 142, 198, .16);
    border-radius: 24px;
    background: transparent;
    box-shadow: 0 24px 70px rgba(22, 74, 102, .14), 0 3px 12px rgba(22, 74, 102, .06);
    backdrop-filter: blur(10px);
}

.hero__copy,
.hero__visual {
    min-width: 0;
}
.hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(6px, 1vw, 14px);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--fs-500);
    font-weight: 600;
    color: var(--ms-blue);
    margin: 0 0 var(--s-4);
}

.hero .eyebrow {
    width: fit-content;
    padding: 7px 12px;
    border: 1px solid rgba(35, 142, 198, .18);
    border-radius: 999px;
    background: rgba(35, 142, 198, .07);
    font-size: .83rem;
}

    .eyebrow::before {
        content: "";
        width: 18px;
        height: 2px;
        background: var(--parrot-green);
        display: inline-block;
    }

.eyebrow--light {
    color: #B3D6F2;
}

.hero__title {
    max-width: 22ch;
    margin-bottom: var(--s-3);
    font-size: clamp(2.00rem, 3.3vw, 4.00rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-family: var(--font);
}

.hero__title-accent {
    color: var(--parrot-green);
}

.hero__lede {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 59ch;
    margin-bottom: var(--s-5);
}

.hero__actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--s-4);
}

.hero__primary-action {
    box-shadow: 0 10px 24px rgba(35, 142, 198, .24);
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--grey-130);
    font-size: .82rem;
    font-weight: 600;
}

.hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero__trust li::before {
    content: "✓";
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: rgba(122, 193, 67, .16);
    color: #438a17;
    font-size: 11px;
    font-weight: 800;
}

.hero-medical-banners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: var(--s-5);
}

.hero-medical-banner {
    position: relative;
    isolation: isolate;
    min-height: 125px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--s-3);
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 14px;
    background-size: cover;
   
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.hero-medical-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 26px rgba(22, 74, 102, .18);
}

.hero-medical-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 45, 82, .9) 0%, rgba(0, 74, 126, .66) 48%, rgba(0, 74, 126, .06) 100%);
}

.hero-medical-banner strong,
.hero-medical-banner span {
    max-width: 72%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.hero-medical-banner strong {
    font-size: var(--fs-200);
    line-height: 1.25;
}

.hero-medical-banner span {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .92);
}

.hero-medical-banner--doctor {
    background-image: url("../img/hero-banner-doctor.webp");
}

.hero-medical-banner--nurse {
    background-image: url("../img/hero-banner-nurse.webp");
}

.hero-medical-banner--response {
    background-image: url("../img/hero-banner-response.webp");
}

.hero-medical-banner--homecare {
    background-image: url("../img/hero-banner-homecare.webp");
}

.route-map {
    width: 100%;
    height: auto;
}

    .route-map .arc {
        stroke-dasharray: 5 8;
    }

    .route-map .node__label {
        font-family: var(--font);
        font-size: 11px;
        fill: var(--grey-160);
        font-weight: 600;
        letter-spacing: .02em;
    }

    .route-map .node__label--hub {
        fill: var(--ms-blue);
        font-weight: 700;
    }

.pulse {
    filter: drop-shadow(0 0 6px rgba(0,120,212,.6));
}

@media (prefers-reduced-motion: reduce) {
    .pulse {
        display: none;
    }

    .arc {
        stroke-dasharray: none;
    }
}

/* ============================================================
   Home care story
   ============================================================ */
.home-care-story {
    padding: clamp(25px, 8vw, 50px) 0;
    background: linear-gradient(180deg, #fff 0%, #f8fcfe 58%, #fff 100%);
}

.home-care-story__head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: end;
    gap: clamp(28px, 6vw, 84px);
    margin-bottom: clamp(28px, 4vw, 46px);
}

.home-care-story__head h2 {
    max-width: 32ch;
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.25rem);
    line-height: 1.06;
    letter-spacing: -.035em;
}

.home-care-story__head > p {
    max-width: 58ch;
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.75;
}

.home-care-story__mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 280px 250px;
    gap: 16px;
}

.home-care-story__photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    border-radius: 20px;
    background: var(--grey-30);
    box-shadow: 0 14px 38px rgba(22, 74, 102, .13);
}

.home-care-story__photo::after {
    content: "";
    position: absolute;
    inset: 36% 0 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(4, 44, 67, .84));
    pointer-events: none;
}

.home-care-story__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.home-care-story__photo:hover img { transform: scale(1.025); }
.home-care-story__photo--feature { grid-column: 1 / 8; grid-row: 1 / 3; }
.home-care-story__photo--consult { grid-column: 8 / 13; grid-row: 1; }
.home-care-story__photo--sample { grid-column: 8 / 10; grid-row: 2; }
.home-care-story__photo--family { grid-column: 10 / 13; grid-row: 2; }
.home-care-story__photo--feature img { object-position: center 45%; }
.home-care-story__photo--consult img { object-position: center 38%; }
.home-care-story__photo--sample img { object-position: center 35%; }
.home-care-story__photo--family img { object-position: center 32%; }

.home-care-story__photo figcaption {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: grid;
    gap: 3px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

.home-care-story__photo figcaption span {
    color: #cfeeff;
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-care-story__photo figcaption strong { font-size: clamp(.9rem, 1.25vw, 1.13rem); line-height: 1.3; }
.home-care-story__photo--feature figcaption { right: 28px; bottom: 28px; left: 28px; }
.home-care-story__photo--feature figcaption strong { max-width: 24ch; font-size: clamp(1.35rem, 2.3vw, 2rem); }
.home-care-story__photo--sample figcaption,
.home-care-story__photo--family figcaption { right: 13px; bottom: 13px; left: 13px; }
.home-care-story__photo--sample figcaption strong,
.home-care-story__photo--family figcaption strong { font-size: .82rem; }

.home-care-story__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 24px;
    padding: 26px 28px;
    border: 1px solid rgba(35, 142, 198, .14);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(22, 74, 102, .07);
}

.home-care-story__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 38px); flex: 1; }
.home-care-story__benefits > span { display: grid; grid-template-columns: 38px 1fr; gap: 1px 10px; align-items: center; min-width: 0; }
.home-care-story__benefits i { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--ms-blue-lighter); color: var(--ms-blue); }
.home-care-story__benefits b { color: var(--grey-180); font-size: .86rem; }
.home-care-story__benefits small { color: var(--text-muted); font-size: .73rem; line-height: 1.35; }
.home-care-story__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.home-care-story__note { margin: 12px 4px 0; color: var(--text-subtle); font-size: .72rem; text-align: right; }

@media (max-width: 1024px) {
    .home-care-story__mosaic { grid-template-rows: 260px 220px; }
    .home-care-story__footer { align-items: stretch; flex-direction: column; }
    .home-care-story__actions { justify-content: flex-start; }
}

@media (max-width: 780px) {
    .home-care-story__head { grid-template-columns: 1fr; gap: 16px; }
    .home-care-story__head h2 { max-width: 20ch; }
    .home-care-story__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 410px 220px 220px; }
    .home-care-story__photo--feature { grid-column: 1 / 3; grid-row: 1; }
    .home-care-story__photo--consult { grid-column: 1 / 3; grid-row: 2; }
    .home-care-story__photo--sample { grid-column: 1; grid-row: 3; }
    .home-care-story__photo--family { grid-column: 2; grid-row: 3; }
    .home-care-story__benefits { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .home-care-story { padding: 58px 0; }
    .home-care-story__mosaic { display: flex; margin-right: calc(var(--container-pad, 20px) * -1); padding-right: var(--container-pad, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .home-care-story__mosaic::-webkit-scrollbar { display: none; }
    .home-care-story__photo { flex: 0 0 84vw; height: 390px; scroll-snap-align: start; }
    .home-care-story__photo--consult,
    .home-care-story__photo--sample,
    .home-care-story__photo--family { flex-basis: 72vw; }
    .home-care-story__photo--sample figcaption strong,
    .home-care-story__photo--family figcaption strong { font-size: 1rem; }
    .home-care-story__footer { padding: 22px; }
    .home-care-story__actions { display: grid; }
    .home-care-story__note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .home-care-story__photo img { transition: none; }
    .home-care-story__photo:hover img { transform: none; }
}

/* ============================================================
   Trust strip
   ============================================================ */
.trust-strip {
    background: #fff;
    border-top: 1px solid var(--grey-40);
    border-bottom: 1px solid var(--grey-40);
    padding: var(--s-6) 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    text-align: center;
}

.trust-item__value {
    display: block;
    font-size: var(--fs-600);
    font-weight: 600;
    color: var(--grey-180);
    line-height: 1.1;
    margin-bottom: var(--s-1);
}

.trust-item__label {
    font-size: var(--fs-100);
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ============================================================
   Sections
   ============================================================ */
.section {
    padding: var(--s-5) 0;
}

.section--tint {
    background: var(--grey-10);
}

.section--navy {
    background: #212529;
}

.section__head {
    max-width: 850px;
    margin-bottom: var(--s-8);

    
}

.section__lede {
    color: var(--text-muted);
    font-size: var(--fs-300);
}

.grid {
    display: grid;
    gap: var(--s-5);
}

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

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

/* ============================================================
   Cards (Fluent)
   ============================================================ */
.card {
    background: #fff;
    border: 1px solid var(--grey-40);
    border-radius: var(--r-8);
    padding: var(--s-6);
    box-shadow: var(--shadow-2);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

    .card:hover {
        box-shadow: var(--shadow-8);
        transform: translateY(-2px);
    }

    .card h3 {
        color: var(--grey-180);
    }

    .card p {
        color: var(--text-muted);
        margin-bottom: 0;
    }

.card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--ms-blue);
    margin: 0 0 var(--s-4) -4px;
}

    .card__icon svg {
        width: 100%;
        height: 100%;
    }

/* Left accent variant */
.card--line {
    border-left: 3px solid var(--ms-blue);
}

/* ============================================================
   Flip cards (Services) — 3D flip revealing a themed back panel
   ============================================================ */
.flip-card {
    height: 100%;
    perspective: 1400px;
    cursor: pointer;
}

    .flip-card:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 3px;
        border-radius: var(--r-8);
    }

.flip-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 272px;
    transition: transform .7s cubic-bezier(.4, .2, .2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card__inner,
.flip-card:focus-visible .flip-card__inner,
.flip-card.is-flipped .flip-card__inner {
    transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--r-8);
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2);
}

.flip-card__front {
    background: linear-gradient(155deg, #fff 0%, var(--ms-blue-lighter) 100%);
    border: 1px solid var(--grey-40);
    border-top: 3px solid var(--ms-blue);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

    .flip-card__front h3 {
        color: var(--grey-180);
    }

    .flip-card__front p {
        color: var(--text-muted);
        margin-bottom: 0;
    }

    .flip-card__front .card__icon {
        color: var(--ms-blue);
    }

.flip-card:nth-child(2n) .flip-card__front {
    background: linear-gradient(155deg, #fff 0%, var(--parrot-green-light) 100%);
    border-top-color: var(--parrot-green);
}

    .flip-card:nth-child(2n) .flip-card__front .card__icon {
        color: var(--parrot-green-hover);
    }

.flip-card:hover .flip-card__front,
.flip-card:focus-visible .flip-card__front {
    box-shadow: var(--shadow-8);
}

.flip-card__back {
    background: linear-gradient(155deg, var(--ms-blue), var(--ms-blue-press));
    color: #fff;
    transform: rotateY(180deg);
    overflow: hidden;
    justify-content: flex-end;
}

.flip-card:nth-child(2n) .flip-card__back {
    background: linear-gradient(155deg, var(--parrot-green), var(--parrot-green-hover));
}

.flip-card__watermark {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 140px;
    height: 140px;
    color: #fff;
    opacity: .18;
    pointer-events: none;
}

.flip-card__back h3 {
    position: relative;
    z-index: 1;
    color: #fff;
    margin-bottom: var(--s-2);
}

.flip-card__back p {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, .9);
    margin-bottom: var(--s-4);
}

.flip-card__cta {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-100);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    padding-bottom: 2px;
}

    .flip-card__cta:hover {
        border-color: #fff;
        color: #fff;
        text-decoration: none;
    }

@media (prefers-reduced-motion: reduce) {
    .flip-card__inner {
        transition: none;
    }
}

/* ============================================================
   Steps / How it works — animated stepper timeline
   ============================================================ */
.steps {
    list-style: none;
    margin: 0;
    padding: var(--s-4) 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
}

.step {
    position: relative;
    text-align: center;
    opacity: 1;
    transform: none;
}

    .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 34px;
        left: calc(50% + 38px);
        width: calc(100% - 76px);
        height: 2px;
        background: linear-gradient(90deg, var(--ms-blue), var(--parrot-green));
        opacity: .35;
        z-index: 0;
    }

.step__marker {
    position: relative;
    z-index: 1;
    width: 68px;
    height: 68px;
    margin: 0 auto var(--s-4);
    border-radius: 50%;
    background: var(--ms-blue);
    border: 2px solid var(--ms-blue-light);
    display: grid;
    place-items: center;
    color: #e8eef2;
    box-shadow: var(--shadow-4);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

    .step__marker svg {
        width: 28px;
        height: 28px;
    }

.step__num {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--parrot-green);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    border: 2px solid var(--grey-10);
}

.step:hover .step__marker {
    transform: translateY(-4px);
    box-shadow: var(--shadow-8);
    border-color: var(--ms-blue);
}

.step__title {
    font-size: var(--fs-400);
    margin-bottom: var(--s-2);
}

.step__desc {
    color: var(--text-muted);
    font-size: var(--fs-200);
    max-width: 26ch;
    margin: 0 auto;
}

/* Reveal-on-scroll — only engages once JS has attached the observer, so content
   stays visible if JavaScript is unavailable. */
.steps.js-anim .step {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

    .steps.js-anim .step.in-view {
        opacity: 1;
        transform: none;
    }

    .steps.js-anim .step:nth-child(1) { transition-delay: 0ms; }
    .steps.js-anim .step:nth-child(2) { transition-delay: 120ms; }
    .steps.js-anim .step:nth-child(3) { transition-delay: 240ms; }
    .steps.js-anim .step:nth-child(4) { transition-delay: 360ms; }

@media (max-width: 1024px) {
    .steps {
        grid-template-columns: 1fr;
        gap: var(--s-7);
    }

    .step {
        display: flex;
        align-items: flex-start;
        gap: var(--s-5);
        text-align: left;
    }

        .step:not(:last-child)::after {
            top: 68px;
            left: 33px;
            width: 2px;
            height: calc(100% - 60px + var(--s-7));
            background: linear-gradient(180deg, var(--ms-blue), var(--parrot-green));
        }

    .step__marker {
        margin: 0;
        flex-shrink: 0;
    }

    .step__desc {
        max-width: none;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .steps.js-anim .step {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .step__marker,
    .step:hover .step__marker {
        transition: none;
        transform: none;
    }
}

/* ============================================================
   Filter bar
   ============================================================ */
.filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}

#productSearch {
    width: 100%;
    max-width: 400px;
    min-height: 32px;
    padding: 5px var(--s-3);
    font-family: var(--font);
    font-size: var(--fs-200);
    color: var(--text);
    background: #fff;
    border: 1px solid var(--grey-90);
    border-bottom-width: 2px;
    border-radius: var(--r-4);
    transition: border-color var(--dur-fast) var(--ease);
}

    #productSearch:hover {
        border-color: var(--grey-110);
    }

    #productSearch:focus {
        outline: none;
        border-color: var(--ms-blue);
        border-bottom-color: var(--ms-blue);
    }

.chip-row {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.chip {
    font-family: var(--font);
    font-size: var(--fs-200);
    font-weight: 400;
    color: var(--grey-160);
    background: #fff;
    border: 1px solid var(--grey-90);
    border-radius: var(--r-4);
    padding: 5px 12px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

    .chip:hover {
        background: var(--grey-20);
        border-color: var(--grey-110);
    }

    .chip.is-active {
        background: var(--ms-blue);
        color: #fff;
        border-color: var(--ms-blue);
        font-weight: 600;
    }

        .chip.is-active:hover {
            background: var(--ms-blue-hover);
            border-color: var(--ms-blue-hover);
        }

/* ============================================================
   Product card
   ============================================================ */
.product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--grey-40);
    border-radius: var(--r-8);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

    .product-card:hover {
        box-shadow: var(--shadow-8);
        transform: translateY(-2px);
    }

.product-card__img {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--grey-20), var(--grey-10));
    display: grid;
    place-items: center;
    color: var(--text-subtle);
    font-size: var(--fs-100);
    font-style: italic;
}

.product-card__body {
    padding: var(--s-4) var(--s-5) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    flex: 1;
}

.product-card__sample {
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8A6116; /* Fluent "caution" text */
    font-weight: 700;
    margin: 0;
}

.product-card h3 {
    font-size: var(--fs-300);
    margin: var(--s-1) 0;
}

.product-card__brand {
    font-size: var(--fs-100);
    color: var(--text-subtle);
    margin: 0;
}

.product-card__desc {
    font-size: var(--fs-200);
    color: var(--text-muted);
    margin: var(--s-2) 0;
}

.product-card__pack {
    font-size: var(--fs-100);
    color: var(--text-subtle);
    margin: 0 0 var(--s-3);
}

.product-card .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Badges (Fluent pill) */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-100);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--grey-30);
    color: var(--grey-160);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--s-1);
}

.badge--pro {
    background: var(--ms-blue);
    color: #fff;
}

.notice {
    font-size: var(--fs-100);
    color: var(--text-subtle);
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--grey-40);
}

/* ============================================================
   Partnership
   ============================================================ */
.partner-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-9);
    align-items: center;
}

.section--navy h2,
.section--navy h3 {
    color: #fff;
}

.text-light {
    color: #fff;
}

.text-light-soft {
    color: var(--grey-50);
}

.journey {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-2);
}

    .journey li {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-3) var(--s-4);
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.10);
        border-radius: var(--r-4);
        color: #E7E5E3;
        transition: background var(--dur-fast) var(--ease);
    }

        .journey li:hover {
            background: rgba(255,255,255,.08);
        }

        .journey li span {
            color: #6CB8E8;
            font-weight: 700;
            min-width: 2.5ch;
        }

/* ============================================================
   Timeline
   ============================================================ */
.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    border-left: 2px solid var(--grey-40);
}

    .timeline li {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: var(--s-5);
        padding: var(--s-5) 0 var(--s-5) var(--s-6);
        position: relative;
    }

        .timeline li::before {
            content: "";
            position: absolute;
            left: -7px;
            top: 1.9rem;
            width: 12px;
            height: 12px;
            background: var(--ms-blue);
            border: 2px solid #fff;
            border-radius: 50%;
            box-shadow: 0 0 0 2px var(--ms-blue);
        }

.timeline__year {
    color: var(--ms-blue);
    font-weight: 700;
    font-size: var(--fs-300);
}

.timeline h3 {
    margin-bottom: var(--s-1);
}

.timeline p {
    color: var(--text-muted);
    margin: 0;
}

/* ============================================================
   Article card
   ============================================================ */
.article-card {
    background: #fff;
    border: 1px solid var(--grey-40);
    border-radius: var(--r-8);
    padding: var(--s-5);
    box-shadow: var(--shadow-2);
    transition: box-shadow var(--dur) var(--ease);
}

    .article-card:hover {
        box-shadow: var(--shadow-8);
    }

    .article-card h3 {
        font-size: var(--fs-400);
    }

.link-arrow {
    color: var(--ms-blue);
    font-weight: 600;
}

    .link-arrow::after {
        content: " →";
    }

/* ============================================================
   Careers banner
   ============================================================ */
.banner {
    background: var(--grey-180);
    padding: var(--s-9) 0;
    color: #fff;
}

.banner__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-6);
    flex-wrap: wrap;
}

.banner h2 {
    color: #fff;
    margin-bottom: var(--s-1);
}

.banner p {
    color: var(--grey-50);
    margin: 0;
}

/* ============================================================
   Forms (Fluent)
   ============================================================ */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin: 0 0 var(--s-5);
}

    .field label {
        font-size: var(--fs-200);
        font-weight: 600;
        color: var(--grey-160);
    }

    .field input,
    .field select,
    .field textarea {
        font-family: var(--font);
        font-size: var(--fs-200);
        color: var(--text);
        background: #fff;
        border: 1px solid var(--grey-90);
        border-bottom-width: 2px;
        border-radius: var(--r-4);
        padding: 5px 12px;
        min-height: 32px;
        transition: border-color var(--dur-fast) var(--ease);
    }

    .field textarea {
        min-height: 96px;
        padding: var(--s-2) var(--s-3);
    }

        .field input:hover,
        .field select:hover,
        .field textarea:hover {
            border-color: var(--grey-110);
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-color: var(--ms-blue);
            border-bottom-color: var(--ms-blue);
        }

        .field input:invalid:not(:placeholder-shown),
        .field textarea:invalid:not(:placeholder-shown) {
            border-color: var(--error);
        }

.field--check {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-2);
}

    .field--check input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-height: auto;
        margin-top: 2px;
        accent-color: var(--ms-blue);
    }

    .field--check label {
        font-weight: 400;
    }

.form-status {
    margin: var(--s-4) 0 0;
    font-size: var(--fs-200);
    font-weight: 600;
    min-height: 1.4em;
}

    .form-status[data-state="success"] {
        color: var(--success);
    }

    .form-status[data-state="error"] {
        color: var(--error);
    }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background: var(--grey-20);
    color: var(--text-muted);
    padding: var(--s-9) 0 var(--s-4);
    font-size: var(--fs-200);
    border-top: 1px solid var(--grey-40);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
    gap: var(--s-7);
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--grey-40);
}

.footer__heading {
    color: var(--grey-180);
    font-size: var(--fs-200);
    font-weight: 600;
    margin-bottom: var(--s-3);
}

.footer__grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__grid li {
    margin-bottom: var(--s-2);
}

.footer__grid a {
    color: var(--text-muted);
}

    .footer__grid a:hover {
        color: var(--ms-blue);
        text-decoration: none;
    }

.footer__legal {
    padding: var(--s-5) 0 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
    font-size: var(--fs-100);
    color: var(--text-subtle);
}

    .footer__legal ul {
        list-style: none;
        display: flex;
        gap: var(--s-5);
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
    }

    .footer__legal a {
        color: var(--text-subtle);
    }

        .footer__legal a:hover {
            color: var(--ms-blue);
            text-decoration: none;
        }

/* ============================================================
   RTL
   ============================================================ */
html[dir="rtl"] .primary-nav {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .card--line {
    border-left: 0;
    border-right: 3px solid var(--ms-blue);
}

html[dir="rtl"] .timeline {
    border-left: 0;
    border-right: 2px solid var(--grey-40);
}

    html[dir="rtl"] .timeline li {
        padding-left: 0;
        padding-right: var(--s-6);
    }

        html[dir="rtl"] .timeline li::before {
            left: auto;
            right: -7px;
        }

html[dir="rtl"] .link-arrow::after {
    content: " ←";
}

html[dir="rtl"] .journey li {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

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

@media (max-width: 780px) {
    .hero-medical-banners {
        grid-template-columns: 1fr;
    }

    .primary-nav {
        display: none;
    }

    .nav-toggle {
        display: block;
        margin-left: auto;
    }

    .site-header__inner .btn--primary {
        display: none;
    }

    .grid--3, .grid--4 {
        grid-template-columns: 1fr;
    }

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

    .utility__inner {
        flex-wrap: nowrap;
    }

    .utility__left {
        display: flex;
        flex: 1 1 auto;
    }

    .utility__left > a {
        display: none;
    }

    .utility-heartbeat {
        flex: 0 1 50%;
        width: 50%;
        min-width: 140px;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }

    h1 {
        font-size: var(--fs-700);
    }

    h2 {
        font-size: var(--fs-600);
    }
}
/* ============================================================
   Route map / ambulance dispatch SVG
   ============================================================ */

.route-map-frame {
    position: relative;
    isolation: isolate;
    aspect-ratio: auto;
    min-height: 460px;
    overflow: hidden;
    border: 1px solid rgba(35, 142, 198, .24);
    border-radius: 18px;
    background-color: var(--grey-20);
    background-image: linear-gradient(rgba(255, 255, 255, .24), rgba(255, 255, 255, .24)), url("../img/qatar-map-osm.webp");
    background-position: center 48%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 14px 34px rgba(22, 74, 102, .14);
}

.route-map-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 65, 99, .10), transparent 24%, transparent 74%, rgba(5, 65, 99, .12));
}

.route-map-status {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 6px 18px rgba(22, 74, 102, .16);
    color: var(--grey-160);
    backdrop-filter: blur(8px);
}

.route-map-status > span:last-child {
    display: grid;
    line-height: 1.15;
}

.route-map-status strong {
    font-size: .76rem;
}

.route-map-status small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .65rem;
}

.route-map-status__pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--parrot-green);
    box-shadow: 0 0 0 5px rgba(122, 193, 67, .16);
    animation: coveragePulse 2.2s ease-in-out infinite;
}

@keyframes coveragePulse {
    50% {
        box-shadow: 0 0 0 9px rgba(122, 193, 67, .04);
    }
}

.route-map {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 1024px) {
    .route-map-frame {
        aspect-ratio: 618 / 460;
        min-height: 0;
    }

    .route-map {
        height: auto;
    }
}

.route-map .map-bg {
    opacity: .08;
    transform: scaleX(1.42);
    transform-origin: 320px 230px;
}

.route-map-credit {
    position: absolute;
    right: 8px;
    bottom: 6px;
    z-index: 4;
    padding: 2px 5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .84);
    color: var(--grey-130);
    font-size: 9px;
    line-height: 1.2;
}

    /* Node labels — Fluent caption style */
    .route-map .node__label {
        font-family: var(--font);
        font-size: 15px;
        font-weight: 700;
        fill: var(--grey-160);
        letter-spacing: .02em;
        paint-order: stroke;
        stroke: rgba(255, 255, 255, .92);
        stroke-width: 3px;
        stroke-linejoin: round;
    }

    .route-map .node__label--hub {
        fill: var(--ms-blue);
        font-weight: 800;
        font-size: 17px;
    }

.route-map .route-overlay > path:not(.arc) {
    stroke-width: 3px;
}

.route-map .node > path,
.route-map .node > rect {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.25);
}

    /* Hub pulse: soft breathing halo */
    .route-map .hub circle:first-child {
        transform-origin: 320px 230px;
        animation: hubPulse 4s var(--ease) infinite;
    }

@keyframes hubPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .92;
        transform: scale(1.03);
    }
}

/* Ambulance drop shadow for subtle depth */
.route-map .ambulance-track {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95))
            drop-shadow(0 3px 4px rgba(0, 90, 158, .55));
    will-change: transform;
}

/* Keep motion groups transform-free in RTL. SVG animateMotion owns their
   transform, and rotate="auto" already points each vehicle along its route. */

/* Respect reduced motion: freeze ambulances, hide pulses */
@media (prefers-reduced-motion: reduce) {
    .route-map .ambulance-track,
    .route-map .ambulance-track animate,
    .route-map .ambulance-track animateMotion,
    .route-map .ambulance-track animateTransform,
    .route-map .hub circle:first-child,
    .route-map-status__pulse {
        animation: none !important;
    }

    .route-map .ambulance-track {
        display: none;
    }

    .route-map .hub circle:first-child {
        transform: none;
        opacity: 1;
    }
}

/* ============================================================
   Quick contact FAB — expanding Call / WhatsApp / Book a Visit
   ============================================================ */
.booking-panel {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.booking-panel__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(32, 31, 30, .48);
    cursor: default;
}

.booking-panel__dialog {
    position: absolute;
    top: 0;
    right: 0;
    width: min(100%, 520px);
    height: 100%;
    overflow-y: auto;
    padding: 40px var(--s-7) var(--s-7);
    background: #fff;
    box-shadow: var(--shadow-28);
}

.booking-panel__close {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0 0 3px;
    border: 1px solid var(--grey-40);
    border-radius: 50%;
    background: #fff;
    color: var(--grey-160);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.booking-panel__intro {
    color: var(--text-muted);
}

.booking-form {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-6);
}

.booking-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}

.booking-form__field {
    display: grid;
    gap: 6px;
}

.booking-form__field label {
    color: var(--grey-180);
    font-size: var(--fs-200);
    font-weight: 600;
}

.booking-form__field input,
.booking-form__field select,
.booking-form__field textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--grey-90);
    border-radius: var(--r-4);
    background: #fff;
    color: var(--grey-180);
    font: inherit;
}

.booking-form__field textarea {
    min-height: 82px;
    resize: vertical;
}

.booking-form__field input:focus,
.booking-form__field select:focus,
.booking-form__field textarea:focus {
    border-color: var(--ms-blue);
    outline: 2px solid rgba(0, 120, 212, .18);
    outline-offset: 0;
}

.booking-form__field small {
    color: var(--text-subtle);
    font-size: 11px;
}

.booking-address { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--grey-80); border-radius: var(--r-6); background: linear-gradient(145deg, #fff, var(--ms-blue-lighter)); }
.booking-address legend { display: inline-flex; align-items: center; gap: 7px; width: auto; margin: 0; padding: 0 6px; color: var(--grey-190); font-size: var(--fs-200); font-weight: 750; }
.booking-address legend svg { width: 17px; height: 17px; fill: none; stroke: var(--ms-blue); stroke-width: 1.8; }
.booking-address__hint { margin: -2px 0 9px; color: var(--text-subtle); font-size: 10px; }
.booking-address__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.booking-address__grid .booking-form__field { grid-column: span 2; gap: 4px; }
.booking-address__grid .booking-form__field:nth-last-child(-n + 2) { grid-column: span 3; }
.booking-address__grid .booking-form__field label { font-size: 11px; }
.booking-address__grid .booking-form__field label > span { color: #a4262c; }
.booking-address__grid .booking-form__field label > small { float: right; font-size: 9px; font-weight: 500; }
.booking-address__grid .booking-form__field input { min-height: 36px; padding: 6px 9px; font-size: 12px; }

.booking-form__location {
    display: inline-flex;
    align-items: center;
    align-self: start;
    gap: 6px;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: var(--ms-blue);
    font: inherit;
    font-size: var(--fs-100);
    font-weight: 600;
    cursor: pointer;
}

.booking-form__location:hover {
    color: var(--ms-blue-hover);
    text-decoration: underline;
}

.booking-form__location:disabled {
    color: var(--grey-110);
    cursor: wait;
    text-decoration: none;
}

.booking-form__location svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

#bookingLocationStatus:not(:empty) {
    color: var(--success);
}

#bookingLocationStatus.is-error {
    color: var(--error);
}

.booking-form__phone {
    display: flex;
    align-items: center;
    border: 1px solid var(--grey-90);
    border-radius: var(--r-4);
    background: #fff;
}

.booking-form__phone:focus-within {
    border-color: var(--ms-blue);
    outline: 2px solid rgba(0, 120, 212, .18);
}

.booking-form__phone span {
    padding: 0 0 0 11px;
    color: var(--grey-130);
    font-weight: 600;
}

.booking-form__phone input {
    border: 0;
    outline: 0 !important;
}

.booking-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    color: var(--text-muted);
    font-size: var(--fs-100);
    cursor: pointer;
}

.booking-form__consent input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--ms-blue);
}

.booking-form__emergency {
    margin: 0;
    padding: var(--s-3);
    border-left: 3px solid var(--error);
    background: #fde7e9;
    color: var(--grey-160);
    font-size: var(--fs-100);
}

.booking-form__emergency a {
    color: var(--error);
    font-weight: 700;
}

.booking-form__submit {
    width: 100%;
}

.booking-panel__success {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.booking-panel__success[hidden] {
    display: none;
}

.booking-panel__success-icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin-bottom: var(--s-5);
    place-items: center;
    border-radius: 50%;
    background: var(--parrot-green-light);
    color: var(--parrot-green-hover);
    font-size: 32px;
    font-weight: 700;
}

body.has-booking-panel {
    overflow: hidden;
}

/* ============================================================
   About page
   ============================================================ */
.public-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: stretch;
    gap: clamp(28px, 5vw, 72px);
    min-height: 510px;
    padding: clamp(28px, 5vw, 68px);
    border: 1px solid rgba(35, 142, 198, .16);
    border-radius: 28px;
    background: linear-gradient(135deg, #fff 0%, var(--ms-blue-lighter) 58%, var(--parrot-green-light) 100%);
    box-shadow: 0 24px 70px rgba(26, 82, 111, .12);
}

.public-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    top: -130px;
    left: 42%;
    border-radius: 50%;
    background: rgba(122, 193, 67, .12);
}

.public-hero__copy {
    align-self: start;
    width: 100%;
    max-width: 720px;
    padding-top: 2px;
}
.public-hero h1 { max-width: 28ch; margin: 0 0 20px; color: var(--brand-title); font-size: clamp(2.45rem, 5vw, 2.25rem); line-height: 1.02; letter-spacing: -.035em; }
.public-hero__lede { max-width: 62ch; margin: 0; color: var(--text-muted); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.75; }
.public-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.public-hero__proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(35, 142, 198, .16); list-style: none; color: #355464; font-size: .87rem; font-weight: 700; }
.public-hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.public-hero__proof i { color: var(--parrot-green-hover); }
.public-hero__visual { position: relative; min-height: 370px; overflow: hidden; border-radius: 22px; background: linear-gradient(145deg, var(--ms-blue-lighter), #fff); box-shadow: 0 20px 48px rgba(24, 77, 105, .18); }
.public-hero__visual > img { display: block; width: 100%; height: 100%; min-height: 370px; object-fit: cover; }
.public-hero__visual::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(5, 55, 82, .72)); pointer-events: none; }
.public-hero__badge { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; display: grid; grid-template-columns: 46px 1fr; gap: 2px 12px; align-items: center; color: #fff; }
.public-hero__badge > i { grid-row: 1 / 3; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: var(--parrot-green); font-size: 1.1rem; }
.public-hero__badge b, .public-hero__badge small { display: block; }
.public-hero__badge small { opacity: .86; }
.public-hero--compact { min-height: 440px; }
.public-hero__visual--symbol { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #fff, var(--ms-blue-lighter)); color: var(--ms-blue); font-size: clamp(7rem, 14vw, 12rem); }
.public-hero__visual--symbol::after { background: linear-gradient(180deg, transparent 45%, rgba(5, 55, 82, .72)); }
.public-hero--contact { align-items: center; }
.public-hero--contact .contact-form { padding: 20px; border: 1px solid rgba(35, 142, 198, .18); border-radius: 16px; background: rgba(255, 255, 255, .68); }

.about-page {
    padding: var(--s-8) 0 var(--s-10);
}

.about-hero,
.about-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s-10);
}

.about-hero {
    min-height: 500px;
    padding: var(--s-8);
    border-radius: var(--r-8);
    background: linear-gradient(135deg, var(--ms-blue-lighter), #fff 62%, var(--parrot-green-light));
}

.about-hero__lede,
.about-section__lede {
    color: var(--text-muted);
    font-size: var(--fs-300);
}

.contact-form {
    display: grid;
    gap: var(--s-3);
    max-width: 560px;
    margin-top: var(--s-5);
}

.contact-form__field {
    display: grid;
    gap: 6px;
}

.contact-form__field label {
    color: var(--grey-180);
    font-size: var(--fs-200);
    font-weight: 700;
}

.contact-form__field input,
.contact-form__field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--grey-90);
    border-radius: var(--r-4);
    background: rgba(255, 255, 255, .92);
    color: var(--grey-180);
    font: inherit;
}

.contact-form__field textarea {
    min-height: 105px;
    resize: vertical;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__phone:focus-within {
    border-color: var(--ms-blue);
    outline: 2px solid rgba(0, 120, 212, .18);
    outline-offset: 0;
}

.contact-form__phone {
    display: flex;
    align-items: center;
    border: 1px solid var(--grey-90);
    border-radius: var(--r-4);
    background: rgba(255, 255, 255, .92);
}

.contact-form__phone span {
    padding-left: 13px;
    color: var(--grey-140);
    font-weight: 700;
}

.contact-form__phone input {
    border: 0;
    background: transparent;
    outline: 0;
}

.contact-form__submit {
    justify-self: start;
}

.contact-form__status {
    min-height: 1.4em;
    margin: 0;
    color: var(--success);
    font-size: var(--fs-100);
    font-weight: 600;
}

.contact-form__status--success {
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--success) 9%, white);
}

.contact-form__status--error,
.field-validation-error {
    color: #a61b1b;
}

.contact-form__status--error:empty {
    display: none;
}

.field-validation-error {
    font-size: var(--fs-100);
    font-weight: 600;
}

.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.about-section {
    padding: var(--s-10) var(--s-4);
}

.about-section--centered {
    display: block;
    text-align: center;
}

.about-section--centered > h2,
.about-section--centered > .about-section__lede {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
}

.about-image-placeholder {
    position: relative;
    isolation: isolate;
  /*  aspect-ratio: 4 / 3;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    overflow: hidden;
    padding: var(--s-3);
    border: 1px dashed rgba(0, 120, 212, .42);
    border-radius: var(--r-8);
    background: linear-gradient(145deg, var(--ms-blue-lighter), #fff 55%, var(--parrot-green-light));
    color: var(--ms-blue);
    text-align: center;
}

.about-image-placeholder::before {
    content: "+";
    position: absolute;
    z-index: -1;
    color: rgba(197, 15, 31, .08);
    font-size: 220px;
    font-weight: 700;
    line-height: 1;
}

.about-image-placeholder span {
    font-weight: 700;
}

.about-image-placeholder small {
    max-width: 34ch;
    color: var(--text-muted);
}

.services-hero-banner,
.quality-hero-banner {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 650px;
    object-fit: cover;
    border-radius: calc(var(--r-8) - var(--s-3));
}
/*
.about-image-placeholder--hero {
    aspect-ratio: 5 / 4;
}*/

.about-image-placeholder--portrait {
   /* aspect-ratio: 4 / 5;*/
    margin-bottom: var(--s-4);
}

.about-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin: var(--s-6) 0 0;
}

.about-facts div {
    padding: var(--s-4);
    border-left: 3px solid var(--parrot-green);
    background: var(--grey-20);
}

.about-facts dt {
    color: var(--text-subtle);
    font-size: var(--fs-100);
}

.about-facts dd {
    margin: 2px 0 0;
    color: var(--grey-180);
    font-size: var(--fs-300);
    font-weight: 700;
}

.about-purpose-grid,
.about-leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-7);
    text-align: left;
}

.about-purpose-card {
    min-height: 230px;
    padding: var(--s-6);
    border: 1px solid var(--grey-40);
    border-radius: var(--r-8);
    background: linear-gradient(155deg, #fff, var(--ms-blue-lighter));
}

.about-purpose-card:nth-child(2) {
    background: linear-gradient(155deg, #fff, var(--parrot-green-light));
}

.about-purpose-card__number {
    display: block;
    margin-bottom: var(--s-6);
    color: var(--ms-blue);
    font-size: var(--fs-500);
    font-weight: 700;
}

.about-story {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
    gap: clamp(34px, 6vw, 80px);
    margin: var(--s-5) 0 var(--s-10);
    padding: clamp(30px, 5vw, 68px);
    overflow: hidden;
    border: 1px solid rgba(35, 142, 198, .14);
    border-radius: 28px;
    background: linear-gradient(145deg, #f7fcfe 0%, #fff 54%, var(--parrot-green-light) 100%);
    box-shadow: 0 22px 60px rgba(22, 74, 102, .09);
    scroll-margin-top: 24px;
}

.about-story::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 300px;
    height: 300px;
    right: -130px;
    bottom: -160px;
    border-radius: 50%;
    background: rgba(35, 142, 198, .09);
}

.about-story__intro { align-self: center; }
.about-story__intro > h2 { max-width: 13ch; margin: 0 0 18px; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em; }
.about-story__intro > p:not(.eyebrow) { max-width: 58ch; margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.about-story__principles { display: grid; gap: 4px; margin: 30px 0 26px; padding: 0; list-style: none; counter-reset: none; }
.about-story__principles li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(35, 142, 198, .13); }
.about-story__principles li > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #fff; color: var(--ms-blue); font-size: .73rem; font-weight: 800; box-shadow: 0 6px 18px rgba(35, 142, 198, .1); }
.about-story__principles strong { display: block; margin-bottom: 3px; color: var(--grey-180); }
.about-story__principles p { margin: 0; color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.about-story__link { display: inline-flex; align-items: center; gap: 9px; color: var(--ms-blue); font-weight: 800; text-decoration: none; }
.about-story__link:hover { color: var(--ms-blue-hover); }
.about-story__link i { transition: transform .2s ease; }
.about-story__link:hover i { transform: translateX(4px); }

.about-story__gallery {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(180px, .88fr);
    grid-template-rows: 270px 270px;
    gap: 14px;
    min-width: 0;
}

.about-story__photo { position: relative; isolation: isolate; overflow: hidden; margin: 0; border-radius: 20px; background: var(--grey-30); box-shadow: 0 14px 36px rgba(22, 74, 102, .16); }
.about-story__photo--main { grid-row: 1 / 3; }
.about-story__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.about-story__photo:hover img { transform: scale(1.025); }
.about-story__photo--main img { object-position: center 40%; }
.about-story__photo--support img { object-position: center 35%; }
.about-story__photo--detail img { object-position: center 38%; }
.about-story__photo::after { content: ""; position: absolute; inset: 42% 0 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(4, 44, 67, .82)); pointer-events: none; }
.about-story__photo figcaption { position: absolute; z-index: 2; right: 18px; bottom: 17px; left: 18px; display: grid; gap: 3px; color: #fff; }
.about-story__photo figcaption span { color: #cfeeff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.about-story__photo figcaption strong { font-size: .9rem; line-height: 1.3; }
.about-story__photo--main figcaption { right: 24px; bottom: 24px; left: 24px; }
.about-story__photo--main figcaption strong { max-width: 22ch; font-size: clamp(1.15rem, 1.7vw, 1.55rem); }
.about-story__image-note { position: absolute; right: 4px; bottom: -24px; margin: 0; color: var(--text-subtle); font-size: .68rem; }

@media (max-width: 980px) {
    .about-story { grid-template-columns: 1fr; }
    .about-story__intro > h2 { max-width: 18ch; }
    .about-story__gallery { grid-template-rows: 330px 250px; }
}

@media (max-width: 620px) {
    .about-story { margin-bottom: var(--s-8); padding: 24px; border-radius: 20px; }
    .about-story__gallery { display: flex; margin-right: -24px; padding-right: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .about-story__gallery::-webkit-scrollbar { display: none; }
    .about-story__photo { flex: 0 0 78vw; height: 390px; scroll-snap-align: start; }
    .about-story__photo--support, .about-story__photo--detail { flex-basis: 68vw; }
    .about-story__image-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .about-story__photo img, .about-story__link i { transition: none; }
    .about-story__photo:hover img, .about-story__link:hover i { transform: none; }
}

.about-checklist {
    display: grid;
    gap: var(--s-4);
    margin: var(--s-6) 0 0;
    padding: 0;
    list-style: none;
}

.about-checklist li {
    position: relative;
    padding-left: 32px;
}

.about-checklist li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: var(--parrot-green-light);
    color: var(--parrot-green-hover);
    font-weight: 700;
}

.about-checklist strong,
.about-checklist span {
    display: block;
}

.about-checklist span {
    margin-top: 2px;
    color: var(--text-muted);
}

.about-leader {
    padding: var(--s-4);
    border: 1px solid var(--grey-40);
    border-radius: var(--r-8);
    background: #fff;
    box-shadow: var(--shadow-2);
}

.about-leader__role {
    color: var(--ms-blue);
    font-weight: 600;
}

.about-assurance,
.about-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-7);
    padding: var(--s-8);
    border-radius: var(--r-8);
}

.about-assurance {
    border: 1px solid var(--grey-40);
    background: var(--grey-20);
}

.about-assurance > div:first-child {
    max-width: 650px;
}

.about-assurance__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-2);
}

.about-assurance__badges span {
    padding: var(--s-3);
    border: 1px dashed var(--grey-90);
    border-radius: var(--r-4);
    background: #fff;
    color: var(--text-muted);
    font-size: var(--fs-100);
}

.about-cta {
    margin-top: var(--s-8);
    background: linear-gradient(135deg, var(--ms-blue), var(--ms-blue-press));
    color: #fff;
}

.about-cta h2,
.about-cta p {
    color: #fff;
}

.about-cta p:last-child {
    margin-bottom: 0;
}

@media (max-width: 860px) {
    .public-hero { grid-template-columns: 1fr; min-height: auto; }
    .public-hero__copy { max-width: none; }
    .public-hero__visual { min-height: 320px; }
    .public-hero__visual > img { min-height: 320px; }
    .about-hero,
    .about-section {
        grid-template-columns: 1fr;
        gap: var(--s-7);
    }

    .about-story .about-image-placeholder {
        order: 2;
    }

    .about-purpose-grid,
    .about-leadership-grid {
        grid-template-columns: 1fr;
    }

    .about-assurance,
    .about-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-assurance__badges {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .public-hero { padding: 24px; border-radius: 20px; }
    .public-hero h1 { font-size: clamp(2.1rem, 12vw, 3.1rem); }
    .public-hero__proof { display: grid; }
    .public-hero__visual { min-height: 280px; }
    .public-hero__visual > img { min-height: 280px; }
    .about-page {
        padding-top: var(--s-5);
    }

    .about-hero,
    .about-section,
    .about-assurance,
    .about-cta {
        padding: var(--s-5);
    }

    .about-facts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .booking-panel__dialog {
        padding: 52px var(--s-5) var(--s-5);
    }

    .booking-form__row {
        grid-template-columns: 1fr;
    }

    .booking-address__grid { grid-template-columns: 1fr 1fr; }
    .booking-address__grid .booking-form__field,
    .booking-address__grid .booking-form__field:nth-last-child(-n + 2) { grid-column: span 1; }
    .booking-address__grid .booking-form__field:nth-child(3) { grid-column: 1 / -1; }
}

.quick-fab {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-3);
}

.quick-fab__trigger {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--ms-blue);
    color: #fff;
    box-shadow: var(--shadow-16);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

    .quick-fab__trigger:hover {
        background: var(--ms-blue-hover);
        transform: translateY(-2px);
    }

    .quick-fab__trigger:active {
        transform: translateY(0);
    }

.quick-fab__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ms-blue);
    animation: quickFabPulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes quickFabPulse {
    0% {
        transform: scale(1);
        opacity: .55;
    }

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

.quick-fab__icon-open,
.quick-fab__icon-close {
    position: absolute;
    width: 24px;
    height: 24px;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.quick-fab__icon-close {
    opacity: 0;
    transform: rotate(-45deg) scale(.6);
}

.quick-fab.is-open .quick-fab__icon-open {
    opacity: 0;
    transform: rotate(45deg) scale(.6);
}

.quick-fab.is-open .quick-fab__icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.quick-fab.is-open .quick-fab__ring {
    animation: none;
    opacity: 0;
}

.quick-fab__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-3);
}

.quick-fab__action {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--shadow-8);
    color: var(--grey-180);
    font-size: var(--fs-200);
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px) scale(.9);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

    .quick-fab__action:hover {
        text-decoration: none;
        color: var(--grey-180);
        box-shadow: var(--shadow-16);
    }

.quick-fab.is-open .quick-fab__action {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.quick-fab.is-open .quick-fab__action--call {
    transition-delay: 40ms;
}

.quick-fab.is-open .quick-fab__action--whatsapp {
    transition-delay: 100ms;
}

.quick-fab.is-open .quick-fab__action--book {
    transition-delay: 160ms;
}

.quick-fab__icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
}

    .quick-fab__icon svg {
        width: 20px;
        height: 20px;
    }

.quick-fab__action--call .quick-fab__icon {
    background: var(--ms-blue);
}

.quick-fab__action--whatsapp .quick-fab__icon {
    background: #25D366;
}

.quick-fab__action--book .quick-fab__icon {
    background: var(--parrot-green);
}

@media (max-width: 480px) {
    .quick-fab__label {
        display: none;
    }

    .quick-fab__action {
        padding: var(--s-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-fab__ring {
        display: none;
    }
}

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

@media (prefers-contrast: more) {
    :root {
        --border: var(--grey-130);
        --text-muted: var(--grey-150);
    }

    .btn--ghost {
        border-color: var(--grey-130);
    }
}




.staff-login {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    width: min(1240px, calc(100% - 40px));
    min-height: 650px;
    margin: 40px auto 64px;
    overflow: hidden;
    border: 1px solid rgba(35, 142, 198, .16);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 26px 75px rgba(24, 77, 105, .14);
}

.staff-login__welcome {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 5vw, 64px);
    overflow: hidden;
    background: linear-gradient(145deg, #edf8fd 0%, #fff 56%, var(--parrot-green-light) 100%);
}

.staff-login__welcome::before,
.staff-login__welcome::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.staff-login__welcome::before { width: 280px; height: 280px; top: -150px; right: -90px; background: rgba(35, 142, 198, .12); }
.staff-login__welcome::after { width: 220px; height: 220px; left: -120px; bottom: -100px; background: rgba(122, 193, 67, .16); }
.staff-login__brand { display: inline-flex; align-self: flex-start; margin-bottom: clamp(36px, 7vh, 72px); }
.staff-login__brand img { width: 150px; height: auto; }
.staff-login__welcome-copy { max-width: 650px; }
.staff-login__welcome h1 { max-width: 22ch; margin: 0 0 20px; font-size: clamp(2.4rem, 4vw, 2.25rem); line-height: 1.04; letter-spacing: -.035em; }
.staff-login__welcome-copy > p:not(.eyebrow) { max-width: 58ch; color: var(--text-muted); font-size: 1.05rem; line-height: 1.75; }
.staff-login__benefits { display: grid; gap: 18px; margin: 34px 0; padding: 0; list-style: none; }
.staff-login__benefits li { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: center; }
.staff-login__benefits > li > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #fff; color: var(--ms-blue); box-shadow: 0 8px 22px rgba(35, 142, 198, .13); }
.staff-login__benefits span { display: grid; gap: 2px; }
.staff-login__benefits small { color: var(--text-muted); line-height: 1.45; }
.staff-login__links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: auto; padding-top: 28px; border-top: 1px solid rgba(35, 142, 198, .16); }
.staff-login__links a { display: inline-flex; align-items: center; gap: 7px; color: #355464; font-size: .88rem; font-weight: 700; text-decoration: none; }
.staff-login__links a:hover { color: var(--ms-blue); }
.staff-login__links i { color: var(--parrot-green-hover); }
.staff-login__access { display: grid; place-items: center; padding: clamp(28px, 5vw, 64px); background: #fff; }
.staff-login .login-card { width: 100%; max-width: 470px; padding: 0; overflow: visible; border-radius: 0; box-shadow: none; }
.staff-login .login-card::before { display: none; }
.staff-login__heading { margin-bottom: 30px; }
.staff-login__icon { display: grid; width: 56px; height: 56px; margin-bottom: 20px; place-items: center; border-radius: 17px; background: linear-gradient(135deg, var(--parrot-green-light), var(--parrot-green)); color: #fff; font-size: 1.35rem; box-shadow: 0 10px 25px rgba(122, 193, 67, .25); }
.staff-login__heading h2 { margin: 0 0 10px; color: var(--grey-180); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.staff-login__heading > p:last-child { margin: 0; color: var(--text-muted); line-height: 1.6; }
.staff-login .form-group { margin-bottom: 22px; }
.staff-login .form-group .input-group { border-width: 1px; }
.staff-login .form-group .input-group:focus-within { border-color: var(--ms-blue); box-shadow: 0 0 0 3px rgba(35, 142, 198, .12); }
.staff-login__help { display: flex; gap: 11px; margin-top: 28px; padding: 16px; border-radius: 13px; background: var(--ms-blue-lighter); color: #405d6c; }
.staff-login__help > i { margin-top: 3px; color: var(--ms-blue); }
.staff-login__help p { display: grid; gap: 2px; margin: 0; font-size: .82rem; line-height: 1.45; }
.staff-login__help span { color: var(--text-muted); }

@media (max-width: 900px) {
    .staff-login { grid-template-columns: 1fr; }
    .staff-login__brand { margin-bottom: 32px; }
    .staff-login__welcome h1 { max-width: 18ch; }
    .staff-login__access { padding-top: 42px; padding-bottom: 42px; }
}

@media (max-width: 576px) {
    .staff-login { width: calc(100% - 24px); margin: 18px auto 40px; border-radius: 20px; }
    .staff-login__welcome, .staff-login__access { padding: 26px 22px; }
    .staff-login__welcome h1 { font-size: 2.25rem; }
    .staff-login__benefits { margin-bottom: 24px; }
    .staff-login__links { display: grid; grid-template-columns: 1fr 1fr; }
    .staff-login .form-check { align-items: flex-start; gap: 10px; }
}

/* ============================================================
   Our Story
   ============================================================ */
.story-page { padding: var(--s-8) 0 var(--s-10); }
.story-hero__visual img { object-position: center 42%; }
.story-origin { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(34px,6vw,84px); align-items:center; padding:clamp(64px,8vw,110px) clamp(8px,3vw,38px); }
.story-origin__copy h2,.story-section-heading h2,.story-values>div:first-child h2 { max-width:16ch; margin:0 0 20px; font-family:"Playfair Display",serif; font-size:clamp(2rem,3.8vw,3.65rem); line-height:1.08; color:var(--brand-title); }
.story-origin__copy>p:not(.eyebrow) { margin:0 0 16px; color:var(--text-muted); font-size:1rem; line-height:1.78; }
.story-origin__copy aside { display:grid; grid-template-columns:34px 1fr; gap:13px; margin-top:28px; padding:20px; border-left:4px solid var(--parrot-green); border-radius:0 14px 14px 0; background:var(--ms-blue-lighter); color:#35535f; line-height:1.55; }
.story-origin__copy aside i { color:var(--brand-title); font-size:1.25rem; }
.story-origin__image { position:relative; min-height:520px; margin:0; overflow:hidden; border-radius:28px; box-shadow:0 24px 60px rgba(35,76,92,.18); }
.story-origin__image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story-origin__image:after { content:""; position:absolute; inset:52% 0 0; background:linear-gradient(transparent,rgba(25,55,67,.8)); }
.story-origin__image figcaption { position:absolute; z-index:2; left:28px; right:28px; bottom:26px; display:grid; gap:5px; color:#fff; }
.story-origin__image figcaption span { color:#dff3cb; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.story-origin__image figcaption b { max-width:32ch; font-size:1.12rem; line-height:1.45; }
.story-approach { padding:clamp(50px,7vw,88px); border:1px solid rgba(var(--brand-blue-rgb),.2); border-radius:28px; background:linear-gradient(135deg,#fff,var(--ms-blue-lighter)); }
.story-section-heading { max-width:800px; margin:0 auto 42px; text-align:center; }
.story-section-heading h2 { max-width:22ch; margin-inline:auto; }
.story-section-heading>p:last-child { max-width:64ch; margin:0 auto; color:var(--text-muted); line-height:1.7; }
.story-journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.story-journey li { position:relative; display:grid; align-content:start; min-height:270px; padding:26px 22px; overflow:hidden; border:1px solid rgba(var(--brand-blue-rgb),.2); border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(37,76,93,.07); }
.story-journey li>span { position:absolute; top:12px; right:16px; color:rgba(var(--brand-blue-rgb),.2); font-family:"Playfair Display",serif; font-size:2.6rem; font-weight:700; }
.story-journey li>i { display:grid; width:48px; height:48px; margin-bottom:30px; place-items:center; border-radius:14px; background:var(--ms-blue-light); color:var(--ms-blue); font-size:1.15rem; }
.story-journey h3 { margin:0 0 10px; color:#2b434e; font-size:1.05rem; }
.story-journey p { margin:0; color:var(--text-muted); font-size:.86rem; line-height:1.62; }
.story-people { margin:clamp(64px,8vw,110px) 0; padding:clamp(54px,7vw,88px); border-radius:28px; background:linear-gradient(135deg,var(--ms-blue-press),var(--ms-blue)); color:#fff; }
.story-section-heading--light h2 { color:#fff; }
.story-section-heading--light>p:last-child { color:rgba(255,255,255,.78); }
.story-people__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.story-people figure { position:relative; min-height:390px; margin:0; overflow:hidden; border-radius:20px; background:#fff; }
.story-people figure:after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(22,46,56,.88)); }
.story-people figure img { width:100%; height:100%; min-height:390px; object-fit:cover; transition:transform .45s ease; }
.story-people figure:hover img { transform:scale(1.035); }
.story-people figcaption { position:absolute; z-index:2; left:22px; right:22px; bottom:22px; display:grid; gap:4px; }
.story-people figcaption b { font-size:1.1rem; }
.story-people figcaption span { color:rgba(255,255,255,.82); font-size:.82rem; line-height:1.45; }
.story-image-note { margin:14px 2px 0; color:rgba(255,255,255,.6); font-size:.72rem; text-align:right; }
.story-values { display:grid; grid-template-columns:minmax(260px,.36fr) minmax(0,.64fr); gap:clamp(32px,6vw,78px); align-items:start; padding:10px clamp(8px,3vw,38px) clamp(64px,8vw,105px); }
.story-values__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.story-values article { padding:25px; border:1px solid rgba(var(--brand-blue-rgb),.2); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(36,74,91,.07); }
.story-values article i { display:grid; width:44px; height:44px; margin-bottom:20px; place-items:center; border-radius:13px; background:var(--parrot-green-light); color:var(--parrot-green-hover); }
.story-values article h3 { margin:0 0 8px; color:#2d444f; font-size:1.05rem; }
.story-values article p { margin:0; color:var(--text-muted); font-size:.86rem; line-height:1.65; }
.story-cta { display:flex; justify-content:space-between; gap:30px; align-items:center; padding:clamp(34px,5vw,62px); border-radius:24px; background:linear-gradient(125deg,var(--ms-blue),var(--ms-blue-press)); color:#fff; }
.story-cta h2 { margin:0 0 10px; color:#fff; font-family:"Playfair Display",serif; font-size:clamp(2rem,3vw,3rem); }
.story-cta p:last-child { max-width:65ch; margin:0; color:rgba(255,255,255,.8); line-height:1.65; }
.story-cta__actions { display:flex; flex:0 0 auto; gap:10px; }
.btn--light { background:#fff; border-color:#fff; color:var(--ms-blue-press); }
.btn--light:hover { background:var(--ms-blue-lighter); color:var(--ms-blue-press); text-decoration:none; }
@media(max-width:980px){.story-origin,.story-values{grid-template-columns:1fr}.story-journey{grid-template-columns:repeat(2,minmax(0,1fr))}.story-people__grid{grid-template-columns:1fr 1fr}.story-people figure:last-child{grid-column:1/-1}.story-origin__image{min-height:460px}.story-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.story-page{padding-top:var(--s-4)}.story-origin{padding-block:58px}.story-origin__image{min-height:420px}.story-approach,.story-people{padding:30px 20px}.story-journey,.story-people__grid,.story-values__grid{grid-template-columns:1fr}.story-people figure:last-child{grid-column:auto}.story-journey li{min-height:0}.story-cta__actions{width:100%;flex-direction:column}.story-cta__actions .btn{width:100%}}

/* ============================================================
   How It Works page
   ============================================================ */
.how-page { padding:var(--s-8) 0 var(--s-10); }
.how-hero { margin-bottom:clamp(46px,6vw,80px); }
.how-hero__visual img { object-position:center 38%; }
.how-steps-section { margin-inline:calc(var(--s-6) * -1); padding:clamp(58px,7vw,88px) var(--s-6); border-radius:28px; }
.how-steps-section .section__head { max-width:720px; margin:0 auto 20px; text-align:center; }
.how-steps-section .section__head h2 { color:var(--brand-title); font-family:"Playfair Display",serif; font-size:clamp(2rem,3.8vw,3.4rem); }
.how-prepare { display:grid; grid-template-columns:minmax(260px,.38fr) minmax(0,.62fr); gap:clamp(34px,6vw,78px); align-items:start; padding:clamp(64px,8vw,108px) clamp(8px,3vw,38px); }
.how-prepare__intro h2 { max-width:15ch; margin:0 0 18px; color:var(--brand-title); font-family:"Playfair Display",serif; font-size:clamp(2rem,3.4vw,3.35rem); line-height:1.08; }
.how-prepare__intro>p:last-child { max-width:48ch; margin:0; color:var(--text-muted); line-height:1.7; }
.how-prepare__grid { display:grid; gap:14px; }
.how-prepare__grid article { display:grid; grid-template-columns:54px 1fr; gap:17px; align-items:start; padding:22px; border:1px solid rgba(var(--brand-blue-rgb),.2); border-radius:17px; background:#fff; box-shadow:0 9px 28px rgba(31,75,95,.07); }
.how-prepare__grid article>i { display:grid; width:50px; height:50px; place-items:center; border-radius:14px; background:var(--ms-blue-lighter); color:var(--ms-blue); font-size:1.15rem; }
.how-prepare__grid h3 { margin:2px 0 6px; color:#2d444f; font-size:1rem; }
.how-prepare__grid p { margin:0; color:var(--text-muted); font-size:.86rem; line-height:1.6; }
.how-cta { margin-top:0; }
@media(max-width:980px){.how-prepare{grid-template-columns:1fr}.how-steps-section{margin-inline:0}}
@media(max-width:680px){.how-page{padding-top:var(--s-4)}.how-steps-section{padding:42px 20px}.how-prepare{padding-block:58px}.how-prepare__grid article{grid-template-columns:44px 1fr;padding:18px}.how-prepare__grid article>i{width:42px;height:42px}}

.login-container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
    margin: 0 auto; /* This centers the container */
}

.login-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 35px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

    .login-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--brand-blue-logo), var(--ms-blue), var(--ms-blue-press));
        background-size: 200% 100%;
        animation: shimmer 3s ease-in-out infinite;
    }

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.login-logo {
    text-align: center;
    margin-bottom: 30px;
}

    .login-logo .icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, var(--parrot-green-light), var(--parrot-green));
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        color: #ffffff;
        box-shadow: 0 8px 25px rgba(122, 193, 67, 0.28);
        margin-bottom: 15px;
    }

    .login-logo h2 {
        color: #1a1a2e;
        font-weight: 700;
        font-size: 24px;
        margin-bottom: 5px;
    }

    .login-logo p {
        color: #6c7a8a;
        font-size: 14px;
        margin-bottom: 0;
    }

.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 14px;
        margin-bottom: 6px;
    }

    .form-group .input-group {
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid #e9ecef;
        transition: all 0.3s ease;
    }

        .form-group .input-group:focus-within {
            border-color: rgba(0, 120, 212, .18);
            box-shadow: 0 0 0 3px rgba(232, 62, 140, 0.15);
        }

    .form-group .input-group-text {
        background: #f8f9fa;
        border: none;
        color: #6c7a8a;
        padding: 0 15px;
    }

    .form-group .form-control {
        border: 1px solid #b9bfc3;
        padding: 12px 15px;
        font-size: 14px;
        background: #f8f9fa;
    }

        .form-group .form-control:focus {
            box-shadow: none;
            background: #ffffff;
        }

.form-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .form-check .form-check-input {
        margin-right: 8px;
    }

    .form-check .form-check-label {
        font-size: 14px;
        color: #4a5a7a;
    }

.forgot-link {
    font-size: 14px;
    color: var(--ms-blue);
    text-decoration: none;
}

    .forgot-link:hover {
        color: var(--ms-blue-hover);
        text-decoration: underline;
    }

.btn-login {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--parrot-green), var(--parrot-green-hover));
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(122, 193, 67, 0.28);
        color: #ffffff;
    }

.register-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #4a5a7a;
}

    .register-link a {
        color: var(--ms-blue);
        text-decoration: none;
        font-weight: 600;
    }

        .register-link a:hover {
            color: var(--ms-blue-hover);
            text-decoration: underline;
        }

.alert {
    border-radius: 10px;
    font-size: 14px;
    padding: 12px 15px;
}

.divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

    .divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #e9ecef;
    }

    .divider span {
        background: #ffffff;
        padding: 0 15px;
        color: #6c7a8a;
        font-size: 13px;
        position: relative;
        z-index: 1;
    }

.validation-summary-errors {
    color: var(--error);
    font-size: 14px;
    margin-bottom: 15px;
}

    .validation-summary-errors ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .validation-summary-errors ul li {
            padding: 5px 0;
        }

.phone-hint {
    font-size: 12px;
    color: #6c7a8a;
    margin-top: 4px;
}

.test-credentials {
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px dashed #dee2e6;
}

    .test-credentials p {
        margin: 0;
        font-size: 13px;
        color: #4a5a7a;
    }

    .test-credentials .badge {
        font-size: 12px;
        padding: 4px 10px;
    }

@media (max-width: 576px) {
    .login-container {
        padding: 10px;
    }

    .login-card {
        padding: 25px 20px;
    }

    .login-logo .icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .login-logo h2 {
        font-size: 20px;
    }
}

/* ============================================================
   Homepage flat geometry
   Uses the existing type, color, spacing and component system.
   ============================================================ */

#main .hero__grid,
#main .hero .eyebrow,
#main .hero-medical-banner,
#main .route-map-frame,
#main .route-map-status,
#main .route-map-credit,
#main .home-care-story__photo,
#main .home-care-story__footer,
#main .home-care-story__benefits i,
#main .card,
#main .flip-card:focus-visible,
#main .flip-card__front,
#main .flip-card__back,
#main .docs-note,
#main .btn {
    border-radius: 0;
    box-shadow: none;
}

#main .hero__grid,
#main .route-map-status {
    backdrop-filter: none;
}

#main .hero__primary-action,
#main .hero-medical-banner:hover,
#main .card:hover,
#main .flip-card:hover .flip-card__front,
#main .flip-card:focus-visible .flip-card__front,
#main .step:hover .step__marker {
    box-shadow: none;
}