/* ==========================================================================
   MACH BASEBALL
   Single stylesheet. Organized top to bottom:
   tokens, reset, typography, buttons, header, footer, sections, forms, utils.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --black:        #090909;
  --white:        #FFFFFF;
  --red:          #D71920;
  --red-dark:     #B2141A;
  --gray-bg:      #F5F5F3;
  --gray-text:    #6F6F72;
  --line:         #E2E2DE;
  --line-dark:    #2A2A2A;

  /* Condensed stack. If Barlow is slow, these hold the athletic proportion
     instead of dropping to a wide generic bold. */
  --font-head: 'Barlow Condensed', 'Oswald', 'Roboto Condensed', 'Archivo Narrow',
               'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --max: 1180px;
  --gutter: 24px;
  --header-h: 92px;
}

/* The header shrinks with the logo so the bar never eats the phone screen. */
@media (max-width: 900px) { :root { --header-h: 82px; } }
@media (max-width: 480px) { :root { --header-h: 70px; } }

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
  margin: 0 0 16px;
  text-wrap: balance;
}

h1 { font-size: clamp(44px, 8.5vw, 92px); }
h2 { font-size: clamp(32px, 5.2vw, 58px); }
h3 { font-size: clamp(22px, 3vw, 30px); line-height: 1.02; }
h4 { font-size: 18px; letter-spacing: 0.06em; line-height: 1.2; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 14px;
}

.lede {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--gray-text);
  max-width: 62ch;
}

.rule {
  width: 56px; height: 4px; background: var(--red);
  border: 0; margin: 0 0 26px;
}
.rule.center { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: 88px 0; }
.section--tight { padding: 64px 0; }
.section--gray { background: var(--gray-bg); }
.section--black { background: var(--black); color: var(--white); }
.section--red { background: var(--red); color: var(--white); }

