/* styles.css -- Yale School of Management, Executive Education (YGELP)
   Breakpoints match tokens.css and the design system's own min/max-breakpoint
   variables: mobile 0-600, tablet 601-1024, desktop 1025+.
   Media queries are ordered widest-first so the narrower query wins the cascade. */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Every hover/focus surface animates -- design's code standard (round-1 comment,
   2026-09-16); the DS prototype's first easing option. Pseudo-elements carry the arrow
   shafts and nav underline, so they are listed too. */
a, button, summary, .btn, .btn__arrow, .arrow__shaft, .arrow__head, .cta-link, .cta-link__arrow,
.contact-btn, .contact-btn__icon, .journey-nav__link::before, .journey-nav__link::after,
.mauticform-button, .mauticform-button::after, .mauticform-input, .mauticform-selectbox,
.mauticform-radiogrp-radio, .mauticform-checkboxgrp-checkbox, .video-card__play path,
.accordion__icon, .accordion__icon::before, .accordion__icon::after {
  transition: all 0.25s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  a, button, summary, .btn, .btn__arrow, .arrow__shaft, .arrow__head, .cta-link, .cta-link__arrow,
  .contact-btn, .journey-nav__link::before, .journey-nav__link::after, .mauticform-button,
  .mauticform-button::after, .video-card__play path, .accordion__icon::before, .accordion__icon::after {
    transition: none;
  }
}
body {
  margin: 0;
  min-height: 100vh; display: flex; flex-direction: column;   /* footer at the viewport bottom on short pages */
  background: var(--color-background-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-body);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
/* The UA default for <strong>/<b> is `bolder`, which is RELATIVE: inside an 800 heading it
   computes to 900, a weight neue-haas-unica does not have, and the browser fakes it
   (design, 2026-09-21: "the extra-bold weight for the sans-serif font is 800"). Body copy
   keeps the DS bold token; anything already carrying a heading weight inherits it. */
strong, b { font-weight: var(--text-weight-bold); }
h1 strong, h2 strong, h3 strong, h4 strong, .t-h1 strong, .t-h2 strong, .t-h3 strong,
.t-display-sm strong, .t-subhead strong, .t-subhead-sm strong, .t-subhead-lg strong,
.stat-card__value strong, .stat-card__desc strong, .accordion__lead strong,
.journey-nav__link strong, .btn strong, .cta-link strong { font-weight: inherit; }
img, svg, video, iframe { max-width: 100%; }
img, svg { height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-link-default); }
button { font: inherit; }

/* ---------- self-hosted brand serif ---------- */
@font-face { font-family: "YaleNew"; src: url("fonts/YaleNew-Roman.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "YaleNew"; src: url("fonts/YaleNew-Bold.woff2") format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "YaleNew"; src: url("fonts/YaleNew-Italic.woff2") format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "YaleNew"; src: url("fonts/YaleNew-BoldItalic.woff2") format("woff2");
             font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- a11y ---------- */
.skip-link {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: var(--container-padding-md); top: var(--container-padding-md);
  width: auto; height: auto; z-index: 100;
  padding: var(--container-padding-3xs) var(--container-padding-sm);
  background: var(--color-background-inverse); color: var(--color-text-inverse);
  font-family: var(--font-headings); font-weight: var(--text-weight-extra-bold);
  text-decoration: none;
}
:focus-visible { outline: 3px solid var(--button-color-focus-ring); outline-offset: 2px; }
/* Text fields and selects show the DS Input_Field State=Focus (white fill, 2px #000f9f
   stroke, identical to Hover) and nothing else -- the ring token is button/color/focus-ring.
   Stacking the ring on the stroke drew "extra border on focus" from design on Bryan. */
.mauticform-input:focus-visible, .mauticform-selectbox:focus-visible, textarea:focus-visible { outline: none; }

/* ---------- shared layout ---------- */
.wrapper { width: 100%; max-width: var(--wrapper-width-md); margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  background: var(--color-background-canvas);
  padding: var(--container-padding-3xl) var(--wrapper-padding-md) var(--container-padding-xl);
  display: flex; justify-content: center;
}
.site-header__wrapper {
  flex: 1 0 0; max-width: var(--wrapper-width-md);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  row-gap: var(--container-gap-3xs);
  padding-bottom: var(--container-padding-lg);
  /* Figma draws this rule as an INSIDE stroke, so it must not add to the box.
     A CSS `border` would inflate the header 162.913 -> 167px and drift every
     section below it. See feedback_figma_inside_stroke_vs_css_border. */
  box-shadow: inset 0 calc(-1 * var(--stroke-width-headline)) 0 var(--color-border-black);
}
.site-header__logo { display: block; flex-shrink: 0; }
/* Two logo assets, one shown per breakpoint: the DS Header Device=Mobile variant swaps
   the 500x65 Full-name logo for the 180x110 Short-name stack (Logo - DNE 21026:11985),
   rendered at 160px. Both are emitted so the swap is CSS-only. */
.site-header__logo-img--full { width: 500px; max-width: 100%; height: auto; }
.site-header__logo-img--short { display: none; }

/* ---------- journey nav ----------
   Underline encodes journey position, read from Figma across all 7 page headers:
   6px dark = current page, 4px dark = step already passed, 6px light = upcoming. */
.journey-nav__list {
  display: flex; align-items: center; gap: var(--container-gap-sm);
  padding-block: var(--container-padding-2xs);
}
.journey-nav__link {
  display: inline-block; position: relative;
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-paragraph-sm);
  line-height: var(--text-leading-tight);
  color: var(--button-color-text-dark);
  text-decoration: none; white-space: nowrap;
}
/* Nav_Single_Item - DNE (DS) authors FOUR states and each page carries the one an item
   should use in componentProperties (build/nav_states.py -- never inferred).
   Geometry comes from each state's absoluteRenderBounds, i.e. what Figma actually PAINTS:

     Default      renders NOTHING (the node is visible:true with a 4px stroke, but has no
                  render bounds -- design: "Explore and Get Guide ... should not have any
                  borders" when not active or hovered)
     Current      6px #121212, flush under the label
     Emphasized   6px #bec8e0, flush under the label -- Request Info and Apply only
     Hover        4px #121212, flush under the label (same top as the bar it replaces)

   An earlier pass derived offsets from the LINE's bounding box plus a centred stroke and
   put every bar ~3px too low, and drew a bar on Default items that the design never
   paints. The hover bar grows up from its bottom edge ("animation from the bottom").
   The bar sits a FIXED 19px below the label top at every size -- the mobile variant keeps
   19px with a 14px label, so `top: 100%` (flush under a 16.8px text box) put every
   mobile bar 2.2px high. */
.journey-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; top: 19px;
  height: 4px; background: var(--color-text-primary);
  transform: scaleY(0); transform-origin: bottom;          /* Default: nothing painted */
}
.journey-nav__link.is-current::after  { height: 6px; transform: none; }
.journey-nav__link.is-emphasis::after { height: 6px; transform: none; background: var(--color-border-subtle); }
a.journey-nav__link:hover::after,
a.journey-nav__link:focus-visible::after { height: 4px; transform: scaleY(1); background: var(--color-text-primary); }
/* The prototype gives Current an ON_HOVER -> Hover too (all three resting states do).
   The current item stays a <span aria-current> -- it is not a link to itself -- but it
   still shows the Hover state under the pointer. */
.journey-nav__link.is-current:hover::after { height: 4px; }
/* Keyboard focus looks exactly like hover (design, 2026-09-23): the DS has no separate nav
   focus state, and the 4px #121212 bar is itself the focus indicator -- high contrast and
   label-wide, so it still satisfies WCAG 2.4.7. Only the global ring is removed, and only
   here; every other link and button keeps it. */
