/* Bryan College — built from _src/css. Do not edit in place. */
/* Bryan College — shared component library
   Every class maps to a Symphony DS section/molecule from the Figma working files.
   Page-local overrides live in each page's own styles.css. */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }   /* in-page jumps (PS jump-link -> form) glide */
body {
  margin: 0;
  background: var(--color-background-canvas);
  color: var(--color-text-primary);
  font-family: var(--text-font-family-body-font);
  font-size: var(--text-size-paragraph-md);
  line-height: 1.5;
}
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--text-font-family-headings-font); line-height: 1.2; }
p { margin: 0; }
/* Paragraph spacing is opt-in via .rich-text — a global `p + p` rule silently
   inflates stacked-<p> molecules like stat cards. */
.rich-text p + p { margin-top: var(--text-paragraph-spacing-md); }
ul, ol { margin: 0; padding: 0; }
blockquote, figure { margin: 0; }
a { color: var(--color-link-default); }
address { font-style: normal; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--container-padding-3xs) var(--container-padding-2xs);
  background: var(--color-background-surface);
  color: var(--color-text-inverse);
  font-weight: var(--text-weight-bold);
}
.skip-link:focus { left: 0; }

/* Text fields get the DS Input_Field State=Focus treatment (white bg + crimson border,
   further down) instead of a ring: the gold outline is not in the design system. */
:where(a, button, summary, input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 3px solid var(--color-border-accent);
  outline-offset: 2px;
}

.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;
}

/* ------------------------------------------------------------ dwcqs slots */
/* The ALR swapper keeps the matching sibling (`visibility: visible`) and REMOVES
   the other. With no query string the effective value is the literal `default`,
   so `show="false"` is the digital keeper.
   Hide only the non-default (email) sibling. Hiding BOTH leaves no form at all if
   the shared scripts fail to load; hiding NEITHER (what Bryan's live pages do)
   flashes two stacked forms on every load. `display:none` must not be used here --
   it survives the script's `visibility:visible` and would hide the email form
   from email traffic. */
[data-slot="dwcqs"][data-param-qs-show="true"] { visibility: hidden; }

/* ------------------------------------------------------- surface patterns */
/* The DS paint styles "Light Pattern" and "Warm Pattern" are a solid fill plus a
   diagonal hatch tile at 40% opacity. The tile is the 992px `Pattern/Default`
   component rendered at its authored scalingFactor of 0.3 (= 298px). */
.patterned { position: relative; }
.patterned::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("pattern-diagonal.webp");
  background-repeat: repeat;
  background-size: 298px 298px;
}
.patterned > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------- wrappers */
.section { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); }
.section__wrapper {
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.section--surface { background: var(--color-background-surface); color: var(--color-text-inverse); }
.section--light { background: var(--color-background-light); }
.section--warm { background: var(--color-background-subtle-lighter); }
.section--canvas { background: var(--color-background-canvas); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--container-gap-4xs);
  padding: var(--button-padding-xs) var(--button-padding-2xl);
  border: var(--stroke-width-border) solid var(--color-border-strong);
  border-radius: var(--button-radius-lg);
  background: var(--button-color-bg-primary);
  color: var(--button-color-text-light);
  font-family: var(--text-font-family-body-font);
  font-size: var(--text-size-paragraph-lg);
  font-weight: var(--text-weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out;
}
.btn:hover,
.btn:focus-visible {
  background: var(--color-background-canvas);
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
}

.btn--inverse {
  background: var(--button-color-bg-inverse);
  color: var(--button-color-text-dark);
  border-color: var(--color-border-white);
}
.btn--inverse:hover,
.btn--inverse:focus-visible {
  background: var(--color-border-inverse);
  border-color: var(--color-border-inverse);
  color: var(--button-color-text-dark);
}

/* CTA_Button Size=Standard: 16px text, 12/20 padding. (Major is the .btn default.) */
.btn--sm { font-size: var(--text-size-paragraph-sm); padding: var(--button-padding-xs) var(--button-padding-lg); }
/* WCAG 2.5.5 AA touch target. Figma draws these at 39px; the extra 5px is a
   deliberate deviation, matching what the LandingExport plugin enforces. */
.btn--sm { min-height: 44px; }

.btn__icon {
  flex: 0 0 auto;
  width: var(--icon-size-sm);
  height: 17px;
  display: block;
}
.btn__icon svg { display: block; width: 100%; height: 100%; }
.btn__icon path { fill: currentColor; }

.button-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--container-gap-md);
  max-width: var(--text-width-max-width-large-text);
  width: 100%;
}
/* Centred intros (H2_Text_Block with Intro_Container align=center) centre their CTA too. */
.cards-single__intro .button-container,
.accordion__intro .button-container { justify-content: center; }

/* ----------------------------------------------------------------- header */
.site-header {
  background: var(--color-background-canvas);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
  padding: var(--container-padding-xl) var(--container-padding-sm);
  position: relative;
  z-index: 10;
}
.site-header__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--container-gap-sm);
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.site-header__logo { display: block; flex: 0 0 auto; }
.site-header__logo-img { display: block; width: var(--logo-size-large); height: auto; }
/* Logo Layout=Full-name on desktop; the Short-name wordmark only exists in the Mobile header. */
.site-header__logo-img--mobile { display: none; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--container-gap-sm);
  list-style: none;
}
.site-nav a {
  display: inline-block;
  padding-bottom: var(--container-padding-4xs);
  border-bottom: var(--stroke-width-nav-underline) solid transparent;
  color: var(--color-link-nav-default);
  font-family: var(--text-font-family-body-font);
  font-size: var(--text-size-paragraph-sm);
  font-weight: var(--text-weight-normal);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 300ms ease-out, border-color 300ms ease-out;
}
/* Request Info + Apply stay bold on every page; the current page adds the rule. */
.site-nav a.is-emphasis,
.site-nav a[aria-current="page"] { font-weight: var(--text-weight-bold); }
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--color-text-secondary); border-bottom-color: var(--color-border-strong); }
.site-nav a[aria-current="page"] {
  color: var(--button-color-text-dark);
  border-bottom-color: var(--color-border-strong);
}

