/* ========================================
   SANMATI MEDICALS - PREMIUM HEALTHCARE DESIGN
   Luxury, Modern, Professional Aesthetic
   ======================================== */

:root {
    /* Premium Healthcare Color Palette */
    --primary: #0B2D4D;          /* Deep Navy Blue */
    --primary-dark: #071F35;
    --secondary: #087E8B;        /* Elegant Teal */
    --secondary-light: #DFF4F3;  /* Soft Teal */
    --accent: #D4AF6A;           /* Champagne Gold */
    --accent-light: #E8D9C3;
    --background: #FAFBFC;       /* Clean Ivory */
    --surface: #FFFFFF;
    --text: #102A43;             /* Dark Navy */
    --text-light: #627D98;       /* Soft Gray */
    --border: #E0E6ED;
    --success: #178A5B;
    --shadow-sm: 0 2px 8px rgba(11, 45, 77, 0.06);
    --shadow-md: 0 4px 16px rgba(11, 45, 77, 0.1);
    --shadow-lg: 0 8px 32px rgba(11, 45, 77, 0.12);
    --shadow-xl: 0 12px 48px rgba(11, 45, 77, 0.15);
    --transition-sm: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-md: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-lg: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--background);
    overflow-x: hidden;
}

/* Remove default scrollbar styling for custom appearance */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ========================================
   PREMIUM HEADER REDESIGN
   ======================================== */

.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: var(--surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    transition: var(--transition-md);
    backdrop-filter: blur(0px);
}

.header.sticky {
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.95);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.logo-section {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo-branding {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-text-primary {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.logo-text-secondary {
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1;
}

.nav-link {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color var(--transition-sm);
    text-transform: uppercase;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary), var(--accent));
    transition: width var(--transition-md);
    border-radius: 1px;
}

.nav-link:hover {
    color: var(--secondary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--secondary);
}

/* Header Right Section */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.delivery-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(8, 126, 139, 0.08);
    border: 1px solid var(--secondary-light);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary);
    transition: var(--transition-sm);
}

.delivery-badge:hover {
    background: rgba(8, 126, 139, 0.12);
    border-color: var(--secondary);
    box-shadow: 0 2px 8px rgba(8, 126, 139, 0.15);
}

.delivery-badge svg {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.btn-call-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--secondary), #06657F);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

.btn-call-header:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, #06657F, var(--secondary));
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: var(--transition-sm);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    z-index: 999;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu.active {
    display: flex;
}

.mobile-nav-link {
    padding: 16px 24px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    transition: var(--transition-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    background: var(--secondary-light);
    color: var(--secondary);
}

.mobile-menu-contact {
    padding: 16px 24px;
}

/* ========================================
   PREMIUM HERO SECTION
   ======================================== */

.hero {
    margin-top: 64px;
    padding: 80px 24px;
    background: linear-gradient(135deg, var(--background) 0%, rgba(223, 244, 243, 0.5) 100%);
    position: relative;
    overflow: hidden;
}

/* Premium Hero with Background Image */
@keyframes heroEnter {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-with-background {
    background-image: url('../assets/images/back.png');
    background-size: cover;
    background-position: center 30%;
    background-attachment: fixed;
    padding: 120px 24px;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: heroEnter 0.8s ease forwards;
}

.hero-with-background::before {
    display: none;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(11, 45, 77, 0.45) 0%,
        rgba(8, 126, 139, 0.35) 50%,
        rgba(11, 45, 77, 0.45) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.hero-with-background .container {
    position: relative;
    z-index: 2;
}

.hero-with-background .hero-content {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
    max-width: 700px;
}

.hero-with-background .hero-text {
    animation: fadeUpHero 0.8s ease 0.2s both;
}

.hero-with-background .eyebrow {
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 3px;
}

.hero-with-background .hero-title {
    color: white;
    font-size: 52px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    margin-bottom: 24px;
    line-height: 1.1;
}

.hero-with-background .hero-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
}

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

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(8, 126, 139, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-text {
    animation: fadeUpHero 0.8s ease 0.2s both;
}

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

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--secondary);
    margin-bottom: 16px;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary);
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-image {
    position: relative;
    animation: zoomInHero 0.8s ease 0.4s both;
}

@keyframes zoomInHero {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-img {
    width: 100%;
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    object-fit: cover;
}

/* ========================================
   PREMIUM BUTTONS
   ======================================== */

.btn {
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary), #06657F);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: white;
    color: var(--secondary);
    border: 2px solid var(--secondary);
}

.btn-secondary:hover {
    background: var(--secondary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-large {
    padding: 14px 32px;
    font-size: 14px;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* ========================================
   PREMIUM PRODUCT CARDS
   ======================================== */

.product-card {
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: var(--transition-md);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--accent));
    opacity: 0;
    transition: opacity var(--transition-md);
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: var(--secondary);
    box-shadow: var(--shadow-xl);
}

.product-card:hover::before {
    opacity: 1;
}

.product-image {
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, var(--secondary-light), var(--background));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--transition-lg);
}

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

.product-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.product-card p {
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 auto 0;
    line-height: 1.5;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--secondary-light);
    color: var(--secondary);
    transition: var(--transition-sm);
}

.badge:hover {
    background: var(--secondary);
    color: white;
}

.badge.warning {
    background: rgba(212, 175, 106, 0.1);
    color: var(--accent);
}

.badge.warning:hover {
    background: var(--accent);
    color: white;
}

/* ========================================
   PREMIUM SCROLL ANIMATIONS
   ======================================== */

.fade-up {
    opacity: 0;
    transform: translateY(30px);
}

