/*====================================
        Design Tokens
====================================*/

:root{
    /* Color */
    --color-navy:#14213D;
    --color-primary:#2563EB;
    --color-primary-hover:#1D4ED8;
    --color-text-secondary:#64748B;
    --color-text-editorial:#5B677A;
    --color-text-weak:#888;
    --color-white:#FFFFFF;
    --color-surface:#FFFFFF;
    --color-surface-hover:#EFF6FF;
    --color-background:#F8FAFC;
    --color-background-blue:#EFF6FF;
    --color-border:#E2E8F0;
    --color-focus:#0B57D0;
    --color-overlay:rgba(0,0,0,.45);
    --color-glass:rgba(255,255,255,.72);
    --color-glass-strong:rgba(255,255,255,.92);

    /* Typography */
    --font-family:'Vazirmatn',sans-serif;
    --font-weight-regular:400;
    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;
    --font-weight-extrabold:800;
    --font-size-h1:clamp(2rem,4vw,4rem);
    --font-size-h2:clamp(1.75rem,3vw,2.75rem);
    --font-size-h3:clamp(1.25rem,2vw,1.75rem);
    --font-size-h4:1.125rem;
    --font-size-body:1rem;
    --font-size-small:.875rem;
    --line-height-heading:1.35;
    --line-height-body:1.85;
    --line-height-compact:1.6;

    /* Spacing */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-6:24px;
    --space-8:32px;
    --space-12:48px;
    --space-16:64px;
    --space-20:80px;
    --space-24:96px;

    /* Radius */
    --radius-12:12px;
    --radius-16:16px;
    --radius-24:24px;
    --radius-28:28px;
    --radius-full:999px;

    /* Elevation */
    --shadow-sm:0 12px 25px rgba(0,0,0,.08);
    --shadow-md:0 20px 50px rgba(38,99,235,.12);
    --shadow-modal:0 30px 60px rgba(0,0,0,.18);
    --shadow-focus:0 0 0 4px rgba(37,99,235,.22);

    /* Layout */
    --container-max-width:1320px;
    --gutter-mobile:16px;
    --gutter-tablet:24px;
    --gutter-desktop:48px;
    --header-height:72px;
    --header-height-mobile:68px;
    --nav-control-height:44px;
    --section-spacing:80px;

    /* Motion */
    --duration-fast:.25s;
    --duration-normal:.35s;
    --duration-modal:.35s;
    --ease-standard:ease;

    /* Layers */
    --z-header:1000;
    --z-dropdown:1100;
    --z-floating:1200;
    --z-modal-backdrop:9000;
    --z-modal:9100;
    --z-lightbox:9200;

    /* Compatibility aliases for current components */
    --primary:var(--color-primary);
    --primary-dark:var(--color-primary-hover);
    --secondary:#66B3FF;
    --text:var(--color-navy);
    --text-light:var(--color-text-secondary);
    --glass:var(--color-glass);
    --shadow:var(--shadow-md);
    --radius:var(--radius-24);
    --hero-title:var(--color-navy);
    --hero-accent:var(--color-primary);
    --hero-accent-dark:var(--color-primary-hover);
    --hero-copy:var(--color-text-secondary);
    --focus-ring:3px solid var(--color-focus);
    --focus-ring-offset:4px;
}

/*====================================
            Reset
====================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:var(--font-family);
}

html{
    scroll-behavior:smooth;
}

section[id]{
    scroll-margin-top:calc(var(--header-height) + var(--space-8));
}

body{

    direction:rtl;

    background:var(--color-background-blue);

    color:var(--text);

    font-size:var(--font-size-body);

    overflow-x:hidden;

}

/*====================================
        Layout Primitives
====================================*/

.hero,
.about-section,
.stats-section,
.gallery-section,
footer{
    max-width:var(--container-max-width);
    margin-inline:auto;
}

/*====================================
        Background
====================================*/

.bg-circle{

    position:fixed;

    border-radius:50%;

    filter:blur(80px);

    z-index:-2;

}

.one{

    width:420px;

    height:420px;

    right:-150px;

    top:-120px;

    background:#4f8dff55;

}

.two{

    width:350px;

    height:350px;

    left:-100px;

    bottom:-80px;

    background:#82c3ff55;

}

/*====================================
            Header
====================================*/

header{

    width:100%;

    min-height:var(--header-height);

    display:flex;

    justify-content:center;

    margin-top:var(--space-4);

}

.navbar{

    width:92%;

    max-width:var(--container-max-width);

    height:var(--header-height);

    position:relative;

    background:var(--color-glass-strong);

    border:1px solid var(--color-border);

    border-radius:var(--radius-24);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:var(--space-6);

    padding:0 var(--space-6);

    box-shadow:var(--shadow-sm);

}

.logo{

    display:flex;

    align-items:center;

    min-width:0;

    gap:var(--space-3);

}

.logo img{

    width:48px;

    height:48px;

    object-fit:contain;

    display:block;

    flex-shrink:0;

}

.brand-copy{

    min-width:0;

}

.brand-name{

    margin:0;

    font-size:20px;

    font-weight:var(--font-weight-bold);

    line-height:var(--line-height-heading);

    white-space:nowrap;

}

.brand-tagline{

    margin:2px 0 0;

    font-size:12px;

    color:var(--text-light);

    line-height:var(--line-height-compact);

}

.nav-links{

    display:flex;

    align-items:center;

    gap:var(--space-1);

    list-style:none;

    margin:0;

    padding:0;

}

.nav-links a,
.nav-action{

    min-height:var(--nav-control-height);

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-2);

    padding:0 var(--space-4);

    border:1px solid transparent;

    border-radius:var(--radius-12);

    text-decoration:none;

    color:var(--text);

    font-weight:var(--font-weight-semibold);

    white-space:nowrap;

    transition:color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);

}

.nav-links a:hover,
.nav-action:hover{

    color:var(--color-primary-hover);

    background:var(--color-surface-hover);

    border-color:var(--color-border);

}

.nav-links a.active{

    color:var(--color-white) !important;

    background:var(--color-primary);

    border-color:var(--color-primary);

    box-shadow:0 8px 18px rgba(37,99,235,.18);

}

.menu-btn{

    display:none;

    width:var(--nav-control-height);

    height:var(--nav-control-height);

    border:1px solid var(--color-border);

    border-radius:var(--radius-12);

    background:var(--color-surface);

    color:var(--color-navy);

    font-size:20px;

    cursor:pointer;

    flex-shrink:0;

    transition:background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);

}

/*====================================
        Dropdown
====================================*/

