/* Custom Properties / Variables */
:root {
    /* Sampled from the Advitya logo: hue 348 through the crimsons, hue 6-25
       for the coral and orange of the rays. The brand was already red; what
       changed is which red leads. A bright coral-red on every button and
       heading reads as urgency, so the lead is now the deep crimson the mark
       is built on, with the bright coral kept back for small accents. */

    --primary: #8E1B2E;
    /* deep crimson: primary action, links, highlighted words */
    --primary-light: #B92D3C;
    /* primary red: hover, section labels, icons */
    --primary-dark: #6F1424;
    /* pressed and hover state of the primary action */
    --coral: #D9694F;
    --accent: #CE7B34;
    /* warm orange, the smallest share of the palette */
    --burgundy: #5E1019;
    /* darkest brand tone: footer and CTA grounds */
    --secondary: #FBF0EE;

    /* Semantic, and deliberately a different red from the brand: an invalid
       field has to read as an error and not as another shade of the theme. */
    --danger: #ef4444;
    --danger-hover: #dc2626;

    --text-main: #241A1B;
    --text-muted: #7C6E6F;
    --text-light: #FFFFFF;

    /* White ground. The warm tints are deliberately faint - they should
       register as warmth, not as pink. */
    --bg-main: #FFFFFF;
    --bg-light: #FAF4F2;
    --bg-wash: #FDFAF9;
    --bg-card: #FFFFFF;

    --border-color: #ECDFDC;

    /* Burgundy-tinted elevation, softer on a warm white than neutral grey */
    --shadow-sm: 0 1px 2px 0 rgba(94, 16, 25, 0.06);
    --shadow-md: 0 6px 16px -4px rgba(94, 16, 25, 0.12), 0 2px 6px -2px rgba(94, 16, 25, 0.08);
    --shadow-lg: 0 18px 40px -12px rgba(94, 16, 25, 0.18), 0 6px 14px -6px rgba(94, 16, 25, 0.1);

    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--text-main);
    /* Pearl base with two faint blush washes; fixed so they don't scroll as bands */
    background-color: var(--bg-main);
    background-image:
        radial-gradient(1100px 620px at 12% -8%, rgba(255, 214, 205, 0.55), transparent 62%),
        radial-gradient(900px 520px at 92% 4%, rgba(255, 228, 216, 0.45), transparent 58%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 6rem 0;
}

.bg-light {
    background-color: var(--bg-light);
}

/* Soft blush band — sits between pearl and bg-light */
.bg-wash {
    background-color: var(--bg-wash);
}

.bg-primary {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
    color: white;
}

.text-white {
    color: white;
}

.text-white p {
    color: var(--secondary);
}

.w-100 {
    width: 100%;
}

/* Typography & Section Titles */
.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.text-white h2 {
    color: white;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary);
    border-radius: 2px;
}

.text-white h2::after {
    background-color: white;
}

.section-title.left-align {
    text-align: left;
}

.section-title.left-align h2::after {
    left: 0;
    transform: none;
}

.section-title p {
    color: var(--text-muted);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

.section-title.left-align p {
    margin: 0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-heading);
    border: none;
    font-size: 1rem;
    transition: var(--transition);
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(94, 16, 25, 0.32);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(94, 16, 25, 0.34);
}

.btn-danger {
    background-color: var(--danger);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.39);
}

.btn-danger:hover {
    background-color: var(--danger-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Opaque enough that the blush hero underneath doesn't bleed through pink */
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1000;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.99);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--border-color);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 126px;
    /* The bar spans the window: the logo sits at the left edge and the
       actions at the right, with a gutter rather than a centred column.
       Eleven menu items, both action buttons and the language selector
       need the room. */
    max-width: none;
    /* a wider gutter on the left so the logo clears the window edge */
    padding-left: clamp(14px, 2.4vw, 46px);
    padding-right: clamp(16px, 2.2vw, 40px);
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* The logo sits on the container's own padding edge, the same as the home
   layout has always done. It used to be pulled -6rem toward the viewport edge,
   which was tuned for the old 1200px container; against today's wider nav that
   pull put the mark hard against the left edge of the screen on inner pages
   while the home page kept its margin, so the two never matched. */
.logo-link {
    display: flex;
    align-items: center;
    /* a small nudge only: the mark sits close to the left edge of the bar */
    margin-left: 4px;
}

/* Square logo: cap by height so it never overflows the 126px bar */
.logo img {
    display: block;
    height: 110px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: var(--transition);
}

.navbar.scrolled .logo img {
    height: 92px;
}

/* Below 1360px the bar drops back to its previous size; the phone sizes
   in erp-nav.css take over from there. */
@media (max-width: 1360px) {
    .nav-container {
        height: 96px;
    }

    .logo img {
        height: 80px;
    }

    .navbar.scrolled .logo img {
        height: 68px;
    }

    .hero {
        padding-top: 96px;
    }
}

.logo i {
    color: var(--primary);
    font-size: 1.75rem;
}

.logo span {
    color: var(--text-main);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    /* Centre the menu between the logo and the CTA */
    justify-content: center;
    /* Trimmed from 1rem: the gap between items went up, so the room comes
       from the outside of the menu rather than from the bar. */
    margin: 0 0.6rem;
}

/* The menu is sized to the tightest page, not the roomiest. faqs.html
   carries ten top-level items next to the language pill, the Locations
   pill and the ERP button inside a 1620px bar, which leaves about 24px
   spare at 0.92rem. 0.95rem with 0.012em of tracking spends most of that
   and still lands ~14px clear; anything past 0.96rem pushes the ERP
   button off the right edge on that page. */
.nav-links a {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.012em;
    color: var(--text-main);
    position: relative;
    white-space: nowrap;
}

/* The rule underlines the label, not the padding around it: --nav-pad is set
   wherever the items carry horizontal padding, so the line starts and ends
   with the text however the bar is sized. */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: var(--nav-pad, 0px);
    background-color: var(--primary);
    transition: var(--transition);
}