/* ------------------------------------------------------- hero (bg image) */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm);
  background: var(--color-background-light);
}
.hero__wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: var(--wrapper-width-md);
  padding: 0 var(--container-padding-5xl) var(--container-padding-5xl);
  background-image: var(--hero-img, none);
  /* Figma image fills authored as a crop (scaleMode STRETCH + imageTransform) set
     --hero-size / --hero-pos inline via sections.figma_crop(); plain FILL fills fall
     back to cover/center. */
  background-position: var(--hero-pos, center);
  background-size: var(--hero-size, cover);
  background-repeat: no-repeat;
}
.hero__wrapper--end { justify-content: flex-end; }
.hero__content {
  flex: 1 1 0;
  min-width: 320px;
  max-width: var(--container-size-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-xs);
  padding: var(--container-padding-4xl) var(--container-padding-xl);
  background: var(--color-background-tan-hsla);
}
.hero__title {
  max-width: var(--text-width-max-width-large-text);
  color: var(--color-text-secondary);
  font-size: var(--text-size-heading-xl);
  font-weight: var(--text-weight-extra-bold);
}
.hero__subhead {
  max-width: var(--text-width-max-width-large-text);
  font-family: var(--text-font-family-headings-font);
  font-size: var(--text-size-heading-md);
  font-weight: var(--text-weight-bold);
  line-height: 1.2;
}
.hero__body { max-width: var(--text-width-max-width-small-text); }
.hero__body strong { font-weight: var(--text-weight-bold); }

/* ------------------------------------------------------------ stat cards */
.stats {
  position: relative;
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-sm);
  background: var(--color-background-surface);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.stats__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.stats__wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--container-gap-md);
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.stat-card {
  flex: 1 1 0;
  min-width: var(--container-size-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--container-gap-2xs);
  text-align: center;
}
.stat-card__value {
  font-family: var(--text-font-family-headings-font);
  font-size: var(--text-size-heading-4xl);
  font-weight: var(--text-weight-extra-bold);
  line-height: 1.2;
  color: var(--color-text-inverse);
  text-transform: uppercase;
}
.stat-card__label {
  max-width: var(--text-width-max-width-large-text);
  color: var(--color-text-gold);
  font-size: var(--text-size-paragraph-md);
  font-weight: var(--text-weight-bold);
  text-transform: uppercase;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .hero__wrapper { padding: 0 var(--container-padding-2xl) var(--container-padding-2xl); }
  /* Tablet (601-1024) has no authored layout. Two-column rows keep their desktop shape, but the
     media column may shrink to the DS Mobile minWidth (240) so the text column stays readable
     at the low end of the range (at 650px it was 262px wide beside a 320px image). */
  .simple-content__media,
  .hero__content,
  .contact__text { min-width: 240px; }
}
@media (max-width: 600px) {
  .site-header__wrapper { flex-direction: column; align-items: flex-start; }
  .site-nav ul { justify-content: flex-start; }
  .hero__wrapper { padding: 0; }
  .hero__content { max-width: none; min-width: 0; padding: var(--container-padding-2xl) var(--container-padding-sm); }
  .hero__title { font-size: var(--text-size-heading-lg); }
  .hero__subhead { font-size: var(--text-size-paragraph-lg); }
  .button-container .btn { width: 100%; }
  .stat-card { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------- simple content (2-col) */
/* Section_Simple_Content — image left, heading/body/CTA right, warm patterned band. */
.simple-content { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); background: var(--color-background-subtle-lighter); }
.simple-content--plain { background: var(--color-background-canvas); }
.simple-content__wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--container-gap-lg);
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.simple-content__media {
  position: relative;
  flex: 1 1 0;
  min-width: 320px;
  align-self: stretch;
  overflow: hidden;
}
.simple-content__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Border_Offset — a hairline white rule inset 20px over the photo. */
.simple-content__media::after {
  content: "";
  position: absolute;
  inset: var(--container-padding-sm);
  border: var(--stroke-width-default) solid var(--color-border-white);
  pointer-events: none;
}
.simple-content__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-xs);
}
.simple-content__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-2xs);
  width: 100%;
}
.section-title {
  max-width: var(--text-width-max-width-large-text);
  color: var(--color-text-muted);
  font-size: var(--text-size-heading-lg);
  font-weight: var(--text-weight-extra-bold);
}
.section-subhead {
  max-width: var(--text-width-max-width-large-text);
  font-family: var(--text-font-family-headings-font);
  font-size: var(--text-size-heading-sm);
  font-weight: var(--text-weight-bold);
  line-height: 1.2;
}
.section-copy { max-width: var(--text-width-max-width-small-text); }
.section-copy strong { font-weight: var(--text-weight-bold); }
/* Figma authors some inline runs at 700 (Montserrat Bold) rather than the usual 600. */
strong.xb { font-weight: var(--text-weight-extra-bold); }

/* ----------------------------------------------------------------- contact */
.contact {
  position: relative;
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-lg);
  background: var(--color-background-light);
  border-top: var(--stroke-width-default) solid var(--color-border-default);
  overflow: hidden;
}
.contact__seal {
  position: absolute;
  top: -1px;
  right: 0;
  bottom: 0;
  aspect-ratio: 726 / 744;
  pointer-events: none;
}
.contact__seal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.contact__wrapper {
  position: relative;
  display: flex;
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.contact__panel {
  flex: 1 1 0;
  max-width: var(--text-width-max-width-large-text);
  min-width: 0;
  padding: var(--container-padding-2xs);
  background: var(--color-background-surface);
}
.contact__inner {
  display: flex;
  align-items: center;
  gap: var(--container-padding-xl);
  padding: var(--container-padding-xl);
  border: var(--stroke-width-default) solid var(--color-border-accent);
  background: var(--color-background-surface);
}
.contact__text {
  flex: 1 1 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-xs);
  color: var(--color-text-inverse);
}
.contact__title {
  max-width: var(--text-width-max-width-large-text);
  font-size: var(--text-size-heading-md);
  font-weight: var(--text-weight-extra-bold);
}
.contact__body { max-width: var(--text-width-max-width-small-text); }
.contact__buttons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-sm);
}
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--container-gap-4xs);
  padding: var(--button-padding-2xs) var(--button-padding-md);
  border-radius: var(--button-radius-lg);
  background: var(--button-color-bg-inverse);
  color: var(--button-color-bg-primary);
  font-size: var(--text-size-paragraph-xs);
  /* Lara: "sweeping -- these buttons should have bolded text". The DS component label is 600,
     but the Get_Guide frame overrides these buttons to 700 and the legacy pages run 700. */
  font-weight: var(--text-weight-extra-bold);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px; /* WCAG 2.5.5 AA; Figma draws 33px */
  transition: background-color 300ms ease-out, color 300ms ease-out;
}
.contact-btn:hover,
.contact-btn:focus-visible { background: var(--color-border-inverse); color: var(--button-color-bg-primary); }
.contact-btn__icon { flex: 0 0 auto; width: 14px; height: 17px; }
.contact-btn__icon svg { display: block; width: 100%; height: 100%; }
.contact-btn__icon path { fill: currentColor; }

