@font-face { font-family: "Lato WAS"; src: url("/fonts/lato-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lato WAS"; src: url("/fonts/lato-regular.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Lato WAS"; src: url("/fonts/lato-bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Lato WAS"; src: url("/fonts/lato-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
:root { --font-sans: "Lato WAS", Lato, Arial, sans-serif; --indigo: #384373; --deep: #252f5d; --saffron: #fad200; --sky: #83bce0; --sienna: #c85e45; --lilac: #cea3cc; --olive: #a1bf56; --paper: #f4f1e9; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--deep); background: var(--paper); font-family: var(--font-sans); font-weight: 300; letter-spacing: .02em; }
a { color: inherit; text-decoration: none; }
.welcome-wall { min-height: 100vh; }
.welcome-nav { position: absolute; inset: 0 0 auto; z-index: 10; width: min(1380px, calc(100% - 72px)); min-height: 100px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.35); color: white; }
.welcome-brand { display: flex; align-items: center; gap: 18px; }
.welcome-brand img { width: 116px; height: auto; filter: brightness(0) invert(1); }
.welcome-brand span { display: grid; gap: 3px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.5); }
.welcome-brand strong { font-size: 20px; font-weight: 500; letter-spacing: .09em; }
.welcome-brand small { font-size: 10px; letter-spacing: .15em; }
.welcome-nav-login { width: 160px; min-height: 52px; display: grid; place-items: center; padding: 0 20px; border: 1px solid rgba(255,255,255,.72); font-size: 16px; font-weight: 500; text-align: center; transition: background .2s, color .2s; }
.welcome-nav-login:hover, .welcome-nav-login:focus-visible { color: var(--deep); background: white; }
.welcome-hero { min-height: 700px; position: relative; display: flex; align-items: center; overflow: hidden; color: white; background: var(--indigo); }
.welcome-photo { position: absolute; inset: 0 0 0 auto; width: 52%; background: url("/brand/wasbkk-campus-signage.webp") 57% center / cover no-repeat; opacity: .38; }
.welcome-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--indigo) 0%, rgba(56,67,115,.64) 23%, rgba(56,67,115,.16) 66%, rgba(37,47,93,.08) 100%); }
.welcome-copy { position: relative; z-index: 2; width: min(1380px, calc(100% - 72px)); margin: 84px auto 0; }
.welcome-copy > * { max-width: 650px; }
.welcome-eyebrow { margin: 0 0 25px; color: var(--saffron); font-size: 13px; font-weight: 500; letter-spacing: .16em; }
.welcome-copy h1 { position: relative; margin: 0; max-width: 820px; font-size: clamp(62px, 8.3vw, 120px); font-weight: 300; line-height: .82; letter-spacing: .015em; text-shadow: 0 8px 38px rgba(4,9,28,.22); }
.welcome-copy h1 em { position: relative; display: inline-block; margin-top: .08em; color: var(--saffron); font-size: 1.08em; font-style: normal; font-weight: 500; letter-spacing: .07em; text-shadow: 0 9px 34px rgba(8,13,36,.3); }
.welcome-copy h1 em::after { display: none; }
.welcome-copy h1::after { content: ""; display: block; width: min(560px, 72%); height: 5px; margin-top: 30px; background: linear-gradient(90deg, var(--saffron) 0 78%, rgba(250,210,0,.18) 100%); }
.welcome-purpose { max-width: 590px; margin: 18px 0 24px; color: #f5f5f7; font-size: clamp(19px, 2vw, 25px); line-height: 1.45; }
.welcome-values { display: flex; align-items: center; gap: 11px; margin: 0 0 19px; color: white; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; }.welcome-values::before { content: ""; width: 34px; height: 2px; flex: 0 0 auto; background: var(--saffron); }
.welcome-school-tagline { margin:-12px 0 19px 45px; color:rgba(255,255,255,.72); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.welcome-note { display: flex; align-items: center; gap: 9px; margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }.welcome-note span { color: var(--saffron); font-size: 9px; }
.welcome-intro { width: min(1380px, calc(100% - 72px)); margin: auto; display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; padding: 78px 0 82px; }
.welcome-intro > div:first-child > p { margin: 0 0 13px; color: var(--sienna); font-size: 12px; font-weight: 500; letter-spacing: .13em; }.welcome-intro h2 { margin: 0; font-size: clamp(38px, 4vw, 58px); font-weight: 300; line-height: 1.02; }.welcome-intro h2 em { color: var(--sienna); font-style: normal; }
.welcome-features { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #d4d0c8; border-bottom: 1px solid #d4d0c8; }
.welcome-features article { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 28px 22px; border-right: 1px solid #d4d0c8; }.welcome-features article:last-child { border-right: 0; }.welcome-features article > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--deep); background: var(--sky); border-radius: 50%; font-size: 18px; }.welcome-features article:nth-child(2) > span { background: var(--saffron); }.welcome-features article:nth-child(3) > span { background: var(--lilac); }.welcome-features article div { display: grid; align-content: start; gap: 7px; }.welcome-features strong { font-size: 18px; font-weight: 500; }.welcome-features small { color: #656876; font-size: 14px; line-height: 1.45; }
.welcome-footer { min-height: 0; display: grid; grid-template-columns: minmax(220px,.75fr) minmax(360px,1.4fr) auto; align-items: start; justify-content: stretch; gap: 22px 38px; padding: 30px max(36px, calc((100% - 1380px)/2)) 24px; color: white; background: var(--deep); border-top: 5px solid var(--saffron); }.welcome-footer > div span, .welcome-footer > div small { display: block; }.welcome-footer > div span { color: var(--saffron); font-size: 14px; font-weight: 500; letter-spacing: .09em; }.welcome-footer > div small { margin-top: 6px; color: #cfd3e3; font-size: 13px; line-height: 1.45; }.welcome-footer address { margin: 0; color: #cfd3e3; font-size: 13px; font-style: normal; line-height: 1.5; }.welcome-footer address strong { display: block; margin-bottom: 4px; color: white; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }.welcome-footer nav { display: grid; justify-items: start; gap: 8px; font-size: 13px; }.welcome-footer a { color: white; text-decoration: underline; text-underline-offset: 3px; }.welcome-footer .welcome-copyright { grid-column: 1 / -1; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.16); color: #9fa6c1; font-size: 11px; }
.welcome-footer .release-meta { display: block; margin-top: 5px; color: #c8cde0; overflow-wrap: anywhere; }.welcome-footer .release-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }
.welcome-footer .footer-values { display: block; margin-top: 13px; color: white; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .05em; }
.welcome-footer .footer-school-tagline { display:block; margin-top:4px; color:#aeb5cc; font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width: 980px) { .welcome-nav, .welcome-copy, .welcome-intro { width: calc(100% - 44px); }.welcome-intro { grid-template-columns: 1fr; gap: 36px; }.welcome-hero { min-height: 650px; }.welcome-photo { width: 46%; opacity: .28; }.welcome-copy { margin-top: 82px; }.welcome-copy > * { max-width: 58%; }.welcome-features { grid-template-columns: 1fr; }.welcome-features article { border-right: 0; border-bottom: 1px solid #d4d0c8; }.welcome-features article:last-child { border-bottom: 0; } }
@media (max-width: 760px) { .welcome-footer { grid-template-columns: 1fr; gap: 20px; padding: 25px 18px; }.welcome-footer .welcome-copyright { grid-column: 1; } }
@media (max-width: 620px) { .welcome-nav { position: absolute; width: calc(100% - 30px); min-height: 84px; }.welcome-brand img { width: 92px; }.welcome-brand span { display: none; }.welcome-nav-login { width: 132px; min-height: 46px; padding: 0 12px; font-size: 15px; }.welcome-hero { min-height: 0; display: block; padding: 116px 0 44px; background: linear-gradient(145deg, var(--deep) 0%, var(--indigo) 64%, #465487 100%); }.welcome-photo { display: block; inset: 0; width: 100%; background-position: 54% center; opacity: .14; }.welcome-photo::after { background: rgba(37,47,93,.35); }.welcome-copy { width: calc(100% - 30px); margin: 0 auto; }.welcome-copy > * { max-width: none; }.welcome-eyebrow { max-width: 310px; margin-bottom: 18px; font-size: 10px; line-height: 1.5; }.welcome-copy h1 { font-size: clamp(47px, 15vw, 66px); line-height: .88; }.welcome-copy h1::after { width: 70%; height: 4px; margin-top: 20px; }.welcome-purpose { margin: 17px 0 13px; font-size: 18px; line-height: 1.4; }.welcome-values { margin: 0 0 17px; font-size: 13px; }.welcome-values::before { width: 26px; }.welcome-school-tagline { margin:-11px 0 16px 37px; font-size:9px; }.welcome-note { align-items: flex-start; font-size: 12px; line-height: 1.4; }.welcome-intro { width: calc(100% - 30px); padding: 48px 0; }.welcome-intro h2 { font-size: 39px; }.welcome-features article { padding: 23px 12px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }