/* ==========================================================================
   We2 Solutions India — Design Tokens + Stylesheet
   Single source of truth: every visual value lives in :root.
   ========================================================================== */

/* ===== DESIGN TOKENS ===== */
:root {
    /* --- Color: Brand --- */
    --color-primary:          #1a2d42;
    --color-primary-light:    #2c4a6e;
    --color-primary-dark:     #0f1b2d;
    --color-accent:           #c8975c;
    --color-accent-hover:     #b5844a;
    --color-accent-light:     #e8d5b8;
    --color-accent-text:      #9a6f38; /* AA on white: 4.56:1 */

    /* --- Color: Neutral --- */
    --color-neutral-50:       #f7f8fa;
    --color-neutral-100:      #f0f1f3;
    --color-neutral-200:      #e8e8e8;
    --color-neutral-300:      #d1d5db;
    --color-neutral-400:      #9ca3af;
    --color-neutral-500:      #6b7280;
    --color-neutral-600:      #4a4a4a;
    --color-neutral-700:      #374151;
    --color-neutral-800:      #1f2937;
    --color-neutral-900:      #111111;

    /* --- Color: Semantic --- */
    --color-success:          #16a34a;
    --color-warning:          #ca8a04;
    --color-error:            #dc2626;
    --color-info:             #2563eb;

    /* --- Color: Background --- */
    --color-bg-page:          #ffffff;
    --color-bg-surface:       var(--color-neutral-50);
    --color-bg-elevated:      #ffffff;

    /* --- Color: Text --- */
    --color-text-primary:     var(--color-neutral-900);
    --color-text-secondary:   var(--color-neutral-600);
    --color-text-muted:       var(--color-neutral-500);
    --color-text-disabled:    var(--color-neutral-400);
    --color-text-inverse:     #ffffff;

    /* --- Color: Border --- */
    --color-border:           var(--color-neutral-200);
    --color-border-light:     var(--color-neutral-100);

    /* --- Color: Overlay (pre-computed alpha variants) --- */
    --color-overlay-dark:     rgba(15, 27, 45, 0.85);
    --color-overlay-medium:   rgba(15, 27, 45, 0.50);
    --color-overlay-light:    rgba(15, 27, 45, 0.30);
    --color-overlay-banner:   rgba(26, 45, 66, 0.88);
    --color-overlay-gallery:  rgba(26, 45, 66, 0.75);
    --color-overlay-card:     rgba(0, 0, 0, 0.70);
    --color-overlay-card-mid: rgba(0, 0, 0, 0.10);
    --color-overlay-black:    rgba(0, 0, 0, 0.06);
    --color-overlay-shadow:   rgba(0, 0, 0, 0.08);
    --color-overlay-shadow-lg:rgba(0, 0, 0, 0.10);

    /* --- Color: Inverse text (footer / dark bg) --- */
    --color-inverse-strong:   rgba(255, 255, 255, 0.85);
    --color-inverse-body:     rgba(255, 255, 255, 0.70);
    --color-inverse-muted:    rgba(255, 255, 255, 0.55);
    --color-inverse-border:   rgba(255, 255, 255, 0.12);

    /* --- Typography: Families --- */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* --- Typography: Scale --- */
    --font-size-display:  3.5rem;   /* 56px - hero */
    --font-size-h1:       3rem;     /* 48px - page titles */
    --font-size-h2:       2.5rem;   /* 40px - section titles */
    --font-size-h3:       1.6rem;   /* 25.6px */
    --font-size-h4:       1.15rem;  /* 18.4px */
    --font-size-lead:     1.1rem;   /* 17.6px - lead/intro text */
    --font-size-body-lg:  1.05rem;  /* 16.8px - hero/cta body text */
    --font-size-body:     0.9375rem;/* 15px */
    --font-size-small:    0.875rem; /* 14px */
    --font-size-caption:  0.8rem;   /* 12.8px */
    --font-size-label:    0.75rem;  /* 12px */
    --font-size-micro:    0.65rem;  /* 10.4px - dropdown caret, fine print */
    --font-size-quote:    1.25rem;  /* 20px - blockquote text */

    /* --- Typography: Weights --- */
    --font-weight-regular:  400;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-black:    800;

    /* --- Typography: Line Heights --- */
    --line-height-none:     1;
    --line-height-tight:    1.15;
    --line-height-snug:     1.3;
    --line-height-normal:   1.75;
    --line-height-relaxed:  1.8;
    --line-height-loose:    1.9;

    /* --- Spacing Scale (4px base) --- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   28px;
    --space-8:   32px;
    --space-9:   36px;
    --space-10:  40px;
    --space-12:  48px;
    --space-14:  56px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-25: 100px;

    /* --- Shape: Radius --- */
    --radius-none:  0;
    --radius-sm:    3px;
    --radius-md:    5px;
    --radius-lg:    8px;
    --radius-full:  50%;

    /* --- Shape: Shadows --- */
    --shadow-none:  none;
    --shadow-sm:    0 2px 15px var(--color-overlay-black);
    --shadow-md:    0 2px 20px var(--color-overlay-black);
    --shadow-lg:    0 10px 35px var(--color-overlay-shadow-lg);
    --shadow-xl:    0 15px 40px var(--color-overlay-shadow);
    --shadow-nav:   0 10px 40px var(--color-overlay-shadow-lg);

    /* --- Shape: Z-Index --- */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     1020;
    --z-modal:      1060;
    --z-toast:      1080;

    /* --- Motion --- */
    --duration-fast:  150ms;
    --duration-base:  250ms;
    --duration-slow:  400ms;
    --duration-slower: 500ms;
    --duration-slowest: 600ms;
    --ease-default:   ease;
    --ease-in-out:    ease-in-out;
    --ease-out:       ease-out;

    /* --- Layout --- */
    --container-max:  1140px;
    --section-padding: var(--space-25);
}


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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    font-size: var(--font-size-body);
    overflow-x: hidden;
    background: var(--color-bg-page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
}