@media (max-width: 1024px) {
  .contact__inner { flex-direction: column; align-items: flex-start; }
  .contact__buttons { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .simple-content__wrapper { flex-direction: column; }
  /* DS Device=Mobile variants cap a stacked image at 240px (hero: 180px). */
  .simple-content__media { min-width: 0; aspect-ratio: 4 / 3; max-height: 240px; flex: 0 0 auto; }
  .section-title { font-size: var(--text-size-heading-md); }
  .contact__seal { display: none; }
  .contact__text { min-width: 0; }
  .contact__buttons { flex-direction: column; align-self: stretch; }
  .contact-btn { width: 100%; }
}

/* ------------------------------------------------------------ apply form */
/* Section_Apply_Form_ALR — a 300px photo band that the two-column card
   overlaps by 120px (Figma gap token `container/gap/neg 120`). */
.apply { background: var(--color-background-canvas); }
.apply__band { height: 300px; min-height: 180px; max-height: 400px; overflow: hidden; }
.apply__band img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apply__wrapper {
  width: 100%;
  max-width: var(--wrapper-width-lg);
  margin: -120px auto 0;
  padding: 0 var(--wrapper-padding-sm) var(--wrapper-padding-4xl);
}
.apply__card {
  display: flex;
  align-items: stretch;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.25));
}
.apply__text,
.apply__form {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-xs);
  padding: var(--container-padding-2xl) var(--container-padding-xl);
}
.apply__text { background: var(--color-background-canvas); }
/* align-items: stretch, not flex-start -- the Mautic wrapper divs are flex items and
   would otherwise shrink-to-fit, leaving every field 212px wide. */
.apply__form { background: var(--color-background-subtle-warm); align-items: stretch; }
.apply__title {
  max-width: var(--text-width-max-width-large-text);
  color: var(--color-text-secondary);
  font-size: var(--text-size-heading-lg);
  font-weight: var(--text-weight-extra-bold);
}
.apply__form-title {
  max-width: var(--text-width-max-width-large-text);
  color: var(--color-text-secondary);
  font-size: var(--text-size-heading-md);
  font-weight: var(--text-weight-extra-bold);
}
.apply__body { max-width: var(--text-width-max-width-small-text); }
.apply__body strong { font-weight: var(--text-weight-bold); }
.apply__footnote {
  max-width: var(--text-width-max-width-small-text);
  font-size: var(--text-size-paragraph-sm);
  font-style: italic;
}

/* Large_List — checkmark bullets */
.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-2xs);
  width: 100%;
  max-width: var(--text-width-max-width-large-text);
  padding: var(--container-gap-5xs) 0 var(--container-gap-5xs) var(--container-padding-md);
}
.check-list li {
  display: flex;
  align-items: center;
  gap: var(--container-gap-3xs);
  max-width: var(--text-width-max-width-small-text);
}
.check-list__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 24px;
  display: flex;
  align-items: center;
  color: var(--color-icon-default);
}
.check-list__icon svg { display: block; width: 18px; height: auto; }
.check-list__icon path { fill: currentColor; }

@media (max-width: 600px) {
  .apply__card { flex-direction: column; }
  /* Once the card stacks, the desktop `flex: 1 1 0` puts flex-basis 0 on the BLOCK axis; older
     WebKit collapses the white text box to 0px and the tan form box lands on top of it -- the
     "text disappears when it stacks" report. Same fix as the stacked media further up. */
  .apply__text, .apply__form { flex: 0 0 auto; }
  .apply__wrapper { margin-top: -60px; }
  .apply__band { height: 240px; }    /* Device=Mobile Image_with_Caption maxHeight */
  .apply__title { font-size: var(--text-size-heading-md); }
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--container-padding-md) var(--wrapper-padding-md);
  background: var(--color-background-surface);
  color: var(--color-text-inverse);
}
.site-footer__container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--container-gap-md);
  max-width: var(--wrapper-width-md);
  min-width: 0;
}
.site-footer__logo { display: block; width: var(--logo-size-large); }
.site-footer__logo img { display: block; width: 100%; height: auto; }
.site-footer__address {
  font-size: var(--text-size-paragraph-sm);
  line-height: 1.2;
  text-align: center;
}
.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--container-gap-sm);
  list-style: none;
}
.site-footer__links li { display: flex; align-items: center; }
/* Divider_Bar — a 1x20 vertical hairline between the two links (Figma draws it
   upright; the first build had it rotated, which read as an em dash) */
.site-footer__links li + li::before {
  content: "";
  width: 1px;
  height: 20px;
  margin-right: var(--container-gap-sm);
  background: var(--color-border-white);
}
.site-footer__links a {
  color: var(--color-link-footer);
  font-size: var(--text-size-paragraph-sm);
  font-weight: var(--text-weight-bold);
  line-height: 1.2;
  text-decoration: none;
}
/* Footer_Links State=Hover is visually identical to Default in the DS -- no hover change. */

/* --------------------------------------------------------- Mautic forms */
/* Styled against the markup ACS actually renders (.mauticform-*), not the Figma
   mock. Row spacing lives on each row's own margin-bottom: a `gap` on the parent
   and `+` sibling selectors both fail silently in production markup. */
.mauticform_wrapper { width: 100%; }
.mauticform-innerform { display: block; }

.mauticform-row { display: block; margin: 0 0 var(--container-gap-md); }
.mauticform-row:last-child { margin-bottom: 0; }

/* Labels show by default (the inquiry form is authored with visible labels).
   Required rows get the design's bold "(Required)" suffix -- ACS renders no marker. */
.mauticform-label {
  display: block;
  margin-bottom: var(--container-gap-5xs);
  font-size: var(--text-size-paragraph-xs);
  line-height: 1.5;
}
/* NOTE: do NOT re-add a `content: "(Required)"` pseudo-element here. Mautic's own
   form JS appends that text to the label at runtime, so a CSS marker renders it twice
   on every live page — the local mock only looked right because it was scraped before
   that JS ran. The mock partials now carry the real text instead. */
.mauticform-required > .mauticform-label { font-weight: inherit; }
/* Mautic appends <small class="mauticform-req-label"> (Required)</small> at runtime;
   Figma draws the label 400 and the "(Required)" run 600. */
.mauticform-req-label { font-size: inherit; font-weight: var(--text-weight-bold); }

/* The apply form is authored placeholder-only, so its labels are hidden there
   but kept in the DOM for screen readers. */
.apply__form .mauticform-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mauticform-checkboxgrp-label { display: inline; margin: 0; }

