:root{
  --navy:#061a38;
  --navy-2:#0a3566;
  --archway-blue:#1c365e;
  --red:#cd163f;
  --purple:#6f46a6;
  --teal:#14a58f;
  --sky:#79bddd;
  --glass:rgba(8,24,58,.28);
  --glass-soft:rgba(18,44,83,.20);
  --line:rgba(255,255,255,.24);
  --shadow:0 22px 64px rgba(0,8,30,.28),0 3px 12px rgba(0,8,30,.18);
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  color:#fff;
  background:var(--navy);
}

/* A calm, dimensional color field gives the glass something real to sample. */
.ambient{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 2% 8%,rgba(39,188,174,.56) 0%,rgba(25,137,150,.22) 31%,transparent 56%),
    radial-gradient(ellipse at 95% 2%,rgba(52,92,148,.54) 0%,rgba(28,54,94,.28) 34%,transparent 60%),
    radial-gradient(ellipse at 88% 96%,rgba(115,74,190,.50) 0%,rgba(78,55,156,.18) 36%,transparent 61%),
    radial-gradient(ellipse at 18% 92%,rgba(16,107,151,.34) 0%,transparent 55%),
    linear-gradient(135deg,#03142d 0%,#1c365e 43%,#162f59 73%,#26184e 100%);
  animation:ambientBreath 11s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:opacity;
}
.ambient::before,.ambient::after{
  content:"";
  position:absolute;
  border-radius:45% 55% 52% 48% / 56% 42% 58% 44%;
  filter:blur(42px);
  opacity:.70;
  mix-blend-mode:screen;
  will-change:transform;
}
.ambient::before{
  width:132vw;
  height:30vw;
  left:-26vw;
  top:1vh;
  background:linear-gradient(96deg,transparent 2%,rgba(34,178,174,.74) 22%,rgba(35,79,133,.68) 49%,rgba(102,86,194,.53) 70%,transparent 94%);
  animation:waveTeal 16s cubic-bezier(.45,0,.55,1) -6s infinite alternate;
}
.ambient::after{
  width:126vw;
  height:27vw;
  left:-3vw;
  bottom:-8vh;
  background:linear-gradient(102deg,transparent 4%,rgba(20,119,164,.58) 23%,rgba(35,75,128,.64) 51%,rgba(123,76,191,.66) 74%,transparent 96%);
  animation:waveViolet 21s cubic-bezier(.45,0,.55,1) -13s infinite alternate;
}
@keyframes ambientBreath{
  0%{opacity:.90}
  48%{opacity:1}
  100%{opacity:.94}
}
@keyframes waveTeal{
  from{transform:translate3d(-16%,-9%,0) rotate(-19deg) scale(.92,.82);opacity:.55}
  to{transform:translate3d(23%,15%,0) rotate(-8deg) scale(1.08,1.16);opacity:.80}
}
@keyframes waveViolet{
  from{transform:translate3d(18%,13%,0) rotate(16deg) scale(1.06,.90);opacity:.60}
  to{transform:translate3d(-25%,-16%,0) rotate(5deg) scale(.92,1.14);opacity:.82}
}

