@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("../img/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("../img/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("../img/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("../img/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("../img/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: 1px solid rgba(95, 99, 108, .48);
  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: 1px solid rgba(82,86,95,.45);
    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: 17px 18px;
  border: 1px solid #d8d8d8;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.055);
}
.ubc-top-services h2 {
  margin: 0 0 10px;
  color: #00009F;
  font-size: 18px !important;
  line-height: 1.3;
}
/* 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("../img/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("../img/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("../img/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("../img/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;
}

/* 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}