a.journey-nav__link:focus-visible { outline: none; }

@media (max-width: 1024px) {
  .site-header__logo-img--full { width: 400px; }
}
/* Header Device=Mobile (DS 30611:12447), read from the library, not interpolated:
   padding 36/20/26/20, the wrapper turns into a column (logo above nav, gap 24,
   rule 24 below), the Short-name logo at 160px, and the nav spreads across the full
   width with space-between at 14px labels. */
@media (max-width: 600px) {
  .site-header { padding-inline: var(--wrapper-padding-md); }
  .site-header__wrapper {
    flex-direction: column; align-items: flex-start;
    row-gap: var(--container-gap-xl); padding-bottom: var(--container-padding-lg);
  }
  .site-header__logo-img--full { display: none; }
  .site-header__logo-img--short { display: block; width: 160px; height: auto; }
  .journey-nav { width: 100%; }
  .journey-nav__list {
    flex-wrap: wrap; justify-content: space-between;
    gap: var(--container-gap-2xs); padding-block: 0;
  }
}

/* ---------- shared type ---------- */
.t-h1 {
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-heading-3xl);
  line-height: var(--text-leading-tight);
  letter-spacing: -0.01em;           /* Figma letterSpacing -1% */
  color: var(--color-text-primary);
  text-align: center;
}
.t-subhead {
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-heading-md);
  line-height: var(--text-leading-tight);
  text-align: center;
  max-width: var(--container-size-xl);
}

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  gap: var(--container-gap-4xs);
  padding: var(--button-padding-sm) var(--button-padding-md);
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-tight);
  text-decoration: none; text-align: center;
}
.btn--primary { background: var(--button-color-bg-primary); color: var(--button-color-text-light); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--button-color-hover-primary); }
/* inlined so the arrow inherits button colour instead of a baked-in white fill */
/* Arrow = shaft <rect> + head <path> in px units, overflow visible. Hover (DS State=Hover)
   lengthens it 15 -> 22: the shaft scales from its left edge, the head slides 7px. */
.btn__arrow { flex-shrink: 0; width: 15px; height: 12px; overflow: visible; }
.arrow__shaft { transform-origin: 0 50%; }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { width: 22px; }
.btn:hover .arrow__shaft, .btn:focus-visible .arrow__shaft { transform: scaleX(1.5833); }
.btn:hover .arrow__head,  .btn:focus-visible .arrow__head  { transform: translateX(7px); }

/* ---------- section 1: intro + image cards ---------- */
.section { padding: var(--wrapper-padding-3xl) var(--wrapper-padding-sm); }
.section--intro { background: var(--color-background-canvas); }
.section--intro__wrapper {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--container-gap-md);
}
.hero-text {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--container-gap-xs); width: 100%;
}
.hero-text__intro, .hero-text__body { max-width: var(--text-width-max-width-small-text); width: 100%; }
.hero-text__body p + p { margin-top: var(--text-paragraph-spacing-md); }
.hero-text__intro p, .hero-text__body p {
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-body);
}

.card-row {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--container-gap-md); width: 100%;
}
.image-card {
  flex: 1 0 0; min-width: var(--container-size-sm);
  display: flex; flex-direction: column; gap: var(--container-gap-xs);
}
.image-card__media { width: 100%; height: 250px; object-fit: cover; }
.image-card__body { display: flex; flex-direction: column; gap: var(--container-gap-xs); width: 100%; }
.image-card__text {
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-body);
  max-width: var(--text-width-max-width-small-text);
}

@media (max-width: 600px) {
  .card-row { flex-direction: column; }
  .image-card { flex: 0 0 auto; width: 100%; min-width: 0; }
  .btn { white-space: normal; }
}

/* ---------- shared: H2 block ---------- */
.t-h2 {
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-heading-xl);
  line-height: var(--text-leading-tight);
  color: var(--color-text-primary);
}
/* Figma inside stroke -- box-shadow so it does not add to the box height */
.rule-under {
  /* The rule spans the CONTAINER, not the text: as a flex child of an align-items:
     flex-start column the heading shrank to its content (design, twice). */
  width: 100%; align-self: stretch;
  padding-bottom: var(--container-padding-3xs);
  box-shadow: inset 0 calc(-1 * var(--stroke-width-headline)) 0 var(--color-border-black);
}
.t-subhead-sm {
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-heading-sm);
  line-height: var(--text-leading-tight);
  max-width: var(--container-size-xl);
}
.intro-block {
  display: flex; flex-direction: column; align-items: flex-start;
  /* Figma nests H2_Text_Block (gap 12) > Intro_Container (gap 16). The outer has a
     single child, so its gap never applies -- the effective gap is the inner 16. */
  gap: var(--container-gap-xs); width: 100%;
}

/* ---------- section 2: stat cards ---------- */
.section--stats { background: var(--color-background-canvas); padding-block: var(--wrapper-padding-4xl); }
/* Color=Subtle, read off the instance's componentProperties (Guide_Thanks authors it;
   Explore, Request_Info and Not_Ready are Color=Light). */
.section--stats--subtle { background: var(--color-background-surface); }
/* Section_Stat_Cards Color=Subtle: cards are white with a 1px black inside stroke and
   #121212 text (the blue card is the Light variant). */
.section--stats--subtle .stat-card {
  background: var(--color-background-canvas); color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--card-stroke-width) var(--color-border-black);
}
.section--stats__wrapper {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--container-gap-md);
}
.stat-grid {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: var(--container-gap-md); width: 100%;
}
.stat-card {
  flex: 1 0 0; min-width: var(--container-size-md); max-width: var(--container-size-lg);
  display: flex; flex-direction: column; gap: var(--container-gap-xs);
  padding: var(--container-padding-md);
  background: var(--card-color-bg-inverse);
  color: var(--color-text-inverse);
  box-shadow: inset 0 0 0 var(--card-stroke-width) var(--color-border-inverse);
}
.stat-card__value {
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-heading-3xl);
  line-height: var(--text-leading-tight);
  text-transform: uppercase;
}
.stat-card__desc {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-body);
}

/* Stat_Card is min 500 / max 600 (FILL) in the DS at every width; a 300px tier here made
   the grid flip stacked -> 2-up -> stacked between 600 and 1024. Two cards fit at
   >= 1024 of wrapper; below that they wrap to a stack on their own. */
@media (max-width: 600px) {
  .stat-grid { flex-direction: column; }
  .stat-card { flex: 0 0 auto; width: 100%; min-width: 0; max-width: none; }
}

/* ---------- section 3: accordion ---------- */
.section--accordion { background: var(--color-background-canvas); }
.section--accordion__wrapper {
  display: flex; flex-direction: column; align-items: center;
  padding-inline: var(--container-padding-sm);
}
.accordion { width: 100%; max-width: var(--container-size-xl); }
.accordion__head {
  display: flex; flex-direction: column; gap: var(--container-gap-2xs);
  padding-bottom: var(--container-padding-md);
  /* Figma inside stroke */
  box-shadow: inset 0 calc(-1 * var(--stroke-width-divider)) 0 var(--color-border-default);
}
.accordion__intro {
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-body);
  max-width: var(--text-width-max-width-small-text);
}
.link-row { display: flex; flex-wrap: wrap; gap: var(--container-gap-md); }
.cta-link {
  display: inline-flex; align-items: center; gap: var(--container-gap-4xs);
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-paragraph-sm);
  line-height: var(--text-leading-tight);
  color: var(--color-link-default);
  text-decoration: none;
  padding-bottom: var(--container-gap-3xs);
  box-shadow: inset 0 calc(-1 * var(--stroke-width-divider)) 0 var(--color-border-subtle);
}
/* CTA link: Figma keeps the label and underline colour and thickens the rule
   4px -> 6px (--stroke-width-nav-underline). It does NOT go blue. */
.cta-link:hover, .cta-link:focus-visible {
  box-shadow: inset 0 calc(-1 * var(--stroke-width-nav-underline)) 0 var(--color-border-subtle);
}
.cta-link__arrow { flex-shrink: 0; width: 16px; height: 13px; overflow: visible; }
.cta-link:hover .cta-link__arrow, .cta-link:focus-visible .cta-link__arrow { width: 22px; }
.cta-link:hover .arrow__shaft, .cta-link:focus-visible .arrow__shaft { transform: scaleX(1.461); }
.cta-link:hover .arrow__head,  .cta-link:focus-visible .arrow__head  { transform: translateX(6px); }

/* Figma's Style=Expanded carries the 20px bottom padding (77 title + 1624 content + 20
   = 1721); Style=Collapsed is exactly the 77px title with none. Applying it in both
   states made a collapsed item 97px instead of 77. */
.accordion__item:not([open]) { padding-bottom: 0; }
.accordion__item {
  padding-bottom: var(--container-padding-sm);
  box-shadow: inset 0 calc(-1 * var(--stroke-width-default)) 0 var(--color-border-black);
}
.accordion__title {
  display: flex; align-items: center; gap: var(--container-gap-xs);
  padding-block: var(--container-padding-md);
  cursor: pointer; list-style: none;
}
.accordion__title::-webkit-details-marker { display: none; }
.t-h3 {
  flex: 1 0 0; min-width: 0;
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-heading-md);
  line-height: var(--text-leading-tight);
  color: var(--color-text-primary);
}
/* Figma ships only the Minus (expanded) icon; the closed state adds the upright
   bar in CSS rather than inventing a second asset. */
.accordion__icon {
  position: relative; flex-shrink: 0;
  width: var(--icon-size-lg); height: var(--icon-size-lg);
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: var(--color-icon-text);
  top: 50%; left: 50%; translate: -50% -50%;
}
.accordion__icon::before { width: 96%; height: 2.13px; }
.accordion__icon::after  { width: 2.13px; height: 96%; }
.accordion__item[open] .accordion__icon::after { display: none; }
.accordion__panel {
  display: flex; flex-direction: column; gap: var(--container-gap-xs);
  padding-block: var(--container-padding-sm);
}
.accordion__lead {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-heading-sm);
  line-height: var(--text-leading-tight);
}
.accordion__body {
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-body);
  max-width: var(--text-width-max-width-small-text);
}

/* ---------- shared ---------- */
.t-display-sm {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-heading-sm);
  line-height: var(--text-leading-tight);
  max-width: var(--container-size-xl);
}
.t-body {
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-body);
  max-width: var(--text-width-max-width-small-text);
}
.btn-row { display: flex; }
.btn-row .btn { flex: 0 0 auto; }

/* ---------- section 4: video (link mode, as authored in Figma) ---------- */
.section--video { background: var(--color-background-surface); }
.section--video__wrapper {
  width: 100%; max-width: var(--container-size-xl); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--container-gap-sm);
}
.section--video .t-h2 { width: 100%; }
.video-card {
  display: flex; flex-direction: column; gap: var(--container-gap-2xs);
  width: 100%; height: 400px; min-height: 240px;
}
.video-card__link { position: relative; display: block; flex: 1 0 0; min-height: 0; }
.video-card__poster { width: 100%; height: 100%; object-fit: cover; }
.video-card__play {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 100px; height: 100px; pointer-events: none;
}
/* Play_Button State=Hover (33031:27466): circle fill and stroke both -> #001c42 */
.video-card__link:hover .video-card__play path:first-child,
.video-card__link:focus-visible .video-card__play path:first-child {
  fill: var(--button-color-hover-primary); stroke: var(--button-color-hover-primary);
}
.video-card__caption {
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-body);
  max-width: var(--text-width-max-width-small-text);
}

/* ---------- section 5: image + media list ---------- */
.section--media { background: var(--color-background-canvas); }
.section--media__wrapper { display: flex; align-items: flex-start; gap: var(--container-gap-lg); }
/* The photo is portrait (2731x4096). Left in normal flow its intrinsic aspect makes
   the figure 879px tall, which becomes the flex line height and stretches the whole
   section. Taking the image out of flow lets the figure take its height from the text
   column instead -- the documented "height:100% against an indefinite parent" trap. */
.section--media__figure {
  flex: 1 0 0; min-width: var(--container-size-sm); align-self: stretch;
  position: relative; min-height: var(--container-size-sm);
}
.section--media__figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.section--media__content {
  flex: 1 0 0; min-width: var(--container-size-sm);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-xs);
}
.bullet-list {
  display: flex; flex-direction: column; gap: var(--container-gap-3xs);
  padding-left: var(--container-padding-2xs); width: 100%;
}
.bullet-list__item {
  display: flex; align-items: center; gap: var(--container-gap-3xs);
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-tight);   /* Paragraph/list/default is 1.2, not 1.5 */
  max-width: var(--text-width-max-width-small-text);
}
.bullet-list__item::before {
  content: ""; flex-shrink: 0;
  width: var(--icon-size-md); height: var(--icon-size-lg);
  background: radial-gradient(circle at 50% 50%, var(--color-icon-text) 5px, transparent 5px);
}

@media (max-width: 1024px) {
  .section--media__figure, .section--media__content { min-width: 0; }
}
@media (max-width: 600px) {
  .section--media__wrapper { flex-direction: column; }
  /* Section_Image_Media_List Device=Mobile (24916:22165): image 240 tall, above the copy.
     flex: 0 0 auto is load-bearing: the desktop `flex: 1 0 0` basis becomes the BLOCK
     axis once the row stacks, and a 0 basis beats `height` -- the figure rendered 0px
     tall on the live pages (feedback_stacked_flex_and_blockquote; gated by ZERO-BASIS
     in check_css.py). */
  .section--media__figure { flex: 0 0 auto; width: 100%; align-self: auto; height: 240px; min-height: 0; }
  .video-card { height: auto; }
  .video-card__link { flex: 0 0 auto; aspect-ratio: 16 / 9; }
  .video-card__play { width: 64px; height: 64px; }
  .video-card__play svg { width: 100%; height: 100%; }
}

/* ---------- section 6: testimonial ---------- */
.section--testimonial { background: var(--color-background-canvas); }
.section--testimonial__wrapper {
  width: 100%; max-width: var(--container-size-xl); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--container-gap-sm);
}
.section--testimonial .t-h2 { width: 100%; }
.testimonial { display: flex; flex-direction: column; gap: var(--container-gap-2xl); width: 100%; }
.video-card--flush { gap: 0; }
/* Figma crops this frame to the bottom of the source still (image 112.44% tall, offset -12.45%) */
.video-card__poster--bottom { object-position: center bottom; }
/* Embedded playback (VIDEO_JS swaps the poster link for the iframe): the box keeps the
   authored poster crop at rest and becomes 16:9 while playing so the whole video is
   viewable -- design: "videos need to play embedded ... size constrained" (2026-09-16). */
.video-card.is-playing { height: auto; }
.video-card__link.is-playing, .testimonial .video-card__link.is-playing {
  flex: 0 0 auto; height: auto; min-height: 0; aspect-ratio: 16 / 9; background: var(--color-background-dark);
}
.video-card__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 600px) {
  /* Design (2026-09-16): centred intro text is left-aligned on small screens for
     legibility; not in the DS mobile variants, applied globally by request. */
  .hero-text, .hero-text > *, .intro-block, .intro-block > *, .t-h1, .t-subhead, .t-subhead-lg,
  .section--content__wrapper, .section--content__wrapper > * { text-align: left; align-items: flex-start; }
}
/* Keep faces in frame as the screen narrows (design, 2026-09-16 and again 2026-09-21).
   Applied from the STACKING breakpoint, not 600: between 601 and 1024 the hero photo was
   already a short letterbox and still cropping from the centre. The apply hero keeps its
   authored bottom focal point and the testimonial its 18% focal. */
@media (max-width: 1024px) {
  .section--hero-image__figure img, .section--media__figure img, .section--guide-form__cover img,
  .section--request-form__figure img, .frameless-card__figure img,
  .section--video-split .video-card__poster { object-position: center top; }
}
/* Per-image focal points below 600px. Design tunes these by hand per photo ("we normally
   adjust positioning manually per image"), so they key on the ASSET rather than the
   section -- the same section type carries a different photo on each page. Values below
   are design's own (2026-09-21). */
@media (max-width: 600px) {
  img[src$="two-smiling-people-walking-together.webp"] { object-position: center 28%; }
  /* Design's 35% is for THIS photo -- the Guide Thanks Image Media List (her pin sits on it
     at y957). Rounds 3 and 4 put it on the hero instead because the pin was never located,
     only assumed; this image kept the blanket "center top" and design reported it three
     times. It stacks at 600, so "below 600px" is the right range here. */
  img[src$="woman-with-arms-crossed-looking.webp"] { object-position: center 35%; }
}
/* Guide Thanks HERO. This 35% was meant for a different photo (see above) and landed here
   by a mislocated pin. Kept: it frames the walking group fully across the stacked range
   where the blanket "center top" cut them off, and design has reviewed the page with it
   ("everything else is looking good", 2026-09-24). Not a value design specified. */
@media (max-width: 1024px) {
  img[src$="well-dressed-people-walking-down.webp"] { object-position: center 35%; }
}

.quote { position: relative; display: flex; flex-direction: column; gap: var(--container-gap-sm); }
.quote__mark {
  position: absolute; left: 0; top: 29px; translate: 0 -50%;
  font-size: var(--text-size-heading-6xl); line-height: .6;
  color: var(--color-text-primary); pointer-events: none;
  /* Figma hangs the glyph OUT of the text column with a negative indent of
     calc(0 - 0.45 * 96px) = -43.2px. Expressed in em so it tracks the token
     (heading-6xl drops 96 -> 80 at mobile). Without it the mark sits on top of
     the quote's first letter. */
  text-indent: -0.45em;
}
.quote__text {
  font-size: var(--text-size-heading-md);
  line-height: var(--text-leading-tight);
}
.quote__attr { display: flex; align-items: center; gap: var(--container-padding-3xs); }
.quote__dash {
  font-family: var(--font-headings); font-weight: var(--text-weight-normal);
  font-size: var(--text-size-heading-sm); line-height: var(--text-leading-tight);
  color: var(--color-text-primary);
}
.quote__cite {
  font-family: var(--font-headings); font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-heading-sm); line-height: var(--text-leading-tight);
  color: var(--color-text-secondary); font-style: normal;
}

/* ---------- section 7: apply form ---------- */
.section--apply {
  position: relative; isolation: isolate;
  background: var(--color-background-dark);
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-lg);
  color: var(--color-text-inverse);
}
/* Figma: a navy rect with the photo over it at blendMode OVERLAY, opacity 0.6.
   mix-blend-mode on a child <img> did not composite against the navy (red channel
   came out 66 where an overlay over navy must give ~0), so the blend is done with
   background-blend-mode, which blends an element's background-image against its own
   background-color with no stacking-context ambiguity. Verified numerically against
   the Figma render rather than by eye. */
.section--apply__bg {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--color-background-dark);
  /* Figma: navy #001c42, then the photo at OPACITY 0.6, blend OVERLAY. A single
     background-blend-mode applies the blend at full strength, which read too light
     (design, twice). Layers paint top-first: a 40% navy veil over overlay(navy, photo)
     gives 0.4*navy + 0.6*overlay(navy, photo) -- Figma's composite exactly. */
  background-image:
    linear-gradient(rgba(0, 28, 66, .4), rgba(0, 28, 66, .4)),
    url("../student-journey/apply-bg-campus.webp"),
    linear-gradient(var(--color-background-dark), var(--color-background-dark));
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-blend-mode: normal, overlay, normal;
}
.section--apply__wrapper {
  width: 100%; max-width: var(--text-width-max-width-small-text); margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-md);
}
/* The form row is the full column width (Figma Apply_Form_ALR 700 = Text_Container).
   On ACS the form sits inside the dwcqs slot <div>, which flex-start shrank to 400px. */
.dwc-form, .section--apply form, .section--apply-hero form, .section--apply .mauticform_wrapper,
.section--apply-hero .mauticform_wrapper { width: 100%; }
.t-h2--inverse { color: var(--color-text-inverse); }
.section--apply .t-body { color: var(--color-text-inverse); }
.apply-footnote {
  font-style: italic;
  font-size: var(--text-size-paragraph-sm);
  line-height: var(--text-leading-body);
  color: var(--color-text-inverse);
  max-width: var(--text-width-max-width-small-text);
}

/* ---------- Mautic forms ----------
   Structure mirrors the live generate.js output on this instance, so the same rules
   apply before and after Mautic replaces the markup at runtime.

   Vertical spacing is each row's OWN margin-bottom, never a parent `gap`: a parent
   gap has been observed to fail silently in production (feedback_mautic_form_spacing).
   The `:not([style*="none"])` guard exists because Mautic writes an inline
   display:block on the page wrapper when it renders a validation message, which
   would otherwise collapse the layout; the guard leaves its own display:none
   page-hiding alone. This is the only !important in the file -- an inline style
   cannot be beaten otherwise. */
.mauticform-form { width: 100%; }
.mauticform-innerform { width: 100%; }
.mauticform-page-wrapper:not([style*="none"]) {
  display: flex !important;
  flex-wrap: wrap;
  column-gap: var(--container-gap-2xs);
  width: 100%;
}
.mauticform-row {
  flex: 0 0 100%; min-width: 0;
  margin-bottom: var(--container-gap-sm);
  display: flex; flex-direction: column; gap: var(--container-gap-5xs);
}
/* Radio_Button_Group / Checkboxes_Group: options 8px apart, as the frame authors them
   (Options gap 8, 19px rows = a 27px pitch).
   MAUTIC'S RUNTIME JS wraps the option rows in a role="radiogroup" div
   (.mauticform-radiogrp-options) that appears in NEITHER form/generate.js NOR a curl
   capture -- only in the rendered page. A gap on the group therefore landed between
   label / wrapper / errormsg and the rows rendered flush (live pitch 19 vs the authored
   27), which is what design saw as "crammed too tight". Style the wrapper, and keep the
   group rule for the local mock where the rows are direct children. */
.mauticform-radiogrp-options, .mauticform-checkboxgrp-options {
  display: flex; flex-direction: column; gap: var(--container-gap-3xs);
}
.mauticform-radiogrp, .mauticform-checkboxgrp { gap: var(--container-gap-3xs);
}
/* Mautic's own half-width hook — present on first_name/last_name in these forms */
.mauticform-row-partial-half { flex: 1 1 180px; }

.mauticform-label {
  font-family: var(--font-headings);
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-label-sm);
  line-height: var(--text-leading-tight);
  color: var(--color-text-primary);
}
.mauticform-req-label { font-weight: var(--text-weight-bold); }
.mauticform-input, .mauticform-selectbox {
  width: 100%; height: 50px;
  padding: var(--container-padding-2xs);
  background: var(--input-color-bg);
  border: var(--input-stroke-width) solid var(--input-color-border);
  font-family: var(--font-headings);
  font-size: var(--text-size-label-sm);
  line-height: var(--text-leading-tight);
  color: var(--color-text-primary);
}
textarea.mauticform-input { height: auto; min-height: 100px; }
/* Input hover: white fill, 2px blue stroke. This state was missing entirely. */
.mauticform-input:hover, .mauticform-selectbox:hover,
.mauticform-input:focus, .mauticform-selectbox:focus {
  background: var(--color-background-canvas);
  border-color: var(--button-color-border-secondary);
  border-width: var(--stroke-width-border);
}

.mauticform-radiogrp-row, .mauticform-checkboxgrp-row {
  display: flex; align-items: center; gap: var(--container-gap-4xs);
}
/* Checkbox_Input / Radio_Input as authored in the DS (7959:70639, 7959:69716 and their
   Hover / Selected siblings): #f3f3f3 fill, 1px #121212 INSIDE stroke, 20px radius-2
   square / 19px circle; hover turns the stroke #000f9f; selected draws a 13x10 check /
   a 9px dot in #121212. Native controls cannot show those states, so they are drawn
   with appearance:none on Mautic's own input classes (the token renders Mautic's
   markup, so our class names would not exist on ACS). */
.mauticform-radiogrp-radio, .mauticform-checkboxgrp-checkbox {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; width: 20px; height: 20px; margin: 0;
  display: grid; place-content: center;
  background: var(--input-color-bg);
  box-shadow: inset 0 0 0 var(--input-stroke-width) var(--input-color-border);
  border: 0; border-radius: 2px; cursor: pointer;
}
.mauticform-radiogrp-radio { width: 19px; height: 19px; border-radius: 50%; }
.mauticform-radiogrp-radio:hover, .mauticform-checkboxgrp-checkbox:hover,
.mauticform-radiogrp-radio:focus-visible, .mauticform-checkboxgrp-checkbox:focus-visible {
  box-shadow: inset 0 0 0 var(--input-stroke-width) var(--input-color-border-focus);
}
.mauticform-checkboxgrp-checkbox::before {
  content: ""; width: 13px; height: 10px; opacity: 0;
  background: var(--color-icon-default);
  clip-path: polygon(0 52%, 14% 38%, 38% 62%, 86% 0, 100% 14%, 38% 100%);
}
.mauticform-radiogrp-radio::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; opacity: 0;
  background: var(--color-icon-default);
}
.mauticform-checkboxgrp-checkbox:checked::before,
.mauticform-radiogrp-radio:checked::before { opacity: 1; }
.mauticform-radiogrp-label, .mauticform-checkboxgrp-label {
  font-family: var(--font-headings);
  font-size: var(--text-size-label-sm);
  line-height: var(--text-leading-tight);
  display: flex; align-items: center;
}
.mauticform-button-wrapper { flex: 0 0 auto; margin-bottom: 0; }
.mauticform-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--container-gap-4xs);
  min-height: 44px;
  padding: var(--button-padding-sm) var(--button-padding-md);
  background: var(--button-color-bg-primary);
  border: 0; color: var(--button-color-text-light);
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-tight);
  white-space: nowrap; cursor: pointer;
}
.mauticform-button::after {
  content: ""; flex-shrink: 0; width: 15px; height: 12px;
  /* shaft (gradient, grows with the width) + head (the icon file, pinned right) */
  background: linear-gradient(currentColor, currentColor) 0 50% / calc(100% - 8px) 1.63px no-repeat,
              url("icon-arrow-right-white.svg") right center / 15px 12px no-repeat;
}
.mauticform-button:hover::after, .mauticform-button:focus-visible::after { width: 22px; }
.mauticform-button:hover, .mauticform-button:focus-visible { background: var(--button-color-hover-primary); }
/* Honeypot: must stay in the DOM or Mautic drops the submission silently. */
.mauticform-bhpot-row { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mauticform-errormsg { color: var(--color-text-error); font-size: var(--text-size-paragraph-xs); }
.mauticform-error:not(:empty), .mauticform-message:not(:empty) { margin-bottom: var(--container-gap-2xs); }
/* Post-submit message (forms 74/37/4 post a message, not a redirect): the DS `Success`
   component (33192:18631) -- #5f712d band (= color/text/valid), white check, white 16px
   Regular, 6px padding. Plain text here drew "thanks message blends in with the copy"
   from design on Bryan. */
.mauticform-message:not(:empty) {
  display: flex; align-items: flex-start; gap: var(--container-gap-4xs);
  padding: var(--container-gap-4xs);
  background: var(--color-text-valid); color: var(--color-icon-inverse);
  font-family: var(--font-headings); font-size: var(--text-size-paragraph-sm);
  font-weight: var(--text-weight-normal); line-height: var(--text-leading-body);
}
.mauticform-message:not(:empty)::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4L14 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4L14 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- inline variant: the apply band and apply hero put email + button on one row,
       with the placeholder standing in for the label (as authored in Figma). --- */
.section--apply .mauticform-page-wrapper:not([style*="none"]),
.section--apply-hero .mauticform-page-wrapper:not([style*="none"]) {
  display: grid !important;
  grid-template-columns: 1fr auto;
  column-gap: var(--container-gap-6xs);
  row-gap: var(--container-gap-2xs);        /* Base_Form_ALR gap 12 between stacked rows */
}
.section--apply .mauticform-row, .section--apply-hero .mauticform-row { margin-bottom: 0; }
.section--apply .mauticform-row.mauticform-email,
.section--apply-hero .mauticform-row.mauticform-email { grid-column: 1; }
.section--apply .mauticform-button-wrapper,
.section--apply-hero .mauticform-button-wrapper { grid-column: 2; }
/* Every other row (Title, Company -- added to the live forms 2026-09-16) spans the grid
   and stacks full width above the email + button row (design: "these fields will need
   to stack and stay full width"). */
.section--apply .mauticform-row:not(.mauticform-email):not(.mauticform-button-wrapper),
.section--apply-hero .mauticform-row:not(.mauticform-email):not(.mauticform-button-wrapper) { grid-column: 1 / -1; }
.section--apply .mauticform-email, .section--apply-hero .mauticform-email { grid-column: 1; }
.section--apply .mauticform-label, .section--apply-hero .mauticform-label {
  position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}
.section--apply .mauticform-input, .section--apply-hero .mauticform-input { height: 54px; }
.section--apply .mauticform-button, .section--apply-hero .mauticform-button {
  height: 54px;
  padding: var(--button-padding-md) var(--button-padding-lg);
  background: var(--button-color-bg-secondary);
  border: var(--stroke-width-border) solid var(--button-color-border-secondary);
  color: var(--button-color-text-dark);
  font-size: var(--text-size-paragraph-lg);
}
.section--apply .mauticform-button::after,
.section--apply-hero .mauticform-button::after {
  background-image: linear-gradient(currentColor, currentColor), url("icon-arrow-right-blue.svg");
}
.section--apply .mauticform-button:hover, .section--apply-hero .mauticform-button:hover,
.section--apply .mauticform-button:focus-visible, .section--apply-hero .mauticform-button:focus-visible {
  background: var(--button-color-hover-secondary);
}

@media (max-width: 600px) {
  .section--apply .mauticform-page-wrapper:not([style*="none"]),
  .section--apply-hero .mauticform-page-wrapper:not([style*="none"]) {
    grid-template-columns: 1fr; row-gap: var(--container-gap-2xs);
  }
  .section--apply .mauticform-row.mauticform-email, .section--apply .mauticform-button-wrapper,
  .section--apply-hero .mauticform-row.mauticform-email, .section--apply-hero .mauticform-button-wrapper {
    grid-column: 1;
  }
  .mauticform-button { width: 100%; }
  .mauticform-row-partial-half { flex: 0 0 100%; }
  /* Testimonial Device=Mobile, Style=Single Icon (32965:64572) keeps the 80px quote
     mark; the quote container gains 20px top padding so the mark sits above the text
     instead of hanging into the 16px side gutter. Was hidden here before. */
  .quote { padding-top: var(--container-padding-md); }
  /* Testimonial Device=Mobile (DS): the 80px mark's zero-width box sits at x=30, y=0
     (line box 48) and the quote text is padded 20 on top, so the glyph overlaps the first
     line instead of floating above it -- design: "quote should be closer to text". */
  .quote__mark { left: 30px; top: 0; text-indent: -0.45em; translate: 0 0; line-height: 48px; }
  /* Section_Testimonial_Stacked Device=Mobile (32977:32214): 10 under the heading,
     content block padded 20 on top, video poster fixed at 240 tall. */
  .section--testimonial__wrapper { gap: var(--container-gap-2xs); }
  .testimonial { padding-top: var(--container-padding-md); }
  .testimonial .video-card__link { aspect-ratio: auto; height: 240px; }
}

/* ================================================================
   Sections added for the remaining 8 pages.
   Every padding / gap / max-width below is read from the Figma
   auto-layout box model (build/layout.py), not eyeballed.
   ================================================================ */

/* ---------- shared additions ---------- */
.t-h1--left { text-align: left; }
.t-subhead-lg {
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-heading-md);
  line-height: var(--text-leading-tight);
  max-width: var(--container-size-xl);
}
.intro-block--pad { padding-bottom: var(--container-padding-sm); }
.intro-block--lg  { gap: var(--container-gap-md); max-width: var(--container-size-lg); }

/* ---------- divider ---------- */
.section-divider {
  padding: 0 var(--wrapper-padding-sm) var(--container-padding-2xl);
  display: flex; justify-content: center;
}
.section-divider__bar {
  width: 100%; max-width: var(--wrapper-width-md);
  height: var(--stroke-width-divider); margin: 0; border: 0;
  background: var(--color-border-default);
}

/* ---------- hero with image (Guide_Thanks) ---------- */
.section--hero-image { background: var(--color-background-canvas); padding-inline: var(--wrapper-padding-md); }
.section--hero-image__wrapper { display: flex; align-items: flex-start; gap: var(--container-gap-xl); }
.section--hero-image__text {
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-xs);
}
.section--hero-image__figure {
  /* Figma Wrapper is FIXED 286 tall (Hero_Image 30530:14333); a 300px min-height made
     the photo 14px taller than the text column it should match. */
  flex: 0 0 550px; align-self: stretch; position: relative; min-height: 286px;
}
.section--hero-image__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- hero simple (Request_Info_Thanks) ---------- */
.section--hero-simple { background: var(--color-background-canvas); padding-inline: var(--wrapper-padding-md); }
.section--hero-simple__wrapper { display: flex; flex-direction: column; align-items: center; }
.hero-simple__card {
  width: 100%; max-width: var(--container-size-xl);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-xs);
  padding: var(--container-padding-xl);
  /* Figma stroke is OUTSIDE-aligned: a non-inset box-shadow draws outside the box
     without adding to its height, which a CSS border would. */
  box-shadow: 0 0 0 var(--stroke-width-border) var(--color-border-default);
}

/* ---------- general page hero (Help / Privacy) ---------- */
.section--page-hero {
  background: var(--color-background-canvas);
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-md);
}
.section--page-hero__wrapper { display: flex; flex-direction: column; align-items: center; }
.section--page-hero__col {
  width: 100%; max-width: var(--container-size-xl);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-xs);
}

/* ---------- video, split layout (Guide_Thanks) ---------- */
.section--video-split { background: var(--color-background-canvas); }
.section--video-split__wrapper { display: flex; align-items: flex-start; justify-content: center; gap: var(--container-gap-sm); }
.section--video-split__text {
  flex: 1 0 0; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; gap: var(--container-gap-2xs);
}
.section--video-split .video-card { flex: 0 0 590px; align-self: stretch; height: auto; min-height: 240px; }

/* ---------- testimonial, horizontal ---------- */
.section--testimonial-h { background: var(--color-background-canvas); }
.section--testimonial-h__wrapper {
  width: 100%; max-width: var(--wrapper-width-sm); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--container-padding-3xs);
}
.section--testimonial-h .t-h2 { width: 100%; }
.section--testimonial-h__row {
  display: flex; align-items: flex-start; gap: var(--container-gap-2xl);
  padding-top: var(--container-padding-md); width: 100%;
}
.section--testimonial-h__row .quote { flex: 1 0 0; min-width: var(--container-size-sm); max-width: var(--container-size-xl); }
.section--testimonial-h__figure {
  flex: 1 0 0; max-width: var(--container-size-md); min-width: var(--container-size-2xs);
  align-self: stretch; position: relative; min-height: 160px;
}
.section--testimonial-h__figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Figma crop (imageTransform sy=.677, ty=.060): the visible band starts 18% down
     the source. The crop is NOT uniform (visible aspect 1.48 vs the 1.62 box, i.e.
     the design stretches the photo ~10%), so only the focal point is reproduced --
     see DESIGN-QUESTIONS A9. */
  object-position: center 18%;
}

/* ---------- expert / frameless cards (Guide_Thanks) ---------- */
.section--expert { background: var(--color-background-canvas); }
.section--expert__wrapper {
  width: 100%; max-width: var(--wrapper-width-sm); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--container-gap-md);
}
.section--expert__rows { display: flex; flex-direction: column; gap: var(--container-gap-3xl); width: 100%; }
.frameless-card { display: flex; align-items: flex-start; justify-content: center; gap: var(--container-gap-2xl); min-height: 180px; }
.frameless-card__figure { flex: 1 0 0; min-width: 0; align-self: stretch; position: relative; min-height: 300px; }
.frameless-card__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frameless-card__text {
  flex: 1 0 0; max-width: var(--container-size-sm); min-width: var(--container-size-2xs);
  display: flex; flex-direction: column; gap: var(--container-gap-2xs);
  padding-top: var(--container-padding-lg);
  box-shadow: inset 0 var(--stroke-width-border) 0 var(--color-border-default);
}

/* ---------- simple content block ---------- */
.section--content { background: var(--color-background-canvas); }
.section--content__wrapper {
  width: 100%; max-width: var(--container-size-xl); margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-xs);
}
.section--content .t-h2 { width: 100%; }

/* ---------- apply hero (Apply_LP) ---------- */
.section--apply-hero {
  background: var(--color-background-canvas);
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-md);
}
.section--apply-hero__wrapper { display: flex; align-items: flex-start; gap: var(--container-gap-2xl); }
.section--apply-hero__text {
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-md);
}
.section--apply-hero__figure { flex: 1 0 0; align-self: stretch; position: relative; min-height: var(--container-size-sm); }
.section--apply-hero__figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Figma crop (sy=.676, ty=.324): the bottom 68% of the archway photo is shown.
     Near-uniform (0.985 vs 0.928), so the focal point is reproduced; the residual
     ~6% stretch is not -- DESIGN-QUESTIONS A9. */
  object-position: center bottom;
}

/* ---------- get-guide form ---------- */
.section--guide-form { background: var(--color-background-canvas); padding-inline: var(--wrapper-padding-md); }
.section--guide-form__wrapper {
  width: 100%; max-width: 900px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-md);
}
.section--guide-form__row { display: flex; align-items: center; width: 100%; }
/* Figma overlaps the cover 60px onto the form card (mr -60 on the image) */
.section--guide-form__cover { flex: 0 0 240px; margin-right: -60px; position: relative; }
.section--guide-form .form-card { position: relative; z-index: 1; }   /* form over the cover */
.section--guide-form__cover img { width: 100%; height: auto; }
.form-card {
  flex: 1 0 0; min-width: var(--container-size-sm);
  padding: var(--container-padding-xl);
  background: var(--color-background-canvas);
  box-shadow: inset 0 0 0 var(--stroke-width-default) var(--color-border-default);
}
.form-card--outline {
  width: 100%; flex: 0 0 auto;
  padding: var(--container-padding-2xl) var(--container-padding-xl);
  /* OUTSIDE stroke in Figma -> draws outside, adds nothing to the box */
  box-shadow: 0 0 0 var(--stroke-width-border) var(--color-border-default);
}

/* ---------- request-info form ---------- */
.section--request-form { background: var(--color-background-canvas); padding-inline: var(--wrapper-padding-md); }
.section--request-form__wrapper { display: flex; align-items: flex-start; justify-content: center; gap: var(--container-gap-2xl); }
.section--request-form__left {
  flex: 1 0 0; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; gap: var(--container-gap-md);
}
.section--request-form__figure { flex: 1 0 0; position: relative; min-height: var(--container-size-sm); }
.section--request-form__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section--request-form__right { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* ---------- deadline form ---------- */
.section--deadline {
  background: var(--color-background-surface);
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-sm);
}
.section--deadline__wrapper { display: flex; flex-direction: column; align-items: center; }
.deadline-card {
  width: 100%; max-width: var(--container-size-xl);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-md);
  padding: var(--container-padding-md);
  background: var(--color-background-canvas);
}

/* ---------- not-ready form ---------- */
.section--not-ready { background: var(--color-background-canvas); padding-inline: var(--wrapper-padding-md); }
.section--not-ready__wrapper {
  width: 100%; max-width: var(--container-size-xl); margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-md);
}

/* ---------- contact section ---------- */
.section--contact {
  background: var(--color-background-canvas);
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-lg);
}
.section--contact__wrapper {
  width: 100%; max-width: var(--container-size-xl); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--container-gap-md);
}
.section--contact__text {
  flex: 1 0 0; min-width: var(--container-size-sm);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--container-gap-sm);
}
.contact-buttons {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--container-gap-2xs); flex-shrink: 0;
}
.contact-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--container-gap-5xs);
  /* Each button HUGS its label in Figma (208 and 124 here) -- width:100% made them a
     common width, which design flagged. */
  width: auto;
  /* Authored Size=Minor: 8/10 padding, 33px tall (clears WCAG 2.5.8 AA via the spacing
     exception). Label is Regular 400 as the DS authors it -- design confirmed 2026-09-21
     ("the font weight of this type should be normal") after a 700 trial. */
  padding: var(--button-padding-xs) var(--button-padding-sm);
  background: var(--button-color-bg-secondary);
  /* 2px INSIDE stroke -> inset shadow, so the button stays the authored 33px */
  border: 0; box-shadow: inset 0 0 0 var(--stroke-width-border) var(--button-color-border-secondary);
  color: var(--button-color-text-dark);
  font-family: var(--font-headings);
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-paragraph-xs);
  line-height: var(--text-leading-tight);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
/* Contact button: the border collapses into the fill and the label darkens. */
.contact-btn:hover, .contact-btn:focus-visible {
  background: var(--button-color-hover-secondary);
  box-shadow: inset 0 0 0 var(--stroke-width-border) var(--button-color-hover-secondary);
  color: var(--color-background-dark);
}
/* Icon colour is scoped to the icon, not inherited from the button, because Figma
   diverges the two on hover: icon #000f9f -> #121212, label #000f9f -> #001c42. */
.contact-btn__icon { flex-shrink: 0; color: var(--color-link-default); }
.contact-btn:hover .contact-btn__icon,
.contact-btn:focus-visible .contact-btn__icon { color: var(--color-icon-text); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--color-background-dark);
  color: var(--color-text-muted);
  padding: var(--container-padding-2xl) var(--wrapper-padding-md) 0;
  display: flex; justify-content: center;
}
.site-footer__wrapper {
  flex: 1 0 0; max-width: var(--wrapper-width-md); min-width: 0;
  display: flex; align-items: flex-start; gap: var(--container-gap-md);
}
.site-footer__content {
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--container-gap-md);
  padding-bottom: var(--container-padding-2xl);
}
.site-footer__address {
  font-style: normal;
  font-size: var(--text-size-paragraph-sm);
  line-height: var(--text-leading-address);
  color: var(--color-text-muted);
}
.site-footer__links { display: flex; align-items: center; gap: var(--container-gap-2xs); }
.site-footer__links a {
  display: inline-flex; align-items: center;
  min-height: 44px;                      /* WCAG 2.5.5; Figma renders these ~17px */
  font-family: var(--font-headings);
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-paragraph-xs);
  line-height: var(--text-leading-tight);
  color: var(--color-link-inverse);
  text-decoration: none; white-space: nowrap;
}
/* Footer link: Figma dims the label to #bec8e0. It does not underline. */
.site-footer__links a:hover, .site-footer__links a:focus-visible {
  color: var(--color-text-muted);
}
.site-footer__logo { width: 300px; max-width: 100%; height: auto; }
.site-footer__mark {
  flex-shrink: 0; width: 327px; max-width: 40%; height: auto;
  align-self: stretch; object-fit: contain; object-position: bottom;
}

/* Footer Device=Mobile, Style=Stacked (32947:54048): no Business & Society mark, the
   wordmark spans the full width, 24 between the stacked blocks.
   Contact Device=Mobile (30458:10895): full-width buttons, 18 inside the text block. */
@media (max-width: 600px) {
  .site-footer__wrapper { flex-direction: column; }
  .site-footer__mark { display: none; }
  /* width: 100% because the wrapper's align-items: flex-start stops the stacked
     content block from stretching (it hugged the 300px wordmark). */
  .site-footer__content { gap: var(--container-gap-xl); width: 100%; }
  /* Logo - DNE in Footer Device=Mobile/Stacked is 300 wide with maxWidth 300 -- design
     added the cap because it was stretching to the full 360 column. */
  .site-footer__logo { width: 100%; max-width: 300px; }
  .contact-buttons { width: 100%; }
  .section--contact__text { gap: var(--container-gap-md); }
}

/* ================================================================
   Responsive stacking for the sections added above.
   Ordered widest-first so the narrower query wins the cascade, and
   matching tokens.css / the design system's own breakpoints.
   ================================================================ */
@media (max-width: 1024px) {
  /* These rows pair a flexible text column with a FIXED-width figure (550/590px
     from Figma). The text column can shrink, so nothing overflows here — but it
     shrinks to a ~160px ribbon, so they stack at tablet rather than at mobile. */
  .section--hero-image__wrapper,
  .section--video-split__wrapper,
  .section--apply-hero__wrapper,
  .section--request-form__wrapper,
  .section--testimonial-h__row,
  .frameless-card { flex-direction: column; }

  .section--hero-image__figure,
  .section--video-split .video-card {
    flex: 0 0 auto; width: 100%; align-self: auto; height: 320px; min-height: 0;
  }
  .section--apply-hero__figure,
  .section--request-form__figure,
  .section--testimonial-h__figure,
  .frameless-card__figure {
    flex: 0 0 auto; width: 100%; max-width: none; align-self: auto;
    height: 320px; min-height: 0;
  }
  .section--testimonial-h__row .quote { max-width: none; min-width: 0; }
  .frameless-card__text { max-width: none; }
  /* the DOM alternates image/text per row; stacked, the image always leads */
  .frameless-card__figure { order: -1; }
}

/* Every value below is read from the DS library's Device=Mobile variant of the section
   (node ids in the comments), measured at 400px. Sections with no authored mobile
   variant -- Stat_Cards, Accordion_List, Image_Cards, Deadline_Form, General_Page_Hero,
   Not_Ready (Headline Above Form) -- keep the token-driven heuristic. */
@media (max-width: 600px) {
  /* Section_Get_Guide_Form_ALR Device=Mobile (30530:30335): the cover sits ABOVE the
     form card as a 160px-tall landscape crop inset 30px each side, no overlap; the
     card pads 26 and rows sit 18 apart. */
  .section--guide-form__row { flex-direction: column; align-items: stretch; gap: 0; }
  .section--guide-form__cover {
    flex: 0 0 auto; margin: 0; align-self: stretch; max-width: none;
    padding-inline: var(--container-padding-2xl);
  }
  .section--guide-form__cover img { width: 100%; height: 160px; object-fit: cover; }
  .form-card { min-width: 0; width: 100%; padding: var(--container-padding-xl); }
  .form-card .mauticform-row { margin-bottom: var(--container-gap-md); }
  .form-card--outline { padding: var(--container-padding-sm); }
  /* Hero_Image (30530:14333), Apply_Form_ALR (30469:26770), Request_Info_Form
     (30472:28314), Testimonial_Horz (32965:65713), Subsection_Simple_Image
     (33057:36542): every stacked image is a fixed 240 tall. */
  .section--hero-image__figure,
  .section--apply-hero__figure,
  .section--request-form__figure,
  .section--testimonial-h__figure,
  .frameless-card__figure { height: 240px; }
  /* Section_Video 2-Column (32977:33544): media keeps its 16:9 (206 tall at 368), the
     text block gap tightens to 14. */
  .section--video-split .video-card { height: auto; }
  .section--video-split__text { gap: var(--container-gap-xs); }
  /* Request_Info_Form Column (30472:28314): 24 between intro / image / form. */
  .section--request-form__wrapper { gap: var(--container-gap-xl); }
  .section--request-form__left { gap: var(--container-gap-xl); }
  /* Subsection_Simple_Image (33057:36542): 56 between cards, 20 above the card text. */
  .section--expert__rows { gap: var(--container-gap-3xl); }
  .frameless-card__text { padding-top: var(--container-padding-md); }
  /* Section_Simple_Content (30530:13173): Button_Container Layout=Stacked, CTAs fill
     the width. (Section_Image_Media_List's button stays hugging, as authored.) */
  .section--content .btn-row { flex-direction: column; width: 100%; }
  .deadline-card { padding: var(--container-padding-sm); }
}

/* ---------- page index (internal reference page, noindex) ---------- */
.section--page-index {
  background: var(--color-background-canvas);
  padding: var(--wrapper-padding-4xl) var(--wrapper-padding-md);
}
.section--page-index__wrapper {
  max-width: var(--wrapper-width-xs);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--container-gap-xs);
}
.section--page-index .t-h2 { width: 100%; margin-top: var(--container-gap-md); }
.page-index { display: flex; flex-direction: column; width: 100%; }
.page-index__item {
  padding-block: var(--container-padding-3xs);
  box-shadow: inset 0 calc(-1 * var(--stroke-width-default)) 0 var(--color-border-subtle);
}
.page-index__link {
  display: inline-flex; align-items: center; min-height: 44px;   /* WCAG 2.5.5 */
  font-family: var(--font-headings);
  font-weight: var(--text-weight-extra-bold);
  font-size: var(--text-size-paragraph-md);
  line-height: var(--text-leading-tight);
  color: var(--color-link-default); text-decoration: none;
}
.page-index__link:hover, .page-index__link:focus-visible { text-decoration: underline; }
@media (max-width: 600px) {
  .page-index__item { grid-template-columns: 1fr; row-gap: var(--container-gap-5xs); }
  }

/* ---------- Mautic-rendered form corrections ----------
   On ACS the {form=ID} token renders MAUTIC's markup, not ours, so any rule hung on a
   class we invented (.mauticform-bhpot-row) silently does nothing there. These target
   Mautic's own id/class patterns and therefore work in both the local static preview
   and the live token-rendered form. */

/* Honeypot. It must stay in the DOM (removing it breaks submissions silently) AND be
   invisible — Mautic drops any submission where it is filled, so a visible "Nickname"
   field silently discards real leads. Mautic names the row <formalias>_nickname_bhpot. */
.mauticform-row[id$="_nickname_bhpot"],
.mauticform-bhpot-row {
  position: absolute !important;
  left: -10000px; width: 1px; height: 1px; overflow: hidden;
}

/* Error state. Mautic adds .mauticform-has-error to the row and reveals the message,
   but tints nothing — without this the field itself gives no signal. */
.mauticform-has-error .mauticform-input,
.mauticform-has-error .mauticform-selectbox {
  border-color: var(--color-text-error);
  box-shadow: inset 0 0 0 1px var(--color-text-error);
}
.mauticform-has-error .mauticform-label { color: var(--color-text-error); }
.mauticform-errormsg {
  color: var(--color-text-error);
  font-family: var(--font-headings);
  font-size: var(--text-size-paragraph-xs);
  line-height: var(--text-leading-tight);
}

/* ---------- ALR dynamic-content form swap ----------
   alr-landing-page-*.js keeps whichever variant matches ?utm_source and REMOVES the
   other, revealing the keeper with visibility:visible. So the pair MUST start hidden,
   and specifically with `visibility`, not `display` — display:none would survive the
   script's visibility:visible and hide both forms. Until the script runs both variants
   reserve layout space; that is the template's own behaviour, matched deliberately. */
.dwc-form[data-slot="dwcqs"][data-param-qs-show] { visibility: hidden; }
.page-index__variant {
  display: inline-flex; align-items: center; min-height: 44px;   /* WCAG 2.5.5 */
  margin-left: var(--container-gap-md);
  font-family: var(--font-headings);
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-paragraph-xs);
  color: var(--color-link-default); text-decoration: none;
}
.page-index__variant::before { content: "\21B3"; margin-right: var(--container-gap-5xs); opacity: .6; }
.page-index__variant:hover, .page-index__variant:focus-visible { text-decoration: underline; }

/* Below 500px every button spans its container -- design's standing rule "for usability"
   (2026-09-22). Above that they hug their label (Figma HUG). Kept LAST in the file: as an
   earlier block it lost on source order to the base `.contact-buttons { align-items:
   flex-start }`, so the buttons filled only their 182px list item. */
@media (max-width: 500px) {
  .btn, .contact-btn, .mauticform-button { width: 100%; }
  .btn-row, .contact-buttons { align-items: stretch; }
  .contact-buttons, .contact-buttons > li { width: 100%; }
}