.fade-up.visible {
    animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.stagger-item {
    opacity: 0;
    transform: translateY(20px);
}

.stagger-item.visible {
    animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stagger-item:nth-child(1).visible { animation-delay: 0s; }
.stagger-item:nth-child(2).visible { animation-delay: 0.1s; }
.stagger-item:nth-child(3).visible { animation-delay: 0.2s; }
.stagger-item:nth-child(4).visible { animation-delay: 0.3s; }
.stagger-item:nth-child(5).visible { animation-delay: 0.4s; }
.stagger-item:nth-child(n+6).visible { animation-delay: 0.5s; }

/* ========================================
   CUSTOM CURSOR
   ======================================== */

.cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--secondary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    mix-blend-mode: screen;
    transition: width 0.2s, height 0.2s, border-color 0.2s;
}

.cursor::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--secondary);
    border-radius: 50%;
    opacity: 0.5;
}

.cursor.hover {
    width: 40px;
    height: 40px;
    border-color: var(--accent);
}

.cursor.hover::before {
    border-color: var(--accent);
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    .cursor {
        display: none;
    }
}

/* ========================================
   PREMIUM FOOTER
   ======================================== */

.footer {
    background: var(--primary);
    color: var(--background);
    padding: 60px 24px 20px;
}

.footer-grid {
    display: flex;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto 30px;
    padding: 30px 0;
    border-bottom: none;
    align-items: center;
    justify-content: space-between;
}

.footer-section h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: var(--accent);
}

.footer-section p {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 12px;
}

.footer-links {
    list-style: none;
}

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

.footer-links a {
    font-size: 13px;
    color: var(--background);
    text-decoration: none;
    transition: var(--transition-sm);
    opacity: 0.8;
}

.footer-links a:hover {
    color: var(--accent);
    opacity: 1;
    transform: translateX(4px);
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    opacity: 0.7;
}

/* ========================================
   PREMIUM SECTIONS
   ======================================== */

.trust-grid,
.why-choose-grid,
.essentials-grid,
.services-grid-compact {
    animation: fadeUp 0.8s ease forwards;
}

.trust-item,
.why-item,
.essential-item,
.service-item {
    position: relative;
    transition: var(--transition-md);
}

.trust-item:hover,
.why-item:hover,
.essential-item:hover,
.service-item:hover {
    transform: translateY(-4px);
}

/* ========================================
   PREMIUM FORMS
   ======================================== */

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

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    transition: var(--transition-sm);
    background: var(--surface);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(8, 126, 139, 0.1);
}

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

/* ========================================
   PREMIUM SECTIONS STYLING
   ======================================== */

section {
    padding: 80px 24px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.section-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.6;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--accent));
    margin-top: 16px;
    border-radius: 2px;
}

/* ========================================
   PREMIUM GRID
   ======================================== */

.products-grid,
.trust-grid,
.why-choose-grid,
.services-grid-compact,
.essentials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

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

.mt-large {
    margin-top: 40px;
}