p { margin-bottom: var(--space-4); }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-default);
}

a:hover { color: var(--color-accent-hover); }

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


/* ==========================================================================
   SHARED UTILITIES
   ========================================================================== */
.section-padding { padding: var(--section-padding) 0; }

.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.section-subtitle {
    display: inline-block;
    color: var(--color-accent-text);
    font-size: var(--font-size-label);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
}

.section-title {
    font-size: var(--font-size-h2);
    margin-bottom: 0;
    color: var(--color-text-primary);
}

.section-divider {
    width: var(--space-12);
    height: 2px;
    background: var(--color-accent);
    margin: var(--space-5) auto 0;
}

.section-divider-left {
    width: var(--space-12);
    height: 2px;
    background: var(--color-accent);
    margin: var(--space-5) 0 0;
}

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


/* ==========================================================================
   TOP BAR
   ========================================================================== */
.top-bar {
    background: var(--color-primary-dark);
    padding: var(--space-2) 0;
    font-size: var(--font-size-caption);
    color: var(--color-inverse-body);
    border-bottom: 1px solid var(--color-inverse-border);
}

.top-bar a {
    color: var(--color-inverse-body);
    transition: color var(--duration-base);
}

.top-bar a:hover { color: var(--color-accent); }

.top-bar .top-bar-icon { color: var(--color-accent); }


/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
    padding: 0;
    background: var(--color-bg-page);
    transition: all var(--duration-base) var(--ease-default);
    min-height: 75px;
}

.navbar.shadow-sm {
    box-shadow: var(--shadow-md) !important;
}

.navbar-brand {
    padding: var(--space-3) 0;
}

.navbar-brand img {
    height: var(--space-12);
    transition: height var(--duration-base) var(--ease-default);
}

.navbar .nav-link {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-caption);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: var(--space-7) var(--space-4) !important;
    position: relative;
    transition: color var(--duration-base);
}

.navbar .nav-link:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-4);
    right: var(--space-4);
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--duration-base) var(--ease-default);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--color-accent);
}

.navbar .nav-link:not(.dropdown-toggle):hover::after,
.navbar .nav-link:not(.dropdown-toggle).active::after {
    transform: scaleX(1);
}

.navbar .nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.navbar .dropdown-toggle::after {
    margin-left: var(--space-2);
    vertical-align: 2px;
    border-top-width: 5px;
    border-right-width: 5px;
    border-left-width: 5px;
}

.navbar .dropdown-menu {
    border: none;
    box-shadow: var(--shadow-nav);
    border-radius: var(--radius-none);
    padding: var(--space-3) 0;
    margin-top: 0;
    border-top: 2px solid var(--color-accent);
    min-width: 220px;
}

.navbar .dropdown-item {
    font-size: var(--font-size-caption);
    padding: var(--space-3) var(--space-6);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1px;
    color: var(--color-text-secondary);
    transition: all var(--duration-fast);
}

.navbar .dropdown-item:hover {
    background: var(--color-bg-surface);
    color: var(--color-accent);
    padding-left: var(--space-8);
}

.navbar .dropdown-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.nav-cta { margin-left: var(--space-3); }

.nav-cta .nav-link {
    background: var(--color-accent) !important;
    color: var(--color-text-inverse) !important;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-6) !important;
    margin: var(--space-5) 0;
    font-size: var(--font-size-label) !important;
    letter-spacing: 2px !important;
}

.nav-cta .nav-link::after { display: none; }

.nav-cta .nav-link:hover {
    background: var(--color-accent-hover) !important;
}

.nav-cta .nav-link:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
}


/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero-slider { position: relative; }

.hero-slider .carousel-item {
    height: 90vh;
    min-height: 550px;
    max-height: 800px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-slider .carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--color-overlay-dark) 0%,
        var(--color-overlay-dark) 35%,
        var(--color-overlay-medium) 65%,
        var(--color-overlay-light) 100%
    );
}

.hero-slider .carousel-caption {
    position: absolute;
    bottom: auto;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: left;
    padding: 0 var(--space-4);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.hero-slider .carousel-caption .caption-inner {
    max-width: 550px;
}

.hero-slider .carousel-caption .slide-subtitle {
    display: inline-block;
    color: var(--color-accent);
    font-size: var(--font-size-label);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-accent);
}

.hero-slider .carousel-caption h1 {
    font-size: var(--font-size-display);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-6);
}

.hero-slider .carousel-caption p {
    font-size: var(--font-size-body-lg);
    color: var(--color-inverse-body);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-9);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.hero-slider .carousel-indicators {
    bottom: var(--space-10);
    justify-content: flex-start;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-4);
}

.hero-slider .carousel-indicators button {
    width: var(--space-10);
    height: var(--space-1);
    border: none;
    opacity: 0.3;
    background: var(--color-text-inverse);
    transition: all var(--duration-base);
}

.hero-slider .carousel-indicators button.active {
    opacity: 1;
    background: var(--color-accent);
    width: var(--space-16);
}

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next { display: none; }


/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary-custom {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-accent);
    padding: var(--space-3) var(--space-10);
    border-radius: var(--radius-none);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--font-size-label);
    transition: all var(--duration-base) var(--ease-default);
    cursor: pointer;
}

.btn-primary-custom:hover {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary-custom:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: var(--space-1);
}

.btn-primary-custom:disabled,
.btn-primary-custom[disabled] {
    background: var(--color-neutral-300);
    border-color: var(--color-neutral-300);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    transform: none;
}

.btn-outline-custom {
    display: inline-block;
    background: transparent;
    color: var(--color-text-inverse);
    border: 2px solid var(--color-text-inverse);
    padding: var(--space-3) var(--space-10);
    border-radius: var(--radius-none);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--font-size-label);
    transition: all var(--duration-base) var(--ease-default);
    cursor: pointer;
}

.btn-outline-custom:hover {
    background: var(--color-text-inverse);
    color: var(--color-text-primary);
}

.btn-outline-custom:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: var(--space-1);
}


/* ==========================================================================
   STATS BAR
   ========================================================================== */
.stats-bar {
    background: var(--color-primary);
    padding: var(--space-12) 0;
}

.stat-item {
    text-align: center;
    padding: var(--space-5);
}

.stat-item .stat-number {
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    line-height: var(--line-height-none);
    margin-bottom: var(--space-2);
}

.stat-item .stat-label {
    color: var(--color-inverse-body);
    font-size: var(--font-size-caption);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   ABOUT HOME SECTION
   ========================================================================== */
.about-home .about-image {
    position: relative;
    overflow: hidden;
}

.about-home .about-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.about-home .about-image::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--space-8));
    right: calc(-1 * var(--space-8));
    width: 200px;
    height: 200px;
    border: var(--space-4) solid var(--color-accent-light);
    opacity: 0.3;
}

.about-home .about-text {
    padding-left: var(--space-10);
}

