@import url("https://use.typekit.net/mmo4esg.css");
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800;900&family=Fraunces:opsz,wght,SOFT@9..144,300..700,0..100&family=Montserrat:wght@400;500;600;700&display=swap");

/* Motion Church components
   Grovio and New Spirit are the brand faces. Unbounded and Fraunces stand in
   wherever the licensed fonts are not installed. */

:root
{
  /* ---------- Motion laws (one physics model for every interaction) ----------
     1. Everything that moves rides one spring: stiffness 400, damping ratio 0.8
        (about 1.5% overshoot, no visible bounce). --mc-spring is that spring's exact curve.
     2. Size sets weight. Same curve, heavier things take longer (time grows with the square root of mass):
        controls m=1 (420ms), cards and menus m=1.5 (520ms), surfaces and panels m=2.5 (670ms).
     3. Color, opacity, blur and borders never spring: they fade with --mc-ease in 180ms.
     4. Exits accelerate away with --mc-ease-exit in 240ms. Things leave faster than they arrive.
     5. One lift (2px) on hover, one press, one entrance (12px or 0.94 scale). Press is shared by every
        control (bundle.js, Press): dips 5px of its longest side, never below 0.94, in 110ms, and settles
        back with a small 1.025 overshoot over 380ms. Hover shrinks pressables to 0.97 in 150ms.
     6. Lists stagger 30ms per item on the way in and 15ms on the way out.
     7. Ambient loops are linear and slow. Reduced motion keeps state changes and drops movement. */
  --mc-spring: linear(0, 0.0524, 0.1707, 0.3197, 0.4657, 0.5987, 0.7117, 0.8052, 0.875, 0.9263, 0.9623, 0.9869, 1.0016, 1.0098, 1.0136, 1.0144, 1.0136, 1.0118, 1.0096, 1.0075, 1.0056, 1.004, 1.0027, 1.0017, 1);
  --mc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mc-ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
  --mc-dur-control: 420ms;
  --mc-dur-card: 520ms;
  --mc-dur-surface: 670ms;
  --mc-dur-fade: 180ms;
  --mc-dur-exit: 240ms;
  --mc-dur-press: 110ms;
  --mc-dur-release: 380ms;
  --mc-dur-hover: 150ms;
  --mc-stagger: 30ms;
  --mc-stagger-exit: 15ms;
  --mc-lift: -2px;
  --mc-hover-scale: 0.97;
  --mc-press: 0.94;
  --mc-enter-y: 12px;
  --mc-enter-scale: 0.94;
  /* Legacy names, kept so older markup still resolves to the same laws. */
  --mc-dur: var(--mc-dur-control);
  --mc-dur-fast: var(--mc-dur-fade);
  --mc-dur-slow: var(--mc-dur-surface);
  --mc-spring-soft: var(--mc-spring);
  --menu-ease: var(--mc-ease);
}

/* ---------- Corners: one radius scale, nested corners, squircles ----------
   Round base values; browsers that support corner-shape scale them by 1.6 because a squircle
   corner reads smaller than a round one at the same radius. Containers publish --r (their radius)
   and --inset (the gap to their children: padding + border, or inset). A nested shape uses
   max(floor, calc(var(--r) - var(--inset))), so both curves share a center. A nested shape that
   holds its own children publishes --r2 / --inset2 (a property can't be redefined from itself).
   Pills and circles stay corner-shape: round, except in buttons, the email sign-up, the nav and the sermon pip,
   which keep squircle pills and squircle icon buttons. Page sections are bands, not containers. */

:root
{
  --sq: 1;
  --radius-floor-sm: 4px;
  --radius-floor: 6px;
  --radius-floor-lg: 8px;
}

@supports (corner-shape: squircle)
{
  :root
  {
    --sq: 1.6;
  }
}

:root
{
  --radius-xs: calc(6px * var(--sq));
  --radius-sm: calc(8px * var(--sq));
  --radius-md: calc(12.5px * var(--sq));
  --radius-lg: calc(20px * var(--sq));
  --radius-xl: calc(27.5px * var(--sq));
  --radius-pill: 999px;
}

[style*="border-radius"]:not([style*="50%"]):not([style*="999px"]):not([style*="radius-pill"]),
.mc-card,
.mc-card__media,
.mc-notch,
.mc-notch__tab-inner,
.mc-mask--tab,
.mc-mask--wave,
.mc-wave,
.mc-shape,
.mc-drawer,
.mc-drawer__link,
.mc-menu,
.mc-menu__item,
.mc-menu__feature,
.mc-input,
.mc-select,
.mc-textarea,
.mc-check input:not([type="radio"]),
.mc-panel,
.mc-accordion details,
.mc-accordion summary,
.mc-cluster__cell,
.menu-panel,
.menu-panel::before,
.menu-item
{
  corner-shape: squircle;
}

/* Buttons, the email sign-up, the nav, the pop-ups and the sermon pip keep squircle pills and squircle icon buttons. */
.mc-btn,
.mc-btn *,
.mc-signup,
.mc-nav,
.mc-nav *,
.mc-modal__box,
.mc-modal__box *,
.mc-pip,
.mc-pip *
{
  corner-shape: squircle;
}

html
{
  background: var(--surface);
  color: var(--ink);
}

body
{
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Type helpers ---------- */

.mc-display
{
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "opsz" 72;
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

.mc-subtitle
{
  font-family: var(--font-subtitle);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0;
}

.mc-eyebrow
{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-eyebrow);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

.mc-eyebrow svg
{
  width: 12px;
  height: 12px;
  flex: none;
  fill: var(--action);
}

/* ---------- Button: pill + arrow chip ---------- */

.mc-btn
{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 6px 6px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--on-action);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--mc-dur-control) var(--mc-spring),
    background-color var(--mc-dur-fade) var(--mc-ease);
}

.mc-btn__chip
{
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--on-action);
  color: var(--action);
}

/* Only the arrow turns on hover; the chip itself stays put. */
.mc-btn__chip svg
{
  width: 16px;
  height: 16px;
  transition: transform var(--mc-dur-control) var(--mc-spring);
}

.mc-btn:hover .mc-btn__chip svg,
.mc-btn:focus-visible .mc-btn__chip svg
{
  transform: rotate(45deg);
}

.mc-btn:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.mc-btn--sky
{
  background: var(--sky);
  color: var(--navy);
}

.mc-btn--sky .mc-btn__chip
{
  background: var(--navy);
  color: var(--sky);
}

.mc-btn--outline
{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.mc-btn--outline .mc-btn__chip
{
  background: var(--ink);
  color: var(--surface);
}

.mc-btn--lg
{
  padding: 8px 8px 8px 28px;
  font-size: 16px;
}

.mc-btn--lg .mc-btn__chip
{
  width: 44px;
  height: 44px;
}

/* ---------- Media card: rounded card with an inset photo ---------- */

.mc-card
{
  --r: var(--radius-lg);
  --inset: 12px;
  --c: var(--action);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--inset);
  border-radius: var(--r);
  background: var(--c);
  color: var(--on-action);
}

.mc-card--sky
{
  --c: var(--sky);
  color: var(--navy);
}

.mc-card--teal
{
  --c: var(--teal);
  color: var(--cream);
}

.mc-card--tint
{
  --c: var(--surface-tint);
  color: var(--ink);
}

.mc-card__media
{
  flex: none;
  width: 38%;
  max-width: 180px;
  aspect-ratio: 4 / 5;
  border-radius: max(var(--radius-floor-lg), calc(var(--r) - var(--inset)));
  overflow: hidden;
}

.mc-card__body
{
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  padding-right: var(--space-4);
}


/* ---------- Notch frame (inverted-corner cut-out) ---------- */

.mc-notch
{
  --r: var(--radius-lg);
  --notch-bg: var(--surface);
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-tint);
}

.mc-notch__tab
{
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0 10px 10px;
  background: var(--notch-bg);
  border-bottom-left-radius: var(--r);
}

.mc-notch__tab::before,
.mc-notch__tab::after
{
  content: "";
  position: absolute;
  width: var(--r);
  height: var(--r);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - 0.5px), var(--notch-bg) var(--r));
}

.mc-notch__tab::before
{
  top: 0;
  left: calc(var(--r) * -1);
}

.mc-notch__tab::after
{
  top: 100%;
  right: 0;
}

.mc-notch__tab-inner
{
  display: grid;
  place-items: center;
  min-width: 120px;
  padding: 14px 18px;
  border-radius: max(var(--radius-floor), calc(var(--r) - 8px));
  background: var(--sky);
  color: var(--navy);
  text-align: center;
}

/* ---------- Arc portrait (circle + diagonal half circle) ---------- */

.mc-arc
{
  position: relative;
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
}

.mc-arc::before
{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c, var(--blue));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath transform='rotate%28-45 50 50%29' d='M14 50L86 50Q100 50 98.00 64.00A50 50 0 0 1 2.00 64.00Q0 50 14 50Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath transform='rotate%28-45 50 50%29' d='M14 50L86 50Q100 50 98.00 64.00A50 50 0 0 1 2.00 64.00Q0 50 14 50Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: translate(5%, 5%) scale(1.08);
}

.mc-arc__img
{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-tint);
}

@keyframes mc-spin
{
  to
  {
    transform: rotate(360deg);
  }
}

/* ---------- Image masks ---------- */

.mc-mask
{
  overflow: hidden;
  background: var(--surface-tint);
}

/* Arch: a true semicircle top on a fixed 3:4 frame (percent radii keep it circular, never oval). */
.mc-mask--arch
{
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 50% 50% var(--radius-md) var(--radius-md) / 37.5% 37.5% var(--radius-md) var(--radius-md);
}

.mc-mask--arch-tall
{
  aspect-ratio: 2 / 3;
  border-radius: 50% 50% var(--radius-md) var(--radius-md) / 33.333% 33.333% var(--radius-md) var(--radius-md);
}

.mc-mask--pill
{
  border-radius: var(--radius-pill);
}

.mc-mask--circle
{
  border-radius: 50%;
}

.mc-mask--tab
{
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
}

/* Wave edge: bundle.js draws it as one smooth clip-path sized to the element (no tiling).
   Without the script it falls back to a plain rounded rectangle. */
.mc-mask--wave,
.mc-wave
{
  border-radius: var(--radius-lg);
}

.mc-mask--wave[style*="clip-path"],
.mc-wave[style*="clip-path"]
{
  border-radius: 0;
}

/* ---------- Photo placeholder for mockups ---------- */

.mc-ph
{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 80px;
  background: var(--surface-tint);
}

.mc-ph canvas
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.mc-ph__label
{
  position: absolute;
  left: 14px;
  top: 12px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce)
{
  .mc-btn,
  .mc-btn__chip,
  .mc-btn__chip svg
  {
    transition: none;
  }
}

/* ---------- Compound frames (clip-path drawn by bundle.js) ---------- */

.mc-shape
{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-tint);
}

.mc-shape[data-mc-shape]
{
  border-radius: 0;
}

.mc-cluster
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 3 / 2;
  position: relative;
}

.mc-cluster__fill
{
  position: absolute;
  inset: 0;
  background: var(--c, var(--action));
}

.mc-cluster__cell
{
  --r: var(--radius-lg);
  --inset: 12px;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  color: var(--on-action);
}

/* ---------- Ring badge (circular text) ---------- */

.mc-ring
{
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  aspect-ratio: 1;
}

.mc-ring__text
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mc-ring__disc
{
  fill: var(--spark);
}

.mc-ring__disc--sky
{
  fill: var(--sky);
}

