/* Outset Business: the main site's 2026 nav bar and phone menu (public/refresh.css, sections 1.1-1.3, copied as they
   are, by way of sites/law/public/refresh.css), in Business's colours. Only the nav comes over: the main file's buttons,
   type scale and section styles would restyle every Business page. WebflowBase loads this as /refresh.css because
   sites/business.json sets css.refresh; Business serves its own public folder, so the main site's file is not involved.
   Main site blue -> Business: dark blue (nav text) is Business's soft black, mid blue (hover, "View all", brochure link)
   Business's red-brown (its orange-red is too light for small text on white; it stays the Programs column's colour). */
.navbar,
.nav-open-mobile {
  --_style-guide-2-0---outset-dark-blue: var(--_style-guide-2-0---outset-soft-black);
  --_style-guide-2-0---outset-mid-blue: var(--_style-guide-2-0---outset-red-brown);
}

/* Bar height: 88px desktop, 56px phone. Everything that sits under the fixed bar reads this. */
:root { --nav-h: 5.5rem; }
@media screen and (max-width: 991px) { :root { --nav-h: 3.5rem; } }

.nav_component { height: var(--nav-h); }
.nav-drop_open.w--open,
.nav-open.nav-drop_open { top: var(--nav-h); }
.section_hero,
.section_unavailable,
.section_blog-hero,
.section_utility,
.hero-basic_component,
.team-hero_component { margin-top: var(--nav-h); }
/* the split hero's 4rem top padding cleared the old 64px bar; with the 88px bar the contact page's tall form started under it */
@media screen and (min-width: 992px) { .main-hero_right { padding-top: calc(var(--nav-h) + 1px); } }
.section_unavailable .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; } /* data fallback on Explore + detail */
.detail-layout_sidebar { top: calc(var(--nav-h) + .5rem); max-height: calc(100vh - var(--nav-h) - 1rem); }

/* 1.1 Desktop bar */
.navbar { border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
.navbar > .padding-global { padding-left: 1.5rem; padding-right: 1.5rem; }
.navbar > .padding-global > .container-large { max-width: none; }
.nav-button { width: auto; margin-right: 1.25rem; }
.menu-btn { grid-column-gap: .5rem; grid-row-gap: .5rem; min-width: 2.75rem; min-height: 2.75rem; }
.menu-button-line { width: 2.5rem; height: 2px; }
.nav-dropdown {
  padding: .9rem .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
/* the Client-First reset in nav.html's own <style> sets .w-dropdown-toggle{color:inherit} after this file loads */
.nav-dropdown.w-dropdown-toggle { color: var(--_style-guide-2-0---outset-dark-blue); }
.nav-dropdown.w-dropdown-toggle:hover,
.nav-dropdown.w-dropdown-toggle.w--open { color: var(--_style-guide-2-0---outset-mid-blue); }
.nav-logo { max-width: 9.5rem; }
.nav-right .button .icon-embed-xxsmall { display: none; }

/* 1.2 Phone bar */
@media screen and (max-width: 991px) {
  .navbar > .padding-global { padding-left: 1rem; padding-right: 1rem; }
  .nav_component { grid-template-columns: 1fr auto 1fr; grid-column-gap: .5rem; }
  .nav-button { margin-right: 0; }
  .nav-logo { max-width: 6.125rem; }
  .nav-apply_more { display: none; }
  .nav-right .button {
    width: auto;
    min-height: 2rem;
    padding: .375rem .875rem;
    border-radius: 1px;
    font-size: .75rem;
  }
}

/* 1.3 Phone menu: drill-down panels (markup in src/webflow/nav.html, behaviour in custom-ui.js) */
.nav-open-mobile.nav-drop_open.is-mobile {
  top: calc(var(--nav-h) + 1px); /* below the bar's hairline */
  height: calc(100svh - var(--nav-h) - 1px);
  padding-top: .75rem;
  padding-bottom: 0;
  border-top: 0;
}
.nav-open-mobile > .padding-global { padding-left: 1rem; padding-right: 1rem; }
.nav-drop-grid.is-mobile { padding-bottom: 2.5rem; }

.mmenu { display: flex; flex-direction: column; gap: .75rem; width: 100%; max-width: 36rem; } /* tablet: keep the phone proportions */
.mmenu_image { aspect-ratio: 358 / 239; border-radius: 4px; overflow: hidden; }
.mmenu_image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mmenu_panel[data-mmenu-panel="root"] { display: flex; flex-direction: column; gap: 4rem; }
.mmenu_list { margin: 0; padding: 0; list-style: none; }
.mmenu_list > li { margin: 0; }
.mmenu_list.is-top { padding-top: .75rem; }

.mmenu_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .6875rem 0;
  border: 0;
  background: none;
  color: var(--_style-guide-2-0---outset-dark-blue);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: -.03em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mmenu_item.is-top { padding: .5625rem 0; font-size: 2.25rem; line-height: 2.25rem; }
.mmenu_item.is-all { color: var(--_style-guide-2-0---outset-mid-blue); }
.mmenu_cta {
  align-self: flex-start;
  color: var(--_style-guide-2-0---outset-mid-blue);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none;
}

.mmenu_tri {
  flex: none;
  width: 0;
  height: 0;
  margin-right: 1rem;
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent;
  border-left: .5rem solid currentColor;
}
.mmenu_tri.is-back { margin-right: 0; border-left: 0; border-right: .5rem solid currentColor; }

.mmenu_head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 3.5rem; margin-bottom: .375rem; }
.mmenu_back {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0 0 1rem;
  border: 0;
  background: none;
  color: var(--_style-guide-2-0---outset-dark-blue);
  transform: translateY(-50%);
  cursor: pointer;
}
.mmenu_title {
  margin: 0;
  color: var(--_style-guide-2-0---outset-dark-blue);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: -.03em;
  text-align: center;
}
.mmenu_item:focus-visible,
.mmenu_back:focus-visible,
.mmenu_cta:focus-visible { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }

@keyframes mmenu-forward { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes mmenu-back { from { opacity: 0; transform: translateX(-1.5rem); } to { opacity: 1; transform: none; } }
.mmenu_panel.is-entering-forward { animation: mmenu-forward .35s cubic-bezier(.625, .05, 0, 1); }
.mmenu_panel.is-entering-back { animation: mmenu-back .35s cubic-bezier(.625, .05, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  .mmenu_panel.is-entering-forward,
  .mmenu_panel.is-entering-back { animation: none; }
}

/* Desktop menu (the burger's panel): Programs column, Campuses cards, link lists, as the main site lays it out. Business's
   snapshot sets this grid to one column (its panel had the link lists only). */
.nav-drop-grid.is-open { grid-column-gap: 2rem; grid-row-gap: 2rem; grid-template-columns: 1fr 1.75fr 1fr; }
.nav-drop-wrap { display: flex; flex-flow: column; }
.nav-drop_explore.is-red { background-color: var(--_style-guide-2-0---outset-red); border-radius: 8px; padding: 1.25rem; }