.major-dropdown{

    position:absolute;

    top:calc(100% + var(--space-2));

    right:0;

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:var(--radius-16);

    box-shadow:var(--shadow-sm);

    width:min(320px,calc(100vw - (2 * var(--gutter-mobile))));

    display:none;

    padding:var(--space-2);

    z-index:var(--z-dropdown);

}

.major-dropdown.show{

    display:block;

}

.nav-item-majors{

    position:relative;

}

.dropdown-major-list{

    display:grid;

    gap:var(--space-1);

    margin:0;

    padding:0;

    list-style:none;

}

.major-option{

    padding:10px var(--space-3);

    border-radius:var(--radius-12);

    color:var(--color-navy);

    font-size:var(--font-size-small);

    line-height:var(--line-height-compact);

    background:transparent;

}

.major-option + .major-option{

    border-top:1px solid var(--color-border);

}

.nav-action[aria-expanded="true"] i{

    transform:rotate(180deg);

}

.nav-action i{

    transition:transform var(--duration-fast) var(--ease-standard);

}

/*====================================
            Hero
====================================*/

.hero{

    width:92%;

    max-width:var(--container-max-width);

    margin:var(--space-8) auto var(--space-16);

    display:grid;

    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);

    grid-template-rows:auto auto;

    column-gap:var(--space-16);

    row-gap:var(--space-4);

    align-items:center;

}

.hero-content h1{

    max-width:620px;

    margin:0;

    color:var(--hero-title);

    font-size:clamp(40px,4.2vw,60px);

    line-height:1.38;

    font-weight:var(--font-weight-extrabold);

}

.hero-content span{

    color:var(--hero-accent);

}

.hero-content p{

    max-width:600px;

    margin-top:var(--space-4);

    line-height:1.9;

    color:var(--hero-copy);

    font-size:17px;

}

.hero-buttons{

    display:flex;

    gap:var(--space-3);

    margin-top:var(--space-6);

}

/*====================================
            Buttons
====================================*/

.primary-btn,
.secondary-btn{

    border:none;

    text-decoration:none;

    cursor:pointer;

    padding:18px 38px;

    border-radius:var(--radius-16);

    font-size:var(--font-size-body);

    font-weight:var(--font-weight-bold);

    transition:var(--duration-normal) var(--ease-standard);

}

.primary-btn{

    color:var(--color-white);

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    box-shadow:0 15px 35px rgba(41,121,255,.25);

}

.secondary-btn{

    background:var(--color-surface);

    color:var(--primary);

}

.primary-btn,
.secondary-btn,
.map-btn{
    min-height:44px;
    font-family:var(--font-family);
}

.primary-btn:disabled,
.secondary-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.hero-content{
    min-width:0;
    grid-column:1;
    grid-row:1;
    align-self:end;
    padding-right:var(--space-6);
}

.hero-buttons > *{
    min-height:52px;
    padding:12px 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.hero .primary-btn{
    background:var(--hero-accent);
    color:var(--color-white);
    box-shadow:0 10px 24px rgba(37,99,235,.18);
}

.hero .primary-btn:hover{
    background:var(--hero-accent-dark);
    transform:translateY(-2px);
}

.hero .secondary-btn{
    border:1px solid var(--hero-accent);
    background:var(--color-surface);
    color:var(--hero-accent);
}

.hero .secondary-btn:hover{
    background:var(--color-surface-hover);
    transform:translateY(-2px);
}

.hero .primary-btn:focus-visible,
.hero .secondary-btn:focus-visible{
    outline:var(--focus-ring);
    outline-offset:var(--focus-ring-offset);
}

.primary-btn:hover,
.secondary-btn:hover{

    transform:translateY(-5px);

}

/*====================================
        Hero Image
====================================*/

.hero-image{

    position:relative;

    grid-column:2;

    grid-row:1 / span 2;

    align-self:center;

    overflow:hidden;

    border-radius:var(--radius-28);

    background:var(--color-surface);

    box-shadow:0 18px 40px rgba(20,33,61,.12);

}

.hero-image img{

    width:100%;

    height:auto;

    object-fit:contain;

    display:block;

}

/*====================================
        Social
====================================*/

.social{

    position:static;

    grid-column:1;

    grid-row:2;

    justify-self:start;

    align-self:start;

    width:fit-content;

    inset:auto;

    transform:none;

    display:flex;

    flex-direction:row;

    gap:var(--space-3);

    z-index:auto;

}

.social a{

    width:48px;

    height:48px;

    border:1px solid var(--color-border);

    border-radius:var(--radius-16);

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--color-surface);

    text-decoration:none;

    color:var(--primary);

    box-shadow:var(--shadow-sm);

    transition:transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);

}

.social img{

    width:28px;

    height:28px;

    object-fit:contain;

    display:block;

}

.social i{

    font-size:24px;

}

.social a:hover{

    transform:translateY(-2px);

    background:var(--primary);

    color:var(--color-white);

}
/*====================================
        About Section
====================================*/

.about-section{

    width:92%;

    margin:var(--space-16) auto 100px;

    display:grid;

    grid-template-columns:1fr;

    gap:0;

    align-items:center;

}

.section-tag{

    display:inline-block;

    background:var(--color-background-blue);

    color:var(--primary);

    padding:8px 18px;

    border-radius:var(--radius-full);

    margin-bottom:20px;

    font-size:var(--font-size-small);

    font-weight:600;

}

.about-content h2{

    font-size:42px;

    margin-bottom:25px;

    line-height:65px;

}

.about-content p{

    color:var(--text-light);

    line-height:38px;

    font-size:17px;

}

/*====================================
        Features
====================================*/

.feature-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:40px;

}

.feature{

    display:flex;

    align-items:center;

    gap:15px;

    background:var(--color-surface);

    padding:20px;

    border-radius:var(--radius-16);

    box-shadow:var(--shadow);

    transition:var(--duration-normal) var(--ease-standard);

}

.feature:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 45px rgba(41,121,255,.18);

}

.feature i{

    width:55px;

    height:55px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--color-background-blue);

    color:var(--primary);

    font-size:22px;

}

.feature span{

    font-weight:var(--font-weight-bold);

}

/*====================================
        Statistics
====================================*/

.stats-section{

    width:92%;

    margin:var(--section-spacing) auto;

    display:grid;

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

    gap:25px;

}

.stat-card{

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(16px);

    border-radius:var(--radius-28);

    text-align:center;

    padding:40px 20px;

    box-shadow:var(--shadow);

    transition:var(--duration-normal) var(--ease-standard);

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(41,121,255,.18);

}

