/* Outset Law program pages in the main site's 2026 design (src/clones/routes/program-refresh.astro). Loaded on those
   pages only, after /refresh.css (Law's menu layer). Copied from the main site, in four parts:
   1. public/refresh.css 1.6 buttons, scoped to the page (.main-wrapper: on the main site they are site-wide, here the
      menu and footer keep Law's buttons), first so the page's own button rules below still win;
   2. public/refresh/program.css as it is (hero, campus cards, popular band, marquee), the hero panel in Law's colours;
   3. from public/refresh.css: the type scale (0.5), breadcrumb (1.5), the P8 "Learn More About Outset" band and the
      sections the page shows (P2 video, P3 curriculum, P7 included, P10 summer, P13 FAQ, P15 newsletter);
   4. Law's colours.
   Main site -> Law colours, as on Law's Explore page: dark blue and mid blue (accents, links, the "Learn More" band) are
   Law's brown; turquoise (the hero burst, the Included block) is Law's brown tint and light brown; the hero panel is the
   beige of Law's pages. Text on every coloured block is 4.5:1 or more (part 4 gives the figures).
   A main-site change to these files does not reach Law: copy it over. */
.main-wrapper {
  --_style-guide-2-0---outset-dark-blue: var(--_style-guide-2-0---outset-brown);
  --_style-guide-2-0---outset-mid-blue: var(--_style-guide-2-0---outset-brown);
}

