/* Shared layout rules. Loaded after legacy and page-specific styles. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { overflow-x: visible; }
img { max-width: 100%; }
p, address, li { overflow-wrap: break-word; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #c46b2b !important; outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10000; padding: 12px 18px; background: white; color: #173c4a; }
.skip-link:focus { top: 12px; }
.navbar-default .navbar-header { float: none; }
.navbar-default .navbar-header > a { display: flex !important; align-items: center; gap: 14px; padding: 16px 0; text-decoration: none; }
.navbar-default .navbar-header > a img { float: none !important; flex: 0 0 auto; margin: 0 !important; }
.navbar-default .navbar-header > a p { float: none !important; min-width: 0; margin: 0; }
.site-nav { background: #173c4a; position: relative; z-index: 20; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-menu { display: flex; align-items: stretch; gap: 12px; }
.site-menu > li { position: relative; }
.site-nav a, .site-nav button { color: #fff; font: inherit; font-size: 16px; line-height: 1.4; }
.site-nav a { display: block; padding: 14px 16px; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav button:hover { background: #285668; }
.site-nav button { background: transparent; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; }
.site-nav [hidden] { display: none !important; }
.site-nav-group > div { display: flex; align-items: stretch; }
.site-nav-group > ul { padding: 6px; background: #173c4a; }
.site-nav.nav-ready .site-nav-group > ul { position: absolute; top: 100%; left: 0; min-width: 260px; box-shadow: 0 10px 20px #0002; }
.site-menu-toggle { padding: 12px 0; width: 100%; text-align: left; }
.site-menu-toggle span { float: right; }
.home-footer > .container { display: flex; flex-wrap: wrap; gap: 24px; }
.home-footer > .container::before, .home-footer > .container::after { display: none; }
.home-footer > .container > div { float: none; flex: 1 1 220px; padding: 0; min-width: 0; }
.home-footer a { display: inline-block; padding: 5px 0; }
.img-container-wrapper { max-width: 100%; }
body.site-inner-page .courses_banner h1 { color: #fff; font-size: 42px; font-weight: 800; margin: 0; }
.contact-heading { background: #173c4a; color: #fff; padding: 44px 0; }
.contact-heading h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin: 0 0 12px; }
.contact-heading p { margin: 0; font-size: 18px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 28px; padding-top: 36px; padding-bottom: 48px; }
.contact-layout::before, .contact-layout::after { display: none; }
.contact-card { min-width: 0; background: #fff; padding: 28px; border: 1px solid #dce6e5; border-radius: 8px; box-shadow: 0 8px 24px #1836450c; }
.contact-card h2 { font-size: 24px; color: #173c4a; margin: 0 0 24px; font-weight: 700; }
.contact-card h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 700; color: #173c4a; }
.contact-card p, .contact-card address { font-size: 16px; line-height: 1.7; font-style: normal; }
.contact-card a { overflow-wrap: anywhere; }
.contact-map iframe { display: block; width: 100%; height: 360px; border: 0; border-radius: 4px; }
.directions-link { display: inline-block; background: #173c4a; color: #fff; border-radius: 5px; padding: 12px 18px; margin-top: 18px; }
.directions-link:hover { color: white; background: #285668; }
.error-page { padding-top: 60px; padding-bottom: 80px; }
@media (max-width: 991px) {
 .site-menu { gap: 0; }
 .site-nav a { padding-left: 12px; padding-right: 12px; }
 .navbar-default .navbar-header > a img { width: 72px !important; }
}
@media (max-width: 767px) {
 body { overflow-x: visible; }
 .container { width: 100%; max-width: 100%; }
 .container .container { width: auto; padding-left: 0; padding-right: 0; }
 .navbar-default .navbar-header { margin: 0; }
 .navbar-default .navbar-header > a { align-items: center; gap: 10px; }
 .navbar-default .navbar-header > a img { width: 54px !important; }
 .navbar-default .navbar-header > a p span:first-child { font-size: 20px !important; line-height: 1.2; }
 .navbar-default .navbar-header > a p span:nth-child(3) { font-size: 13px !important; line-height: 1.4; }
 .site-menu { display: block; padding-bottom: 10px !important; }
 .site-menu > li { border-top: 1px solid #ffffff26; }
 .site-nav-group > div > a { flex: 1; }
 .site-nav.nav-ready .site-nav-group > ul { position: static; min-width: 0; box-shadow: none; padding-left: 18px; }
 .site-nav-group > ul a { white-space: normal; }
 .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
 .contact-card { padding: 22px; }
 .contact-map iframe { height: 300px; }
 .contact-heading { padding: 32px 0; }
 body .grid_4, body .team .grid_4 { max-width: 100%; }
 body.site-inner-page .courses_banner h1 { font-size: 30px; }
 .topnav { display: flex; flex-wrap: wrap; gap: 6px; }
 .topnav a { display: inline-block; padding: 10px 12px; }
 .home-footer > .container { flex-direction: column; }
 .home-footer > .container > div { flex: auto; width: 100%; }
 .list-controls { display: flex; flex-wrap: wrap; gap: 8px; }
 .list-controls input { max-width: 100%; min-width: 0; }
 table { max-width: 100%; overflow-x: auto; }
 .copy { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.facilities-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 32px; padding-bottom: 40px; }
.facilities-list::before, .facilities-list::after { display: none; }
.facility-card { min-width: 0; border: 1px solid #dce6e5; border-radius: 8px; padding: 16px; background: #fff; }
.facility-card img { width: 100%; height: 260px; object-fit: contain; }
@media (max-width: 991px) { .facilities-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .facilities-list { grid-template-columns: minmax(0, 1fr); } }
/* Legacy nested wrappers must fit their parent's content box. */
.container .container { width: auto; max-width: 100%; }
.no-padding > .row { margin-left: 0; margin-right: 0; }
.home-footer { background: #202020; color: #f7f7f7; padding: 34px 0; }
.home-footer h3 { color: #fff; font-size: 20px; font-weight: 800; margin: 0 0 10px; }
.home-footer a { color: #f1b458; }
.home-footer ul { list-style: none; padding: 0; }
.home-footer li { margin-bottom: 7px; }
/* Phase-change topics within the leading research theme. */
.phase-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.phase-topics section { min-width: 0; padding: 16px; border: 1px solid #dce6e5; border-top: 3px solid #c46b2b; border-radius: 5px; background: #f7fbfa; }
.phase-topics h4 { color: #173c4a; font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.phase-topics a { display: inline-block; padding: 6px 0; font-weight: 700; }
@media (max-width: 991px) { .phase-topics { grid-template-columns: minmax(0, 1fr); } }
/* Original experimental imagery: preserve the complete scientific field of view. */
.experiment-gallery { margin: 0 0 52px; scroll-margin-top: 24px; }
.gallery-heading { max-width: 100%; margin-bottom: 24px; }
.gallery-eyebrow, .gallery-label { color: #9b4c1d; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.gallery-heading h2 { color: #173c4a; font-size: 34px; font-weight: 800; margin: 8px 0 12px; }
.gallery-heading > p:last-child { color: #40545a; font-size: 18px; line-height: 1.6; }
.experiment-gallery figure { margin: 0; }
.experiment-video, .experiment-stills { overflow: hidden; border: 1px solid #dce6e5; border-radius: 10px; background: #fff; }
.experiment-video { margin-bottom: 24px !important; }
.experiment-video video { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; background: #102a34; }
.droplet-video-row { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 640fr) minmax(0, 360fr); align-items: start; gap: 12px; padding: 12px; background: #edf2f1; }
.droplet-video-item { min-width: 0; }
.droplet-video-label { margin: 8px 0 0; text-align: center; color: #40545a; font-size: 13px; }
@media (max-width: 600px) { .droplet-video-row { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.experiment-video > figcaption, .experiment-stills > figcaption { padding: 22px 24px; }
.experiment-gallery h3 { margin: 8px 0 10px; color: #173c4a; font-size: 23px; font-weight: 700; }
.experiment-gallery figcaption p { margin: 0; color: #40545a; font-size: 16px; line-height: 1.6; }
.experiment-gallery figcaption a { display: inline-block; margin-top: 14px; font-weight: 700; }
.experiment-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.frost-pair, .particle-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px; align-items: center; background: #edf2f1; min-height: 330px; }
.frost-pair img { display: block; width: 100%; height: auto; }
.particle-pair img { display: block; width: auto; height: 250px; max-width: 100%; object-fit: contain; margin: auto; }
.particle-pair figcaption { text-align: center; font-size: 13px; color: #40545a; margin-top: 10px; }
@media (max-width: 767px) {
 .experiment-pair { grid-template-columns: minmax(0, 1fr); }
 .gallery-heading h2 { font-size: 28px; }
 .frost-pair, .particle-pair { min-height: 0; padding: 14px; }
 .particle-pair img { height: auto; max-height: 274px; }
 .experiment-video > figcaption, .experiment-stills > figcaption { padding: 18px; }
}