.section--black .lede { color: #A8A8A8; }
.section--black .eyebrow { color: var(--red); }
.section--red .eyebrow { color: var(--white); }
.section--red .lede { color: rgba(255,255,255,.88); }
.section--red .rule { background: var(--white); }

.center { text-align: center; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out;
}

.btn--red    { background: var(--red);   color: var(--white); border-color: var(--red); }
.btn--red:hover    { background: var(--red-dark); border-color: var(--red-dark); }

.btn--black  { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--black:hover  { background: #000; }

.btn--outline { background: transparent; color: var(--black); border-color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--white); }

.btn--outline-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline-light:hover { background: var(--white); color: var(--black); }

.btn--white { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--white:hover { background: #EDEDE9; border-color: #EDEDE9; }

.btn--sm { padding: 11px 22px; font-size: 15px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. HEADER
   White header. The MACH logo is a light-background mark, so the black
   letterforms and the word BASEBALL only read on white.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: var(--header-h);
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}

/* The lockup is two lines. Below ~44px the word BASEBALL stops being legible.
   Sized to sit just under the header height so the mark reads as the anchor of
   the page rather than an afterthought next to the nav. */
.site-header__logo img { height: 58px; width: auto; display: block; }
@media (max-width: 900px) { .site-header__logo img { height: 50px; } }
@media (max-width: 480px) { .site-header__logo img { height: 42px; } }

.nav { display: flex; align-items: center; gap: 34px; }

.nav__list {
  display: flex; align-items: center; gap: 30px;
  list-style: none; margin: 0; padding: 0;
}

.nav__link {
  font-family: var(--font-head);
  font-size: 17px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  text-decoration: none; color: var(--black);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .16s ease-out, color .16s ease-out;
}
.nav__link:hover { border-bottom-color: var(--red); }
.nav__link.is-active { border-bottom-color: var(--red); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: var(--black);
  transition: transform .2s ease-out, opacity .2s ease-out;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease-out, transform .18s ease-out, visibility .18s;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 20px; }
  .nav__link:hover, .nav__link.is-active { border-bottom-color: var(--line); color: var(--red); }
  .nav .btn { margin-top: 18px; width: 100%; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--black); color: var(--white);
  padding: 96px 0 100px;
  /* Tracks the 16:9 proportions of the source photography so the frame is
     barely cropped at common widths, with a floor for short windows and a
     ceiling so the hero never swallows a large monitor. */
  min-height: clamp(600px, 56.25vw, 820px);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* --- rotating background ---------------------------------------------- */
.hero__bg { position: absolute; inset: 0; z-index: -2; }

/* Full-bleed photography. The source images are shot 16:9 with the player on
   the right and open darkness on the left, so the headline sits in space the
   photograph already left for it rather than on top of the subject. */
.hero__slide {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: right 22%;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }

/* Scrim. Deepens the left side for type contrast and clears off before the
   subject, so the photo still reads as a photo. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(9,9,9,.94) 0%, rgba(9,9,9,.86) 26%,
                    rgba(9,9,9,.45) 46%, rgba(9,9,9,.06) 64%, rgba(9,9,9,0) 76%),
    linear-gradient(180deg, rgba(9,9,9,.35) 0%, rgba(9,9,9,0) 22%,
                    rgba(9,9,9,0) 72%, rgba(9,9,9,.45) 100%);
}

/* The block keeps the site's normal content width so it lines up with every
   section below it, and the copy inside is what gets constrained. Capping the
   block itself made it centre in the viewport, which pushed the headline onto
   the player's face. */
/* width:100% matters: .hero is a flex container, so without it the block
   shrink-wraps its children and the auto margins centre it in the viewport. */
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__inner > * { max-width: 560px; }
.hero h1 {
  color: var(--white); margin-bottom: 22px;
  font-size: clamp(38px, 5.4vw, 66px);
}
.hero h1 .accent { color: var(--red); }
.hero__sub {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.6;
  color: #C4C4C4; max-width: 44ch; margin-bottom: 34px;
}

/* --- dots -------------------------------------------------------------- */
.hero__dots { display: flex; gap: 10px; margin-top: 40px; }
.hero__dot {
  width: 34px; height: 4px; padding: 0;
  background: rgba(255,255,255,.28); border: 0; border-radius: 0;
  cursor: pointer; transition: background-color .2s ease-out;
}
.hero__dot:hover { background: rgba(255,255,255,.5); }
.hero__dot[aria-current="true"] { background: var(--red); }

@media (max-width: 900px) {
  /* A phone has no left column to give the type, so the layout stacks instead:
     the player owns the top of the frame and the copy sits underneath it on
     near-solid black. Putting the headline over the face, which is what a
     straight scale-down does, is the thing to avoid. */
  .hero {
    padding: 300px 0 56px;
    min-height: 700px;
    align-items: flex-end;
  }
  .hero__inner > * { max-width: none; }
  .hero__slide { background-position: 64% 6%; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(9,9,9,0) 0%, rgba(9,9,9,.12) 22%,
                      rgba(9,9,9,.72) 40%, rgba(9,9,9,.94) 54%,
                      rgba(9,9,9,.97) 100%);
  }
}

@media (max-width: 480px) {
  .hero { padding: 250px 0 48px; min-height: 640px; }
  .hero__slide { background-position: 62% 4%; }
}

/* Page banner for interior pages */
.page-hero {
  background: var(--black); color: var(--white);
  padding: 70px 0 66px;
}
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p { color: #A8A8A8; font-size: 18px; max-width: 56ch; margin: 0; }

/* --------------------------------------------------------------------------
   8. VALUE ROW  (TRAIN / COMPETE / IMPROVE)
   -------------------------------------------------------------------------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 52px; }
.values__item { border-top: 4px solid var(--red); padding: 22px 28px 6px 0; }
.values__item h3 { margin-bottom: 8px; }
.values__item p { color: var(--gray-text); font-size: 15px; margin: 0; }

@media (max-width: 760px) {
  .values { grid-template-columns: 1fr; gap: 28px; }
  .values__item { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   9. SPLIT / UNIFORM SECTION
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* Headline beside its own intro copy. The headline column gets the larger
   share because a display face at this size needs the room, and the two
   columns are bottom-aligned so the paragraph settles onto the same line as
   the red rule instead of floating at the top with a gap beneath it. */
.split--head {
  grid-template-columns: 1.15fr 1fr;
  align-items: end;
  gap: 64px;
  margin-bottom: 8px;
}
.split--head .rule { margin-bottom: 0; }
.split--head .lede { margin-bottom: 0; }
@media (max-width: 900px) {
  .split--head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .split--head .rule { margin-bottom: 4px; }
}

.media-panel {
  background: #121212;
  border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  min-height: 340px; padding: 40px;
}
.media-panel img { max-width: 260px; opacity: .9; }
.media-panel__note {
  font-family: var(--font-head); font-size: 14px; letter-spacing: .18em;
  text-transform: uppercase; color: #5A5A5A; margin-top: 20px; text-align: center;
}

/* --------------------------------------------------------------------------
   9b. COACH PHOTO
   -------------------------------------------------------------------------- */
.coach-photo { margin: 0; position: relative; }
.coach-photo img {
  width: 100%; display: block;
  border-top: 5px solid var(--red);
}
.coach-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(9,9,9,0) 0%, rgba(9,9,9,.88) 62%);
  color: var(--white);
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 44px 20px 16px;
}

/* --------------------------------------------------------------------------
   10. TEAM CARDS
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--red);
  padding: 34px 32px 32px;
  display: flex; flex-direction: column;
}
.card__label {
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gray-text);
  margin-bottom: 10px;
}
.card h3 { margin-bottom: 14px; }
.card p { color: var(--gray-text); font-size: 15.5px; }
.card ul {
  list-style: none; padding: 0; margin: 20px 0 28px;
  border-top: 1px solid var(--line);
}
.card li {
  padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line);
  font-size: 15px; position: relative;
}
.card li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 8px; height: 8px; background: var(--red);
}
.card .btn { align-self: flex-start; margin-top: auto; }

/* --------------------------------------------------------------------------
   11. FACT ROW
   -------------------------------------------------------------------------- */
/* auto-fit rather than a fixed column count, so adding or removing a fact does
   not require touching the CSS. Four fit on a desktop row, two on a tablet. */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: rgba(255,255,255,.22); margin: 40px 0 38px;
}
.facts__item { background: var(--red); padding: 26px 22px; text-align: center; }
.section--black .facts { background: var(--line-dark); }
.section--black .facts__item { background: var(--black); }
.facts__k {
  display: block; font-family: var(--font-head); font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: 6px;
}
.facts__v {
  display: block; font-family: var(--font-head); font-size: 30px;
  font-weight: 700; text-transform: uppercase; color: var(--white); line-height: 1;
}
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12. VALUES LIST (About page)
   -------------------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pillars__item { background: var(--white); padding: 30px 20px; text-align: center; }
.pillars__n {
  font-family: var(--font-head); font-size: 13px; letter-spacing: .18em;
  color: var(--red); display: block; margin-bottom: 10px;
}
.pillars__item h4 { margin: 0; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pillars { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   13. DETAIL LIST (Teams / Tryouts)
   -------------------------------------------------------------------------- */
.detail { border-top: 1px solid var(--line); margin-top: 26px; }
.detail__row {
  display: grid; grid-template-columns: 210px 1fr; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.detail__k {
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray-text);
}
.detail__v { font-size: 16px; }
@media (max-width: 640px) {
  .detail__row { grid-template-columns: 1fr; gap: 4px; }
}

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative; padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line); font-size: 16px;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 12px; height: 2px; background: var(--red);
}

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.form { max-width: 720px; }
/* Standalone forms (register) centre; forms inside .split stay left. */
.form--center { margin-left: auto; margin-right: auto; }
.form__group { margin-bottom: 20px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; gap: 0; } }