.mb-large {
    margin-bottom: 40px;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Focus visible for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
    .header-content {
        gap: 24px;
        padding: 12px 20px;
    }

    .nav-menu {
        gap: 20px;
    }

    .nav-link {
        font-size: 12px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-with-background {
        background-position: center 25%;
        min-height: 600px;
        padding: 100px 24px;
    }

    .hero-with-background .hero-title {
        font-size: 40px;
    }

    .products-grid,
    .trust-grid,
    .why-choose-grid,
    .services-grid-compact,
    .essentials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .footer-grid {
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-links-column {
        min-width: 300px;
        flex: 1;
    }

    section {
        padding: 60px 20px;
    }

    .section-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .header-content {
        gap: 12px;
        padding: 12px 16px;
    }

    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .delivery-badge {
        display: none;
    }

    .hero {
        padding: 40px 20px;
        margin-top: 64px;
    }

    .hero::before {
        width: 400px;
        height: 400px;
        top: -30%;
        right: -20%;
    }

    .hero-with-background {
        background-position: center 20%;
        background-attachment: scroll;
        min-height: 550px;
        padding: 80px 20px;
    }

    .hero-with-background .hero-title {
        font-size: 32px;
    }

    .hero-content {
        gap: 30px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-buttons {
        gap: 12px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 12px;
    }

    .btn-large {
        padding: 12px 24px;
    }

    .products-grid,
    .trust-grid,
    .why-choose-grid,
    .services-grid-compact,
    .essentials-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 20px;
    }

    .footer-brand-column,
    .footer-links-column,
    .footer-hours-column,
    .footer-icons-column {
        width: 100%;
    }

    .footer-links-horizontal {
        flex-wrap: wrap;
        gap: 16px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .section-title {
        font-size: 24px;
    }

    .section-title::after {
        margin-top: 12px;
    }

    .section-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    section {
        padding: 40px 16px;
    }

    .product-image {
        height: 240px;
    }

    .product-content {
        padding: 16px;
    }

    .product-card h4 {
        font-size: 14px;
    }

    .product-card p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 30px 16px;
    }

    .hero-with-background {
        background-position: center 15%;
        background-attachment: scroll;
        min-height: 480px;
        padding: 60px 16px;
    }

    .hero-with-background .hero-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .hero-with-background .hero-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .eyebrow {
        font-size: 11px;
    }

    .section-title {
        font-size: 20px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 11px;
    }

    .logo-text-primary {
        font-size: 14px;
    }

    .logo-text-secondary {
        font-size: 10px;
    }

    .header-right {
        gap: 12px;
    }

    .btn-call-header {
        padding: 8px 12px;
        font-size: 11px;
    }
}


/* ========================================
   SANMATI MEDICALS - HERO IMAGE INTEGRATION
   Uses the exact uploaded pharmacy reference image.
   ======================================== */
.hero-with-background {
    position: relative;
    isolation: isolate;
    min-height: clamp(600px, 72vh, 760px);
    padding: clamp(88px, 9vw, 120px) 24px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow: hidden;
}

.hero-with-background .hero-overlay {
    background:
        linear-gradient(90deg,
            rgba(7, 31, 53, 0.76) 0%,
            rgba(7, 31, 53, 0.58) 30%,
            rgba(7, 31, 53, 0.20) 53%,
            rgba(7, 31, 53, 0.06) 100%);
}

.hero-with-background .hero-content {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: left;
}

.hero-with-background .hero-text {
    width: min(100%, 510px);
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(8, 31, 52, 0.50), rgba(8, 126, 139, 0.16));
    box-shadow: 0 24px 70px rgba(4, 21, 35, 0.22);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.hero-with-background .eyebrow {
    margin-bottom: 12px;
    color: #DFF4F3;
}

.hero-with-background .hero-title {
    max-width: 500px;
    margin-bottom: 18px;
    font-size: clamp(38px, 4.4vw, 60px);
}

.hero-with-background .hero-subtitle {
    max-width: 480px;
    margin-bottom: 30px;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.7;
}

.hero-with-background .hero-buttons {
    justify-content: flex-start;
}

.hero-with-background .btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.hero-with-background .btn:hover {
    transform: translateY(-3px);
}

.hero-with-background .btn-primary:hover {
    box-shadow: 0 12px 28px rgba(8, 126, 139, 0.30);
}

@keyframes heroBackgroundReveal {
    from { transform: scale(1.035); }
    to { transform: scale(1); }
}

.hero-with-background {
    animation: heroEnter 0.8s ease both;
}

.hero-with-background::after {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: 0;
    pointer-events: none;
    background-image: url('../assets/images/back.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: heroBackgroundReveal 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (min-width: 1025px) {
    .hero-with-background {
        background-position: center center;
    }
}

@media (max-width: 1024px) {
    .hero-with-background {
        min-height: 600px;
        background-position: center center;
    }

    .hero-with-background .hero-text {
        width: min(100%, 500px);
    }
}

@media (max-width: 768px) {
    .hero-with-background {
        min-height: 650px;
        padding: 76px 20px 52px;
        background-position: 52% center;
    }

    .hero-with-background .hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(7, 31, 53, 0.18) 0%,
                rgba(7, 31, 53, 0.26) 34%,
                rgba(7, 31, 53, 0.82) 67%,
                rgba(7, 31, 53, 0.94) 100%);
    }

    .hero-with-background .hero-content {
        align-items: flex-end;
        justify-content: center;
    }

    .hero-with-background .hero-text {
        width: 100%;
        padding: 22px 20px;
        border-radius: 20px;
        background: linear-gradient(145deg, rgba(8, 31, 52, 0.54), rgba(8, 126, 139, 0.20));
    }

    .hero-with-background .hero-title {
        font-size: clamp(30px, 8vw, 42px);
    }

    .hero-with-background .hero-subtitle {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .hero-with-background .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-with-background .btn-large {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-with-background {
        min-height: 610px;
        padding: 70px 14px 42px;
        background-position: 52% center;
    }

    .hero-with-background .hero-text {
        padding: 20px 16px;
    }

    .hero-with-background .hero-title {
        font-size: 28px;
    }

    .hero-with-background .hero-subtitle {
        font-size: 13px;
        line-height: 1.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-with-background,
    .hero-with-background::after,
    .hero-with-background .hero-text {
        animation: none !important;
    }
}

/* ========================================
   PAGE HERO HEADER OFFSET FIX
   Keeps fixed navigation from overlapping
   About / Services / Contact page headings.
   ======================================== */
.page-hero {
    margin-top: 65px;
    min-height: 153px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 24px 36px;
}

.page-hero .container {
    width: 100%;
}

.page-hero h1 {
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.12;
}

.page-hero p {
    margin-bottom: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .page-hero {
        margin-top: 62px;
        min-height: 145px;
        padding: 34px 18px 30px;
    }

    .page-hero h1 {
        line-height: 1.15;
    }
}

@media (max-width: 480px) {
    .page-hero {
        margin-top: 60px;
        min-height: 132px;
        padding: 28px 14px 24px;
    }
}

/* ========================================
   HOMEPAGE CONTENT EXPANSION - PREMIUM
   ======================================== */
.about-snapshot {
    background: #fff;
    padding: 96px 24px;
    position: relative;
}
.about-snapshot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 72px;
    align-items: center;
}
.about-snapshot-media {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 470px;
    box-shadow: 0 28px 70px rgba(11,45,77,.16);
    border: 1px solid rgba(11,45,77,.08);
}
.about-snapshot-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,45,77,0) 50%, rgba(11,45,77,.35) 100%);
    pointer-events: none;
}
.about-snapshot-media img {
    width: 100%;
    height: 100%;
    min-height: 470px;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.about-snapshot-media:hover img { transform: scale(1.035); }
.about-snapshot-badge {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 5px rgba(8,126,139,.1); }
.about-snapshot-content { max-width: 620px; }
.about-snapshot-content h2 { font-size: clamp(36px,4vw,56px); margin-bottom: 20px; letter-spacing: -.035em; }
.about-snapshot-content > p { color: var(--muted); font-size: 17px; line-height: 1.85; }
.about-snapshot-points { display: grid; gap: 13px; margin: 28px 0 30px; }
.about-snapshot-points > div { display:flex; gap:12px; align-items:flex-start; color: var(--text); font-weight: 600; font-size: 14px; }
.check-mark { width: 24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:50%; background:var(--secondary-light); color:var(--secondary); font-size:13px; font-weight:800; }
.text-link { display:inline-flex; gap:10px; align-items:center; color:var(--secondary); font-weight:800; font-size:14px; letter-spacing:.02em; }
.text-link span { transition: transform .25s ease; }
.text-link:hover span { transform: translateX(5px); }

.section-header-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.65fr); gap:50px; align-items:end; text-align:left; }
.section-header-split p { margin:0; max-width:520px; justify-self:end; color:var(--muted); line-height:1.8; }
.home-essentials { background: linear-gradient(180deg,#f5f9fc 0%,#edf6f7 100%); padding:100px 24px; }
.home-essentials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.essential-tile { min-height:170px; padding:25px; background:rgba(255,255,255,.88); border:1px solid rgba(11,45,77,.09); border-radius:22px; display:grid; grid-template-columns:auto 1fr auto; gap:17px; align-items:start; color:inherit; box-shadow:0 10px 35px rgba(11,45,77,.05); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.essential-tile:hover { transform:translateY(-6px); box-shadow:0 22px 45px rgba(11,45,77,.12); border-color:rgba(8,126,139,.32); color:inherit; }
.essential-tile-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; background:var(--secondary-light); color:var(--secondary); font-size:21px; font-weight:800; }
.essential-tile h3 { margin:2px 0 7px; font-size:18px; }
.essential-tile p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.essential-tile > span { color:var(--secondary); font-size:21px; font-weight:800; transition:transform .25s ease; }
.essential-tile:hover > span { transform:translateX(4px); }

.availability-section { background:#fff; padding:90px 24px; }
.availability-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:26px; align-items:center; padding:34px; border-radius:26px; background:linear-gradient(135deg,#0b2d4d 0%,#0c5369 100%); color:#fff; box-shadow:0 24px 55px rgba(11,45,77,.18); position:relative; overflow:hidden; }
.availability-card::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; right:-120px; top:-170px; background:rgba(255,255,255,.07); }
.availability-icon { width:62px; height:62px; border-radius:19px; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; position:relative; z-index:1; }
.availability-copy { position:relative; z-index:1; }
.availability-copy .eyebrow { color:#a9e6e7; margin-bottom:8px; }
.availability-copy h2 { color:#fff; font-size:clamp(24px,3vw,36px); margin-bottom:8px; }
.availability-copy p { color:rgba(255,255,255,.76); margin:0; max-width:760px; font-size:14px; }
.availability-actions { display:flex; gap:10px; position:relative; z-index:1; }
.availability-actions .btn { min-height:48px; }

.faq-section { background:#f5f9fc; padding:100px 24px; }
.faq-grid { max-width:930px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.faq-item { background:#fff; border:1px solid var(--border); border-radius:17px; padding:0 20px; box-shadow:0 6px 22px rgba(11,45,77,.035); transition:border-color .25s ease, box-shadow .25s ease; }
.faq-item[open] { border-color:rgba(8,126,139,.35); box-shadow:0 14px 32px rgba(11,45,77,.07); }
.faq-item summary { list-style:none; cursor:pointer; padding:20px 28px 20px 0; font-weight:800; color:var(--primary); position:relative; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; position:absolute; right:0; top:17px; color:var(--secondary); font-size:23px; font-weight:500; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { margin:0; padding:0 0 20px; color:var(--muted); font-size:14px; line-height:1.75; }

.home-cta { padding:40px 24px 100px; background:#f5f9fc; }
.home-cta-card { min-height:310px; padding:52px 58px; border-radius:30px; background:linear-gradient(115deg,#0b2d4d 0%,#087e8b 100%); display:flex; justify-content:space-between; align-items:center; gap:40px; overflow:hidden; position:relative; box-shadow:0 28px 65px rgba(11,45,77,.18); }
.home-cta-card::before { content:''; position:absolute; width:420px; height:420px; border-radius:50%; right:-160px; top:-230px; border:1px solid rgba(255,255,255,.12); box-shadow:0 0 0 50px rgba(255,255,255,.03),0 0 0 100px rgba(255,255,255,.02); }
.home-cta-card > div:first-child { max-width:700px; position:relative; z-index:1; }
.home-cta-card .eyebrow { color:#b7eff0; }
.home-cta-card h2 { color:#fff; font-size:clamp(32px,4vw,52px); margin-bottom:14px; letter-spacing:-.035em; }
.home-cta-card p { color:rgba(255,255,255,.8); margin:0; font-size:15px; line-height:1.75; }
.home-cta-actions { display:flex; flex-wrap:wrap; gap:12px; position:relative; z-index:1; flex-shrink:0; }
.btn-light { background:#fff; color:var(--primary); border:2px solid #fff; }
.btn-light:hover { background:#edf7f8; color:var(--primary); transform:translateY(-2px); }
.btn-outline-light { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.65); }
.btn-outline-light:hover { background:rgba(255,255,255,.1); color:#fff; border-color:#fff; transform:translateY(-2px); }

/* Keep homepage hero composition premium and readable */
.hero-with-background { min-height:680px; padding:130px 24px 100px; background-position:center center; background-attachment:scroll; }
.hero-with-background .container { width:100%; max-width:1280px; }
.hero-with-background .hero-content { max-width:none; text-align:left; }
.hero-with-background .hero-text { width:min(650px,100%); padding:38px 42px; border:1px solid rgba(255,255,255,.2); border-radius:26px; background:linear-gradient(145deg,rgba(7,31,53,.72),rgba(7,31,53,.42)); box-shadow:0 25px 70px rgba(0,0,0,.22); backdrop-filter:blur(12px); }
.hero-with-background .hero-title { font-size:clamp(46px,5.2vw,72px); letter-spacing:-.045em; margin-bottom:20px; }
.hero-with-background .hero-subtitle { max-width:570px; font-size:16px; line-height:1.8; margin-bottom:30px; }
.hero-with-background .hero-buttons { justify-content:flex-start; }

@media (max-width:1024px) {
  .about-snapshot-grid { gap:40px; }
  .home-essentials-grid { grid-template-columns:repeat(2,1fr); }
  .availability-card { grid-template-columns:auto 1fr; }
  .availability-actions { grid-column:2; }
  .home-cta-card { padding:42px; }
}
@media (max-width:768px) {
  .hero-with-background { min-height:650px; padding:102px 16px 64px; background-position:62% center; }
  .hero-with-background .hero-text { width:100%; padding:28px 24px; border-radius:22px; background:linear-gradient(145deg,rgba(7,31,53,.78),rgba(7,31,53,.52)); }
  .hero-with-background .hero-title { font-size:clamp(38px,10vw,52px); line-height:1.04; }
  .hero-with-background .hero-subtitle { font-size:14px; line-height:1.7; }
  .hero-with-background .hero-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hero-with-background .hero-buttons .btn { width:100%; padding:13px 12px; font-size:12px; }
  .about-snapshot, .home-essentials, .availability-section, .faq-section { padding:70px 18px; }
  .about-snapshot-grid { grid-template-columns:1fr; gap:38px; }
  .about-snapshot-media, .about-snapshot-media img { min-height:320px; }
  .about-snapshot-content h2 { font-size:36px; }
  .section-header-split { grid-template-columns:1fr; gap:14px; }
  .section-header-split p { justify-self:start; }
  .home-essentials-grid, .faq-grid { grid-template-columns:1fr; }
  .availability-card { grid-template-columns:1fr; padding:28px 24px; }
  .availability-actions { grid-column:auto; width:100%; }
  .availability-actions .btn { flex:1; }
  .home-cta { padding:24px 18px 70px; }
  .home-cta-card { padding:36px 26px; flex-direction:column; align-items:flex-start; }
  .home-cta-actions { width:100%; }
  .home-cta-actions .btn { flex:1; }
}
@media (max-width:480px) {
  .hero-with-background { min-height:690px; padding:92px 12px 42px; background-position:64% center; }
  .hero-with-background .hero-text { padding:24px 19px; }
  .hero-with-background .hero-title { font-size:38px; }
  .hero-with-background .hero-buttons { grid-template-columns:1fr; }
  .about-snapshot-media, .about-snapshot-media img { min-height:270px; }
  .about-snapshot-badge { left:14px; bottom:14px; font-size:8px; }
  .essential-tile { min-height:145px; padding:20px; }
  .availability-actions { flex-direction:column; }
  .home-cta-actions { flex-direction:column; }
  .home-cta-actions .btn { width:100%; }
}

/* ========================================
   FOOTER BRANCHES STYLING
   ======================================== */

.footer-column h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    color: var(--accent);
}

.footer-column p {
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.85;
    margin-bottom: 0;
}

.footer-column a {
    color: var(--background);
    text-decoration: none;
    transition: var(--transition-sm);
    opacity: 0.8;
}

.footer-column a:hover {
    color: var(--accent);
    opacity: 1;
}

/* ========================================
   PREMIUM OUR BRANCHES FOOTER SECTION
   ======================================== */

.footer-branches-section {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 40px 0;
}

.branches-section-intro {
    flex: 0 0 28%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.branches-section-heading {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.branches-section-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.9;
    margin: 0;
}

.branches-cards-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.footer-branch-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.footer-branch-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.card-header {
    margin-bottom: 20px;
    padding-bottom: 0;
}

.branch-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent);
    margin-bottom: 6px;
}

.branch-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--background);
    margin: 0;
    line-height: 1.3;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.branch-info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.branch-info-item svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.branch-info-item div {
    flex: 1;
    min-width: 0;
}

.info-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent);
    margin-bottom: 4px;
}

.branch-info-item p {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    word-wrap: break-word;
}

.branch-info-item a {
    font-size: 12px;
    color: var(--background);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.branch-info-item a:hover {
    color: var(--accent);
}

.branches-footer-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 0 0 40px 0;
}

/* ========================================
   FOOTER HORIZONTAL QUICK LINKS
   ======================================== */

.footer-brand-column {
    flex: 0 0 auto;
    min-width: 220px;
}

.footer-logo-img {
    width: auto;
    height: 45px;
    max-width: 180px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
}

.footer-links-column {
    flex: 1;
    min-width: 400px;
}

.footer-links-horizontal {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.footer-links-horizontal a {
    font-size: 13px;
    color: var(--background);
    text-decoration: none;
    transition: var(--transition-sm);
    opacity: 0.9;
    position: relative;
}

.footer-links-horizontal a:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -12px;
    opacity: 0.3;
}

.footer-links-horizontal a:hover {
    color: var(--accent);
    opacity: 1;
}

.footer-hours-column {
    flex: 0 0 auto;
    min-width: 140px;
}

.footer-hours-column h4 {
    margin-bottom: 8px;
}

.footer-hours-column p {
    margin-bottom: 0;
}

.footer-icons-column {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    align-items: center;
}

.footer-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--background);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0;
}

.footer-icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.footer-icon-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
    transform: scale(1.1);
}

.footer-location-btn {
    background: rgba(8, 126, 139, 0.15);
    border-color: var(--secondary);
}

.footer-location-btn:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--primary);
}

.footer-phone {
    font-size: 14px;
    font-weight: 600;
    color: var(--background);
    text-decoration: none;
    transition: var(--transition-sm);
    display: inline-block;
    margin-bottom: 16px;
}

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

.footer-address {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.8;
}

/* Responsive Footer Branches */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .footer-branches-section {
        gap: 40px;
        padding: 32px 0;
    }

    .branches-section-intro {
        flex: 0 0 30%;
    }

    .branches-cards-container {
        gap: 20px;
    }

    .footer-branch-card {
        padding: 20px;
    }

    .branch-title {
        font-size: 14px;
    }

    .card-body {
        gap: 16px;
    }

    .branch-info-item {
        gap: 10px;
    }

    .branch-info-item p,
    .branch-info-item a {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .footer-branches-section {
        flex-direction: column;
        gap: 30px;
        padding: 24px 0;
    }

    .branches-section-intro {
        flex: 1;
        justify-content: center;
    }

    .branches-section-heading {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .branches-section-text {
        font-size: 12px;
    }

    .branches-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .footer-branch-card {
        padding: 18px;
    }

    .card-header {
        margin-bottom: 16px;
    }

    .branch-label {
        font-size: 9px;
        margin-bottom: 4px;
    }

    .branch-title {
        font-size: 13px;
    }

    .card-body {
        gap: 14px;
    }

    .branch-info-item svg {
        width: 14px;
        height: 14px;
    }

    .info-label {
        font-size: 9px;
        margin-bottom: 3px;
    }

    .branch-info-item p,
    .branch-info-item a {
        font-size: 11px;
        line-height: 1.4;
    }

    .branches-footer-divider {
        margin: 0 0 32px 0;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .footer-brand-column,
    .footer-links-column,
    .footer-hours-column,
    .footer-icons-column {
        width: 100%;
    }

    .footer-logo-img {
        height: 40px;
        max-width: 160px;
    }

    .footer-links-horizontal {
        flex-direction: column;
        gap: 12px;
    }

    .footer-links-horizontal a:not(:last-child)::after {
        display: none;
    }

    .footer-icons-column {
        flex-direction: row;
        justify-content: flex-start;
    }

    .footer-branches-section {
        flex-direction: column;
        gap: 24px;
        padding: 20px 0;
        margin-bottom: 24px;
    }

    .branches-section-intro {
        flex: 1;
    }

    .branches-section-heading {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .branches-section-text {
        font-size: 11px;
        line-height: 1.5;
    }

    .branches-cards-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer-branch-card {
        padding: 16px;
    }

    .card-header {
        margin-bottom: 14px;
    }

    .branch-label {
        font-size: 8px;
        margin-bottom: 3px;
    }

    .branch-title {
        font-size: 12px;
        margin: 0;
    }

    .card-body {
        gap: 12px;
    }

    .branch-info-item {
        gap: 10px;
    }

    .branch-info-item svg {
        width: 14px;
        height: 14px;
        margin-top: 1px;
    }

    .info-label {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .branch-info-item p,
    .branch-info-item a {
        font-size: 10px;
        line-height: 1.4;
    }

    .branches-footer-divider {
        margin: 0 0 24px 0;
    }

    .footer-column h4 {
        margin-bottom: 12px;
        font-size: 12px;
    }
}


/* =========================================================
   FINAL PREMIUM POLISH — NON-DESTRUCTIVE ENHANCEMENT LAYER
   Visual-only enhancements. Existing content/assets preserved.
   ========================================================= */

:root {
    --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --premium-fast: 220ms var(--premium-ease);
    --premium-med: 420ms var(--premium-ease);
    --premium-border: rgba(11, 45, 77, 0.10);
    --premium-surface: rgba(255,255,255,0.82);
}

/* Top scroll progress */
#premium-scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    width: 0;
    z-index: 99999;
    pointer-events: none;
    background: var(--secondary, #087E8B);
    transform-origin: left center;
    box-shadow: 0 0 10px rgba(8,126,139,.18);
}

/* Refined sticky navigation state */
.header,
.navbar,
header {
    transition:
        background-color var(--premium-med),
        box-shadow var(--premium-med),
        border-color var(--premium-med),
        backdrop-filter var(--premium-med),
        transform var(--premium-med);
}

body.premium-scrolled .header,
body.premium-scrolled .navbar,
body.premium-scrolled header {
    box-shadow: 0 10px 30px rgba(11,45,77,.08);
    border-bottom-color: rgba(11,45,77,.10);
}

/* Navigation micro-interactions */
.nav-link,
.mobile-nav-link,
.footer-links-horizontal a,
.footer-column a {
    position: relative;
    transition:
        color var(--premium-fast),
        opacity var(--premium-fast),
        transform var(--premium-fast);
}

.nav-link::after,
.footer-links-horizontal a::after,
.footer-column a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -5px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transition: right 300ms var(--premium-ease);
}

.nav-link:hover::after,
.nav-link.active::after,
.footer-links-horizontal a:hover::after,
.footer-column a:hover::after {
    right: 0;
}

/* Universal premium surface treatment */
.service-card,
.product-card,
.why-choose-card,
.essential-card,
.essential-tile,
.branch-card,
.footer-branch-card,
.mission-card,
.about-point,
.trust-item,
.availability-card,
.home-cta-card,
.category-contact,
.category-view,
.contact-form {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--premium-border);
    transition:
        transform var(--premium-med),
        box-shadow var(--premium-med),
        border-color var(--premium-med),
        background-color var(--premium-med);
    will-change: transform;
}

/* Ambient card highlight */
.service-card::before,
.product-card::before,
.why-choose-card::before,
.essential-card::before,
.essential-tile::before,
.branch-card::before,
.footer-branch-card::before,
.mission-card::before,
.about-point::before,
.trust-item::before,
.availability-card::before,
.home-cta-card::before,
.category-contact::before,
.category-view::before,
.contact-form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 0%),
            rgba(255,255,255,.42) 0,
            rgba(255,255,255,0) 38%);
    opacity: 0;
    transition: opacity var(--premium-med);
}

/* Premium lift — intentionally restrained */
.service-card:hover,
.product-card:hover,
.why-choose-card:hover,
.essential-card:hover,
.essential-tile:hover,
.branch-card:hover,
.footer-branch-card:hover,
.mission-card:hover,
.about-point:hover,
.trust-item:hover,
.availability-card:hover,
.home-cta-card:hover,
.category-contact:hover,
.category-view:hover,
.contact-form:hover {
    transform: translateY(-6px);
    box-shadow:
        0 18px 42px rgba(11,45,77,.11),
        0 3px 10px rgba(11,45,77,.05);
    border-color: rgba(8,126,139,.20);
}

.service-card:hover::before,
.product-card:hover::before,
.why-choose-card:hover::before,
.essential-card:hover::before,
.essential-tile:hover::before,
.branch-card:hover::before,
.footer-branch-card:hover::before,
.mission-card:hover::before,
.about-point:hover::before,
.trust-item:hover::before,
.availability-card:hover::before,
.home-cta-card:hover::before,
.category-contact:hover::before,
.category-view:hover::before,
.contact-form:hover::before {
    opacity: 1;
}

/* Card media depth without changing crop/aspect ratio */
.service-card img,
.product-card img,
.essential-card img,
.essential-tile img,
.about-image img,
.about-img {
    transition: transform 700ms var(--premium-ease), filter 700ms var(--premium-ease);
    transform-origin: center center;
}

.service-card:hover img,
.product-card:hover img,
.essential-card:hover img,
.essential-tile:hover img,
.about-image:hover img,
.about-img:hover {
    transform: scale(1.025);
}

/* Diagonal light sweep, only on interactive cards */
.premium-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.premium-shine::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -75%;
    width: 42%;
    height: 160%;
    transform: rotate(18deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.20),
        transparent
    );
    opacity: 0;
}

.card-shine-active .premium-shine::after {
    opacity: 1;
    animation: premium-shine-sweep 850ms var(--premium-ease) 1;
}

@keyframes premium-shine-sweep {
    from { left: -75%; }
    to { left: 135%; }
}

/* Hero depth */
.hero,
.hero-with-background {
    isolation: isolate;
    overflow: clip;
}

.hero-background-image {
    transform: scale(1.002);
    transform-origin: center center;
    transition: transform 1.2s var(--premium-ease), filter 800ms ease;
    will-change: transform;
}

.hero-content > * {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-content-in 700ms var(--premium-ease) forwards;
}

.hero-content > :nth-child(1) { animation-delay: 120ms; }
.hero-content > :nth-child(2) { animation-delay: 210ms; }
.hero-content > :nth-child(3) { animation-delay: 300ms; }
.hero-content > :nth-child(4) { animation-delay: 390ms; }
.hero-content > :nth-child(5) { animation-delay: 470ms; }

@keyframes hero-content-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons: premium tactile response */
.btn {
    transition:
        transform var(--premium-fast),
        box-shadow var(--premium-fast),
        background-color var(--premium-fast),
        border-color var(--premium-fast),
        color var(--premium-fast);
    will-change: transform;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(11,45,77,.13);
}

.btn:active {
    transform: translateY(0) scale(.985);
}

.btn svg,
.btn i {
    transition: transform var(--premium-fast);
}

.btn:hover svg,
.btn:hover i {
    transform: translateX(4px);
}

.btn-call-header:hover svg,
.btn-call-header:hover i,
.fab-call:hover svg,
.fab-call:hover i {
    transform: translateY(-1px) scale(1.05);
}

/* Section reveal states */
.premium-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 700ms var(--premium-ease),
        transform 700ms var(--premium-ease);
}

.premium-reveal.premium-visible {
    opacity: 1;
    transform: translateY(0);
}

.premium-reveal[data-reveal="left"] {
    transform: translateX(-28px);
}
.premium-reveal[data-reveal="right"] {
    transform: translateX(28px);
}
.premium-reveal[data-reveal="scale"] {
    transform: scale(.965);
}
.premium-reveal.premium-visible[data-reveal="left"],
.premium-reveal.premium-visible[data-reveal="right"] {
    transform: translateX(0);
}
.premium-reveal.premium-visible[data-reveal="scale"] {
    transform: scale(1);
}

/* Staggered grid children */
.premium-stagger > * {
    --stagger-index: 0;
    transition-delay: calc(var(--stagger-index) * 70ms);
}

/* Modal polish without changing content */
.call-modal {
    transition: opacity 260ms var(--premium-ease), visibility 260ms var(--premium-ease);
}
.call-modal .call-modal-content {
    transition: transform 320ms var(--premium-ease), opacity 320ms var(--premium-ease);
}

/* Image loading polish — only when explicitly marked by JS */
img.premium-image-loading {
    opacity: .78;
    filter: blur(5px);
    transition: opacity 450ms ease, filter 600ms ease;
}
img.premium-image-loaded {
    opacity: 1;
    filter: blur(0);
}

/* Focus accessibility */
:where(a, button, input, textarea, select):focus-visible {
    outline: 2px solid rgba(8,126,139,.55);
    outline-offset: 3px;
}

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

/* Touch/mobile: preserve usability and avoid hover-only transforms */
@media (hover: none), (max-width: 768px) {
    .service-card:hover,
    .product-card:hover,
    .why-choose-card:hover,
    .essential-card:hover,
    .essential-tile:hover,
    .branch-card:hover,
    .footer-branch-card:hover,
    .mission-card:hover,
    .about-point:hover,
    .trust-item:hover,
    .availability-card:hover,
    .home-cta-card:hover,
    .category-contact:hover,
    .category-view:hover,
    .contact-form:hover {
        transform: none;
        box-shadow: inherit;
    }

    .btn:hover {
        transform: none;
        box-shadow: inherit;
    }

    .premium-reveal {
        transform: translateY(16px);
        transition-duration: 520ms;
    }

    .hero-background-image {
        transform: none;
    }
}

@media (max-width: 480px) {
    #premium-scroll-progress { height: 2px; }
}

/* =========================================================
   REFERENCE-MATCHED 3D INTERACTION SYSTEM
   ========================================================= */

.premium-tilt-card {
    perspective: 1000px;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition:
        transform 420ms var(--premium-ease),
        box-shadow 420ms var(--premium-ease),
        border-color 420ms var(--premium-ease);
}

.premium-tilt-card.is-tilting {
    transform:
        perspective(1000px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg))
        translate3d(0, calc(var(--tilt-lift, 0px) * -1), 0)
        scale(var(--tilt-scale, 1));
    box-shadow:
        0 22px 46px rgba(11, 45, 77, 0.13),
        0 5px 14px rgba(11, 45, 77, 0.06);
}

.premium-tilt-media {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 420ms var(--premium-ease), filter 420ms var(--premium-ease);
    will-change: transform;
}

.premium-tilt-card.is-tilting .premium-tilt-media {
    transform:
        translate3d(var(--tilt-media-x, 0px), var(--tilt-media-y, 0px), 8px)
        scale(1.025) !important;
}

.premium-tilt-card:not(.is-tilting) .premium-tilt-media {
    transform: translate3d(0, 0, 0) scale(1) !important;
}

/* =========================================================
   HOME BRANCH CARDS — EXACT CURSOR TILT INCLUDING MAP AREA
   The Google Maps iframe is a separate browsing context and normally
   captures pointer movement before it can reach the card. For the home
   page visual interaction, let the parent card receive pointer movement
   across the full map surface so Branch 01 and Branch 02 have identical
   cursor-following tilt behavior. The map remains visually unchanged.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
    .branches-grid .branch-card .branch-map iframe {
        pointer-events: none;
    }

    .branches-grid .branch-card .branch-map img {
        pointer-events: none;
    }

    .branches-grid .branch-card .branch-map {
        cursor: default;
    }
}

/* =========================================================
   HOME BRANCH CARDS — CONSISTENT REFERENCE EFFECTS
   Both Branch 01 and Branch 02 intentionally share the same
   premium interaction treatment. CSS hover remains active over
   embedded Google Maps, while JS tilt handles normal card areas.
   ========================================================= */
.branches-grid .branch-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transform-origin: center center;
}