/* Hover is the lighter primary red; the current page keeps the deeper
   crimson, so the two states are told apart by colour and not only by the
   underline. */
.nav-links a:hover {
    color: var(--primary-light);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: calc(100% - (2 * var(--nav-pad, 0px)));
}

.nav-links a.active {
    color: var(--primary);
}

/* Dropdown Menu CSS */
.dropdown {
    position: relative;
    display: inline-block;
}

/* --white and --text-dark were never defined, which left the panel with no
   background at all and the page reading straight through it. */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-card);
    min-width: 248px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    border-radius: 14px;
    margin-top: 14px;
    padding: 8px;
    text-align: left;
}

.dropdown-content a {
    position: relative;
    color: var(--text-main);
    padding: 11px 14px;
    border-radius: 9px;
    text-decoration: none;
    display: block;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.35;
    transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

.dropdown-content a:hover {
    background-color: var(--bg-light);
    color: var(--primary-dark);
    padding-left: 18px;
}

.dropdown-content.show {
    display: block;
}

/* Nested Dropdown Submenu */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: var(--bg-card);
    min-width: 232px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 61;
    border-radius: 14px;
    padding: 8px;
}

.dropdown-submenu-content.show {
    display: block;
}

/* Mega Dropdown (Clinical Services) */
.dropdown.mega {
    position: static;
}

.mega-content {
    left: 50%;
    transform: translateX(-50%);
    width: min(880px, calc(100vw - 4rem));
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 2rem;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.mega-content.show {
    display: grid;
}

.mega-col h4 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    padding: 0 0 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.mega-content a {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    /* matches .dropdown-content a; without this the panel would inherit the
       larger top-level size and the mega column would widen with it */
    font-size: 0.94rem;
}

.mega-content a:hover {
    background-color: var(--bg-light);
    color: var(--primary);
    transform: translateX(4px);
}

/* Navbar actions (CTA + hamburger) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.appointment-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-light);
    white-space: nowrap;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: 0 4px 14px rgba(228, 87, 78, 0.3);
    transition: var(--transition);
}

.appointment-btn:hover {
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(228, 87, 78, 0.45);
}

/* Primary header CTA: the staff ERP portal. Same pill geometry as
   .appointment-btn — which now only appears in the in-page CTA strips — so the
   bar keeps its rhythm against the outlined Locations pill beside it. */
.erp-login-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.4rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--text-light);
    white-space: nowrap;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: 0 4px 14px rgba(228, 87, 78, 0.3);
    transition: var(--transition);
}

/* Flex gap only landed in Gecko 63, and the KaiOS browser on a JioPhone is
   Gecko 48 — margin first, gap where it is understood, so the icon never ends
   up jammed against the label on a feature phone. */
.erp-login-btn i {
    margin-right: 0.5rem;
}

@supports (gap: 0.5rem) {
    .erp-login-btn {
        gap: 0.5rem;
    }

    .erp-login-btn i {
        margin-right: 0;
    }
}

.erp-login-btn:hover {
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(228, 87, 78, 0.45);
}

/* Kept out of the :hover selector list on purpose: a browser that does not
   know :focus-visible throws away the whole list, and that would take the
   hover state down with it. */
.erp-login-btn:focus-visible {
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(228, 87, 78, 0.45);
}

/* A JioPhone drives the page with the D-pad, so the ring has to show on plain
   :focus. Modern browsers take it back off for pointer focus on the next rule;
   Gecko 48 does not parse that selector and simply keeps the ring. */
.erp-login-btn:focus {
    outline: 2px solid var(--primary-dark);
    outline-offset: 3px;
}

.erp-login-btn:focus:not(:focus-visible) {
    outline: none;
}

.erp-login-btn:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 3px;
}

/* Same Gecko 48 gap fallback for the row the pill sits in. */
.nav-actions > * + * {
    margin-left: 1rem;
}

@supports (gap: 1rem) {
    .nav-actions > * + * {
        margin-left: 0;
    }
}

/* Secondary CTA: same pill, outlined so it doesn't compete with Book Appointment */
.location-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    color: var(--primary-dark);
    background: var(--bg-card);
    border: 1.5px solid var(--primary);
    transition: var(--transition);
}

.location-btn:hover {
    color: var(--text-light);
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(228, 87, 78, 0.3);
}

/* The plain Locations link exists only for the mobile drawer */
.nav-loc {
    display: none;
}

.mobile-menu {
    display: none;
    font-size: 1.5rem;
    color: var(--text-main);
    cursor: pointer;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 126px;
    /* navbar height */
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 35%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
    z-index: -1;
}

.hero-content {
    max-width: 650px;
    text-align: left;
    margin-left: 5rem;
    margin-right: auto;
    margin-top: 8rem;
}

.badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--secondary);
    color: var(--primary-dark);
    font-weight: 600;
    border-radius: 50px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(142, 27, 46, 0.2);
}