.mauticform-input,
.mauticform-selectbox,
.mauticform-textarea {
  display: block;
  width: 100%;
  padding: var(--container-padding-2xs);
  border: var(--stroke-width-default) solid var(--input-color-border);
  border-radius: var(--container-rounded-corner-3xs);
  background: var(--input-color-bg);
  color: var(--color-text-primary);
  font-family: var(--text-font-family-headings-font);
  font-size: var(--text-size-label-sm);
  line-height: 1.2;
}
.mauticform-input::placeholder { color: var(--input-color-placeholder); opacity: 1; }
.mauticform-input:focus-visible,
.mauticform-selectbox:focus-visible,
.mauticform-textarea:focus-visible { border-color: var(--color-border-strong); }

.mauticform-checkboxgrp-row { display: flex; align-items: flex-start; gap: var(--container-gap-3xs); }
.mauticform-checkboxgrp-checkbox,
.mauticform-radiogrp-radio {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: var(--stroke-width-default) solid var(--input-color-border);
  background: var(--input-color-bg) center / 10px no-repeat;
  cursor: pointer;
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
}
.mauticform-radiogrp-radio { border-radius: 50%; }
.mauticform-checkboxgrp-checkbox:hover,
.mauticform-radiogrp-radio:hover {
  background-color: var(--color-background-canvas);
  border-color: var(--color-border-strong);
}
.mauticform-checkboxgrp-checkbox:checked {
  background-color: var(--color-background-canvas);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.875 13.1839'%3E%3Cpath fill='%23990000' d='M14.2391 0L6.32869 7.91044L2.637 4.21875L0 6.85575L6.32812 13.1839L16.875 2.637L14.2391 0Z'/%3E%3C/svg%3E");
}
.mauticform-radiogrp-radio:checked {
  background-color: var(--color-background-canvas);
  background-image: radial-gradient(circle, var(--color-background-surface) 4.5px, transparent 5px);
}
.mauticform-radiogrp-row { display: flex; align-items: flex-start; gap: var(--container-gap-3xs); }
.mauticform-radiogrp-label { font-size: var(--text-size-paragraph-xs); line-height: 1.5; }
.mauticform-checkboxgrp-label { font-size: var(--text-size-paragraph-xs); line-height: 1.5; }

.mauticform-button-wrapper { margin-top: var(--container-gap-md); }
/* CTA_Button Size=Standard, Color=Primary, Show Icon=True. Mautic renders the button
   with no icon markup, so the Icon_Directional chevrons come from a masked ::before. */
.mauticform-button,
button.mauticform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--container-gap-4xs);
  padding: var(--button-padding-xs) var(--button-padding-lg);
  border: var(--stroke-width-border) solid var(--color-border-strong);
  border-radius: var(--button-radius-lg);
  background: var(--button-color-bg-primary);
  color: var(--button-color-text-light);
  font-family: var(--text-font-family-body-font);
  font-size: var(--text-size-paragraph-sm);
  font-weight: var(--text-weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out;
}
.mauticform-button::before {
  content: "";
  flex: 0 0 auto;
  width: var(--icon-size-sm);
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--icon-directional) center / contain no-repeat;
  mask: var(--icon-directional) center / contain no-repeat;
}
/* Primary State=Hover inverts: white fill, crimson text, crimson stroke. */
.mauticform-button:hover,
.mauticform-button:focus-visible {
  background: var(--color-background-canvas);
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
}
/* Section_Apply_Form_ALR and Section_Apply_Form_BG_Image (CTA_Inline_Form_Submit_Button)
   are the two forms authored with Size=Major. */
.apply__form .mauticform-button,
.apply-bg .mauticform-button {
  font-size: var(--text-size-paragraph-lg);
  padding: var(--button-padding-xs) var(--button-padding-2xl);
}

.mauticform-errormsg { display: block; margin-top: var(--container-gap-5xs); color: var(--color-text-secondary); font-size: var(--text-size-paragraph-xs); }
/* Post-submit success message (forms whose post-action is "message": Not Ready, Deadline).
   Mirrors the legacy stylesheet's green banner so it reads as confirmation, not copy. */
.mauticform-message {
  margin: var(--container-gap-xs) 0;
  padding: var(--container-padding-2xs) var(--container-padding-xs);
  background: #2e7d32;
  color: var(--color-text-inverse);
  font-weight: var(--text-weight-bold);
}
.mauticform-message:empty { display: none; }
.mauticform-message::before { content: "\2713\00a0"; }
.mauticform-field-hidden { display: none; }

/* Honeypot: Mautic ships it as a normal visible row, so hide it here. */
[id$="_nickname_bhpot"],
[id$="_nickname"] { position: absolute !important; left: -9999px !important; }

/* -------------------------------------------------------------- accordion */
/* Section_Accordion_List — native <details> so it works without JS.
   Figma renders every item expanded to show the copy; shipped collapsed, which
   is what the `+` glyph in the authored header bar indicates. */
.accordion { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); background: var(--color-background-subtle-lighter); }
.accordion__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-2xl);
  width: 100%;
  max-width: var(--container-size-xl);
  margin: 0 auto;
}
.accordion__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--container-gap-2xs);
  text-align: center;
}
.accordion__intro .section-title,
.accordion__intro .section-subhead,
.accordion__intro .section-copy { text-align: center; }
.accordion__list { display: flex; flex-direction: column; }

.accordion-item + .accordion-item { margin-top: var(--container-gap-md); }
.accordion-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--container-gap-xs);
  padding: var(--container-padding-xs) var(--container-padding-sm);
  background: var(--color-background-surface);
  color: var(--color-text-inverse);
  font-family: var(--text-font-family-headings-font);
  font-size: var(--text-size-heading-sm);
  font-weight: var(--text-weight-extra-bold);
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}
.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  background: currentColor;
  /* plus glyph, swapped for a minus when the item is open */
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
}
.accordion-item[open] > summary::after {
  -webkit-mask-image: var(--icon-minus);
  mask-image: var(--icon-minus);
}
.accordion-item__panel { border: var(--stroke-width-default) solid var(--card-color-border); border-top: 0; background: var(--card-color-bg); }

.program-row { padding: var(--container-padding-sm); }
.program-row + .program-row { border-top: var(--stroke-width-default) solid var(--color-border-inverse); }
.program-row__title { margin-bottom: var(--container-gap-3xs); font-size: var(--text-size-heading-sm); line-height: 1.2; }
.program-row__title a {
  color: var(--color-link-default);
  font-family: var(--text-font-family-headings-font);
  font-weight: var(--text-weight-bold);
  text-decoration: none;
}
.program-row__title a::after { content: " \2192"; }
/* Display_Title_Link State=Hover is identical to Default in the DS -- no hover change. */
.program-row p { max-width: var(--text-width-max-width-small-text); }