.stat-card .stat-value{

    font-size:52px;

    color:var(--primary);

    margin-bottom:12px;

}

.stat-card p{

    color:var(--text-light);

    font-size:16px;

}

/*====================================
        Gallery
====================================*/

.gallery-section{

    width:92%;

    margin:110px auto 0;

}

.section-header{

    text-align:center;

    margin-bottom:50px;

}

.section-header span{

    display:inline-block;

    padding:8px 20px;

    background:var(--color-background-blue);

    color:var(--primary);

    border-radius:var(--radius-full);

    margin-bottom:20px;

}

.section-header h2{

    font-size:44px;

}

/*====================================
        Gallery Grid
====================================*/

.gallery-grid{

    display:grid;

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

    gap:22px;

}

.gallery-item{

    overflow:hidden;

    border-radius:var(--radius-28);

    background:var(--color-surface);

    box-shadow:var(--shadow);

    cursor:pointer;

    transition:var(--duration-normal) var(--ease-standard);

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(41,121,255,.18);

}

.gallery-item img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/*====================================
    Gallery Button
====================================*/

.gallery-button{

    display:flex;

    justify-content:center;

    margin-top:45px;

}

/*====================================
            Modal
====================================*/

.modal{

    position:fixed;

    inset:0;

    background:var(--color-overlay);

    backdrop-filter:blur(6px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:opacity var(--duration-fast) var(--ease-standard);

    z-index:var(--z-modal);

}

.modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.modal.closing{

    opacity:0;

    visibility:visible;

    pointer-events:auto;

}

.modal-box{

    width:700px;

    max-width:92%;

    max-height:90vh;

    overflow:auto;

    background:var(--color-surface);

    border-radius:var(--radius-28);

    padding:35px;

    position:relative;

    box-shadow:var(--shadow-modal);

    animation:modalOpen var(--duration-modal) var(--ease-standard);

}

.modal-box.large{

    width:1100px;

    --modal-gutter:35px;

    padding:0 var(--modal-gutter) var(--modal-gutter);

}

.modal-header{

    position:sticky;

    top:0;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin:0 calc(var(--modal-gutter) * -1) 10px;

    padding:20px var(--modal-gutter);

    background:var(--color-surface);

    border-bottom:1px solid var(--color-border);

}

.modal-header h2{

    margin:0;

    color:var(--text);

    font-size:clamp(24px,3vw,32px);

    line-height:1.5;

}

.modal-header .close{

    position:static;

    flex:0 0 44px;

}

.close{

    position:absolute;

    left:25px;

    top:18px;

    font-size:34px;

    cursor:pointer;

    color:var(--color-text-secondary);

    transition:.3s;

}

.close:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

/*====================================
        Major List
====================================*/

.major-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:30px;

}

.major-list div{

    background:#78b0ff;

    padding:18px;

    border-radius:var(--radius-16);

    font-weight:600;

}

/*====================================
        Gallery Popup
====================================*/

.gallery-category{

    margin-top:40px;

}

.gallery-category h3{

    margin-bottom:20px;

    color:var(--primary);

}

.popup-gallery{

    display:grid;

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

    gap:15px;

}

.popup-gallery picture{

    display:block;

    min-width:0;

    overflow:hidden;

    border-radius:var(--radius-16);

}

.popup-gallery img{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:var(--radius-16);

    cursor:pointer;

    transition:var(--duration-normal) var(--ease-standard);

    display:block;

}

.popup-gallery img:hover{

    transform:scale(1.05);

}

/*====================================
        Contact
====================================*/

.contact-modal{
    width:580px;
    max-width:92%;
    padding:28px;
    color:var(--text);
    background:var(--color-surface);
}

.about-content{
    max-width:1100px;
    margin:0 auto;
}

.contact-modal h2{
    margin:0 0 20px;
    padding-left:48px;
    color:var(--text);
    line-height:1.5;
}

.contact-modal h4,
.contact-modal p,
.contact-modal a:not(.map-btn){
    color:var(--text);
}

.contact-items{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px 20px;

    margin-top:0;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    min-width:0;

    margin-bottom:0;

}

.contact-item i{

    width:55px;

    height:55px;

    border-radius:var(--radius-16);

    background:var(--color-background-blue);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:22px;

}

.contact-item h4{

    margin-bottom:8px;

}

.contact-item p{

    color:var(--text);

    line-height:30px;

    overflow-wrap:anywhere;

}

.map-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:100%;

    margin-top:30px;

    padding:18px;

    border-radius:var(--radius-16);

    text-decoration:none;

    color:var(--color-white);

    background:linear-gradient(135deg,var(--primary),var(--secondary));

}

/*====================================
            Footer
====================================*/

footer{

    width:92%;

    margin:90px auto 30px;

}

.footer-container{

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    border-radius:var(--radius-28);

    padding:45px;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:40px;

    box-shadow:var(--shadow);

}

.footer-about img{

    width:70px;

    margin-bottom:20px;

}