.lightBeams{
  position:fixed;
  inset:-14%;
  overflow:hidden;
  pointer-events:none;
}
.beam{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(38px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}
.beam-one{
  width:108vw;
  height:8.5vw;
  left:-30vw;
  top:7vh;
  opacity:.25;
  background:linear-gradient(90deg,transparent 3%,rgba(119,234,244,.15) 18%,rgba(170,238,255,.46) 48%,rgba(89,132,188,.24) 73%,transparent 96%);
  animation:beamDriftOne 22s cubic-bezier(.45,0,.55,1) -11s infinite alternate;
}
.beam-two{
  width:92vw;
  height:11vw;
  left:25vw;
  top:25vh;
  opacity:.19;
  background:linear-gradient(90deg,transparent 5%,rgba(205,232,255,.12) 22%,rgba(238,247,255,.38) 50%,rgba(103,141,198,.22) 76%,transparent 96%);
  animation:beamDriftTwo 27s cubic-bezier(.45,0,.55,1) -23s infinite alternate;
}
.beam-three{
  width:104vw;
  height:9vw;
  left:-12vw;
  top:58vh;
  opacity:.21;
  background:linear-gradient(90deg,transparent 4%,rgba(61,190,211,.15) 21%,rgba(75,126,184,.40) 48%,rgba(171,132,232,.26) 73%,transparent 96%);
  animation:beamDriftThree 31s cubic-bezier(.45,0,.55,1) -17s infinite alternate;
}
.beam-four{
  width:76vw;
  height:7vw;
  right:-24vw;
  top:72vh;
  opacity:.16;
  background:linear-gradient(90deg,transparent 2%,rgba(201,221,255,.12) 25%,rgba(173,143,238,.34) 55%,transparent 96%);
  animation:beamDriftFour 37s cubic-bezier(.45,0,.55,1) -31s infinite alternate;
}
@keyframes beamDriftOne{
  0%{transform:translate3d(-18%,-5%,0) rotate(-18deg) scaleX(.92);opacity:.17}
  52%{opacity:.29}
  100%{transform:translate3d(30%,13%,0) rotate(-12deg) scaleX(1.08);opacity:.21}
}
@keyframes beamDriftTwo{
  0%{transform:translate3d(20%,-12%,0) rotate(-28deg) scaleX(1.06);opacity:.12}
  46%{opacity:.24}
  100%{transform:translate3d(-30%,16%,0) rotate(-20deg) scaleX(.91);opacity:.16}
}
@keyframes beamDriftThree{
  0%{transform:translate3d(-24%,14%,0) rotate(-14deg) scaleX(.94);opacity:.14}
  55%{opacity:.27}
  100%{transform:translate3d(28%,-14%,0) rotate(-7deg) scaleX(1.10);opacity:.18}
}
@keyframes beamDriftFour{
  0%{transform:translate3d(24%,9%,0) rotate(-20deg) scaleX(1.04);opacity:.10}
  50%{opacity:.21}
  100%{transform:translate3d(-34%,-16%,0) rotate(-13deg) scaleX(.92);opacity:.14}
}

.display-viewport{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  isolation:isolate;
}
.display-shell{
  position:absolute;
  left:50%;
  top:50%;
  width:100vw;
  height:56.25vw;
  transform:translate(-50%,-50%);
  z-index:1;
  container-type:size;
  padding:1.1cqw;
  display:grid;
  grid-template-rows:13% 1fr 7.5%;
  gap:.9cqw;
}
@media(min-aspect-ratio:16/9){
  .display-shell{width:177.7778vh;height:100vh}
}
.glass{
  position:relative;
  isolation:isolate;
  background:rgba(8,24,58,.26);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(158%) brightness(1.04);
  -webkit-backdrop-filter:blur(24px) saturate(158%) brightness(1.04);
}
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(100% 62% at 16% -8%,rgba(255,255,255,.22),transparent 49%),
    linear-gradient(118deg,rgba(255,255,255,.055),transparent 34%,rgba(255,255,255,.025) 70%,transparent);
  mix-blend-mode:screen;
}
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 1px 0 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.055),
    inset 0 0 26px rgba(153,197,255,.025);
}
.glass>*{z-index:1}
.topbar,.ticker{
  background:rgba(5,22,52,.16);
  border-color:rgba(255,255,255,.25);
  box-shadow:0 14px 40px rgba(0,7,28,.18),inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter:blur(18px) saturate(145%) brightness(1.06);
  -webkit-backdrop-filter:blur(18px) saturate(145%) brightness(1.06);
}
.clockPanel,.side{
  background:rgba(7,20,50,.30);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 24px 68px rgba(0,6,28,.30),0 4px 16px rgba(0,8,34,.22),inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(32px) saturate(170%) brightness(1.02);
  -webkit-backdrop-filter:blur(32px) saturate(170%) brightness(1.02);
}
.hero{
  border-color:rgba(255,255,255,.23);
  box-shadow:0 22px 64px rgba(0,7,27,.25),inset 0 1px 0 rgba(255,255,255,.20);
  backdrop-filter:blur(12px) saturate(135%);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
}
.hero::after{z-index:2}

.topRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 24.3cqw;
  gap:.9cqw;
  min-height:0;
  overflow:hidden;
}
.topRow>.topbar,.topRow>.clockPanel{
  height:100%;
  max-height:100%;
  min-height:0;
  overflow:hidden;
  box-shadow:0 5px 18px rgba(0,7,28,.09),inset 0 1px 0 rgba(255,255,255,.18);
}
.topbar{
  position:relative;
  border-radius:1.45cqw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  padding:0 1.35cqw;
}
.brand{position:static;transform:none;height:100%;display:flex;align-items:center}
.brand img{
  width:auto;
  height:100%;
  max-width:14cqw;
  object-fit:contain;
  object-position:left center;
}
.affiliationLockup{height:68%;display:flex;align-items:center;gap:1cqw;margin-left:1.1cqw;white-space:nowrap}
.affiliationDivider{width:1px;height:72%;background:rgba(255,255,255,.58);box-shadow:0 0 10px rgba(255,255,255,.08)}
.affiliationCopy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.3cqw}
.affiliationCopy span{font-size:.56cqw;font-weight:720;letter-spacing:.19em;line-height:1;opacity:.58}
.affiliationCopy strong{font-size:1.04cqw;font-weight:520;letter-spacing:-.018em;line-height:1;color:rgba(255,255,255,.95)}
.bannerValues{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:.4cqw;margin-left:auto;padding-left:2cqw}
.bannerValues img{display:block;width:auto;height:98%;max-width:6.5cqw;object-fit:contain}
.clockPanel{border-radius:1.45cqw;display:grid;place-items:center;min-width:0;padding:0 .8cqw}
.clock{width:100%;display:flex;align-items:center;justify-content:center;gap:.8cqw}
.clockTime{display:flex;align-items:baseline;justify-content:flex-end;gap:.85cqw;min-width:0}
.clockTime strong{
  display:inline-flex;
  align-items:baseline;
  gap:.2em;
  font-size:2.88cqw;
  font-weight:520;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.035em;
  line-height:.86;
}
.clockTime>span{font-size:.74cqw;font-weight:700;letter-spacing:.1em;line-height:1;opacity:.72;margin:0}
.clockTime strong .clockUnit,.clockTime strong .clockColon{font:inherit;letter-spacing:inherit;line-height:inherit;opacity:1;margin:0}
.clockUnit{display:inline-flex;transform:translateZ(0);will-change:transform,opacity}
.clockGlyph{position:relative;display:grid;place-items:center;min-width:.57em;overflow:hidden}
.clockGlyph>span{grid-area:1/1;display:block;will-change:transform,opacity}
.clockColon{display:inline-block;opacity:.72;transform:translateY(-.035em)}
.clockDivider{width:1px;height:3.25cqw;max-height:52px;background:linear-gradient(transparent,rgba(255,255,255,.28),transparent)}
.clockDate{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.4cqw;min-width:6cqw}
.clockDate span{font-size:.7cqw;font-weight:720;opacity:.58;text-transform:uppercase;letter-spacing:.15em;line-height:1}
.clockDate strong{font-size:1.06cqw;font-weight:650;text-transform:uppercase;letter-spacing:.055em;line-height:1}

.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 24.3cqw;
  gap:.9cqw;
  min-height:0;
}
.hero,.side{height:100%;min-height:0;border-radius:1.6cqw;overflow:hidden;position:relative}
.hero{
  height:100%;
  width:100%;
  background:rgba(2,9,24,.34);
}
.hero video,#heroImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:0;
}

.side{padding:1.1cqw;display:flex;min-width:0;flex-direction:column}
.side-card{position:relative;flex:1;min-height:0;overflow:hidden}
.weather,.infoCard{
  position:absolute;
  inset:0;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.weather.is-active,.infoCard.is-active{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.weather{display:flex;flex-direction:column;text-align:center}
.weatherHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:1cqw;
  border-bottom:1px solid var(--line);
}
.weatherHeader>div{display:flex;align-items:center;gap:.48cqw}
.locationDot{
  width:.54cqw;
  height:.54cqw;
  border-radius:50%;
  background:#53dbc5;
  box-shadow:0 0 0 .28cqw rgba(83,219,197,.14),0 0 18px rgba(83,219,197,.5);
}
.weatherHeader strong,.weatherHeader>span{font-size:clamp(9px,.72cqw,14px);letter-spacing:.13em}
.weatherHeader>span{opacity:.58}
.weatherNow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1cqw;
  flex:0 0 auto;
  padding:.85cqw 0 .35cqw;
}
.weatherIcon{
  width:auto;
  height:auto;
  flex:0 0 auto;
  background:none;
  border:0;
  box-shadow:none;
  font-size:4.15cqw;
  line-height:1;
}
.weatherTemp{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left}
.weatherTemp strong{font-size:4.9cqw;font-weight:320;letter-spacing:-.09em;line-height:.84}
.weatherTemp span{font-size:1.05cqw;font-weight:650;margin-top:.55cqw;white-space:nowrap}
.weatherRange{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8cqw;
  padding:.35cqw 0 .65cqw;
  border:0;
  font-size:.74cqw;
}
.weatherRange span:first-child{font-weight:700}
.weatherRange span:last-child{opacity:.62}
.weatherRange span:last-child::before{content:"•";margin-right:.8cqw;opacity:.6}
.forecast{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-rows:repeat(7,minmax(0,1fr));
  border-top:1px solid var(--line);
  padding:.35cqw 0;
}
.forecast-day{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.7cqw;
  padding:0 .2cqw;
  font-size:clamp(10px,.78cqw,15px);
}
.forecast-day+.forecast-day{border-top:1px solid rgba(255,255,255,.07)}
.forecast-day .day{font-weight:670;text-align:left}
.forecast-day .icon{font-size:clamp(13px,1.05cqw,20px);line-height:1}
.forecast-day .temps{text-align:right;white-space:nowrap}
.forecast-day .high{font-weight:720}
.forecast-day .low{opacity:.55;margin-left:.3cqw}
.weatherDetails{
  display:flex;
  justify-content:center;
  align-items:stretch;
  padding-top:.65cqw;
  border-top:1px solid var(--line);
}
.weatherDetails div{
  min-width:0;
  flex:1;
  padding:0 .55cqw;
  border:0;
  border-radius:0;
  background:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.32cqw;
}
.weatherDetails div+div{border-left:1px solid var(--line)}
.weatherDetails span{font-size:clamp(8px,.56cqw,11px);letter-spacing:.08em;opacity:.52;white-space:nowrap}
.weatherDetails strong{font-size:clamp(11px,.9cqw,17px);font-weight:650;white-space:nowrap}

