@charset "windows-1251";
/*
  UBC adaptive compatibility layer, 2026.
  Loaded after legacy ubc.css. Original colors, graphics and overall visual identity are retained.
*/
:root {
  --ubc-font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI Variable Display", "Segoe UI", Inter, Arial, Helvetica, sans-serif;
  --ubc-page-bg: #b9b9b9;
  --ubc-paper: #ffffff;
  --ubc-text: #5f5f5f;
  --ubc-blue: #00009F;
  --ubc-link-blue: #00009F;
  --ubc-orange: #ff7302;
  --ubc-line: #e7e7e7;
  --ubc-silver-top: #8f8f8f;
  --ubc-silver-mid: #ffffff;
  --ubc-silver-bottom: #8a8a8a;
  --ubc-shadow: 0 0 30px rgba(0, 0, 0, .09);
  --ubc-menu-gradient: linear-gradient(180deg,
    #898989 0%,
    #c7c7c7 12%,
    #eeeeee 29%,
    #ffffff 48%,
    #f8f8f8 54%,
    #d2d2d2 76%,
    #8a8a8a 100%);
  --ubc-menu-gradient-hover: linear-gradient(180deg,
    #a0a0a0 0%,
    #dedede 14%,
    #ffffff 42%,
    #ffffff 56%,
    #e4e4e4 80%,
    #9b9b9b 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ubc-page {
  margin: 0 !important;
  min-width: 320px;
  color: var(--ubc-text) !important;
  background: var(--ubc-page-bg) !important;
  font-family: var(--ubc-font-stack) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body.ubc-page *,
body.ubc-page font,
body.ubc-page td,
body.ubc-page a,
body.ubc-page button,
body.ubc-page input,
body.ubc-page textarea,
body.ubc-page select {
  font-family: var(--ubc-font-stack) !important;
}
body.ubc-page img { max-width: 100%; height: auto; }
body.ubc-page a { color: var(--ubc-text); text-decoration: none; }
body.ubc-page a:hover,
body.ubc-page a:focus-visible { color: var(--ubc-orange); text-decoration: underline; }
body.ubc-page button,
body.ubc-page a,
body.ubc-page summary { -webkit-tap-highlight-color: transparent; }
body.ubc-page button { font: inherit; }

.site-shell {
  width: min(100%, 1240px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: visible;
  background: var(--ubc-paper);
  box-shadow: var(--ubc-shadow);
}
.site-inner { width: calc(100% - 80px); margin: 0 auto; }
.utility-row {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  padding: 5px 0 4px;
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}
.brand-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 5fr);
  align-items: end;
  gap: 0;
  min-height: 45px;
}
.brand-row .logo-main { display: block; width: 100%; max-width: 190px; justify-self: end; }
.brand-row .contacts-image { display: block; width: 100%; justify-self: end; }
.cities-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 5fr);
  align-items: end;
  min-height: 20px;
}
.cities-row .logo-sub { display: block; width: 100%; max-width: 190px; justify-self: end; }
.cities-row .cities { padding: 2px 0 4px; font-size: 13px; line-height: 1.35; text-align: right; }
.cities-row.logo-only { grid-template-columns: minmax(150px, 1fr) minmax(0, 5fr); }

.logo-rule { display: block; width: 100%; height: 10px; margin: 0; }

.hero { position: relative; overflow: hidden; background: #ddd; }
.hero-track { display: flex; }
.hero-slide { flex: 0 0 100%; }
.hero-slide img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 7 / 1; object-fit: contain; object-position: center; }

/* Native HTML5 main menu */
.main-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 5000;
  width: 100%;
  background: #c8c8c8;
  border-top: 1px solid #7f7f7f;
  border-bottom: 1px solid #777;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .14);
}
.nav-toggle,
.legacy-nav-toggle {
  display: none;
  width: 100%;
  min-height: 58px;
  padding: 0 20px;
  border: 0;
  border-top: 1px solid #888;
  border-bottom: 1px solid #777;
  background: var(--ubc-menu-gradient);
  color: #333;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-align: left;
  cursor: pointer;
}
.nav-toggle::after,
.legacy-nav-toggle::after { content: "\2630"; float: right; font-size: 24px; line-height: 1; }
.main-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-item { position: relative; min-width: 0; }
.nav-item + .nav-item { border-left: 1px solid rgba(80, 80, 80, .42); }
.nav-link,
.nav-button {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  background: var(--ubc-menu-gradient);
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
  cursor: pointer;
  transition: color .16s ease, font-size .16s ease, font-weight .16s ease, background .16s ease, text-shadow .16s ease;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-button:hover,
.nav-button:focus-visible,
.nav-item.open > .nav-button,
.nav-item.open > .nav-link-dropdown {
  background: var(--ubc-menu-gradient-hover);
  color: var(--ubc-blue) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 #fff;
}
.nav-button::after,
.nav-link-dropdown::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: url("../arrow_r.gif") center / 7px 7px no-repeat;
  transform: rotate(90deg);
}
.submenu {
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  width: max-content;
  min-width: 340px;
  max-width: min(440px, 92vw);
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #fff;
  border: 3px double #aaa;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .17);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item:nth-last-child(-n+2) > .submenu { left: auto; right: 0; }
.submenu a {
  display: block;
  min-height: 42px;
  padding: 10px 13px;
  color: #333 !important;
  background: #fff;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  white-space: nowrap;
  transition: color .15s ease, font-size .15s ease, padding .15s ease, background .15s ease;
}
.submenu a:hover,
.submenu a:focus-visible {
  padding-right: 24px;
  background: #f4f6fa;
  color: var(--ubc-blue) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.nav-item.open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.page-title {
  margin: 0;
  padding: 21px 40px 17px;
  border-bottom: 3px double #ddd;
  color: var(--ubc-text);
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3;
}
.main-grid {
  display: grid;
  grid-template-columns: 310px minmax(0, 790px);
  gap: 40px;
  justify-content: start;
  padding: 28px 40px 34px;
}
.sidebar-details { min-width: 0; border: 0; }
.sidebar-details > summary { display: none; }
.sidebar { min-width: 0; }
.service-list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ubc-line);
}
.service-list li { border-bottom: 1px solid var(--ubc-line); }
.service-list a {
  min-height: 45px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  padding: 7px 8px 7px 0;
  color: var(--ubc-link-blue) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  transform-origin: left center;
  transition: color .15s ease, font-size .15s ease, padding .15s ease, background .15s ease;
}
.service-list a::before {
  content: "";
  width: 19px;
  height: 23px;
  background: url("../arrow_o.gif") center / 19px 23px no-repeat;
}
.service-list a:hover,
.service-list a:focus-visible {
  margin-right: -30px;
  padding-right: 38px;
  background: #f5f7fa;
  color: var(--ubc-blue) !important;
  font-size: 17px !important;
  text-decoration: none !important;
}
.office { margin-top: 18px; }
.office p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.office-image { display: block; width: 230px; max-width: 100%; }
.payment { margin-top: 17px; }
.payment h3 { margin: 0 0 7px; color: var(--ubc-text); font-size: 16px !important; }
.payment img { display: block; width: 230px; max-width: 100%; }

.article { max-width: 790px; min-width: 0; }
.article p {
  margin: 0 0 24px;
  font-size: 16px !important;
  line-height: 1.58;
  text-align: justify;
  text-wrap: pretty;
}
.article h2 {
  margin: 34px 0 17px;
  color: var(--ubc-text);
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35;
}
.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  padding: 10px 40px 28px;
}
.promo-card {
  min-width: 0;
  padding: 16px 17px 18px;
  border: 1px solid #e1e1e1;
  border-radius: 9px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.promo-card:hover { transform: translateY(-5px); box-shadow: 0 9px 22px rgba(0, 0, 0, .09); }
.promo-card h3 { margin: 0 0 11px; font-size: 16px !important; line-height: 1.35; }
.promo-card h3 a,
.promo-card .more { color: var(--ubc-link-blue) !important; font-weight: 700 !important; }
.promo-card p { margin: 0; font-size: 15px !important; line-height: 1.55; text-align: left; }
.closing { margin: 0 40px; text-align: center; }
.closing img { display: block; width: 100%; height: 10px; margin-bottom: 8px; }
.closing p { margin: 0 0 23px; font-size: 16px !important; font-weight: 700 !important; }
.closing .closing-message { margin-bottom: 7px; }
.city-links {
  margin: 0 0 20px;
  color: var(--ubc-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}
.city-links a {
  color: var(--ubc-text) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .city-links a:hover,
  .city-links a:focus-visible {
    color: var(--ubc-orange) !important;
    text-decoration: underline !important;
  }
}
.site-footer { padding: 0 40px 22px; }
.footer-links {
  padding: 16px 0 14px;
  border-top: 1px solid #eee;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.footer-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  color: #8e9295;
  font-size: 12px;
  font-weight: 700;
}
.footer-meta .copyright { text-align: left; }
.footer-meta .counter-space { min-height: 42px; }
.footer-meta .marks { text-align: right; }
.back-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 4500;
  width: 46px;
  height: 46px;
  border: 1px solid #888;
  border-radius: 5px;
  background: var(--ubc-menu-gradient);
  color: var(--ubc-blue);
  font-size: 22px !important;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.back-top.visible { opacity: 1; pointer-events: auto; }

/* Upgraded legacy STM31 menu variant */
.legacy-stm-wrap { min-height: 64px; }
.legacy-stm-host { width: 100%; min-height: 64px; background: var(--ubc-menu-gradient); }
.legacy-stm-host > table,
#Stm0p0i,
#Stm0p0iTB { width: 100% !important; }
#Stm0p0i { visibility: visible !important; }
#Stm0p0iTB { table-layout: fixed; }
#Stm0p0iTB > tbody > tr > td { width: 20% !important; vertical-align: middle !important; }
#Stm0p0iTB > tbody > tr > td + td { border-left: 1px solid rgba(80, 80, 80, .42) !important; }
[id^="Stm0p0i"][id$="e"] {
  min-height: 64px !important;
  background: var(--ubc-menu-gradient) !important;
  transition: background .15s ease, color .15s ease;
}
[id^="Stm0p0i"][id$="e"]:hover { background: var(--ubc-menu-gradient-hover) !important; }
[id^="Stm0p0i"][id$="e"] > table { width: 100% !important; min-height: 64px !important; }
[id^="Stm0p0i"][id$="eMTD"] { text-align: center !important; white-space: normal !important; padding: 9px 10px !important; }
[id^="Stm0p0i"][id$="eTX"] { color: #333 !important; line-height: 1.15 !important; }
[id^="Stm0p0i"][id$="e"]:hover [id$="eTX"] { color: var(--ubc-blue) !important; }
#Stm0p1iTB,
#Stm0p2iTB,
#Stm0p3iTB,
#Stm0p4iTB,
#Stm0p5iTB {
  min-width: 340px !important;
  border: 3px double #aaa !important;
  background: #fff !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .17);
}
[id^="Stm0p1i"][id$="e"],
[id^="Stm0p2i"][id$="e"],
[id^="Stm0p3i"][id$="e"],
[id^="Stm0p4i"][id$="e"],
[id^="Stm0p5i"][id$="e"] { background: #fff !important; }
[id^="Stm0p1i"][id$="e"]:hover,
[id^="Stm0p2i"][id$="e"]:hover,
[id^="Stm0p3i"][id$="e"]:hover,
[id^="Stm0p4i"][id$="e"]:hover,
[id^="Stm0p5i"][id$="e"]:hover { background: #f4f6fa !important; }
[id^="Stm0p1i"][id$="eMTD"],
[id^="Stm0p2i"][id$="eMTD"],
[id^="Stm0p3i"][id$="eMTD"],
[id^="Stm0p4i"][id$="eMTD"],
[id^="Stm0p5i"][id$="eMTD"] { padding: 11px 13px !important; }

@media (max-width: 1023px) {
  .site-inner { width: calc(100% - 44px); }
  .main-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; padding-inline: 28px; }
  .promo-grid { padding-inline: 28px; gap: 18px; }
  .closing, .site-footer { margin-inline: 0; padding-inline: 28px; }
  .page-title { padding-inline: 28px; }
}

@media (max-width: 800px) {
  body.ubc-page { font-size: 18px !important; line-height: 1.58 !important; }
  .site-shell { width: 100%; box-shadow: none; }
  .site-inner { width: calc(100% - 28px); }
  .utility-row { justify-content: center; font-size: 13px; text-align: center; }
  .brand-row { grid-template-columns: 118px minmax(0, 1fr); gap: 8px; align-items: center; }
  .brand-row .logo-main { max-width: 150px; }
  .contacts-image { min-height: 40px; object-fit: contain; object-position: right center; }
  .cities-row { grid-template-columns: 118px minmax(0, 1fr); gap: 8px; }
  .cities-row .cities { font-size: 12px; line-height: 1.45; }
  .hero-slide img { height: auto; min-height: 0; aspect-ratio: 7 / 1; object-fit: contain; object-position: center; }

  .nav-toggle,
  .legacy-nav-toggle { display: block; }
  .main-nav { display: none; grid-template-columns: 1fr; }
  .main-nav.open { display: block; }
  .nav-item + .nav-item { border-left: 0; border-top: 1px solid rgba(80, 80, 80, .35); }
  .nav-link,
  .nav-button {
    min-height: 58px;
    justify-content: space-between;
    padding-inline: 20px;
    font-size: 17px !important;
    text-align: left;
  }
  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-button:hover,
  .nav-button:focus-visible,
  .nav-item.open > .nav-button,
  .nav-item.open > .nav-link-dropdown { font-size: 18px !important; }
  .submenu,
  .nav-item:nth-last-child(-n+2) > .submenu {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    display: none;
    border-width: 1px 0 0;
    box-shadow: inset 0 5px 12px rgba(0, 0, 0, .06);
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item.open > .submenu { display: block; }
  .submenu a { min-height: 48px; padding: 12px 26px; font-size: 17px !important; white-space: normal; }
  .submenu a:hover,
  .submenu a:focus-visible { padding-right: 32px; font-size: 18px !important; }

  .main-grid { display: block; padding: 22px 18px 30px; }
  .sidebar-details { margin: 0 0 28px; border: 1px solid #d7d7d7; }
  .sidebar-details > summary {
    display: block;
    padding: 14px 17px;
    background: var(--ubc-menu-gradient);
    color: #333;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer;
  }
  .sidebar-details > summary::marker { color: var(--ubc-blue); }
  .sidebar { padding: 10px 14px 16px; }
  .service-list a { min-height: 41.6px; padding: 5.6px 8px 5.6px 0; font-size: 17px !important; }
  .service-list a:hover,
  .service-list a:focus-visible { margin-right: 0; padding-right: 8px; font-size: 18px !important; }
  .office-image, .payment img { width: min(100%, 310px); }
  .article { max-width: none; }
  .article p { font-size: 18px !important; line-height: 1.62; text-align: left; }
  .article h2 { font-size: 22px !important; }
  .page-title { padding: 18px; font-size: 20px !important; }
  .promo-grid { grid-template-columns: 1fr; padding: 0 18px 25px; }
  .promo-card h3 { font-size: 18px !important; }
  .promo-card p { font-size: 17px !important; }
  .closing { margin: 0; padding: 0 18px; }
  .site-footer { padding: 0 18px 20px; }
  .footer-links { font-size: 13px; }
  .footer-meta { grid-template-columns: 1fr; text-align: center; font-size: 13px; }
  .footer-meta .copyright,
  .footer-meta .marks { text-align: center; }
  .footer-meta .counter-space { display: none; }

  /* STM31 mobile wrapper */
  .legacy-stm-wrap { min-height: 58px; }
  .legacy-stm-host { display: none; min-height: 0; overflow: visible; }
  .legacy-stm-host.is-open { display: block; }
  #Stm0p0iTB,
  #Stm0p0iTB > tbody,
  #Stm0p0iTB > tbody > tr { display: block !important; width: 100% !important; }
  #Stm0p0iTB > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(80, 80, 80, .35) !important;
  }
  [id^="Stm0p0i"][id$="e"],
  [id^="Stm0p0i"][id$="e"] > table { min-height: 58px !important; width: 100% !important; }
  [id^="Stm0p0i"][id$="eMTD"] { text-align: left !important; padding-inline: 20px !important; }
  #Stm0p1i,
  #Stm0p2i,
  #Stm0p3i,
  #Stm0p4i,
  #Stm0p5i {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #Stm0p1iTB,
  #Stm0p2iTB,
  #Stm0p3iTB,
  #Stm0p4iTB,
  #Stm0p5iTB { width: 100% !important; min-width: 0 !important; }
  [id^="Stm0p1i"][id$="eMTD"],
  [id^="Stm0p2i"][id$="eMTD"],
  [id^="Stm0p3i"][id$="eMTD"],
  [id^="Stm0p4i"][id$="eMTD"],
  [id^="Stm0p5i"][id$="eMTD"] { white-space: normal !important; }
}

@media (max-width: 480px) {
  .utility-row { display: none; }
  .brand-row { grid-template-columns: 100px minmax(0, 1fr); padding-top: 8px; }
  .cities-row { display: block; }
  .cities-row.logo-only { display: none; }
  .cities-row .logo-sub { display: none; }
  .cities-row .cities { padding: 7px 0; text-align: center; }
  .city-links { margin-bottom: 17px; font-size: 13px; line-height: 1.65; }
  .contacts-image { height: 42px; object-fit: cover; object-position: right center; }
  .hero-slide img { height: auto; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   UBC menu and separator correction - 2026-07-29
   Uses the supplied original menu.png texture. The texture is scaled only
   vertically and repeated horizontally, preventing gradient distortion.
   ========================================================================== */

:root {
  --ubc-menu-row-desktop: 42px;
  --ubc-menu-texture: url("../menu.png");
}

/* The original 35 x 10 px separator is tiled instead of being stretched. */
.logo-rule,
.closing-rule {
  display: block;
  width: 100%;
  height: 10px;
  margin: 0;
  background-color: #fff;
  background-image: url("../image/grad_logo_down.gif");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: auto 10px;
}
.closing-rule { margin-bottom: 8px; }

/* Desktop navigation now has exactly the same horizontal span as the hero. */
.main-nav-wrap {
  width: calc(100% - 80px);
  margin-right: auto;
  margin-left: auto;
  background-color: #dfe1e9;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

.main-nav {
  width: 100%;
}

.nav-link,
.nav-button {
  height: var(--ubc-menu-row-desktop);
  min-height: var(--ubc-menu-row-desktop);
  padding: 0 10px;
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .16s ease, font-size .16s ease, font-weight .16s ease,
              text-shadow .16s ease, background-position .16s ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-button:hover,
.nav-button:focus-visible,
.nav-item.open > .nav-button,
.nav-item.open > .nav-link-dropdown {
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  color: var(--ubc-blue) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 #fff;
}

.nav-button::after,
.nav-link-dropdown::after {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
  margin-left: 2px;
}

/* Main and dropdown rows use the same desktop height and same texture. */
.submenu {
  top: calc(100% - 1px);
  min-width: 310px;
  padding: 3px;
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat;
  background-position: center;
  background-size: auto var(--ubc-menu-row-desktop);
  border: 2px solid #a5a8b1;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .16);
}

.submenu a {
  display: flex;
  min-height: var(--ubc-menu-row-desktop);
  height: var(--ubc-menu-row-desktop);
  align-items: center;
  padding: 0 12px;
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s ease, font-size .15s ease, font-weight .15s ease,
              padding-right .15s ease, text-shadow .15s ease;
}

.submenu a:hover,
.submenu a:focus-visible {
  padding-right: 24px;
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  color: var(--ubc-blue) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 #fff;
}

/* Keep the optional STM31 page visually compatible with the same asset. */
.legacy-stm-wrap,
.legacy-stm-host {
  min-height: var(--ubc-menu-row-desktop);
  height: var(--ubc-menu-row-desktop);
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}
[id^="Stm0p0i"][id$="e"],
[id^="Stm0p1i"][id$="e"],
[id^="Stm0p2i"][id$="e"],
[id^="Stm0p3i"][id$="e"],
[id^="Stm0p4i"][id$="e"],
[id^="Stm0p5i"][id$="e"] {
  background-color: #e3e5ed !important;
  background-image: var(--ubc-menu-texture) !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
  background-size: auto 100% !important;
}
[id^="Stm0p0i"][id$="e"],
[id^="Stm0p0i"][id$="e"] > table {
  min-height: var(--ubc-menu-row-desktop) !important;
  height: var(--ubc-menu-row-desktop) !important;
}

@media (max-width: 1023px) {
  .main-nav-wrap { width: calc(100% - 44px); }
  .nav-link,
  .nav-button { padding-right: 7px; padding-left: 7px; font-size: 13px !important; }
  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-button:hover,
  .nav-button:focus-visible,
  .nav-item.open > .nav-button,
  .nav-item.open > .nav-link-dropdown { font-size: 15px !important; }
}

@media (max-width: 800px) {
  .main-nav-wrap { width: calc(100% - 28px); }
  .nav-toggle,
  .legacy-nav-toggle {
    min-height: 52px;
    background-color: #e3e5ed;
    background-image: var(--ubc-menu-texture);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
  }
  .nav-link,
  .nav-button {
    height: auto;
    min-height: 54px;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 17px !important;
    white-space: normal;
  }
  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-button:hover,
  .nav-button:focus-visible,
  .nav-item.open > .nav-button,
  .nav-item.open > .nav-link-dropdown { font-size: 18px !important; }
  .submenu { background-size: auto 48px; }
  .submenu a {
    height: auto;
    min-height: 48px;
    padding: 10px 24px;
    font-size: 17px !important;
    line-height: 1.25;
    white-space: normal;
  }
  .submenu a:hover,
  .submenu a:focus-visible { padding-right: 30px; font-size: 18px !important; }
}


/* ==========================================================================
   UBC interaction, mobile language controls and SVG contact icons - 2026-07-29
   ========================================================================== */

/* Mobile toolbar is hidden on desktop. */
.mobile-nav-bar { display: none; }
.mobile-contact-actions { display: none; }

/* Consistent orange hover for content links. Main navigation keeps brand blue. */
@media (hover: hover) and (pointer: fine) {
  .utility-row a:hover,
  .utility-row a:focus-visible,
  .cities-row .cities a:hover,
  .cities-row .cities a:focus-visible,
  .article a:hover,
  .article a:focus-visible,
  .promo-card a:hover,
  .promo-card a:focus-visible,
  .footer-links a:hover,
  .footer-links a:focus-visible,
  .office a:hover,
  .office a:focus-visible,
  .payment a:hover,
  .payment a:focus-visible {
    color: var(--ubc-orange) !important;
    text-decoration: underline !important;
  }
}

/* Sidebar: restored original orange marker, vectorised from arrow_o.gif. */
.service-list a {
  grid-template-columns: 19px minmax(0, 1fr);
  column-gap: 6px;
  padding-right: 8px;
  padding-left: 0;
}
.service-list a::before {
  content: "";
  display: block;
  width: 19px;
  height: 23px;
  align-self: center;
  justify-self: start;
  background: url("../image/arrow_o.svg") center / 19px 23px no-repeat;
  transition: transform .15s ease;
}
.service-list a::after { content: none; display: none; }
@media (hover: hover) and (pointer: fine) {
  .service-list a:hover,
  .service-list a:focus-visible {
    color: var(--ubc-orange) !important;
    text-decoration: none !important;
  }
  .service-list a:hover::before,
  .service-list a:focus-visible::before { transform: translateX(1px); }
}

@media (max-width: 800px) {
  .mobile-nav-bar {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 7px;
    background-color: #e3e5ed;
    background-image: var(--ubc-menu-texture);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
  }

  .mobile-language-switcher {
    display: inline-flex;
    height: 40px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #6f7480;
    border-radius: 3px;
    background: rgba(255, 255, 255, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  }
  .mobile-language-switcher a {
    display: flex;
    min-width: 45px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-right: 1px solid #8b8f98;
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1;
    text-decoration: none !important;
    text-shadow: 0 1px 0 #fff;
  }
  .mobile-language-switcher a:last-child { border-right: 0; }
  .mobile-language-switcher a.is-current,
  .mobile-language-switcher a.is-current {
    color: var(--ubc-blue) !important;
    background: rgba(255, 255, 255, .72);
  }
  .mobile-language-switcher a:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--ubc-blue);
    outline-offset: -3px;
  }

  .nav-toggle {
    display: flex;
    width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #6f7480;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, .28);
    background-image: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  }
  .nav-toggle::after { content: none !important; display: none !important; }
  .nav-toggle-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
  }
  .nav-toggle-icon span {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: #30343a;
    transform-origin: center;
    transition: top .18s ease, opacity .12s ease, transform .18s ease, background-color .18s ease;
  }
  .nav-toggle-icon span:nth-child(1) { top: 0; }
  .nav-toggle-icon span:nth-child(2) { top: 7px; }
  .nav-toggle-icon span:nth-child(3) { top: 14px; }
  .nav-toggle.is-open .nav-toggle-icon span { background: var(--ubc-blue); }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  .service-list a {
    grid-template-columns: 19px minmax(0, 1fr);
    padding-right: 10px;
    padding-left: 0;
  }
  .service-list a::before { width: 19px; height: 23px; }

  /* Contact buttons are displayed only below the Contacts submenu on mobile. */
  .mobile-contact-actions {
    display: block;
    padding: 13px 14px 15px;
    border-top: 1px solid rgba(100, 100, 100, .3);
    background: #f7f7f9;
  }
  .mobile-contact-title {
    margin: 0 0 10px;
    color: #4f545b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }
  .mobile-contact-icons {
    display: grid;
    grid-template-columns: repeat(6, minmax(38px, 1fr));
    gap: 8px;
    align-items: center;
    justify-items: center;
  }
  .submenu .mobile-contact-icons a,
  .submenu .mobile-contact-icons a:hover,
  .submenu .mobile-contact-icons a:focus-visible {
    display: flex;
    width: 44px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 1;
    text-decoration: none !important;
    text-shadow: none;
  }
  .mobile-contact-icons a:focus-visible {
    outline: 2px solid var(--ubc-blue);
    outline-offset: 3px;
  }
  .mobile-contact-icons img {
    display: block;
    width: 44px;
    height: 44px;
    max-width: none;
    transition: transform .16s ease, filter .16s ease;
  }
  .mobile-contact-icons a:active img { transform: scale(.93); }
}

@media (max-width: 420px) {
  .mobile-language-switcher a { min-width: 40px; padding-right: 7px; padding-left: 7px; }
  .mobile-contact-icons { grid-template-columns: repeat(3, 44px); justify-content: center; gap: 10px 16px; }
}


/* Client task selection: preserve every card and remove only the outer frame. */
.task-selection.page-content-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.task-selection .category-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.task-selection .resource-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: minmax(44px, auto) auto;
  column-gap: 16px;
  row-gap: 8px;
  min-height: 124px;
  height: 100%;
  padding: 16px 18px;
}
.task-selection .resource-card strong {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
.task-selection .resource-card-icon {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 60px;
  height: 60px;
  margin: 0;
  object-fit: contain;
}
.task-selection .resource-card span {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin-top: 0;
}
@media (max-width: 800px) {
  .task-selection .resource-card {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 112px;
    padding: 14px 16px;
  }
  .task-selection .resource-card-icon {
    width: 54px;
    height: 54px;
  }
}

/* ========================================================================== 
   Contact icon placement: desktop submenu, wide-screen floating bar and mobile bars
   ========================================================================== */

.contact-icon-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.contact-icon-list a,
.contact-icon-list a:hover,
.contact-icon-list a:focus-visible {
  display: flex;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}
.contact-icon-list img {
  display: block;
  width: 40px;
  height: 40px;
  max-width: none;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.contact-icon-list a:hover img,
.contact-icon-list a:focus-visible img {
  transform: translateY(-2px) scale(1.06);
  filter: saturate(1.08);
}
.contact-icon-list a:focus-visible {
  outline: 2px solid var(--ubc-blue) !important;
  outline-offset: 3px;
}
.contact-icon-list a:active img { transform: scale(.93); }

/* Separate icon row at the bottom of the desktop Contacts submenu. */
.desktop-contact-actions {
  display: block;
  margin: 3px 0 0;
  padding: 8px 9px 9px;
  border-top: 1px solid rgba(93, 97, 106, .42);
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}
.submenu .desktop-contact-actions .contact-icon-list a,
.submenu .desktop-contact-actions .contact-icon-list a:hover,
.submenu .desktop-contact-actions .contact-icon-list a:focus-visible {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  flex-basis: 38px;
}
.submenu .desktop-contact-actions .contact-icon-list img {
  width: 38px;
  height: 38px;
}

.mobile-menu-contact-strip,
.mobile-footer-contact-strip,
.desktop-floating-contact-bar {
  display: none;
}

/* On wide desktops the bar stays available while reading long pages. */
@media (min-width: 1241px) {
  .desktop-floating-contact-bar {
    position: fixed;
    right: 14px;
    bottom: 82px;
    z-index: 4400;
    display: block;
    padding: 8px 7px;
    border: 1px solid rgba(95, 95, 95, .48);
    border-radius: 22px;
    background: rgba(185, 185, 185, .94);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .62);
  }
  .desktop-floating-contact-bar .contact-icon-list {
    flex-direction: column;
    gap: 7px;
  }
  .desktop-floating-contact-bar .contact-icon-list a,
  .desktop-floating-contact-bar .contact-icon-list a:hover,
  .desktop-floating-contact-bar .contact-icon-list a:focus-visible,
  .desktop-floating-contact-bar .contact-icon-list img {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex-basis: 42px;
  }
}

@media (max-width: 800px) {
  /* Desktop-only contact row does not duplicate the mobile hamburger strip. */
  .desktop-contact-actions { display: none !important; }

  /* Opens immediately with the hamburger, independently of the Contacts submenu. */
  .mobile-menu-contact-strip {
    padding: 8px 7px 9px;
    border-top: 1px solid rgba(92, 96, 104, .42);
    border-bottom: 1px solid rgba(92, 96, 104, .42);
    background-color: #e3e5ed;
    background-image: var(--ubc-menu-texture);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
  }
  .main-nav.open + .mobile-menu-contact-strip { display: block; }

  /* Repeated one-click contact row immediately before the footer. */
  .mobile-footer-contact-strip {
    display: block;
    margin: 0 18px 16px;
    padding: 10px 8px;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    background: #f4f4f6;
  }

  .mobile-menu-contact-strip .contact-icon-list,
  .mobile-footer-contact-strip .contact-icon-list {
    gap: 6px;
    justify-content: space-between;
  }
  .mobile-menu-contact-strip .contact-icon-list a,
  .mobile-menu-contact-strip .contact-icon-list a:hover,
  .mobile-menu-contact-strip .contact-icon-list a:focus-visible,
  .mobile-footer-contact-strip .contact-icon-list a,
  .mobile-footer-contact-strip .contact-icon-list a:hover,
  .mobile-footer-contact-strip .contact-icon-list a:focus-visible,
  .mobile-menu-contact-strip .contact-icon-list img,
  .mobile-footer-contact-strip .contact-icon-list img {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-basis: 40px;
  }
}

@media (max-width: 360px) {
  .mobile-menu-contact-strip .contact-icon-list,
  .mobile-footer-contact-strip .contact-icon-list { gap: 4px; }
  .mobile-menu-contact-strip .contact-icon-list a,
  .mobile-menu-contact-strip .contact-icon-list a:hover,
  .mobile-menu-contact-strip .contact-icon-list a:focus-visible,
  .mobile-footer-contact-strip .contact-icon-list a,
  .mobile-footer-contact-strip .contact-icon-list a:hover,
  .mobile-footer-contact-strip .contact-icon-list a:focus-visible,
  .mobile-menu-contact-strip .contact-icon-list img,
  .mobile-footer-contact-strip .contact-icon-list img {
    width: 37px;
    height: 37px;
    min-width: 37px;
    min-height: 37px;
    flex-basis: 37px;
  }
}


/* ==========================================================================
   Responsive UBC header - 2026-07-29
   Restored to the previous page span: a 1240 CSS-pixel paper container with
   40-pixel side fields and an approximately 1160-pixel header/hero/menu area.
   The supplied transparent PNG logo and the 1100 x 100 contacts banner scale
   together without changing the remaining header behaviour.
   ========================================================================== */

.site-shell {
  width: min(100%, 1240px);
}

.header-visual-inner {
  width: calc(100% - 80px);
  margin-right: auto;
  margin-left: auto;
}

.header-visual-inner .utility-row {
  padding-right: 0;
  padding-left: 0;
}

.header-brand-row {
  display: grid;
  grid-template-columns: minmax(0, 333fr) minmax(0, 1100fr);
  gap: 7px;
  width: 100%;
  min-height: 0;
  align-items: center;
  overflow: visible;
  background: #fff;
}

.logo-link {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

.header-brand-row .logo-main {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  justify-self: stretch;
}

.header-brand-row .logo-main {
  image-rendering: auto;
}

.header-contacts {
  position: relative;
  min-width: 0;
  aspect-ratio: 11 / 1;
  overflow: visible;
  background: #fff;
}

.header-contacts .contacts-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
}

/* 520 x 50 px action field inside the native 1100 x 100 px contacts image. */
.header-contact-actions {
  position: absolute;
  right: .9091%;
  bottom: 0;
  z-index: 3;
  display: flex;
  width: 47.2727%;
  height: 50%;
  align-items: center;
  justify-content: space-between;
}

.header-contact-actions a,
.header-contact-actions a:hover,
.header-contact-actions a:focus-visible {
  display: flex;
  width: 7.3077%;
  min-width: 0;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  text-decoration: none !important;
}

.header-contact-actions img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transition: transform .16s ease, filter .16s ease;
}

.header-contact-actions a:hover img,
.header-contact-actions a:focus-visible img {
  transform: translateY(-1px) scale(1.07);
  filter: saturate(1.08);
}

.header-contact-actions a:focus-visible {
  outline: 2px solid var(--ubc-blue);
  outline-offset: 2px;
}

.header-contact-actions a:active img { transform: scale(.93); }

/* The removed ubk1.gif/cities row no longer reserves any header height. */
.cities-row.logo-only { display: none !important; }

.header-visual-inner .logo-rule,
.header-visual-inner .hero {
  width: 100%;
}

.header-visual-inner .hero-slide img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 6 / 1;
  object-fit: cover;
}

/* Keep the CSS navigation exactly aligned with the restored hero width. */
.main-nav-wrap {
  width: calc(100% - 80px);
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 1023px) {
  .header-visual-inner { width: calc(100% - 44px); }
  .header-visual-inner .utility-row {
    padding-right: 0;
    padding-left: 0;
  }
  .main-nav-wrap { width: calc(100% - 44px); }
}

@media (max-width: 800px) {
  .header-visual-inner { width: calc(100% - 28px); }

  .header-brand-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 9px;
  }

  .logo-link {
    width: min(58vw, 220px);
    margin: 0 auto;
  }

  .header-brand-row .logo-main {
    width: 100%;
    max-width: none;
  }

  .header-contacts {
    display: flex;
    width: 100%;
    aspect-ratio: auto;
    flex-direction: column;
    overflow: visible;
  }

  .header-contacts .contacts-image {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }

  /* On phones the graphic remains proportional and the controls form a
     usable one-tap row immediately below it. */
  .header-contact-actions {
    position: static;
    width: 100%;
    height: auto;
    padding: 7px 14px 9px;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #d4d4d4;
    background: #f4f4f6;
  }

  .header-contact-actions a,
  .header-contact-actions a:hover,
  .header-contact-actions a:focus-visible {
    width: clamp(34px, 10vw, 42px);
    height: clamp(34px, 10vw, 42px);
    flex: 0 0 clamp(34px, 10vw, 42px);
  }

  .main-nav-wrap { width: calc(100% - 28px); }
}

@media (max-width: 480px) {
  .header-brand-row { padding-top: 8px; }
  .logo-link { width: min(62vw, 205px); }
  .header-contact-actions { padding-right: 9px; padding-left: 9px; }
  .header-contact-actions a,
  .header-contact-actions a:hover,
  .header-contact-actions a:focus-visible {
    width: clamp(32px, 9.5vw, 38px);
    height: clamp(32px, 9.5vw, 38px);
    flex-basis: clamp(32px, 9.5vw, 38px);
  }
}

/* ========================================================================== 
   UBC menu/content/sidebar alignment update - 2026-07-29
   At the 1240 px paper width the usable 1160 px content row is split exactly
   like the three cards below: 370 px sidebar + 25 px gap + 765 px article.
   ========================================================================== */

/* Six equal top-level menu controls; only the visible controls are bold. */
.main-nav {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.nav-link,
.nav-button {
  font-weight: 700 !important;
}

/* Exact desktop alignment with the three-card row below:
   promo card = (1160 - 2 x 25) / 3 = 370 px;
   article = 2 x 370 + 25 = 765 px. */
.main-grid {
  grid-template-columns: minmax(310px, 370fr) minmax(0, 765fr);
  gap: 25px;
}
.sidebar-details,
.sidebar {
  width: 100%;
  min-width: 0;
}
.article {
  width: 100%;
  max-width: 765px;
}

/* Office and payment sections now use the same card language and width as
   each lower promotional block, while retaining the original graphics. */
.sidebar-card {
  width: 100%;
  min-width: 0;
  margin-top: 20px;
  padding: 16px 17px 18px;
  border: 1px solid #e1e1e1;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sidebar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 9px 22px rgba(0, 0, 0, .09);
}
.sidebar-card h3 {
  margin: 0 0 11px;
  color: var(--ubc-text);
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35;
}
.sidebar-card p {
  margin: 0 0 14px;
  font-size: 15px !important;
  line-height: 1.5;
}
.sidebar-card .office-image {
  display: block;
  width: min(100%, 260px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.sidebar-card.payment img {
  display: block;
  width: min(100%, 300px);
  max-width: 100%;
  height: auto;
  margin: 2px auto 0;
}

@media (max-width: 1023px) {
  .main-grid {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
  }
  .article { max-width: none; }
}

@media (max-width: 800px) {
  .main-grid { display: block; }
  .article { max-width: none; }
  .sidebar-card {
    margin-top: 16px;
    padding: 15px;
  }
  .sidebar-card .office-image,
  .sidebar-card.payment img {
    width: min(100%, 310px);
  }
}


/* ==========================================================================
   UBC complete information architecture and mega-menu scaffold - 2026-07-29
   ========================================================================== */
.main-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.mega-nav-item { position: static; }
.submenu.mega-menu {
  left: 50%;
  width: min(1160px, calc(100vw - 28px));
  max-width: none;
  max-height: min(72vh, 720px);
  padding: 16px;
  overflow: auto;
  transform: translateX(-50%) translateY(-8px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  background: #fff;
}
.nav-item.open > .submenu.mega-menu { display: grid; transform: translateX(-50%) translateY(0); }
.mega-group {
  min-width: 0;
  padding: 10px 11px 11px;
  border: 1px solid #d9d9d9;
  background: linear-gradient(180deg,#fbfbfb,#f4f4f4);
}
.mega-group-title {
  display: block;
  margin: 0 0 8px;
  padding: 0 0 7px;
  border-bottom: 2px solid #e47b19;
  color: #00009F !important;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none !important;
}
.mega-group ul { margin: 0; padding: 0; list-style: none; }
.mega-group li + li { border-top: 1px solid #e7e7e7; }
.mega-group li a {
  display: block;
  padding: 6px 4px;
  color: #4f4f4f !important;
  font-size: 13px !important;
  line-height: 1.3;
  text-decoration: none !important;
}
.mega-group li a:hover,.mega-group li a:focus-visible { color: #e46f12 !important; background: #fff; }
.mega-group-regions { grid-column: span 2; }
.mega-group-regions ul { columns: 2; column-gap: 18px; }
.mega-group-regions li { break-inside: avoid; }
.utility-language-links { margin-left: 12px; white-space: nowrap; }
.utility-language-links a.is-current,.mobile-language-switcher a.is-current { color: #00009F !important; font-weight: 700; }

.generated-page { padding: 22px 40px 38px; }
.page-breadcrumbs { margin: 0 0 18px; color: #777; font-size: 13px; }
.page-breadcrumbs a { color: #5f5f5f; }
.breadcrumb-sep { display: inline-block; margin: 0 7px; color: #aaa; }
.page-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 25px; align-items: start; }
.page-side-panel,.page-content-card {
  border: 1px solid #d8d8d8;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.055);
}
.page-side-panel { position: sticky; top: 70px; padding: 20px; }
.page-side-panel h2 { margin: 0 0 12px; color: #00009F; font-size: 18px; }
.page-side-panel ul { margin: 0 0 18px; padding: 0; list-style: none; }
.page-side-panel li + li { border-top: 1px solid #eee; }
.page-side-panel a { display: block; padding: 9px 3px; text-decoration: none; }
.page-side-panel a:hover { color: #e46f12; }
.side-cta { border: 1px solid #00009F; text-align: center; color: #00009F !important; font-weight: 700; }
.page-content-card { min-width: 0; padding: clamp(24px,4vw,48px); }
.full-width-card { width: 100%; }
.page-content-card h1 { margin: 0 0 20px; color: #202020; font-size: clamp(28px,3.3vw,44px); line-height: 1.12; }
.page-lead { margin: 0 0 30px; color: #4a4a4a; font-size: 19px; line-height: 1.65; }
.page-section { margin-top: 34px; }
.page-section h2 { color: #00009F; font-size: 24px; }
.check-list,.process-list { padding-left: 22px; }
.check-list li,.process-list li { margin: 9px 0; line-height: 1.55; }
.regional-callout { padding: 22px; border-left: 4px solid #e47b19; background: #f6f7f9; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.primary-action,.secondary-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid #00009F; text-decoration: none !important; font-weight: 700; }
.primary-action { background: #00009F; color: #fff !important; }
.secondary-action { color: #00009F !important; background: #fff; }
.resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.resource-card { display: flex; min-height: 104px; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid #d8d8d8; background: #fafafa; color: #333 !important; text-decoration: none !important; transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.resource-card:hover { transform: translateY(-3px); border-color: #e47b19; box-shadow: 0 10px 22px rgba(0,0,0,.08); }
.resource-card strong { color: #00009F; font-size: 16px; line-height: 1.35; }
.resource-card span { margin-top: 12px; color: #e46f12; font-size: 13px; }
.resource-card-large { min-height: 130px; }
.category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.directory-section { scroll-margin-top: 76px; margin-top: 34px; }
.directory-section h2 { margin-bottom: 12px; color: #00009F; font-size: 24px; }
.directory-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px 22px; border-top: 1px solid #ddd; }
.directory-links a { padding: 10px 2px; border-bottom: 1px solid #e7e7e7; text-decoration: none; }
.directory-links a:hover { color: #e46f12; }
.region-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.region-chip { display: flex; min-height: 58px; align-items: center; padding: 10px 12px; border: 1px solid #dcdcdc; background: #fafafa; color: #333 !important; text-decoration: none !important; font-size: 14px; }
.region-chip:hover { border-color: #e47b19; color: #e46f12 !important; }
.structure-gateway { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; padding: 0 40px 30px; }
.structure-gateway article { padding: 24px; border: 1px solid #d8d8d8; background: #f8f8f8; }
.structure-gateway h2 { margin-top: 0; }
.structure-gateway h2 a { color: #00009F; text-decoration: none; }
.desktop-floating-contact-bar { opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity .2s ease,transform .2s ease; }
.desktop-floating-contact-bar.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

@media (max-width: 1050px) {
  .submenu.mega-menu { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .resource-grid,.category-grid,.region-directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .main-nav { grid-template-columns: 1fr; }
  .mega-nav-item { position: relative; }
  .submenu.mega-menu,.nav-item.open > .submenu.mega-menu { position: static; left: auto; width: 100%; max-height: none; padding: 10px; transform: none; grid-template-columns: 1fr; border-width: 0; }
  .mega-group-regions { grid-column: auto; }
  .mega-group-regions ul { columns: 1; }
  .mega-group { padding: 9px; }
  .mega-group li a { font-size: 15px !important; padding: 9px 5px; }
  .generated-page { padding: 18px; }
  .page-layout { grid-template-columns: 1fr; }
  .page-side-panel { position: static; }
  .page-content-card { padding: 24px 18px; }
  .resource-grid,.category-grid,.region-directory,.directory-links,.structure-gateway { grid-template-columns: 1fr; }
  .structure-gateway { padding: 0 18px 24px; }
}


/* ========================================================================== 
   UBC menu accordion and rectangular Big Four-style UI - 2026-07-29
   Third-level links open only from the + control. Second-level headers retain
   the historic UBC silver menu texture; expanded lists use a neutral grey.
   ========================================================================== */

/* Rectangular visual language: no rounded corners on blocks or controls. */
body.ubc-page *,
body.ubc-page *::before,
body.ubc-page *::after {
  border-radius: 0 !important;
}

.submenu.mega-menu {
  align-items: start;
  background: #fff;
}

.mega-group {
  align-self: start;
  padding: 0;
  overflow: hidden;
  border: 1px solid #a5a8b1;
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto var(--ubc-menu-row-desktop);
}

.mega-group-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  min-height: var(--ubc-menu-row-desktop);
  align-items: stretch;
  background-color: #e3e5ed;
  background-image: var(--ubc-menu-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}

/* Override generic .submenu a sizing only for second-level mega-menu titles. */
.submenu .mega-group-title,
.submenu .mega-group-title:hover,
.submenu .mega-group-title:focus-visible {
  display: flex;
  width: auto;
  height: auto;
  min-height: var(--ubc-menu-row-desktop);
  align-items: center;
  margin: 0;
  padding: 7px 11px;
  border: 0;
  background-color: transparent;
  background-image: none;
  color: #00009F !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  white-space: normal;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

.submenu .mega-group-title:hover,
.submenu .mega-group-title:focus-visible {
  color: var(--ubc-orange) !important;
}

.mega-group-toggle {
  display: none;
  width: 44px;
  min-width: 44px;
  min-height: var(--ubc-menu-row-desktop);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-left: 0;
  background: transparent;
  color: #333;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 0 #fff;
}

.js .mega-group-toggle { display: flex; }
.mega-group-toggle:hover,
.mega-group-toggle:focus-visible,
.mega-group.is-expanded .mega-group-toggle {
  background: rgba(255,255,255,.48);
  color: var(--ubc-blue);
  outline: 0;
}
.mega-group-toggle:focus-visible { box-shadow: inset 0 0 0 2px var(--ubc-blue); }

/* Without JavaScript all links remain visible. With JavaScript they become a
   click/tap accordion controlled only by the + button. */
.mega-group-list {
  margin: 0;
  padding: 7px 10px 9px;
  list-style: none;
  border-top: 1px solid #c7c7c7;
  background: #f2f2f2;
  max-height: 350px;
  overflow: auto;
}
.js .mega-group-list { display: none; }
.js .mega-group.is-expanded .mega-group-list { display: block; }

/* Third-level items are intentionally neutral: no menu.png or gradients. */
.submenu .mega-group-list li + li { border-top: 1px solid #dedede; }
.submenu .mega-group-list li a,
.submenu .mega-group-list li a:hover,
.submenu .mega-group-list li a:focus-visible {
  display: block;
  height: auto;
  min-height: 0;
  padding: 8px 5px;
  background: #f2f2f2;
  background-image: none;
  color: #4f4f4f !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  white-space: normal;
  text-shadow: none;
  text-decoration: none !important;
}
.submenu .mega-group-list li a:hover,
.submenu .mega-group-list li a:focus-visible {
  padding-right: 5px;
  background: #e7e7e7;
  color: var(--ubc-orange) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.resource-card span { white-space: nowrap; }

@media (max-width: 800px) {
  .mega-group-heading { grid-template-columns: minmax(0, 1fr) 48px; }
  .mega-group-toggle { width: 48px; min-width: 48px; min-height: 50px; }
  .submenu .mega-group-title,
  .submenu .mega-group-title:hover,
  .submenu .mega-group-title:focus-visible {
    min-height: 50px;
    padding: 10px 12px;
    font-size: 16px !important;
  }
  .mega-group-list { max-height: none; padding: 5px 10px 8px; }
  .submenu .mega-group-list li a,
  .submenu .mega-group-list li a:hover,
  .submenu .mega-group-list li a:focus-visible {
    min-height: 44px;
    padding: 11px 5px;
    font-size: 15px !important;
  }
}

/* ========================================================================== 
   UBC desktop fly-out navigation - 2026-07-29
   Desktop only. Mobile accordion behaviour below 800px is intentionally
   preserved without visual or interaction changes.
   ========================================================================== */

.menu-label-desktop { display: none; }
.menu-label-mobile { display: inline; }

@media (min-width: 801px) {
  /* The first dropdown is a compact vertical index. Its historic silver
     texture remains; third-level catalogues open horizontally to the right. */
  .main-nav-wrap,
  .main-nav,
  .nav-item,
  .mega-nav-item,
  .submenu.mega-menu {
    overflow: visible;
  }

  .mega-nav-item { position: relative; }

  .submenu.mega-menu,
  .nav-item.open > .submenu.mega-menu,
  .nav-item:hover > .submenu.mega-menu,
  .nav-item:focus-within > .submenu.mega-menu {
    display: block;
    left: 0;
    right: auto;
    top: calc(100% - 1px);
    width: 316px;
    min-width: 316px;
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 1px solid #8f929a;
    background: #e3e5ed;
    box-shadow: 0 13px 28px rgba(0,0,0,.19);
    transform: translateY(0);
  }

  /* Keep the Information menu inside the right side of the page on common
     desktop widths while still opening third-level panels to the right. */
  .main-nav > .mega-nav-item:nth-child(3) > .submenu.mega-menu {
    left: 0;
  }

  .mega-group,
  .mega-group-regions {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid #9fa2aa;
    background-color: #e3e5ed;
    background-image: var(--ubc-menu-texture);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
  }

  .mega-group:last-child { border-bottom: 0; }

  .mega-group-heading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    width: 100%;
    min-height: 46px;
    align-items: stretch;
    background-color: #e3e5ed;
    background-image: var(--ubc-menu-texture);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
  }

  .menu-label-desktop {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .menu-label-mobile { display: none; }

  .submenu .mega-group-title,
  .submenu .mega-group-title:hover,
  .submenu .mega-group-title:focus-visible {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 46px;
    max-height: 54px;
    align-items: center;
    margin: 0;
    padding: 6px 10px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #00009F !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.22;
    white-space: normal;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
    transition: color .14s ease, background-color .14s ease;
  }

  .submenu .mega-group-title:hover,
  .submenu .mega-group-title:focus-visible {
    background-color: rgba(255,255,255,.34);
    color: var(--ubc-orange) !important;
  }

  /* Compact side-pointing triangle. The plus remains in the DOM so the
     existing mobile menu is unchanged, but it is hidden visually on desktop. */
  .mega-group-toggle,
  .js .mega-group-toggle {
    position: relative;
    display: flex;
    width: 36px;
    min-width: 36px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-left: 0;
    background: rgba(255,255,255,.12);
    color: #4e5158;
    cursor: pointer;
    transition: color .14s ease, background-color .14s ease;
  }

  .mega-group-toggle > span { font-size: 0 !important; line-height: 0; }
  .mega-group-toggle::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid currentColor;
  }

  .mega-group-toggle:hover,
  .mega-group-toggle:focus-visible,
  .mega-group.is-expanded .mega-group-toggle {
    background: rgba(255,255,255,.55);
    color: var(--ubc-orange);
    outline: 0;
  }
  .mega-group-toggle:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ubc-orange);
  }

  /* Third-level fly-out panel. Every service stays on one line and the panel
     never creates an internal scrollbar on a standard 1920x1080 monitor. */
  .mega-group-list,
  .mega-group-regions .mega-group-list {
    position: absolute;
    z-index: 30;
    left: calc(100% - 1px);
    top: -1px;
    width: max-content;
    min-width: 365px;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    columns: auto;
    list-style: none;
    border: 1px solid #9fa2aa;
    background: #f1f1f1;
    box-shadow: 10px 12px 25px rgba(0,0,0,.17);
  }

  .js .mega-group-list { display: none; }
  .js .mega-group.is-expanded .mega-group-list { display: block; }

  .mega-group.mega-group-multicol .mega-group-list,
  .js .mega-group.mega-group-multicol.is-expanded .mega-group-list {
    grid-auto-flow: column;
    grid-template-rows: repeat(14, minmax(34px, auto));
    grid-template-columns: repeat(2, max-content);
  }
  .js .mega-group.mega-group-multicol.is-expanded .mega-group-list {
    display: grid;
  }

  /* Only used as a viewport-safety fallback by JavaScript for a low menu row. */
  .mega-group.flyout-up .mega-group-list {
    top: auto;
    bottom: -1px;
  }

  .submenu .mega-group-list li,
  .mega-group-regions .mega-group-list li {
    min-width: 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #d2d2d2;
    break-inside: avoid;
  }
  .submenu .mega-group-list li:last-child { border-bottom: 0; }

  .submenu .mega-group-list li a,
  .submenu .mega-group-list li a:hover,
  .submenu .mega-group-list li a:focus-visible {
    position: relative;
    display: flex;
    min-width: 365px;
    min-height: 34px;
    align-items: center;
    box-sizing: border-box;
    padding: 7px 17px 7px 30px;
    background: #f1f1f1;
    background-image: none;
    color: rgba(42,42,42,.80) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.25;
    white-space: nowrap;
    text-shadow: none;
    text-decoration: none !important;
    transition: color .13s ease, background-color .13s ease,
                font-size .13s ease, padding-left .13s ease;
  }

  .submenu .mega-group-list li a::before {
    content: "\203A";
    position: absolute;
    left: 14px;
    top: 50%;
    color: #666;
    font-size: 19px;
    line-height: 1;
    transform: translateY(-52%);
  }

  .submenu .mega-group-list li a:hover,
  .submenu .mega-group-list li a:focus-visible {
    padding-left: 33px;
    padding-right: 17px;
    background: #dfdfdf;
    color: var(--ubc-orange) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }
  .submenu .mega-group-list li a:hover::before,
  .submenu .mega-group-list li a:focus-visible::before {
    color: var(--ubc-orange);
  }

  /* Ordinary second-level lists are also restricted to two text lines and do
     not use internal scrolling. */
  .submenu:not(.mega-menu) {
    max-height: none;
    overflow: visible;
  }
  .submenu:not(.mega-menu) > li > a {
    display: -webkit-box;
    min-height: 38px;
    max-width: 390px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
  }
}

/* ========================================================================== 
   UBC mobile menu, contact dock and FAQ refinement - 2026-07-29
   ========================================================================== */

/* Header contact actions: use the complete 520px field. The left action starts
   10px inside the field and the right action aligns with its right edge. */
.header-contact-actions {
  right: 0;
}
.header-contact-actions .contact-icon-list {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 0;
  padding-left: 1.9231%; /* 10px of the native 520px action field */
}

/* All third-level menus contain text only. */
.submenu .mega-group-list li a::before,
.submenu .mega-group-list li a:hover::before,
.submenu .mega-group-list li a:focus-visible::before {
  content: none !important;
  display: none !important;
}

@media (min-width: 801px) {
  .submenu .mega-group-list li a,
  .submenu .mega-group-list li a:hover,
  .submenu .mega-group-list li a:focus-visible {
    padding-left: 17px;
  }
  .submenu .mega-group-list li a:hover,
  .submenu .mega-group-list li a:focus-visible {
    padding-left: 20px;
  }
}

@media (max-width: 800px) {
  /* The former strip immediately below the hamburger is removed. */
  .mobile-menu-contact-strip { display: none !important; }

  /* Every third-level list, including Information materials, uses the same
     neutral background and never inherits the historical menu texture. */
  .submenu.mega-menu .mega-group-list,
  .submenu.mega-menu .mega-group-list li,
  .submenu.mega-menu .mega-group-list li a,
  .submenu.mega-menu .mega-group-list li a:hover,
  .submenu.mega-menu .mega-group-list li a:focus-visible {
    background-color: #f1f1f1 !important;
    background-image: none !important;
  }
  .submenu.mega-menu .mega-group-list {
    border-top: 1px solid #c7c7c7;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  }
  .submenu.mega-menu .mega-group-list li a,
  .submenu.mega-menu .mega-group-list li a:hover,
  .submenu.mega-menu .mega-group-list li a:focus-visible {
    padding-left: 13px !important;
    padding-right: 13px !important;
    color: #555 !important;
    font-weight: 400 !important;
  }
  .submenu.mega-menu .mega-group-list li a:hover,
  .submenu.mega-menu .mega-group-list li a:focus-visible {
    background-color: #e3e3e3 !important;
    color: var(--ubc-orange) !important;
  }

  /* Persistent one-tap contact dock. Only the icons receive pointer events,
     leaving the transparent surrounding area safe for vertical swipes. */
  body.ubc-page {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-footer-contact-strip {
    position: fixed;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    z-index: 4700;
    display: block !important;
    width: auto;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }
  .mobile-footer-contact-strip .contact-icon-list {
    display: grid;
    width: 100%;
    height: 44px;
    grid-template-columns: repeat(6, 42px);
    align-items: center;
    justify-content: space-between;
    gap: 0;
    pointer-events: none;
  }
  .mobile-footer-contact-strip .contact-icon-list a,
  .mobile-footer-contact-strip .contact-icon-list a:hover,
  .mobile-footer-contact-strip .contact-icon-list a:focus-visible,
  .mobile-footer-contact-strip .contact-icon-list img {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex-basis: 42px;
  }
  .mobile-footer-contact-strip .contact-icon-list a {
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 360px) {
  .mobile-footer-contact-strip .contact-icon-list {
    grid-template-columns: repeat(6, 39px);
  }
  .mobile-footer-contact-strip .contact-icon-list a,
  .mobile-footer-contact-strip .contact-icon-list a:hover,
  .mobile-footer-contact-strip .contact-icon-list a:focus-visible,
  .mobile-footer-contact-strip .contact-icon-list img {
    width: 39px;
    height: 39px;
    min-width: 39px;
    min-height: 39px;
    flex-basis: 39px;
  }
}

/* Accessible FAQ accordion. */
.faq-section { margin-top: 34px; }
.faq-list { border-top: 1px solid #cfd2d6; }
.faq-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #cfd2d6;
  background: #fff;
}
.faq-item summary {
  position: relative;
  display: block;
  padding: 15px 44px 15px 14px;
  color: #00009F;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--ubc-blue);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover,
.faq-item summary:focus-visible { color: var(--ubc-orange); background: #f4f4f4; outline: 0; }
.faq-item summary:focus-visible { box-shadow: inset 0 0 0 2px var(--ubc-blue); }
.faq-answer { padding: 0 14px 15px; color: #555; }
.faq-answer p { margin: 0; }

/* ========================================================================== 
   UBC second-level alignment refinement - 2026-07-29
   Ordinary submenu rows without a third-level fly-out use the same vertical
   centring and bold visual weight as expandable second-level menu headings.
   ========================================================================== */
@media (min-width: 801px) {
  .submenu:not(.mega-menu) > li > a,
  .submenu:not(.mega-menu) > li > a:hover,
  .submenu:not(.mega-menu) > li > a:focus-visible {
    display: flex;
    min-height: 46px;
    max-height: none;
    align-items: center;
    box-sizing: border-box;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #00009F !important;
    font-weight: 700 !important;
    line-height: 1.25;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
  .submenu:not(.mega-menu) > li > a:hover,
  .submenu:not(.mega-menu) > li > a:focus-visible {
    color: var(--ubc-orange) !important;
  }
}


/* Archive 2003-2025 integration */
.archive-article{font-size:16px;line-height:1.62}.archive-article p{margin:0 0 1em}.archive-article a{overflow-wrap:anywhere}.archive-article ul,.archive-dash-list{list-style:none;padding-left:0}.archive-article ul>li,.archive-dash-list li{position:relative;padding-left:1.35em;margin:.45em 0}.archive-article ul>li:before,.archive-dash-list li:before{content:"\2014";position:absolute;left:0;color:#d66a00;font-weight:600}.archive-responsive-table{width:100%;border-collapse:collapse;margin:1.25em 0;table-layout:fixed}.archive-responsive-table th,.archive-responsive-table td{border:1px solid #c8cdd2;padding:.65rem .75rem;vertical-align:top;overflow-wrap:anywhere}.archive-responsive-table th{background:#eceff1;font-weight:700}.archive-promo-card{height:auto;min-height:0}.archive-promo-body{font-size:15px;line-height:1.5}.archive-localized-summary{border-left:4px solid #d66a00;padding-left:1rem;margin-bottom:1.5rem}.archive-localized-lead{font-size:1.08em;font-weight:600;color:#27313a}.archive-original-text{margin-top:2rem;border-top:1px solid #bfc5ca;padding-top:1rem}.archive-original-text>summary{cursor:pointer;font-weight:700;color:#00009F;padding:.75rem 0}.archive-original-text>summary:hover{color:#d66a00}@media(max-width:800px){.archive-responsive-table,.archive-responsive-table thead,.archive-responsive-table tbody,.archive-responsive-table tr,.archive-responsive-table th,.archive-responsive-table td{display:block;width:100%}.archive-responsive-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.archive-responsive-table tr{border:1px solid #bfc5ca;margin:0 0 1rem;background:#fff}.archive-responsive-table td,.archive-responsive-table th{border:0;border-bottom:1px solid #e2e5e8;padding:.7rem .75rem .7rem 42%;position:relative;min-height:2.75rem}.archive-responsive-table td:before{content:attr(data-label);position:absolute;left:.75rem;top:.7rem;width:36%;font-weight:700;color:#4e5962}}
/* UBC BATCH 10: CTA AND FEEDBACK FORM */
.ubc-service-cta{margin:32px 0 8px;padding:24px;border:1px solid #ccd5df;background:linear-gradient(135deg,#f8fafc 0%,#eef3f7 100%);box-sizing:border-box}
.ubc-service-cta h2{margin:0 0 12px;font-size:1.35rem;line-height:1.3;color:#00009F}
.ubc-service-cta p{margin:0 0 18px}
.ubc-cta-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #00009F;background:#00009F;color:#fff!important;text-decoration:none!important;font-weight:700;line-height:1.25;cursor:pointer;box-sizing:border-box}
.ubc-cta-button:hover,.ubc-cta-button:focus{background:#e87521;border-color:#e87521;color:#fff!important}
.ubc-feedback-section{margin:24px 0;padding:24px;border:1px solid #cbd5df;background:#f7f9fb;box-sizing:border-box}
.ubc-feedback-form{display:grid;gap:16px}
.ubc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ubc-feedback-form label{display:grid;gap:6px;font-weight:700;color:#00009F}
.ubc-feedback-form input,.ubc-feedback-form select,.ubc-feedback-form textarea{width:100%;padding:11px 12px;border:1px solid #aebbc8;border-radius:0;background:#fff;color:#00009F;font:inherit;box-sizing:border-box}
.ubc-feedback-form textarea{resize:vertical;min-height:150px}
.ubc-feedback-form input:focus,.ubc-feedback-form select:focus,.ubc-feedback-form textarea:focus{outline:2px solid #e87521;outline-offset:1px;border-color:#e87521}
.ubc-form-consent{grid-template-columns:20px 1fr!important;align-items:start;font-weight:400!important}
.ubc-form-consent input{width:18px!important;height:18px;margin:2px 0 0}
.ubc-form-note{font-size:.92rem;color:#526577}
@media(max-width:760px){.ubc-form-grid{grid-template-columns:1fr}.ubc-feedback-section,.ubc-service-cta{padding:18px}.ubc-cta-button{width:100%;text-align:center}}


/* ========================================================================== 
   UBC batch 41: unified inner-page layout and linked breadcrumbs
   ========================================================================== */
.page-breadcrumbs {
  float: none !important;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}
.page-breadcrumbs a {
  color: #00009F;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-breadcrumbs a:hover,
.page-breadcrumbs a:focus-visible { color: var(--ubc-orange); }
.page-breadcrumbs .breadcrumb-sep { display: inline-block; margin: 0; padding: 0 8px; color: #999; }
.content-page > .page-breadcrumbs {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 40px 0 435px;
}
.generated-page > .page-breadcrumbs { width: 100%; margin: 0 0 18px; }
.content-page .article { color: #303030; font-size: 16px; line-height: 1.62; }
.content-page .article p { margin: 0 0 1.05em; color: #303030; font-size: 16px; line-height: 1.62; }
.content-page .article h2 { margin: 1.65em 0 .65em; color: #202020; font-size: 26px; line-height: 1.25; }
.content-page .article h3 { margin: 1.45em 0 .55em; color: #202020; font-size: 21px; line-height: 1.3; }
.content-page .article h4 { margin: 1.25em 0 .5em; color: #202020; font-size: 18px; line-height: 1.35; }
.content-page .article .article-lead { font-size: 1.08em; font-weight: 600; color: #27313a; }
.content-page .article .article-summary { margin: 0 0 1.5rem; padding-left: 1rem; border-left: 4px solid #00009F; }
.content-page .content-list { margin: 0 0 1.25em; padding-left: 0; list-style: none; }
.content-page .content-list > li { position: relative; margin: .48em 0; padding-left: 1.35em; }
.content-page ul.content-list > li::before { position: absolute; left: 0; color: #00009F; content: "\2014"; font-weight: 700; }
.content-page ol.content-list { padding-left: 1.45em; list-style: decimal; }
.content-page ol.content-list > li { padding-left: .2em; }
.content-page ol.content-list > li::before { content: none; }
.content-page .table-scroll { width: 100%; margin: 1.35em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-page .content-table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: auto; }
.content-page .content-table th,
.content-page .content-table td { padding: .7rem .78rem; border: 1px solid #c8cdd2; vertical-align: top; overflow-wrap: anywhere; }
.content-page .content-table th { background: #f1f4f7; color: #202020; font-weight: 700; text-align: left; }
.content-page .article-cta { clear: both; margin: 26px 0 30px; text-align: left; }
.content-page .article-cta .ubc-cta-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid #00009F;
  border-radius: 5px;
  background: #fff;
  color: #00009F !important;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.content-page .article-cta .ubc-cta-button:hover,
.content-page .article-cta .ubc-cta-button:focus-visible { border-color: #00009F; background: #00009F; color: #fff !important; }
.content-page .faq-section { margin: 1.6em 0; }
.content-page .faq-item { margin: 0 0 10px; border: 1px solid #d7dce2; background: #fff; }
.content-page .faq-item > summary { padding: 13px 15px; color: #202020; cursor: pointer; font-weight: 700; }
.content-page .faq-item > :not(summary) { margin-right: 15px; margin-left: 15px; }
.content-page .official-sources,
.content-page .related-links,
.content-page .resource-links { margin: 1.5em 0; padding: 18px; border: 1px solid #d7dce2; background: #f8f9fa; }
.content-page .ubc-feedback-form { display: grid; gap: 16px; }
.content-page .ubc-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.content-page .ubc-feedback-form label { display: grid; gap: 6px; color: #00009F; font-weight: 700; }
.content-page .ubc-feedback-form input,
.content-page .ubc-feedback-form select,
.content-page .ubc-feedback-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #aebbc8; border-radius: 5px; background: #fff; color: #00009F; font: inherit; box-sizing: border-box; }
.content-page .ubc-feedback-form textarea { min-height: 150px; resize: vertical; }
.content-page .ubc-form-consent { grid-template-columns: 20px 1fr !important; align-items: start; font-weight: 400 !important; }
.content-page .ubc-form-consent input { width: 18px !important; height: 18px; margin: 2px 0 0; }
@media (max-width: 1023px) and (min-width: 801px) {
  .content-page > .page-breadcrumbs { padding-right: 28px; padding-left: 336px; }
}
@media (max-width: 800px) {
  .content-page > .page-breadcrumbs { padding: 14px 18px 0; }
  .content-page .article p { font-size: 18px; line-height: 1.62; }
  .content-page .article h2 { font-size: 22px; }
  .content-page .article h3 { font-size: 20px; }
  .content-page .article-cta .ubc-cta-button { width: 100%; }
  .content-page .ubc-form-grid { grid-template-columns: 1fr; }
}


/* Batch 42: one readable body-text scale for all historical RU/UA/EN triplets. */
.legacy-triplet-page .article,
.legacy-triplet-page .article p,
.legacy-triplet-page .article li,
.legacy-triplet-page .article td,
.legacy-triplet-page .article th,
.legacy-triplet-page .article dd,
.legacy-triplet-page .article dt,
.legacy-triplet-page .article blockquote,
.legacy-triplet-page .article font,
.legacy-triplet-page .article small,
.legacy-triplet-page .article big {
  font-size: 16px !important;
  line-height: 1.62 !important;
}
@media (max-width: 800px) {
  .legacy-triplet-page .article,
  .legacy-triplet-page .article p,
  .legacy-triplet-page .article li,
  .legacy-triplet-page .article td,
  .legacy-triplet-page .article th,
  .legacy-triplet-page .article dd,
  .legacy-triplet-page .article dt,
  .legacy-triplet-page .article blockquote,
  .legacy-triplet-page .article font,
  .legacy-triplet-page .article small,
  .legacy-triplet-page .article big {
    font-size: 18px !important;
    line-height: 1.62 !important;
  }
}


/* UBC TOP-7 sticky services block - batch 90 */
.ubc-top-services {
  position: sticky;
  top: 72px;
  z-index: 3;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.ubc-top-services h2 {
  margin: 0 0 15px;
  color: #202020;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.28;
}
/* TOP-7 links deliberately inherit the canonical .service-list styling below:
   same orange arrow, typography, separators and hover behaviour as the
   standard sidebar service links. */
.ubc-top-services .service-list { margin-bottom: 0; }
@media (min-width: 801px) {
  .content-page .sidebar-details { align-self: stretch; }
  .content-page .sidebar { min-height: 100%; }
}
@media (max-width: 800px) {
  .ubc-top-services { display: none !important; }
}


/* UBC UI PASS 2026-08-21: sticky TOP-7, breadcrumbs below H1, compact transition cards */

/* Breadcrumbs live directly below H1. Home is a vector icon, not a text label. */
.page-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 32px;
  margin: 0 0 4px;
  padding: 7px 40px 0;
  color: #777;
  font-size: 13px;
  line-height: 1.35;
}
.page-breadcrumbs .breadcrumb-home {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--ubc-link-blue) !important;
  text-decoration: none !important;
}
.page-breadcrumbs .breadcrumb-home:hover,
.page-breadcrumbs .breadcrumb-home:focus-visible { color: var(--ubc-orange) !important; }
.breadcrumb-home-icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Use the vector orange UBC arrow in the canonical sidebar service lists. */
.service-list a::before {
  background-image: url("../image/arrow_o.svg");
  background-position: center;
  background-size: 19px 23px;
  background-repeat: no-repeat;
}

/* TOP-7 starts after the payment card in document flow and then follows the viewport. */
@media (min-width: 801px) {
  .content-page .sidebar-details {
    align-self: stretch !important;
    height: 100%;
    overflow: visible !important;
  }
  .content-page .sidebar {
    height: 100%;
    min-height: 100%;
    overflow: visible !important;
  }
  .ubc-top-services {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 16px !important;
    z-index: 5;
  }
}

/* Unified compact navigation cards. */
.resource-grid { align-items: stretch; }
.resource-card,
.task-selection .resource-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 21px;
  grid-template-rows: 1fr;
  column-gap: 13px;
  align-items: center;
  min-height: 82px;
  height: 100%;
  padding: 11px 13px;
  border: 1px solid var(--ubc-link-blue);
  background: #fff;
  color: var(--ubc-link-blue) !important;
  text-decoration: none !important;
  transform-origin: center;
  transition: color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.resource-card-large,
.task-selection .resource-card.resource-card-large { min-height: 82px; }
.resource-card .resource-card-icon,
.task-selection .resource-card .resource-card-icon {
  display: block;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: 48px;
  height: 48px;
  margin: 0;
  object-fit: contain;
}
.resource-card strong,
.task-selection .resource-card strong {
  display: -webkit-box;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  overflow: hidden;
  color: var(--ubc-link-blue) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  transition: color .16s ease;
}
.resource-card::after {
  content: "";
  display: block;
  grid-column: 3;
  grid-row: 1;
  width: 19px;
  height: 23px;
  justify-self: end;
  background: url("../image/arrow_o.svg") center / 19px 23px no-repeat;
}
.resource-card:hover,
.resource-card:focus-visible,
.task-selection .resource-card:hover,
.task-selection .resource-card:focus-visible {
  border-color: var(--ubc-orange);
  background: #fff;
  color: var(--ubc-orange) !important;
  transform: translateY(-2px) scale(1.018);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  text-decoration: none !important;
}
.resource-card:hover strong,
.resource-card:focus-visible strong,
.task-selection .resource-card:hover strong,
.task-selection .resource-card:focus-visible strong { color: var(--ubc-orange) !important; }

@media (max-width: 800px) {
  .page-breadcrumbs {
    min-height: 30px;
    margin-bottom: 2px;
    padding: 7px 18px 0;
    font-size: 12px;
  }
  .resource-card,
  .task-selection .resource-card {
    grid-template-columns: 48px minmax(0, 1fr) 21px;
    min-height: 76px;
    padding: 10px 12px;
  }
  .resource-card .resource-card-icon,
  .task-selection .resource-card .resource-card-icon {
    width: 44px;
    height: 44px;
  }
  .resource-card strong,
  .task-selection .resource-card strong { font-size: 15px !important; }
  .resource-card:hover,
  .resource-card:focus-visible,
  .task-selection .resource-card:hover,
  .task-selection .resource-card:focus-visible { transform: none; }
}

/* Keep sidebar and navigation-card interaction in the same UBC orange hover language. */
.service-list a:hover,
.service-list a:focus-visible { color: var(--ubc-orange) !important; }

/* ==========================================================================
   UBC compact desktop navigation/article + mobile sidebar cleanup - 2026-08-21
   ========================================================================== */
@media (min-width: 801px) {
  .nav-link,
  .nav-button {
    min-height: 45px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .content-page .article,
  .content-page .article p,
  .content-page .article li,
  .content-page .article td,
  .content-page .article th,
  .content-page .article dd,
  .content-page .article dt,
  .content-page .article blockquote,
  .legacy-triplet-page .article,
  .legacy-triplet-page .article p,
  .legacy-triplet-page .article li,
  .legacy-triplet-page .article td,
  .legacy-triplet-page .article th,
  .legacy-triplet-page .article dd,
  .legacy-triplet-page .article dt,
  .legacy-triplet-page .article blockquote,
  .legacy-triplet-page .article font,
  .legacy-triplet-page .article small,
  .legacy-triplet-page .article big {
    line-height: 1.30 !important;
  }
}

@media (max-width: 800px) {
  .sidebar .sidebar-card.office,
  .sidebar .sidebar-card.payment,
  .sidebar .office,
  .sidebar .payment {
    display: none !important;
  }
}

/* ==========================================================================
   UBC layout correction 2026-08-21: reliable TOP-7 sticky, breadcrumbs header
   band and desktop article line-height 1.35
   ========================================================================== */
@media (min-width: 801px) {
  /* The sticky block is now a direct child of the full-height grid item
     .sidebar-details, rather than a child of the content-height <aside>. */
  .content-page .main-grid { align-items: stretch; }
  .content-page .sidebar-details {
    align-self: stretch !important;
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
  }
  .content-page .sidebar {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .content-page .sidebar-details > .ubc-top-services {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 58px !important;
    z-index: 20;
    align-self: start;
  }

  .content-page .article,
  .content-page .article p,
  .content-page .article li,
  .content-page .article td,
  .content-page .article th,
  .content-page .article dd,
  .content-page .article dt,
  .content-page .article blockquote,
  .legacy-triplet-page .article,
  .legacy-triplet-page .article p,
  .legacy-triplet-page .article li,
  .legacy-triplet-page .article td,
  .legacy-triplet-page .article th,
  .legacy-triplet-page .article dd,
  .legacy-triplet-page .article dt,
  .legacy-triplet-page .article blockquote,
  .legacy-triplet-page .article font,
  .legacy-triplet-page .article small,
  .legacy-triplet-page .article big {
    line-height: 1.35 !important;
  }
}

/* H1 and breadcrumbs occupy one full-width header band. The two-column grid
   begins only after the breadcrumb row. */
.content-page > .page-breadcrumbs {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 7px 40px 12px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  box-sizing: border-box;
}
@media (max-width: 800px) {
  .content-page > .page-breadcrumbs { padding: 7px 18px 10px !important; }
}


/* ==========================================================================
   UBC breadcrumb separator correction 2026-08-21
   Breadcrumbs sit immediately below H1 and above the divider.
   ========================================================================== */
.content-page > .page-title {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}
.content-page > .page-breadcrumbs {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 7px !important;
  border-bottom: 3px double #ddd;
}
@media (max-width: 800px) {
  .content-page > .page-title { padding-bottom: 3px !important; }
  .content-page > .page-breadcrumbs {
    padding-top: 0 !important;
    padding-bottom: 6px !important;
  }
}

/* Legacy two-column pages using #main-content directly: same H1 / breadcrumbs / divider order. */
#main-content > .page-title + .page-breadcrumbs {
  width: 100%;
  margin: 0 !important;
  padding: 0 40px 7px !important;
  border-bottom: 3px double #ddd;
  box-sizing: border-box;
  justify-content: flex-start;
}
#main-content > .page-title {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}
@media (max-width: 800px) {
  #main-content > .page-title + .page-breadcrumbs { padding: 0 18px 6px !important; }
  #main-content > .page-title { padding-bottom: 3px !important; }
}
/* UBC TWO-COLUMN HEADING ALIGNMENT + GLASS FADE 2026-08-21 */
/* Top page heading and breadcrumbs form one compact header band. */
.content-page > .page-title,
#main-content > .page-title {
  margin: 0 !important;
  padding-bottom: 2px !important;
  border-bottom: 0 !important;
}
.content-page > .page-breadcrumbs,
#main-content > .page-title + .page-breadcrumbs {
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 40px 4px !important;
  border-bottom: 3px double #d8dde2 !important;
  justify-content: flex-start !important;
  text-align: left !important;
  box-sizing: border-box;
}

/* The two-column area starts immediately below the divider. The vector silver
   fade is deliberately part of the grid background, so it scales with every
   RU / UA / EN two-column template without an extra raster asset. */
.content-page > .main-grid,
#main-content > .main-grid {
  align-items: start !important;
  padding-top: 17px !important;
  background-color: #fff;
  background-image: url("../image/content-glass-fade.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 96px;
}

/* Both columns start on precisely the same typographic baseline. */
.main-grid .column-title {
  margin: 0 0 15px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #202020 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}
.main-grid .sidebar-details > .sidebar-column-title,
.main-grid .article > .article-column-title {
  display: block;
  min-height: 25px;
}
.main-grid .sidebar-details > .sidebar-column-title { width: 100%; }
.main-grid .article > .article-column-title { max-width: 100%; }

/* Keep secondary sidebar headings subordinate to the new column H1. */
.main-grid .sidebar > h2:first-child,
.main-grid .sidebar > h3:first-child,
.main-grid .sidebar > nav:first-child > h2:first-child,
.main-grid .sidebar > nav:first-child > h3:first-child {
  margin-top: 0 !important;
}

@media (max-width: 800px) {
  .content-page > .page-title,
  #main-content > .page-title { padding-bottom: 2px !important; }
  .content-page > .page-breadcrumbs,
  #main-content > .page-title + .page-breadcrumbs {
    min-height: 22px !important;
    padding: 0 18px 4px !important;
  }
  .content-page > .main-grid,
  #main-content > .main-grid {
    padding-top: 14px !important;
    background-size: 100% 78px;
  }
  .main-grid .column-title {
    margin-bottom: 12px !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
}


/* ==========================================================================
   UBC NAVIGATION COMPACT DESKTOP + MOBILE HAMBURGER PASS - 2026-08-21
   Desktop: 30px top/second/third level rows.
   Mobile: standalone top-right hamburger; silver strip appears only open.
   ========================================================================== */

@media (min-width: 801px) {
  :root { --ubc-menu-row-desktop: 30px; }

  .main-nav-wrap,
  .main-nav,
  .nav-item > .nav-button,
  .nav-item > .nav-link {
    min-height: 30px !important;
    height: 30px !important;
  }

  .nav-link,
  .nav-button {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 30px !important;
  }
  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-button:hover,
  .nav-button:focus-visible,
  .nav-item.open > .nav-button,
  .nav-item.open > .nav-link-dropdown {
    font-size: 14px !important;
  }

  /* Ordinary second-level dropdown rows. */
  .submenu:not(.mega-menu) > li > a,
  .submenu:not(.mega-menu) > li > a:hover,
  .submenu:not(.mega-menu) > li > a:focus-visible {
    display: flex !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    align-items: center !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 1 !important;
  }
  .submenu:not(.mega-menu) > li > a:hover,
  .submenu:not(.mega-menu) > li > a:focus-visible {
    padding-right: 14px !important;
    font-size: 13px !important;
  }

  /* Mega-menu second level. */
  .mega-group-heading {
    grid-template-columns: minmax(0, 1fr) 30px !important;
    min-height: 30px !important;
    height: 30px !important;
  }
  .submenu .mega-group-title,
  .submenu .mega-group-title:hover,
  .submenu .mega-group-title:focus-visible {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .mega-group-toggle,
  .js .mega-group-toggle {
    width: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    height: 30px !important;
  }
  .mega-group-toggle::before {
    border-top-width: 4px !important;
    border-bottom-width: 4px !important;
    border-left-width: 6px !important;
  }

  /* Mega-menu third level. */
  .mega-group.mega-group-multicol .mega-group-list,
  .js .mega-group.mega-group-multicol.is-expanded .mega-group-list {
    grid-template-rows: repeat(14, 30px) !important;
  }
  .submenu .mega-group-list li a,
  .submenu .mega-group-list li a:hover,
  .submenu .mega-group-list li a:focus-visible,
  .mega-group-regions .mega-group-list li a,
  .mega-group-regions .mega-group-list li a:hover,
  .mega-group-regions .mega-group-list li a:focus-visible {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 14px !important;
    align-items: center !important;
    font-size: 13px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 800px) {
  /* The language choice stays above the main logo; duplicate switcher in the
     hamburger row is intentionally removed. */
  .header-visual-inner .utility-row {
    display: flex !important;
    min-height: 24px;
    align-items: center;
    justify-content: flex-end;
    padding: 2px 2px 0 !important;
    font-size: 12px !important;
    line-height: 20px;
    text-align: right;
  }
  .header-visual-inner .utility-row > a,
  .header-visual-inner .utility-row > span:not(.utility-language-links) {
    display: none !important;
  }
  .header-visual-inner .utility-row .utility-language-links {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-left: 0 !important;
  }
  .header-visual-inner .utility-row .utility-language-links a {
    display: inline-block !important;
    padding: 0;
    font-size: 12px !important;
    line-height: 20px;
  }

  .site-shell { position: relative; }

  /* Closed state: only a transparent, borderless hamburger in the top-right. */
  .main-nav-wrap {
    position: absolute !important;
    top: 25px;
    right: 14px;
    left: 14px;
    z-index: 6000;
    width: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: none;
  }
  .mobile-nav-bar {
    display: flex !important;
    width: 100%;
    min-height: 40px !important;
    height: 40px;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: none;
  }
  .mobile-language-switcher { display: none !important; }

  .nav-toggle,
  .legacy-nav-toggle {
    display: flex !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: auto;
  }
  .nav-toggle:focus-visible,
  .legacy-nav-toggle:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
  }
  .nav-toggle-icon { width: 24px !important; height: 18px !important; }
  .nav-toggle-icon span { width: 24px !important; height: 2px !important; }
  .nav-toggle-icon span:nth-child(1) { top: 0 !important; }
  .nav-toggle-icon span:nth-child(2) { top: 8px !important; }
  .nav-toggle-icon span:nth-child(3) { top: 16px !important; }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(1) { top: 8px !important; }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(3) { top: 8px !important; }

  /* Open state: the requested silver strip appears, with a compact UBC logo
     on the left and the hamburger/close control on the right. */
  .main-nav-wrap.menu-open {
    pointer-events: auto;
  }
  .main-nav-wrap.menu-open .mobile-nav-bar {
    justify-content: space-between;
    padding: 0 4px 0 7px !important;
    border-bottom: 1px solid rgba(112, 116, 124, .48) !important;
    background-color: #e3e5ed !important;
    background-image: var(--ubc-menu-texture) !important;
    background-repeat: repeat-x !important;
    background-position: center !important;
    background-size: auto 100% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.14) !important;
  }
  .main-nav-wrap.menu-open .mobile-nav-bar::before {
    content: "";
    display: block;
    width: 133px;
    height: 40px;
    flex: 0 0 133px;
    background: url("../image/ubc.svg") left center / contain no-repeat;
  }
  .main-nav-wrap.menu-open .main-nav {
    width: 100%;
    margin: 0;
    border-top: 0;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
  }

  /* No messenger/contact icon strip in the upper mobile header/menu. The
     existing footer contact strip remains available at the bottom. */
  .header-contact-actions,
  .mobile-menu-contact-strip {
    display: none !important;
  }
}


/* ==========================================================================\n   UBC MOBILE COMPACT NAV + ARTICLE-FIRST PASS - 2026-08-21\n   - 30px hamburger and all mobile menu levels\n   - compact 11px upper utility row with two alternate languages\n   - article precedes sidebar on mobile\n   - duplicate grey sidebar summary is hidden\n   ========================================================================== */
@media (max-width: 800px) {
  /* Upper compact line above the logo. Keep two service shortcuts, then only
     the two languages different from the current page language. */
  .header-visual-inner .utility-row {
    display: flex !important;
    min-height: 17px !important;
    height: 17px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    padding: 0 2px !important;
    overflow: hidden !important;
    color: #565b63 !important;
    font-size: 11px !important;
    line-height: 17px !important;
    white-space: nowrap !important;
    text-align: right !important;
  }
  .header-visual-inner .utility-row > a,
  .header-visual-inner .utility-row > span:not(.utility-language-links) {
    display: inline-block !important;
    flex: 0 0 auto !important;
    padding: 0 4px !important;
    color: #565b63 !important;
    font-size: 11px !important;
    line-height: 17px !important;
    text-decoration: none !important;
  }
  /* The third shortcut (International Business) is omitted in the compact
     mobile line; its preceding separator becomes the separator before langs. */
  .header-visual-inner .utility-row > a:nth-of-type(3) {
    display: none !important;
  }
  .header-visual-inner .utility-row .utility-language-links {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-visual-inner .utility-row .utility-language-links a {
    display: inline-block !important;
    padding: 0 4px !important;
    color: #00009F !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 17px !important;
    text-decoration: none !important;
  }
  .header-visual-inner .utility-row .utility-language-links a.is-current,
  .header-visual-inner .utility-row .utility-language-links a.is-current {
    display: none !important;
  }

  /* Override the historical <=480px rule that removed the utility row. */
  .utility-row { display: flex !important; }

  /* Hamburger is 30 x 30 and sits directly below the 17px utility line. */
  .main-nav-wrap {
    top: 17px !important;
    right: 10px !important;
    left: 10px !important;
  }
  .mobile-nav-bar {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 !important;
  }
  .nav-toggle,
  .legacy-nav-toggle {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    flex: 0 0 30px !important;
  }
  .nav-toggle-icon {
    width: 20px !important;
    height: 14px !important;
  }
  .nav-toggle-icon span {
    width: 20px !important;
    height: 2px !important;
  }
  .nav-toggle-icon span:nth-child(1) { top: 0 !important; }
  .nav-toggle-icon span:nth-child(2) { top: 6px !important; }
  .nav-toggle-icon span:nth-child(3) { top: 12px !important; }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(1) { top: 6px !important; }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(3) { top: 6px !important; }

  /* Silver strip exists only while menu is open and is exactly 30px high. */
  .main-nav-wrap.menu-open .mobile-nav-bar {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 2px 0 5px !important;
  }
  .main-nav-wrap.menu-open .mobile-nav-bar::before {
    width: 100px !important;
    height: 30px !important;
    flex: 0 0 100px !important;
    background-size: contain !important;
  }

  /* Every visible mobile navigation row is 30px. Long labels are kept on one
     line and clipped with ellipsis so the compact rhythm is preserved. */
  .main-nav,
  .main-nav.open { width: 100% !important; }
  .nav-item > .nav-button,
  .nav-item > .nav-link,
  .nav-link,
  .nav-button {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-button:hover,
  .nav-button:focus-visible,
  .nav-item.open > .nav-button,
  .nav-item.open > .nav-link-dropdown {
    font-size: 13px !important;
  }
  .submenu:not(.mega-menu) > li > a,
  .submenu:not(.mega-menu) > li > a:hover,
  .submenu:not(.mega-menu) > li > a:focus-visible {
    display: block !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .mega-group-heading {
    grid-template-columns: minmax(0, 1fr) 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
  }
  .submenu .mega-group-title,
  .submenu .mega-group-title:hover,
  .submenu .mega-group-title:focus-visible {
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .mega-group-toggle,
  .js .mega-group-toggle {
    width: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
  }
  .submenu.mega-menu .mega-group-list li a,
  .submenu.mega-menu .mega-group-list li a:hover,
  .submenu.mega-menu .mega-group-list li a:focus-visible,
  .mega-group-regions .mega-group-list li a,
  .mega-group-regions .mega-group-list li a:hover,
  .mega-group-regions .mega-group-list li a:focus-visible {
    display: block !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    box-sizing: border-box !important;
    padding: 0 13px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* After breadcrumbs the article is shown first; the complete left sidebar
     follows only after the article ends. */
  .content-page > .main-grid,
  #main-content > .main-grid,
  .main-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .main-grid > .article,
  .main-grid > article.article {
    order: 1 !important;
    width: 100% !important;
  }
  .main-grid > .sidebar-details {
    order: 2 !important;
    width: 100% !important;
    margin-top: 22px !important;
  }

  /* Do not show the grey duplicate "Popular services" summary on mobile. */
  .sidebar-details > summary {
    display: none !important;
  }
}

/* UBC mobile utility-line separator/fitting refinement - 2026-08-21 */
@media (max-width: 800px) {
  .header-visual-inner .utility-row > a,
  .header-visual-inner .utility-row > span:not(.utility-language-links),
  .header-visual-inner .utility-row .utility-language-links a,
  .header-visual-inner .utility-row .utility-language-links .utility-lang-sep {
    padding-right: 2px !important;
    padding-left: 2px !important;
  }
  .header-visual-inner .utility-row .utility-language-links .utility-lang-sep {
    display: inline-block !important;
    color: #777 !important;
    font-size: 11px !important;
    line-height: 17px !important;
  }
}

/* Compact fallback for any legacy STM mobile menu still present on a page. */
@media (max-width: 800px) {
  .legacy-stm-wrap { min-height: 30px !important; }
  [id^="Stm0p0i"][id$="e"],
  [id^="Stm0p0i"][id$="e"] > table {
    min-height: 30px !important;
    height: 30px !important;
  }
}


/* ========================================================================== 
   UBC NAVIGATION FONT + MOBILE 35PX + INFORMATION LEVEL-3 PASS - 2026-08-21
   - horizontal desktop menu font +10%, established 30px height retained
   - mobile menu rows 35px; hamburger 35x36px
   - Information Resources is a standard collapsible second-level group
   ========================================================================== */
@media (min-width: 801px) {
  .main-nav > .nav-item > .nav-link,
  .main-nav > .nav-item > .nav-button {
    font-size: 14.3px !important;
    line-height: 30px !important;
  }
  .main-nav > .nav-item > .nav-link:hover,
  .main-nav > .nav-item > .nav-link:focus-visible,
  .main-nav > .nav-item > .nav-button:hover,
  .main-nav > .nav-item > .nav-button:focus-visible,
  .main-nav > .nav-item.open > .nav-button,
  .main-nav > .nav-item.open > .nav-link-dropdown {
    font-size: 15.4px !important;
  }
}

@media (max-width: 800px) {
  .main-nav-wrap { top: 17px !important; }
  .mobile-nav-bar {
    min-height: 36px !important;
    height: 36px !important;
  }
  .nav-toggle,
  .legacy-nav-toggle {
    width: 35px !important;
    min-width: 35px !important;
    height: 36px !important;
    min-height: 36px !important;
    flex: 0 0 35px !important;
  }
  .nav-toggle-icon { width: 22px !important; height: 16px !important; }
  .nav-toggle-icon span { width: 22px !important; height: 2px !important; }
  .nav-toggle-icon span:nth-child(1) { top: 0 !important; }
  .nav-toggle-icon span:nth-child(2) { top: 7px !important; }
  .nav-toggle-icon span:nth-child(3) { top: 14px !important; }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(1) { top: 7px !important; }
  .nav-toggle.is-open .nav-toggle-icon span:nth-child(3) { top: 7px !important; }

  .main-nav-wrap.menu-open .mobile-nav-bar {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 2px 0 6px !important;
  }
  .main-nav-wrap.menu-open .mobile-nav-bar::before {
    width: 120px !important;
    height: 36px !important;
    flex: 0 0 120px !important;
    background-size: contain !important;
  }

  .nav-item > .nav-button,
  .nav-item > .nav-link,
  .nav-link,
  .nav-button {
    min-height: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
    line-height: 35px !important;
  }
  .submenu:not(.mega-menu) > li > a,
  .submenu:not(.mega-menu) > li > a:hover,
  .submenu:not(.mega-menu) > li > a:focus-visible {
    min-height: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
    line-height: 35px !important;
  }
  .mega-group-heading {
    grid-template-columns: minmax(0, 1fr) 35px !important;
    min-height: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
  }
  .submenu .mega-group-title,
  .submenu .mega-group-title:hover,
  .submenu .mega-group-title:focus-visible {
    min-height: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
    line-height: 35px !important;
  }
  .mega-group-toggle,
  .js .mega-group-toggle {
    width: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
  }
  .submenu.mega-menu .mega-group-list li a,
  .submenu.mega-menu .mega-group-list li a:hover,
  .submenu.mega-menu .mega-group-list li a:focus-visible,
  .mega-group-regions .mega-group-list li a,
  .mega-group-regions .mega-group-list li a:hover,
  .mega-group-regions .mega-group-list li a:focus-visible {
    min-height: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
    line-height: 35px !important;
  }

  .legacy-stm-wrap { min-height: 35px !important; }
  [id^="Stm0p0i"][id$="e"],
  [id^="Stm0p0i"][id$="e"] > table {
    min-height: 35px !important;
    height: 35px !important;
  }
}


/* ========================================================================== 
   UBC DESKTOP HOVER + MOBILE READING + CTA INVERSION - 2026-08-21
   - top navigation: +1px and orange on hover/focus/open
   - second level: regular blue by default, +1px/bold/orange on hover
   - third level: same dark-blue text as second level
   - mobile article line-height 1.45; H1 line-height 1.30
   - CTA buttons: 35px link-blue / white, orange hover / white
   ========================================================================== */
@media (min-width: 801px) {
  /* Main horizontal desktop menu: retain 30px row, grow text exactly 1px. */
  .main-nav > .nav-item > .nav-link,
  .main-nav > .nav-item > .nav-button {
    font-size: 14.3px !important;
  }
  .main-nav > .nav-item > .nav-link:hover,
  .main-nav > .nav-item > .nav-link:focus-visible,
  .main-nav > .nav-item > .nav-button:hover,
  .main-nav > .nav-item > .nav-button:focus-visible,
  .main-nav > .nav-item.open > .nav-button,
  .main-nav > .nav-item.open > .nav-link-dropdown {
    color: var(--ubc-orange) !important;
    font-size: 15.3px !important;
  }

  /* Ordinary second-level dropdown entries. */
  .submenu:not(.mega-menu) > li > a {
    color: #00009F !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  .submenu:not(.mega-menu) > li > a:hover,
  .submenu:not(.mega-menu) > li > a:focus-visible {
    color: var(--ubc-orange) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* Mega-menu second level: regular by default, emphasized only on hover. */
  .submenu .mega-group-title {
    color: #00009F !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }
  .submenu .mega-group-title:hover,
  .submenu .mega-group-title:focus-visible {
    color: var(--ubc-orange) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  /* Third-level menu links use the same dark blue as level two, not grey. */
  .submenu .mega-group-list li a,
  .mega-group-regions .mega-group-list li a {
    color: #00009F !important;
    font-weight: 400 !important;
  }
  .submenu .mega-group-list li a:hover,
  .submenu .mega-group-list li a:focus-visible,
  .mega-group-regions .mega-group-list li a:hover,
  .mega-group-regions .mega-group-list li a:focus-visible {
    color: var(--ubc-orange) !important;
  }
}

/* CTA buttons: one brand treatment throughout the content and service UI. */
body.ubc-page .ubc-cta-button,
body.ubc-page .primary-action,
body.ubc-page .secondary-action,
body.ubc-page .side-cta,
body.ubc-page .region-primary-cta,
.content-page .article-cta .ubc-cta-button {
  display: inline-flex !important;
  min-height: 35px !important;
  height: 35px !important;
  max-height: 35px !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  border: 1px solid var(--ubc-link-blue) !important;
  background: var(--ubc-link-blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 33px !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}
body.ubc-page .ubc-cta-button:hover,
body.ubc-page .ubc-cta-button:focus-visible,
body.ubc-page .primary-action:hover,
body.ubc-page .primary-action:focus-visible,
body.ubc-page .secondary-action:hover,
body.ubc-page .secondary-action:focus-visible,
body.ubc-page .side-cta:hover,
body.ubc-page .side-cta:focus-visible,
body.ubc-page .region-primary-cta:hover,
body.ubc-page .region-primary-cta:focus-visible,
.content-page .article-cta .ubc-cta-button:hover,
.content-page .article-cta .ubc-cta-button:focus-visible {
  border-color: var(--ubc-orange) !important;
  background: var(--ubc-orange) !important;
  color: #fff !important;
}

@media (max-width: 800px) {
  /* More compact mobile reading rhythm without changing desktop typography. */
  .article p,
  .article li,
  .content-page .article p,
  .content-page .article li,
  .page-content-card p,
  .page-content-card li {
    line-height: 1.45 !important;
  }
  main h1,
  .content-page h1,
  .content-page .page-title,
  .content-page .column-heading,
  .article h1,
  .page-content-card h1,
  .generated-page h1 {
    line-height: 1.30 !important;
  }
}


/* ========================================================================== 
   UBC BRAND BLUE + SUBMENU TYPOGRAPHY PASS - 2026-08-21
   - corporate UBC blue: #00009F
   - level 2/3 menu: black 14px regular; hover/focus 15px bold UBC blue
   - same behavior on desktop and mobile
   - CTA: UBC blue by default, orange on hover/focus
   ========================================================================== */
:root {
  --ubc-blue: #00009F !important;
  --ubc-link-blue: #00009F !important;
  --ubc-brand-blue: #00009F;
}

/* Second-level standard dropdown links. */
.submenu:not(.mega-menu) > li > a {
  color: #000 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.submenu:not(.mega-menu) > li > a:hover,
.submenu:not(.mega-menu) > li > a:focus-visible,
.submenu:not(.mega-menu) > li > a:active {
  color: #00009F !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Second-level mega-menu headings. */
.submenu .mega-group-title {
  color: #000 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.submenu .mega-group-title:hover,
.submenu .mega-group-title:focus-visible,
.submenu .mega-group-title:active,
.mega-group-heading:focus-within .mega-group-title,
.mega-group.is-expanded .mega-group-title {
  color: #00009F !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Third-level links. */
.submenu .mega-group-list li a,
.mega-group-regions .mega-group-list li a {
  color: #000 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.submenu .mega-group-list li a:hover,
.submenu .mega-group-list li a:focus-visible,
.submenu .mega-group-list li a:active,
.mega-group-regions .mega-group-list li a:hover,
.mega-group-regions .mega-group-list li a:focus-visible,
.mega-group-regions .mega-group-list li a:active {
  color: #00009F !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Keep the 35px mobile row geometry while applying the same 14/15 typography. */
@media (max-width: 800px) {
  .submenu:not(.mega-menu) > li > a,
  .submenu .mega-group-title,
  .submenu .mega-group-list li a,
  .mega-group-regions .mega-group-list li a {
    font-size: 14px !important;
    font-weight: 400 !important;
  }
  .submenu:not(.mega-menu) > li > a:hover,
  .submenu:not(.mega-menu) > li > a:focus-visible,
  .submenu:not(.mega-menu) > li > a:active,
  .submenu .mega-group-title:hover,
  .submenu .mega-group-title:focus-visible,
  .submenu .mega-group-title:active,
  .mega-group-heading:focus-within .mega-group-title,
  .mega-group.is-expanded .mega-group-title,
  .submenu .mega-group-list li a:hover,
  .submenu .mega-group-list li a:focus-visible,
  .submenu .mega-group-list li a:active,
  .mega-group-regions .mega-group-list li a:hover,
  .mega-group-regions .mega-group-list li a:focus-visible,
  .mega-group-regions .mega-group-list li a:active {
    color: #00009F !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
}

/* CTA inversion with the corporate UBC blue. */
body.ubc-page .ubc-cta-button,
body.ubc-page .primary-action,
body.ubc-page .secondary-action,
body.ubc-page .side-cta,
body.ubc-page .region-primary-cta,
.content-page .article-cta .ubc-cta-button,
.ubc-cta-button,
.primary-action,
.secondary-action,
.side-cta,
.region-primary-cta {
  border-color: #00009F !important;
  background: #00009F !important;
  color: #fff !important;
}
body.ubc-page .ubc-cta-button:hover,
body.ubc-page .ubc-cta-button:focus-visible,
body.ubc-page .primary-action:hover,
body.ubc-page .primary-action:focus-visible,
body.ubc-page .secondary-action:hover,
body.ubc-page .secondary-action:focus-visible,
body.ubc-page .side-cta:hover,
body.ubc-page .side-cta:focus-visible,
body.ubc-page .region-primary-cta:hover,
body.ubc-page .region-primary-cta:focus-visible,
.content-page .article-cta .ubc-cta-button:hover,
.content-page .article-cta .ubc-cta-button:focus-visible,
.ubc-cta-button:hover,
.ubc-cta-button:focus-visible,
.primary-action:hover,
.primary-action:focus-visible,
.secondary-action:hover,
.secondary-action:focus-visible,
.side-cta:hover,
.side-cta:focus-visible,
.region-primary-cta:hover,
.region-primary-cta:focus-visible {
  border-color: var(--ubc-orange, #FF7302) !important;
  background: var(--ubc-orange, #FF7302) !important;
  color: #fff !important;
}

/* ========================================================================== 
   RU/UA FAQ unified disclosure style - 2026-08-24
   One visual language for native <details> and legacy .faq-item (+/-) FAQ.
   ========================================================================== */
html[lang="ru"] .faq-section details > summary,
html[lang="uk"] .faq-section details > summary,
html[lang="ua"] .faq-section details > summary {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 13px 15px 13px 36px;
  color: #00009F !important;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: color .18s ease, background-color .18s ease;
}

html[lang="ru"] .faq-section details > summary::-webkit-details-marker,
html[lang="uk"] .faq-section details > summary::-webkit-details-marker,
html[lang="ua"] .faq-section details > summary::-webkit-details-marker {
  display: none;
}

html[lang="ru"] .faq-section details > summary::marker,
html[lang="uk"] .faq-section details > summary::marker,
html[lang="ua"] .faq-section details > summary::marker {
  content: "";
}

/* Disable the legacy + / minus control. */
html[lang="ru"] .faq-section .faq-item > summary::after,
html[lang="uk"] .faq-section .faq-item > summary::after,
html[lang="ua"] .faq-section .faq-item > summary::after {
  content: none !important;
  display: none !important;
}

/* Unified blue disclosure triangle. */
html[lang="ru"] .faq-section details > summary::before,
html[lang="uk"] .faq-section details > summary::before,
html[lang="ua"] .faq-section details > summary::before {
  content: "\25B6";
  position: absolute;
  top: 50%;
  left: 14px;
  color: #00009F;
  font-size: 12px;
  line-height: 1;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  transition: color .18s ease, transform .18s ease;
}

html[lang="ru"] .faq-section details[open] > summary::before,
html[lang="uk"] .faq-section details[open] > summary::before,
html[lang="ua"] .faq-section details[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

html[lang="ru"] .faq-section details > summary:hover,
html[lang="ru"] .faq-section details > summary:focus-visible,
html[lang="uk"] .faq-section details > summary:hover,
html[lang="uk"] .faq-section details > summary:focus-visible,
html[lang="ua"] .faq-section details > summary:hover,
html[lang="ua"] .faq-section details > summary:focus-visible {
  color: var(--ubc-orange, #F28C00) !important;
  background: #f7f7f7;
  outline: 0;
}

html[lang="ru"] .faq-section details > summary:hover::before,
html[lang="ru"] .faq-section details > summary:focus-visible::before,
html[lang="uk"] .faq-section details > summary:hover::before,
html[lang="uk"] .faq-section details > summary:focus-visible::before,
html[lang="ua"] .faq-section details > summary:hover::before,
html[lang="ua"] .faq-section details > summary:focus-visible::before {
  color: var(--ubc-orange, #F28C00);
}

html[lang="ru"] .faq-section details > summary:focus-visible,
html[lang="uk"] .faq-section details > summary:focus-visible,
html[lang="ua"] .faq-section details > summary:focus-visible {
  box-shadow: inset 0 0 0 2px #00009F;
}

/* Keep both former FAQ structures visually identical. */
html[lang="ru"] .faq-section > details,
html[lang="uk"] .faq-section > details,
html[lang="ua"] .faq-section > details,
html[lang="ru"] .faq-section .faq-list > details,
html[lang="uk"] .faq-section .faq-list > details,
html[lang="ua"] .faq-section .faq-list > details {
  margin: 0 0 10px;
  border: 1px solid #d7dce2;
  background: #fff;
}

html[lang="ru"] .faq-section > details > :not(summary),
html[lang="uk"] .faq-section > details > :not(summary),
html[lang="ua"] .faq-section > details > :not(summary),
html[lang="ru"] .faq-section .faq-list > details > :not(summary),
html[lang="uk"] .faq-section .faq-list > details > :not(summary),
html[lang="ua"] .faq-section .faq-list > details > :not(summary) {
  margin-right: 15px;
  margin-left: 15px;
}

/* ========================================================================== 
   RU/UA FAQ compact list refinement - 2026-08-24
   Restore the compact native-list geometry used by 950.html while retaining
   the unified UBC blue/orange disclosure treatment.
   ========================================================================== */
html[lang="ru"] .faq-section,
html[lang="uk"] .faq-section,
html[lang="ua"] .faq-section {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

html[lang="ru"] .faq-section .faq-list,
html[lang="uk"] .faq-section .faq-list,
html[lang="ua"] .faq-section .faq-list {
  border-top: 0;
}

html[lang="ru"] .faq-section > details,
html[lang="uk"] .faq-section > details,
html[lang="ua"] .faq-section > details,
html[lang="ru"] .faq-section .faq-list > details,
html[lang="uk"] .faq-section .faq-list > details,
html[lang="ua"] .faq-section .faq-list > details,
html[lang="ru"] .faq-section .faq-item,
html[lang="uk"] .faq-section .faq-item,
html[lang="ua"] .faq-section .faq-item {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

html[lang="ru"] .faq-section details > summary,
html[lang="uk"] .faq-section details > summary,
html[lang="ua"] .faq-section details > summary,
html[lang="ru"] .content-page .faq-item > summary,
html[lang="uk"] .content-page .faq-item > summary,
html[lang="ua"] .content-page .faq-item > summary {
  min-height: 0;
  padding: 4px 2px 4px 20px !important;
  line-height: 1.35;
  background: transparent !important;
}

html[lang="ru"] .faq-section details > summary::before,
html[lang="uk"] .faq-section details > summary::before,
html[lang="ua"] .faq-section details > summary::before {
  left: 2px;
  font-size: 10px;
}

html[lang="ru"] .faq-section details > summary:hover,
html[lang="ru"] .faq-section details > summary:focus-visible,
html[lang="uk"] .faq-section details > summary:hover,
html[lang="uk"] .faq-section details > summary:focus-visible,
html[lang="ua"] .faq-section details > summary:hover,
html[lang="ua"] .faq-section details > summary:focus-visible {
  background: transparent !important;
}

html[lang="ru"] .faq-section > details > :not(summary),
html[lang="uk"] .faq-section > details > :not(summary),
html[lang="ua"] .faq-section > details > :not(summary),
html[lang="ru"] .faq-section .faq-list > details > :not(summary),
html[lang="uk"] .faq-section .faq-list > details > :not(summary),
html[lang="ua"] .faq-section .faq-list > details > :not(summary),
html[lang="ru"] .faq-section .faq-item > :not(summary),
html[lang="uk"] .faq-section .faq-item > :not(summary),
html[lang="ua"] .faq-section .faq-item > :not(summary) {
  margin: 1px 2px 6px 20px !important;
  padding: 0 !important;
}

html[lang="ru"] .faq-section .faq-answer,
html[lang="uk"] .faq-section .faq-answer,
html[lang="ua"] .faq-section .faq-answer {
  padding: 0 !important;
}

html[lang="ru"] .faq-section .faq-answer p,
html[lang="uk"] .faq-section .faq-answer p,
html[lang="ua"] .faq-section .faq-answer p,
html[lang="ru"] .faq-section details > p,
html[lang="uk"] .faq-section details > p,
html[lang="ua"] .faq-section details > p {
  margin-top: 0;
  margin-bottom: 0;
}


/* ========================================================================== 
   EN FAQ compact unified disclosure style - 2026-08-24
   Matches the compact RU/UA disclosure geometry and UBC blue/orange treatment.
   ========================================================================== */
html[lang="en"] .faq-section {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
html[lang="en"] .faq-section .faq-list { border-top: 0; }
html[lang="en"] .faq-section > details,
html[lang="en"] .faq-section .faq-list > details,
html[lang="en"] .faq-section .faq-item {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
html[lang="en"] .faq-section details > summary,
html[lang="en"] .content-page .faq-item > summary {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 0;
  padding: 4px 2px 4px 20px !important;
  color: #00009F !important;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  background: transparent !important;
  transition: color .18s ease;
}
html[lang="en"] .faq-section details > summary::-webkit-details-marker { display: none; }
html[lang="en"] .faq-section details > summary::marker { content: ""; }
html[lang="en"] .faq-section .faq-item > summary::after { content: none !important; display: none !important; }
html[lang="en"] .faq-section details > summary::before {
  content: "\25B6";
  position: absolute;
  top: 50%;
  left: 2px;
  color: #00009F;
  font-size: 10px;
  line-height: 1;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  transition: color .18s ease, transform .18s ease;
}
html[lang="en"] .faq-section details[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
html[lang="en"] .faq-section details > summary:hover,
html[lang="en"] .faq-section details > summary:focus-visible {
  color: var(--ubc-orange, #F28C00) !important;
  background: transparent !important;
  outline: 0;
}
html[lang="en"] .faq-section details > summary:hover::before,
html[lang="en"] .faq-section details > summary:focus-visible::before { color: var(--ubc-orange, #F28C00); }
html[lang="en"] .faq-section details > summary:focus-visible { box-shadow: inset 0 0 0 2px #00009F; }
html[lang="en"] .faq-section > details > :not(summary),
html[lang="en"] .faq-section .faq-list > details > :not(summary),
html[lang="en"] .faq-section .faq-item > :not(summary) {
  margin: 1px 2px 6px 20px !important;
  padding: 0 !important;
}
html[lang="en"] .faq-section .faq-answer { padding: 0 !important; }
html[lang="en"] .faq-section .faq-answer p,
html[lang="en"] .faq-section details > p { margin-top: 0; margin-bottom: 0; }

/* ========================================================================== 
   UBC desktop canvas expansion - 2026-08-27
   1480 px paper width; the 370 px left sidebar and 25 px column gap stay
   unchanged. All added desktop width goes to the right/main content column.
   ========================================================================== */
@media (min-width: 1024px) {
  .site-shell {
    width: min(100%, 1480px);
  }
  .main-grid {
    grid-template-columns: 370px minmax(0, 1fr);
    gap: 25px;
  }
  .article {
    width: 100%;
    max-width: none;
  }
  .content-page > .page-breadcrumbs {
    padding-right: 40px;
    padding-left: 435px;
  }
}

/* ========================================================================== 
   UBC adaptive menu UI pilot - batch 160K
   Active only on pages that load js/ubcmenu-ui.js.
   ========================================================================== */
.ubc-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5890;
  display: none;
  background: rgba(20, 24, 31, .30);
}
.ubc-menu-backdrop.is-visible { display: block; }
body.ubc-menu-panel-open { overflow: hidden !important; }

html.ubc-menu-ui-compact .main-nav-wrap.menu-open {
  position: fixed !important;
  top: var(--ubc-ui-panel-top, 4px) !important;
  right: var(--ubc-ui-panel-right, 6px) !important;
  left: auto !important;
  z-index: 6000 !important;
  width: var(--ubc-ui-panel-width, calc(100vw - 12px)) !important;
  max-width: calc(100vw - 8px) !important;
  max-height: var(--ubc-ui-panel-max-height, calc(100dvh - 8px)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid #878b94 !important;
  background: #e3e5ed !important;
  box-shadow: 0 15px 36px rgba(0,0,0,.28) !important;
  pointer-events: auto !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open .mobile-nav-bar {
  display: flex !important;
  min-height: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav,
html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav.open {
  display: block !important;
  width: 100% !important;
  max-height: calc(var(--ubc-ui-panel-max-height, 100dvh) - 38px) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* emergency fallback for exceptionally low viewports */
  overscroll-behavior: contain;
  background: #e3e5ed;
  box-shadow: none !important;
}
html.ubc-menu-ui-compact .main-nav > .nav-item {
  width: 100% !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgba(95,99,108,.35) !important;
}
html.ubc-menu-ui-compact .nav-item > .nav-button,
html.ubc-menu-ui-compact .nav-item > .nav-link,
html.ubc-menu-ui-compact .nav-link,
html.ubc-menu-ui-compact .nav-button {
  min-height: var(--ubc-ui-row-height, 32px) !important;
  height: var(--ubc-ui-row-height, 32px) !important;
  max-height: var(--ubc-ui-row-height, 32px) !important;
  padding: 0 12px !important;
  font-size: var(--ubc-ui-font-size, 12.5px) !important;
  line-height: var(--ubc-ui-row-height, 32px) !important;
}
html.ubc-menu-ui-compact .submenu,
html.ubc-menu-ui-compact .nav-item.open > .submenu,
html.ubc-menu-ui-compact .submenu.mega-menu,
html.ubc-menu-ui-compact .nav-item.open > .submenu.mega-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
html.ubc-menu-ui-compact .submenu:not(.mega-menu) {
  display: none !important;
  grid-template-columns: repeat(var(--ubc-ui-columns, 1), minmax(0, 1fr)) !important;
}
html.ubc-menu-ui-compact .nav-item.open > .submenu:not(.mega-menu) { display: grid !important; }
html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a,
html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:hover {
  min-height: var(--ubc-ui-row-height, 32px) !important;
  height: var(--ubc-ui-row-height, 32px) !important;
  max-height: var(--ubc-ui-row-height, 32px) !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  font-size: calc(var(--ubc-ui-font-size, 12.5px) - .3px) !important;
  line-height: var(--ubc-ui-row-height, 32px) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
html.ubc-menu-ui-compact .nav-item.open > .submenu.mega-menu {
  display: grid !important;
  grid-template-columns: repeat(var(--ubc-ui-columns, 1), minmax(0, 1fr)) !important;
  align-items: start !important;
}
html.ubc-menu-ui-compact .mega-group {
  min-width: 0 !important;
  border-right: 1px solid rgba(95,99,108,.25) !important;
}
html.ubc-menu-ui-compact .mega-group-heading {
  grid-template-columns: minmax(0, 1fr) var(--ubc-ui-row-height, 32px) !important;
  min-height: var(--ubc-ui-row-height, 32px) !important;
  height: var(--ubc-ui-row-height, 32px) !important;
  max-height: var(--ubc-ui-row-height, 32px) !important;
}
html.ubc-menu-ui-compact .submenu .mega-group-title,
html.ubc-menu-ui-compact .submenu .mega-group-title:hover {
  min-height: var(--ubc-ui-row-height, 32px) !important;
  height: var(--ubc-ui-row-height, 32px) !important;
  max-height: var(--ubc-ui-row-height, 32px) !important;
  padding: 0 8px !important;
  overflow: hidden !important;
  font-size: calc(var(--ubc-ui-font-size, 12.5px) - .2px) !important;
  line-height: var(--ubc-ui-row-height, 32px) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
html.ubc-menu-ui-compact .mega-group-toggle,
html.js.ubc-menu-ui-compact .mega-group-toggle {
  width: var(--ubc-ui-row-height, 32px) !important;
  min-width: var(--ubc-ui-row-height, 32px) !important;
  min-height: var(--ubc-ui-row-height, 32px) !important;
  height: var(--ubc-ui-row-height, 32px) !important;
  max-height: var(--ubc-ui-row-height, 32px) !important;
}
html.ubc-menu-ui-compact .mega-group.is-expanded {
  grid-column: 1 / -1 !important;
}
html.ubc-menu-ui-compact .mega-group-list,
html.ubc-menu-ui-compact .mega-group-regions .mega-group-list,
html.js.ubc-menu-ui-compact .mega-group.is-expanded .mega-group-list {
  position: static !important;
  display: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  columns: auto !important;
  grid-template-columns: repeat(var(--ubc-ui-columns, 1), minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-right: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}
html.js.ubc-menu-ui-compact .mega-group.is-expanded .mega-group-list { display: grid !important; }
html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a,
html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:hover {
  min-width: 0 !important;
  min-height: var(--ubc-ui-row-height, 32px) !important;
  height: var(--ubc-ui-row-height, 32px) !important;
  max-height: var(--ubc-ui-row-height, 32px) !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  font-size: calc(var(--ubc-ui-font-size, 12.5px) - .5px) !important;
  line-height: var(--ubc-ui-row-height, 32px) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Desktop pilot: forgiving exit delay is handled in ubcmenu-ui.js. */
html.ubc-menu-ui-desktop .mega-group.flyout-left .mega-group-list {
  right: calc(100% - 1px) !important;
  left: auto !important;
}

/* Compact-mode bridge for landscape phones and touch tablets wider than the
   historical 800px breakpoint. It deliberately mirrors the existing mobile
   hamburger shell, so pointer capability rather than width alone decides UI. */
html.ubc-menu-ui-compact .main-nav-wrap:not(.menu-open) {
  position: absolute !important;
  top: 17px !important;
  right: 10px !important;
  left: 10px !important;
  z-index: 6000 !important;
  width: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
html.ubc-menu-ui-compact .mobile-nav-bar {
  display: flex !important;
  width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
html.ubc-menu-ui-compact .nav-toggle {
  display: flex !important;
  width: 35px !important;
  min-width: 35px !important;
  height: 36px !important;
  min-height: 36px !important;
  flex: 0 0 35px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
html.ubc-menu-ui-compact .main-nav { display: none !important; }
html.ubc-menu-ui-compact .main-nav.open { display: block !important; }
html.ubc-menu-ui-compact .main-nav-wrap.menu-open .mobile-nav-bar {
  pointer-events: auto !important;
}

/* Compact drill-down is used only while a branch is open. It removes sibling
   rows from the current viewport instead of forcing a long page-like menu. */
html.ubc-menu-ui-compact .main-nav.ubc-sublevel-open > .nav-item:not(.open) {
  display: none !important;
}
html.ubc-menu-ui-compact .mega-menu.ubc-thirdlevel-open > .mega-group:not(.is-expanded) {
  display: none !important;
}
html.ubc-menu-ui-compact .mega-group-list,
html.ubc-menu-ui-compact .mega-group-regions .mega-group-list,
html.js.ubc-menu-ui-compact .mega-group.is-expanded .mega-group-list {
  grid-template-columns: repeat(var(--ubc-ui-list-columns, 1), minmax(0, 1fr)) !important;
}

/* UBC feedback modal - progressive enhancement; original order_service links
   remain in HTML and work normally when JavaScript is unavailable. */
.ubc-feedback-modal-shell { display: none; }
.ubc-feedback-modal-shell.is-open { display: block; }
.ubc-feedback-modal-backdrop {
  position: fixed; inset: 0; z-index: 7100; background: rgba(20,24,31,.42);
}
.ubc-feedback-modal {
  position: fixed; z-index: 7110; top: 50%; left: 50%;
  width: min(720px, calc(100vw - 28px)); max-height: calc(100dvh - 28px);
  box-sizing: border-box; overflow: auto; transform: translate(-50%,-50%);
  border: 1px solid #8e96a0; background: #f7f9fb; box-shadow: 0 20px 54px rgba(0,0,0,.30);
}
body.ubc-feedback-modal-open { overflow: hidden !important; }
.ubc-feedback-modal-head {
  display: flex; min-height: 46px; align-items: center; justify-content: space-between;
  gap: 14px; padding: 0 10px 0 16px; border-bottom: 1px solid #a8adb5;
  background-color: #e3e5ed; background-image: var(--ubc-menu-texture); background-repeat: repeat-x;
  background-position: center; background-size: auto 100%; color: #00009F;
}
.ubc-feedback-modal-head strong { font-size: 17px; line-height: 1.25; }
.ubc-feedback-modal-close {
  width: 38px; height: 38px; padding: 0; border: 0; background: transparent;
  color: #4b4f55; font-size: 29px; font-weight: 300; line-height: 36px; cursor: pointer;
}
.ubc-feedback-modal-close:hover { color: var(--ubc-orange); }
.ubc-feedback-modal-form { display: grid; gap: 14px; padding: 18px; }
.ubc-feedback-modal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.ubc-feedback-modal-form label { display: grid; gap: 5px; color: #00009F; font-weight: 700; line-height: 1.3; }
.ubc-feedback-modal-form input,
.ubc-feedback-modal-form select,
.ubc-feedback-modal-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #aebbc8;
  border-radius: 0; background: #fff; color: #333; font: inherit;
}
.ubc-feedback-modal-form textarea { min-height: 125px; resize: vertical; }
.ubc-feedback-honey { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
.ubc-feedback-modal-consent { grid-template-columns: 20px 1fr !important; align-items: start; color: #444 !important; font-weight: 400 !important; }
.ubc-feedback-modal-consent input { width: 18px !important; height: 18px; margin: 1px 0 0; }
.ubc-feedback-modal-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.ubc-feedback-fallback { color: #00009F; font-size: 13px; }
.ubc-feedback-modal-status { min-height: 20px; font-size: 14px; font-weight: 600; }
.ubc-feedback-modal-status.is-success { color: #216b34; }
.ubc-feedback-modal-status.is-error { color: #9b2c22; }
.ubc-feedback-submit[disabled] { opacity: .65; cursor: wait; }
@media (max-width: 620px) {
  .ubc-feedback-modal { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); }
  .ubc-feedback-modal-grid { grid-template-columns: 1fr; gap: 11px; }
  .ubc-feedback-modal-form { gap: 11px; padding: 13px; }
  .ubc-feedback-modal-head { min-height: 42px; padding-left: 12px; }
  .ubc-feedback-modal-head strong { font-size: 15px; }
  .ubc-feedback-modal-actions .ubc-cta-button { width: auto; min-width: 170px; }
}

/* ========================================================================== 
   UBC adaptive menu UX refinement - batch 163K
   Larger menu typography, automatic third-level hover, menu-aim support,
   two-panel touch layout and viewport collision safety.
   ========================================================================== */

/* Desktop menu typography: 15px default, 17px on hover/open. */
html.ubc-menu-ui-desktop .nav-link,
html.ubc-menu-ui-desktop .nav-button {
  font-size: 15px !important;
}
html.ubc-menu-ui-desktop .nav-link:hover,
html.ubc-menu-ui-desktop .nav-link:focus-visible,
html.ubc-menu-ui-desktop .nav-button:hover,
html.ubc-menu-ui-desktop .nav-button:focus-visible,
html.ubc-menu-ui-desktop .nav-item.open > .nav-button,
html.ubc-menu-ui-desktop .nav-item.open > .nav-link-dropdown {
  font-size: 17px !important;
}
html.ubc-menu-ui-desktop .submenu:not(.mega-menu) > li > a {
  font-size: 15px !important;
}
html.ubc-menu-ui-desktop .submenu:not(.mega-menu) > li > a:hover,
html.ubc-menu-ui-desktop .submenu:not(.mega-menu) > li > a:focus-visible {
  font-size: 17px !important;
}
html.ubc-menu-ui-desktop .submenu .mega-group-title,
html.ubc-menu-ui-desktop .submenu .mega-group-title:focus-visible {
  font-size: 15px !important;
}
html.ubc-menu-ui-desktop .submenu .mega-group-title:hover,
html.ubc-menu-ui-desktop .mega-group.is-expanded .mega-group-title {
  font-size: 17px !important;
}
html.ubc-menu-ui-desktop .submenu .mega-group-list li a,
html.ubc-menu-ui-desktop .submenu .mega-group-list li a:focus-visible {
  min-height: 36px;
  font-size: 15px !important;
}
html.ubc-menu-ui-desktop .submenu .mega-group-list li a:hover,
html.ubc-menu-ui-desktop .mega-group-list li a:focus-visible {
  font-size: 17px !important;
}

/* The triangle is enough to show that another level exists. The former
   vertical divider before it made the mega-menu visually busier. */
.mega-group-toggle,
.js .mega-group-toggle {
  border-left: 0 !important;
}

/* Full desktop collision correction. JS adds the alignment class only when
   the actual rendered submenu would leave the viewport. */
html.ubc-menu-ui-desktop .nav-item.ubc-menu-align-right > .submenu,
html.ubc-menu-ui-desktop .nav-item.ubc-menu-align-right > .submenu.mega-menu {
  right: 0 !important;
  left: auto !important;
}
html.ubc-menu-ui-desktop .nav-item.ubc-menu-viewport-limit > .submenu {
  overscroll-behavior: contain;
}
html.ubc-menu-ui-desktop .mega-group.flyout-viewport-limit .mega-group-list {
  overscroll-behavior: contain;
}

/* Compact/mobile typography targets 16-18px. JavaScript selects the base
   value from the visible viewport; active rows grow up to 18px. */
html.ubc-menu-ui-compact .nav-item > .nav-button,
html.ubc-menu-ui-compact .nav-item > .nav-link,
html.ubc-menu-ui-compact .nav-link,
html.ubc-menu-ui-compact .nav-button {
  font-size: var(--ubc-ui-font-size, 17px) !important;
}
html.ubc-menu-ui-compact .nav-item.open > .nav-button,
html.ubc-menu-ui-compact .nav-item.open > .nav-link-dropdown,
html.ubc-menu-ui-compact .nav-button:hover,
html.ubc-menu-ui-compact .nav-link:hover {
  font-size: min(18px, calc(var(--ubc-ui-font-size, 17px) + 1px)) !important;
}
html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a {
  font-size: max(16px, calc(var(--ubc-ui-font-size, 17px) - .5px)) !important;
}
html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:hover,
html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:focus-visible {
  font-size: 18px !important;
}
html.ubc-menu-ui-compact .submenu .mega-group-title,
html.ubc-menu-ui-compact .submenu .mega-group-title:hover {
  font-size: max(16px, var(--ubc-ui-font-size, 17px)) !important;
}
html.ubc-menu-ui-compact .mega-group.is-expanded .mega-group-title {
  font-size: 18px !important;
}
html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a {
  font-size: max(16px, calc(var(--ubc-ui-font-size, 17px) - .5px)) !important;
}
html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:hover,
html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:focus-visible {
  font-size: 18px !important;
}

/* Landscape phones and touch tablets keep all six first-level entries in a
   left pane while the selected second/third level is shown in the right pane. */
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .main-nav,
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .main-nav.open {
  position: relative !important;
  height: calc(var(--ubc-ui-panel-max-height, 100dvh) - 38px) !important;
  min-height: calc(var(--ubc-ui-panel-max-height, 100dvh) - 38px) !important;
  max-height: calc(var(--ubc-ui-panel-max-height, 100dvh) - 38px) !important;
  padding-right: 66% !important;
  overflow: hidden !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .main-nav > .nav-item {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  border-right: 1px solid rgba(95,99,108,.36) !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .main-nav > .nav-item.open {
  position: static !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .main-nav.ubc-sublevel-open > .nav-item:not(.open) {
  display: block !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .nav-item.open > .submenu,
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .nav-item.open > .submenu.mega-menu {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 34% !important;
  width: 66% !important;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-left: 1px solid rgba(95,99,108,.36) !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .nav-item.open > .submenu:not(.mega-menu) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .nav-item.open > .submenu.mega-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .mega-menu.ubc-thirdlevel-open > .mega-group.is-expanded {
  grid-column: 1 / -1 !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .mega-menu.ubc-thirdlevel-open > .mega-group:not(.is-expanded) {
  display: none !important;
}

/* Give the mobile triangle a little more breathing room after removing the
   separator, without shrinking its touch target. */
html.ubc-menu-ui-compact .mega-group-toggle,
html.js.ubc-menu-ui-compact .mega-group-toggle {
  background: rgba(255,255,255,.08) !important;
}


/* ========================================================================== 
   UBC menu search + long-article navigation - batch 164K
   ========================================================================== */
.ubc-menu-search,
.ubc-menu-search-results { display: none; }

html.ubc-menu-ui-compact .main-nav-wrap.menu-open .ubc-menu-search {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 42px;
  align-items: center;
  min-height: 48px;
  height: 48px;
  padding: 6px 7px;
  box-sizing: border-box;
  border-top: 1px solid rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(95,99,108,.34);
  background: #d9dce5;
}
html.ubc-menu-ui-compact .ubc-menu-search-input {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid #9299a4;
  border-radius: 3px 0 0 3px;
  outline: 0;
  background: #fff;
  color: #1e232a;
  font-size: 16px;
  line-height: 36px;
}
html.ubc-menu-ui-compact .ubc-menu-search-input:focus {
  border-color: #00009F;
  box-shadow: inset 0 0 0 1px #00009F;
}
html.ubc-menu-ui-compact .ubc-menu-search-clear {
  width: 42px;
  height: 36px;
  padding: 0;
  border: 1px solid #9299a4;
  border-left: 0;
  border-radius: 0 3px 3px 0;
  background: #eef0f5;
  color: #00009F;
  font-size: 25px;
  line-height: 34px;
  cursor: pointer;
}
html.ubc-menu-ui-compact .ubc-menu-search-clear:hover { color: var(--ubc-orange); background: #fff; }
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-search-active .main-nav,
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-search-active .main-nav.open { display: none !important; }
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-search-active .ubc-menu-search-results {
  display: grid !important;
  grid-template-columns: repeat(var(--ubc-ui-columns,1), minmax(0,1fr));
  align-content: start;
  width: 100%;
  max-height: calc(var(--ubc-ui-panel-max-height,100dvh) - 86px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 4px;
  background: #e3e5ed;
  overscroll-behavior: contain;
}
html.ubc-menu-ui-compact .ubc-menu-search-result {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(95,99,108,.28);
  color: #00009F;
  text-decoration: none;
  background: transparent;
}
html.ubc-menu-ui-compact .ubc-menu-search-result strong {
  overflow: hidden;
  font-size: max(16px,var(--ubc-ui-font-size,17px));
  line-height: 1.25;
  text-overflow: ellipsis;
}
html.ubc-menu-ui-compact .ubc-menu-search-result span {
  overflow: hidden;
  color: #555b65;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.ubc-menu-ui-compact .ubc-menu-search-result:hover,
html.ubc-menu-ui-compact .ubc-menu-search-result:active {
  color: var(--ubc-orange);
  background: rgba(255,255,255,.72);
}
html.ubc-menu-ui-compact .ubc-menu-search-empty {
  grid-column: 1 / -1;
  padding: 18px 12px;
  color: #4d535c;
  font-size: 16px;
  text-align: center;
}
/* Search adds 48px between the mobile bar and the menu body. */
html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav,
html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav.open {
  max-height: calc(var(--ubc-ui-panel-max-height,100dvh) - 86px) !important;
}
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .main-nav,
html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-ui-two-panel .main-nav.open {
  height: calc(var(--ubc-ui-panel-max-height,100dvh) - 86px) !important;
  min-height: calc(var(--ubc-ui-panel-max-height,100dvh) - 86px) !important;
  max-height: calc(var(--ubc-ui-panel-max-height,100dvh) - 86px) !important;
}

.ubc-article-toc {
  position: sticky;
  top: 6px;
  z-index: 2550;
  margin: 12px 40px 16px;
  box-sizing: border-box;
  border: 1px solid #aeb3bc;
  background: rgba(247,248,251,.97);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.ubc-article-toc-head {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  border-bottom: 1px solid #c0c4cb;
  background: #e3e5ed;
  color: #00009F;
}
.ubc-article-toc-head strong { font-size: 15px; line-height: 1.25; }
.ubc-article-toc-toggle { display: none; }
.ubc-article-toc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  max-height: 190px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px 7px 7px;
}
.ubc-article-toc-list a {
  display: block;
  min-width: 0;
  padding: 5px 7px;
  border-left: 3px solid transparent;
  color: #00009F;
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
}
.ubc-article-toc-list a:hover { color: var(--ubc-orange); background: #fff; }
.ubc-article-toc-list a.is-active {
  border-left-color: var(--ubc-orange);
  background: #fff;
  color: #11198f;
  font-weight: 700;
}
.ubc-toc-target { scroll-margin-top: 16px; }

@media (max-width: 900px) {
  .ubc-article-toc { position: relative; top: auto; z-index: auto; margin: 10px 18px 14px; }
  .ubc-article-toc-head { min-height: 42px; padding: 0 8px 0 11px; }
  .ubc-article-toc-head > strong { display: none; }
  .ubc-article-toc-toggle {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #00009F;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .ubc-article-toc-list { display: none; grid-template-columns: 1fr; max-height: 50dvh; padding: 5px; }
  .ubc-article-toc.is-open .ubc-article-toc-list { display: grid; }
  .ubc-article-toc-list a { padding: 7px 8px; font-size: 15px; }
}

/* ==========================================================================
   UBC mobile single-column readability + TOC standard side gutters - batch 167K
   ========================================================================== */
@media (max-width: 759px) {
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open {
    --ubc-ui-columns: 1 !important;
    --ubc-ui-list-columns: 1 !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav.open,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .submenu,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .submenu.mega-menu,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .mega-group-list,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-search-active .ubc-menu-search-results {
    grid-template-columns: 1fr !important;
    column-count: 1 !important;
  }
}

/* Smartphone menu labels may wrap instead of being truncated. The menu is
   intentionally single-column below 760px, so the available width should be
   used for readable 16-18px text rather than ellipsis. */
@media (max-width: 759px) {
  html.ubc-menu-ui-compact .nav-item > .nav-button,
  html.ubc-menu-ui-compact .nav-item > .nav-link,
  html.ubc-menu-ui-compact .nav-link,
  html.ubc-menu-ui-compact .nav-button,
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a,
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:hover,
  html.ubc-menu-ui-compact .submenu .mega-group-title,
  html.ubc-menu-ui-compact .submenu .mega-group-title:hover,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:hover {
    height: auto !important;
    max-height: none !important;
    min-height: 44px !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }
  html.ubc-menu-ui-compact .nav-item > .nav-button,
  html.ubc-menu-ui-compact .nav-item > .nav-link,
  html.ubc-menu-ui-compact .nav-link,
  html.ubc-menu-ui-compact .nav-button {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  html.ubc-menu-ui-compact .mega-group-heading {
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }
  html.ubc-menu-ui-compact .mega-group-toggle,
  html.js.ubc-menu-ui-compact .mega-group-toggle {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    height: 100% !important;
    max-height: none !important;
  }
  html.ubc-menu-ui-compact .submenu .mega-group-title {
    padding: 8px 10px !important;
  }
}

/* ==========================================================================
   UBC sticky navigation, compact mobile contacts and longread progress
   Baseline: batch 168K; menu structure/interaction remains unchanged.
   ========================================================================== */
.ubc-sticky-nav-placeholder {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .ubc-sticky-nav-placeholder.is-active { display: block; }

  .main-nav-wrap.ubc-desktop-nav-stuck {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--ubc-sticky-nav-left, 40px) !important;
    z-index: 6005 !important;
    width: var(--ubc-sticky-nav-width, calc(100% - 80px)) !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.20) !important;
  }

  body.ubc-desktop-nav-stuck .ubc-article-toc {
    top: calc(var(--ubc-sticky-nav-height, 30px) + 7px);
  }
  body.ubc-desktop-nav-stuck .ubc-toc-target {
    scroll-margin-top: calc(var(--ubc-sticky-nav-height, 30px) + 14px);
  }
}

/* Adaptive hamburger: ordinary in-header control until the complete header
   leaves the viewport; only then it becomes a compact 44px fixed control. */
@media (max-width: 900px) {
  html.ubc-menu-ui-compact .main-nav-wrap.ubc-mobile-hamburger-stuck:not(.menu-open) {
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    z-index: 6000 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.ubc-mobile-hamburger-stuck:not(.menu-open) .mobile-nav-bar {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    pointer-events: auto !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.ubc-mobile-hamburger-stuck:not(.menu-open) .nav-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
    border: 1px solid #9da2ab !important;
    border-radius: 5px !important;
    background-color: rgba(227,229,237,.96) !important;
    background-image: var(--ubc-menu-texture) !important;
    background-repeat: repeat-x !important;
    background-position: center !important;
    background-size: auto 100% !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
  }
}

/* Smartphone contacts collapse to one 44px call launcher. The existing six
   links are reused and unfolded horizontally; no duplicate contact URLs. */
@media (max-width: 900px) {
  body.ubc-page { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

  .mobile-footer-contact-strip.ubc-mobile-contact-collapsible {
    position: fixed !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    z-index: 4700 !important;
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  .ubc-mobile-contact-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 3px 11px rgba(0,0,0,.16);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .ubc-mobile-contact-toggle img {
    display: block;
    width: 44px;
    height: 44px;
  }

  .mobile-footer-contact-strip.ubc-mobile-contact-collapsible .contact-icon-list {
    position: absolute !important;
    right: 50px !important;
    bottom: 0 !important;
    display: flex !important;
    width: auto !important;
    height: 44px !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    opacity: 0;
    visibility: hidden;
    transform: translateX(12px) scaleX(.96);
    transform-origin: right center;
    border: 1px solid #adb1b9;
    border-radius: 6px;
    background: rgba(247,248,251,.97) !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.18) !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .mobile-footer-contact-strip.ubc-mobile-contact-collapsible.is-expanded .contact-icon-list {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scaleX(1);
    pointer-events: auto !important;
    transition-delay: 0s;
  }
  .mobile-footer-contact-strip.ubc-mobile-contact-collapsible .contact-icon-list a,
  .mobile-footer-contact-strip.ubc-mobile-contact-collapsible .contact-icon-list a:hover,
  .mobile-footer-contact-strip.ubc-mobile-contact-collapsible .contact-icon-list a:focus-visible,
  .mobile-footer-contact-strip.ubc-mobile-contact-collapsible .contact-icon-list img {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
  }
  .mobile-footer-contact-strip.ubc-mobile-contact-collapsible .contact-icon-list a {
    display: block !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  @keyframes ubc-mobile-contact-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 3px 11px rgba(0,0,0,.16); }
    38% { transform: scale(1.075); box-shadow: 0 4px 15px rgba(0,0,159,.30); }
    68% { transform: scale(.985); box-shadow: 0 3px 11px rgba(0,0,0,.16); }
  }
  .ubc-mobile-contact-toggle.is-pulsing {
    animation: ubc-mobile-contact-pulse 1.25s ease-in-out 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ubc-mobile-contact-toggle.is-pulsing { animation: none !important; }
}

/* Longread progress uses the same >=1800-word / >=4-heading gate as TOC. */
.ubc-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5995;
  display: none;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: #d7d9df;
  pointer-events: none;
}
.ubc-reading-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #00009F;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  body.ubc-longread-active .ubc-reading-progress {
    top: var(--ubc-sticky-nav-height, 30px);
    left: var(--ubc-sticky-nav-left, 40px);
    display: block;
    width: var(--ubc-sticky-nav-width, calc(100% - 80px));
    opacity: 0;
    transition: opacity .14s ease;
  }
  body.ubc-longread-active.ubc-desktop-nav-stuck .ubc-reading-progress { opacity: 1; }
}

@media (max-width: 900px) {
  body.ubc-longread-active .ubc-reading-progress {
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
  }
}

body.ubc-menu-panel-open .ubc-reading-progress,
body.ubc-feedback-modal-open .ubc-reading-progress { opacity: 0 !important; }

@media (max-width: 900px) {
  /* Keep the existing back-to-top control clear of the new 44px contact launcher. */
  .back-top {
    right: max(60px, calc(env(safe-area-inset-right, 0px) + 60px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }
}


/* ========================================================================== 
   UBC MOBILE NAVIGATION SHEET + GOOGLE-LIKE SERVICE SEARCH - batch 176K
   Mobile-only redesign. Desktop historical menu/gradients remain unchanged.
   ========================================================================== */
.ubc-mobile-header-toggle-host,
.ubc-mobile-search-zone,
.ubc-mobile-menu-search-slot,
.ubc-mobile-menu-contact-slot,
.ubc-mobile-menu-brand,
.ubc-menu-note,
.ubc-mobile-category-landing { display: none; }

@media (max-width: 900px) {
  html { background: #d4d6db; }
  body.ubc-page {
    margin: 0 !important;
    background: #d4d6db !important;
  }
  body.ubc-page > .site-shell,
  body.ubc-page .site-shell {
    width: calc(100% - 10px) !important;
    max-width: none !important;
    margin-right: 5px !important;
    margin-left: 5px !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  .header-visual-inner {
    width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
  }
  .header-brand-row {
    position: relative !important;
    display: flex !important;
    min-height: 72px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 9px 52px 9px 8px !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }
  .header-brand-row .logo-link {
    width: min(56vw, 214px) !important;
    margin: 0 !important;
  }
  .header-contacts { display: none !important; }
  .header-visual-inner .hero { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; }
  .header-visual-inner .hero-track,
  .header-visual-inner .hero-slide { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; }
  .header-visual-inner .hero-slide img { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 7 / 1 !important; object-fit: contain !important; object-position: center !important; transform: none !important; }
  .header-visual-inner .logo-rule {
    display: block !important;
    width: 100% !important;
    height: 4px !important;
    min-height: 4px !important;
    margin: 0 !important;
    border-top: 1px solid #aeb2ba !important;
    border-bottom: 1px solid #d2d5da !important;
    box-sizing: border-box !important;
    background: #fff !important;
    background-image: none !important;
  }

  .ubc-mobile-header-toggle-host {
    position: absolute;
    top: 50%;
    right: 3px;
    z-index: 6100;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
  }
  .ubc-mobile-header-toggle-host.ubc-mobile-hamburger-stuck {
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    transform: none !important;
    border-radius: 6px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 2px 9px rgba(0,0,0,.12);
  }
  .ubc-mobile-header-toggle-host .nav-toggle,
  html.ubc-menu-ui-compact .ubc-mobile-header-toggle-host .nav-toggle {
    display: flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }
  .ubc-mobile-header-toggle-host .nav-toggle-icon,
  html.ubc-menu-ui-compact .nav-toggle-icon {
    width: 25px !important;
    height: 18px !important;
  }
  .ubc-mobile-header-toggle-host .nav-toggle-icon span,
  html.ubc-menu-ui-compact .nav-toggle-icon span {
    height: 2px !important;
    border-radius: 0 !important;
    background: #00009F !important;
  }

  /* Closed menu shell occupies no visual row. Search lives in its permanent
     header zone; the same DOM component is moved into the sheet when opened. */
  html.ubc-menu-ui-compact .main-nav-wrap:not(.menu-open),
  .main-nav-wrap:not(.menu-open) {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap:not(.menu-open) .mobile-nav-bar { display: none !important; }

  .ubc-mobile-search-zone {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 7px 11px;
    background-color: #f6f7f8;
    background-image: url("../image/mobile-header-silver-gradient.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
  }
  .ubc-mobile-search-bundle {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }
  .ubc-menu-search,
  html.ubc-menu-ui-compact .ubc-menu-search,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .ubc-menu-search {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 28px auto !important;
    gap: 5px;
    width: 100%;
    min-height: 50px !important;
    height: 50px !important;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 5px 5px 14px !important;
    overflow: hidden;
    border: 1px solid #b9bec7 !important;
    border-radius: 25px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  }
  html.ubc-menu-ui-compact .ubc-menu-search:focus-within,
  .ubc-menu-search:focus-within {
    border-color: #00009F !important;
    box-shadow: 0 1px 5px rgba(0,0,159,.12) !important;
  }
  html.ubc-menu-ui-compact .ubc-menu-search-input,
  .ubc-menu-search-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 3px 0 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #222 !important;
    font-size: 15px !important;
    line-height: 38px !important;
  }
  .ubc-menu-search-input::-webkit-search-decoration { display: none; }
  .ubc-menu-search-category {
    display: flex;
    width: 28px;
    min-width: 28px;
    height: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #00009F !important;
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .15s ease, color .15s ease, opacity .15s ease;
  }
  .ubc-menu-search-category:active { transform: scale(.88); }
  .ubc-category-open .ubc-menu-search-category {
    color: #00009F !important;
    opacity: .72;
  }
  .ubc-menu-search-submit,
  html.ubc-menu-ui-compact body.ubc-page button.ubc-menu-search-submit,
  html.ubc-menu-ui-compact body.ubc-page button.ubc-menu-search-submit-premium {
    position: relative !important;
    display: inline-flex !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 13px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px !important;
    outline: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #e3e5e8 !important;
    background-image: url("../image/mobile-search-button-silver.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    color: #00009F !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(28,34,48,.12), inset 0 1px rgba(255,255,255,.78) !important;
    text-shadow: 0 1px rgba(255,255,255,.72);
    touch-action: manipulation;
    isolation: isolate;
  }
  .ubc-menu-search-submit:active,
  html.ubc-menu-ui-compact body.ubc-page button.ubc-menu-search-submit-premium:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(40,46,58,.14) !important;
  }
  .ubc-menu-search-submit::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -55%;
    width: 34%;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.72), rgba(206,211,219,.24), rgba(255,255,255,0));
    pointer-events: none;
  }
  .ubc-menu-search-submit.is-intro-sweep::after {
    animation: ubc-search-silver-sweep .95s ease-out 1;
  }
  .ubc-menu-search-magnifier {
    display: flex;
    width: 19px;
    min-width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    transform-origin: center;
  }
  .ubc-menu-search-magnifier svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
  .ubc-menu-search-submit.is-magnifier-pulse .ubc-menu-search-magnifier {
    animation: ubc-search-magnifier-pulse .55s ease-out 1;
  }
  @keyframes ubc-search-silver-sweep {
    0% { left: -55%; opacity: 0; }
    18% { opacity: .8; }
    100% { left: 125%; opacity: 0; }
  }
  @keyframes ubc-search-magnifier-pulse {
    0%,100% { transform: scale(1); }
    45% { transform: scale(1.10); }
  }

  .ubc-menu-search-category-status {
    display: none;
    min-height: 0;
    padding: 4px 14px 0;
    color: #555b65;
    font-size: 11px;
    line-height: 1.25;
  }
  .ubc-menu-search-category-status.is-visible { display: block; }
  .ubc-menu-search-category-status::first-line { color: #00009F; }

  .ubc-menu-search-category-popover {
    position: absolute;
    top: 55px;
    right: 5px;
    left: 5px;
    z-index: 6300;
    display: none;
    max-height: min(55dvh, 430px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #aeb4bd;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    overscroll-behavior: contain;
  }
  .ubc-category-open .ubc-menu-search-category-popover { display: grid; gap: 4px; }
  .ubc-menu-category-option {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #e1e3e7;
    background: #fff;
    color: #00009F;
    text-align: left;
    cursor: pointer;
  }
  .ubc-menu-category-option:last-child { border-bottom: 0; }
  .ubc-menu-category-option strong { font-size: 14px; line-height: 1.2; }
  .ubc-menu-category-option span { color: #666c74; font-size: 11px; line-height: 1.2; }

  .ubc-menu-search-results,
  html.ubc-menu-ui-compact .ubc-menu-search-results {
    display: none !important;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #d2d5da;
    border-radius: 4px;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  .ubc-search-has-results > .ubc-menu-search-results,
  html.ubc-menu-ui-compact .ubc-search-has-results > .ubc-menu-search-results {
    display: grid !important;
  }
  .ubc-mobile-search-zone .ubc-menu-search-results { max-height: min(38dvh, 315px); }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .ubc-menu-search-results {
    max-height: none !important;
    padding: 0 !important;
  }
  html.ubc-menu-ui-compact .ubc-menu-search-result,
  .ubc-menu-search-result {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid #e1e3e6;
    background: #fff !important;
    color: #00009F;
    text-decoration: none;
  }
  .ubc-menu-search-result:last-child { border-bottom: 0; }
  html.ubc-menu-ui-compact .ubc-menu-search-result strong,
  .ubc-menu-search-result strong { font-size: 15px; line-height: 1.22; }
  html.ubc-menu-ui-compact .ubc-menu-search-result span,
  .ubc-menu-search-result span {
    overflow: hidden;
    color: #626871;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html.ubc-menu-ui-compact .ubc-menu-search-empty,
  .ubc-menu-search-empty {
    padding: 16px 10px;
    color: #555b65;
    font-size: 14px;
    text-align: center;
  }

  /* Navigation sheet: full-width within the paper canvas and full viewport
     height. Contacts stay inside the sheet; there is no empty bottom zone. */
  .ubc-menu-backdrop,
  .ubc-menu-backdrop.is-visible {
    background: rgba(94,98,106,.34) !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open,
  .main-nav-wrap.menu-open {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    right: 5px !important;
    left: 5px !important;
    z-index: 6000 !important;
    display: block !important;
    width: calc(100vw - 10px) !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 5px 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .mobile-nav-bar,
  .main-nav-wrap.menu-open .mobile-nav-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 6250 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 72px !important;
    height: 72px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 3px 8px 9px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 3px double #b6bac2 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }
  .ubc-mobile-menu-brand {
    display: flex !important;
    width: min(53vw, 204px) !important;
    align-items: center;
    justify-content: flex-start;
  }
  .ubc-mobile-menu-brand img {
    display: block;
    width: 100%;
    height: auto;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .nav-toggle,
  .main-nav-wrap.menu-open .nav-toggle {
    display: flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .ubc-mobile-menu-search-slot {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 7px 10px;
    background-color: #f6f7f8;
    background-image: url("../image/mobile-header-silver-gradient.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
  }
  .ubc-mobile-menu-search-slot:empty { display: none; }

  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav.open,
  .main-nav-wrap.menu-open .main-nav,
  .main-nav-wrap.menu-open .main-nav.open {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 7px 3px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-search-active .main-nav,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open.ubc-search-active .main-nav.open { display: none !important; }

  html.ubc-menu-ui-compact .main-nav > .nav-item,
  .main-nav > .nav-item {
    display: block !important;
    width: 100% !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  /* Page-like accordion: never hide sibling categories. */
  html.ubc-menu-ui-compact .main-nav.ubc-sublevel-open > .nav-item:not(.open),
  html.ubc-menu-ui-compact .mega-menu.ubc-thirdlevel-open > .mega-group:not(.is-expanded) {
    display: block !important;
  }

  html.ubc-menu-ui-compact .nav-item > .nav-button,
  html.ubc-menu-ui-compact .nav-item > .nav-link,
  html.ubc-menu-ui-compact .nav-link,
  html.ubc-menu-ui-compact .nav-button {
    display: flex !important;
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    max-height: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    padding: 8px 11px !important;
    border: 1px solid #00009F !important;
    border-radius: 4px !important;
    background: #f3f4f6 !important;
    background-image: none !important;
    color: #202020 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    white-space: normal !important;
    box-shadow: none !important;
  }
  html.ubc-menu-ui-compact .nav-item.open > .nav-button,
  html.ubc-menu-ui-compact .nav-item.open > .nav-link-dropdown {
    color: #00009F !important;
    font-size: 18px !important;
    background: #eff0f3 !important;
  }
  .ubc-menu-note {
    display: block !important;
    width: 100%;
    overflow: hidden;
    color: #666b73 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html.ubc-menu-ui-compact .submenu,
  html.ubc-menu-ui-compact .nav-item.open > .submenu,
  html.ubc-menu-ui-compact .submenu.mega-menu,
  html.ubc-menu-ui-compact .nav-item.open > .submenu.mega-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 7px 0 0 !important;
    padding: 7px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f1f2f4 !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) { display: none !important; }
  html.ubc-menu-ui-compact .nav-item.open > .submenu:not(.mega-menu) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a,
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:hover,
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:focus-visible {
    display: flex !important;
    width: 100% !important;
    min-height: 50px !important;
    height: auto !important;
    max-height: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    padding: 7px 9px !important;
    overflow: visible !important;
    border: 1px solid #e58000 !important;
    border-radius: 2px !important;
    background: #fff !important;
    background-image: none !important;
    color: #202020 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    text-decoration: none !important;
  }
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:hover,
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:focus-visible,
  html.ubc-menu-ui-compact .submenu:not(.mega-menu) > li > a:active {
    color: #00009F !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  html.ubc-menu-ui-compact .nav-item.open > .submenu.mega-menu {
    display: block !important;
  }
  html.ubc-menu-ui-compact .mega-group {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html.ubc-menu-ui-compact .mega-group:last-child { margin-bottom: 0 !important; }
  html.ubc-menu-ui-compact .mega-group-heading {
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    border: 1px solid #e58000 !important;
    border-radius: 2px !important;
    background: #fff !important;
    background-image: none !important;
  }
  html.ubc-menu-ui-compact .mega-group-toggle,
  html.js.ubc-menu-ui-compact .mega-group-toggle { display: none !important; }
  html.ubc-menu-ui-compact .submenu .mega-group-title,
  html.ubc-menu-ui-compact .submenu .mega-group-title:hover,
  html.ubc-menu-ui-compact .submenu .mega-group-title:focus-visible {
    display: flex !important;
    width: 100% !important;
    min-height: 50px !important;
    height: auto !important;
    max-height: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    padding: 7px 9px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #202020 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    text-decoration: none !important;
  }
  html.ubc-menu-ui-compact .mega-group.is-expanded .mega-group-title {
    color: #e58000 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  html.ubc-menu-ui-compact .mega-group-list,
  html.ubc-menu-ui-compact .mega-group-regions .mega-group-list {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    columns: auto !important;
    column-count: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html.js.ubc-menu-ui-compact .mega-group.is-expanded .mega-group-list {
    display: block !important;
  }
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li,
  html.ubc-menu-ui-compact .mega-group-regions .mega-group-list li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #dfe1e5 !important;
    background: #fff !important;
  }
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li:last-child { border-bottom: 0 !important; }
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:hover,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:focus-visible,
  html.ubc-menu-ui-compact .mega-group-regions .mega-group-list li a {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    max-height: none !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 7px 9px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    color: #202020 !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    text-decoration: none !important;
  }
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:hover,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:focus-visible,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list li a:active {
    color: #00009F !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  html.ubc-menu-ui-compact .ubc-mobile-category-landing {
    display: block !important;
    border-bottom: 1px solid #e58000 !important;
  }
  html.ubc-menu-ui-compact .ubc-mobile-category-landing > a {
    color: #00009F !important;
    font-weight: 700 !important;
  }

  /* All historical mobile menu gradients/textures are suppressed. */
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open *,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open *::before,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open *::after {
    background-image: none;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .ubc-mobile-menu-search-slot {
    background-image: url("../image/mobile-header-silver-gradient.svg") !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .ubc-menu-search-submit::after {
    background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
  }

  .ubc-mobile-menu-contact-slot {
    position: sticky;
    bottom: 0;
    z-index: 6240;
    display: flex;
    width: calc(100% - 14px);
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    margin: 8px 7px 0;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) 10px;
    border-top: 1px solid #d7d9dd;
    background: rgba(245,246,247,.98);
    box-shadow: 0 -4px 10px rgba(0,0,0,.04);
  }
  .ubc-mobile-menu-contact-label {
    color: #00009F;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }
  .ubc-mobile-menu-contact-holder { display: flex; min-width: 44px; justify-content: flex-end; }
  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip.ubc-mobile-contact-collapsible {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip .contact-icon-list {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 44px !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    visibility: hidden;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transition: max-width .18s ease, width .18s ease, opacity .18s ease;
  }
  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip.is-expanded .contact-icon-list {
    width: 242px !important;
    max-width: 242px !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important;
  }
  .ubc-mobile-menu-contact-slot .ubc-mobile-contact-toggle.is-pulsing { animation: none !important; }

  body.ubc-menu-panel-open .ubc-mobile-header-toggle-host { visibility: hidden; }
}

@media (max-width: 370px) {
  .ubc-menu-search { padding-left: 10px !important; gap: 3px !important; }
  .ubc-menu-search-submit { padding-right: 9px; padding-left: 9px; font-size: 12px; gap: 4px; }
  .ubc-menu-search-magnifier,
  .ubc-menu-search-magnifier svg { width: 16px; min-width: 16px; height: 16px; }
  .ubc-menu-search-input { font-size: 14px !important; }
  .ubc-mobile-menu-contact-label { font-size: 12px; }
  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip.is-expanded .contact-icon-list {
    width: 218px !important;
    max-width: 218px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ubc-menu-search-submit.is-intro-sweep::after,
  .ubc-menu-search-submit.is-magnifier-pulse .ubc-menu-search-magnifier {
    animation: none !important;
  }
}

/* 176K mobile QA corrections: keep the contact block inside the navigation
   sheet only, and harden the round category-control geometry against older
   legacy button selectors. */
@media (max-width: 900px) {
  html.ubc-menu-ui-compact .main-nav-wrap:not(.menu-open) > .ubc-mobile-menu-contact-slot,
  .main-nav-wrap:not(.menu-open) > .ubc-mobile-menu-contact-slot {
    display: none !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open > .ubc-mobile-menu-contact-slot,
  .main-nav-wrap.menu-open > .ubc-mobile-menu-contact-slot {
    display: block !important;
  }
}

/* Compact contact accordion at very narrow mobile widths. The label is hidden
   only while the six contact choices are unfolded, preserving one-row access. */
@media (max-width: 370px) {
  .ubc-mobile-menu-contact-slot.is-contact-expanded {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
  .ubc-mobile-menu-contact-slot.is-contact-expanded .ubc-mobile-menu-contact-label {
    display: none !important;
  }
  .ubc-mobile-menu-contact-slot.is-contact-expanded .mobile-footer-contact-strip.is-expanded .contact-icon-list {
    width: 238px !important;
    max-width: 238px !important;
  }
}

/* ========================================================================== 
   UBC 177K mobile header/search/menu hotfix - 2026-08-29
   - left-aligned mobile logo
   - contourless category + control
   - isolated premium silver search pill
   - full-height navigation sheet with persistent contact bar
   ========================================================================== */
@media (max-width: 900px) {
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open,
  .main-nav-wrap.menu-open {
    display: flex !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .mobile-nav-bar,
  .main-nav-wrap.menu-open .mobile-nav-bar,
  .ubc-mobile-menu-search-slot,
  .ubc-mobile-menu-contact-slot {
    flex: 0 0 auto !important;
  }
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav,
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open .main-nav.open,
  .main-nav-wrap.menu-open .main-nav,
  .main-nav-wrap.menu-open .main-nav.open {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .ubc-mobile-menu-contact-slot {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(100% - 14px) !important;
    margin: 0 7px !important;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    background: #f5f6f7 !important;
    box-shadow: 0 -4px 10px rgba(0,0,0,.04) !important;
  }
}

/* ========================================================================== 
   UBC 178K approved mobile menu contact dock - 2026-08-29
   Only the lower contact strip inside the OPEN mobile menu is changed.
   Closed-page sticky contact launcher and desktop/header contacts remain intact.
   ========================================================================== */
@media (max-width: 900px) {
  html.ubc-menu-ui-compact .main-nav-wrap.menu-open > .ubc-mobile-menu-contact-slot,
  .main-nav-wrap.menu-open > .ubc-mobile-menu-contact-slot {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 6240 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 4px 5px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1px solid #d7d9dd !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .ubc-mobile-menu-contact-slot .ubc-mobile-menu-contact-label,
  .ubc-mobile-menu-contact-slot .ubc-mobile-contact-toggle {
    display: none !important;
  }

  .ubc-mobile-menu-contact-slot .ubc-mobile-menu-contact-holder,
  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip.ubc-mobile-contact-collapsible {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip.ubc-mobile-contact-collapsible .contact-icon-list,
  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip.ubc-mobile-contact-collapsible.is-expanded .contact-icon-list {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact,
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:hover,
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:focus-visible {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: auto !important;
    min-width: 44px !important;
    max-width: none !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 4px 1px 3px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #454b54 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact > img:not(.ubc-mobile-menu-dock-icon) {
    display: none !important;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-menu-dock-icon,
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:hover .ubc-mobile-menu-dock-icon,
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:focus-visible .ubc-mobile-menu-dock-icon {
    display: block !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    filter: none !important;
    transform: none;
    transition: transform .12s ease, filter .12s ease;
    pointer-events: none;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-menu-dock-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    color: #454b54 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    /* No minimum font size: labels shrink continuously with the viewport
       so Telegram / WhatsApp / Signal are never clipped on narrow phones. */
    font-size: min(10.5px, 2.7vw) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    pointer-events: none;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:active .ubc-mobile-menu-dock-icon {
    transform: scale(.92) !important;
    filter: brightness(0) saturate(100%) invert(57%) sepia(97%) saturate(3052%) hue-rotate(2deg) brightness(101%) contrast(102%) !important;
  }
}

/* Small smartphones: keep the five touch-first channels, omit Email.
   No horizontal scrolling and no reduction below the 44px touch target. */
@media (max-width: 359px) {
  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip.ubc-mobile-contact-collapsible .contact-icon-list,
  .ubc-mobile-menu-contact-slot .mobile-footer-contact-strip.ubc-mobile-contact-collapsible.is-expanded .contact-icon-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .ubc-mobile-menu-contact-slot .ubc-mobile-dock-contact-email {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-menu-dock-icon {
    transition: none !important;
  }
}


/* ==========================================================================
   UBC 179K breadcrumbs date + narrow contact labels - 2026-08-29
   ========================================================================== */
.page-breadcrumbs .breadcrumb-js-date {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0 5px 0 0;
  color: #777;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 359px) {
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-menu-dock-label {
    font-size: min(10.5px, 3vw) !important;
    letter-spacing: -.01em;
  }
}


/* ==========================================================================
   UBC 180K mobile L3 + contact dock press state - 2026-08-29
   ========================================================================== */
@media (max-width: 900px) {
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact,
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:hover,
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:focus-visible {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-menu-dock-icon {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    transition: filter .12s ease !important;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-menu-dock-label {
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:active .ubc-mobile-menu-dock-icon,
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact.is-contact-active .ubc-mobile-menu-dock-icon {
    transform: none !important;
    filter: brightness(0) saturate(100%) invert(57%) sepia(97%) saturate(3052%) hue-rotate(2deg) brightness(101%) contrast(102%) !important;
  }

  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact:active .ubc-mobile-menu-dock-label,
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-dock-contact.is-contact-active .ubc-mobile-menu-dock-label {
    color: #f28c00 !important;
  }
}

@media (max-width: 359px) {
  .ubc-mobile-menu-contact-slot .contact-icon-list .ubc-mobile-menu-dock-label {
    font-size: 10.5px !important;
    letter-spacing: -.02em !important;
  }
}


/* ==========================================================================
   UBC 184K compact third-level clickable-layer hardening - 2026-08-29
   Explicit hit area + stacking for every visible L3 service row.
   ========================================================================== */
@media (max-width: 900px) {
  html.ubc-menu-ui-compact .mega-group-heading {
    position: relative !important;
    z-index: 2 !important;
  }
  html.ubc-menu-ui-compact .mega-group.is-expanded > .mega-group-list,
  html.ubc-menu-ui-compact .mega-group.is-expanded > .mega-group-regions .mega-group-list {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    isolation: isolate;
  }
  html.ubc-menu-ui-compact .mega-group-list > li.ubc-l3-click-row,
  html.ubc-menu-ui-compact .mega-group-regions .mega-group-list > li.ubc-l3-click-row {
    position: relative !important;
    z-index: 21 !important;
    min-height: 44px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list > li > a.ubc-l3-link,
  html.ubc-menu-ui-compact .mega-group-regions .mega-group-list > li > a.ubc-l3-link,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list > li > a.ubc-l3-link:hover,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list > li > a.ubc-l3-link:focus-visible,
  html.ubc-menu-ui-compact .submenu.mega-menu .mega-group-list > li > a.ubc-l3-link:active {
    position: relative !important;
    z-index: 22 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation;
  }
  html.ubc-menu-ui-compact .mega-group-list > li > a.ubc-l3-link *,
  html.ubc-menu-ui-compact .mega-group-regions .mega-group-list > li > a.ubc-l3-link * {
    pointer-events: none !important;
  }
}

/* UBC 204K: JS date lives before the language symbols, not in breadcrumbs. */
.ubc-header-js-date {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0 0 0 12px;
  padding: 0;
  color: #565b63;
  font-size: 11px;
  font-weight: 400;
  line-height: inherit;
  white-space: nowrap;
}
.ubc-header-js-date + .utility-language-links { margin-left: 8px; }

/* UBC unified CTA, feedback form and tables */
.ubc-cta-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:44px!important;min-height:44px!important;padding:0 18px!important;border:1px solid #00009F!important;border-radius:0!important;background:#00009F!important;color:#fff!important;text-decoration:none!important;font-weight:700!important;line-height:1.2!important;cursor:pointer!important;box-sizing:border-box!important}
.ubc-cta-button:hover,.ubc-cta-button:focus-visible{background:#e87521!important;border-color:#e87521!important;color:#fff!important;text-decoration:none!important}
.ubc-feedback-section{margin:24px 0;padding:24px;border:1px solid #cbd5df;background:#f7f9fb;box-sizing:border-box}
.ubc-feedback-form{display:grid;gap:16px}
.ubc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ubc-feedback-form label{display:grid;gap:6px;font-weight:700;color:#00009F}
.ubc-feedback-form input,.ubc-feedback-form select,.ubc-feedback-form textarea{width:100%;padding:11px 12px;border:1px solid #aebbc8;border-radius:0;background:#fff;color:#00009F;font:inherit;box-sizing:border-box}
.ubc-feedback-form textarea{resize:vertical;min-height:150px}
.ubc-feedback-form input:focus,.ubc-feedback-form select:focus,.ubc-feedback-form textarea:focus{outline:2px solid #e87521;outline-offset:1px;border-color:#e87521}
.ubc-form-consent{grid-template-columns:20px 1fr!important;align-items:start;font-weight:400!important}
.ubc-form-consent input{width:18px!important;height:18px;margin:2px 0 0}
.ubc-form-note{font-size:.92em;color:#526577}
body.ubc-page table{width:100%;border-collapse:collapse;border-spacing:0;background:#f2f2f2;font-size:95%;line-height:1.35}
body.ubc-page table th,body.ubc-page table td{padding:.55em .7em;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);border-left:0!important;border-right:0!important;text-align:left;vertical-align:top}
body.ubc-page table thead th{background:#e6e6e6;font-weight:700}
body.ubc-page table tbody tr:nth-child(even)>*{background:#e6e6e6}
body.ubc-page table tbody tr:hover>*{background:#d9d9d9}
body.ubc-page table td.price,body.ubc-page table th.price,body.ubc-page table td.amount,body.ubc-page table th.amount,body.ubc-page table td.numeric,body.ubc-page table th.numeric,body.ubc-page table td.num,body.ubc-page table th.num,body.ubc-page table td[data-type="number"],body.ubc-page table td[data-type="price"]{text-align:right!important;font-variant-numeric:tabular-nums}
@media(max-width:760px){.ubc-form-grid{grid-template-columns:1fr}.ubc-feedback-section,.ubc-service-cta{padding:18px}.ubc-cta-button{width:100%;text-align:center}}

/* Numeric and price columns */
body.ubc-page table.price-table th:first-child,body.ubc-page table.price-table td:first-child,body.ubc-page table.price-table th:last-child,body.ubc-page table.price-table td:last-child{text-align:right!important;font-variant-numeric:tabular-nums}

body.ubc-page table td[data-label*="стоимость" i],body.ubc-page table th[data-label*="стоимость" i],body.ubc-page table td[data-label*="вартість" i],body.ubc-page table th[data-label*="вартість" i],body.ubc-page table td[data-label*="cost" i],body.ubc-page table th[data-label*="cost" i],body.ubc-page table td[data-label*="price" i],body.ubc-page table th[data-label*="price" i]{text-align:right!important;font-variant-numeric:tabular-nums}