.footer-about p{

    margin-top:10px;

    color:var(--text-light);

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links a{

    text-decoration:none;

    color:var(--text-light);

    transition:.3s;

}

.footer-links a:hover{

    color:var(--primary);

}

.footer-social{

    display:flex;

    gap:18px;

    margin-top:18px;

}

.footer-social a{

    width:55px;

    height:55px;

    border-radius:var(--radius-16);

    background:var(--color-background-blue);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    text-decoration:none;

    transition:.3s;

}

.footer-social img{

    width:28px;

    height:28px;

    object-fit:contain;

    display:block;

}

.footer-social a:hover{

    background:var(--primary);

    color:var(--color-white);

}

.copyright{

    text-align:center;

    margin-top:25px;

    color:var(--color-text-secondary);

    padding-bottom:64px;

}

/*====================================
        Lightbox
====================================*/

.image-viewer{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:opacity var(--duration-fast) var(--ease-standard);

    z-index:var(--z-lightbox);

}

.image-viewer.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.image-viewer.closing{

    opacity:0;

    visibility:visible;

    pointer-events:auto;

}

.image-viewer-dialog{

    position:relative;

    display:flex;

    max-width:94vw;

    max-height:94dvh;

    padding:58px 18px 18px;

}

.image-viewer-figure{

    margin:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.image-viewer img{

    max-width:90vw;

    max-height:calc(90dvh - 96px);

    border-radius:var(--radius-24);

    object-fit:contain;

    display:block;

}

.image-viewer-caption{

    max-width:min(760px,86vw);

    color:var(--color-white);

    text-align:center;

    font-size:15px;

    line-height:1.8;

}

.image-viewer-caption:empty{

    display:none;

}

.image-viewer-close{

    position:absolute;

    top:max(10px,env(safe-area-inset-top));

    left:max(10px,env(safe-area-inset-left));

    z-index:2;

    width:44px;

    height:44px;

    border:0;

    border-radius:var(--radius-full);

    display:grid;

    place-items:center;

    background:var(--color-surface);

    color:var(--text);

    font-size:30px;

    line-height:1;

    cursor:pointer;

    box-shadow:0 12px 28px rgba(0,0,0,.28);

}

.image-viewer-close:focus-visible{

    outline:var(--focus-ring);

    outline-offset:3px;

}

/*====================================
        Responsive
====================================*/

@media(max-width:992px){

.hero,
.about-section{

grid-template-columns:1fr;

}

.hero{

text-align:center;

grid-template-rows:auto auto auto;

column-gap:0;

row-gap:var(--space-8);

margin-top:var(--space-8);

margin-bottom:var(--space-16);

}

.hero-content{

grid-column:1;

grid-row:1;

align-self:auto;

}

.hero-content h1{

max-width:680px;

margin-inline:auto;

font-size:clamp(36px,5.5vw,44px);

line-height:1.45;

}

.hero-content p{

max-width:620px;

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

grid-column:1;

grid-row:2;

width:min(100%,680px);

justify-self:center;

}

.social{

grid-column:1;

grid-row:3;

justify-self:center;

margin-top:calc(-1 * var(--space-2));

}

.stats-section{

grid-template-columns:repeat(2,1fr);

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

.popup-gallery{

grid-template-columns:repeat(2,1fr);

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

}

@media(max-width:768px){

.menu-btn{

display:grid;

place-items:center;

width:44px;

height:44px;

padding:0;

border-radius:var(--radius-12);

flex-shrink:0;

}

.navbar{

height:var(--header-height-mobile);

padding:0 var(--space-3);

gap:var(--space-3);

}

header{

min-height:var(--header-height-mobile);

margin-top:var(--space-3);

}

.nav-links{

position:absolute;

top:calc(100% + var(--space-2));

inset-inline:0;

width:100%;

background:var(--color-surface);

border:1px solid var(--color-border);

border-radius:var(--radius-16);

padding:var(--space-2);

display:flex;

flex-direction:column;

align-items:stretch;

gap:var(--space-1);

box-shadow:var(--shadow-sm);

visibility:hidden;

opacity:0;

pointer-events:none;

transform:translateY(-6px);

transition:opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast);

z-index:var(--z-dropdown);

}

.nav-links.show{

visibility:visible;

opacity:1;

pointer-events:auto;

transform:translateY(0);

}

.nav-links > li,
.nav-item-majors{

width:100%;

}

.nav-links a,
.nav-action{

width:100%;

justify-content:flex-start;

padding:0 var(--space-3);

}

.nav-links a.active{

justify-content:center;

}

.hero-content h1{

font-size:38px;

line-height:1.5;

}

.hero{

row-gap:var(--space-6);

}

.hero-image{

width:min(100%,640px);

}

.about-content h2{

font-size:34px;

line-height:50px;

}

.gallery-grid{

grid-template-columns:1fr;

}

.feature-list{

grid-template-columns:1fr;

}

.stats-section{

grid-template-columns:1fr;

}

.popup-gallery{

grid-template-columns:1fr;

}

.major-list{

grid-template-columns:1fr;

}

.social{

left:12px;

}

}

@media(max-width:480px){

.navbar{

padding:0 20px;

}

.hero{

margin-top:var(--space-8);

margin-bottom:var(--space-12);

row-gap:var(--space-6);

}

.hero-content h1{

font-size:clamp(30px,8.5vw,34px);

line-height:1.48;

}

.hero-content p{

margin-top:var(--space-4);

font-size:var(--font-size-body);

line-height:1.9;

}

.primary-btn,
.secondary-btn{

width:100%;

text-align:center;

}

.hero-buttons{

flex-direction:column;

gap:var(--space-3);

margin-top:var(--space-6);

}

.modal-box{

padding:22px;

}

.footer-container{

padding:30px;

}

}

/*====================================
        Animation
====================================*/

@keyframes modalOpen{

from{

opacity:0;

transform:translateY(25px) scale(.95);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}

.footer-about .footer-brand-logo{
    width:120px;
    max-width:100%;
    height:auto;
    object-fit:contain;
    display:block;
    margin-bottom:12px;
}

.contact-modal .close:focus-visible{
    border-radius:var(--radius-full);
    outline:none;
    background:var(--color-surface-hover);
    box-shadow:var(--shadow-focus);
}

.contact-modal .close{
    width:44px;
    height:44px;
    border-radius:var(--radius-full);
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

/*====================================
        Shared Component Foundations
====================================*/
.nav-action{
    border:1px solid transparent;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-weight:var(--font-weight-semibold);
    cursor:pointer;
    transition:background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.nav-action:hover,
.nav-action[aria-expanded="true"]{
    color:var(--primary);
}

.major-option{
    display:flex;
    align-items:center;
    width:100%;
    border:0;
    background:transparent;
    padding:var(--space-3);
    text-align:right;
    color:var(--color-navy);
    font:inherit;
    text-decoration:none;
    border-radius:var(--radius-12);
}

.hero-image picture,
.gallery-item picture{
    display:block;
    width:100%;
}

.gallery-item picture{
    height:100%;
}

.gallery-item img{
    display:block;
}

.close{
    border:0;
    background:transparent;
    width:44px;
    height:44px;
    border-radius:var(--radius-full);
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.close:focus-visible{
    outline:none;
    background:var(--color-surface-hover);
    box-shadow:var(--shadow-focus);
}

.footer-link-button{
    border:0;
    padding:0;
    background:transparent;
    color:var(--text-light);
    font:inherit;
    text-align:right;
    cursor:pointer;
    transition:.3s;
}

.footer-link-button:hover{
    color:var(--primary);
}

body.modal-open{
    overflow:hidden;
}

html.scroll-locked{
    overflow:hidden;
}

.hidden{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .45s ease, transform .45s ease;
}

.hidden.show,
.show{
    opacity:1;
    transform:none;
}

.top-btn{
    position:fixed;
    right:24px;
    bottom:max(24px,env(safe-area-inset-bottom));
    width:52px;
    height:52px;
    border:0;
    border-radius:var(--radius-16);
    background:var(--primary);
    color:var(--color-white);
    font-size:24px;
    cursor:pointer;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast);
    z-index:var(--z-floating);
}

.top-btn.show{
    opacity:1;
    visibility:visible;
    transform:none;
}

.navbar.sticky{
    position:fixed;
    top:12px;
    z-index:var(--z-header);
    background:var(--color-glass-strong);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
    outline:var(--focus-ring);
    outline-offset:var(--focus-ring-offset);
}

/* Keep keyboard focus clear without changing navigation geometry. */
.nav-links > li > a:focus-visible,
.nav-action:focus-visible{
    outline:none;
    border-radius:var(--radius-12);
    box-shadow:var(--shadow-focus);
}

.footer-links > a:focus-visible,
.footer-link-button:focus-visible{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    max-width:100%;
    white-space:nowrap;
    flex-shrink:0;
    border-radius:var(--radius-12);
    outline:none;
    box-shadow:var(--shadow-focus);
}

.footer-links > a:focus-visible,
.footer-link-button:focus-visible{
    padding:2px 6px;
    margin:-2px -6px;
}

.footer-links > a:focus-visible,
.footer-link-button:focus-visible{
    align-self:flex-start;
}

@media(max-width:992px){
    .footer-links > a:focus-visible,
    .footer-link-button:focus-visible{
        align-self:center;
    }
}

.menu-btn:focus-visible{
    outline:none;
    border-radius:var(--radius-12);
    box-shadow:var(--shadow-focus);
}

@media(max-width:1199px){
    .hero-content{
        padding-right:0;
    }

    .social{
        position:static;
        width:fit-content;
        margin:0;
        inset:auto;
        transform:none;
        flex-direction:row;
        justify-content:flex-start;
        gap:12px;
        z-index:auto;
    }
}

.contact-item a{
    color:inherit;
    text-decoration:none;
}

@media(max-width:768px){
    .logo{
        min-width:0;
    }

    .brand-name{
        max-width:280px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:18px;
    }

    .brand-tagline{
        display:none;
    }

.major-dropdown{
        position:static;
        width:100%;
        max-height:none;
        margin-top:var(--space-1);
        padding:var(--space-2);
        overflow:visible;
        border-radius:var(--radius-12);
        background:var(--color-background);
        box-shadow:none;
    }

    .social{
        position:static;
        width:fit-content;
        margin:calc(-1 * var(--space-2)) 0 0;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        transform:none;
        flex-direction:row;
        justify-content:center;
        gap:12px;
        z-index:auto;
    }

    .social a{
        width:46px;
        height:46px;
    }

    footer{
        margin-top:64px;
    }

    .footer-about .footer-brand-logo{
        width:104px;
        margin:0 auto 12px;
    }
}

@media(max-width:480px){
    .navbar{
        height:var(--header-height-mobile);
        padding:0 var(--space-3);
    }

    header{
        min-height:var(--header-height-mobile);
    }

    section[id]{
        scroll-margin-top:calc(var(--header-height-mobile) + var(--space-6));
    }

    .logo img{
        width:44px;
        height:44px;
    }

    .brand-name{
        max-width:210px;
        font-size:16px;
    }

    .footer-about .footer-brand-logo{
        width:92px;
    }

    .modal-box{
        max-height:88dvh;
        border-radius:var(--radius-24);
    }

    #galleryModal .modal-box.large{
        --modal-gutter:16px;
        padding:0 var(--modal-gutter) 20px;
    }

    .modal-header{
        gap:12px;
        padding-top:14px;
        padding-bottom:14px;
    }

    .modal-header h2{
        font-size:24px;
    }

    .contact-modal{
        width:94%;
        max-width:94%;
        padding:24px 18px;
        overflow-y:auto;
    }

    .contact-modal h2{
        margin-bottom:18px;
        padding-left:38px;
        font-size:24px;
    }

    .contact-items{
        grid-template-columns:1fr;
        gap:16px;
    }

    .contact-item{
        gap:14px;
    }

    .contact-item i{
        width:46px;
        height:46px;
        flex:0 0 46px;
    }

    .map-btn{
        margin-top:22px;
    }

    .top-btn{
        right:14px;
        bottom:max(18px,env(safe-area-inset-bottom));
        width:46px;
        height:46px;
    }

}

@media(max-width:390px){
    .navbar{
        width:94%;
        padding:0 var(--space-2);
    }

    .logo{
        gap:8px;
    }

    .brand-name{
        max-width:170px;
        font-size:14px;
    }

    .hero,
    .about-section,
    .stats-section,
    .gallery-section,
    footer{
        width:94%;
    }

    .hero-content h1{
        font-size:30px;
        line-height:44px;
    }

    .modal-box{
        max-width:94%;
        padding:20px 16px;
    }
}

@media(max-width:1199px){
    .top-btn{
        position:static;
        display:block;
        margin:20px auto max(18px,env(safe-area-inset-bottom));
    }

    .top-btn.show:not(.footer-visible){
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

    .copyright{
        padding-bottom:0;
    }
}

@media(min-width:1200px){
    footer{
        position:relative;
        padding-bottom:80px;
    }

    .copyright{
        padding-bottom:0;
    }

    .top-btn.footer-visible{
        position:absolute;
        right:0;
        bottom:max(10px,env(safe-area-inset-bottom));
    }
}

/*====================================
        Phase 4: Editorial About
====================================*/

.about-section{
    width:calc(100% - (2 * var(--gutter-desktop)));
    margin:var(--space-16) auto 0;
    display:block;
}

.about-content{
    max-width:1100px;
    margin:0 auto;
}

.section-tag{
    display:inline-block;
    margin:0 0 var(--space-4);
    padding:0 var(--space-3) 0 0;
    border-right:3px solid var(--primary);
    border-radius:0;
    background:transparent;
    color:var(--primary);
    font-size:var(--font-size-small);
    font-weight:var(--font-weight-bold);
    line-height:1.8;
}

.about-content h2{
    max-width:980px;
    margin:0 0 var(--space-4);
    font-size:clamp(32px,3vw,44px);
    line-height:1.5;
}

.about-content p{
    max-width:900px;
    color:var(--color-text-editorial);
    font-size:17px;
    line-height:1.9;
}

.feature-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    margin-top:var(--space-8);
    border-block:1px solid var(--color-border);
}

.feature{
    min-height:84px;
    padding:var(--space-4) var(--space-2);
    gap:var(--space-4);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transition:background-color var(--duration-fast) var(--ease-standard);
}

.feature:nth-child(-n+2){
    border-bottom:1px solid var(--color-border);
}

.feature:nth-child(even){
    border-right:1px solid var(--color-border);
    padding-right:var(--space-6);
}

.feature:hover{
    transform:none;
    box-shadow:none;
}

.stats-section + .gallery-section{
    margin-top:var(--space-20);
}

.feature i{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:var(--radius-12);
    font-size:20px;
}

.feature span{
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-compact);
}

.stats-section{
    width:calc(100% - (2 * var(--gutter-desktop)));
    margin:var(--space-12) auto 0;
    padding:var(--space-2);
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    overflow:hidden;
    border:1px solid var(--color-border);
    border-radius:var(--radius-24);
    background:rgba(255,255,255,.68);
    box-shadow:none;
}

.stat-card{
    min-height:128px;
    padding:var(--space-6) var(--space-3);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:0;
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
    transition:none;
}

.stat-card:not(:first-child){
    border-right:1px solid var(--color-border);
}

.stat-card:hover{
    transform:none;
    box-shadow:none;
}

.stat-card .stat-value{
    margin:0 0 var(--space-2);
    color:var(--primary);
    font-size:clamp(34px,3.3vw,46px);
    font-weight:var(--font-weight-bold);
    font-variant-numeric:tabular-nums;
    line-height:1.2;
}

.stat-card p{
    color:var(--text-light);
    font-size:var(--font-size-body);
    line-height:1.7;
}

@media(hover:hover) and (pointer:fine){
    .feature:hover{
        background:rgba(255,255,255,.55);
    }
}

@media(max-width:992px){
    .about-section,
    .stats-section{
        width:calc(100% - (2 * var(--gutter-tablet)));
    }

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

    .stat-card:not(:first-child){
        border-right:0;
    }

    .stat-card:nth-child(even){
        border-right:1px solid var(--color-border);
    }

    .stat-card:nth-child(n+3){
        border-top:1px solid var(--color-border);
    }
}

@media(max-width:768px){
    .about-content h2{
        font-size:clamp(30px,5.5vw,36px);
        line-height:1.55;
    }

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

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

@media(max-width:640px){
    .about-section,
    .stats-section{
        width:calc(100% - (2 * var(--gutter-mobile)));
    }

    .about-section{
        margin-top:var(--space-12);
    }

    .about-content h2{
        font-size:clamp(28px,8vw,32px);
        line-height:1.55;
    }

    .about-content p{
        font-size:var(--font-size-body);
        line-height:1.95;
    }

    .feature-list{
        grid-template-columns:1fr;
        margin-top:var(--space-6);
    }

    .feature{
        min-height:74px;
        padding:var(--space-3) var(--space-2);
    }

    .feature:nth-child(-n+2),
    .feature:nth-child(even){
        border-right:0;
        padding-right:var(--space-2);
    }

    .feature:not(:last-child){
        border-bottom:1px solid var(--color-border);
    }

    .feature i{
        width:44px;
        height:44px;
        flex-basis:44px;
        font-size:19px;
    }

    .stats-section{
        margin-top:var(--space-8);
        padding:var(--space-1);
        border-radius:var(--radius-16);
    }

    .stats-section + .gallery-section{
        margin-top:var(--space-16);
    }

    .stat-card{
        min-height:116px;
        padding:var(--space-4) var(--space-2);
    }

    .stat-card .stat-value{
        font-size:clamp(30px,10vw,40px);
    }

    .stat-card p{
        font-size:var(--font-size-small);
    }
}

@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}

/*====================================
        Phase 5: Editorial Gallery
====================================*/

.gallery-section{
    width:min(92%,var(--container-max-width));
    margin-inline:auto;
    scroll-margin-top:120px;
}

.stats-section + .gallery-section{
    margin-top:var(--space-16);
}

.gallery-section .section-header{
    max-width:820px;
    margin:0 auto var(--space-8);
}

.gallery-section .section-header span{
    margin-bottom:var(--space-3);
    padding:6px 16px;
    border:1px solid rgba(41,121,255,.12);
    background:rgba(255,255,255,.62);
    font-size:var(--font-size-small);
    font-weight:600;
}

.gallery-section .section-header h2{
    margin:0;
    font-size:clamp(32px,3.25vw,44px);
    line-height:1.45;
    text-wrap:balance;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    grid-template-areas:
        "featured featured featured preview-1 preview-2"
        "featured featured featured preview-3 preview-4";
    gap:14px;
    height:clamp(420px,39vw,560px);
}

.gallery-item{
    position:relative;
    min-width:0;
    margin:0;
    overflow:hidden;
    border:1px solid rgba(16,35,64,.08);
    border-radius:var(--radius-20);
    background:var(--color-surface);
    box-shadow:none;
    cursor:default;
    transition:border-color var(--duration-fast) var(--ease-standard);
}

.gallery-item--featured{ grid-area:featured; }
.gallery-item--preview-1{ grid-area:preview-1; }
.gallery-item--preview-2{ grid-area:preview-2; }
.gallery-item--preview-3{ grid-area:preview-3; }
.gallery-item--preview-4{ grid-area:preview-4; }

.gallery-media-button,
.gallery-thumb{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:inherit;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
    display:block;
}

.gallery-media-button picture,
.gallery-media-button img,
.gallery-thumb picture,
.gallery-thumb img{
    width:100%;
    height:100%;
    display:block;
}

.gallery-media-button img,
.gallery-thumb img{
    object-fit:cover;
    transform:none;
    transition:transform var(--duration-normal) var(--ease-standard),filter var(--duration-normal) var(--ease-standard);
}

.gallery-item:hover{
    transform:none;
    border-color:rgba(41,121,255,.2);
    box-shadow:none;
}

.gallery-item:hover img{
    transform:none;
}

.gallery-media-button:focus-visible,
.gallery-thumb:focus-visible{
    outline:var(--focus-ring);
    outline-offset:-4px;
}

.gallery-button{
    margin-top:var(--space-8);
}

.gallery-section + footer{
    margin-top:var(--space-16);
}

/* Gallery modal */

.modal-box.large{
    width:min(1100px,calc(100% - 48px));
    max-width:none;
    max-height:min(90dvh,900px);
    padding:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    border-radius:var(--radius-24);
}

.modal-box.large .modal-header{
    position:sticky;
    top:0;
    margin:0;
    padding:18px 24px;
    border-bottom:1px solid var(--color-border);
    background:rgba(255,255,255,.98);
}

.modal-box.large .modal-header h2{
    font-size:clamp(24px,2.4vw,32px);
}

.gallery-modal-body{
    min-height:0;
    padding:0 24px 24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}

.gallery-category{
    margin:0;
    padding-top:24px;
}

.gallery-category + .gallery-category{
    margin-top:24px;
    border-top:1px solid var(--color-border);
}

.gallery-category h3{
    margin:0 0 14px;
    color:var(--primary);
    font-size:18px;
    line-height:1.7;
}

.popup-gallery{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.popup-gallery picture{
    height:100%;
    border-radius:inherit;
}

.gallery-thumb{
    aspect-ratio:4 / 3;
    border:1px solid rgba(16,35,64,.08);
    border-radius:var(--radius-16);
}

.popup-gallery img{
    width:100%;
    height:100%;
    border-radius:inherit;
    object-fit:cover;
    transform:none;
}

.popup-gallery img:hover{
    transform:none;
}

/* Lightbox visual polish */

.image-viewer{
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    background:rgba(3,8,18,.92);
}

.image-viewer-dialog{
    width:min(1120px,calc(100vw - 32px));
    max-width:none;
    max-height:calc(100dvh - 24px);
    padding:56px 20px 18px;
    display:grid;
    place-items:center;
}

.image-viewer-figure{
    width:100%;
    min-width:0;
    max-height:calc(100dvh - 98px);
    gap:10px;
}

.image-viewer img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(100dvh - 136px);
    border-radius:var(--radius-16);
    box-shadow:0 24px 64px rgba(0,0,0,.34);
    object-fit:contain;
}

.image-viewer-caption{
    max-width:min(760px,92vw);
    margin:0;
    padding:5px 12px;
    border-radius:var(--radius-full);
    background:rgba(0,0,0,.34);
    font-size:14px;
    line-height:1.65;
}

.image-viewer-close{
    top:max(10px,env(safe-area-inset-top));
    left:max(10px,env(safe-area-inset-left));
    box-shadow:0 8px 24px rgba(0,0,0,.3);
}

@media(hover:hover) and (pointer:fine){
    .gallery-media-button:hover img,
    .gallery-thumb:hover img{
        transform:scale(1.018);
        filter:saturate(1.03);
    }
}

@media(max-width:900px){
    .gallery-grid{
        height:auto;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:auto;
        grid-template-areas:
            "featured featured"
            "preview-1 preview-2"
            "preview-3 preview-4";
        gap:12px;
    }

    .gallery-item--featured{
        aspect-ratio:4 / 3;
    }

    .gallery-item--preview{
        aspect-ratio:4 / 3;
    }

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

@media(min-width:641px) and (max-width:900px){
    .gallery-item--featured{
        aspect-ratio:16 / 9;
    }

    .gallery-item--preview{
        aspect-ratio:16 / 10;
    }
}

@media(max-width:640px){
    .stats-section + .gallery-section{
        margin-top:var(--space-12);
    }

    .gallery-section{
        width:calc(100% - 30px);
        scroll-margin-top:92px;
    }

    .gallery-section .section-header{
        margin-bottom:var(--space-6);
    }

    .gallery-section .section-header span{
        margin-bottom:10px;
        padding:5px 14px;
    }

    .gallery-section .section-header h2{
        font-size:clamp(28px,8.4vw,34px);
        line-height:1.55;
    }

    .gallery-grid{
        gap:10px;
    }

    .gallery-item{
        border-radius:var(--radius-16);
    }

    .gallery-button{
        margin-top:var(--space-6);
    }

    .gallery-button .primary-btn{
        width:100%;
        min-height:48px;
    }

    .gallery-section + footer{
        margin-top:var(--space-12);
    }

    .modal-box.large{
        width:calc(100% - 20px);
        max-height:92dvh;
        border-radius:var(--radius-20);
    }

    .modal-box.large .modal-header{
        gap:12px;
        padding:12px 14px;
    }

    .modal-box.large .modal-header h2{
        font-size:22px;
    }

    .gallery-modal-body{
        padding:0 14px 16px;
        scrollbar-gutter:auto;
    }

    .gallery-category{
        padding-top:18px;
    }

    .gallery-category + .gallery-category{
        margin-top:18px;
    }

    .gallery-category h3{
        margin-bottom:10px;
        font-size:16px;
    }

    .popup-gallery{
        gap:10px;
    }

    .gallery-thumb{
        border-radius:var(--radius-12);
    }

    .image-viewer{
        padding:max(8px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
    }

    .image-viewer-dialog{
        width:calc(100vw - 12px);
        max-height:calc(100dvh - 12px);
        padding:54px 6px 10px;
    }

    .image-viewer-figure{
        max-height:calc(100dvh - 76px);
        gap:8px;
    }

    .image-viewer img{
        max-height:calc(100dvh - 138px);
        border-radius:var(--radius-12);
    }

    .image-viewer-caption{
        max-width:calc(100vw - 32px);
        padding:4px 9px;
        font-size:13px;
        line-height:1.55;
    }

    .image-viewer-close{
        top:max(8px,env(safe-area-inset-top));
        left:max(8px,env(safe-area-inset-left));
    }
}

/*====================================
        Phase 6: Contact & Footer
====================================*/

/* Contact modal */

.contact-modal{
    width:min(620px,calc(100% - 32px));
    max-width:none;
    max-height:min(90dvh,760px);
    padding:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    color:var(--color-navy);
    background:var(--color-surface);
    border:1px solid rgba(20,33,61,.08);
    border-radius:var(--radius-24);
    box-shadow:var(--shadow-modal);
}

.contact-modal-header{
    position:relative;
    min-height:76px;
    padding:20px 24px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--color-border);
    background:var(--color-surface);
}

.contact-modal-header h2{
    margin:0;
    padding:0 0 0 56px;
    color:var(--color-navy);
    font-size:clamp(24px,2.4vw,30px);
    line-height:1.45;
}

.contact-modal .close{
    top:16px;
    left:18px;
    width:44px;
    height:44px;
}

.contact-modal-body{
    min-height:0;
    padding:22px 24px 24px;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.contact-items{
    margin:0;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:0;
    overflow:hidden;
    border:1px solid var(--color-border);
    border-radius:var(--radius-16);
    background:var(--color-surface);
}

.contact-item{
    min-width:0;
    min-height:116px;
    margin:0;
    padding:18px;
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.contact-item:nth-child(odd){
    border-left:1px solid var(--color-border);
}

.contact-item:nth-child(-n+2){
    border-bottom:1px solid var(--color-border);
}

.contact-item i{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:var(--radius-12);
    background:var(--color-background-blue);
    color:var(--color-primary);
    font-size:18px;
}

.contact-item-content{
    min-width:0;
    flex:1;
}

.contact-item dt{
    margin:0 0 6px;
    color:var(--color-navy);
    font-size:15px;
    font-weight:var(--font-weight-bold);
    line-height:1.6;
}

.contact-item dd{
    margin:0;
    color:var(--color-text-editorial);
    font-size:15px;
    line-height:1.85;
    overflow-wrap:anywhere;
}

.contact-phone-list{
    margin:0;
    padding:0;
    list-style:none;
}

.contact-phone-list li + li{
    margin-top:2px;
}

.contact-item a:not(.neshan-btn){
    display:inline-flex;
    min-height:28px;
    align-items:center;
    color:var(--color-navy);
    text-decoration:none;
    direction:ltr;
    unicode-bidi:isolate;
}

.contact-item a:not(.neshan-btn):hover{
    color:var(--color-primary-hover);
}

.contact-item a:not(.neshan-btn):focus-visible{
    outline:2px solid var(--color-focus);
    outline-offset:3px;
    border-radius:6px;
}

.contact-item address{
    margin:0;
    color:inherit;
    font:inherit;
}

.contact-item address span{
    display:block;
}

.neshan-btn{
    width:100%;
    min-height:52px;
    margin-top:20px;
    padding:12px 20px;
    border:1px solid var(--color-primary);
    border-radius:var(--radius-12);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--color-white);
    background:var(--color-primary);
    background-image:none;
    text-decoration:none;
    font-weight:var(--font-weight-bold);
    line-height:1.5;
    transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
}

.neshan-btn:hover{
    color:var(--color-white);
    background:var(--color-primary-hover);
    border-color:var(--color-primary-hover);
}

.neshan-btn:active{
    transform:translateY(1px);
}

.neshan-btn:focus-visible{
    outline:3px solid var(--color-focus);
    outline-offset:3px;
    box-shadow:none;
}

/* Footer */

footer{
    width:min(92%,var(--container-max-width));
    margin:var(--space-16) auto 24px;
}

.footer-container{
    padding:28px 32px;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(170px,.8fr) minmax(170px,.8fr);
    align-items:start;
    gap:32px;
    background:rgba(255,255,255,.64);
    backdrop-filter:none;
    border:1px solid rgba(20,33,61,.08);
    border-radius:var(--radius-16);
    box-shadow:none;
}

.footer-about{
    min-width:0;
    display:flex;
    align-items:center;
    gap:18px;
}

.footer-about .footer-brand-logo{
    width:84px;
    height:auto;
    flex:0 0 auto;
    margin:0;
    object-fit:contain;
}

.footer-brand-copy{
    min-width:0;
}

.footer-about h3,
.footer-links h4,
.footer-contact h4{
    margin:0;
    color:var(--color-navy);
}

.footer-about h3{
    font-size:20px;
    line-height:1.55;
}

.footer-about p{
    margin:5px 0 0;
    color:var(--color-text-secondary);
    line-height:1.7;
}

.footer-links{
    display:block;
}

.footer-links h4,
.footer-contact h4{
    margin-bottom:10px;
    font-size:16px;
    line-height:1.7;
}

.footer-link-list,
.footer-social{
    margin:0;
    padding:0;
    list-style:none;
}

.footer-link-list{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
}

.footer-link-list a,
.footer-link-button{
    min-width:44px;
    min-height:44px;
    padding:4px 0;
    display:inline-flex;
    align-items:center;
    color:var(--color-text-secondary);
    text-decoration:none;
    line-height:1.5;
}

.footer-link-list a:hover,
.footer-link-button:hover{
    color:var(--color-primary-hover);
}

.footer-link-list a:focus-visible,
.footer-link-button:focus-visible{
    margin:0;
    padding:4px 6px;
    outline:2px solid var(--color-focus);
    outline-offset:2px;
    border-radius:8px;
    box-shadow:none;
}

.footer-social{
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:10px;
}

.footer-social a{
    width:44px;
    height:44px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-12);
    background:var(--color-surface);
    box-shadow:none;
}

.footer-social a:hover{
    background:var(--color-background-blue);
    border-color:rgba(37,99,235,.28);
}

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

.copyright{
    margin:0;
    padding:14px 8px 0;
    border:0;
    color:var(--color-text-secondary);
    font-size:14px;
    line-height:1.8;
    text-align:center;
}

@media(max-width:900px){
    .footer-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px 32px;
        padding:26px 28px;
    }

    .footer-about{
        grid-column:1 / -1;
    }

    .footer-about .footer-brand-logo{
        width:76px;
    }
}

@media(max-width:640px){
    .contact-modal{
        width:calc(100% - 20px);
        max-height:92dvh;
        border-radius:var(--radius-20);
    }

    .contact-modal-header{
        min-height:68px;
        padding:14px 16px;
    }

    .contact-modal-header h2{
        padding-left:52px;
        font-size:23px;
    }

    .contact-modal .close{
        top:12px;
        left:12px;
    }

    .contact-modal-body{
        padding:14px 16px 16px;
    }

    .contact-items{
        grid-template-columns:1fr;
        border-radius:var(--radius-12);
    }

    .contact-item{
        min-height:0;
        padding:13px 14px;
        gap:12px;
        border-left:0 !important;
        border-bottom:1px solid var(--color-border);
    }

    .contact-item:last-child{
        border-bottom:0;
    }

    .contact-item i{
        width:40px;
        height:40px;
        flex-basis:40px;
        font-size:17px;
    }

    .contact-item dt{
        margin-bottom:3px;
    }

    .contact-item dd{
        line-height:1.75;
    }

    .contact-item address span{
        display:inline;
    }

    .contact-item address span:not(:last-child)::after{
        content:"، ";
    }

    .neshan-btn{
        min-height:50px;
        margin-top:14px;
    }

    footer{
        width:calc(100% - 30px);
        margin-top:var(--space-12);
    }

    .footer-container{
        grid-template-columns:1fr;
        gap:22px;
        padding:24px 18px;
        text-align:center;
        border-radius:var(--radius-16);
    }

    .footer-about{
        grid-column:auto;
        flex-direction:column;
        gap:10px;
    }

    .footer-about .footer-brand-logo{
        width:72px;
        margin:0 auto;
    }

    .footer-about h3{
        font-size:18px;
    }

    .footer-links h4,
    .footer-contact h4{
        margin-bottom:8px;
    }

    .footer-link-list{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
        gap:4px 16px;
    }

    .footer-link-list a,
    .footer-link-button{
        min-height:44px;
        padding:8px 2px;
    }

    .footer-social{
        justify-content:center;
        margin-top:8px;
    }

    .copyright{
        padding:12px 8px 0;
        font-size:13px;
    }
}

@media(max-width:380px){
    .contact-modal-body{
        padding-inline:12px;
    }

    .contact-item{
        padding-inline:12px;
    }

    .footer-container{
        padding-inline:16px;
    }
}