/* Targeted Phase 1 fixes. Designer keyframes and scroll timelines stay in their original cascade. */
.visually-hidden,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: #f5f3ee;
  color: #1e1d21;
  border-radius: 8px;
  outline: 2px solid #f7a23b;
}
#main-content:focus,
.pop:focus {
  outline: none;
}
.site-shell {
  position: relative;
}
.brand-logos {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.brand-logos img {
  display: block;
  flex-shrink: 0;
}
.brand-logos .brand-kse {
  width: 136px;
  height: auto;
}
.brand-logos--footer {
  gap: 20px;
}
.brand-logos--footer .brand-kse {
  width: 152px;
}
.header-brands { display: inline-flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-brands img { display: block; flex-shrink: 0; }
.header-brands .brand-kse { width: 136px; height: auto; }
.header-spacer { flex: 1; }
.home-header nav { display: flex; align-items: center; gap: 30px; flex-shrink: 0; }
.lesson-header-main { margin-left: auto; }
.tk:focus-visible { outline: 2px solid #f7a23b !important; outline-offset: 5px; }
@media (max-width: 900px) {
  .header-brands { gap: 10px !important; }
  .header-brands .header-lettering { width: 100px; height: auto !important; }
  .header-brands .brand-kse { width: 104px; }
}
@media (max-width: 700px) {
  .home-header { padding-inline: 20px !important; gap: 12px !important; flex-wrap: wrap; height: auto !important; padding-block: 16px !important; }
  .home-header nav { flex-basis: 100%; gap: 14px; }
  .home-header nav a { font-size: 14px !important; }
  .lesson-header { flex-wrap: wrap; height: auto !important; padding-block: 8px !important; }
  .lesson-header-main { flex-basis: 100% !important; }
  .ftr .brand-logos { flex-basis: 100%; margin-bottom: 8px; }
}
@media (max-width: 359px) {
  .home-header { padding-inline: 12px !important; gap: 8px !important; }
  .header-brands { gap: 8px !important; }
  .header-brands .header-lettering { width: 92px; }
  .header-brands .brand-kse { width: 96px; }
  .home-header nav { gap: 10px; }
  .home-header nav a { font-size: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}