/*
 * DBT cinematic editorial theme
 * Shared visual layer inspired by the Showcase direction. This file is loaded
 * after every page stylesheet so page features stay intact while the public
 * site reads as one system. Background video elements are intentionally kept
 * visible and their source/playback rules remain owned by their page scripts.
 */

:root{
  /* ── Brand identity ───────────────────────────────────────────────────────
     Pink is the DBT programme's identity colour, not a decorative accent, so
     it keeps every bit of the ground it holds. What changed is that it used to
     exist as seven near-duplicate literals scattered through the stylesheets,
     which is why it never looked quite settled: the same colour rendered
     differently depending on whether a rule used a token or a hard-coded hex.

     One canonical value now, with derivatives that each have a stated job. The
     canonical pink is the one that was both the dominant literal and the value
     in the original identity layer, and it carries text safely: 5.42:1 on white
     and 4.76:1 on the paper background. The near-identical pink the theme layer
     used to define instead managed only 4.22:1 there and failed AA for
     body-sized text.                                                          */
  --brand-pink:#c81e6f;         /* the identity colour: text, CTAs, key fills  */
  --brand-pink-deep:#840c48;    /* deep fills, and pink separated from pink    */
  --brand-pink-bright:#ff3d96;  /* accents on DARK surfaces only (3.3:1 white) */
  --brand-pink-tint:#f6bce0;    /* text and rules on DARK surfaces only        */
  --brand-pink-wash:#fbeaf2;    /* tinted panels on light surfaces             */

  --sx-black:#080a09;
  --sx-charcoal:#111412;
  --sx-panel:#171a18;
  --sx-paper:#f2f0e9;
  --sx-white:#fff;
  --sx-pink:var(--brand-pink);
  --sx-pink-soft:var(--brand-pink-tint);
  --sx-hot-pink:var(--brand-pink-bright);
  --sx-blue:#83bae7;
  --sx-text:#161917;
  --sx-muted:#626963;
  --sx-line:rgba(17,20,18,.17);
  --sx-line-dark:rgba(255,255,255,.18);
  --navy:var(--sx-black);
  --blue:#347da9;
  --cyan:var(--sx-blue);
  --orange:var(--sx-pink);
  --ink:var(--sx-text);
  --muted:var(--sx-muted);
  --line:var(--sx-line);
  --paper:var(--sx-paper);
  --plum:var(--sx-black);
  --wine:var(--brand-pink-deep);
  --magenta:var(--sx-pink);
  --rose:var(--sx-blue);
  --blush:#eeede6; /* lifted from #e8e7e0: the identity pink needs a 4.5:1 backdrop and only reached 4.38:1 on the old value */
  --cream:var(--sx-paper);
  --ink-2:var(--sx-text);
  --hairline:var(--sx-line);
  --shadow:0 30px 80px rgba(8,10,9,.13);
}