.branches-grid .branch-card .branch-header,
.branches-grid .branch-card .branch-map,
.branches-grid .branch-card .branch-content {
    transform-style: preserve-3d;
}

/* Reliable fallback while the cursor is over the embedded map iframe.
   Both branch cards use the exact same hover lift, so Branch 02 never loses
   the Branch 01 interaction language even when the iframe captures the pointer. */
@media (hover: hover) and (pointer: fine) {
    .branches-grid .branch-card:hover {
        box-shadow:
            0 22px 46px rgba(11,45,77,.13),
            0 5px 14px rgba(11,45,77,.06);
    }

    .branches-grid .branch-card:hover .branch-map {
        box-shadow: inset 0 0 0 1px rgba(8,126,139,.08);
    }
}

/* Shared Home Page branch hover baseline. JS adds the cursor-following tilt
   on top of this same interaction for both Branch 01 and Branch 02. */
@media (hover: hover) and (pointer: fine) {
    .branches-grid .branch-card:not(.is-tilting):hover {
        transform: translateY(-6px) scale(1.01);
    }
}

/* Ensure branch buttons are always clickable and above any decorative overlays */
.branch-buttons {
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.branch-buttons a,
.branch-buttons button {
    position: relative;
    z-index: 21;
    pointer-events: auto;
    cursor: pointer;
}

/* Selected cards get the deeper floating treatment shown in the reference. */
.availability-card,
.home-cta-card,
.mission-card {
    transform-style: preserve-3d;
}

/* Hero image reveal: same visual sequence as the reference, without altering the image. */
.hero-background-image {
    opacity: 0;
    animation: premium-hero-image-reveal 900ms var(--premium-ease) 60ms forwards;
}

@keyframes premium-hero-image-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* More exact reference-style stagger rhythm. */
.premium-stagger > * {
    transition-delay: calc(var(--stagger-index, 0) * 80ms);
}

/* Keep the shine soft and premium. */
.premium-shine::after {
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 42%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.08) 58%,
        transparent 100%
    );
}

