:root {
    --navy:#153c59;
    --teal:#087f79;
    --ink:#203e50;
    --muted:#657784;
    --pale:#eef6f5;
    --line:#dfe8ec;
    --bs-primary:#087f79;
    --bs-body-color:#203e50;
    --bs-body-font-family:Tahoma,"Noto Sans Thai",system-ui,sans-serif
}

body {
    line-height:1.85;
    background:#fff
}

a {
    color:var(--teal);
    text-underline-offset:4px
}

h1,h2,h3 {
    line-height:1.45;
    font-weight:700;
    letter-spacing:-.025em
}

h2 {
    font-size:clamp(1.5rem,2.5vw,2rem)
}

h3 {
    font-size:1.12rem
}

.container {
    max-width:1240px;
    padding-left:28px;
    padding-right:28px
}

.topbar {
    background:var(--navy);
    color:#deebf1;
    font-size:.75rem;
    padding:8px 0
}

.topbar a {
    color:white;
    text-decoration:none
}

.site-header {
    background:rgba(255,255,255,.98);
    border-bottom:1px solid var(--line)
}

.navbar {
    padding:15px 0
}

.navbar-brand {
    margin-right:20px
}

.navbar-brand img {
    width:340px;
    height:auto;
    max-width:100%;
    object-fit:contain
}

.navbar-nav {
    gap:4px
}

.navbar .nav-link {
    font-size:.87rem;
    color:#4e626e;
    padding:10px 12px!important;
    border-radius:6px;
    white-space:nowrap
}

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

.navbar .nav-link.active {
    font-weight:bold
}

.navbar-toggler {
    border-color:var(--line);
    padding:7px;
    font-size:1rem
}

.skip-link {
    position:fixed;
    left:16px;
    top:-100px;
    background:#fff;
    padding:10px 20px;
    z-index:2000
}

.skip-link:focus {
    top:10px
}

:focus-visible {
    outline:3px solid #dc9d30!important;
    outline-offset:4px
}

.home-hero {
    padding:65px 0 75px;
    background:linear-gradient(115deg,#f0f7f6,#f9fbfb)
}

.eyebrow {
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.14em;
    color:var(--teal);
    margin-bottom:18px
}

.home-hero h1 {
    font-size:clamp(2.7rem,4.5vw,4rem);
    line-height:1.32;
    letter-spacing:-.045em;
    margin-bottom:22px;
    color:var(--navy)
}

.home-hero h1 span {
    color:var(--teal)
}

.hero-copy>p {
    font-size:1.12rem;
    color:var(--muted);
    margin-bottom:30px
}

.btn {
    border-radius:7px;
    padding:12px 22px;
    font-weight:600;
    font-size:.92rem
}

.btn-primary {
    --bs-btn-bg:var(--teal);
    --bs-btn-border-color:var(--teal);
    --bs-btn-hover-bg:#066963;
    --bs-btn-hover-border-color:#066963;
    --bs-btn-active-bg:#066963;
    --bs-btn-active-border-color:#066963
}

.btn-outline-primary {
    --bs-btn-color:var(--navy);
    --bs-btn-border-color:#bbcece;
    --bs-btn-hover-bg:var(--navy);
    --bs-btn-hover-border-color:var(--navy);
    --bs-btn-active-bg:var(--navy);
    --bs-btn-active-border-color:var(--navy)
}

.hero-note {
    font-size:.78rem;
    color:var(--muted);
    margin-top:25px;
    display:flex;
    gap:8px;
    align-items:center
}

.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--teal);
    flex-shrink:0
}

.hero-photo {
    position:relative;
    border-radius:16px;
    overflow:hidden;
    box-shadow:15px 16px 0 #dceceb
}

.hero-photo>img {
    width:100%;
    height:400px;
    object-fit:cover
}

.photo-caption {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:linear-gradient(transparent,rgba(7,34,48,.9));
    padding:55px 28px 24px;
    color:white
}

.photo-caption span,.photo-caption small {
    display:block
}

.photo-caption span {
    font-size:1.1rem;
    font-weight:bold
}

.photo-caption small {
    opacity:.85;
    font-size:.77rem
}

.quick-section {
    border-bottom:1px solid var(--line)
}

.quick-links>div+div {
    border-left:1px solid var(--line)
}

