/* Shared responsive support; each page keeps its existing visual styles. */
:root {
    color-scheme: light;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    --main-color: #0F4C81;
    --light-blue: #E8F1F9;
    --accent: #C9A24B;
}

html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
.responsive-image { display: block; width: 100%; max-width: 100%; }
.contact-photo .responsive-image,
.product-img-wrap .responsive-image { height: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible {
    outline: 3px solid #FACC15;
    outline-offset: 3px;
}

/* Keep the original blue header; these rules only align its contents. */
.site-header {
    position: relative;
    z-index: 1030;
    padding: 0 !important;
    background-color: var(--main-color) !important;
}
.site-header-inner {
    min-height: 78px;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
}
.site-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: 0 !important;
    padding: 8px 0 !important;
    text-decoration: none;
}
.site-brand-mark { display: block; flex: 0 0 auto; line-height: 0; }
.site-brand-mark svg {
    display: block;
    width: auto !important;
    height: 42px !important;
    max-width: 155px;
}
.site-brand-name {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35;
    white-space: nowrap !important;
    margin: 0 !important;
}
.site-nav { justify-content: flex-end; }
.site-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #fff !important;
}
.site-nav .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.12);
}
.site-nav-toggle {
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 8px 10px;
    border-color: rgba(255,255,255,.65) !important;
    border-radius: 6px;
}
.site-nav-toggle .navbar-toggler-icon { filter: brightness(0) invert(1); }

/* The original carousel dimensions, with a smaller image on narrow screens. */
.carousel-container { min-width: 0; }
.carousel-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 380px;
    object-fit: cover;
}
.carousel-dots button {
    min-width: 28px;
    min-height: 28px;
    border: 0;
    padding: 9px;
    background: transparent;
}
.carousel-dots button::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    border-radius: 50%;
    background: rgba(255,255,255,.72);
}
.carousel-dots button.active::before { background: #fff; }

.info-list .value { min-width: 0; overflow-wrap: anywhere; }
.info-list .value a { color: var(--main-color); text-decoration: none; }
.footer li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.footer a[href^="tel:"], .footer a[href^="mailto:"] { text-decoration: none; }
.about-img-card { z-index: 0; }
.product-img-wrap img { object-fit: contain !important; }

@media (max-width: 991.98px) {
    .site-header-inner { min-height: 72px; }
    .site-brand { max-width: calc(100% - 58px); }
    .site-brand-mark svg { height: 34px !important; max-width: 126px; }
    .site-brand-name { font-size: clamp(12px, 1.8vw, 15px) !important; }
    .site-nav { flex-basis: 100%; width: 100%; border-top: 1px solid rgba(255,255,255,.2); }
    .site-nav .navbar-nav { padding: 8px 0 12px; }
    .site-nav .nav-link { min-height: 46px; justify-content: flex-start; }
}

@media (max-width: 767.98px) {
    .banner { padding: 52px 0 !important; }
    .banner h1 { font-size: clamp(25px, 7.2vw, 34px); line-height: 1.3; }
    .banner p {
        max-width: 38rem;
        margin-right: auto !important;
        margin-left: auto !important;
        font-size: 16px !important;
        line-height: 1.7;
    }
    .carousel-slide img { height: clamp(240px, 65vw, 360px); }
    .about-img-card { position: static !important; top: auto !important; margin-top: 26px; }
    .info-card, .contact-card, .honor-card, .project-card { padding: 26px 20px !important; }
    .contact-card .phone-box { flex-wrap: wrap; min-height: 52px; }
    .contact-card .phone-box a { font-size: clamp(16px, 4.8vw, 20px); overflow-wrap: anywhere; }
    .category-tabs { max-width: 100%; margin-bottom: 28px; }
    .category-tab { min-height: 44px; padding: 10px 12px; font-size: 15px; }
    .footer .row { row-gap: 24px; }
}

@media (max-width: 575.98px) {
    .banner { padding: 44px 0 !important; }
    .banner h1 { font-size: clamp(24px, 7.4vw, 30px); }
    .banner p { font-size: 15px !important; }
    .site-header-inner { min-height: 66px; }
    .site-brand { gap: 7px; max-width: calc(100% - 54px); }
    .site-brand-mark svg { height: 27px !important; max-width: 98px; }
    .site-brand-name { font-size: clamp(10px, 3.2vw, 11px) !important; letter-spacing: -.03em; }
    .site-nav-toggle { min-width: 42px; min-height: 42px; }
    .page-banner { padding-block: 48px !important; }
    .page-banner h1 { font-size: clamp(29px, 8vw, 36px) !important; letter-spacing: 0 !important; }
    .section { padding-block: 44px !important; }
    .section h2 { margin-bottom: 26px; }
    .content-block h3 { font-size: 22px !important; padding-left: 12px !important; }
    .content-block p { font-size: 15px; text-align: left !important; }
    .mission-card { padding: 20px !important; }
    .honor-summary h2 { font-size: 25px; }
    .info-card, .contact-card, .honor-card, .project-card { padding: 22px 16px !important; }
    .section .col-lg-6 > div[style*="padding:40px"] { padding: 22px 18px !important; }
    .info-list li { gap: 10px; }
    .info-list .label { width: 58px !important; flex: 0 0 58px; }
    .contact-photo { width: 112px; height: 112px; }
    .honor-card .level-tag { top: 16px !important; right: 14px !important; }
    .footer ul { line-height: 2 !important; }
    .footer li { align-items: flex-start; }
}

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