/* ---- 1. from public/refresh.css ---- */
/* 1.6 Buttons: 48px box, 2px radius, 600 label (the 2px border stays so outline variants line up) */
.main-wrapper .button {
  min-height: 3rem;
  padding: .75rem 2.25rem;
  border-radius: 2px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.main-wrapper .button.is-link,
.main-wrapper .button.is-small { min-height: 0; }
.main-wrapper .button.is-link { border-radius: 0; }
@media screen and (min-width: 768px) {
  .main-wrapper .button.is-icon { padding-left: 2.25rem; padding-right: 2.25rem; }
}
@media screen and (max-width: 767px) {
  .main-wrapper .button { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media screen and (max-width: 479px) {
  .main-wrapper .button { padding-left: 1rem; padding-right: 1rem; }
}

/* ---- 2. public/refresh/program.css ---- */
/* 2026 refresh: program page template (src/lib/templates/program-page.js). Spec sections 2.1 P1, P6, P11, P12.
   The campus template reuses the campus cards, logos strip and popular band. */

/* P1 Hero: photo 43%, panel 57%, 768px tall under the 88px bar */
.section_program-hero { padding-top: var(--nav-h); }
.program-hero_component { display: flex; min-height: 48rem; border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
.program-hero_image { position: relative; flex: none; width: 43.33%; overflow: hidden; background-color: var(--_style-guide-2-0---outset-grey); }
.program-hero_image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program-hero_panel {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 4rem 3.25rem;
  background: #e6d7ba url(/refresh/hero-burst-law.svg) 50% / cover no-repeat; /* Law: panel and burst (part 4) */
  color: var(--_style-guide-2-0---outset-soft-black);
  --check-tick: var(--_style-guide-2-0---outset-off-white);
}
.section_program-hero.is-sand .program-hero_panel { background-color: #d7c8af; background-image: url(/refresh/hero-burst-sand.svg); }
.section_program-hero.is-blue .program-hero_panel {
  background-color: #004fa8;
  background-image: url(/refresh/hero-burst-blue.svg);
  color: var(--_style-guide-2-0---outset-off-white);
  --check-tick: #004fa8;
}
.program-hero_content { width: 100%; max-width: 53.5rem; }
.program-hero_chips { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 2.5rem 0 1.5rem; padding: 0; list-style: none; }
.program-hero_chip {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: 0;
  font-family: Caslonionic Web, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.1429;
}
.program-hero_chip svg { flex: none; width: 1.125rem; height: 1.125rem; }
.section_program-hero.is-blue .program-hero_heading { font-size: 4.5rem; line-height: 1; letter-spacing: -.04em; }
.program-hero_intro { max-width: 35.25rem; margin-top: 1.5rem; }
.program-hero_intro p { margin: 0; }
.program-hero_form { max-width: 32rem; margin: 3.5rem 0 0; }
.program-hero_form-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 4rem;
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--_style-guide-2-0---outset-soft-black-tint);
  border-radius: 2px;
  background-color: var(--_style-guide-2-0---white);
}
.program-hero_form-row:focus-within { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
.program-hero_input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 1rem;
  border: 0;
  background: transparent;
  color: var(--_style-guide-2-0---outset-soft-black);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
}
.program-hero_input::placeholder { color: #787880; }
.program-hero_input:focus { outline: none; }
.program-hero_submit.button { flex: none; padding-left: 1.5rem; padding-right: 1.5rem; border-color: var(--_style-guide-2-0---outset-soft-black); background-color: var(--_style-guide-2-0---outset-soft-black); }
.program-hero_form .w-form-done { padding: 1rem; background-color: var(--_style-guide-2-0---white); text-align: left; }
.program-hero_apply.button { display: inline-flex; margin-top: 2.5rem; min-width: 13.4375rem; } /* .button is display:flex, which fills the panel */
/* 992-1199px: the panel is 57% of the window, and a program name at full size ("Anesthesiology" at 76px is 528px) was
   wider than it, so the page scrolled sideways (51px at 1024px). There the name scales with the window; full size from
   1200px. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .program-hero_heading,
  .section_program-hero.is-blue .program-hero_heading { font-size: 6.2vw; }
}
.section_program-hero.is-sand .program-hero_apply.button { border-color: var(--_style-guide-2-0---outset-red-brown); background-color: var(--_style-guide-2-0---outset-red-brown); }
.section_program-hero.is-blue .program-hero_apply.button { border-color: var(--_style-guide-2-0---outset-turquoise); background-color: var(--_style-guide-2-0---outset-turquoise); }
@media screen and (max-width: 991px) {
  .program-hero_component { flex-direction: column; min-height: 0; }
  .program-hero_image { width: 100%; aspect-ratio: 4 / 3; max-height: 50vh; }
  .program-hero_panel { padding: 2.5rem 1.5rem 3rem; }
  .section_program-hero.is-blue .program-hero_heading { font-size: 3.5rem; }
  .program-hero_chips { margin-top: 1.5rem; }
}
@media screen and (max-width: 767px) {
  .section_program-hero.is-blue .program-hero_heading { font-size: 2.75rem; }
  .program-hero_form { margin-top: 2rem; }
  /* phone: field and button stack (the snapshot makes every .button full width below 480px) */
  .program-hero_form-row { flex-wrap: wrap; height: auto; padding: 0; border: 0; background: transparent; }
  .program-hero_form-row:focus-within { outline: none; }
  .program-hero_input { flex-basis: 100%; height: 3.5rem; padding: 0 1rem; border: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); border-radius: 2px; background: var(--_style-guide-2-0---white); }
  .program-hero_input:focus { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
  .program-hero_submit.button { width: 100%; }
}
@media screen and (max-width: 479px) {
  .program-hero_panel { padding: 2rem 1rem 2.5rem; }
  .section_program-hero.is-blue .program-hero_heading { font-size: 2.25rem; }
  .program-hero_submit.button { padding-left: 1rem; padding-right: 1rem; }
  .program-hero_apply.button { width: 100%; }
}

/* P6 / C4 campus cards: full-bleed row, 24px insets */
.section_campus-cards { padding: 5.5rem 1.5rem 4.5rem; }
.campus-cards_heading { margin-bottom: 3rem; text-align: center; }
.campus-cards_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; }
.campus-cards_card { display: flex; flex-direction: column; gap: 1rem; color: var(--_style-guide-2-0---outset-soft-black); text-decoration: none; }
.campus-cards_image { aspect-ratio: 336 / 388; overflow: hidden; border-radius: .5rem; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s; }
.campus-cards_image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.campus-cards_name { margin: 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: 1.3125rem; font-weight: 400; line-height: 1.2; letter-spacing: -.03em; transition: color .2s; }
.campus-cards_card:hover .campus-cards_name,
.campus-cards_card:focus-visible .campus-cards_name { color: var(--_style-guide-2-0---outset-mid-blue); }
.campus-cards_card:hover .campus-cards_image,
.campus-cards_card:focus-visible .campus-cards_image { outline-color: var(--_style-guide-2-0---outset-mid-blue); }
.campus-cards_more { display: flex; justify-content: flex-end; margin-top: 2rem; }
.icon-link_component {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--_style-guide-2-0---outset-soft-black);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none;
}
.icon-link_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--_style-guide-2-0---outset-mid-blue);
  color: var(--_style-guide-2-0---outset-off-white);
  transition: transform .2s;
}
.icon-link_component:hover .icon-link_button { transform: translateX(.25rem); }
@media screen and (max-width: 991px) {
  .campus-cards_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .section_campus-cards { padding: 4rem 0 3.5rem; }
  .campus-cards_heading { padding: 0 1rem; margin-bottom: 2rem; }
  .campus-cards_list { display: flex; gap: 1rem; padding: 0 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .campus-cards_list::-webkit-scrollbar { display: none; }
  .campus-cards_card { flex: none; width: 75%; scroll-snap-align: start; }
  .campus-cards_more { padding: 0 1rem; }
}

/* P11 University logos */
.section_logos { background-color: var(--_style-guide-2-0---outset-off-white); }
.logos_component { display: flex; flex-direction: column; align-items: center; gap: 3rem; padding: 5.5rem 0; text-align: center; }
.logos_heading { max-width: 36rem; }
.logos_row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 4.5rem; margin: 0; padding: 0; list-style: none; }
.logos_item { margin: 0; }
.logos_image { display: block; width: auto; height: 3.75rem; max-width: 13.625rem; object-fit: contain; }
.logos_disclaimer { max-width: 40rem; margin: 0; font-family: Marrsans Web, Arial, sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 1.5556; letter-spacing: -.01em; }
@media screen and (max-width: 767px) {
  .logos_component { gap: 2rem; padding: 4rem 0; }
  .logos_row { gap: 1.5rem 2.5rem; }
  .logos_image { height: 2.75rem; }
  .logos_disclaimer { font-size: 1rem; }
}