.quick-links a {
    display:flex;
    align-items:center;
    gap:18px;
    padding:29px 20px;
    color:var(--navy);
    text-decoration:none;
    height:100%;
    transition:background .2s
}

.quick-links a:hover {
    background:var(--pale)
}

.quick-number {
    font-size:.75rem;
    color:var(--teal);
    font-weight:bold;
    align-self:flex-start;
    padding-top:4px
}

.quick-links strong,.quick-links small {
    display:block
}

.quick-links strong {
    font-size:.96rem
}

.quick-links small {
    font-size:.76rem;
    color:var(--muted)
}

.quick-links a>span:last-child {
    margin-left:auto;
    font-size:1.5rem;
    color:var(--teal)
}

.section-space {
    padding:75px 0;
    scroll-margin-top:120px
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:25px;
    margin-bottom:34px
}

.section-heading .eyebrow {
    margin-bottom:10px
}

.section-heading h2 {
    margin-bottom:0
}

.section-heading>p {
    font-size:.89rem;
    color:var(--muted);
    margin-bottom:0
}

.service-intro {
    padding-right:24px
}

.service-intro img {
    margin-bottom:20px;
    border-radius:10px;
    width:100%
}

.service-intro p {
    font-size:.92rem;
    color:var(--muted)
}

.text-link {
    font-size:.87rem;
    font-weight:bold;
    text-decoration:none
}

.service-card {
    height:100%;
    border:1px solid var(--line);
    padding:24px;
    border-radius:10px
}

.service-number {
    font-size:.7rem;
    letter-spacing:.1em;
    color:var(--teal);
    display:block;
    margin-bottom:14px
}

.service-card h3 {
    font-size:1rem
}

.service-card p {
    font-size:.84rem;
    color:var(--muted);
    margin-bottom:0
}

.about-section {
    background:var(--pale)
}

.about-lead {
    font-size:1.3rem;
    color:var(--navy);
    font-weight:bold
}

.about-section p:not(.about-lead) {
    font-size:.95rem;
    color:#536c79
}

.contact-panel {
    background:#f4f7f8;
    padding:30px;
    height:100%;
    border-radius:10px
}

.contact-panel>p {
    font-size:.87rem;
    color:var(--muted)
}

.contact-detail {
    margin-top:22px
}

.contact-detail>* {
    display:block
}

.contact-detail small {
    font-size:.7rem;
    color:var(--muted);
    margin-bottom:2px
}

.contact-detail a {
    font-size:1rem;
    font-weight:600;
    text-decoration:none
}

.contact-detail span {
    font-size:.88rem
}

.email {
    overflow-wrap:anywhere
}

.contact-detail .email {
    font-size:.86rem
}

.contact-map {
    width:100%;
    height:100%;
    min-height:430px;
    border:0;
    border-radius:10px;
    background:#eef3f4
}

.site-footer {
    background:var(--navy);
    color:#c7dae3;
    padding:50px 0 0;
    font-size:.8rem
}

.site-footer a {
    color:#d7eae9;
    text-decoration:none
}

.site-footer a:hover {
    text-decoration:underline
}

.footer-title {
    font-size:1.08rem;
    font-weight:bold;
    color:white;
    margin-bottom:7px
}

.site-footer h2 {
    font-size:.88rem;
    color:white;
    margin-bottom:15px
}

.footer-bottom {
    border-top:1px solid #ffffff20;
    padding:19px 0;
    margin-top:35px;
    font-size:.7rem;
    color:#b6ccd7
}

.page-heading {
    background:var(--pale);
    padding:32px 0 45px
}

.breadcrumb {
    font-size:.75rem;
    margin-bottom:30px;
    --bs-breadcrumb-divider:'›'
}

.breadcrumb a {
    text-decoration:none
}

.page-heading .eyebrow {
    margin-bottom:10px
}

.page-heading h1 {
    font-size:clamp(2rem,3vw,2.7rem);
    color:var(--navy);
    margin-bottom:12px
}

.page-heading p {
    color:var(--muted);
    font-size:.95rem;
    margin-bottom:0
}

.article-panel {
    max-width:940px;
    margin:auto;
    font-size:1rem;
    line-height:2.1
}

.article-panel h3 {
    color:var(--teal);
    font-size:1.35rem;
    margin-bottom:20px
}