/* Reference-style button depth. */
.hero-buttons .btn,
.home-cta-actions .btn,
.btn-call-header {
    transform-style: preserve-3d;
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .premium-tilt-card,
    .premium-tilt-card.is-tilting {
        transform: none !important;
        perspective: none;
    }

    .premium-tilt-media,
    .premium-tilt-card.is-tilting .premium-tilt-media {
        transform: none !important;
    }

    .hero-background-image {
        animation-duration: 650ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background-image {
        opacity: 1 !important;
        animation: none !important;
    }

    .premium-tilt-card,
    .premium-tilt-card.is-tilting,
    .premium-tilt-media,
    .premium-tilt-card.is-tilting .premium-tilt-media {
        transform: none !important;
    }
}

/* FINAL BRANCH INTERACTION FIX — identical movement for both cards, while
   keeping branch text sharp. The card still follows the cursor, but its
   readable content is kept screen-facing to avoid 3D text rasterization blur. */
@media (hover: hover) and (pointer: fine) {
    .branches-grid .branch-card {
        transform-style: preserve-3d;
        perspective: 1000px;
        transition:
            transform 420ms var(--premium-ease),
            box-shadow 420ms var(--premium-ease),
            border-color 420ms var(--premium-ease);
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
    }

    .branches-grid .branch-card.is-tilting {
        transform:
            perspective(1000px)
            rotateX(var(--tilt-x, 0deg))
            rotateY(var(--tilt-y, 0deg))
            translate3d(0, calc(var(--tilt-lift, 0px) * -1), 0)
            scale(var(--tilt-scale, 1)) !important;
    }

    /* Keep readable branch information visually front-facing during the
       parent's 3D movement. This prevents headings/body copy from becoming
       soft while preserving the card's exact cursor movement. */
    .branches-grid .branch-card.is-tilting .branch-header,
    .branches-grid .branch-card.is-tilting .branch-content {
        transform:
            rotateX(calc(var(--tilt-x, 0deg) * -1))
            rotateY(calc(var(--tilt-y, 0deg) * -1))
            translateZ(1px);
        transform-style: preserve-3d;
        backface-visibility: visible;
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
    }

    .branches-grid .branch-card .branch-map iframe {
        pointer-events: none !important;
    }
}

/* FINAL SHARPNESS FIX — Home Page branch cards must remain raster-sharp at rest.
   The generic section-reveal transform creates a composited layer on the whole
   card, which can soften text even after the reveal has completed. Branch cards
   use opacity-only reveal so their normal text stays crisp. Hover tilt remains
   handled by the existing CardTilt interaction above. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
    .home-page .branches-grid > .branch-card.premium-reveal,
    .branches-grid > .branch-card.premium-reveal {
        transform: none !important;
        transition: opacity 700ms var(--premium-ease),
                    box-shadow 420ms var(--premium-ease),
                    border-color 420ms var(--premium-ease);
        opacity: 0;
    }

    .home-page .branches-grid > .branch-card.premium-reveal.premium-visible,
    .branches-grid > .branch-card.premium-reveal.premium-visible {
        transform: none !important;
        opacity: 1;
    }
}

/* Preserve the exact cursor tilt when a branch card enters its hover state. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
    .branches-grid > .branch-card.premium-reveal.premium-visible.is-tilting {
        transform:
            perspective(1000px)
            rotateX(var(--tilt-x, 0deg))
            rotateY(var(--tilt-y, 0deg))
            translate3d(0, calc(var(--tilt-lift, 0px) * -1), 0)
            scale(var(--tilt-scale, 1)) !important;
        opacity: 1 !important;
    }
}