@media (max-width: 600px) {
  .accordion-item > summary { font-size: var(--text-size-paragraph-sm); }
}

/* ------------------------------------------- cards beside a single image */
/* Section_Cards_Single_Image — centred intro, then a column of cards paired
   with one tall photo that spans the whole column. */
.cards-single { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); background: var(--color-background-light); }
.cards-single__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-2xl);
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.cards-single__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--container-gap-2xs);
  text-align: center;
}
.cards-single__intro .section-title,
.cards-single__intro .section-subhead { text-align: center; }
.cards-single__body { display: flex; align-items: stretch; gap: var(--container-gap-md); }
/* Figma: Text_Container 700 / Image_with_Caption 500 (maxWidth 500) */
.cards-single__list { flex: 7 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--container-gap-md); }
.cards-single__media { position: relative; flex: 5 1 0; max-width: 500px; min-width: 0; overflow: hidden; }
.cards-single__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Image_with_Caption Style=Border (every Cards_Single_Image instance) */
.cards-single__media::after {
  content: "";
  position: absolute;
  inset: var(--container-padding-sm);
  border: var(--stroke-width-default) solid var(--color-border-white);
  pointer-events: none;
}

.info-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-3xs);
  padding: var(--container-padding-sm);
  background: var(--card-color-bg);
  box-shadow: var(--shadow-container);   /* H3_Text_Block DROP_SHADOW 0 0 10 @25% */
}
.info-card__title {
  color: var(--color-text-secondary);
  font-size: var(--text-size-heading-md);
  font-weight: var(--text-weight-extra-bold);
  line-height: 1.2;
}
.info-card p strong { font-weight: var(--text-weight-bold); }

/* --------------------------------------------------------- testimonial */
/* Section_Testimonial_Image — photo left, quote card right with the DS's
   heavy 20px side rules and 4px top/bottom rules in tan. */
.testimonial { padding: var(--wrapper-padding-3xl) 0; background: var(--color-background-canvas); }
.testimonial__wrapper { display: flex; align-items: stretch; }
.testimonial__media { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.testimonial__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.testimonial__media::after {
  content: "";
  position: absolute;
  inset: var(--container-padding-sm);
  border: var(--stroke-width-default) solid var(--color-border-white);
  pointer-events: none;
}
.testimonial__quote {
  flex: 1 1 0;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--container-padding-md) - var(--stroke-width-divider))
           calc(var(--container-padding-md) - var(--stroke-width-quote));
  background: var(--color-background-subtle-lighter);
  border-top: var(--stroke-width-divider) solid var(--color-border-tan);
  border-bottom: var(--stroke-width-divider) solid var(--color-border-tan);
  border-left: var(--stroke-width-quote) solid var(--color-border-tan);
  border-right: var(--stroke-width-quote) solid var(--color-border-tan);
}
.testimonial__inner {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--container-padding-3xs);
  margin: 0;
  color: var(--color-text-quote);
}
.testimonial__mark { width: var(--icon-size-2xl); color: var(--color-icon-dark-gold); }
.testimonial__mark svg { display: block; width: 100%; height: auto; }
.testimonial__mark path { fill: currentColor; }
.testimonial__mark--close { align-self: flex-end; transform: rotate(180deg); }
.testimonial__text {
  display: flex;
  flex-direction: column;
  gap: var(--container-padding-sm);
  padding: var(--container-padding-xl) var(--container-padding-md);
}
.testimonial__text p:first-child {
  font-family: var(--text-font-family-serif-font);
  font-size: var(--text-size-heading-md);
  font-weight: var(--text-weight-bold);
  line-height: 1.2;
}
.testimonial__cite { font-size: var(--text-size-paragraph-sm); font-style: normal; }

/* --------------------------- simple content, inverse (crimson + seal) --- */
.simple-content--inverse {
  position: relative;
  background: var(--color-background-inverse);
  overflow: hidden;
}
.simple-content--inverse .simple-content__wrapper { position: relative; gap: var(--container-gap-lg); }
.simple-content--inverse__seal {
  position: absolute;
  right: 0;                              /* Figma: seal is right-flush (x 903->1600) */
  top: 0;
  bottom: 0;
  width: 697px;
  pointer-events: none;
}
.simple-content--inverse__seal img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Border_Container: tan panel holding a hairline-crimson-ruled text block */
.simple-content--inverse .simple-content__text {
  padding: var(--container-padding-xs);
  background: var(--color-background-subtle-light);
  gap: 0;
}
.simple-content--inverse__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-xs);
  width: 100%;
  padding: var(--container-padding-xl);
  border: var(--stroke-width-default) solid var(--color-border-strong);
}

@media (max-width: 1024px) {
  .cards-single__body { flex-direction: column; }
  .cards-single__media { aspect-ratio: 4 / 3; max-height: 240px; }
  .testimonial__wrapper { flex-direction: column; }
  .testimonial__media { aspect-ratio: 16 / 9; max-height: 240px; }
  /* Once the row stacks, `flex: 1 1 0` sets flex-basis on the BLOCK axis and
     collapses the photo to 0px, which also defeats aspect-ratio. */
  .testimonial__media,
  .cards-single__media { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .testimonial__quote { min-width: 0; }   /* DS Mobile keeps the 20px side rules */
  .testimonial__text p:first-child { font-size: var(--text-size-paragraph-lg); }
  .testimonial__media { aspect-ratio: 3 / 2; }   /* Device=Mobile Image_with_Caption 360x240 */
  .simple-content--inverse__seal { display: none; }
}

/* Mautic emits first/last name as `mauticform-row-partial-half`; they must pair
   on one line. Floats are what the platform expects here -- a flex parent would
   have to wrap every row, which the rendered markup does not give us. */
.mauticform-innerform { overflow: hidden; }
.mauticform-row-partial-half {
  float: left;
  width: calc(50% - (var(--container-gap-2xs) / 2));
}
.mauticform-row-partial-half + .mauticform-row-partial-half { float: right; }
.mauticform-row-partial-half + .mauticform-row-partial-half + .mauticform-row { clear: both; }

.mauticform-selectbox {
  appearance: none;
  padding-right: calc(var(--container-padding-2xs) + var(--icon-size-lg));
  background-image: var(--icon-chevron-down);
  background-repeat: no-repeat;
  background-position: right var(--container-padding-2xs) center;
  background-size: 14px auto;
}

/* ================================================= paid search sections === */

/* ?thanks=true state. Form 80 redirects back to the same page with ?thanks=true; the ALR
   template JS turns every query param into a body class (thanks-true), and -- exactly as the
   legacy paid-search stylesheet does -- these wrappers swap the initial content for the
   thanks content. The thanks sections are the Figma *_Thanks_LP frames. */
.lp-thanks { display: none; }
.thanks-true .lp-thanks { display: block; }
.thanks-true .lp-initial { display: none; }

/* Header_No_Nav — logo only, centred; paid-search pages carry no nav. */
.site-header--no-nav .site-header__wrapper { justify-content: center; }

/* Section_Inquiry_Form_ALR — copy left, a white card holding a photo and the
   inquiry form right. This carries the page's H1. */
.inquiry { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); background: var(--color-background-light); }
.inquiry__wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--container-gap-2xl);
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.inquiry__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-xs);
}
.inquiry__title {
  max-width: var(--text-width-max-width-large-text);
  color: var(--color-text-secondary);
  font-size: var(--text-size-heading-xl);
  font-weight: var(--text-weight-extra-bold);
}
.inquiry__list {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-2xs);
  max-width: var(--text-width-max-width-small-text);
  padding-left: var(--container-padding-md);
  list-style: disc;
}
.inquiry__list li { padding-left: var(--container-gap-4xs); }

.inquiry__card {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--container-size-lg);
  background: var(--card-color-bg);
}
.inquiry__media { position: relative; aspect-ratio: 400 / 133; overflow: hidden; }
.inquiry__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inquiry__media--border::after {
  content: "";
  position: absolute;
  inset: var(--container-gap-2xs);
  border: var(--stroke-width-default) solid var(--color-border-white);
  pointer-events: none;
}
.inquiry__form { padding: var(--container-padding-sm); }

/* Section_Paid_Search_Jump_Link_ALR — tan band with a centred white card whose
   CTA jumps back to the inquiry form at the top of the page. */
.jump-link { padding: var(--wrapper-padding-4xl) var(--container-padding-md); background: var(--color-background-subtle-warm); }
.jump-link__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-md);
  width: 100%;
  max-width: var(--container-size-xl);
  margin: 0 auto;
  padding: var(--container-padding-lg);
  background: var(--card-color-bg);
}
.jump-link__card .button-container { margin-top: var(--container-gap-5xs); }

@media (max-width: 1024px) {
  .inquiry__wrapper { flex-direction: column; align-items: stretch; }
  .inquiry__card { max-width: none; }
}
@media (max-width: 600px) {
  .inquiry__title { font-size: var(--text-size-heading-lg); }
  .inquiry__media { aspect-ratio: auto; height: 240px; }   /* DS Mobile Image_with_Caption 360x240 */
}

/* Paid-search pages render program names unlinked, so they take the heading
   colour without link affordances. */
.program-row__title--plain { color: var(--color-text-secondary); font-family: var(--text-font-family-headings-font); font-weight: var(--text-weight-bold); }

/* Two 142px name fields at 375px is too cramped to type in; neither Figma file
   authors a mobile frame for this form, so stack them below 480px. */
@media (max-width: 480px) {
  .mauticform-row-partial-half,
  .mauticform-row-partial-half + .mauticform-row-partial-half { float: none; width: 100%; }
}


/* ============================================ student-journey sections === */

/* Section_Hero_Image reuses .simple-content with the Light Pattern surface. */
.simple-content--light { background: var(--color-background-light);
  padding-block: var(--wrapper-padding-4xl); }
.section-title--page { font-size: var(--text-size-heading-xl); }

/* Section_Hero_Simple - flat crimson band, copy only. */
.hero-simple {
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-sm);
  background: var(--color-background-surface);
  color: var(--color-text-inverse);
}
.hero-simple__wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--container-gap-xs);
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.hero-simple__title {
  max-width: var(--text-width-max-width-large-text);
  /* `{contactfield=firstname}` has no break opportunity and overflows at 375px;
     a real long first name would do the same once Mautic substitutes it. */
  overflow-wrap: anywhere;
  font-size: var(--text-size-heading-xl);
  font-weight: var(--text-weight-extra-bold);
}
.hero-simple__subhead {
  max-width: var(--text-width-max-width-large-text);
  font-family: var(--text-font-family-headings-font);
  font-size: var(--text-size-heading-md);
  font-weight: var(--text-weight-bold);
  line-height: 1.2;
}
.hero-simple .rich-text { max-width: var(--text-width-max-width-small-text); }

/* Section_Subsection_Image - intro then a 2-up grid of tan program cards. */
.subsection { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); background: var(--color-background-canvas); }
.subsection__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-lg);
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.subsection__intro { display: flex; flex-direction: column; gap: var(--container-gap-4xs); max-width: var(--text-width-max-width-small-text); }
.subsection__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--container-gap-md); }
.subsection-card {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-4xs);
  padding: var(--container-padding-2xl);
  background: var(--color-background-subtle-light);
}
.subsection-card__title { color: var(--color-text-secondary); font-size: var(--text-size-heading-sm); font-weight: var(--text-weight-bold); }
.subsection-card__subhead { font-weight: var(--text-weight-bold); }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--container-gap-4xs);
  margin-top: auto;
  padding-top: var(--container-padding-3xs);
  min-height: 44px; /* WCAG 2.5.5 AA */
  color: var(--color-text-secondary);
  font-size: var(--text-size-paragraph-sm);
  font-weight: var(--text-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
}
/* CTA_Link_with_Icon has no hover reaction in the DS -- no hover change. */
.link-arrow__icon { flex: 0 0 auto; width: 16px; height: 12px; }
.link-arrow__icon svg { display: block; width: 100%; height: 100%; }
.link-arrow__icon path { fill: currentColor; }

/* Section_Image_Cards - crimson band, centred white cards. */
.image-cards { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); background: var(--color-background-surface); color: var(--color-text-inverse); }
.image-cards__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--container-gap-lg);
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
}
.image-cards__intro { display: flex; flex-direction: column; align-items: center; gap: var(--container-gap-4xs); text-align: center; }
.image-cards__heading { font-size: var(--text-size-heading-lg); font-weight: var(--text-weight-extra-bold); }
.image-cards__subhead { max-width: var(--text-width-max-width-small-text); font-weight: var(--text-weight-bold); }
.image-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--container-gap-md); width: 100%; }
.image-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--container-gap-3xs);
  padding: var(--container-padding-2xl);
  background: var(--color-background-canvas);
  color: var(--color-text-primary);
  text-align: center;
}
.image-card__title { color: var(--color-text-secondary); font-size: var(--text-size-heading-sm); font-weight: var(--text-weight-bold); }
.image-card__display { font-weight: var(--text-weight-bold); }
.image-card__body { flex: 1 1 auto; }

/* Section_Get_Guide_Form_ALR - guide art left, crimson-topped form card right. */
.guide-form { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); background: var(--color-background-light); }
.guide-form__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1000px;                     /* Figma Wrapper maxWidth 1000 on this section */
  margin: 0 auto;
}
/* Figma: a 550px art column tucked behind the card, 257px of it showing. */
.guide-form__media { flex: 0 0 55%; max-width: 550px; }
.guide-form__media img { display: block; width: 100%; height: auto; }
.guide-form__card { position: relative; flex: 1 1 0; min-width: 0; margin-left: -29.3%; background: var(--color-background-canvas); box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.guide-form__copy {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-4xs);
  padding: var(--container-padding-2xl);
  background: var(--color-background-surface);
  color: var(--color-text-inverse);
}
.guide-form__title { font-size: var(--text-size-heading-lg); font-weight: var(--text-weight-extra-bold); }
.guide-form__subhead { font-weight: var(--text-weight-bold); }
.guide-form__fields { padding: var(--container-padding-2xl); }

/* Section_Request_Info_Form_ALR - photo band above a crimson body, card right. */
.request { position: relative; background: var(--color-background-surface); color: var(--color-text-inverse); }
.request__band { width: 100%; max-height: 392px; overflow: hidden; }
.request__band img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Figma: Wrapper sits 120px up into the photo band (gap -120), the section pads 120 below,
   and the Intro_Container (padding 100 top/bottom) is centred against the form card. The
   negative margin lives on the WRAPPER so the intro and card share one flex line. */
.request__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--container-gap-2xl);
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: calc(var(--wrapper-padding-4xl) * -1) auto 0;
  padding: 0 0 var(--wrapper-padding-4xl);
}
.request__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--container-gap-4xs); padding-block: 100px; }
.request__title { font-size: var(--text-size-heading-xl); font-weight: var(--text-weight-extra-bold); }
.request__subhead { font-family: var(--text-font-family-headings-font); font-size: var(--text-size-heading-md); font-weight: var(--text-weight-bold); line-height: 1.2; }
.request__body { max-width: var(--text-width-max-width-small-text); }
.request__card {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--container-padding-lg);   /* Figma Form_Container padding 28 */
  background: var(--color-background-canvas);
  color: var(--color-text-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* Section_Apply_Form_BG_Image and Section_Not_Ready_Form_ALR - a white card
   over a full-bleed photo. Same shape, different card alignment. */
.apply-bg, .not-ready { position: relative; isolation: isolate; }
.apply-bg__bg, .not-ready__bg { position: absolute; inset: 0; z-index: -1; }
.apply-bg__bg img, .not-ready__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apply-bg__wrapper, .not-ready__wrapper {
  display: flex;
  width: 100%;
  max-width: var(--wrapper-width-md);
  margin: 0 auto;
  padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm);
}
.not-ready__wrapper { justify-content: center; }
.apply-bg__card, .not-ready__card {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-3xs);
  width: 100%;
  padding: var(--container-padding-2xl);
  background: var(--color-background-canvas);
}
/* Figma: Apply_Form_BG_Image Text_Container 700 wide, padding 30/28;
   Not_Ready_Form_ALR Wrapper 800 wide, Content_Container padding 28. */
.apply-bg__card { max-width: 700px; padding: var(--container-padding-xl) var(--container-padding-lg); }
.not-ready__card { max-width: 800px; padding: var(--container-padding-lg); }
.apply-bg__copy, .not-ready__copy { display: flex; flex-direction: column; gap: var(--container-gap-4xs); }
.apply-bg__title, .not-ready__title { color: var(--color-text-secondary); font-size: var(--text-size-heading-lg); font-weight: var(--text-weight-extra-bold); }
.not-ready__subhead { font-family: var(--text-font-family-headings-font); font-size: var(--text-size-heading-sm); font-weight: var(--text-weight-bold); line-height: 1.2; }
.apply-bg__footnote { font-size: var(--text-size-paragraph-sm); font-style: italic; }

/* Section_Deadline_Form_ALR - tan band, centred white card. */
.deadline {
  display: flex;
  justify-content: center;
  padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm);
  background: var(--color-background-subtle-warm);
}
.deadline__card {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap-4xs);
  width: 100%;
  max-width: 800px;                      /* Figma Deadline_Form_ALR Wrapper 800, padding 28 */
  padding: var(--container-padding-lg);
  background: var(--color-background-canvas);
}
.deadline__title { color: var(--color-text-muted); font-size: var(--text-size-heading-md); font-weight: var(--text-weight-extra-bold); }
.deadline__subhead { font-weight: var(--text-weight-bold); }

@media (max-width: 1024px) {
  .subsection__grid, .image-cards__grid { grid-template-columns: minmax(0, 1fr); }
  .guide-form__wrapper { flex-direction: column; }
  .guide-form__media { flex: 0 0 auto; max-width: 320px; }
  .guide-form__card { margin-left: 0; margin-top: calc(var(--container-gap-md) * -1); width: 100%; }
  .request__wrapper { flex-direction: column; margin-top: 0; padding: 0 20px 56px; gap: 0; }
  .request { padding: 0; }
  .request__band { height: 240px; max-height: 240px; }
  .request__copy { padding-block: 20px; }
  .request__card { padding: 24px; }
  .request__copy { padding-block: 0; }
  .request__card { width: 100%; }
}
@media (max-width: 600px) {
  .apply-bg__card, .not-ready__card { max-width: none; }
  /* Not_Ready: the DS's only Mobile variant (Layout=Headline Over Image) sets the intro
     directly over the photo -- unreadable with a real image, so the desktop card is kept
     on mobile (the same shape Apply_Form_BG_Image uses). Flagged for design. */
  .hero-simple__title, .request__title { font-size: var(--text-size-heading-lg); }
}


/* Image Pos=Right on the testimonial and the Color=Dark band (Figma variant axis). */
.testimonial--media-right .testimonial__wrapper { flex-direction: row-reverse; }
.simple-content--inverse-media-left .simple-content__wrapper { flex-direction: row-reverse; }
/* Section_Hero_Image is Color=Pattern (#faf9f7 + hatch) on the 56/20 padding step —
   NOT the #f0f1f3 Light surface it was first built with. */
.simple-content--heroimg {
  background: var(--color-background-subtle-lighter);
  padding-block: var(--wrapper-padding-4xl);   /* Figma Section_Hero_Image: 120px */
}

/* ------------------------------------------------ tablet low end (601-767) --- */
/* The DS tablet mode (601-1024) only switches token values; it has no layouts. Below 768px
   the two-column content rows and the Apply card no longer fit beside their media (the
   text column fell to ~260px at 650px), so they stack here. Everything Device=Mobile
   authors -- paddings, header band, image caps -- still switches at 600. */
@media (max-width: 767px) {
  .simple-content__wrapper,
  .simple-content--inverse-media-left .simple-content__wrapper { flex-direction: column; }
  .simple-content__media { min-width: 0; aspect-ratio: 16 / 9; max-height: 360px; flex: 0 0 auto; }
  .simple-content__text  { order: 0; }
  .simple-content__media { order: 1; }
  .apply__card { flex-direction: column; }
  .apply__text, .apply__form { flex: 0 0 auto; }
}

/* ==================================================== Device=Mobile ===== */
/* Breakpoints follow the DS library's min/max-breakpoint tokens: mobile 0-600,
   tablet 601-1024, desktop 1025+ (the same values the Chicago State export adopted). */
/* The DS section components carry a `Device: [Desktop | Mobile]` axis and the
   Mobile variants are authored at 400px. Everything below is read from those
   variants, not invented. There is NO Tablet variant, so 768–1023px stays an
   interpolation of Desktop (the stacking rules further up).
   Figma mobile section padding is 48px block / 16px inline unless noted. */
@media (max-width: 600px) {
  .hero,
  .simple-content,
  .cards-single,
  .subsection,
  .image-cards,
  .guide-form,
  .accordion { padding: 48px 16px; }
  .testimonial { padding: 48px 20px; }          /* Full Width variant insets on mobile */
  /* SJ-only sections read from their own Device=Mobile variants — these use the
     56/20 step, not the 48/16 one the Explore sections use. */
  .guide-form,
  .subsection,
  .inquiry,
  .simple-content--heroimg,
  .simple-content--light { padding: 56px 20px; }
  .testimonial--media-right .testimonial__wrapper,
  .simple-content--inverse-media-left .simple-content__wrapper { flex-direction: column; }
  .apply-bg__wrapper { padding: 56px 26px; }
  .contact     { padding: 56px 26px; }
  .stats       { padding: 48px 16px; }

  /* Header Device=Mobile — Wrapper flips to VERTICAL; Logo_Container is a crimson
     400x75 band (padding 20) holding the white Short-name wordmark (240x35), then a
     centred Nav_Container 57px tall. Read from Header_Student_Journey / Header_No_Nav. */
  .site-header { padding: 0; }
  .site-header__wrapper { flex-direction: column; gap: 0; }
  .site-header__logo {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px;
    background: var(--color-background-surface);
  }
  .site-header__logo-img--desktop { display: none; }
  .site-header__logo-img--mobile { display: block; width: 240px; height: 35px; }
  .site-nav { width: 100%; padding: 20px 0; }
  .site-nav ul { justify-content: center; gap: 10px; }
  .site-nav a { font-size: var(--text-size-paragraph-xs); }   /* Mobile nav labels sit 17px tall = 14px */

  /* Hero — Mobile stacks Image_with_Caption ABOVE Content_Container, so the art
     stops being a background behind the card and becomes a block above it. */
  .hero__wrapper {
    flex-direction: column;
    padding: 0;
    background-image: none;
  }
  .hero__wrapper::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 180px;                 /* Device=Mobile Image_with_Caption maxHeight */
    background-image: var(--hero-img, none);
    background-size: cover;
    background-position: var(--hero-focal, center);
  }
  .hero__wrapper--end { justify-content: flex-start; }
  .hero__content { max-width: none; padding: 40px 26px; gap: 14px; }

  /* Simple content — Mobile puts H2_Text_Block FIRST and the image after,
     whatever Image Pos says on Desktop. */
  .simple-content__wrapper { gap: 22px; }
  .simple-content__text  { order: 0; gap: 14px; }
  .simple-content__media { order: 1; }
  .simple-content--inverse .simple-content__text  { order: 0; }
  .simple-content--inverse .simple-content__media { order: 1; }
  /* Color=Dark Device=Mobile: Wrapper gap 22 (same as Pattern) and the tan
     Border_Container drops to 16px — beats the desktop --inverse gap of 28. */
  .simple-content--inverse .simple-content__wrapper { gap: 22px; }
  .simple-content--inverse__panel { padding: 16px; }

  /* Cards + single image — Mobile puts the image FIRST, cards after. */
  .cards-single__wrapper { gap: 24px; }
  .cards-single__intro { gap: 10px; }
  .cards-single__body { flex-direction: column; gap: 16px; }
  .cards-single__media { order: 0; }
  .cards-single__list  { order: 1; }

  /* Testimonial — quote card padding 24 -> 20, inner gap 30 -> 26 */
  .testimonial__quote { padding: 20px; }
  .testimonial__inner { gap: 26px; }

  /* Apply form — Text_Container / Form_Container padding 36/30 -> 30 and 30/26 */
  .apply__wrapper { padding-inline: 20px; padding-bottom: 56px; }
  .apply__text  { padding: 30px; gap: 14px; }
  .apply__form  { padding: 30px 26px; gap: 14px; }

  /* Footer — Link Container flips to VERTICAL and the divider bar drops out */
  .site-footer { padding: 20px; }
  .site-footer__container { gap: 18px; }
  .site-footer__links { flex-direction: column; gap: 10px; }
  .site-footer__links li + li::before { content: none; }
}

/* Input_Field State=Hover, read from the prototype: background #f0f1f3 -> #ffffff and
   the 1px border #9a9a9a -> #990000. Applied to focus too, for keyboard parity. */
.mauticform-input:hover,
.mauticform-input:focus,
.mauticform-selectbox:hover,
.mauticform-selectbox:focus,
.mauticform-textarea:hover,
.mauticform-textarea:focus {
  background-color: var(--color-background-canvas);   /* -color, not the shorthand: the select's
                                                         chevron is a background-image and the
                                                         shorthand was wiping it on hover/focus */
  border-color: var(--color-border-strong);
}

@media (max-width: 600px) {
  /* Section_Get_Guide_Form_ALR Device=Mobile stacks Intro, then the guide art,
     then the form — the art sits BETWEEN them, not above the whole card. */
  .guide-form__wrapper { flex-direction: column; }
  .guide-form__card { display: contents; }
  .guide-form__copy   { order: 0; padding: 26px; background: none; color: var(--color-text-primary); }
  .guide-form__title  { color: var(--color-text-secondary); }
  .guide-form__media  { order: 1; max-width: none; padding-inline: 20px; height: 180px; overflow: hidden; }
  .guide-form__media img { height: 100%; object-fit: cover; object-position: top; }
  .guide-form__fields { order: 2; padding: 26px; background: var(--color-background-canvas); }
  .subsection__wrapper { gap: 24px; }
  .subsection__intro { gap: 14px; }
  .request__wrapper { padding-inline: 20px; }
  .request__card { padding: 24px; }
}