.about-home .about-text .lead {
    font-size: var(--font-size-lead);
    color: var(--color-text-secondary);
    line-height: var(--line-height-loose);
    border-left: var(--space-1) solid var(--color-accent);
    padding-left: var(--space-5);
    margin-bottom: var(--space-6);
}


/* ==========================================================================
   CATEGORY CARDS
   ========================================================================== */
.category-card {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-8);
}

.category-card a {
    display: block;
    position: relative;
    text-decoration: none;
}

.category-card a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: var(--space-1);
}

.category-card img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slowest) var(--ease-default);
}

.category-card:hover img {
    transform: scale(1.08);
}

.category-card .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--color-overlay-card) 0%,
        var(--color-overlay-card-mid) 50%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-9);
    pointer-events: none;
    z-index: var(--z-base);
}

.category-card .card-overlay h3 {
    color: var(--color-text-inverse);
    font-size: var(--font-size-h3);
    margin-bottom: var(--space-2);
    transform: translateY(var(--space-3));
    transition: transform var(--duration-slow) var(--ease-default);
}

.category-card .card-overlay .card-link {
    color: var(--color-accent);
    font-size: var(--font-size-label);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: var(--font-weight-bold);
    opacity: 0;
    transform: translateY(var(--space-3));
    transition: all var(--duration-slow) var(--ease-default) var(--duration-fast);
}

.category-card:hover .card-overlay h3 {
    transform: translateY(0);
}

.category-card:hover .card-overlay .card-link {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   FEATURE BOXES
   ========================================================================== */
.feature-box {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    transition: all var(--duration-base) var(--ease-default);
    height: 100%;
    position: relative;
}

.feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-1);
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--duration-base) var(--ease-default);
}

.feature-box:hover {
    border-color: transparent;
    box-shadow: var(--shadow-xl);
}

.feature-box:hover::before { transform: scaleX(1); }

.feature-box .icon {
    width: var(--space-20);
    height: var(--space-20);
    border: 2px solid var(--color-accent-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    font-size: var(--font-size-h3);
    color: var(--color-accent);
    transition: all var(--duration-base) var(--ease-default);
}

.feature-box:hover .icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.feature-box h4 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-3);
}

.feature-box p {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-bottom: 0;
}


/* ==========================================================================
   PAGE BANNER
   ========================================================================== */
.page-banner {
    min-height: 320px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--color-overlay-banner) 0%,
        var(--color-overlay-gallery) 100%
    );
}

.page-banner .banner-content {
    position: relative;
    z-index: var(--z-base);
    text-align: center;
}

.page-banner h1 {
    color: var(--color-text-inverse);
    font-size: var(--font-size-h1);
    margin-bottom: var(--space-1);
}

.page-banner .breadcrumb {
    background: none;
    justify-content: center;
    margin-bottom: 0;
    padding: 0;
}

.page-banner .breadcrumb-item {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.page-banner .breadcrumb-item a {
    color: var(--color-inverse-body);
}

.page-banner .breadcrumb-item a:hover {
    color: var(--color-accent);
}

.page-banner .breadcrumb-item a:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
}

.page-banner .breadcrumb-item.active {
    color: var(--color-accent);
}

.page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-inverse-muted);
    content: '/';
}


/* ==========================================================================
   ABOUT CARDS
   ========================================================================== */
.about-card {
    background: var(--color-bg-elevated);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-8);
    transition: all var(--duration-base) var(--ease-default);
    height: 100%;
    border: 1px solid var(--color-border);
}

.about-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(-1 * var(--space-1)));
}

.about-card .card-img-wrapper { overflow: hidden; }

.about-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform var(--duration-slower) var(--ease-default);
}

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

.about-card .card-body { padding: var(--space-7); }

.about-card h4 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-3);
    color: var(--color-primary);
}

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


/* ==========================================================================
   TEAM CARDS
   ========================================================================== */
.team-card {
    background: var(--color-bg-elevated);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: all var(--duration-base) var(--ease-default);
    height: 100%;
}

.team-card:hover { box-shadow: var(--shadow-lg); }

.team-card .team-photo {
    text-align: center;
    padding: var(--space-10) var(--space-10) var(--space-5);
}

.team-card .team-photo img {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: var(--space-1) solid var(--color-accent-light);
}

.team-card .team-info {
    text-align: center;
    padding: 0 var(--space-8) var(--space-8);
}

.team-card h4 {
    font-size: var(--font-size-h3);
    margin-bottom: var(--space-1);
}