.mc-ring__text text
{
  fill: var(--navy);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mc-ring__core
{
  position: relative;
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.05;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference)
{
  .mc-ring--spin .mc-ring__text
  {
    animation: mc-spin 18s linear infinite;
  }
}

/* ---------- Accents ---------- */

.mc-inline-pill
{
  display: inline-block;
  width: 1.9em;
  height: 0.78em;
  margin: 0 0.08em;
  border-radius: var(--radius-pill);
  overflow: hidden;
  vertical-align: 0.02em;
  background: var(--surface-tint);
}

.mc-inline-pill > *
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-swoosh
{
  padding-bottom: 0.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M5 9C60 3 140 2 195 6' fill='none' stroke='%23F2B33D' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% 0.2em no-repeat;
}

.mc-asterisk
{
  display: inline-block;
  width: 64px;
  height: 64px;
  color: var(--spark);
}

.mc-asterisk svg
{
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mc-tag
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mc-tag svg
{
  width: 12px;
  height: 12px;
  color: var(--link);
}

/* ---------- Wave pattern and top wave ---------- */

.mc-wavebg
{
  background-color: var(--c, var(--sky));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 56'%3E%3Cpath d='M-120 28C-80 50 -40 50 0 28C40 6 80 6 120 28C160 50 200 50 240 28C280 6 320 6 360 28' fill='none' stroke='%23FBF9F4' stroke-opacity='.14' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 240px 56px;
}

/* Top wave: .mc-wave.mc-wave--top mirrors the wave edge onto the top of a band. */

/* =========================================================
   Navigation
   ========================================================= */

.mc-nav
{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px 8px 8px 24px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: none;
}

/* Sticky header: wrap the nav in header.mc-header to pin it to the top of the window */
.mc-header
{
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 16px 32px 0;
  background: transparent;
}

.mc-nav__brand
{
  flex: none;
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
}

.mc-nav__links
{
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.mc-nav__item
{
  position: relative;
}

.mc-nav__link
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--mc-dur-fade) var(--mc-ease);
}

.mc-nav__link::-webkit-details-marker
{
  display: none;
}

.mc-nav__link:hover,
.mc-nav__link[aria-current="page"],
.mc-nav__item[open] > .mc-nav__link
{
  background: var(--surface-tint);
}

.mc-nav__link:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mc-chevron
{
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform var(--mc-dur-control) var(--mc-spring);
}

[open] > summary .mc-chevron
{
  transform: rotate(180deg);
}

.mc-nav__item > .mc-menu
{
  position: absolute;
  z-index: 20;
  top: calc(100% + 28px);
  left: 50%;
  transform: translateX(-50%);
}

.mc-nav__toggle
{
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.mc-nav__toggle::-webkit-details-marker
{
  display: none;
}

.mc-nav__toggle svg
{
  width: 22px;
  height: 22px;
}

.mc-nav__toggle:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mc-nav--compact .mc-nav__links,
.mc-nav--compact .mc-nav__cta
{
  display: none;
}

.mc-nav--compact .mc-nav__toggle
{
  display: grid;
}

@media (max-width: 860px)
{
  .mc-nav__links,
  .mc-nav__cta
  {
    display: none;
  }

  .mc-nav__toggle
  {
    display: grid;
  }
}

/* Mobile drawer: big Grovio links in a rounded panel under the bar. */
.mc-drawer
{
  --r: var(--radius-xl);
  --inset: var(--space-4);
  display: grid;
  gap: var(--space-2);
  padding: var(--inset);
  border-radius: var(--r);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lift);
}

.mc-drawer__link
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: max(var(--radius-floor-lg), calc(var(--r) - var(--inset)));
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "opsz" 72;
  font-size: 24px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.mc-drawer__link:hover,
.mc-drawer__link[aria-current="page"]
{
  background: var(--surface-tint);
}

.mc-drawer .mc-btn
{
  justify-content: space-between;
  margin-top: var(--space-2);
}

/* =========================================================
   Menus and dropdowns
   ========================================================= */

.mc-menu
{
  --r: var(--radius-lg);
  --inset: 8px;
  display: grid;
  gap: 2px;
  min-width: 260px;
  padding: var(--inset);
  border-radius: var(--r);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lift);
}

.mc-menu__item
{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: max(var(--radius-floor), calc(var(--r) - var(--inset)));
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mc-menu__item:hover,
.mc-menu__item:focus-visible
{
  background: var(--surface-tint);
  outline: none;
}

.mc-menu__item:focus-visible
{
  box-shadow: inset 0 0 0 2px var(--focus);
}

.mc-menu__icon
{
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--link);
}

.mc-menu__icon svg
{
  width: 20px;
  height: 20px;
}

.mc-menu__text
{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mc-menu__title
{
  font-weight: 600;
  line-height: 1.2;
}

.mc-menu__desc
{
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-muted);
}

.mc-menu__check
{
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--link);
  visibility: hidden;
}

.mc-menu__item[aria-checked="true"]
{
  font-weight: 600;
}

.mc-menu__item[aria-checked="true"] .mc-menu__check
{
  visibility: visible;
}

.mc-menu__divider
{
  height: 1px;
  margin: 6px 12px;
  background: var(--line);
}

.mc-menu--mega
{
  grid-template-columns: 1fr 1fr 200px;
  gap: 2px 4px;
  width: 680px;
  padding: 10px;
}

.mc-menu__feature
{
  grid-column: 3;
  grid-row: 1 / span 3;
  position: relative;
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 200px;
  padding: 16px;
  overflow: hidden;
  border-radius: max(var(--radius-floor-lg), calc(var(--r) - var(--inset)));
  background: var(--sky);
  color: var(--navy);
  text-decoration: none;
}

.mc-menu__feature canvas
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mc-menu__feature > *:not(canvas)
{
  position: relative;
}

/* =========================================================
   Forms
   ========================================================= */

.mc-field
{
  display: grid;
  gap: 8px;
  min-width: 0;
}

.mc-label
{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.mc-label__opt
{
  font-weight: 400;
  color: var(--ink-muted);
}

.mc-input,
.mc-select,
.mc-textarea
{
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid var(--field-line);
  border-radius: max(var(--radius-floor), calc(var(--r, var(--radius-md)) - var(--inset, 0px)));
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--mc-dur-fade) var(--mc-ease);
}

.mc-textarea
{
  min-height: 128px;
  padding: 14px 18px;
  resize: vertical;
}

.mc-input::placeholder,
.mc-textarea::placeholder
{
  color: var(--ink-muted);
  opacity: 1;
}

.mc-input:hover,
.mc-select:hover,
.mc-textarea:hover
{
  border-color: var(--ink-muted);
}

.mc-input:focus-visible,
.mc-select:focus-visible,
.mc-textarea:focus-visible
{
  border-color: var(--action);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mc-input:disabled,
.mc-select:disabled,
.mc-textarea:disabled
{
  opacity: 0.55;
  cursor: not-allowed;
}

.mc-select-wrap
{
  position: relative;
}

.mc-select
{
  padding-right: 52px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.mc-select-wrap > .mc-chevron
{
  position: absolute;
  top: 50%;
  right: 20px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  pointer-events: none;
  color: var(--ink);
}

.mc-help
{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.mc-help svg
{
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.mc-field--error .mc-input,
.mc-field--error .mc-select,
.mc-field--error .mc-textarea
{
  border-color: var(--danger);
}

.mc-field--error .mc-help
{
  color: var(--danger);
  font-weight: 600;
}

/* Checkbox and radio */
.mc-check
{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}

.mc-check input
{
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--field-line);
  border-radius: max(var(--radius-floor-sm), calc(var(--r, 8px) - var(--inset, 0px)));
  background: var(--surface-raised);
  cursor: pointer;
  transition:
    background-color var(--mc-dur-fade) var(--mc-ease),
    border-color var(--mc-dur-fade) var(--mc-ease);
}

.mc-check input[type="radio"]
{
  border-radius: 50%;
}

.mc-check input:checked
{
  border-color: var(--action);
  background: var(--action);
}

.mc-check input[type="checkbox"]:checked::after
{
  content: "";
  width: 14px;
  height: 14px;
  background: var(--on-action);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mc-check input[type="radio"]:checked::after
{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--on-action);
}

.mc-check input:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mc-check__hint
{
  display: block;
  font-size: 13px;
  color: var(--ink-muted);
}

/* Switch */
.mc-switch
{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

.mc-switch input
{
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--field-line);
  cursor: pointer;
  transition: background-color var(--mc-dur-fade) var(--mc-ease);
}

.mc-switch input::after
{
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-raised);
  transition: transform var(--mc-dur-control) var(--mc-spring);
}

.mc-switch input:checked
{
  background: var(--action);
}

.mc-switch input:checked::after
{
  transform: translateX(22px);
}

.mc-switch input:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Choice chips and segmented control (radio or checkbox inputs, no script) */
.mc-chips
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mc-chip
{
  position: relative;
}

.mc-chip input,
.mc-segment input
{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mc-chip span
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 2px solid var(--field-line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--mc-dur-fade) var(--mc-ease),
    border-color var(--mc-dur-fade) var(--mc-ease);
}

.mc-chip span:hover
{
  border-color: var(--ink-muted);
}

.mc-chip input:checked + span
{
  border-color: var(--action);
  background: var(--action);
  color: var(--on-action);
}

.mc-chip input:focus-visible + span,
.mc-segment input:focus-visible + span
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mc-segment
{
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
}

.mc-segment label
{
  position: relative;
}

.mc-segment label > span
{
  display: block;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--mc-dur-fade) var(--mc-ease),
    color var(--mc-dur-fade) var(--mc-ease);
}

.mc-segment input:checked + span
{
  background: var(--action);
  color: var(--on-action);
}

/* Form layout */
.mc-form
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}

.mc-form > .mc-form__full
{
  grid-column: 1 / -1;
}

@media (max-width: 600px)
{
  .mc-form
  {
    grid-template-columns: 1fr;
  }
}

.mc-panel
{
  --r: var(--radius-xl);
  --inset: var(--space-7);
  display: grid;
  gap: var(--space-6);
  padding: var(--inset);
  border-radius: var(--r);
  background: var(--surface-raised);
}

/* Inline signup: pill input with the button docked inside. */
.mc-signup
{
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 480px;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
}

.mc-signup input
{
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
}

.mc-signup input::placeholder
{
  color: var(--ink-muted);
  opacity: 1;
}

.mc-signup input:focus-visible
{
  outline: none;
}

.mc-signup:focus-within
{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* =========================================================
   Accordion (FAQ)
   ========================================================= */

.mc-accordion
{
  display: grid;
  gap: 10px;
}

.mc-accordion details
{
  --r: var(--radius-md);
  --inset: 0px;
  border-radius: var(--r);
  background: var(--surface-tint);
}

.mc-accordion summary
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-radius: max(var(--radius-floor-lg), calc(var(--r) - var(--inset)));
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.mc-accordion summary::-webkit-details-marker
{
  display: none;
}

.mc-accordion summary:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mc-accordion__icon
{
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--link);
  transition: transform var(--mc-dur-control) var(--mc-spring);
}

.mc-accordion__icon svg
{
  width: 16px;
  height: 16px;
}

.mc-accordion details[open] .mc-accordion__icon
{
  transform: rotate(45deg);
}