.article-panel.wide {
    max-width:none;
    text-align:center
}

.organization-chart {
    max-width:1000px
}

.library-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-bottom:30px
}

.library-toolbar h2 {
    font-size:1.4rem;
    margin-bottom:7px
}

.library-toolbar p {
    font-size:.85rem
}

.search-box {
    position:relative;
    flex-shrink:0;
    width:320px
}

.search-box input {
    padding:13px 40px 13px 16px;
    border-color:#cbdcdf;
    font-size:.87rem;
    border-radius:8px
}

.search-box>span {
    position:absolute;
    right:16px;
    top:6px;
    color:var(--teal);
    font-size:1.5rem
}

.library-panel {
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:white;
    height:100%
}

.library-panel-heading {
    background:#f5f8f9;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:22px
}

.library-panel-heading h3 {
    font-size:1.08rem;
    margin:0;
    color:var(--navy)
}

.file-count {
    font-size:.7rem;
    color:var(--muted);
    white-space:nowrap
}

.document-item+.document-item {
    border-top:1px solid var(--line)
}

.document-link {
    display:flex;
    gap:14px;
    padding:22px;
    color:var(--ink);
    text-decoration:none;
    align-items:flex-start
}

.document-link:hover {
    background:#f1f8f7
}

.pdf-icon {
    background:#e7f3f1;
    color:var(--teal);
    border:1px solid #cee5e0;
    padding:7px 5px;
    border-radius:5px;
    font-size:.57rem;
    font-weight:bold;
    letter-spacing:.04em;
    margin-top:3px
}

.document-info {
    min-width:0;
    flex:1
}

.document-title {
    display:block;
    font-size:.9rem;
    line-height:1.7;
    overflow-wrap:anywhere
}

.document-info small {
    display:block;
    color:var(--muted);
    font-size:.67rem;
    margin-top:5px
}

.document-arrow {
    color:var(--teal);
    font-size:1.15rem
}

.empty-library {
    color:var(--muted);
    padding:25px;
    margin:0;
    font-size:.87rem
}

[hidden] {
    display:none!important
}

.search-status {
    font-size:.83rem
}

.form-control:focus {
    border-color:var(--teal);
    box-shadow:0 0 0 .2rem #087f791a
}


@media(min-width:1400px) {
    .container {
    max-width:1280px
}

.navbar-brand img {
    width:380px
}


}


@media(max-width:1199px) {
    .navbar-brand img {
    width:340px
}

.navbar-collapse {
    padding-top:20px
}

.navbar-nav {
    gap:5px
}

.navbar .nav-link {
    padding:12px!important
}

.hero-photo>img {
    height:380px
}


}


@media(max-width:767px) {
    .container {
    padding-left:22px;
    padding-right:22px
}

.topbar {
    font-size:.64rem
}

.navbar {
    padding:13px 0
}

.navbar-brand {
    max-width:calc(100% - 65px);
    margin:0
}

.navbar-brand img {
    width:300px
}

.home-hero {
    padding:40px 0 50px
}

.home-hero h1 {
    font-size:2.85rem
}

.eyebrow {
    font-size:.61rem;
    letter-spacing:.09em
}

.hero-copy>p {
    font-size:.96rem
}

.hero-photo>img {
    height:290px
}

.hero-photo {
    box-shadow:8px 9px 0 #dceceb
}

.hero-actions .btn {
    padding:12px 15px;
    font-size:.81rem
}

.quick-links>div+div {
    border-left:0;
    border-top:1px solid var(--line)
}

.quick-links a {
    padding:20px 5px
}

.section-space {
    padding:48px 0
}

.section-heading {
    display:block;
    margin-bottom:25px
}

.section-heading>p {
    margin-top:15px
}

.service-intro {
    padding-right:0
}

.service-intro img {
    max-width:400px
}

.service-card {
    padding:22px
}

.about-lead {
    font-size:1.1rem
}

.contact-map {
    min-height:330px
}

.page-heading {
    padding:23px 0 32px
}

.breadcrumb {
    margin-bottom:23px
}

.page-heading p {
    font-size:.85rem
}

.library-toolbar {
    display:block
}

.search-box {
    width:100%;
    margin-top:22px
}

.article-panel {
    font-size:.94rem
}

.site-footer {
    padding-top:35px
}


}


@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important
}


}