.hero h1 {
    font-size: 4.5rem;
    color: #241A1B;
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.hero h1 .highlight {
    background: linear-gradient(90deg, #A32236, #D9694F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero p {
    font-size: 1.25rem;
    color: #55494A;
    margin-bottom: 2.5rem;
    max-width: 95%;
    line-height: 1.7;
    font-weight: 400;
}

.hero-buttons {
    display: flex;
    gap: 1.25rem;
}

.btn-premium {
    background: linear-gradient(135deg, #A32236, #D9694F);
    color: white;
    box-shadow: 0 8px 25px -5px rgba(228, 87, 78, 0.5);
    border: none;
    transition: all 0.3s ease;
}
.btn-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -5px rgba(228, 87, 78, 0.7);
    color: white;
}

.btn-outline-danger {
    background: transparent;
    color: #A32236;
    border: 2px solid #A32236;
    box-shadow: none;
    transition: all 0.3s ease;
}
.btn-outline-danger:hover {
    background: rgba(228, 87, 78, 0.05);
    transform: translateY(-3px);
    color: #8E1B2E;
    border-color: #8E1B2E;
}

/* Meet Our Team */
.team-section {
    padding: 20px 0 80px 0;
    background-color: var(--bg-light);
}

/* All four members on one row; cards stretch to equal height so the
   portraits line up across the row */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 22px;
    margin-top: 45px;
    position: relative;
}

/* 150px portraits need more room than the old 104px ones before a 4-up row
   starts to crowd */
@media (max-width: 1240px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 32px 22px 28px;
    text-align: center;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

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

/* Circular portrait with a soft brand ring */
.team-img-wrapper {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-light);
    box-shadow: 0 0 0 5px var(--bg-card), 0 0 0 7px var(--border-color);
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-card:hover .team-img-wrapper img {
    transform: scale(1.06);
}

.team-info h3 {
    font-size: 1.45rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

.team-role {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.team-role span,
.team-spec span,
.team-org span {
    color: var(--primary);
    font-weight: 400;
    margin: 0 3px;
}

.team-org {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
}

.team-spec {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 0;
}

.team-creds {
    list-style: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    text-align: left;
}

.team-creds li {
    position: relative;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #5c5c5c;
    padding-left: 18px;
    margin-bottom: 7px;
}

.team-creds li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.team-creds li:last-child {
    margin-bottom: 0;
}

.team-cta {
    text-align: center;
    margin-top: 60px;
}

.team-cta h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
}

/* Our Locations */
.locations {
    padding: 70px 0 90px;
}

.loc-layout {
    display: grid;
    grid-template-columns: minmax(min(340px, 100%), 440px) 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 35px;
}

.loc-list {
    max-height: 620px;
    overflow-y: auto;
    padding-right: 6px;
}

.loc-city {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary);
    margin: 22px 0 12px;
}

.loc-city:first-child {
    margin-top: 0;
}

/* Each centre is a button so the map can follow the selection */
.loc-card {
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid transparent;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.loc-card:hover {
    border-left-color: var(--primary-light);
    transform: translateX(3px);
    box-shadow: var(--shadow-md);
}

.loc-card.is-active {
    border-left-color: var(--primary);
    background: var(--bg-light);
    box-shadow: var(--shadow-md);
}

.loc-card h3 {
    font-size: 1.08rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    line-height: 1.35;
}

.loc-card h3 span {
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text-muted);
}

.loc-addr,
.loc-tel,
.loc-note {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 6px;
}

.loc-addr i,
.loc-tel i {
    color: var(--primary);
    width: 16px;
    margin-right: 6px;
}

.loc-tel a {
    color: var(--primary-dark);
    font-weight: 600;
}

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

.loc-note {
    font-style: italic;
    color: var(--text-muted);
}

.loc-card p:last-child {
    margin-bottom: 0;
}

.loc-map {
    height: 620px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 120px;
}

@media (max-width: 900px) {
    .loc-layout {
        grid-template-columns: 1fr;
    }

    .loc-list {
        max-height: none;
        overflow: visible;
    }

    .loc-map {
        height: 380px;
        position: static;
    }
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}

.service-card {
    background-color: var(--bg-card);
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.service-icon {
    width: 70px;
    height: 70px;
    background-color: var(--secondary);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.5rem;
    transition: var(--transition);
}

.service-card:hover .service-icon {
    background-color: var(--primary);
    color: white;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Doctors */
.doctors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2.5rem;
}

.doctor-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.doctor-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.doctor-img {
    height: 350px;
    overflow: hidden;
    background-color: #e5e7eb;
}

.doctor-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s ease;
}

.doctor-card:hover .doctor-img img {
    transform: scale(1.05);
}

.doctor-info {
    padding: 1.5rem;
    text-align: center;
}

.doctor-info h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.doctor-info .specialty {
    color: var(--primary);
    font-weight: 500;
    margin-bottom: 1rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.social-links a:hover {
    background-color: var(--primary);
    color: white;
}

/* Why Choose Us */
.why-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.features-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background-color: var(--secondary);
    color: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.feature-text h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.feature-text p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Journey line sits under the heading, above the body copy */
.why-choose-us .why-tagline {
    font-size: 1.05rem;
    font-weight: 600;
    font-style: italic;
    color: var(--primary);
    /* Clears the 4px accent bar h2::after parks at bottom: -10px */
    margin: 10px 0 14px;
}

.why-image .image-wrapper {
    height: 500px;
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Soft blush field behind the transparent illustration */
    background: radial-gradient(circle at 50% 45%, var(--bg-light) 0%, var(--bg-main) 70%);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.why-image .image-wrapper img {
    width: auto;
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    display: block;
}

.experience-badge {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.experience-badge .years {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.experience-badge .text {
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

/* Testimonials */
.testimonial-card {
    background-color: white;
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem;
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-main);
    box-shadow: var(--shadow-lg);
}

.stars {
    color: #fbbf24;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.quote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-main);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.author {
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-heading);
}

/* Contact */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.info-item {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.info-item .icon {
    width: 50px;
    height: 50px;
    background-color: var(--secondary);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-item h4 {
    margin-bottom: 0.25rem;
}

.info-item p {
    color: var(--text-muted);
}

.map-container {
    height: 300px;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #e5e7eb;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.25rem;
    gap: 0.5rem;
}

.contact-form-container {
    background-color: white;
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

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

.form-group {
    margin-bottom: 1.25rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(142, 27, 46, 0.2);
}

/* Footer */
.footer {
    background-color: #241A1B;
    color: white;
    padding: 5rem 0 0;
}

/* Footer link columns.

   These two columns carried no heading at all — a `padding-top: 40px` stood
   in for one, which lines the lists up with the brand block on a wide screen
   and reads as an unexplained gap on a phone. Real headings now, on the same
   type treatment the rest of the site gives a column label. */
.foot-col-title {
    margin: 0 0 4px;
    font-family: var(--adv-font-head);
    font-size: var(--adv-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--adv-eyebrow-track);
    text-transform: uppercase;
    color: var(--adv-warm-400);
}

/* The floating WhatsApp button is fixed 20px from the bottom, so at the end
   of the page it sat on top of the legal links — "Disclaimer" was underneath
   it. Reserve the button's height plus its offset below the last row. */
.footer .footer-legal {
    padding-bottom: 78px;
}

@media (min-width: 768px) {
    .footer .footer-legal {
        padding-bottom: 24px;
    }
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand .logo {
    color: white;
    margin-bottom: 1rem;
}

.footer-brand .logo span {
    color: var(--primary-light);
}

.footer-brand p {
    color: #A2938F;
    max-width: 300px;
}

.footer-links h4,
.footer-social h4 {
    font-family: var(--font-heading);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer-links ul li {
    margin-bottom: 0.75rem;
}

.footer-links ul li a {
    color: #A2938F;
}

.footer-links ul li a:hover {
    color: var(--primary-light);
    padding-left: 5px;
}

.footer-social .social-icons {
    display: flex;
    gap: 1rem;
}

.footer-social .social-icons a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.footer-social .social-icons a:hover {
    background-color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
    text-align: center;
    color: #A2938F;
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 3rem;
    }

    .why-content,
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* simple mobile fallback */
    }

    .mobile-menu {
        display: block;
    }

    .hero {
        padding-top: 100px;
        text-align: center;
    }

    .hero-content {
        margin: 0 auto;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-overlay {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
    }

    .features-list {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Swiper Styling overrides */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: var(--primary) !important;
    opacity: 1 !important;
}

/* Contact Modal & Premium Form Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}

.modal-content.contact-modal {
    background-color: #fff;
    margin: auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 1000px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    animation: modalSlideIn 0.3s ease-out forwards;
}

@keyframes modalSlideIn {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.contact-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    background: #f4f4f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contact-modal-close:hover {
    background: var(--primary);
    color: white;
}

.contact-modal-left {
    flex: 1;
    min-width: 300px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-modal-right {
    flex: 1.5;
    min-width: 350px;
    padding: 40px;
    background: #fff;
}

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

.premium-form input,
.premium-form select,
.premium-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #EDE3E0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    color: #333;
    background-color: #f8fafc;
    transition: all 0.3s ease;
}

.premium-form input:focus,
.premium-form select:focus,
.premium-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(187, 26, 52, 0.1);
}

.premium-form textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-gradient {
    background: linear-gradient(90deg, #8E1B2E 0%, #ff5e00 100%);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 16px 30px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 10px 20px rgba(187, 26, 52, 0.3);
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 3rem;
    }

    .why-content,
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* simple mobile fallback */
    }

    .mobile-menu {
        display: block;
    }

    .hero {
        padding-top: 100px;
        text-align: center;
    }

    .hero-content {
        margin: 0 auto;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-overlay {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
    }

    .features-list {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Swiper Styling overrides */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: var(--primary) !important;
    opacity: 1 !important;
}

/* Contact Modal & Premium Form Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}

.modal-content.contact-modal {
    background-color: #fff;
    margin: auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 1000px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    animation: modalSlideIn 0.3s ease-out forwards;
}

@keyframes modalSlideIn {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.contact-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    background: #f4f4f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contact-modal-close:hover {
    background: var(--primary);
    color: white;
}

.contact-modal-left {
    flex: 1;
    min-width: 300px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-modal-right {
    flex: 1.5;
    min-width: 350px;
    padding: 40px;
    background: #fff;
}

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

.premium-form input,
.premium-form select,
.premium-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #EDE3E0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    color: #333;
    background-color: #f8fafc;
    transition: all 0.3s ease;
}

.premium-form input:focus,
.premium-form select:focus,
.premium-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(187, 26, 52, 0.1);
}

.premium-form textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-gradient {
    background: linear-gradient(90deg, #8E1B2E 0%, #ff5e00 100%);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 16px 30px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 10px 20px rgba(187, 26, 52, 0.3);
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(187, 26, 52, 0.4);
}

/* The bar sheds width in two steps rather than one, so the menu only shrinks
   when it genuinely has to.

   First step — the Locations pill steps aside. That alone buys 160px, which
   is enough to keep the menu at full size down to about 1470px of viewport.
   The drawer and the hero both carry that link anyway. */
@media (min-width: 1481px) and (max-width: 1620px) {
    .location-btn {
        display: none;
    }
}

/* Second step — below that the menu itself tightens. Measured: with the pill
   already gone and the logo on its padding edge, the row runs out of room just
   under 1470px of viewport. */
@media (min-width: 1361px) and (max-width: 1480px) {
    .location-btn {
        display: none;
    }

    .nav-links {
        gap: .55rem;
        margin: 0 .5rem;
    }

    .nav-links a,
    .nav-links .dropbtn {
        font-size: .89rem;
    }
}

/* Mobile navbar drawer (kept last so it wins over the earlier duplicate media blocks).
   Breakpoint is 1360px, not 768px: eleven menu items, both action buttons and
   the language selector stop fitting inside the bar below that even at the
   tightened size, and the last of them was being pushed off the right edge. */
@media (max-width: 1360px) {
    .nav-links {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    /* A panel hanging off the hamburger, not a full screen of menu: it opens
       over the page in the top right corner, the way a dropdown does, and the
       content it covers stays visible around it. Width is capped but gives
       way on a narrow phone; height is capped at three quarters of the screen
       and scrolls past that, so a long menu never runs off the bottom. */
    .nav-links.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 0;
        gap: 0.25rem;
        position: fixed;
        top: 96px;
        left: auto;
        right: 12px;
        width: min(214px, calc(100vw - 32px));
        max-height: min(62vh, calc(100vh - 108px));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.25rem 0.8rem 0.55rem;
        /* Opaque, not 98%: the panel opens over the hero, and that last 2%
           plus the backdrop blur left the white hero headline ghosting
           through the menu. Same colour, nothing to see behind it. */
        background-color: #FFFFFF;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        box-shadow: 0 18px 44px -14px rgba(90, 10, 14, .38);
    }

    /* Rows sized for a panel rather than a full screen: the tap target is
       still 44px tall with the line box, but the menu now fits without
       scrolling on the pages that carry five or six items. */
    .nav-links.open > a,
    .nav-links.open .dropbtn {
        display: block;
        width: 100%;
        padding: 0.5rem 0;
        font-size: 0.9rem;
        line-height: 1.5;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-links.open a::after {
        display: none;
    }

    .nav-links.open .dropdown,
    .nav-links.open .dropdown.mega {
        position: relative;
        width: 100%;
    }

    /* Nested panels flow inline instead of floating */
    .nav-links.open .dropdown-content,
    .nav-links.open .dropdown-submenu-content,
    .nav-links.open .mega-content {
        position: static;
        transform: none;
        width: 100%;
        min-width: 0;
        margin-top: 0;
        padding: 0 0 0 1rem;
        box-shadow: none;
        border: none;
        grid-template-columns: 1fr;
        background-color: transparent;
    }

    .nav-links.open .mega-col h4 {
        padding-left: 0;
    }

    .logo img,
    .navbar.scrolled .logo img {
        height: 60px;
    }

    /* Drawer carries the plain Locations link; the pill would crowd the bar */
    .nav-links.open .nav-loc {
        display: block;
    }

    .location-btn {
        display: none;
    }

    .appointment-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .appointment-btn i {
        display: none;
    }

    /* "ERP Login" is short enough to keep its icon where the old
       "Book Appointment" label could not. */
    .erp-login-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        min-height: 44px;    /* thumb-sized on a touch screen */
    }
}

/* Everything below 480px — where the logo, the language pill, the ERP
   pill and the hamburger start competing for the same row — is tuned in
   css/erp-nav.css, which is linked last so it can win against the
   home-v2 and lang-select rules for the same elements. */

/* The Pancrea Care drawer matches the main drawer's 1.1rem — no override. */

/* ---- Contact modal refresh (kept last; the modal rules appear twice earlier) ---- */
.contact-modal-left {
    background: linear-gradient(140deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
}

.contact-modal-left h2 {
    font-size: 2.1rem;
    margin-bottom: 14px;
}

.cm-intro {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.92;
    margin-bottom: 32px;
}

.cm-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

/* The WhatsApp row keeps the platform's green; the phone, email and
   location rows stay in the modal's own white-on-tint. */
.cm-row .cm-icon:has(.fa-whatsapp) {
    background: rgba(37, 211, 102, .22);
    border-color: rgba(37, 211, 102, .55);
}

.cm-icon .fa-whatsapp {
    color: var(--adv-wa);
}

.cm-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.cm-row h4 {
    margin: 0 0 4px;
    font-size: 1.02rem;
}

.cm-row p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    opacity: 0.92;
}

.cm-row a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cm-row a:hover {
    opacity: 0.8;
}

.contact-modal-right h3 {
    font-size: 1.8rem;
    margin-bottom: 22px;
}

/* Paired fields; they stack on narrow screens instead of squeezing */
.form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 180px;
}

.form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    padding-left: 4px;
}

.form-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 14px;
    line-height: 1.6;
}

.form-note a {
    color: var(--primary);
    font-weight: 600;
}

.form-sent {
    text-align: center;
    padding: 40px 10px;
}

.form-sent i {
    font-size: 2.6rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.form-sent h4 {
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.form-sent p {
    color: var(--text-muted);
    line-height: 1.7;
}

/* ---- Meet Our Team: premium pass (kept last so it wins) ---- */
.section-eyebrow {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
}

.team-section {
    padding: 10px 0 50px 0;
}

.team-section .section-title p {
    max-width: 560px;
    margin: 8px auto 0;
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}

.team-section .team-grid {
    gap: 16px;
    margin-top: 26px;
}

.team-card {
    position: relative;
    padding: 22px 18px 18px;
    border-radius: 16px;
    overflow: hidden;
}

/* Brand bar wipes across the top on hover */
.team-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.team-card:hover::before {
    transform: scaleX(1);
}

.team-card.is-lead {
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-card) 38%);
    border-color: var(--primary-light);
}

/* Portrait sits flat - no ring, no gap, no outer shadow */
.team-img-wrapper {
    width: 150px;
    height: 150px;
    margin: 0 auto 16px;
    padding: 0;
    background: none;
    box-shadow: none;
}

.team-img-wrapper img {
    border-radius: 50%;
    border: none;
}

.team-info {
    flex: 1;
}

.team-info h3 {
    font-size: 1.08rem;
    margin-bottom: 7px;
}

/* Role becomes a chip rather than another line of grey text */
.team-role {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 3px 11px;
    margin-bottom: 8px;
}

.team-org {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 5px;
}

.team-org span {
    color: var(--primary);
}

.team-spec {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Credentials as plain centred lines - no boxes, no rules */
.team-creds {
    display: block;
    list-style: none;
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
    text-align: center;
}

.team-creds li {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--primary-dark);
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.team-creds li::before {
    display: none;
}

.team-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
}

.team-link i {
    font-size: 0.75rem;
    transition: transform 0.35s ease;
}

.team-card:hover .team-link i {
    transform: translateX(4px);
}

.team-section .team-cta {
    margin-top: 34px;
}

.team-section .team-cta h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.team-cta p {
    color: var(--text-muted);
    margin: -4px 0 16px;
    font-size: 0.92rem;
}

/* ---- Meet Our Team: scroll-triggered reveal sequence ----
   Hidden states apply only once JS has added .is-armed, so the section stays
   fully readable if the script never runs. .is-done clears the animations
   afterwards so the card hover transform is not fighting a forwards fill. */
.team-cinema.is-armed .section-eyebrow,
.team-cinema.is-armed .section-title h2,
.team-cinema.is-armed .section-title p,
.team-cinema.is-armed .team-card,
.team-cinema.is-armed .team-cta {
    opacity: 0;
}

.team-cinema.is-armed .team-img-wrapper,
.team-cinema.is-armed .team-role,
.team-cinema.is-armed .team-creds li {
    opacity: 0;
}

@keyframes teamRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes teamWipe {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes teamCardIn {
    from { opacity: 0; transform: translateY(34px) scale(0.965); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Portrait lands last inside its card, with the gradient ring spinning up */
@keyframes teamPortraitIn {
    from { opacity: 0; transform: scale(0.55) rotate(-25deg); }
    60%  { opacity: 1; transform: scale(1.06) rotate(4deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes teamPop {
    from { opacity: 0; transform: scale(0.7); }
    70%  { opacity: 1; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
}

.team-cinema.is-playing .section-eyebrow {
    animation: teamRise 0.5s ease-out 0s both;
}

.team-cinema.is-playing .section-title h2 {
    animation: teamWipe 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.team-cinema.is-playing .section-title p {
    animation: teamRise 0.6s ease-out 0.4s both;
}

/* Cards enter left-to-right, 0.15s apart */
.team-cinema.is-playing .team-card {
    animation: teamCardIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.team-cinema.is-playing .team-card:nth-child(1) { animation-delay: 0.60s; }
.team-cinema.is-playing .team-card:nth-child(2) { animation-delay: 0.75s; }
.team-cinema.is-playing .team-card:nth-child(3) { animation-delay: 0.90s; }
.team-cinema.is-playing .team-card:nth-child(4) { animation-delay: 1.05s; }

.team-cinema.is-playing .team-img-wrapper {
    animation: teamPortraitIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.team-cinema.is-playing .team-card:nth-child(1) .team-img-wrapper { animation-delay: 0.75s; }
.team-cinema.is-playing .team-card:nth-child(2) .team-img-wrapper { animation-delay: 0.90s; }
.team-cinema.is-playing .team-card:nth-child(3) .team-img-wrapper { animation-delay: 1.05s; }
.team-cinema.is-playing .team-card:nth-child(4) .team-img-wrapper { animation-delay: 1.20s; }

.team-cinema.is-playing .team-role {
    animation: teamPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.team-cinema.is-playing .team-card:nth-child(1) .team-role { animation-delay: 1.00s; }
.team-cinema.is-playing .team-card:nth-child(2) .team-role { animation-delay: 1.15s; }
.team-cinema.is-playing .team-card:nth-child(3) .team-role { animation-delay: 1.30s; }
.team-cinema.is-playing .team-card:nth-child(4) .team-role { animation-delay: 1.45s; }

/* Credential chips pop in one after another, after the lead card has settled */
.team-cinema.is-playing .team-creds li {
    animation: teamPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.team-cinema.is-playing .team-creds li:nth-child(1) { animation-delay: 1.35s; }
.team-cinema.is-playing .team-creds li:nth-child(2) { animation-delay: 1.45s; }
.team-cinema.is-playing .team-creds li:nth-child(3) { animation-delay: 1.55s; }
.team-cinema.is-playing .team-creds li:nth-child(4) { animation-delay: 1.65s; }
.team-cinema.is-playing .team-creds li:nth-child(5) { animation-delay: 1.75s; }

.team-cinema.is-playing .team-cta {
    animation: teamRise 0.6s ease-out 1.9s both;
}

/* Sequence over: hand the cards back to the hover transition */
.team-cinema.is-done .section-eyebrow,
.team-cinema.is-done .section-title h2,
.team-cinema.is-done .section-title p,
.team-cinema.is-done .team-card,
.team-cinema.is-done .team-cta,
.team-cinema.is-done .team-img-wrapper,
.team-cinema.is-done .team-role,
.team-cinema.is-done .team-creds li {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
    .team-cinema.is-armed .section-eyebrow,
    .team-cinema.is-armed .section-title h2,
    .team-cinema.is-armed .section-title p,
    .team-cinema.is-armed .team-card,
    .team-cinema.is-armed .team-cta,
    .team-cinema.is-armed .team-img-wrapper,
    .team-cinema.is-armed .team-role,
    .team-cinema.is-armed .team-creds li {
        opacity: 1;
    }

    .team-cinema.is-playing .section-eyebrow,
    .team-cinema.is-playing .section-title h2,
    .team-cinema.is-playing .section-title p,
    .team-cinema.is-playing .team-card,
    .team-cinema.is-playing .team-cta,
    .team-cinema.is-playing .team-img-wrapper,
    .team-cinema.is-playing .team-role,
    .team-cinema.is-playing .team-creds li {
        animation: none;
    }
}

/* ---- Meet Our Team: colour animation ----
   Three layers, all brand-palette only: a gradient bar that drifts along the
   card top, portraits that warm from muted to full colour, and names that
   carry a moving gradient. */

/* 1. Top bar: still wipes in on hover, but the gradient itself now drifts */
.team-card::before {
    background: linear-gradient(90deg,
            var(--primary-dark) 0%,
            var(--primary) 25%,
            var(--primary-light) 50%,
            var(--primary) 75%,
            var(--primary-dark) 100%);
    background-size: 300% 100%;
    animation: teamBarDrift 6s linear infinite;
}

@keyframes teamBarDrift {
    to { background-position: -300% 0; }
}

/* The lead card keeps its bar on permanently so the section always has motion */
.team-card.is-lead::before {
    transform: scaleX(1);
}

/* 2. Portraits sit slightly muted, then warm to full colour on hover */
.team-img-wrapper img {
    filter: saturate(0.72) contrast(1.02);
    transition: filter 0.6s ease, transform 0.5s ease;
}

.team-card:hover .team-img-wrapper img {
    filter: saturate(1.12) contrast(1.05);
}

/* A brand-tinted halo breathes behind each portrait.
   overflow must be visible here or the halo is clipped away - the circular
   crop still holds, because the img carries its own border-radius. */
.team-img-wrapper {
    position: relative;
    overflow: visible;
}

.team-img-wrapper img {
    position: relative;
    z-index: 1;
}

.team-img-wrapper::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(228, 87, 78, 0.22) 0%,
            rgba(255, 138, 76, 0.12) 45%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.team-card:hover .team-img-wrapper::after {
    opacity: 1;
    animation: teamHalo 2.8s ease-in-out infinite;
}

@keyframes teamHalo {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50%      { transform: scale(1.09); opacity: 1; }
}

/* 3. Names carry a gradient that travels across the text */
.team-info h3 {
    background: linear-gradient(90deg,
            var(--primary-dark) 0%,
            var(--primary) 35%,
            var(--primary-light) 50%,
            var(--primary) 65%,
            var(--primary-dark) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-dark);
    animation: teamNameShift 9s linear infinite;
}

@keyframes teamNameShift {
    to { background-position: -250% 0; }
}

/* Role chip warms up as the card is hovered */
.team-role {
    transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

.team-card:hover .team-role {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    border-color: transparent;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {

    .team-card::before,
    .team-info h3,
    .team-card:hover .team-img-wrapper::after {
        animation: none;
    }

    .team-img-wrapper img {
        filter: none;
    }
}

/* ---- New Milestone ---- */
/* On the section rhythm and the shared tint, both from brand.css. It used
   70px and --bg-light (#FAF4F2), one step off the 76px every other band uses
   and a shade off the #FBF5F3 the tinted bands share — close enough to look
   like a mistake, far enough to see. */
.milestone {
    padding: var(--adv-sec-y) 0;
    background: var(--adv-blush);
}

/* Wider than the site default so the building has room to breathe */
.milestone .container {
    max-width: 1340px;
}

.ms-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

/* The building is a transparent cutout, so it sits on a soft panel and is
   contained rather than cropped - cover would slice the signage off */
.ms-media {
    position: relative;
    border-radius: 18px;
    padding: 14px;
    background:
        radial-gradient(circle at 55% 40%, rgba(255, 255, 255, 0.9) 0%, transparent 60%),
        linear-gradient(160deg, var(--bg-card) 0%, var(--bg-light) 100%);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.ms-media img {
    width: 100%;
    height: auto;
    max-height: 780px;
    object-fit: contain;
    display: block;
    transition: transform 0.7s ease;
}

.ms-media:hover img {
    transform: scale(1.03);
}

/* Location flag sits over the photo */
.ms-flag {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary-dark);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 50px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(4px);
}

/* Pulsing "new" badge */
.ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--bg-card);
    border: 1px solid var(--primary-light);
    border-radius: 50px;
    padding: 7px 18px;
    margin-bottom: 18px;
}

.ms-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(228, 87, 78, 0.6);
    animation: msPing 1.9s ease-out infinite;
}

@keyframes msPing {
    70%  { box-shadow: 0 0 0 9px rgba(228, 87, 78, 0); }
    100% { box-shadow: 0 0 0 0 rgba(228, 87, 78, 0); }
}

.ms-body h2 {
    font-size: 2.2rem;
    line-height: 1.22;
    color: var(--primary-dark);
    margin-bottom: 14px;
}

.ms-lead {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.ms-partner {
    font-size: 0.98rem;
    color: var(--text-main);
    margin-bottom: 20px;
}

.ms-partner b {
    color: var(--primary-dark);
}

/* Two columns of facilities, one on narrow screens */
.ms-facilities {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 20px;
    padding: 0;
    margin: 0 0 20px;
}

.ms-facilities li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #4a4a4a;
}

.ms-facilities i {
    flex: 0 0 16px;
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--primary);
}

.ms-tag {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    margin-bottom: 22px;
}

@media (max-width: 940px) {
    .ms-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ms-body h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 560px) {
    .ms-facilities {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-dot {
        animation: none;
    }

    .ms-media:hover img {
        transform: none;
    }
}

/* ===================================================================
   Related Disease menu (main navbar, every page)
   Two levels: six diseases on the left, the matching condition pages
   revealed on the right. Each submenu is a child of its own row, so
   hovering it keeps the row hovered and the panel stays open.
   =================================================================== */
.dropdown.advmega {
    position: relative;
}

.advmega-panel {
    min-width: 286px;
    margin-top: 12px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 44px -18px rgba(120, 60, 55, 0.3), 0 2px 8px -4px rgba(120, 60, 55, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* submenus escape the panel, so this must never be clipped */
    overflow: visible;
}

.advmega-panel.show,
.dropdown.advmega:hover .advmega-panel {
    display: block;
    animation: advMegaIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes advMegaIn {
    from { opacity: 0; transform: translateY(-7px); }
    to   { opacity: 1; transform: none; }
}

/* bridge across the gap under the trigger */
.advmega-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

/* ------------------------------ left column ------------------------------ */
.advmega-item {
    position: relative;
}

.advmega-panel .advmega-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    border-radius: 10px;
    border-left: 3px solid transparent;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* the sign flips from + to x on the row being hovered */
.advmega-sign {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.65;
    transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.advmega-sign::before {
    content: '+';
}

.advmega-item:hover > .advmega-link,
.advmega-panel .advmega-link:focus-visible {
    background-color: #FDF2EF;
    color: var(--primary-dark);
    padding-left: 14px;
    outline: none;
}

.advmega-item:hover > .advmega-link .advmega-sign,
.advmega-panel .advmega-link:focus-visible .advmega-sign {
    color: var(--primary);
    opacity: 1;
    transform: scale(1.05);
}

.advmega-item:hover > .advmega-link .advmega-sign::before,
.advmega-panel .advmega-link:focus-visible .advmega-sign::before {
    content: '\00D7';
}

/* the page you are currently on */
.advmega-panel .advmega-link.is-current {
    background-color: #FDF2EF;
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

/* ------------------------------ right pane ------------------------------ */
/* transparent shell; its left padding is the hover bridge across the gap */
.advmega-sub {
    display: none;
    position: absolute;
    left: 100%;
    top: -9px;
    z-index: 62;
    padding-left: 10px;
}

.advmega-item:hover > .advmega-sub,
.advmega-item:focus-within > .advmega-sub {
    display: block;
    animation: advSubIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes advSubIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}

.advmega-sub-inner {
    min-width: 262px;
    max-width: 310px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 44px -18px rgba(120, 60, 55, 0.3), 0 2px 8px -4px rgba(120, 60, 55, 0.12);
}

.advmega-panel .advmega-sub-inner a {
    display: block;
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

.advmega-panel .advmega-sub-inner a:hover,
.advmega-panel .advmega-sub-inner a:focus-visible {
    background-color: #FDF2EF;
    color: var(--primary-dark);
    padding-left: 17px;
    outline: none;
}

/* ---- mobile drawer: taps, not hover; both levels become an accordion ---- */
@media (max-width: 992px) {
    .dropdown.advmega:hover .advmega-panel:not(.show) {
        display: none;
    }

    .nav-links.open .advmega-panel {
        width: 100%;
        min-width: 0;
        margin-top: 0;
        padding: 0 0 0.5rem 1rem;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .nav-links.open .advmega-panel .advmega-link {
        min-height: 46px;
        padding: 0.7rem 0;
        border-left: 0;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        font-size: 1rem;
    }

    /* hover does nothing here — .is-open, set on tap, drives the submenu */
    .nav-links.open .advmega-item:hover > .advmega-link {
        background: transparent;
        color: var(--text-main);
    }

    .nav-links.open .advmega-item:hover > .advmega-sub {
        display: none;
    }

    .nav-links.open .advmega-item.is-open > .advmega-link {
        color: var(--primary);
    }

    .nav-links.open .advmega-item.is-open > .advmega-link .advmega-sign {
        color: var(--primary);
        opacity: 1;
    }

    .nav-links.open .advmega-item.is-open > .advmega-link .advmega-sign::before {
        content: '\00D7';
    }

    .nav-links.open .advmega-item.is-open > .advmega-sub {
        display: block;
        position: static;
        padding: 0 0 0 1rem;
        animation: none;
    }

    .nav-links.open .advmega-sub-inner {
        min-width: 0;
        max-width: none;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .nav-links.open .advmega-sub-inner a {
        min-height: 44px;
        padding: 0.62rem 0;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        font-size: 0.95rem;
    }

    .nav-links.open .advmega-sub-inner a:hover {
        padding-left: 0.4rem;
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .advmega-panel.show,
    .dropdown.advmega:hover .advmega-panel,
    .advmega-item:hover > .advmega-sub {
        animation: none;
    }
}

/* ===================================================================
   No caret beside a menu name. The dropdowns open on hover on a desktop
   and are expanded by the drawer on a phone, so the chevron only added
   noise to a bar that already carries twelve items.
   =================================================================== */
.nav-links .dropbtn > .fa-chevron-down,
.nav-links .dropbtn > i.fa-solid.fa-chevron-down {
    display: none;
}

/* ==========================================================================
   Milestone photo panel — studio backdrop
   --------------------------------------------------------------------------
   The building is a transparent cutout, so whatever sits behind it is the
   photograph as far as the eye is concerned. A flat near-white panel read as
   an unfinished placeholder. It now gets a studio treatment: a warm brand
   wash, a soft light behind the roofline, a grounding shadow under the
   building and a hairline rim, so the cutout reads as a photograph on a
   surface rather than a PNG on a card.
   ========================================================================== */
.milestone .ms-media {
    isolation: isolate;
    padding: clamp(18px, 2vw, 30px);
    border-radius: 24px;
    border: 1px solid rgba(142, 27, 46, .1);
    background:
        radial-gradient(70% 55% at 50% 22%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(120% 90% at 50% 120%, rgba(142, 27, 46, .12) 0%, rgba(142, 27, 46, 0) 60%),
        linear-gradient(168deg, #FFF9F7 0%, #FCEFEC 52%, #F6E2DE 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 24px 60px -28px rgba(94, 16, 25, .38),
        0 6px 18px -12px rgba(94, 16, 25, .18);
}

/* the light behind the roofline */
.milestone .ms-media::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8%;
    width: min(78%, 620px);
    aspect-ratio: 1 / 1;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 233, 226, .55) 45%, transparent 72%);
    z-index: 0;
    pointer-events: none;
}

/* the shadow the building stands on, not a shadow it casts */
.milestone .ms-media::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: clamp(20px, 3vw, 34px);
    width: min(64%, 520px);
    height: 34px;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(74, 12, 20, .26) 0%, rgba(74, 12, 20, .1) 45%, transparent 72%);
    filter: blur(9px);
    z-index: 0;
    pointer-events: none;
}

.milestone .ms-media img {
    position: relative;
    z-index: 1;
    /* a touch of contrast so the white façade separates from the wash */
    filter: saturate(1.04) contrast(1.03) drop-shadow(0 18px 26px rgba(74, 12, 20, .16));
}

/* the chip sits above both layers, glass over the wash */
.milestone .ms-flag {
    z-index: 2;
    left: clamp(20px, 2.4vw, 30px);
    bottom: clamp(20px, 2.4vw, 30px);
    gap: 9px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(142, 27, 46, .12);
    box-shadow: 0 10px 26px -14px rgba(94, 16, 25, .5);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}

.milestone .ms-flag i {
    color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
    .milestone .ms-media:hover img {
        transform: none;
    }
}