.mc-accordion__body
{
  padding: 0 22px 20px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.mc-accordion__body p
{
  margin: 0;
}

/* =========================================================
   Footer (always navy)
   ========================================================= */

.mc-footer
{
  display: grid;
  gap: var(--space-7);
  padding: calc(var(--space-8) + 22px) var(--space-7) var(--space-6);
  background: var(--cream);
  color: var(--navy);
}

.mc-footer__cols
{
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 760px)
{
  .mc-footer__cols
  {
    grid-template-columns: 1fr 1fr;
  }
}

.mc-footer__head
{
  margin: 0 0 12px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
}

.mc-footer__list
{
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-footer a
{
  color: var(--navy);
  text-decoration: none;
}

.mc-footer a:hover
{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer links keep a readable hover color on the cream footer
   (page-level link hovers turn cream, which disappears here). */
.mc-footer a:not(.mc-btn):not(.mc-menu__item):hover
{
  color: #0E5E59;
}

.mc-footer a:focus-visible
{
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 6px;
}

.mc-footer__muted
{
  color: rgba(11, 43, 42, 0.78);
  font-size: 14px;
  line-height: 1.45;
}

.mc-footer__social
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mc-footer__social a
{
  padding: 9px 16px;
  border: 2px solid rgba(11, 43, 42, 0.35);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
}

.mc-footer__social a:hover
{
  border-color: var(--navy);
  text-decoration: none;
}

.mc-footer__base
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(11, 43, 42, 0.2);
}

/* =========================================================
   Liquid Popover (menu01)
   Source selectors and strengths kept intact; the surface variables
   are mapped to Motion Church tokens, which already switch per theme,
   so the prefers-color-scheme override block is replaced by the tokens.
   ========================================================= */

.menu-demo {
  --menu-gap: 12px;
  --menu-bg: var(--surface-raised);
  --trigger-bg: var(--menu-bg);
  --trigger-active-color: var(--ink);
  --item-color: var(--ink);
  --item-muted: var(--ink-muted);
  --danger-color: var(--danger);
  --hover-bg: var(--surface-tint);
  --divider-color: var(--line);
  --blob-stroke: transparent;
  --focus-ring: var(--focus);
  --item-focus-ring: var(--focus);
  --blob-padding: 44px;
  --viewport-padding: 20px;
  --menu-item-height: 44px;
  --menu-ease: var(--mc-ease);
  --pop-y: var(--mc-enter-y);
  --corner-shape: superellipse(1.2);

  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  font-family: var(--font-body);
}

.menu-demo[data-placement="bottom"] {
  --pop-y: calc(var(--mc-enter-y) * -1);
}

.menu-demo *,
.menu-demo *::before,
.menu-demo *::after {
  box-sizing: border-box;
}

.menu-demo button {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-demo svg {
  display: block;
}

.menu-blob {
  position: absolute;
  z-index: 1;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 18px 28px rgba(11, 43, 42, 0.16));
}

.blob-shape {
  fill: var(--menu-bg);
  stroke: var(--blob-stroke);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.menu-trigger {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  corner-shape: var(--corner-shape);
  background: var(--trigger-bg);
  font-size: 15px;
  line-height: 1;
  transition:
    transform var(--mc-dur-hover) var(--mc-ease),
    color var(--mc-dur-fade) var(--mc-ease);
}

.menu-trigger span {
  color: var(--trigger-active-color);
  opacity: 0.5;
  transition: opacity var(--mc-dur-fade) var(--mc-ease);
}

.menu-trigger.is-icon {
  width: 52px;
  height: 52px;
  min-height: 0;
  gap: 4px;
  border-radius: 50%;
}

.menu-trigger.is-pill {
  padding-inline: 28px;
}

.menu-trigger:hover span,
.menu-trigger:focus-visible span,
.menu-demo.is-open .menu-trigger span {
  opacity: 1;
}

.menu-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 6px;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  width: max-content;
  min-width: 188px;
  max-width: min(280px, calc(100vw - 40px));
  padding: var(--inset);
  border: 0;
  --r: calc(12.5px * var(--sq));
  --inset: 4px;
  border-radius: var(--r);
  corner-shape: var(--corner-shape);
  background: transparent;
  font-size: 15px;
  pointer-events: none;
  isolation: isolate;
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 4px;
  left: 4px;
  z-index: 0;
  height: var(--menu-item-height);
  border-radius: max(var(--radius-floor), calc(var(--r) - 1px));
  corner-shape: var(--corner-shape);
  background: var(--hover-bg);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, var(--menu-hover-y, 4px), 0);
  transition:
    transform var(--mc-dur-card) var(--mc-spring),
    opacity var(--mc-dur-fade) var(--mc-ease);
}

.menu-panel.is-hover-instant::before {
  transition: none;
}

.menu-panel.is-hover-visible::before {
  opacity: 1;
}

.menu-panel.is-measuring {
  visibility: hidden;
  pointer-events: none;
  clip-path: none !important;
}

.menu-panel.is-measuring > * {
  animation: none !important;
}

.menu-demo.is-open .menu-panel {
  pointer-events: auto;
}

.menu-panel > * {
  position: relative;
  z-index: 1;
}

.menu-demo.is-open .menu-panel > * {
  animation:
    menu-pop-motion var(--mc-dur-card) var(--mc-spring) both,
    menu-pop-visual var(--mc-dur-fade) var(--mc-ease) both;
}

.menu-demo.is-open .menu-panel > :nth-child(1),
.menu-demo[data-placement="bottom"].is-open .menu-panel > :nth-last-child(1) {
  animation-delay: calc(var(--mc-stagger) * 0);
}

.menu-demo.is-open .menu-panel > :nth-child(2),
.menu-demo[data-placement="bottom"].is-open .menu-panel > :nth-last-child(2) {
  animation-delay: calc(var(--mc-stagger) * 1);
}

.menu-demo.is-open .menu-panel > :nth-child(3),
.menu-demo[data-placement="bottom"].is-open .menu-panel > :nth-last-child(3) {
  animation-delay: calc(var(--mc-stagger) * 2);
}

.menu-demo.is-open .menu-panel > :nth-child(4),
.menu-demo[data-placement="bottom"].is-open .menu-panel > :nth-last-child(4) {
  animation-delay: calc(var(--mc-stagger) * 3);
}

.menu-demo.is-open .menu-panel > :nth-child(5),
.menu-demo[data-placement="bottom"].is-open .menu-panel > :nth-last-child(5) {
  animation-delay: calc(var(--mc-stagger) * 4);
}

.menu-demo.is-open .menu-panel > :nth-child(6),
.menu-demo[data-placement="bottom"].is-open .menu-panel > :nth-last-child(6) {
  animation-delay: calc(var(--mc-stagger) * 5);
}

.menu-demo.is-closing .menu-panel > :nth-last-child(1),
.menu-demo[data-placement="bottom"].is-closing .menu-panel > :nth-child(1) {
  animation: menu-pop-out var(--mc-dur-exit) var(--mc-ease-exit) both;
  animation-delay: calc(var(--mc-stagger-exit) * 1);
}

.menu-demo.is-closing .menu-panel > :nth-last-child(2),
.menu-demo[data-placement="bottom"].is-closing .menu-panel > :nth-child(2) {
  animation: menu-pop-out var(--mc-dur-exit) var(--mc-ease-exit) both;
  animation-delay: calc(var(--mc-stagger-exit) * 2);
}

.menu-demo.is-closing .menu-panel > :nth-last-child(3),
.menu-demo[data-placement="bottom"].is-closing .menu-panel > :nth-child(3) {
  animation: menu-pop-out var(--mc-dur-exit) var(--mc-ease-exit) both;
  animation-delay: calc(var(--mc-stagger-exit) * 3);
}

.menu-demo.is-closing .menu-panel > :nth-last-child(4),
.menu-demo[data-placement="bottom"].is-closing .menu-panel > :nth-child(4) {
  animation: menu-pop-out var(--mc-dur-exit) var(--mc-ease-exit) both;
  animation-delay: calc(var(--mc-stagger-exit) * 4);
}

.menu-demo.is-closing .menu-panel > :nth-last-child(5),
.menu-demo[data-placement="bottom"].is-closing .menu-panel > :nth-child(5) {
  animation: menu-pop-out var(--mc-dur-exit) var(--mc-ease-exit) both;
  animation-delay: calc(var(--mc-stagger-exit) * 5);
}

.menu-demo.is-closing .menu-panel > :nth-last-child(6),
.menu-demo[data-placement="bottom"].is-closing .menu-panel > :nth-child(6) {
  animation: menu-pop-out var(--mc-dur-exit) var(--mc-ease-exit) both;
  animation-delay: calc(var(--mc-stagger-exit) * 6);
}

@keyframes menu-pop-motion {
  from {
    translate: 0 var(--pop-y);
  }

  to {
    translate: 0 0;
  }
}

@keyframes menu-pop-visual {
  from {
    opacity: 0;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes menu-pop-opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes menu-pop-out {
  from {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
  }

  to {
    opacity: 0;
    filter: blur(8px);
    translate: 0 var(--pop-y);
  }
}

@keyframes menu-pop-out-mobile {
  from {
    opacity: 1;
    translate: 0 0;
  }

  to {
    opacity: 0;
    translate: 0 var(--pop-y);
  }
}

.menu-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--menu-item-height);
  padding: 0 12px;
  border-radius: max(var(--radius-floor), calc(var(--r) - var(--inset)));
  color: var(--item-color);
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  transition:
    background-color var(--mc-dur-fade) var(--mc-ease),
    color var(--mc-dur-fade) var(--mc-ease),
    transform var(--mc-dur-control) var(--mc-spring);
}

.menu-item:focus-visible {
  background: var(--hover-bg);
  outline: 2px solid var(--item-focus-ring);
  outline-offset: -2px;
}

.menu-item.is-danger {
  color: var(--danger-color);
}

.item-icon {
  width: 18px;
  height: 18px;
  color: var(--item-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-item.is-danger .item-icon {
  color: var(--danger-color);
}

.menu-divider {
  display: block;
  height: 1px;
  margin: 4px 8px;
  background: var(--divider-color);
}

@media (max-width: 640px) {
  .menu-demo {
    --menu-item-height: 40px;
  }
}

@media (hover: none), (pointer: coarse) {
  .menu-demo.is-open .menu-panel > * {
    animation-name: menu-pop-motion, menu-pop-opacity;
  }

  .menu-demo.is-closing .menu-panel > * {
    animation-name: menu-pop-out-mobile;
  }
}

/* Motion Church additions for the liquid popover (new selectors only). */

/* Pill trigger used by the Dropdown: borderless; the surface itself melts into the blob when open. */
.menu-demo .menu-trigger.is-pill
{
  gap: 12px;
  min-height: 52px;
  padding-inline: 22px 20px;
  box-shadow: none;
  font-weight: 500;
  font-size: 16px;
  transition:
    transform var(--mc-dur-control) var(--mc-spring),
    box-shadow var(--mc-dur-fade) var(--mc-ease);
}

.menu-demo .menu-trigger.is-pill span
{
  opacity: 1;
}

.menu-demo.is-open .menu-trigger.is-pill
{
  box-shadow: inset 0 0 0 2px transparent;
}

.menu-demo .menu-trigger .mc-chevron
{
  color: var(--ink);
  transition: transform var(--mc-dur-control) var(--mc-spring);
}

.menu-demo.is-open .menu-trigger .mc-chevron
{
  transform: rotate(180deg);
}

.menu-demo .menu-trigger.is-icon
{
  box-shadow: none;
  transition:
    transform var(--mc-dur-control) var(--mc-spring),
    box-shadow var(--mc-dur-fade) var(--mc-ease);
}

.menu-demo.is-open .menu-trigger.is-icon
{
  box-shadow: inset 0 0 0 2px transparent;
}

.menu-item[aria-current="true"]
{
  font-weight: 600;
}

.menu-item .mc-menu__check
{
  margin-left: auto;
}

.menu-item.has-check
{
  grid-template-columns: minmax(0, 1fr) 18px;
}

/* =========================================================
   Motion: smooth, a little elastic, fluid
   ========================================================= */

/* Motion tokens live at the top of this file (Motion laws). */

/* Buttons: lift on hover, squish on press, spring back on release. */
.mc-btn
{
  transition:
    transform var(--mc-dur-hover) var(--mc-ease),
    background-color var(--mc-dur-fade) var(--mc-ease),
    box-shadow var(--mc-dur-fade) var(--mc-ease);
}

/* Menu triggers shrink on hover (they sink toward the finger). Buttons hold their size on
   hover so their labels never change size; only the arrow turns. The press itself is the shared
   Press in bundle.js: it animates the separate `scale` property, so it stacks on this hover
   transform instead of replacing it. Cards lift instead. */
.menu-trigger:hover
{
  transform: scale(var(--mc-hover-scale));
}

/* Glide: one pill that slides between nav links and segmented options. */
.has-glide
{
  position: relative;
  isolation: isolate;
}

.mc-glide
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--mc-dur-control) var(--mc-spring),
    width var(--mc-dur-control) var(--mc-spring),
    height var(--mc-dur-control) var(--mc-spring),
    opacity var(--mc-dur-fade) var(--mc-ease);
}

.mc-glide.is-instant
{
  transition: opacity var(--mc-dur-fade) var(--mc-ease);
}

.mc-nav__links.has-glide .mc-nav__link:hover,
.mc-nav__links.has-glide .mc-nav__link[aria-current="page"]
{
  background: transparent;
}

.mc-segment.has-glide .mc-glide
{
  background: var(--action);
}

.mc-segment.has-glide input:checked + span
{
  background: transparent;
}

.mc-segment label > span
{
  position: relative;
}

/* Menus from the header: spring open from the link, items rise in sequence. */
.mc-nav__item[open] > .mc-menu
{
  transform-origin: 50% 0;
  animation:
    mc-pop-in var(--mc-dur-card) var(--mc-spring) both,
    mc-fade-in var(--mc-dur-fade) var(--mc-ease) both;
}

.mc-nav__item[open] > .mc-menu > *
{
  animation:
    mc-rise var(--mc-dur-card) var(--mc-spring) both,
    mc-fade-in var(--mc-dur-fade) var(--mc-ease) both;
}

.mc-nav__item[open] > .mc-menu > :nth-child(1)
{
  animation-delay: calc(var(--mc-stagger) * 0);
}

.mc-nav__item[open] > .mc-menu > :nth-child(2)
{
  animation-delay: calc(var(--mc-stagger) * 1);
}

.mc-nav__item[open] > .mc-menu > :nth-child(3)
{
  animation-delay: calc(var(--mc-stagger) * 2);
}

.mc-nav__item[open] > .mc-menu > :nth-child(4)
{
  animation-delay: calc(var(--mc-stagger) * 3);
}

.mc-nav__item[open] > .mc-menu > :nth-child(5)
{
  animation-delay: calc(var(--mc-stagger) * 4);
}

.mc-nav__item[open] > .mc-menu > :nth-child(6)
{
  animation-delay: calc(var(--mc-stagger) * 5);
}

.mc-nav__item[open] > .mc-menu > :nth-child(7)
{
  animation-delay: calc(var(--mc-stagger) * 6);
}

.mc-drawer
{
  transform-origin: 100% 0;
  animation:
    mc-pop-in var(--mc-dur-card) var(--mc-spring) both,
    mc-fade-in var(--mc-dur-fade) var(--mc-ease) both;
}

.mc-drawer > *
{
  animation:
    mc-rise var(--mc-dur-card) var(--mc-spring) both,
    mc-fade-in var(--mc-dur-fade) var(--mc-ease) both;
}

.mc-drawer > :nth-child(2)
{
  animation-delay: calc(var(--mc-stagger) * 1);
}

.mc-drawer > :nth-child(3)
{
  animation-delay: calc(var(--mc-stagger) * 2);
}

.mc-drawer > :nth-child(4)
{
  animation-delay: calc(var(--mc-stagger) * 3);
}

.mc-drawer > :nth-child(5)
{
  animation-delay: calc(var(--mc-stagger) * 4);
}

.mc-drawer > :nth-child(6)
{
  animation-delay: calc(var(--mc-stagger) * 5);
}

@keyframes mc-pop-in
{
  from
  {
    scale: var(--mc-enter-scale);
    translate: 0 calc(var(--mc-enter-y) * -1);
  }

  to
  {
    scale: 1;
    translate: 0 0;
  }
}

@keyframes mc-rise
{
  from
  {
    translate: 0 var(--mc-enter-y);
  }

  to
  {
    translate: 0 0;
  }
}

@keyframes mc-fade-in
{
  from
  {
    opacity: 0;
    filter: blur(6px);
  }

  to
  {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes mc-boing
{
  0%
  {
    scale: var(--mc-enter-scale);
  }

  100%
  {
    scale: 1;
  }
}

/* Fields: the focus ring springs in from a wider offset. */
.mc-input,
.mc-select,
.mc-textarea,
.mc-check input,
.mc-switch input
{
  outline: 3px solid transparent;
  outline-offset: 8px;
  transition:
    border-color var(--mc-dur-fade) var(--mc-ease),
    background-color var(--mc-dur-fade) var(--mc-ease),
    outline-color var(--mc-dur-fade) var(--mc-ease),
    outline-offset var(--mc-dur-control) var(--mc-spring);
}

.mc-input:focus-visible,
.mc-select:focus-visible,
.mc-textarea:focus-visible,
.mc-check input:focus-visible,
.mc-switch input:focus-visible
{
  outline-color: var(--focus);
  outline-offset: 2px;
}

/* Choices: a small elastic pop when switched on. */
.mc-check input:checked::after
{
  animation: mc-boing var(--mc-dur-control) var(--mc-spring) both;
}

.mc-chip span
{
  transition:
    background-color var(--mc-dur-fade) var(--mc-ease),
    border-color var(--mc-dur-fade) var(--mc-ease),
    color var(--mc-dur-fade) var(--mc-ease),
    transform var(--mc-dur-control) var(--mc-spring);
}

.mc-chip input:checked + span
{
  animation: mc-boing var(--mc-dur-control) var(--mc-spring);
}

.mc-switch input::after
{
  transition:
    transform var(--mc-dur-control) var(--mc-spring),
    width var(--mc-dur-control) var(--mc-spring);
}

.mc-switch input:active::after
{
  width: 28px;
}

.mc-switch input:checked:active::after
{
  transform: translateX(16px);
}

/* Accordion: height eases open with a soft overshoot where the browser can animate to auto. */
.mc-accordion details
{
  interpolate-size: allow-keywords;
}

.mc-accordion details::details-content
{
  height: 0;
  overflow: clip;
  transition:
    height var(--mc-dur-surface) var(--mc-spring),
    content-visibility var(--mc-dur-surface) allow-discrete;
}

.mc-accordion details[open]::details-content
{
  height: auto;
}

.mc-accordion details[open] .mc-accordion__body
{
  animation:
    mc-rise var(--mc-dur-card) var(--mc-spring) both,
    mc-fade-in var(--mc-dur-fade) var(--mc-ease) both;
}

.mc-accordion summary
{
  transition: background-color var(--mc-dur-fade) var(--mc-ease);
}

/* Cards and menu items lean in on hover. */
.mc-card,
.mc-menu__item,
.mc-drawer__link
{
  transition:
    transform var(--mc-dur-card) var(--mc-spring),
    background-color var(--mc-dur-fade) var(--mc-ease);
}

a.mc-card:hover
{
  transform: translateY(var(--mc-lift));
}

.mc-menu__item:hover .mc-menu__icon
{
  transform: scale(1.08) rotate(-4deg);
}

.mc-menu__icon
{
  transition: transform var(--mc-dur-control) var(--mc-spring);
}

/* Reduced motion: keep state changes, drop the movement. */
@media (prefers-reduced-motion: reduce)
{
  [class*="mc-"],
  [class*="mc-"] *,
  [class*="mc-"]::before,
  [class*="mc-"]::after
  {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .mc-accordion details::details-content
  {
    transition-duration: 0.01ms !important;
  }

  .mc-btn:hover
  {
    transform: none;
  }
}

.menu-item .mc-menu__check
{
  visibility: hidden;
}

.menu-item[aria-current="true"] .mc-menu__check
{
  visibility: visible;
}

/* The source's `.menu-demo button { padding: 0 }` outranks `.menu-item`; restore row padding. */
.menu-demo .menu-item
{
  padding: 0 12px;
}

/* =========================================================
   Teal system (2026-10): dark-first teal with warm neutrals.
   Deep teal pages, cream bands, cream footer.
   ========================================================= */

/* Links on dark grounds */
/* Zero specificity, so any component or inline color wins. */
:where([data-theme="dark"] a:not(.mc-btn):not(.mc-menu__item))
{
  color: var(--link);
}
:where([data-theme="dark"] a:not(.mc-btn):not(.mc-menu__item):hover)
{
  color: var(--cream);
}

/* Secondary buttons: no border, light teal fill, deep teal label and chip. */
.mc-btn--outline,
[data-theme] .mc-btn--outline
{
  border-color: transparent;
  background: var(--teal-light);
  color: var(--navy);
}
.mc-btn--outline .mc-btn__chip,
[data-theme] .mc-btn--outline .mc-btn__chip
{
  background: var(--navy);
  color: var(--teal-light);
}

/* Teal variant, for light grounds: teal fill, cream label and chip.
   Secondary buttons on light sections use it. */
[data-theme="dark"] [data-theme="light"] .mc-btn--outline,
[data-theme="light"] .mc-btn--outline,
.mc-btn--teal
{
  background: var(--teal);
  color: var(--cream);
}
[data-theme="dark"] [data-theme="light"] .mc-btn--outline .mc-btn__chip,
[data-theme="light"] .mc-btn--outline .mc-btn__chip,
.mc-btn--teal .mc-btn__chip
{
  background: var(--cream);
  color: var(--teal);
}

/* Primary buttons on dark: cream, deep teal label and chip. */
[data-theme="dark"] .mc-btn:not(.mc-btn--outline),
.mc-btn--sky
{
  background: var(--cream);
  color: var(--navy);
}
[data-theme="dark"] .mc-btn:not(.mc-btn--outline) .mc-btn__chip,
.mc-btn--sky .mc-btn__chip
{
  background: var(--navy);
  color: var(--cream);
}
[data-theme="dark"] [data-theme="light"] .mc-btn:not(.mc-btn--outline):not(.mc-btn--sky)
{
  background: var(--action);
  color: var(--on-action);
}
[data-theme="dark"] [data-theme="light"] .mc-btn:not(.mc-btn--outline):not(.mc-btn--sky) .mc-btn__chip
{
  background: var(--on-action);
  color: var(--action);
}

/* Buttons given their own dark fill inline keep a cream chip. */
[data-theme] .mc-btn:not(.mc-btn--outline)[style*="background: #0B2B2A"] .mc-btn__chip,
[data-theme] .mc-btn:not(.mc-btn--outline)[style*="background: #0E5E59"] .mc-btn__chip
{
  background: var(--cream);
  color: var(--navy);
}

/* Nav bar: one step darker than the deep teal */
.mc-nav
{
  background: var(--nav-bar);
}
.mc-nav__link:hover,
.mc-nav__item[open] > .mc-nav__link,
.mc-nav__link[aria-current="page"]
{
  background: color-mix(in srgb, var(--deep) 28%, transparent);
}

/* Eyebrows on dark: one step lighter than the light teal */
[data-theme="dark"] .mc-eyebrow
{
  color: var(--teal-pale);
}
[data-theme="dark"] [data-theme="light"] .mc-eyebrow
{
  color: var(--ink);
}

/* Portraits: plain squircle photos, no colored arc or shadow */
.mc-arc::before
{
  display: none;
}
.mc-arc__img
{
  border-radius: var(--radius-lg);
  corner-shape: squircle;
  box-shadow: none;
}
.mc-arc[style*="width: 3"] .mc-arc__img,
.mc-arc[style*="width: 4"] .mc-arc__img,
.mc-arc[style*="width: 100%"] .mc-arc__img
{
  border-radius: var(--radius-xl);
}

/* Cluster: separate squircle tiles, no arch fill */
.mc-cluster
{
  gap: 12px;
}
.mc-cluster__fill
{
  display: none;
}
.mc-cluster__cell
{
  border-radius: var(--r);
  background: var(--c, var(--action));
}

/* No stipple: photo placeholders are plain fills */
.mc-ph canvas[data-mc-stipple]
{
  display: none;
}

/* Form fields: rounder squircle corners, and no borders inside a panel
   (the field is one step lighter or darker than the panel instead). */
.mc-input,
.mc-select,
.mc-textarea
{
  border-radius: var(--radius-lg);
}
.mc-panel
{
  --field-line: transparent;
}
/* Fields: one focus line, not a border plus a ring. */
.mc-input:focus-visible,
.mc-select:focus-visible,
.mc-textarea:focus-visible
{
  border-color: var(--action);
  outline-color: transparent;
}

/* =========================================================
   Nav on scroll: the bar starts with no fill, then a solid
   fill fades in over the first 120px of scroll. Its size
   stays the same.
   ========================================================= */

.mc-header .mc-nav
{
  max-width: 1288px;
  box-sizing: border-box;
  margin-inline: auto;
  background: var(--nav-bar);
}

@supports (animation-timeline: scroll())
{
  .mc-header .mc-nav
  {
    animation: mc-nav-fill linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }
}

@keyframes mc-nav-fill
{
  from
  {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  to
  {
    background: var(--nav-bar);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Nav, drop-down menus and the phone drawer: text can't be highlighted. */
.mc-header,
.mc-header *,
.mc-menu,
.mc-menu *,
.mc-drawer,
.mc-drawer *
{
  -webkit-user-select: none;
  user-select: none;
}

/* Nav wordmark: Mozaic GEO, bold caps. */
.mc-header .mc-nav__brand,
.mc-drawer .mc-nav__brand
{
  font-family: mozaic-geo-variable, mozaic-geo, Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* In-page anchors land below the sticky nav, with room to breathe, and scroll smoothly there. */
html
{
  scroll-behavior: smooth;
}

[id]
{
  scroll-margin-top: 128px;
}

@media (prefers-reduced-motion: reduce)
{
  html
  {
    scroll-behavior: auto;
  }
}

/* =========================================================
   Page transitions and intro motion
   - Moving between pages cross-fades, with the new page rising in
     slightly. The nav stays put.
   - On load, the hero builds in: eyebrow, headline, copy, then
     buttons and cards, with the photo easing in behind.
   - Further down, each section rises into place as it scrolls in.
   All of it is skipped for anyone who prefers reduced motion.
   ========================================================= */

@view-transition
{
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference)
{
  /* The name sits on the nav bar, not the header: a named header would cut the
     bar's frosted blur off from the page behind it. */
  .mc-header .mc-nav
  {
    view-transition-name: mc-header;
  }

  ::view-transition-old(root)
  {
    animation: mc-page-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  ::view-transition-new(root)
  {
    animation: mc-page-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Hero build */
  .mc-header + section .mc-eyebrow
  {
    animation: mc-intro-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
  }

  .mc-header + section h1,
  .mc-header + section h2
  {
    animation: mc-intro-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
  }

  .mc-header + section p,
  .mc-header + section h3
  {
    animation: mc-intro-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
  }

  .mc-header + section .mc-btn,
  .mc-header + section .mc-tag,
  .mc-header + section a:not(.mc-btn)
  {
    animation: mc-intro-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) 340ms both;
  }

  .mc-header + section img
  {
    animation: mc-intro-photo 1200ms cubic-bezier(0.22, 1, 0.36, 1) 0ms both;
  }

  .mc-header + section + section[aria-label="Happening soon"]
  {
    animation: mc-intro-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 460ms both;
  }

  /* Sections rise in as they scroll into view */
  @supports (animation-timeline: view())
  {
    .mc-header ~ section:not(.mc-header + section):not([aria-label="Happening soon"]) > div,
    .mc-footer > *
    {
      animation: mc-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

@keyframes mc-page-out
{
  to
  {
    opacity: 0;
  }
}

@keyframes mc-page-in
{
  from
  {
    opacity: 0;
    translate: 0 16px;
  }
}

@keyframes mc-intro-rise
{
  from
  {
    opacity: 0;
    translate: 0 18px;
  }
}

@keyframes mc-intro-photo
{
  from
  {
    opacity: 0;
    scale: 1.05;
  }
}

@keyframes mc-reveal
{
  from
  {
    opacity: 0;
    translate: 0 32px;
  }
}

/* =========================================================
   Responsive: tablet (≤ 1024px) and phone (≤ 760px)
   Page layouts are written with inline styles, so these rules
   override them by pattern, with !important where they must.
   ========================================================= */

/* ---------- Phone and tablet nav: menu button + drawer ---------- */
.mc-nav__toggle .mc-nav__toggle-close
{
  display: none;
}

.mc-nav__toggle[aria-expanded="true"] .mc-nav__toggle-open
{
  display: none;
}

.mc-nav__toggle[aria-expanded="true"] .mc-nav__toggle-close
{
  display: block;
}

.mc-header > .mc-drawer
{
  display: none;
}

.mc-drawer__group > summary
{
  list-style: none;
  cursor: pointer;
}

.mc-drawer__group > summary::-webkit-details-marker
{
  display: none;
}

.mc-drawer__group > summary .mc-chevron
{
  width: 20px;
  height: 20px;
  transition: transform var(--mc-dur-control, 200ms) var(--mc-ease, ease);
}

.mc-drawer__group[open] > summary .mc-chevron
{
  transform: rotate(180deg);
}

.mc-drawer__sub
{
  display: grid;
  gap: 2px;
  padding: 0 8px 8px;
}

.mc-drawer__sublink
{
  display: block;
  padding: 12px 18px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.mc-drawer__sublink:hover
{
  background: var(--surface-tint);
}

.mc-drawer__cta
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.mc-drawer__cta .mc-btn
{
  margin-top: 0;
}

@media (max-width: 1024px)
{
  .mc-nav__links,
  .mc-nav__cta
  {
    display: none !important;
  }

  .mc-nav__toggle
  {
    display: grid;
    background: color-mix(in srgb, #FBF9F4 12%, transparent);
    color: #FBF9F4;
  }

  .mc-header > .mc-drawer
  {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;
    max-width: 560px;
    max-height: calc(100vh - 120px);
    margin-left: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mc-header[data-drawer-open] > .mc-drawer
  {
    display: grid;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px)
{
  .mc-header
  {
    padding-inline: 16px;
  }

  .mc-header ~ section,
  .mc-footer
  {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .mc-header ~ section[style*="padding: 96px"],
  .mc-header ~ section[style*="padding: 112px"]
  {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  [style*="grid-template-columns: repeat(4, minmax(0"],
  [style*="grid-template-columns: repeat(5, minmax(0"]
  {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [style*="grid-template-columns: 1.3fr repeat(4, minmax(0"]
  {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  [style*="grid-template-columns: 1.3fr repeat(4, minmax(0"] > :first-child
  {
    grid-column: 1 / -1;
  }

  [style*="gap: 56px"],
  [style*="gap: 48px"]
  {
    gap: 32px !important;
  }

  h1.mc-display[style*="font-size: 104px"],
  h1.mc-display[style*="font-size: 84px"]
  {
    font-size: 68px !important;
  }

  .mc-display[style*="font-size: 72px"]
  {
    font-size: 60px !important;
  }

  .mc-display[style*="font-size: 56px"],
  .mc-display[style*="font-size: 52px"]
  {
    font-size: 44px !important;
  }

  .mc-display[style*="font-size: 48px"],
  .mc-display[style*="font-size: 44px"]
  {
    font-size: 38px !important;
  }

  /* Home hero: shorter, locations drop under the headline */
  .mc-header + section[style*="min-height: 900px"]
  {
    min-height: 0 !important;
    padding-top: 150px !important;
    padding-bottom: 210px !important;
  }

  .mc-header + section [style*="grid-template-columns: minmax(0"][style*="1fr) auto"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mc-header + section [style*="justify-items: end; align-content: end"]
  {
    justify-items: start !important;
  }

  .mc-header + section [style*="width: 340px"]
  {
    width: 100% !important;
  }

  .mc-header + section [style*="justify-items: end; align-content: end"]
  {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }

  .mc-header + section [style*="justify-items: end; align-content: end"] > .mc-eyebrow
  {
    grid-column: 1 / -1;
  }

  /* Smart stack: wider cards, tabs scroll sideways */
  section[aria-label="Happening soon"] [style*="left: 11%; width: 78%"]
  {
    left: 5% !important;
    width: 90% !important;
  }

  section[aria-label="Happening soon"] [style*="grid-template-columns: repeat(5, minmax(0"]
  {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 180px;
    overflow-x: auto;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }

  [style*="width: 597px"],
  [style*="width: 579px"]
  {
    width: auto !important;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 760px)
{
  .mc-header
  {
    padding: 10px 10px 0;
  }

  .mc-header .mc-nav
  {
    padding: 6px 6px 6px 16px;
  }

  .mc-header > .mc-drawer
  {
    right: 10px;
    left: 10px;
  }

  .mc-header ~ section,
  .mc-footer
  {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mc-header ~ section[style*="padding: 72px"],
  .mc-header ~ section[style*="padding: 96px"],
  .mc-header ~ section[style*="padding: 112px"]
  {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .mc-header ~ section[style*="margin: 0 16px"],
  .mc-header ~ section[style*="margin: 0px 16px"]
  {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  /* Every multi-column layout stacks to one column */
  [style*="grid-template-columns: minmax(0"],
  [style*="grid-template-columns: minmax(0"],
  [style*="grid-template-columns: repeat(2,"],
  [style*="grid-template-columns: repeat(3,"],
  [style*="grid-template-columns: repeat(4,"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: minmax(0"],
  [style*="grid-template-columns: 320px minmax(0"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="grid-template-columns: 1.3fr repeat(4, minmax(0"]
  {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [style*="grid-column: span"]
  {
    grid-column: auto !important;
  }

  [style*="justify-content: space-between"]
  {
    flex-wrap: wrap;
  }

  [style*="gap: 56px"],
  [style*="gap: 48px"],
  [style*="gap: 40px"]
  {
    gap: 24px !important;
  }

  [style*="padding: 56px"],
  [style*="padding: 40px"]
  {
    padding: 28px !important;
  }

  [style*="height: 600px"],
  [style*="height: 540px"],
  [style*="height: 520px"],
  [style*="min-height: 600px"]
  {
    height: 340px !important;
    min-height: 0 !important;
  }

  [style*="min-height: 440px"],
  [style*="min-height: 380px"],
  [style*="min-height: 320px"]
  {
    min-height: 0 !important;
  }

  h1.mc-display[style*="font-size"]
  {
    font-size: 52px !important;
  }

  .mc-display[style*="font-size: 72px"],
  .mc-display[style*="font-size: 56px"],
  .mc-display[style*="font-size: 52px"]
  {
    font-size: 38px !important;
  }

  .mc-display[style*="font-size: 48px"],
  .mc-display[style*="font-size: 44px"],
  .mc-display[style*="font-size: 40px"]
  {
    font-size: 34px !important;
  }

  .mc-display[style*="font-size: 36px"],
  .mc-display[style*="font-size: 34px"],
  .mc-display[style*="font-size: 32px"]
  {
    font-size: 28px !important;
  }

  .mc-subtitle[style*="font-size"]
  {
    font-size: 17px !important;
  }

  .mc-btn--lg
  {
    padding: 6px 6px 6px 20px;
  }

  /* Home hero */
  .mc-header + section[style*="min-height: 900px"]
  {
    padding-top: 120px !important;
    padding-bottom: 200px !important;
  }

  .mc-header + section [style*="justify-items: end; align-content: end"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mc-header + section [style*="display: inline-flex"][style*="border-radius: 999px"]
  {
    border-radius: 20px !important;
  }

  /* Smart stack: card stacks photo over text */
  section[aria-label="Happening soon"] [style*="position: relative; height: 440px"]
  {
    height: 560px !important;
  }

  section[aria-label="Happening soon"] article
  {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 220px auto;
  }

  section[aria-label="Happening soon"] article > div[style*="padding: 40px"]
  {
    padding: 24px !important;
  }

  section[aria-label="Happening soon"] .mc-display[style*="font-size: 34px"]
  {
    font-size: 28px !important;
  }

  section[aria-label="Happening soon"] [style*="grid-template-columns: repeat(5, minmax(0"]
  {
    grid-auto-columns: 150px;
  }
}

/* Responsive refinements */
@media (max-width: 1024px)
{
  [style*="grid-template-columns: minmax(0"][style*="0.9fr) minmax(0"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mc-groups
  {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px)
{
  .mc-btn
  {
    white-space: nowrap;
  }

  .mc-groups
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Phone: tall enough for the full card, buttons included */
  section[aria-label="Happening soon"] [style*="position: relative; height: 440px"]
  {
    height: 600px !important;
  }

  section[aria-label="Happening soon"] article
  {
    grid-template-rows: 190px auto;
  }
}

@media (max-width: 760px)
{
  /* Timeline rows: year above the text */
  [style*="grid-template-columns: 140px minmax(0"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  /* Event list rows: time on its own line, title beside the Details link */
  [style*="grid-template-columns: 110px minmax(0"],
  [style*="grid-template-columns: 136px minmax(0"]
  {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 6px !important;
  }

  [style*="grid-template-columns: 110px minmax(0"] > :first-child,
  [style*="grid-template-columns: 136px minmax(0"] > :first-child
  {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px)
{
  /* Floating latest-message player fits the phone width */
  .mc-pip
  {
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    width: auto !important;
  }

  .mc-pip__idle
  {
    grid-template-columns: 96px minmax(0, 1fr) auto !important;
  }
}

/* Home hero service-time chip stays on one line on desktop and tablet */
@media (min-width: 761px)
{
  .mc-header + section [style*="display: inline-flex"][style*="border-radius: 999px"],
  .mc-header + section [style*="display: inline-flex"][style*="border-radius: 999px"] span
  {
    white-space: nowrap;
  }
}

/* Tablet: sections built around a form stack the intro above the form */
@media (max-width: 1024px)
{
  .mc-header ~ section:has(form) > div[style*="grid-template-columns"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mc-header ~ section:has(form) > div[style*="grid-template-columns"] > [style*="position: sticky"]
  {
    position: static !important;
  }
}

/* Tablet: Home Welcome section stacks, intro then cards in two columns, two rows */
@media (max-width: 1024px)
{
  [style*="grid-template-columns: minmax(0"][style*="0.9fr) minmax(0"] > [style*="grid-template-columns: repeat(2,"]
  {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone: Welcome cards one per row */
@media (max-width: 760px)
{
  [style*="grid-template-columns: minmax(0"][style*="0.9fr) minmax(0"] > [style*="grid-template-columns: repeat(2,"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1024px)
{
  .mc-btn
  {
    white-space: nowrap;
  }
}

/* Tablet: Events hero, featured card above This Weekend */
@media (max-width: 1024px)
{
  [style*="grid-template-columns: minmax(0"][style*="1.6fr) minmax(0"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Tablet: every two-column section layout stacks (intro or media above, content below).
   Cards inside those sections keep their own layout. */
@media (max-width: 1024px)
{
  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"],
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"] > [style*="position: sticky"],
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"] > [style*="position: sticky"]
  {
    position: static !important;
  }
}

/* Tablet: form fields stack one per row */
@media (max-width: 1024px)
{
  .mc-form
  {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phone: Home hero location cards one per row */
@media (max-width: 760px)
{
  .mc-header + section [style*="justify-items: end; align-content: end"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 440px;
  }
}

/* Tablet: portrait intros (arc photo beside text) stay side by side */
@media (min-width: 761px) and (max-width: 1024px)
{
  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc),
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc)
  {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
    gap: 40px !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc) .mc-display,
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc) .mc-display
  {
    font-size: 36px !important;
  }
}

/* Tablet: tall 3:4 and 4:5 feature photos fill the column and go landscape */
@media (max-width: 1024px)
{
  .mc-header ~ section [style*="max-width: 480px; aspect-ratio: 3 / 4"],
  .mc-header ~ section [style*="max-width: 480px"][style*="aspect-ratio: 4 / 5"]
  {
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Tablet and phone: photo beside text moves under the eyebrow (Plan Your Visit, Motion Kids) */
@media (max-width: 1024px)
{
  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> [style*="aspect-ratio: 3 / 4"])
  {
    gap: 18px !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> [style*="aspect-ratio: 3 / 4"]) > div:has(> .mc-eyebrow)
  {
    display: contents !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> [style*="aspect-ratio: 3 / 4"]) > div > .mc-eyebrow
  {
    order: -1;
    justify-self: start;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> [style*="aspect-ratio: 3 / 4"]) > [style*="aspect-ratio: 3 / 4"]
  {
    margin-bottom: 10px;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> [style*="aspect-ratio: 3 / 4"]) > div > :not(.mc-eyebrow)
  {
    order: 1;
    justify-self: start;
  }
}

/* Tablet and phone: page hero photo moves just under the eyebrow, full width and shorter
   (campus, Plan Your Visit, Outreach, Kids, Give, Men, Women) */
@media (max-width: 1024px)
{
  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"])
  {
    gap: 22px !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"]) > div:has(> h1)
  {
    display: contents !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"]) > div > .mc-eyebrow
  {
    order: -1;
    justify-self: start;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"]) > div:has(> h1) > :not(.mc-eyebrow)
  {
    order: 1;
    justify-self: start;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"]) > div:not(:has(> h1)) > div:first-child
  {
    width: 100% !important;
    max-width: none !important;
    height: 340px !important;
    aspect-ratio: auto !important;
    margin-bottom: 6px;
  }
}

@media (max-width: 760px)
{
  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"]) > div:not(:has(> h1)) > div:first-child
  {
    height: 240px !important;
  }
}

/* Tablet and phone: hero portrait (About) runs full width */
@media (max-width: 1024px)
{
  .mc-header ~ section .mc-arc[style*="width: 440px"]
  {
    width: 100% !important;
  }
}

/* Phone: Home hero locations sit below the time chip, above the buttons */
@media (max-width: 760px)
{
  .mc-header + section [style*="grid-template-columns: minmax(0"][style*="1fr) auto"]
  {
    gap: 22px !important;
  }

  .mc-header + section [style*="grid-template-columns: minmax(0"][style*="1fr) auto"] > div:has(> h1)
  {
    display: contents !important;
  }

  .mc-header + section [style*="grid-template-columns: minmax(0"][style*="1fr) auto"] > div:has(> h1) > *
  {
    justify-self: start;
  }

  .mc-header + section [style*="grid-template-columns: minmax(0"][style*="1fr) auto"] > [style*="justify-items: end; align-content: end"]
  {
    order: 1;
    margin-top: 6px;
  }

  .mc-header + section [style*="grid-template-columns: minmax(0"][style*="1fr) auto"] > div:has(> h1) > div:has(> .mc-btn)
  {
    order: 2;
  }
}

/* Phone: page buttons go full width, label left and arrow chip right */
@media (max-width: 760px)
{
  .mc-header ~ section div[style*="display: flex"]:has(> .mc-btn)
  {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    justify-self: stretch !important;
    gap: 12px !important;
  }

  .mc-header ~ section .mc-btn
  {
    justify-self: stretch;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  .mc-header ~ section div[style*="display: flex"]:has(> .mc-btn) > a:not(.mc-btn)
  {
    align-self: center;
    margin-top: 4px;
  }
}

/* Phone: portrait sections (arc photo + text) put the photo just under the eyebrow */
@media (max-width: 760px)
{
  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow),
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow)
  {
    gap: 18px !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow) > div:has(> .mc-eyebrow),
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow) > div:has(> .mc-eyebrow)
  {
    display: contents !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow) > div > .mc-eyebrow,
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow) > div > .mc-eyebrow
  {
    order: -1;
    justify-self: start;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow) > div:has(> .mc-arc),
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow) > div:has(> .mc-arc)
  {
    justify-self: stretch;
    margin-bottom: 8px;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow) > div:has(> .mc-eyebrow) > :not(.mc-eyebrow),
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-arc):has(> div > .mc-eyebrow) > div:has(> .mc-eyebrow) > :not(.mc-eyebrow)
  {
    order: 1;
    justify-self: start;
  }
}

/* Phone: one card padding everywhere (28px, matching the Stay In The Loop card) */
@media (max-width: 760px)
{
  .mc-header ~ section:not(.mc-header + section) :is(div, article, form, a, aside)[style*="padding:"][style*="border-radius"]:not(.mc-btn):not([style*="999px"]):not([style*="position: absolute"]):not(:has(> img, > .mc-ph)),
  .mc-header ~ section .mc-panel,
  section[aria-label="Happening soon"] article > div[style*="padding: 40px"]
  {
    padding: 28px !important;
  }

  .mc-header ~ section:not(.mc-header + section)[style*="background"],
  .mc-header ~ section li[style*="padding:"][style*="background"]
  {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* Phone: forms and maps inside a section panel widen to use the side space */
@media (max-width: 760px)
{
  .mc-header ~ section[style*="background"] .mc-panel
  {
    margin-inline: -20px;
    padding: 24px !important;
  }

  .mc-header ~ section[style*="background"] div[style*="min-height: 600px"][style*="--inset"]:not(.mc-x1):not(.mc-x2):not(.mc-x3):not(.mc-x4):not(.mc-x5):not(.mc-x6)
  {
    margin-inline: -20px;
    padding: 8px !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 240px auto;
  }

  .mc-header ~ section[style*="background"] div[style*="min-height: 600px"][style*="--inset"] > div[style*="position: absolute; inset: 0"] > a.mc-btn
  {
    top: 184px;
    bottom: auto !important;
  }

  .mc-header ~ section[style*="background"] div[style*="min-height: 600px"][style*="--inset"] > span[style*="position: absolute"]
  {
    top: 128px !important;
  }

  .mc-header ~ section[style*="background"] div[style*="min-height: 600px"][style*="--inset"] > div[style*="position: relative"][style*="padding"]:not(.mc-x1):not(.mc-x2):not(.mc-x3):not(.mc-x4):not(.mc-x5)
  {
    grid-row: 2;
    padding: 24px !important;
  }

  .mc-header ~ section .mc-btn[style*="position: absolute"]
  {
    width: auto;
  }
}

/* Tablet and phone: text + photo sections put a shorter photo just under the eyebrow */
@media (max-width: 1024px)
{
  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]),
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"])
  {
    gap: 18px !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]) > div:has(> .mc-eyebrow),
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]) > div:has(> .mc-eyebrow)
  {
    display: contents !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]) > div > .mc-eyebrow,
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]) > div > .mc-eyebrow
  {
    order: -1;
    justify-self: start;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]) > [style*="aspect-ratio"],
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]) > [style*="aspect-ratio"]
  {
    justify-self: stretch;
    margin-bottom: 8px;
    aspect-ratio: 16 / 9 !important;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]) > div:has(> .mc-eyebrow) > :not(.mc-eyebrow),
  .mc-header ~ section > div > div[style*="grid-template-columns: minmax(0"]:has(> div > .mc-eyebrow):has(> [style*="aspect-ratio"]) > div:has(> .mc-eyebrow) > :not(.mc-eyebrow)
  {
    order: 1;
    justify-self: start;
  }
}

/* Phone: About team becomes a swipeable carousel */
@media (max-width: 760px)
{
  section#team div[style*="flex-wrap: wrap"]
  {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    margin-inline: -28px;
    padding: 0 28px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 28px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  section#team div[style*="flex-wrap: wrap"]::-webkit-scrollbar
  {
    display: none;
  }

  section#team div[style*="flex-wrap: wrap"] > div
  {
    flex: 0 0 70% !important;
    min-width: 0 !important;
    scroll-snap-align: start;
  }

  section#team div[style*="flex-wrap: wrap"] .mc-arc
  {
    width: 100% !important;
  }
}

/* Tablet and phone: photo card grids (Next Steps, Outreach partners, Give funds) become swipeable carousels;
   each card stacks photo above text */
@media (max-width: 1024px)
{
  .mc-header ~ section div[style*="grid-template-columns: repeat("]:has(> article.mc-card)
  {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 12px !important;
    margin-inline: -20px;
    padding: 0 20px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }

  .mc-header ~ section div[style*="grid-template-columns: repeat("]:has(> article.mc-card)::-webkit-scrollbar
  {
    display: none;
  }

  .mc-header ~ section div[style*="grid-template-columns: repeat("]:has(> article.mc-card) > article
  {
    scroll-snap-align: start;
  }

  .mc-header ~ section div[style*="grid-template-columns: repeat("]:has(> article.mc-card) > article
  {
    flex-direction: column;
    align-items: stretch !important;
    gap: 16px;
  }

  .mc-header ~ section div[style*="grid-template-columns: repeat("]:has(> article.mc-card) > article > .mc-card__media
  {
    width: 100% !important;
    max-width: none;
    height: 180px;
    aspect-ratio: auto;
    flex: none;
  }

  .mc-header ~ section div[style*="grid-template-columns: repeat("]:has(> article.mc-card) > article > .mc-card__body
  {
    padding: 4px 16px 16px !important;
  }
}

/* Tablet and phone: filter chips stay on one line (scroll sideways if they ever overflow) */
@media (max-width: 1024px)
{
  .mc-chips
  {
    flex-wrap: nowrap !important;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mc-chips::-webkit-scrollbar
  {
    display: none;
  }

  .mc-chip
  {
    flex: none;
  }

  div:has(> h2 + .mc-chips)
  {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100%;
    min-width: 0;
  }

  div:has(> div > h2 + .mc-chips)
  {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .mc-chip span
  {
    padding: 8px 14px !important;
    font-size: 14px;
    white-space: nowrap;
    min-height: 0 !important;
  }
}

/* Phone: Contact campus maps stay tall enough to read */
@media (max-width: 760px)
{
  .mc-header ~ section div[style*="min-height: 380px"][style*="overflow: hidden"]
  {
    min-height: 320px !important;
  }
}

/* Phone: no divider line above the footer base row */
@media (max-width: 760px)
{
  .mc-footer__base
  {
    border-top: 0 !important;
  }
}

/* Footer column headings: Mozaic GEO */
.mc-footer__head
{
  font-family: mozaic-geo-variable, mozaic-geo, Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}

/* Phone: hide the Est. 2001 badge in the About hero */
@media (max-width: 760px)
{
  .mc-header + section:has(.mc-arc) .mc-ring
  {
    display: none !important;
  }
}

/* Tablet and phone: About hero portrait matches the other hero photos (rounded rectangle, under the eyebrow) */
@media (max-width: 1024px)
{
  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"]) > div:not(:has(> h1)) > div:first-child .mc-arc
  {
    width: 100% !important;
    height: 100%;
    aspect-ratio: auto;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"]) > div:not(:has(> h1)) > div:first-child .mc-arc::before
  {
    display: none;
  }

  .mc-header ~ section > div[style*="grid-template-columns: minmax(0"]:has(> div > h1):not([style*="1fr) auto"]) > div:not(:has(> h1)) > div:first-child .mc-arc__img
  {
    border-radius: var(--radius-xl);
  }
}

/* Tablet: Contact campus cards sit side by side, contact details full width below */
@media (min-width: 761px) and (max-width: 1024px)
{
  .mc-header ~ section div[style*="display: grid; gap: 16px; align-content: start"]:has(> a[href^="Waterbury"]):has(> a[href^="Wallingford"])
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-header ~ section div[style*="display: grid; gap: 16px; align-content: start"]:has(> a[href^="Waterbury"]):has(> a[href^="Wallingford"]) > :not(a)
  {
    grid-column: 1 / -1;
  }
}

/* Tablet: card carousels show about two cards at a time */
@media (min-width: 761px) and (max-width: 1024px)
{
  .mc-header ~ section div[style*="grid-template-columns: repeat("]:has(> article.mc-card)
  {
    grid-auto-columns: 44%;
  }
}

/* Tablet and phone: Small Groups list becomes a swipeable carousel */
@media (max-width: 1024px)
{
  .mc-groups
  {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    margin-inline: -20px;
    padding: 0 20px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }

  .mc-groups::-webkit-scrollbar
  {
    display: none;
  }

  .mc-groups > .mc-group
  {
    scroll-snap-align: start;
  }
}

@media (max-width: 760px)
{
  .mc-groups
  {
    grid-auto-columns: 82%;
  }
}

/* Phone: full-width buttons win over any start alignment */
@media (max-width: 760px)
{
  .mc-header ~ section .mc-btn:not([style*="position: absolute"])
  {
    justify-self: stretch !important;
  }
}

/* Tablet: Events calendar sits above the Coming Up list so the list gets the full width */
@media (min-width: 761px) and (max-width: 1024px)
{
  .mc-header ~ section > div[style*="grid-template-columns: 320px minmax(0"]
  {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Phone: campus map fills its whole section, edge to edge */
@media (max-width: 760px)
{
  .mc-header ~ section[style*="background"]:has(> div > div[style*="min-height: 600px"][style*="--inset"])
  {
    padding: 0 !important;
    overflow: hidden;
  }

  .mc-header ~ section[style*="background"] > div > div[style*="min-height: 600px"][style*="--inset"]:not(.mc-x1):not(.mc-x2):not(.mc-x3):not(.mc-x4):not(.mc-x5):not(.mc-x6):not(.mc-x7)
  {
    margin: 0 !important;
    border-radius: inherit !important;
    padding: 12px !important;
  }
}

/* Tablet and phone: carousels stay inside their section's content edge */
@media (max-width: 1024px)
{
  .mc-groups,
  .mc-header ~ section div[style*="grid-template-columns: repeat("]:has(> article.mc-card)
  {
    margin-inline: 0 !important;
    padding: 0 0 8px !important;
    scroll-padding-inline: 0;
  }
}

/* Buttons stretched wider than their label keep the arrow chip at the right end */
.mc-btn
{
  justify-content: space-between;
}

/* =========================================================
   Sign-up forms: pop-up (.mc-modal) and the nav's Plan A Visit
   drop-down (.mc-navform). Markup comes from MotionForms in bundle.js.
   ========================================================= */

html.mc-modal-open
{
  overflow: hidden;
}

.mc-modal
{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 200ms var(--mc-ease, ease);
}

.mc-modal[data-open]
{
  opacity: 1;
}

.mc-modal__scrim
{
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #071E1D 62%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mc-modal__box
{
  box-sizing: border-box;
  position: relative;
  width: min(100%, 600px);
  margin: auto;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: #FBF9F4;
  color: #0B2B2A;
  --surface-raised: #EFE9DD;
  --surface-tint: #EFE9DD;
  --field-line: transparent;
  box-shadow: 0 30px 80px rgba(4, 18, 17, 0.35);
  transform: translateY(16px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-modal[data-open] .mc-modal__box
{
  transform: none;
}

.mc-modal__close
{
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #EFE9DD;
  color: #0B2B2A;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.mc-modal__close:hover
{
  background: #0E5E59;
  color: #FBF9F4;
}

.mc-modal__close svg
{
  width: 16px;
  height: 16px;
}

.mc-signform
{
  display: grid;
  gap: 24px;
}

.mc-signform__head
{
  display: grid;
  gap: 12px;
  padding-right: 40px;
}

.mc-signform__title
{
  margin: 0;
  font-size: 36px;
}

.mc-signform__intro
{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #3E5B59;
}

.mc-signform__form
{
  display: grid;
  gap: 20px;
}

.mc-signform__set
{
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 10px;
}

.mc-signform__set > .mc-label
{
  padding: 0;
}

.mc-signform__actions
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.mc-signform__actions .mc-btn[disabled]
{
  opacity: 0.6;
  cursor: progress;
}

.mc-signform__error
{
  margin: 0;
  color: #A3261C;
  font-size: 15px;
  font-weight: 600;
}

.mc-signform__done
{
  display: grid;
  gap: 12px;
  padding: 8px 40px 8px 0;
}

/* Plan A Visit drop-down under the nav button */
.mc-nav__cta
{
  position: relative;
}

.mc-navform
{
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  width: 440px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: #FBF9F4;
  color: #0B2B2A;
  box-shadow: 0 24px 60px rgba(4, 18, 17, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
}

.mc-navform[data-open]
{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Field fills one step darker than the panel, no borders (set on the inner wrapper so
   they win over the light theme tokens on the drop-down itself) */
.mc-navform .mc-signform
{
  --surface-raised: #EFE9DD;
  --surface-tint: #EFE9DD;
  --field-line: transparent;
}

.mc-navform .mc-signform__title
{
  font-size: 28px;
}

.mc-navform .mc-form
{
  gap: 14px;
}

.mc-navform .mc-modal__close
{
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
}

.mc-signform__head[hidden],
.mc-signform__form[hidden],
.mc-signform__done[hidden],
.mc-signform__error[hidden]
{
  display: none;
}

/* Two-step forms: progress, step pages, back link, field messages */
.mc-signform__progress
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.mc-signform__seg
{
  display: grid;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7F7D;
}

.mc-signform__seg i
{
  display: block;
  height: 4px;
  border-radius: 999px;
  background: #E6E0D4;
  overflow: hidden;
  position: relative;
}

.mc-signform__seg i::after
{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0E5E59;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-signform__seg b
{
  font-weight: 700;
}

.mc-signform[data-at="1"] .mc-signform__seg[data-seg="1"],
.mc-signform[data-at="2"] .mc-signform__seg
{
  color: #0B2B2A;
}

.mc-signform[data-at="1"] .mc-signform__seg[data-seg="1"] i::after,
.mc-signform[data-at="2"] .mc-signform__seg i::after
{
  transform: scaleX(1);
}

.mc-signform__step
{
  display: grid;
  gap: 20px;
  animation: mc-step-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-signform__step[hidden]
{
  display: none;
}

@keyframes mc-step-in
{
  from
  {
    opacity: 0;
    transform: translateX(12px);
  }

  to
  {
    opacity: 1;
    transform: none;
  }
}

.mc-signform__hello
{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #3E5B59;
}

.mc-signform__back
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  border: 0;
  background: none;
  color: #0B2B2A;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.mc-signform__back:hover
{
  color: #0E5E59;
}

.mc-signform__msg
{
  margin-top: 6px;
}

.mc-signform__msg[hidden]
{
  display: none;
}

.mc-signform .mc-field--error .mc-input,
.mc-signform .mc-field--error .mc-select,
.mc-signform .mc-field--error .mc-textarea
{
  box-shadow: inset 0 0 0 2px #A3261C;
}

.mc-signform .mc-field--error .mc-signform__msg
{
  color: #A3261C;
}

.mc-signform__fix
{
  padding: 0;
  border: 0;
  background: none;
  color: #0E5E59;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.mc-signform__done:focus
{
  outline: none;
}

.mc-signform__doneacts
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.mc-signform__doneacts:empty
{
  display: none;
}

@media (max-width: 760px)
{
  .mc-modal
  {
    padding: 0;
    place-items: end stretch;
  }

  .mc-modal__box
  {
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px 20px 24px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(40px);
  }

  .mc-signform__title
  {
    font-size: 30px;
  }

  .mc-signform .mc-form
  {
    grid-template-columns: minmax(0, 1fr);
  }

  .mc-signform .mc-field
  {
    grid-column: 1 / -1;
  }

  .mc-signform__actions .mc-btn
  {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce)
{
  .mc-modal,
  .mc-modal__box,
  .mc-navform,
  .mc-signform__seg i::after
  {
    transition: none;
  }

  .mc-signform__step
  {
    animation: none;
  }
}

/* Smooth scrolling (Lenis) */
html.lenis,
html.lenis body
{
  height: auto;
}

html.lenis
{
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped
{
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis .mc-modal,
.lenis .mc-navform,
.lenis .mc-drawer
{
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe
{
  pointer-events: none;
}

/* Campus maps: a branded MapLibre map. On the campus pages it fills the
   whole card and fades out behind the info card on the left; on the
   contact page it fills its tile. */
.mc-map,
.mc-maptile,
.mc-map.maplibregl-map,
.mc-maptile.maplibregl-map
{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #F1ECE2;
}
.mc-map
{
  -webkit-mask-image: linear-gradient(to right, transparent 380px, #000 720px);
  mask-image: linear-gradient(to right, transparent 380px, #000 720px);
}
.mc-map__pin
{
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0E5E59;
  color: #FBF9F4;
  box-shadow: 0 0 0 10px rgba(14, 94, 89, 0.16), 0 10px 24px -8px rgba(11, 43, 42, 0.45);
  cursor: pointer;
}
.mc-map__pin svg
{
  width: 22px;
  height: 22px;
}
.mc-map.is-static .mc-map__pin,
.mc-maptile.is-static .mc-map__pin
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mc-map.is-static[data-panel="left"] .mc-map__pin
{
  left: calc(50% + 238px);
}
.mc-map.is-static[data-panel="right"] .mc-map__pin
{
  left: calc(50% - 238px);
}
.mc-map .maplibregl-ctrl-attrib,
.mc-maptile .maplibregl-ctrl-attrib
{
  font-size: 10px;
}
.mc-map .maplibregl-cooperative-gesture-screen,
.mc-maptile .maplibregl-cooperative-gesture-screen
{
  background: rgba(11, 43, 42, 0.55);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 760px)
{
  .mc-map,
  .mc-map.maplibregl-map
  {
    bottom: auto;
    height: 300px;
    -webkit-mask-image: linear-gradient(to bottom, #000 170px, transparent 270px);
    mask-image: linear-gradient(to bottom, #000 170px, transparent 270px);
  }
  .mc-map.is-static .mc-map__pin
  {
    top: 130px;
    left: 50%;
  }
  div[style*="min-height: 380px"]:has(> .mc-maptile)
  {
    min-height: 280px !important;
  }
}
/* Tablet: the campus map sits above the info card, full width. */
@media (min-width: 761px) and (max-width: 1024px)
{
  div[style*="min-height: 600px"][style*="--inset"]:has(> .mc-map)
  {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 340px auto;
  }
  div[style*="min-height: 600px"][style*="--inset"]:has(> .mc-map) > div[style*="position: relative"]
  {
    grid-row: 2;
  }
  .mc-map,
  .mc-map.maplibregl-map
  {
    bottom: auto;
    height: 420px;
  }
}

/* Phone menu: the top-level labels use the button label type. */
.mc-drawer .mc-drawer__link
{
  font-family: mozaic-geo-variable, mozaic-geo, Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-variation-settings: normal;
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* Condensed button: a smaller version of the primary button (Join Group, message actions). */
.mc-btn.mc-btn--sm
{
  gap: 10px;
  padding: 4px 4px 4px 16px;
  font-size: 12px;
}
.mc-btn--sm .mc-btn__chip
{
  width: 28px;
  height: 28px;
}
.mc-btn--sm .mc-btn__chip svg
{
  width: 13px;
  height: 13px;
}

/* Long headlines step down a size (see data-fit-title in bundle.js). */
.mc-display[data-fit-title][data-fit="2"]
{
  font-size: calc(var(--fit-base, 56px) * 0.72) !important;
}
.mc-display[data-fit-title][data-fit="3"]
{
  font-size: calc(var(--fit-base, 56px) * 0.58) !important;
}
/* Loop videos (see data-loop-video in bundle.js) */
[data-loop-video]
{
  position: absolute;
  inset: 0;
}

[data-loop-video] video
{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-loop__toggle
{
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 43, 42, 0.72);
  color: #FBF9F4;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mc-loop__toggle:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mc-loop__toggle svg
{
  width: 18px;
  height: 18px;
}

.mc-loop__toggle .mc-loop__play,
[data-loop-video][data-paused] .mc-loop__pause
{
  display: none;
}

[data-loop-video][data-paused] .mc-loop__play
{
  display: block;
}
/* Sign-up forms: answer chips wrap onto new lines on tablet and phone
   (the one-line rule above is for the event filters) */
@media (max-width: 1024px)
{
  .mc-signform .mc-chips,
  .mc-form .mc-chips
  {
    flex-wrap: wrap !important;
    overflow-x: visible;
  }
}
/* Events: Subscribe calendar button is a solid dark pill that keeps its fill when the menu opens.
   No shadow on the button; the menu keeps its shadow while open. */
#subcal .menu-trigger.is-pill
{
  background: var(--navy);
}

#subcal .menu-trigger.is-pill span,
#subcal .menu-trigger .mc-chevron
{
  color: #FBF9F4;
}

#subcal:not(.is-open):not(.is-closing) .menu-blob
{
  visibility: hidden;
}
/* Events: round icon buttons (add to calendar, details), the calendar menu and the details pop-up */
.mc-evt__acts
{
  display: flex;
  gap: 8px;
  align-items: center;
}

.mc-iconbtn
{
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--mc-dur-fade) var(--mc-ease),
    color var(--mc-dur-fade) var(--mc-ease);
}

.mc-iconbtn:hover,
.mc-iconbtn[aria-expanded="true"]
{
  background: var(--action);
  color: var(--on-action);
}

.mc-iconbtn:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mc-iconbtn svg
{
  width: 20px;
  height: 20px;
}

.mc-iconbtn--light
{
  background: rgba(251, 249, 244, 0.14);
  color: #FBF9F4;
}

.mc-calpop
{
  position: absolute;
  z-index: 10050;
  display: grid;
  min-width: 200px;
  padding: 4px;
  border-radius: 16px;
  background: #FBF9F4;
  color: #0B2B2A;
  box-shadow:
    0 18px 28px rgba(11, 43, 42, 0.16),
    0 0 0 1px rgba(11, 43, 42, 0.06);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--mc-dur-fade) var(--mc-ease),
    transform var(--mc-dur-fade) var(--mc-ease);
}

.mc-calpop[data-open]
{
  opacity: 1;
  transform: none;
}

.mc-calpop a,
.mc-calpop button
{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mc-calpop a:hover,
.mc-calpop button:hover,
.mc-calpop a:focus-visible,
.mc-calpop button:focus-visible
{
  background: #EFE9DD;
  outline: none;
}

.mc-evinfo
{
  display: grid;
  gap: 16px;
  width: min(520px, 100%);
}

.mc-evinfo__facts
{
  display: grid;
  gap: 10px;
  margin: 0;
}

.mc-evinfo__facts div
{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
}

.mc-evinfo__facts dt
{
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 600;
}

.mc-evinfo__facts dd
{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.mc-evinfo__text
{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.mc-evinfo__acts
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* Events: rich description and on-site registration in the details pop-up */
.mc-evinfo__text
{
  display: grid;
  gap: 10px;
}

.mc-evinfo__text p,
.mc-evinfo__text ul,
.mc-evinfo__text ol
{
  margin: 0;
}

.mc-evinfo__text ul,
.mc-evinfo__text ol
{
  padding-left: 22px;
}

.mc-evinfo__text a
{
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mc-evinfo__acts[hidden],
.mc-evreg[hidden],
.mc-evreg__error[hidden]
{
  display: none;
}

.mc-evreg
{
  display: grid;
  gap: 16px;
  padding-top: 20px;
  border-top: 2px solid #EFE9DD;
}

.mc-evreg__form
{
  display: grid;
  gap: 20px;
}

.mc-evreg .mc-form
{
  gap: 16px 14px;
}

.mc-evreg__opts,
.mc-evreg__guests
{
  display: grid;
  gap: 10px;
}

.mc-evreg__guests:empty
{
  display: none;
}

.mc-evreg__msg:empty
{
  display: none;
}

.mc-evreg__msg
{
  font-size: 14px;
}

.mc-evreg__actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mc-evreg__error
{
  margin: 0;
  color: #A3261C;
  font-size: 15px;
  font-weight: 600;
}

.mc-evreg__status
{
  margin: 0;
  color: var(--ink-muted);
}

.mc-evreg__done
{
  display: grid;
  gap: 8px;
}

.mc-evreg__done:focus
{
  outline: none;
}

.mc-evreg__done h4
{
  margin: 0;
  font-size: 26px;
}

.mc-evreg__done p
{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Events list: a small Register pill beside the calendar and details buttons */
.mc-evt__reg
{
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--action);
  color: var(--on-action);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  corner-shape: squircle;
  transition: transform var(--mc-dur-control, 200ms) var(--mc-spring, ease);
}

.mc-evt__reg:hover
{
  transform: translateY(-1px);
}

.mc-evt__reg:focus-visible
{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 600px)
{
  .mc-evreg .mc-form
  {
    grid-template-columns: minmax(0, 1fr);
  }

  .mc-evreg .mc-form > .mc-field
  {
    grid-column: 1 / -1;
  }

  .mc-evt__acts:has(.mc-evt__reg)
  {
    grid-column: 1 / -1;
    justify-self: start;
  }
}