html{scroll-padding-top:132px}
body{
  background:var(--sx-paper);
  color:var(--sx-text);
  text-rendering:optimizeLegibility;
}
::selection{background:var(--sx-hot-pink);color:#fff}

/* Site chrome */
.utility{
  background:var(--sx-pink);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.utility .container{height:34px}
.site-header,
[data-theme="dark"] .site-header{
  background:rgba(8,10,9,.92);
  border-bottom:1px solid var(--sx-line-dark);
  box-shadow:none;
  backdrop-filter:blur(22px) saturate(1.15);
}
.site-header.is-scrolled,
[data-theme="dark"] .site-header.is-scrolled{
  background:rgba(8,10,9,.985);
  box-shadow:0 1px 2px rgba(7,20,42,.07),0 18px 55px rgba(0,0,0,.28);
}
.nav-wrap{height:88px}
.brand img{border-radius:0;border:1px solid rgba(255,255,255,.2);padding:3px}
.brand strong{color:#fff;font-weight:700}
.brand small{color:rgba(255,255,255,.57);letter-spacing:.08em}
.nav-wrap nav{color:rgba(255,255,255,.84)}
.nav-wrap nav>a:hover,.nav-item>a:hover{color:var(--sx-hot-pink)!important;opacity:1!important}
.nav-wrap nav>a.active,.nav-item>a.active{color:#fff}
.nav-wrap nav>a.active:before{height:2px;bottom:-28px;background:var(--sx-hot-pink)}
.nav-item>a:after{color:var(--sx-blue)}
.search-toggle,.menu-toggle{border-color:rgba(255,255,255,.28);border-radius:999px;color:#fff}
.search-toggle:hover{background:var(--sx-hot-pink);border-color:var(--sx-hot-pink);color:#fff}
.nav-dropdown,
[data-theme="dark"] .nav-dropdown{
  background:rgba(14,16,15,.98);
  border:1px solid var(--sx-line-dark);
  border-radius:0;
  box-shadow:0 1px 2px rgba(7,20,42,.07),0 28px 70px rgba(0,0,0,.42);
  padding:8px;
}
.nav-dropdown a,
[data-theme="dark"] .nav-dropdown a{color:rgba(255,255,255,.8);border-radius:0;border-left:2px solid transparent}
.nav-dropdown a:hover,
[data-theme="dark"] .nav-dropdown a:hover{background:rgba(255,255,255,.07);color:var(--sx-hot-pink);border-left-color:var(--sx-pink)}

/* Shared cinematic hero language. The homepage keeps its bespoke Showcase hero. */
:is(
  .page-hero,
  .pdft-hero,
  .achievement-hero,
  .admission-hero,
  .download-hero,
  .event-hero,
  .contact-luxe-hero,
  .services-luxe-hero,
  .location-hero,
  .people-hero,
  .ar-hero,
  .pg-hero,
  .future-hero,
  .quiz-hero,
  .skillmap-hero,
  .campus-map-hero,
  .legacy-curriculum-hero,
  .path-hero,
  .history-hero,
  .vision-hero
){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--sx-black);
  color:#fff;
}
:is(
  .page-hero,
  .pdft-hero,
  .achievement-hero,
  .admission-hero,
  .download-hero,
  .event-hero,
  .contact-luxe-hero,
  .services-luxe-hero,
  .location-hero,
  .people-hero,
  .ar-hero,
  .pg-hero,
  .future-hero,
  .quiz-hero,
  .skillmap-hero,
  .campus-map-hero,
  .legacy-curriculum-hero,
  .path-hero
)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.045) 50%,transparent 50.2%),
    linear-gradient(transparent 49.8%,rgba(255,255,255,.045) 50%,transparent 50.2%),
    radial-gradient(circle at 76% 42%,rgba(217,29,112,.2),transparent 28%),
    radial-gradient(circle at 60% 15%,rgba(131,186,231,.13),transparent 24%);
  background-size:72px 72px,72px 72px,100% 100%,100% 100%;
  mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 100%);
}
:is(
  .page-hero,
  .pdft-hero,
  .achievement-hero,
  .admission-hero,
  .download-hero,
  .event-hero,
  .contact-luxe-hero,
  .services-luxe-hero,
  .location-hero,
  .people-hero,
  .ar-hero,
  .pg-hero,
  .future-hero,
  .quiz-hero,
  .skillmap-hero,
  .campus-map-hero,
  .legacy-curriculum-hero,
  .path-hero
) > .container{position:relative;z-index:2}
.page-hero{padding:clamp(74px,9vw,132px) 0 clamp(64px,8vw,112px)}
:is(.page-hero,.achievement-hero,.admission-hero,.download-hero,.event-hero,.campus-map-hero,.legacy-curriculum-hero) h1{
  color:#fff;
  font-size:clamp(3.15rem,7vw,7rem);
  line-height:.92;
  letter-spacing:-.07em;
  text-wrap:balance;
}
:is(.page-hero,.achievement-hero,.admission-hero,.download-hero,.event-hero,.campus-map-hero,.legacy-curriculum-hero) h1 em,
:is(.page-hero,.achievement-hero,.admission-hero,.download-hero,.event-hero,.campus-map-hero,.legacy-curriculum-hero) h1 span{
  color:var(--sx-blue);
  font-style:normal;
}
:is(.page-hero,.achievement-hero,.admission-hero,.download-hero,.event-hero,.campus-map-hero,.legacy-curriculum-hero) p{
  color:rgba(255,255,255,.72);
  max-width:690px;
}
/* Micro-label typography is the same everywhere; only the colour depends on what
   the label is sitting on. */
.eyebrow,.mini-label,.section-kicker p{
  font-family:Manrope,"IBM Plex Sans Thai",sans-serif;
  font-weight:800;
  letter-spacing:.18em;
}
/* The pale tint is a dark-surface colour. It used to be applied to every .eyebrow
   and .mini-label on the site, including the ones on white and paper sections,
   where it measured 1.5–1.9:1 against the background — far under the 4.5:1 AA
   needs at this size, so those labels were barely visible. On light surfaces the
   label now takes the full identity pink (5.42:1 on white), which makes the brand
   colour more present on those sections than it was, not less.                 */
.eyebrow,.mini-label,.section-kicker p{color:var(--brand-pink)}
:is(.page-hero,.pdft-hero,.achievement-hero,.admission-hero,.download-hero,.event-hero,.contact-luxe-hero,.services-luxe-hero,.campus-map-hero,.legacy-curriculum-hero,.history-hero,.vision-hero,.people-hero,.location-hero,.ar-hero,.pg-hero,.future-hero,.quiz-hero,.skillmap-hero,.path-hero) :is(.eyebrow,.mini-label,.section-kicker p){
  color:var(--brand-pink-tint);
}
.breadcrumb{color:rgba(255,255,255,.48)}
.breadcrumb a{color:rgba(255,255,255,.76)}
.breadcrumb a:hover{color:var(--sx-hot-pink)}

/* Never hide or replace the site's cinematic video layers. Opacity remains
   controlled by each page (important for the campus scene cross-fade). */
:is(.history-hero-video,.vision-hero-video,.loop-video,.scene-video,.hero-video video){
  display:block!important;
  visibility:visible!important;
}
.scene-video.is-active{opacity:1}
.scene-bg{z-index:0}
.history-hero-content,.vision-hero-grid,.page-hero-cinema>.container,
.legacy-curriculum-hero>.container,.campus-map-hero>.container{position:relative;z-index:2}
.history-hero-shade,.vision-hero:after,.hero-cinema-overlay,.scene-video-overlay{pointer-events:none}
.history-hero-content :is(h1,p,span),.vision-hero-copy :is(h1,p,span),
.page-hero-cinema .container :is(h1,p,.eyebrow),.legacy-hero-copy :is(h1,p,.eyebrow),
.campus-map-hero>.container :is(h1,p,.eyebrow){text-shadow:0 2px 22px rgba(0,0,0,.9)}

/* Keep the campus description readable over every selectable video scene. */
body[data-page="campus-map"] .campus-map-hero p,
body[data-page="campus-map"] .campus-map-hero.scene-2 p{
  max-width:720px;
  padding:14px 20px;
  border:1px solid rgba(255,111,178,.58);
  border-left:4px solid var(--sx-hot-pink);
  border-radius:14px;
  background:linear-gradient(110deg,rgba(8,10,9,.9),rgba(48,9,29,.78));
  color:#fff!important;
  box-shadow:0 18px 46px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  text-shadow:none!important;
}

/* Career pathway uses its own contained hero rather than a full-width banner. */
body[data-page="career-path"] .path-hero{
  min-height:470px;
  margin-bottom:72px;
  padding:clamp(38px,5vw,68px);
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:clamp(38px,6vw,86px);
  border:1px solid rgba(255,255,255,.17);
  background:
    radial-gradient(circle at 83% 36%,rgba(255,61,150,.22),transparent 28%),
    linear-gradient(125deg,#080a09 0%,#0d100f 58%,#25101c 100%);
  box-shadow:0 1px 2px rgba(7,20,42,.07),0 32px 80px rgba(8,10,9,.14);
}
body[data-page="career-path"] .path-hero>div{position:relative;z-index:2;min-width:0}
body[data-page="career-path"] .path-hero h1{
  max-width:760px;
  margin:22px 0 24px;
  color:#fff;
  font-size:clamp(2.9rem,4.6vw,5.35rem);
  line-height:1.08;
  letter-spacing:-.06em;
  text-wrap:balance;
}
body[data-page="career-path"] .path-hero p{
  max-width:680px;
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:1.02rem;
  line-height:1.85;
}
body[data-page="career-path"] .path-hero>div:first-child>a{
  display:inline-flex;
  align-items:center;
  margin-top:28px;
  padding:12px 19px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
body[data-page="career-path"] .path-hero>div:first-child>a:hover{
  background:var(--sx-hot-pink);
  border-color:var(--sx-hot-pink);
  transform:translateY(-2px);
}
body[data-page="career-path"] .path-visual{
  min-height:340px;
  background:radial-gradient(ellipse,rgba(255,255,255,.18),rgba(255,61,150,.09) 40%,transparent 70%);
}
body[data-page="career-path"] .path-orbit{border-color:rgba(255,157,204,.62)}
body[data-page="career-path"] .path-visual-core{
  background:linear-gradient(145deg,#ff4b9e,#b91060);
  color:#fff;
  box-shadow:0 1px 2px rgba(7,20,42,.07),0 25px 70px rgba(217,29,112,.35);
}
body[data-page="career-path"] .path-node{
  min-width:142px;
  border-color:rgba(255,157,204,.58);
  background:rgba(255,255,255,.96);
  color:#1b1016;
  box-shadow:0 1px 2px rgba(7,20,42,.07),0 15px 38px rgba(0,0,0,.28);
  text-align:center;
}
body[data-page="career-path"] .path-visual>small{color:rgba(255,255,255,.52)}

@media(max-width:1000px){
  body[data-page="career-path"] .path-hero{grid-template-columns:minmax(0,1.05fr) minmax(290px,.75fr);padding:42px;gap:32px}
  body[data-page="career-path"] .path-hero h1{font-size:clamp(2.7rem,5.4vw,4rem)}
  body[data-page="career-path"] .path-node{min-width:118px;padding:10px 12px}
}
@media(max-width:760px){
  body[data-page="career-path"] .path-hero{min-height:auto;grid-template-columns:1fr;padding:30px 24px;gap:18px;margin-bottom:48px}
  body[data-page="career-path"] .path-hero h1{font-size:clamp(2.45rem,11vw,3.5rem);line-height:1.12}
  body[data-page="career-path"] .path-visual{min-height:275px}
  body[data-page="career-path"] .path-node{min-width:104px;padding:9px 10px;font-size:.5rem}
}

/* Tool and utility pages */
.pdft-hero{padding:clamp(72px,8vw,116px) 0;background:var(--sx-black)}
.pdft-hero h1{
  color:#fff;
  font-size:clamp(3rem,6.2vw,6rem);
  line-height:.94;
  letter-spacing:-.065em;
}
.pdft-hero p,.pdft-hero-badges{color:rgba(255,255,255,.7)}
.pdft-hero-summary{background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.045))!important;color:#fff!important;border:1px solid rgba(255,255,255,.23)!important;border-radius:20px!important;aspect-ratio:auto;display:flex!important;flex-direction:column;justify-content:center;box-shadow:0 24px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.2)!important}
.pdft-hero-summary strong{color:#fff!important}
.pdft-hero-summary i{background:rgba(255,255,255,.35)!important}

/* ── Craft layer ────────────────────────────────────────────────────────────
   This file is the last stylesheet on every page, so it is where the shared
   design decisions are settled once instead of drifting per page.

   Corner radii use one 5-step scale (2/4/8/14/20px, plus 999px pills and 50%
   circles) — the stylesheets previously carried 34 different radii, every whole
   number from 1 to 28 among them, which reads as noise rather than intent.
   Elevation is two-layer: a tight contact shadow under a soft ambient one, the
   way a real object meets a surface.                                          */
:root{
  --r-xs:2px;--r-sm:4px;--r-md:8px;--r-lg:14px;--r-xl:20px;--r-pill:999px;
  /* Tinted with this theme's own near-black ink (--sx-black), not a generic grey,
     so shadows sit in the palette instead of greying the paper background out. */
  --shadow-sm:0 1px 2px rgba(8,10,9,.06),0 4px 12px rgba(8,10,9,.07);
  --shadow-md:0 1px 2px rgba(8,10,9,.06),0 14px 32px rgba(8,10,9,.10);
  --shadow-lg:0 2px 4px rgba(8,10,9,.07),0 30px 72px rgba(8,10,9,.14);
  /* Redefined here so every existing var(--shadow) picks up the layered version. */
  --shadow:var(--shadow-lg);
  --space-section:clamp(104px,9vw,168px)}

/* Editorial rhythm — more air between sections; expensive things are given room. */
.section{padding-block:var(--space-section)}
/* Running prose gets a measure. Past roughly 70 characters the eye loses the
   start of the next line, and a full 1240px column of text never looks composed. */
.news-detail-content p,.news-detail-content ul,.news-detail-content ol,
.intro-copy>p,.contact-copy>p,.section-head>p{max-width:68ch}
.section-head h2,.intro-copy h2,.service-title h2,.contact-copy h2,
.people-intro h2,.vision-section-head h2,.identity-head h2,.legacy-heading h2{
  color:var(--sx-text);
  font-size:clamp(2.7rem,5vw,5.4rem);
  line-height:.98;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.section-head>p,.intro-copy .lead,.service-title p{color:var(--sx-muted)}
.section-kicker span{color:#c9cbc5}
.section-kicker p{color:var(--sx-pink)}

/* Buttons become the outlined, tactile controls used in the reference. */
.button,.hero-scroll,.vision-hero-copy>a,.vision-cta a,.contact-hero-actions a{
  border-radius:999px;
  font-weight:800;
  letter-spacing:.01em;
}
.button-primary,.button-dark{
  background:var(--sx-black);
  color:#fff;
  border:1px solid var(--sx-black);
}
.button-primary:hover,.button-dark:hover{
  background:var(--sx-hot-pink);
  border-color:var(--sx-hot-pink);
  color:#fff;
}
.button-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.48)}
.button-light:hover{background:var(--sx-hot-pink);border-color:var(--sx-hot-pink);color:#fff}

/* Cards: crisp museum-label geometry with pink and restrained blue signals. */
:is(.news-card,.faq-card,.profile-card,.achievement-card,.document-card,.service-card,.tool-card,.learning-card,.career-explore-card,.admission-card,.event-card,.office-card){
  border-radius:0;
  border-color:var(--sx-line);
  box-shadow:none;
}
:is(.news-card,.faq-card,.profile-card,.achievement-card,.document-card,.service-card,.tool-card,.learning-card,.career-explore-card,.admission-card,.event-card,.office-card):hover{
  box-shadow:0 1px 2px rgba(7,20,42,.07),0 24px 60px rgba(8,10,9,.14);
}
.news-art.cyan{background:var(--sx-blue)}
.news-art.orange{background:var(--sx-pink)}
.news-art.navy{background:var(--sx-black)}
.subject-card{border-radius:0}
.subject-card.dark{background:var(--sx-black)}
.subject-card.blue{background:var(--sx-pink)}
.subject-card.light{background:#f6b5d5;color:var(--sx-black)}
.subject-card.light li{border-color:rgba(8,10,9,.2)}
.stats-band{background:var(--sx-black)}
.stat strong{color:var(--sx-hot-pink)}
.signal-strip{background:var(--sx-hot-pink);color:#fff}
.signal-strip i{background:#fff}
.people,.people-directory{background:var(--sx-black)}
.admission{background:linear-gradient(112deg,var(--sx-black),#321221 60%,var(--sx-pink))}
.student-services,.curriculum,.careers{background:var(--blush)}
.quick-card:before{background:var(--sx-hot-pink)}

/* Inputs remain high-contrast in both light and dark preference modes. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{
  accent-color:var(--sx-pink);
}
.contact-form,.newsletter-form,.search-panel-inner{border-radius:0}
.contact-form input,.contact-form textarea,
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),main select,main textarea{
  border-color:rgba(17,20,18,.3);
}
main input:focus,main select:focus,main textarea:focus{border-color:var(--sx-pink);outline-color:var(--sx-pink)}

/* Search and AI are part of the same visual language. */
.search-panel{background:rgba(8,10,9,.86)}
.search-panel-inner,[data-theme="dark"] .search-panel-inner{background:var(--sx-paper);color:var(--sx-text)}
.search-top,[data-theme="dark"] .search-top,.search-field input,[data-theme="dark"] .search-field input{color:var(--sx-text)}
.search-field{border-bottom-color:var(--sx-black)}
.ai-toggle{background:var(--sx-pink);box-shadow:0 1px 2px rgba(7,20,42,.07),0 16px 42px rgba(0,0,0,.35)}
.ai-toggle:hover{background:var(--sx-hot-pink);color:#fff}
.ai-assistant>header{background:var(--sx-black)}
.ai-form button{background:var(--sx-pink)}

/* Footer */
footer{
  background:var(--sx-black);
  color:rgba(255,255,255,.62);
  border-top:1px solid var(--sx-line-dark);
}
.footer-main b,.footer-brand strong{color:#fff}
.footer-main a:hover{color:var(--sx-hot-pink)}
.footer-newsletter{border-radius:0;border-color:var(--sx-line-dark);background:rgba(255,255,255,.035)}
.newsletter-inline input{border-radius:999px}
.newsletter-inline button{border-radius:999px;background:var(--sx-hot-pink);color:#fff}
.footer-social{background:#050605;border-color:var(--sx-line-dark)}
.footer-social a{border-radius:999px}
.footer-social a:hover{background:var(--sx-hot-pink);border-color:var(--sx-hot-pink);color:#fff}
.visitor-count{border-radius:0;border-color:var(--sx-line-dark)}

/* Dark preference keeps the same identity with readable paper/surface swaps. */
[data-theme="dark"] body{--sx-paper:#0d100e;--sx-text:#f2f0e9;--sx-muted:#a8aea8;--sx-line:rgba(255,255,255,.14);--cream:#0d100e;--blush:#171a18;--ink-2:#f2f0e9;--hairline:rgba(255,255,255,.14);background:#0d100e;color:#f2f0e9}
[data-theme="dark"] :is(.section-head h2,.intro-copy h2,.service-title h2,.contact-copy h2,.people-intro h2,.vision-section-head h2,.identity-head h2,.legacy-heading h2){color:#f2f0e9}
[data-theme="dark"] :is(.student-services,.curriculum,.careers){background:#121512}
[data-theme="dark"] .search-panel-inner{background:#171a18;color:#f2f0e9}
[data-theme="dark"] .search-top,[data-theme="dark"] .search-field input{color:#f2f0e9}

@media(max-width:1000px){
  .nav-wrap nav{gap:12px}
  .pdft-hero-summary{border-radius:20px!important;aspect-ratio:auto}
}
@media(max-width:900px){
  html{scroll-padding-top:80px}
  .nav-wrap{height:78px}
  .nav-wrap nav{top:78px;background:rgba(8,10,9,.99)}
  .nav-dropdown,[data-theme="dark"] .nav-dropdown{border:0;border-left:1px solid rgba(255,255,255,.15)}
  :is(.page-hero,.pdft-hero,.achievement-hero,.admission-hero,.download-hero,.event-hero,.campus-map-hero,.legacy-curriculum-hero) h1{font-size:clamp(2.8rem,11vw,5.2rem)}
}
@media(max-width:600px){
  .utility{display:none}
  .nav-wrap{height:72px}
  .nav-wrap nav{top:72px}
  .brand img{border-radius:0}
  .page-hero{padding:58px 0 64px}
  :is(.page-hero,.pdft-hero,.achievement-hero,.admission-hero,.download-hero,.event-hero,.campus-map-hero,.legacy-curriculum-hero) h1{font-size:clamp(2.5rem,13vw,4rem)}
  .section{padding-block:clamp(72px,14vw,96px)}
  .section-head h2,.intro-copy h2,.service-title h2,.contact-copy h2,.people-intro h2,.vision-section-head h2,.identity-head h2,.legacy-heading h2{font-size:clamp(2.35rem,11vw,3.45rem)}
}

@media(prefers-reduced-motion:reduce){
  :is(.news-card,.faq-card,.profile-card,.achievement-card,.document-card,.service-card,.tool-card){transition:none!important}
}

/* Showcase-style site navigation: one compact MENU control opens the complete
   information architecture as a cinematic full-screen panel. */
.nav-wrap{position:relative;justify-content:flex-start}
.nav-wrap>.brand{position:relative;z-index:72;margin-right:auto}
.nav-wrap>.brand .brand-name-mobile{display:none}
.nav-wrap>.search-toggle{position:relative;z-index:72;order:2;transition:opacity .25s ease,background .25s ease,color .25s ease}
.header-language-switcher{position:relative;z-index:72;order:3;display:inline-flex;align-items:center;gap:5px;margin-left:16px;color:#fff;white-space:nowrap;font:700 .72rem/1 Manrope,sans-serif;letter-spacing:.08em}
.header-language-switcher a{display:grid;place-items:center;min-width:35px;min-height:35px;border:1px solid transparent;border-radius:999px;color:#fff}
.header-language-switcher a:hover,.header-language-switcher a:focus-visible{border-color:var(--sx-hot-pink);color:#fff;outline:none}
.header-language-switcher a[aria-current="page"]{border-color:rgba(255,255,255,.3);color:var(--sx-pink-soft)}
.header-language-switcher span{opacity:.5}
.mobile-menu-language{display:none}
.menu-toggle{
  position:relative;
  z-index:72;
  order:4;
  display:inline-flex!important;
  align-items:center;
  gap:18px;
  width:auto;
  height:46px;
  margin-left:16px;
  padding:0 4px 0 14px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
}
.menu-toggle-label{font:700 .72rem/1 Manrope,sans-serif;letter-spacing:.12em}
.menu-toggle-lines{position:relative;display:block;width:36px;height:24px}
.menu-toggle-lines i{
  position:absolute;
  right:0;
  width:36px;
  height:1px;
  background:currentColor;
  transform-origin:center;
  transition:top .3s ease,transform .3s ease,width .3s ease;
}
.menu-toggle-lines i:first-child{top:7px}
.menu-toggle-lines i:last-child{top:17px}
.menu-toggle:hover{color:var(--sx-hot-pink)}
.menu-toggle:hover .menu-toggle-lines i:last-child{width:24px}
.menu-toggle[aria-expanded="true"] .menu-toggle-label{font-size:0}
.menu-toggle[aria-expanded="true"] .menu-toggle-label:after{content:"CLOSE";font-size:.72rem}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines i:first-child{top:12px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines i:last-child{top:12px;width:36px;transform:rotate(-45deg)}

#main-nav{
  counter-reset:main-menu;
  position:fixed!important;
  inset:0!important;
  z-index:70;
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  gap:0!important;
  width:100vw;
  height:100dvh;
  margin:0!important;
  padding:clamp(120px,14vh,160px) max(28px,6vw) 48px!important;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 78% 28%,rgba(255,61,150,.2),transparent 31%),
    #080a09!important;
  background-size:72px 72px,72px 72px,100% 100%,100% 100%!important;
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s cubic-bezier(.77,0,.18,1),opacity .45s ease,visibility .7s;
}
#main-nav.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  clip-path:inset(0);
}
#main-nav:before{
  content:"NAVIGATION / DBT";
  display:block;
  padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.22);
  color:var(--sx-pink-soft);
  font:700 .62rem/1 Manrope,sans-serif;
  letter-spacing:.18em;
}
#main-nav>:is(a,.nav-item){counter-increment:main-menu;flex:none}
#main-nav>a,
#main-nav>.nav-item>a{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  min-height:74px;
  padding:12px 0!important;
  border-bottom:1px solid rgba(255,255,255,.16);
  color:#fff!important;
  font:600 clamp(2rem,4vw,4.9rem)/.95 "IBM Plex Sans Thai",sans-serif;
  letter-spacing:-.055em;
  transition:color .25s ease,padding-left .25s ease;
}
#main-nav>a:before,
#main-nav>.nav-item>a:before{
  content:counter(main-menu,decimal-leading-zero);
  color:rgba(255,255,255,.46);
  font:700 .66rem/1 Manrope,sans-serif;
  letter-spacing:.1em;
}
#main-nav>a:hover,
#main-nav>.nav-item>a:hover{padding-left:10px!important;color:var(--sx-hot-pink)!important}
#main-nav>a.active:after,
#main-nav>.nav-item>a.active:after{content:"●";color:var(--sx-hot-pink);font-size:.5rem}
#main-nav>a.active:before{background:none;position:static;height:auto}
#main-nav>.nav-item{
  display:grid!important;
  grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);
  align-items:center;
  width:100%;
  border-bottom:1px solid rgba(255,255,255,.16);
}
#main-nav>.nav-item>a{border-bottom:0}
#main-nav>.nav-item>a:after{content:"+";margin:0;color:rgba(255,255,255,.5);font:300 1.2rem/1 Manrope,sans-serif;transform:none}
#main-nav>.nav-item:hover>a:after,#main-nav>.nav-item:focus-within>a:after{transform:rotate(45deg);color:var(--sx-hot-pink)}
#main-nav .nav-dropdown,
[data-theme="dark"] #main-nav .nav-dropdown{
  position:static;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  min-width:0;
  margin:0;
  padding:12px 0 12px 28px;
  border:0;
  background:transparent;
  box-shadow:none;
  opacity:1;
  visibility:visible;
  transform:none;
}
#main-nav .nav-dropdown a,
[data-theme="dark"] #main-nav .nav-dropdown a{
  width:auto;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;
  color:rgba(255,255,255,.68);
  font-size:.72rem;
  line-height:1.35;
}
#main-nav .nav-dropdown a:hover,
[data-theme="dark"] #main-nav .nav-dropdown a:hover{
  border-color:var(--sx-hot-pink);
  background:var(--sx-hot-pink);
  color:#fff;
}
body.menu-open{overflow:hidden}
body.menu-open .nav-wrap>:is(.search-toggle,.header-language-switcher){opacity:0;pointer-events:none}

@media(max-width:900px){
  .header-language-switcher{margin-left:8px}
  .header-language-switcher span,.header-language-switcher a[aria-current="page"]{display:none}
  .header-language-switcher a:not([aria-current]){min-width:40px;min-height:40px;border-color:rgba(255,255,255,.35);color:var(--sx-pink-soft)}
  #main-nav .mobile-menu-language{display:flex;align-items:center;gap:9px;flex:none;margin:18px 0 14px;color:#fff}
  .mobile-menu-language>span{margin-right:auto;color:var(--sx-pink-soft);font:700 .7rem/1.2 Manrope,"IBM Plex Sans Thai",sans-serif;letter-spacing:.08em}
  .mobile-menu-language a{display:grid;place-items:center;min-width:48px;min-height:40px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;font:700 .75rem/1 Manrope,sans-serif}
  .mobile-menu-language a[aria-current="page"]{border-color:var(--sx-hot-pink);background:var(--sx-pink);color:#fff}
  .mobile-menu-language a:focus-visible{outline:2px solid #fff;outline-offset:3px}
  #main-nav{padding:100px 20px 38px!important}
  #main-nav>.nav-item{grid-template-columns:1fr;padding-bottom:10px}
  #main-nav>a,#main-nav>.nav-item>a{min-height:62px;grid-template-columns:40px minmax(0,1fr) auto;font-size:clamp(1.8rem,7.5vw,3.3rem)}
  #main-nav .nav-dropdown,[data-theme="dark"] #main-nav .nav-dropdown{padding:0 0 4px 40px}
  #main-nav .nav-dropdown a,[data-theme="dark"] #main-nav .nav-dropdown a{padding:6px 10px;font-size:.68rem}
}
@media(max-width:600px){
  .menu-toggle{gap:12px;margin-left:8px;padding-left:4px}
  .menu-toggle-label{display:none}
  .header-language-switcher{margin-left:8px}
  .nav-wrap>.brand{min-width:0}
  .nav-wrap>.brand span{min-width:0}
  .nav-wrap>.brand .brand-name-full,.nav-wrap>.brand small{display:none}
  .nav-wrap>.brand .brand-name-mobile{display:block;color:#fff;font:700 1rem/1.2 Manrope,sans-serif;letter-spacing:.08em}
  .menu-toggle-lines,.menu-toggle-lines i{width:30px}
  .menu-toggle:hover .menu-toggle-lines i:last-child{width:20px}
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines i:last-child{width:30px}
  #main-nav{padding-top:88px!important}
}
@media(max-width:400px){
  .site-header .brand img{width:64px;height:46px}
  .nav-wrap>.brand{gap:7px}
  .nav-wrap>.brand strong{font-size:.73rem}
  .nav-wrap>.brand small{font-size:.52rem}
  .header-language-switcher,.menu-toggle{margin-left:6px}
}

/* Full-page transition, shared by every PHP page. Showcase keeps its own matching loader. */
.dbis-page-loader{display:none}
.js .dbis-page-loader{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--brand-pink-bright);
  color:#10100f;
  clip-path:inset(0);
  visibility:visible;
  transition:clip-path .85s cubic-bezier(.77,0,.18,1),visibility .85s;
}
.js .dbis-page-loader.is-complete{
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
}
.js .dbis-page-loader.is-leaving{
  transition-duration:.5s;
}
.dbis-page-loader-mark{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.5vw,28px);
  font:800 clamp(4rem,10vw,11rem)/1 Manrope,sans-serif;
  letter-spacing:-.08em;
}
.dbis-page-loader-mark i{
  width:clamp(5px,.5vw,9px);
  aspect-ratio:1;
  border-radius:50%;
  background:currentColor;
}
.dbis-page-loader-bottom{
  position:absolute;
  right:2vw;
  bottom:clamp(66px,8vh,92px);
  left:2vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  font:700 clamp(.58rem,.72vw,.78rem)/1 Manrope,sans-serif;
  letter-spacing:.1em;
}
.dbis-page-loader-bottom strong{
  display:flex;
  align-items:flex-end;
  font:800 clamp(4.6rem,7.5vw,8rem)/.72 Manrope,sans-serif;
  letter-spacing:-.09em;
}
.dbis-page-loader-bottom strong b{font:inherit}
.dbis-page-loader-bottom span:last-child{text-align:right}
.dbis-page-loader-line{
  position:absolute;
  right:2vw;
  bottom:32px;
  left:2vw;
  height:3px;
  background:rgba(16,16,15,.22);
}
.dbis-page-loader-line i{
  display:block;
  width:0;
  height:100%;
  background:#10100f;
  transition:width .12s linear;
}
@media(max-width:600px){
  .dbis-page-loader-mark{gap:8px;font-size:clamp(3.2rem,18vw,5.6rem)}
  .dbis-page-loader-mark i{width:4px}
  .dbis-page-loader-bottom{grid-template-columns:1fr auto;row-gap:18px;bottom:58px}
  .dbis-page-loader-bottom strong{grid-column:1/-1;grid-row:1;justify-self:center;font-size:clamp(4rem,22vw,6.5rem)}
  .dbis-page-loader-bottom span:last-child{text-align:right}
  .dbis-page-loader-line{bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  .js .dbis-page-loader{transition-duration:.12s}
  .dbis-page-loader-line i{transition:none}
}

/* Let the transparent department logo sit directly on the navigation color. */
.site-header .brand img,
.footer-brand img{background:transparent;border:0;border-radius:0;padding:0}
.site-header .brand img{width:112px;height:66px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(255,255,255,.55)) drop-shadow(0 0 10px rgba(238,58,146,.7))}
.footer-brand img{width:104px;height:60px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(238,58,146,.45))}
@media(max-width:600px){.site-header .brand img{width:84px;height:50px}.footer-brand img{width:84px;height:50px}}