/* P12 Popular programs band (reuses .section_tabs for the blue band and its artwork). The text column is never narrower
   than its longest word: at 992-1099px the photo shrinks instead ("Neurosurgery" at 48px is 296px and ran 22px past the
   window at 1024px, so campus and program pages scrolled sideways). */
.tabs-2026_component { display: grid; grid-template-columns: minmax(0, 41.375rem) minmax(min-content, 1fr); align-items: center; gap: 4rem; padding: 1.5rem 1.5rem 1.5rem; }
.tabs-2026_image { aspect-ratio: 662 / 648; overflow: hidden; }
.tabs-2026_image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tabs-2026_content { padding: 2rem 0; }
.tabs-2026_eyebrow { margin-bottom: 1.5rem; color: var(--_style-guide-2-0---outset-dark-blue); }
.tabs-2026_list { margin: 0 0 2.5rem; padding: 0; list-style: none; }
.tabs-2026_list > li { margin: 0; }
.tabs-2026_content .button { display: inline-flex; }
.tabs-2026_link {
  display: inline-block;
  color: var(--_style-guide-2-0---outset-off-white);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.1667;
  letter-spacing: -.03em;
  text-decoration: none;
  transition: color .2s;
}
.tabs-2026_link:hover,
.tabs-2026_link:focus-visible { color: var(--_style-guide-2-0---outset-dark-blue); }
@media screen and (max-width: 991px) {
  .tabs-2026_component { grid-template-columns: 1fr; gap: 2rem; padding: 1rem 1rem 3rem; }
  .tabs-2026_link { font-size: 2.25rem; }
}
@media screen and (max-width: 479px) {
  .tabs-2026_link { font-size: 1.875rem; }
}