.team-card .role {
    display: inline-block;
    color: var(--color-accent-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-label);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-4);
}

.team-card .bio {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    text-align: left;
}


/* ==========================================================================
   VISION SECTION
   ========================================================================== */
.vision-section {
    background: var(--color-primary);
    padding: var(--space-20) 0;
    position: relative;
    overflow: hidden;
}

.vision-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    border: var(--space-16) solid var(--color-inverse-border);
    border-radius: var(--radius-full);
}

.vision-section .section-subtitle { color: var(--color-accent); }
.vision-section .section-title   { color: var(--color-text-inverse); }
.vision-section .section-divider { background: var(--color-accent); }

.vision-section .vision-icon {
    font-size: var(--font-size-h2);
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.vision-section blockquote p {
    color: var(--color-inverse-strong);
    font-size: var(--font-size-quote);
    font-style: italic;
    max-width: 750px;
    margin: var(--space-8) auto 0;
    line-height: var(--line-height-relaxed);
}


/* ==========================================================================
   GALLERY / COLLECTION
   ========================================================================== */
.collection-filter {
    text-align: center;
    margin-bottom: var(--space-12);
}

.collection-filter .btn {
    padding: var(--space-3) var(--space-8);
    margin: var(--space-1);
    border-radius: var(--radius-none);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--font-size-label);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    transition: all var(--duration-base) var(--ease-default);
}

.collection-filter .btn:hover,
.collection-filter .btn.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.collection-filter .btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: var(--space-1);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slower) var(--ease-default);
}

.gallery-item:hover img { transform: scale(1.1); }

.gallery-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.gallery-item .overlay {
    position: absolute;
    inset: 0;
    background: var(--color-overlay-gallery);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-default);
}

.gallery-item:hover .overlay { opacity: 1; }

.gallery-item .overlay i {
    font-size: var(--font-size-h3);
    color: var(--color-text-inverse);
    transform: scale(0.7);
    transition: transform var(--duration-base) var(--ease-default);
}

.gallery-item:hover .overlay i { transform: scale(1); }


/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-info-card {
    text-align: center;
    padding: var(--space-10) var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    height: 100%;
    transition: all var(--duration-base) var(--ease-default);
    position: relative;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-1);
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--duration-base) var(--ease-default);
}

.contact-info-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

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

.contact-info-card .icon {
    width: var(--space-16);
    height: var(--space-16);
    background: var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    font-size: var(--font-size-h4);
    color: var(--color-text-inverse);
    transition: all var(--duration-base);
}

.contact-info-card:hover .icon { background: var(--color-accent); }

.contact-info-card h5 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-3);
}

.contact-info-card p {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.contact-info-card a {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.contact-info-card a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.contact-form {
    background: var(--color-bg-elevated);
    padding: var(--space-12);
    border: 1px solid var(--color-border);
}

.contact-form .form-control {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-none);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-small);
    transition: border-color var(--duration-base);
    background: var(--color-bg-surface);
}

.contact-form .form-control:focus {
    border-color: var(--color-accent);
    box-shadow: none;
    background: var(--color-bg-page);
}

.contact-form .form-control:disabled {
    background: var(--color-neutral-100);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.contact-form label {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-caption);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Alert overrides for token consistency */
.contact-form .alert-success {
    background: color-mix(in srgb, var(--color-success) 10%, white);
    border-color: var(--color-success);
    color: var(--color-success);
}

.contact-form .alert-danger {
    background: color-mix(in srgb, var(--color-error) 10%, white);
    border-color: var(--color-error);
    color: var(--color-error);
}


/* ==========================================================================
   CTA SECTION
   ========================================================================== */
.cta-section {
    background: var(--color-primary);
    padding: var(--space-20) 0;
    text-align: center;
}

.cta-section h2 {
    color: var(--color-text-inverse);
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-4);
}

.cta-section p {
    color: var(--color-inverse-body);
    font-size: var(--font-size-body-lg);
    margin-bottom: var(--space-8);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background: var(--color-primary-dark);
    color: var(--color-inverse-muted);
    padding-top: var(--space-20);
}

.footer h5 {
    color: var(--color-text-inverse);
    margin-bottom: var(--space-6);
    position: relative;
    padding-bottom: var(--space-4);
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--font-size-caption);
}