.infoCard{display:flex;flex-direction:column;align-items:center;min-height:0}
.infoMedia{
  position:relative;
  width:min(100%,62cqh);
  aspect-ratio:1/1;
  height:auto;
  overflow:hidden;
  border-radius:1.15cqw;
  flex:0 0 auto;
  align-self:center;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.36);
  box-shadow:
    0 16px 38px rgba(0,8,32,.26),
    0 3px 10px rgba(0,8,30,.16),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 22px rgba(167,208,255,.045);
}
.infoMedia img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.infoMedia::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(90% 34% at 24% 0%,rgba(255,255,255,.22),transparent 72%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(255,255,255,.06);
  mix-blend-mode:screen;
}
.pill{
  position:static;
  align-self:center;
  padding:.48cqw .68cqw;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.17);
  font-size:.61cqw;
  font-weight:800;
  letter-spacing:.12em;
  margin-top:0;
  margin-bottom:.65cqw;
}
.infoCopy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;align-self:center;width:min(100%,62cqh);flex:1;padding:.6cqw .2cqw .1cqw;min-height:0}
.infoCopy h2{font-size:1.75cqw;line-height:1.03;letter-spacing:-.04em;margin:0 0 .55cqw}
.infoCopy p{max-width:100%;font-size:.8cqw;line-height:1.36;opacity:.78;margin:0}
.dots{display:flex;gap:.35cqw;padding-top:.8cqw;justify-content:center}
.dot{width:.36cqw;height:.36cqw;border-radius:50%;background:rgba(255,255,255,.25);transition:width .3s ease,background .3s ease}
.dot.active{width:1.15cqw;border-radius:99px;background:#fff}

.ticker{height:100%;min-height:0;border-radius:1.25cqw;display:flex;align-items:center;overflow:hidden}
.ticker-label{
  align-self:stretch;
  min-width:11.5cqw;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 .8cqw;
  background:rgba(4,20,48,.24);
  z-index:2;
  border-right:1px solid var(--line);
}
.ticker-label img{width:3.7cqw;height:2.3cqw;object-fit:contain}
.ticker-window{overflow:hidden;flex:1}
.ticker-track{white-space:nowrap;display:inline-block;font-size:.84cqw;font-weight:620;letter-spacing:.015em}
.ticker-item{display:inline-flex;align-items:center;gap:.7cqw;margin-right:2.5cqw}
.bullet{width:.38cqw;height:.38cqw;border-radius:50%;background:#53dbc5;box-shadow:0 0 12px rgba(83,219,197,.55)}
.ticker-weather{
  align-self:stretch;
  min-width:8.8cqw;
  padding:0 .82cqw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.42cqw;
  border-left:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.065);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.08);
}
.ticker-weather-icon{font-size:1.35cqw;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.16))}
.ticker-weather strong{font-size:1.15cqw;font-weight:650;letter-spacing:-.04em}
.ticker-weather>span:last-child{font-size:.57cqw;font-weight:720;letter-spacing:.13em;opacity:.62}

@media(prefers-reduced-motion:reduce){
  .ambient,.ambient::before,.ambient::after,.lightBeams .beam{animation:none}
  .clockColon{opacity:.72}
}

@media(prefers-reduced-transparency:reduce){
  .glass,.topbar,.ticker,.clockPanel,.side,.hero{
    background:rgba(7,25,57,.94);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

@media(prefers-contrast:more){
  :root{--line:rgba(255,255,255,.42)}
  .glass{background-color:rgba(5,20,48,.58)}
}