/* P4 Marquee: no heading (partial), 3:4 cards */
.section_marquee .vertial-card_marquee { aspect-ratio: 3 / 4; width: 17.375rem; max-width: none; }
@media screen and (max-width: 767px) { .section_marquee .vertial-card_marquee { width: 13rem; min-height: 0; } }

/* ---- 3. from public/refresh.css ---- */
/* Inline email forms (email box + button in one grey bar): the semibold 2026 label is wider, so the button gives the
   field its room back */
.submit_button-wrap .button { padding-left: 1.25rem; padding-right: 1.25rem; }
@media screen and (min-width: 768px) { .hero_form-wrap { max-width: 26rem; } } /* "Email Address" fits beside the brochure button */

/* 0.5 Type scale */
.heading-style-display,
.heading-style-cta,
.heading-style-band,
.heading-style-quote { margin: 0; font-family: Marrsans Web, Arial, sans-serif; font-weight: 600; letter-spacing: -.03em; }
.heading-style-display { font-size: 4.75rem; line-height: .95; }
.heading-style-cta { font-size: 4rem; line-height: 1.125; }
.heading-style-band { font-size: 3rem; line-height: 1.1667; }
.heading-style-quote { font-size: 2.25rem; line-height: 1.2222; }
.heading-style-section { margin: 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: 2.25rem; font-weight: 300; line-height: 1.2222; letter-spacing: -.02em; }
.text-size-body-large { font-family: Marrsans Web, Arial, sans-serif; font-size: 1.125rem; font-weight: 500; line-height: 1.5556; letter-spacing: -.01em; }
.text-style-eyebrow-2026 { font-family: Marrsans Web, Arial, sans-serif; font-size: .75rem; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
@media screen and (max-width: 991px) {
  .heading-style-display { font-size: 3.5rem; }
  .heading-style-cta { font-size: 3rem; }
  .heading-style-band { font-size: 2.5rem; }
}
@media screen and (max-width: 767px) {
  .heading-style-display { font-size: 2.75rem; line-height: 1; }
  .heading-style-cta { font-size: 2.5rem; }
  .heading-style-band { font-size: 2rem; }
  .heading-style-section,
  .heading-style-quote { font-size: 1.75rem; }
}
@media screen and (max-width: 479px) {
  .heading-style-display,
  .heading-style-cta { font-size: 2.25rem; }
  .heading-style-band { font-size: 1.75rem; }
  .heading-style-section { font-size: 1.625rem; }
  .heading-style-quote { font-size: 1.5rem; }
}

/* 1.5 Breadcrumb: <nav aria-label="Breadcrumb"><ol class="breadcrumb_component"><li><a class="breadcrumb_link"> ... */
.breadcrumb_component {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.breadcrumb_component > li { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: inherit; line-height: inherit; }
/* every snapshot chunk sets li and p to 1rem/1.5, which beats a size inherited from the list or wrapper */
.text-size-body-large p,
.text-size-body-large li { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.breadcrumb_component > li + li::before { content: "/"; }
.breadcrumb_link { color: inherit; text-decoration: none; }
.breadcrumb_link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* P8 "Learn More About Outset" band (markup: src/webflow/partials/learn-more-band.html) */
.section_learn-more { background-color: var(--_style-guide-2-0---outset-mid-blue); color: var(--_style-guide-2-0---outset-off-white); }
.learn-more_component { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 11rem; padding-top: 2rem; padding-bottom: 2rem; }
.learn-more_form { flex: 0 1 32rem; margin: 0; }
.learn-more_row {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 4rem;
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--_style-guide-2-0---outset-grey);
  border-radius: 2px;
  background-color: var(--_style-guide-2-0---white);
}
.learn-more_input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 1rem;
  border: 0;
  background: transparent;
  color: var(--_style-guide-2-0---outset-soft-black);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
}
/* the site-wide Webflow embed sets `.w-input { color: inherit }` inline after this file, which turned typed text off-white on
   the white field (found 23 Sep 2026); two classes outrank it */
.section_learn-more .learn-more_input { color: var(--_style-guide-2-0---outset-soft-black); }
.learn-more_input::placeholder { color: #787880; }
.learn-more_input:focus { outline: none; }
.learn-more_row:focus-within { outline: 2px solid var(--_style-guide-2-0---outset-dark-blue); outline-offset: 2px; }
.learn-more_button.button { flex: none; padding-left: 1.5rem; padding-right: 1.5rem; border-color: var(--_style-guide-2-0---outset-soft-black); background-color: var(--_style-guide-2-0---outset-soft-black); }
.section_learn-more .w-form-done { padding: 1rem; background: transparent; color: var(--_style-guide-2-0---outset-off-white); text-align: left; }
.section_learn-more .w-form-fail { margin-top: .5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media screen and (max-width: 767px) {
  .learn-more_component { flex-direction: column; align-items: stretch; padding-top: 2.5rem; padding-bottom: 2.5rem; text-align: center; }
  .learn-more_form { flex-basis: auto; }
  .learn-more_row { flex-wrap: wrap; height: auto; padding: 0; border: 0; background: transparent; justify-content: center; }
  .learn-more_input { flex-basis: 100%; height: 3.875rem; padding: 0 1rem; border: 1px solid var(--_style-guide-2-0---outset-grey); border-radius: 2px; background: var(--_style-guide-2-0---white); }
  .learn-more_button.button { margin-top: .5rem; width: auto; }
}

/* P2 Video */
.section_experience h2.heading-style-h4 { line-height: 1.2222; letter-spacing: -.02em; }
.experience_video { max-width: 65rem; margin-left: auto; margin-right: auto; }

/* P3 2-col with images (curriculum, typical day) */
._2col_content .text-style-eyebrow { color: var(--_style-guide-2-0---outset-mid-blue); font-weight: 500; line-height: 1; letter-spacing: 0; }
._2col_content h2.heading-style-h4 { line-height: 1.2222; letter-spacing: -.02em; }
._2col_content .text-rich-text p { font-size: 1.125rem; font-weight: 500; line-height: 1.5556; letter-spacing: -.01em; }
._2col_subheading .heading-style-h6 { font-family: Caslonionic Web, Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
._2col_content .rich-text_component li { font-size: 1rem; font-weight: 500; line-height: 1.125; letter-spacing: -.02em; } /* the list is a sibling of ._2col_subheading, not inside it */
/* The curriculum partial (src/webflow/partials/program/curriculum.html) carries the main site's Webflow node ids; their
   grid placement is in the main site's CSS chunk (public/webflow/css/69944a3884956dac1bb668be.css), not in Law's, and
   without it the two photos fell into the grid's first columns at 87px. Copied from there: */
#w-node-a0c2f0aa-28ba-e653-93b5-154a6b47c051-1bb668be { grid-area: 1 / 1 / 4 / 5; }
#w-node-a0c2f0aa-28ba-e653-93b5-154a6b47c053-1bb668be { grid-area: 2 / 4 / 5 / 8; }
@media screen and (max-width: 991px) { #w-node-a0c2f0aa-28ba-e653-93b5-154a6b47c055-1bb668be { order: -9999; } }
@media screen and (max-width: 767px) { #w-node-a0c2f0aa-28ba-e653-93b5-154a6b47c050-1bb668be { grid-area: span 1 / span 1 / span 1 / span 1; } }

/* P7 Included */
.section_included:not(.background-color-transparent) { background-color: rgba(0, 180, 185, .66); }
.section_included .included_wrap > h2.heading-style-h4 { font-weight: 400; line-height: 1.2222; letter-spacing: -.02em; }
.included_title .heading-style-h3.is-alt { color: var(--_style-guide-2-0---outset-dark-blue); font-weight: 600; line-height: 1.1667; letter-spacing: -.03em; }
.included_p .text-size-medium { font-weight: 500; line-height: 1.5556; letter-spacing: -.01em; }

/* P10 Summer CTA */
.section_summer .heading-style-h2.is-alt { font-weight: 600; line-height: 1.125; letter-spacing: -.03em; }
.section_summer .text-style-eyebrow { font-weight: 500; line-height: 1; letter-spacing: 0; }
.section_summer .button .icon-embed-xxsmall { display: none; }

/* P13 FAQ: question left, small arrow right */
.faq-item { border-top: 1px solid rgba(0, 115, 245, .35); }
.faq-top {
  flex-direction: row-reverse;
  align-self: stretch;
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.1429;
  letter-spacing: -.02em;
}
.faq-top .faq_arrow { width: .875rem; height: .875rem; }
.faq-top .faq-arrow-img { width: .3125rem; margin-top: 0; }
@media screen and (max-width: 767px) { .faq-top { font-size: 1.125rem; } }

/* P15 Newsletter */
.section_newsletter .heading-style-h2.is-alt { font-weight: 600; line-height: 1.125; letter-spacing: -.03em; }
.section_newsletter .text-style-eyebrow { font-weight: 500; line-height: 1; letter-spacing: 0; }

/* ---- 4. Law's colours ---- */
/* Hero: the main site's light panel in Law's beige, the burst in Law's brown tint at 33% (soft black text 9.2:1 on the
   burst); Apply Now keeps Law's brown button (white 9.9:1). */
/* Included: the main site's turquoise at 66% becomes Law's light brown at 66% over the beige (soft black 8.0:1; the
   brown 36px titles 4.3:1). */
.section_included:not(.background-color-transparent) { background-color: rgba(230, 120, 48, .66); }
/* Summer band: Law's light brown band carries white text at 2.7:1. Here it is brown like the main site's dark band
   (off-white 9.2:1), and its eyebrow, soft black for the light band, is beige (7.0:1). */
.section_summer { background-color: var(--_style-guide-2-0---outset-brown); }
.section_summer .text-color-black { color: var(--_style-guide-2-0---outset-beige); }
.section_summer .opacity_60 { opacity: .8; } /* "takes 2 minutes": off-white at 60% was 4.3:1 on the brown, at 80% 6.4:1 */
/* Popular band: Law's own brown band, where the main site's dark-blue eyebrow and hover would vanish: beige eyebrow
   (7.0:1), light brown hover on the 48px links (3.4:1, large text). */
.tabs-2026_eyebrow { color: var(--_style-guide-2-0---outset-beige); }
.tabs-2026_link:hover,
.tabs-2026_link:focus-visible { color: var(--_style-guide-2-0---outset-lt-brown); }
/* ... and without Law's artwork: its light brown bars sat behind the white 48px links at 2.7:1, under the 3:1 large text
   needs; on the plain brown the links read at 9.2:1. */
.section_tabs-2026 { background-image: none; }
/* FAQ: the main site's blue rules in Law's brown; "View All FAQ" is Law's light brown button with white text (3.0:1), here
   brown (9.9:1) as the main site's dark one is */
.faq-item { border-top-color: rgba(115, 46, 1, .35); }
.section_faq .button { border-color: var(--_style-guide-2-0---outset-brown); background-color: var(--_style-guide-2-0---outset-brown); color: var(--_style-guide-2-0---white); }

/* Hero heading at 992-1199px: the main site sizes it to its longest program name (6.2vw); "Constitutional" and
   "Fundamentals" ran 13px past the window at 1024, so here it is 5.8vw. A word longer than the whole line (none today)
   breaks instead of widening the page. */
@media screen and (min-width: 992px) and (max-width: 1199px) { .program-hero_heading { font-size: 5.8vw; } }
.program-hero_heading { overflow-wrap: anywhere; }