.footer h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--space-8);
    height: 2px;
    background: var(--color-accent);
}

.footer p {
    color: var(--color-inverse-muted);
    font-size: var(--font-size-small);
    line-height: var(--line-height-relaxed);
}

.footer a {
    color: var(--color-inverse-muted);
    transition: all var(--duration-base) var(--ease-default);
}

.footer a:hover {
    color: var(--color-accent);
    padding-left: var(--space-1);
}

.footer a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

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

.footer ul li { margin-bottom: var(--space-3); }

.footer ul li a {
    font-size: var(--font-size-small);
    display: inline-block;
}

.footer .footer-icon {
    color: var(--color-accent);
    width: var(--space-5);
    display: inline-block;
}

.footer .social-links {
    display: flex;
    gap: var(--space-3);
}

.footer .social-links a {
    width: var(--space-10);
    height: var(--space-10);
    border: 1px solid var(--color-inverse-border);
    border-radius: var(--radius-none);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-inverse-muted);
    font-size: var(--font-size-small);
    transition: all var(--duration-base);
    padding: 0;
}

.footer .social-links a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
    padding-left: 0;
}

.footer .social-links a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.footer-bottom {
    border-top: 1px solid var(--color-inverse-border);
    padding: var(--space-5) 0;
    margin-top: var(--space-12);
    font-size: var(--font-size-small);
}

.footer-bottom strong { color: var(--color-text-inverse); }


/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox-modal .modal-dialog { max-width: 90vw; }
.lightbox-modal .modal-content { background: transparent; border: none; }
.lightbox-modal .modal-body { padding: 0; text-align: center; }
.lightbox-modal img { max-height: 85vh; max-width: 100%; object-fit: contain; }

.lightbox-close {
    z-index: var(--z-modal);
}


/* ==========================================================================
   MAP
   ========================================================================== */
.map-embed {
    border: 0;
    min-height: 500px;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(var(--space-8)); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp var(--duration-slowest) var(--ease-out) forwards;
}


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


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .hero-slider .carousel-caption {
        padding: 0 var(--space-10);
    }
}

@media (max-width: 991px) {
    :root {
        --section-padding: var(--space-20);
        --font-size-display: 2.5rem;
        --font-size-h1: 2.2rem;
        --font-size-h2: 2rem;
    }

    .hero-slider .carousel-caption {
        padding: 0 var(--space-6);
        text-align: center;
    }

    .hero-slider .carousel-caption .caption-inner {
        max-width: 100%;
        margin: 0 auto;
    }

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

    .hero-slider .carousel-indicators {
        justify-content: center;
    }

    .page-banner { min-height: 250px; }

    .about-home .about-text { padding-left: 0; margin-top: var(--space-8); }

    .navbar .nav-link {
        padding: var(--space-3) var(--space-4) !important;
    }
    .navbar .nav-link:not(.dropdown-toggle)::after { display: none; }

    .nav-cta .nav-link {
        margin: var(--space-1) 0 !important;
        display: inline-block;
    }

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

@media (max-width: 767px) {
    :root {
        --section-padding: var(--space-12);
        --font-size-display: 1.8rem;
        --font-size-h1: 1.8rem;
        --font-size-h2: 1.6rem;
    }

    .hero-slider .carousel-item {
        height: 70vh;
        min-height: 450px;
    }

    .hero-slider .carousel-caption .slide-subtitle {
        font-size: var(--font-size-micro);
        letter-spacing: 3px;
    }

    .page-banner { min-height: 180px; }

    .category-card img { height: 300px; }

    .contact-form { padding: var(--space-6); }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .stat-item .stat-number { font-size: var(--font-size-h1); }

    .about-home .about-image img { height: 350px; }

    .top-bar { display: none; }

    .about-home .about-image::after { display: none; }
}

/* --- 320px: smallest mobile --- */
@media (max-width: 374px) {
    :root {
        --font-size-display: 1.4rem;
        --font-size-h1: 1.4rem;
    }

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

    .collection-filter .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-micro);
    }
}

/* --- Touch target enforcement --- */
@media (pointer: coarse) {
    .navbar .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .collection-filter .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .gallery-item {
        min-height: 44px;
        min-width: 44px;
    }

    .footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .footer .social-links a {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-primary-custom,
    .btn-outline-custom {
        min-height: 44px;
        min-width: 44px;
    }
}