.form__legend {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 0 0 12px; margin: 40px 0 24px; width: 100%;
  border-bottom: 3px solid var(--red);
}
.form fieldset { border: 0; padding: 0; margin: 0; }
.form fieldset:first-of-type .form__legend { margin-top: 0; }

.form label {
  display: block; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; margin-bottom: 7px;
}
.form label .opt { color: var(--gray-text); font-weight: 400; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 16px; color: var(--black);
  background: var(--white);
  border: 1px solid #C9C9C4; border-radius: 2px;
  padding: 13px 14px;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
  appearance: none; -webkit-appearance: none;
}
.form textarea { min-height: 120px; resize: vertical; }
.form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236F6F72' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215,25,32,.16);
}
.form [aria-invalid="true"] { border-color: var(--red); background: #FFF7F7; }

.agree { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.agree__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.agree__item input {
  width: 20px; height: 20px; flex: 0 0 auto; margin: 2px 0 0;
  accent-color: var(--red);
}
.agree__item label { font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; }

.form__submit { margin-top: 30px; }
.form__note { font-size: 13.5px; color: var(--gray-text); margin-top: 14px; }

.form__status { margin-top: 16px; font-size: 15px; font-weight: 500; }
.form__status.is-error { color: var(--red); }

.form-success {
  display: none;
  background: var(--gray-bg); border-left: 5px solid var(--red);
  padding: 36px 32px;
}
.form-success h3 { margin-bottom: 10px; }
.form-success p { color: var(--gray-text); margin-bottom: 0; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   15. CONTACT PANEL
   -------------------------------------------------------------------------- */
.info-panel { background: var(--black); color: var(--white); padding: 38px 34px; }
.info-panel img { width: 130px; margin-bottom: 26px; }
.info-panel h4 { color: var(--white); margin-bottom: 6px; }
.info-panel p { color: #A8A8A8; font-size: 15.5px; }
.info-panel a { color: var(--white); }
.info-panel__block { padding: 18px 0; border-top: 1px solid var(--line-dark); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--black); color: #8D8D8D; padding: 64px 0 34px; font-size: 15px; }
.site-footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid var(--line-dark);
}
.site-footer img { width: 190px; margin-bottom: 18px; }
.site-footer__tag {
  font-family: var(--font-head); font-size: 17px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--white);
}
.site-footer h4 { color: var(--white); font-size: 15px; letter-spacing: .18em; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 5px 0; }
.site-footer a { color: #8D8D8D; text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; font-size: 13px; color: #5E5E5E;
}
@media (max-width: 820px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 34px; }
}

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: var(--white);
  padding: 12px 20px; z-index: 200; font-weight: 600;
}
.skip-link:focus { left: 0; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }