/* ==========================================================================
   Site extensions to the Webflow export.

   Everything here is additive: new component classes prefixed so they can
   never collide with a regenerated Webflow stylesheet. Brand tokens are read
   from the variables already defined in movement-disorders.webflow.css.
   ========================================================================== */

:root {
  --site-ink: var(--base-color-brand--blue-dark, #031e47);
  --site-accent: #038172;
  --site-accent-soft: #e8f4f1;
  --site-surface: #f7f8fa;
  --site-surface-blue: #eef2f7;
  --site-border: #e2e7ee;
  --site-muted: #5a6474;
}

/* --------------------------------------------------------------------------
   Skip link

   Off-screen until focused, so keyboard users can reach the content without
   tabbing through the utility bar and eight dropdown menus on every page.
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--site-ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0;
}

.skip-link:focus {
  left: 0;
  outline: 3px solid #8fd6c9;
  outline-offset: 2px;
}

#main-content:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Header search
   -------------------------------------------------------------------------- */

/* The navbar is the stacking context (position: relative; z-index: 1000), so
   the results panel competes with the nav menu inside it rather than with the
   page. Raising the wrapper lifts the panel above the menu links. */
.site-search {
  position: relative;
  z-index: 999;
}

.site-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-search__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 900;
  width: min(28rem, calc(100vw - 2rem));
  max-height: 26rem;
  overflow-y: auto;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: 0.75rem;
  box-shadow: 0 1.25rem 2.5rem rgba(3, 30, 71, 0.16);
}

.site-search__panel[hidden] {
  display: none;
}

.site-search__hit {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.site-search__hit:hover,
.site-search__hit.is-active,
.site-search__hit:focus {
  background: var(--site-surface-blue);
  outline: none;
}

.site-search__hit-title {
  display: block;
  color: var(--site-ink);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}

.site-search__hit-text {
  display: block;
  margin-top: 0.15rem;
  color: var(--site-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.site-search__empty {
  margin: 0;
  padding: 0.9rem 0.8rem;
  color: var(--site-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Figures inside rich text
   -------------------------------------------------------------------------- */

.site-figure {
  margin: 2.5rem 0;
  padding: 0;
}

.site-figure img {
  display: block;
  /* The book artwork ranges from 271x671 to 1546x865, and every figure used to
     be stretched to the full 46rem column. That did two things: it upscaled the
     small scans (programming-parameters.webp is natively 271px wide, so it was
     drawn at 2.7x and looked soft), and it turned the portrait scans into
     images over 1800px tall. Sizing to the intrinsic width and bounding the
     height keeps every figure sharp and on-screen. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(40rem, 70vh);
  margin-inline: auto;
  border: 1px solid var(--site-border);
  border-radius: 0.75rem;
  background: #fff;
}

.site-figure figcaption {
  margin-top: 0.75rem;
  color: var(--site-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.site-figure.is-narrow {
  max-width: 26rem;
}

.site-figure.is-plain img {
  border: 0;
  border-radius: 0;
}

/* Photographs behave differently from the book artwork. The scans are line
   drawings on white, so the rule above boxes them in a bordered white card at
   their intrinsic size. A photograph is its own frame: it fills the column, it
   needs no border and no white backing, and the height cap that keeps a tall
   scan on screen would letterbox it instead. */
.site-figure.is-photo {
  /* Inside an article the figure is already bounded by the 46rem prose column.
     On the section hubs it sits in container-large, where a photograph run out
     to the full width would be both enormous and softer than the widest
     variant encoded for it. */
  max-width: 52rem;
  margin-inline: auto;
}

.site-figure.is-photo img {
  width: 100%;
  max-height: none;
  border: 0;
  background: transparent;
}

/* Five of the photographs were shot in portrait. At full column width they run
   past the fold and dominate the page, so they are held to the same width as
   .is-narrow. The class on the image carries the cap on its own, for figures
   written by hand in build/pages/ that drop a photograph in with a bare
   {{PHOTO:slug}} and cannot know its orientation. */
.site-figure.is-photo.is-portrait {
  max-width: 26rem;
}

.site-figure.is-photo img.is-photo-portrait {
  max-width: 26rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Figures set beside the text

   The clinic photographs are there to break up a wall of prose, not to be
   read. At full column width they become the subject of the page — the eye
   lands on the picture and the paragraph above it stops being the point. So
   the uncaptioned ones float into the margin at about a third of the column
   and the text runs past them.

   The same treatment is available to the book artwork, for the two or three
   scans that are portrait enough to hold a screen's worth of column on their
   own; figures.py asks for it per placement.
   -------------------------------------------------------------------------- */

/* Parts of the export wrap their copy in `.blog-post_single-wrap`, a flex
   column with a 12px gap. A float on a flex item is ignored, so the text there
   would not wrap. Where such a wrapper actually contains a photograph, it goes
   back to block flow — and the gap it was relying on is restored as margins,
   since block flow has no gap.

   `flow-root` rather than `block`, because a wrapper holds only two or three
   paragraphs and a photograph is often taller than the one it sits beside.
   Under `block` the overhang escapes the wrapper entirely, and the export
   gives that escaped float two ways to do damage: it runs on over whatever
   section comes next — on fus/evaluation it was lying across the top of the
   navy footer band — and the following wrapper, being a flex container and so
   its own formatting context, is placed *beside* it and shrinks to 473px for
   its whole length, which left half the column empty for several screens on
   fus/outcomes-and-risks. Containing the float ends both.

   The auto left margin is the belt to that braces: a float computes it away to
   zero, and any flex context this rule has not anticipated still gets the
   photograph pushed to one side rather than centred in the column. */
.blog-post_single-wrap:has(> .site-figure.is-aside) {
  display: flow-root;
}

.blog-post_single-wrap:has(> .site-figure.is-aside) > * + * {
  margin-top: 0.75rem;
}

/* The other half of the export's body copy sits in a rich-text div, which is
   already block. It gets the same containment for the same reason — there the
   float would otherwise overhang the article and into the footer. */
.main-wrapper .w-richtext:has(> .site-figure.is-aside) {
  display: flow-root;
}

/* The gutter is padding rather than margin because `margin-left` is already
   doing the alignment work, and a float needs the space inside its own box. */
.site-figure.is-aside {
  float: right;
  box-sizing: border-box;
  width: 22rem;
  max-width: 46%;
  padding-left: 2rem;
  margin: 0.4rem 0 1.25rem auto;
  align-self: flex-end;
}

/* A third wider, for a photograph that is carrying the passage rather than
   resting the eye beside it. Kept under half the column so there is still a
   readable measure of text to its left. */
.site-figure.is-aside.is-wide {
  width: 28rem;
}

/* The book scans that take this treatment are portrait, and a portrait figure
   as wide as a landscape photograph is half again as tall — tall enough to
   outrun the paragraph beside it and leave the margin empty below. Narrower
   costs some detail and buys back both height and text width. */
.site-figure.is-aside:not(.is-photo) {
  width: 18rem;
}

/* A floated book figure keeps its caption but loses the height cap: inside an
   18rem column the width is already the binding constraint, and the cap only
   letterboxes the tall scans this treatment exists for. */
.site-figure.is-aside:not(.is-photo) img {
  width: 100%;
  max-height: none;
}

/* Overrides the 26rem portrait cap: inside a 20rem float the image is already
   as wide as it can be, and the cap would otherwise leave it uncentred. */
.site-figure.is-aside.is-portrait,
.site-figure.is-aside img.is-photo-portrait {
  max-width: 100%;
}

/* A heading must never ride up alongside a floated photograph — it starts a
   new subject, and the reader needs the full width back. The contents list and
   the callouts are boxed, so they clear too.

   Scoped to the article rather than to a rich-text container: the export uses
   several different wrappers for body copy, and a heading in the wrong one was
   found overlapping a photograph. In every layout here that has no floats,
   `clear` does nothing. */
.main-wrapper h1,
.main-wrapper h2,
.main-wrapper h3,
.main-wrapper h4,
.main-wrapper .site-toc,
.main-wrapper .site-callout,
.main-wrapper .site-figure {
  clear: both;
}

/* Narrow enough that a 20rem float would leave an unreadable ribbon of text,
   so the photograph goes back to being a block. */
@media screen and (max-width: 52rem) {
  /* Every width above has to be named here: each is more specific than a bare
     .site-figure.is-aside, so a shorter selector would lose to it. */
  .site-figure.is-aside,
  .site-figure.is-aside.is-wide,
  .site-figure.is-aside:not(.is-photo) {
    float: none;
    width: auto;
    max-width: 100%;
    padding-left: 0;
    margin: 2.5rem 0;
    align-self: stretch;
  }

  /* Back to a block, so the height cap that keeps a tall scan on screen
     applies again. */
  .site-figure.is-aside:not(.is-photo) img {
    width: auto;
    max-height: min(40rem, 70vh);
  }
}

/* The free-consultation hero is a two-column grid whose second column held an
   image. That image was a screenshot of another institution's site and has been
   removed (see chrome.PAGE_COPY), which left the card stranded beside an empty
   half at desktop widths. Collapse the grid wherever the image column is gone.
   Browsers without :has() fall back to the old two-column layout. */
.header_content-wrap.is-update:not(:has(.header_slide-wrapper)) {
  grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   Contrast safety net

   Several Webflow heading classes hard-code a dark text colour, which makes
   them unreadable if they land inside a dark band. Anything on a dark
   background inherits its colour instead.
   -------------------------------------------------------------------------- */

.cta-gradient-wrapper h1, .cta-gradient-wrapper h2, .cta-gradient-wrapper h3,
.site-section.is-blue h1, .site-section.is-blue h2, .site-section.is-blue h3,
.site-hero h1, .site-hero h2, .site-hero h3,
.site-footer h1, .site-footer h2, .site-footer h3 {
  color: inherit;
}

/* Only the gradient card is dark; .cta_component is a light card. */
.cta-gradient-wrapper {
  color: #fff;
}

/* Webflow's link blue sits at about 4.4:1 on the tinted callout fills. */
.site-callout a,
.site-prose .site-callout a {
  color: var(--site-ink);
  text-decoration: underline;
}

/* Breadcrumbs shipped at #b3b3b3, about 2:1 against white. */
.breadcrumb_link {
  color: var(--site-muted);
}

.breadcrumb_link:hover {
  color: var(--site-ink);
}

.site-hero .breadcrumb_link {
  color: rgba(255, 255, 255, 0.82);
}

.site-hero .breadcrumb_link:hover,
.site-hero .breadcrumb_text {
  color: #fff;
}

/* Article sub-heading, one level below a section heading. The selector has to
   out-specify `.text-rich-text h3`, which sets 2.25rem. */
.text-rich-text h3.article-subheading,
.blog-post-content_content h3.article-subheading,
h3.article-subheading {
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--site-ink);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   On-page contents
   -------------------------------------------------------------------------- */

.site-toc {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--site-border);
  border-radius: 0.75rem;
  background: var(--site-surface);
}

.site-toc__title {
  margin: 0 0 0.85rem;
  color: var(--site-ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.site-toc__list {
  columns: 2;
  column-gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-toc__list li {
  margin: 0 0 0.5rem;
  break-inside: avoid;
}

.site-toc__list a {
  color: var(--site-ink);
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
}

.site-toc__list a:hover {
  color: var(--site-accent);
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .site-toc__list {
    columns: 1;
  }
}

/* Keep an anchored heading clear of the sticky navigation. */
.text-rich-text h2[id],
.blog-post-content_content h2[id] {
  scroll-margin-top: 6rem;
}

/* --------------------------------------------------------------------------
   Callouts
   -------------------------------------------------------------------------- */

.site-callout {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--site-accent);
  border-radius: 0 0.75rem 0.75rem 0;
  background: var(--site-accent-soft);
}

.site-callout__title {
  margin: 0 0 0.5rem;
  color: var(--site-ink);
  font-size: 1rem;
  font-weight: 600;
}

.site-callout p:last-child,
.site-callout ul:last-child {
  margin-bottom: 0;
}

.site-callout.is-blue {
  border-left-color: var(--site-ink);
  background: var(--site-surface-blue);
}

/* --------------------------------------------------------------------------
   Provider cards on Our Team pages
   -------------------------------------------------------------------------- */

.provider-head {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.provider-head__photo {
  flex: 0 0 auto;
  width: 8.5rem;
  height: 8.5rem;
  object-fit: cover;
  border-radius: 50%;
  background: var(--site-surface);
}

.provider-head__text {
  min-width: 0;
}

.provider-head__text h5,
.provider-head__text h1,
.provider-head__text h2,
.provider-head__text h4 {
  margin: 0 0 0.35rem;
}

/* A provider's name is a section of the department page, not the page's own
   title, so it sits below the <h1> chrome.add_section_heading inserts. The
   export sized both with .neurologists_title, which left the page heading and
   every name beneath it identical. */
.provider-head__text h2.neurologists_title {
  font-size: 2rem;
  line-height: 1.2;
}

h1.neurologists_title {
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 1.25rem;
}

@media screen and (max-width: 767px) {
  h1.neurologists_title {
    font-size: 2.25rem;
  }

  .provider-head__text h2.neurologists_title {
    font-size: 1.75rem;
  }
}

.provider-head__role {
  margin: 0;
  color: var(--site-muted);
  font-size: 1rem;
  line-height: 1.45;
}

@media screen and (max-width: 479px) {
  .provider-head {
    flex-direction: column;
    gap: 1rem;
  }

  .provider-head__photo {
    width: 7rem;
    height: 7rem;
  }
}

/* --------------------------------------------------------------------------
   Page sections used by the new landing pages
   -------------------------------------------------------------------------- */

.site-section {
  padding: 4.5rem 0;
}

.site-section.is-tight {
  padding: 3rem 0;
}

.site-section.is-surface {
  background: var(--site-surface);
}

.site-section.is-blue {
  background: var(--site-ink);
  color: #fff;
}

/* Buttons keep their own colours; only body links invert. */
.site-section.is-blue a:not(.button) {
  color: #fff;
}

.site-section__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--site-accent);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-section.is-blue .site-section__eyebrow {
  color: #8fd6c9;
}

.site-section__title {
  margin: 0 0 1rem;
  color: var(--site-ink);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.2;
}

.site-section.is-blue .site-section__title {
  color: #fff;
}

.site-section__lead {
  max-width: 46rem;
  margin: 0 0 2.5rem;
  color: var(--site-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

.site-section.is-blue .site-section__lead {
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Hero for landing pages
   -------------------------------------------------------------------------- */

.site-hero {
  padding: 3.5rem 0 4rem;
  background: var(--site-ink);
  color: #fff;
}

.site-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

.site-hero__eyebrow {
  margin: 0 0 1rem;
  color: #8fd6c9;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-hero__title {
  margin: 0 0 1.25rem;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.1;
}

.site-hero__lead {
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.2rem;
  line-height: 1.6;
}

.site-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  background: #fff;
}

.site-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-hero__narrow {
  max-width: 44rem;
}

/* Secondary button for light backgrounds. The export's .button.is-secondary
   is white-on-transparent and only works on the dark hero. */
.button.is-outline-dark {
  border: 1px solid var(--site-ink);
  background-color: transparent;
  color: var(--site-ink);
}

.button.is-outline-dark:hover {
  background-color: var(--site-ink);
  color: #fff;
}

/* Standfirst under a light-hero heading, matching the article measure. */
.site-hero__standfirst {
  max-width: 44rem;
  margin: 1rem 0 0;
  color: var(--site-muted);
  font-size: 1.15rem;
  line-height: 1.6;
}

.section-hero .site-hero__actions {
  margin-top: 1.75rem;
}

@media screen and (max-width: 991px) {
  .site-hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-hero__title {
    font-size: 2.25rem;
  }

  .site-section__title {
    font-size: 1.875rem;
  }
}

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */

.site-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
}

.site-stat {
  padding: 1.5rem;
  border: 1px solid var(--site-border);
  border-radius: 0.75rem;
  background: #fff;
}

.site-section.is-blue .site-stat {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.site-stat__value {
  color: var(--site-ink);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
}

.site-section.is-blue .site-stat__value {
  color: #fff;
}

.site-stat__label {
  margin-top: 0.5rem;
  color: var(--site-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.site-section.is-blue .site-stat__label {
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.site-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}

.site-cards.is-two {
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

/* Five campuses. At the default track width they land four-then-one, which
   reads as a mistake; a wider track gives three and two. */
.site-cards.is-locations {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.site-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--site-border);
  border-radius: 0.875rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

a.site-card:hover {
  border-color: var(--site-ink);
  box-shadow: 0 0.75rem 1.75rem rgba(3, 30, 71, 0.09);
  transform: translateY(-2px);
}

.site-card__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--site-accent);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-card__title {
  margin: 0 0 0.6rem;
  color: var(--site-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.site-card__text {
  margin: 0;
  color: var(--site-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.site-card__more {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--site-ink);
  font-size: 0.95rem;
  font-weight: 500;
}

.site-card__media {
  margin: -1.75rem -1.75rem 1.25rem;
  border-radius: 0.875rem 0.875rem 0 0;
  overflow: hidden;
}

.site-card__media img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

.site-card__media.is-contain img {
  object-fit: contain;
  padding: 0.75rem;
}

/* An address inside a card: the same weight as the body text, not italic. */
.site-card__address {
  margin: 0 0 0.9rem;
  color: var(--site-muted);
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Campus maps
   -------------------------------------------------------------------------- */

.site-maps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.5rem;
}

.site-map {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--site-border);
  border-radius: 0.875rem;
  background: #fff;
  overflow: hidden;
}

.site-map iframe {
  display: block;
  width: 100%;
  height: 15rem;
  border: 0;
}

.site-map__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.site-map__name {
  margin-bottom: 0.35rem;
  color: var(--site-ink);
  font-weight: 600;
}

.site-map__address {
  margin: 0 0 0.75rem;
  color: var(--site-muted);
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.6;
}

.site-map__body a {
  color: var(--site-ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.site-map__body a:hover {
  color: var(--site-accent);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Campus chooser
   -------------------------------------------------------------------------- */

/* Without JavaScript these are jump links to the sections below, which is how
   the page is authored; site-tabs.js turns them into a tab strip. */
.site-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}

.site-chooser a {
  display: block;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--site-border);
  border-radius: 999px;
  background: #fff;
  color: var(--site-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.site-chooser a:hover {
  border-color: var(--site-ink);
}

.site-chooser a.is-active {
  border-color: var(--site-ink);
  background: var(--site-ink);
  color: #fff;
}

.site-chooser a span {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Hero slider

   Each slide's image is a fixed 735/458 landscape crop, which the export gets
   from `aspect-ratio` plus `object-fit: cover` and `width: 100%`. That only
   holds while the height is auto. The export's own slide images carry no
   width/height attributes so it always was; a photograph placed from the
   catalogue carries both, and an intrinsic `height` attribute is a
   presentational hint that nothing in the export overrides — it beats
   `aspect-ratio` and stretches the slot to the source's full height. A
   portrait photograph on slide four came out 1504px tall against the 487px
   every other slide draws.
   -------------------------------------------------------------------------- */

.header_slide-image {
  height: auto;
}

/* --------------------------------------------------------------------------
   Section pager (previous / next page within a section)

   Two columns even when only one link exists, so "next" stays on the right at
   the start of a section and "previous" on the left at the end of one — the
   position is half of what tells a reader which direction a link goes.
   -------------------------------------------------------------------------- */

.site-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--site-border);
}

.site-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--site-border);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--site-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-pager__link:hover {
  border-color: var(--site-accent);
  box-shadow: 0 2px 12px rgba(3, 30, 71, 0.07);
}

.site-pager__link.is-next {
  grid-column: 2;
  text-align: right;
}

.site-pager__dir {
  color: var(--site-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.site-pager__page {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
}

.site-pager__link:hover .site-pager__page {
  color: var(--site-accent);
}

/* Two cards side by side stop being readable well before the site's own
   breakpoint, so this one is the pager's. */
@media screen and (max-width: 40rem) {
  .site-pager {
    grid-template-columns: 1fr;
  }

  .site-pager__link.is-next {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   Link list (compact index of section pages)
   -------------------------------------------------------------------------- */

.site-linklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-linklist a {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--site-border);
  color: var(--site-ink);
  font-size: 1rem;
  text-decoration: none;
}

.site-linklist a:hover {
  color: var(--site-accent);
}

/* Single-column variant for use inside a card. */
.site-linklist.is-stacked {
  grid-template-columns: 1fr;
  gap: 0;
}

/* An entry the program has named but not yet produced. It stays listed —
   the catalogue is also the plan — but reads as text rather than as a link
   that failed. Each section says what to do about these in the meantime. */
.site-linklist .is-pending {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--site-border);
  color: var(--site-muted);
  font-size: 1rem;
}

.site-table__caption {
  margin-bottom: 1rem;
  color: var(--site-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Numbered steps / timeline
   -------------------------------------------------------------------------- */

.site-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-step {
  position: relative;
  padding: 0 0 2.25rem 3.5rem;
  border-left: 2px solid var(--site-border);
}

.site-step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.site-step__marker {
  position: absolute;
  top: 0;
  left: -1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--site-ink);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.site-step__when {
  margin: 0.35rem 0 0.4rem;
  color: var(--site-accent);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.site-step__title {
  margin: 0 0 0.5rem;
  color: var(--site-ink);
  font-size: 1.3rem;
  font-weight: 600;
}

.site-step__body {
  margin: 0;
  color: var(--site-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.site-step__body p {
  margin: 0 0 0.75rem;
}

.site-step__body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */

.site-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.site-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  background: #fff;
  font-size: 1rem;
}

.site-table th,
.site-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--site-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.site-table thead th {
  border-bottom: 2px solid var(--site-ink);
  color: var(--site-ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.site-table tbody th {
  width: 14rem;
  color: var(--site-ink);
  font-weight: 500;
}

.site-table td {
  color: var(--site-muted);
}

.site-table tbody tr:nth-child(odd) {
  background: var(--site-surface);
}

/* The compact variant is for a comparison that sits inside an article column
   rather than in a section band of its own. treatment-options.html has the full
   width of `container-large` for three columns; the manufacturer comparison on
   dbs/life-with-dbs.html has four columns inside the 46rem article measure, so
   the row labels give up 5rem and the cells a little padding. Under 40rem the
   wrapper scrolls, which is the same behaviour the wide table already has on a
   phone. */
.site-table.is-compact {
  min-width: 40rem;
  font-size: 0.95rem;
}

.site-table.is-compact th,
.site-table.is-compact td {
  padding: 0.8rem 0.9rem;
}

.site-table.is-compact tbody th {
  width: 9rem;
}

.site-article-table {
  margin: 2.5rem 0;
}

/* Several cells hold two to four distinct capabilities, and running them
   together into a sentence loses which is which. Webflow's normalize indents a
   list by 40px, which a table cell cannot spare. */
.site-table__list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.site-table__list li + li {
  margin-top: 0.4rem;
}

.site-table__note {
  margin-top: 1rem;
  color: var(--site-muted);
}

/* --------------------------------------------------------------------------
   Two-column feature row
   -------------------------------------------------------------------------- */

.site-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 3rem;
  align-items: center;
}

.site-split__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--site-border);
  border-radius: 0.875rem;
  background: #fff;
}

.site-prose {
  color: var(--site-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.site-prose p {
  margin: 0 0 1.1rem;
}

.site-prose h3 {
  margin: 2rem 0 0.75rem;
  color: var(--site-ink);
  font-size: 1.4rem;
  font-weight: 600;
}

.site-prose h3:first-child {
  margin-top: 0;
}

.site-prose ul,
.site-prose ol {
  margin: 0 0 1.1rem;
  padding-left: 1.25rem;
}

.site-prose li {
  margin-bottom: 0.5rem;
}

/* Buttons keep their own colours; only body links take the prose treatment.
   Without the exclusion a `.button` inside prose is navy text on the navy
   button fill, which renders as an empty rectangle. */
.site-prose a:not(.button) {
  color: var(--site-ink);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Multi-step forms
   -------------------------------------------------------------------------- */

/* Every other button group carries a Webflow node id, and it is the id — not
   the class — that right-aligns it in the form grid. The records step added
   in chrome.py has no such id, so it asks for the same alignment by name. */
.multi-form_button-group.is-end {
  justify-self: end;
}

/* The records step is guidance rather than fields, so it reads as prose. Its
   labels are group titles, not labels for a control. */
.multi-form_fields-wrapper.is-form-note .form_label {
  margin: 1.75rem 0 0.4rem;
  color: var(--site-ink);
  font-size: 1.05rem;
}

.multi-form_fields-wrapper.is-form-note .form_label:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

/* The two navigators, each with her own name and title. The export had a
   single photograph of three people captioned "Jackie & Sandra".

   The wrapper is a two-column row in the export — photo beside text — which
   would squeeze two portraits into the width of one. With a pair it stacks:
   the portraits across the top, the description under them. */
.coordinator_wrapper.is-pair {
  display: block;
  text-align: left;
}

.site-coordinators {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.site-coordinator {
  display: flex;
  flex: 1 1 8rem;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 12rem;
  margin: 0;
}

.site-coordinator__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.875rem;
  background: var(--site-surface);
  object-fit: cover;
  object-position: center top;
}

.site-coordinator figcaption {
  text-align: left;
}

.site-coordinator__name {
  color: var(--site-ink);
  font-weight: 600;
  line-height: 1.3;
}

.site-coordinator__role {
  color: var(--site-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* The coordination card's phone and email are dialable and mailable, so they
   read as links rather than as the plain text the export had there. */
.contact_item-link {
  color: var(--site-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact_item-link:hover,
.contact_item-link:focus-visible {
  color: var(--purple);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 4rem 0 2rem;
  background: var(--site-ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 3rem;
}

.site-footer__logo {
  width: 9rem;
  height: auto;
}

.site-footer__blurb {
  margin: 1.25rem 0;
  max-width: 24rem;
  line-height: 1.6;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-footer__phone {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
}

.site-footer__hours {
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem;
}

.site-footer__heading {
  margin: 0 0 0.9rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  margin-bottom: 0.55rem;
}

.site-footer__link {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.site-footer__link:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__locations {
  display: grid;
  /* Narrow enough that all five campuses sit on one row at desktop width. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__location-name {
  margin-bottom: 0.4rem;
  color: #fff;
  font-weight: 600;
}

.site-footer__address {
  margin: 0 0 0.5rem;
  font-style: normal;
  line-height: 1.6;
}

.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__disclaimer {
  max-width: 60rem;
  margin: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* The copyright line used to hold the left of this row, with the policy links
   pushed to the right by space-between. With it gone there is one child, so the
   links are placed directly rather than left floating in the middle. */
.site-footer__legal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

@media screen and (max-width: 767px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}