@charset "utf-8";

/* ============================================================
   Milled Fit Co — stylesheet
   Rail-and-stage layout: a fixed vertical navigation column on
   the left, scrolling content on the right. Moss green accents
   over charcoal, set on a bone paper field.
   System fonts only. No imports, no CDN, no build step.
   ============================================================ */

/* --- 1. tokens ------------------------------------------- */

:root {
  --moss-900: #22301c;
  --moss-800: #2f4226;
  --moss-700: #3d5531;
  --moss-600: #4c6a3d;
  --moss-400: #7f9a6c;
  --moss-200: #c3d2b6;
  --moss-050: #eaf0e4;

  --char-900: #1a1c19;
  --char-800: #242723;
  --char-700: #2f332d;
  --char-500: #4a4f47;
  --char-300: #7c817a;
  --char-150: #b9bdb5;

  --bone-100: #f7f6f1;
  --bone-200: #efede5;
  --bone-300: #e2dfd4;

  --clay: #a8603c;

  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', Times, serif;

  --rail-w: 274px;
  --pad-x: 46px;
  --line: 1px solid var(--bone-300);
  --shadow-lo: 0 1px 2px rgba(26, 28, 25, 0.05);
  --shadow-hi: 0 18px 44px rgba(26, 28, 25, 0.11);
}

/* --- 2. reset --------------------------------------------- */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, figure, blockquote, dl, dd, address, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; width: 100%; }

/* --- 3. page frame ---------------------------------------- */

.mfc-page {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.72;
  color: var(--char-700);
  background: var(--bone-100);
}

.mfc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
  background: var(--moss-800);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.mfc-skip:focus { left: 0; }

.mfc-shell { min-height: 100vh; }

/* --- 4. compact bar (phones and tablets) ------------------ */

.mfc-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--char-900);
  color: var(--bone-100);
  border-bottom: 3px solid var(--moss-700);
}

.mfc-bar__mark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.mfc-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid rgba(247, 246, 241, 0.34);
  border-radius: 2px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
}
.mfc-bar__toggle:hover { border-color: var(--moss-400); }

.mfc-bar__glyph {
  position: relative;
  width: 17px;
  height: 2px;
  background: currentColor;
  display: block;
}
.mfc-bar__glyph::before,
.mfc-bar__glyph::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.mfc-bar__glyph::before { top: -6px; }
.mfc-bar__glyph::after { top: 6px; }

.mfc-bar__toggle.is-lit .mfc-bar__glyph { background: transparent; }
.mfc-bar__toggle.is-lit .mfc-bar__glyph::before { transform: translateY(6px) rotate(45deg); }
.mfc-bar__toggle.is-lit .mfc-bar__glyph::after { transform: translateY(-6px) rotate(-45deg); }

/* --- 5. the rail ------------------------------------------ */

.mfc-rail {
  background: var(--char-900);
  color: var(--bone-200);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.34s ease;
}
.mfc-rail.is-open { max-height: 1100px; }

.mfc-rail__scroll { padding: 26px 22px 34px; }

.mfc-rail__brand {
  display: none;
  text-decoration: none;
  margin-bottom: 30px;
}

.mfc-rail__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--moss-600);
  color: var(--moss-200);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.mfc-rail__wordmark strong {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-100);
}
.mfc-rail__wordmark em {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--char-150);
}

.mfc-rail__list { border-top: 1px solid rgba(247, 246, 241, 0.11); }

.mfc-rail__item { border-bottom: 1px solid rgba(247, 246, 241, 0.11); }

.mfc-rail__item a {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas: 'num label' 'num note';
  column-gap: 12px;
  padding: 13px 8px 13px 4px;
  text-decoration: none;
  transition: background 0.18s ease, padding-left 0.18s ease;
}
.mfc-rail__item a:hover {
  background: rgba(76, 106, 61, 0.24);
  padding-left: 10px;
}

.mfc-rail__num {
  grid-area: num;
  align-self: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--moss-400);
}

.mfc-rail__label {
  grid-area: label;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--bone-100);
}

.mfc-rail__note {
  grid-area: note;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--char-300);
}

.mfc-rail__item.is-here { background: var(--moss-800); }
.mfc-rail__item.is-here .mfc-rail__num { color: var(--moss-200); }
.mfc-rail__item.is-here .mfc-rail__note { color: var(--moss-200); }

.mfc-rail__foot { margin-top: 26px; }

.mfc-rail__reach {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--char-150);
}
.mfc-rail__reach a { color: var(--moss-200); text-decoration: none; }
.mfc-rail__reach a:hover { text-decoration: underline; }

/* --- 6. stage --------------------------------------------- */

.mfc-stage { display: block; }

.mfc-block {
  padding: 54px 24px;
  border-bottom: var(--line);
}
.mfc-block:last-of-type { border-bottom: 0; }

.mfc-block--char {
  background: var(--char-900);
  color: var(--bone-200);
  border-bottom-color: var(--char-800);
}
.mfc-block--moss {
  background: var(--moss-900);
  color: var(--moss-050);
  border-bottom-color: var(--moss-800);
}
.mfc-block--tint { background: var(--bone-200); }
.mfc-block--flush { padding-top: 34px; }

.mfc-inner { max-width: 940px; }

/* --- 7. type ---------------------------------------------- */

.mfc-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moss-600);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--moss-600);
  margin-bottom: 22px;
}
.mfc-block--char .mfc-eyebrow,
.mfc-block--moss .mfc-eyebrow {
  color: var(--moss-200);
  border-bottom-color: var(--moss-400);
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--char-900);
  font-weight: 700;
  letter-spacing: -0.012em;
}
.mfc-block--char h1, .mfc-block--char h2, .mfc-block--char h3, .mfc-block--char h4,
.mfc-block--moss h1, .mfc-block--moss h2, .mfc-block--moss h3, .mfc-block--moss h4 {
  color: var(--bone-100);
}

h1 { font-size: 33px; line-height: 1.16; margin-bottom: 18px; }
h2 { font-size: 25px; line-height: 1.22; margin-bottom: 15px; }
h3 { font-size: 18px; line-height: 1.34; margin-bottom: 10px; letter-spacing: 0.01em; }
h4 { font-size: 15px; line-height: 1.4; margin-bottom: 8px; letter-spacing: 0.05em; text-transform: uppercase; }

h1 em, h2 em {
  font-style: normal;
  color: var(--moss-600);
}
.mfc-block--char h1 em, .mfc-block--char h2 em,
.mfc-block--moss h1 em, .mfc-block--moss h2 em { color: var(--moss-200); }

.mfc-stage p { margin-bottom: 17px; }
.mfc-stage p:last-child { margin-bottom: 0; }

.mfc-lede {
  font-size: 19.5px;
  line-height: 1.66;
  color: var(--char-500);
}
.mfc-block--char .mfc-lede,
.mfc-block--moss .mfc-lede { color: var(--moss-050); }

.mfc-kicker {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--char-300);
  margin-bottom: 14px;
}

.mfc-stage a:not(.mfc-btn):not(.mfc-rail__item a) { color: var(--moss-700); }
.mfc-block--char a:not(.mfc-btn),
.mfc-block--moss a:not(.mfc-btn) { color: var(--moss-200); }

.mfc-link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--moss-400);
  padding-bottom: 3px;
}
.mfc-link:hover { border-bottom-color: var(--clay); }

.mfc-hr {
  border: 0;
  border-top: 3px solid var(--moss-600);
  width: 68px;
  margin: 26px 0;
}

/* --- 8. buttons ------------------------------------------- */

.mfc-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.mfc-btn:hover { transform: translateY(-2px); }

.mfc-btn--moss {
  background: var(--moss-600);
  border-color: var(--moss-600);
  color: #fff;
}
.mfc-btn--moss:hover { background: var(--moss-700); border-color: var(--moss-700); }

.mfc-btn--char {
  background: var(--char-900);
  border-color: var(--char-900);
  color: var(--bone-100);
}
.mfc-btn--char:hover { background: var(--moss-800); border-color: var(--moss-800); }

.mfc-btn--line {
  background: transparent;
  border-color: var(--char-150);
  color: var(--char-700);
}
.mfc-btn--line:hover { border-color: var(--moss-600); color: var(--moss-700); }

.mfc-block--char .mfc-btn--line,
.mfc-block--moss .mfc-btn--line {
  border-color: rgba(247, 246, 241, 0.42);
  color: var(--bone-100);
}
.mfc-block--char .mfc-btn--line:hover,
.mfc-block--moss .mfc-btn--line:hover { border-color: var(--moss-200); color: var(--moss-200); }

.mfc-btn--wide { display: block; text-align: center; width: 100%; }

.mfc-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* --- 9. grids and cards ----------------------------------- */

.mfc-cols { display: grid; gap: 24px; }
.mfc-cols--2 { grid-template-columns: 1fr; }
.mfc-cols--3 { grid-template-columns: 1fr; }
.mfc-cols--4 { grid-template-columns: 1fr 1fr; }

.mfc-split {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  align-items: start;
}

.mfc-card {
  background: #fff;
  border: var(--line);
  border-top: 3px solid var(--moss-600);
  padding: 24px 22px;
  box-shadow: var(--shadow-lo);
}
.mfc-card--plain { border-top-color: var(--char-150); }
.mfc-card p:last-child { margin-bottom: 0; }

.mfc-card__tag {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss-600);
  margin-bottom: 9px;
}

.mfc-block--char .mfc-card,
.mfc-block--moss .mfc-card {
  background: rgba(247, 246, 241, 0.055);
  border-color: rgba(247, 246, 241, 0.16);
  border-top-color: var(--moss-400);
  box-shadow: none;
  color: var(--moss-050);
}
.mfc-block--char .mfc-card__tag,
.mfc-block--moss .mfc-card__tag { color: var(--moss-200); }

.mfc-panel {
  background: #fff;
  border: var(--line);
  border-left: 4px solid var(--moss-600);
  padding: 24px 24px;
  box-shadow: var(--shadow-lo);
}

.mfc-aside {
  background: var(--moss-050);
  border: 1px solid var(--moss-200);
  padding: 22px 22px;
  font-size: 16px;
}
.mfc-aside h3 { color: var(--moss-800); }

/* --- 10. the ladder table --------------------------------- */

.mfc-ladder {
  background: #fff;
  border: var(--line);
  box-shadow: var(--shadow-lo);
  overflow-x: auto;
}

.mfc-ladder__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 15px 18px;
  background: var(--char-900);
  color: var(--bone-100);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mfc-ladder table { font-family: var(--sans); font-size: 14px; min-width: 520px; }

.mfc-ladder th {
  text-align: left;
  padding: 11px 16px;
  background: var(--bone-200);
  border-bottom: 1px solid var(--bone-300);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--char-500);
  white-space: nowrap;
}

.mfc-ladder td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--bone-200);
  color: var(--char-700);
}
.mfc-ladder tbody tr:last-child td { border-bottom: 0; }
.mfc-ladder tbody tr:nth-child(odd) td { background: rgba(234, 240, 228, 0.4); }
.mfc-ladder td:first-child { font-weight: 700; color: var(--char-900); }

.mfc-ladder__foot {
  padding: 13px 18px;
  border-top: 1px solid var(--bone-300);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--char-300);
}

/* --- 11. numbered steps ----------------------------------- */

.mfc-steps { counter-reset: mfcstep; }

.mfc-step {
  counter-increment: mfcstep;
  position: relative;
  padding: 0 0 26px 56px;
  border-left: 2px solid var(--bone-300);
  margin-left: 18px;
}
.mfc-step:last-child { border-left-color: transparent; padding-bottom: 0; }

.mfc-step::before {
  content: counter(mfcstep, decimal-leading-zero);
  position: absolute;
  left: -19px;
  top: -3px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--moss-600);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 50%;
}

.mfc-step h3 { margin-bottom: 7px; }

.mfc-step__time {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--char-300);
  margin-bottom: 6px;
}

/* --- 12. lists -------------------------------------------- */

.mfc-ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
}
.mfc-ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 11px;
  height: 2px;
  background: var(--moss-600);
}
.mfc-block--char .mfc-ticks li::before,
.mfc-block--moss .mfc-ticks li::before { background: var(--moss-400); }

.mfc-runs { counter-reset: mfcrun; }
.mfc-runs li {
  counter-increment: mfcrun;
  position: relative;
  padding-left: 38px;
  margin-bottom: 13px;
}
.mfc-runs li::before {
  content: counter(mfcrun) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--moss-600);
}

.mfc-defs dt {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--char-900);
  margin-top: 18px;
}
.mfc-defs dd { margin-left: 0; }
.mfc-defs dt:first-child { margin-top: 0; }

/* --- 13. stat strip --------------------------------------- */

.mfc-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(247, 246, 241, 0.16);
  border: 1px solid rgba(247, 246, 241, 0.16);
}

.mfc-strip__cell {
  background: var(--char-900);
  padding: 20px 16px;
}
.mfc-block--moss .mfc-strip__cell { background: var(--moss-900); }

.mfc-strip__num {
  display: block;
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--moss-200);
}
.mfc-strip__cap {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--char-150);
}

/* --- 14. quotes ------------------------------------------- */

.mfc-quote {
  background: #fff;
  border: var(--line);
  border-bottom: 3px solid var(--moss-600);
  padding: 26px 24px;
  box-shadow: var(--shadow-lo);
}
.mfc-quote blockquote {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--char-700);
}
.mfc-quote blockquote p { margin-bottom: 14px; }

.mfc-quote__who {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bone-300);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--char-500);
}
.mfc-quote__who span { display: block; color: var(--moss-600); letter-spacing: 0.14em; margin-top: 4px; }

/* --- 15. faq ---------------------------------------------- */

.mfc-qa { border-top: 2px solid var(--char-900); }

.mfc-qa__row {
  border-bottom: 1px solid var(--bone-300);
  padding: 22px 0;
}
.mfc-qa__row h3 {
  display: flex;
  gap: 12px;
  margin-bottom: 9px;
}
.mfc-qa__row h3 span {
  font-size: 12px;
  color: var(--moss-600);
  padding-top: 4px;
  letter-spacing: 0.1em;
}

/* --- 16. forms -------------------------------------------- */

.mfc-form {
  background: #fff;
  border: var(--line);
  border-top: 4px solid var(--moss-600);
  padding: 26px 22px;
  box-shadow: var(--shadow-lo);
}

.mfc-form__pair { display: grid; grid-template-columns: 1fr; gap: 16px; }

.mfc-field { margin-bottom: 16px; }

.mfc-field label {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--char-500);
  margin-bottom: 6px;
}

.mfc-field input,
.mfc-field select,
.mfc-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--char-150);
  border-radius: 1px;
  background: var(--bone-100);
  font-family: var(--serif);
  font-size: 16px;
  color: var(--char-900);
}
.mfc-field textarea { min-height: 128px; resize: vertical; }

.mfc-field input:focus,
.mfc-field select:focus,
.mfc-field textarea:focus {
  outline: 2px solid var(--moss-400);
  outline-offset: 1px;
  border-color: var(--moss-600);
  background: #fff;
}

.mfc-field__hint {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--char-300);
  letter-spacing: 0.03em;
}

/* --- 17. journal ------------------------------------------ */

.mfc-post {
  background: #fff;
  border: var(--line);
  padding: 24px 22px;
  box-shadow: var(--shadow-lo);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mfc-post:hover { box-shadow: var(--shadow-hi); transform: translateY(-3px); }

.mfc-post__meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss-600);
  margin-bottom: 10px;
}
.mfc-post h3 { margin-bottom: 9px; }
.mfc-post h3 a { text-decoration: none; }
.mfc-post h3 a:hover { color: var(--moss-700); }

.mfc-essay { max-width: 720px; }
.mfc-essay h2 { margin-top: 34px; }
.mfc-essay h3 { margin-top: 24px; }
.mfc-essay ul, .mfc-essay ol { margin-bottom: 18px; }

.mfc-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 13px 0;
  border-top: 2px solid var(--char-900);
  border-bottom: 1px solid var(--bone-300);
  margin-bottom: 28px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--char-300);
}

.mfc-pull {
  border-left: 4px solid var(--moss-600);
  padding: 4px 0 4px 20px;
  margin: 26px 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--char-900);
}

/* --- 18. misc --------------------------------------------- */

.mfc-crumb {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--char-300);
  margin-bottom: 14px;
}
.mfc-block--char .mfc-crumb,
.mfc-block--moss .mfc-crumb { color: var(--moss-400); }

.mfc-fine {
  font-size: 14.5px;
  color: var(--char-300);
  line-height: 1.7;
}

.mfc-tagset { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mfc-tag {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--moss-200);
  background: var(--moss-050);
  color: var(--moss-800);
}

.mfc-rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.mfc-rise.is-shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mfc-rise { opacity: 1; transform: none; transition: none; }
  .mfc-btn:hover, .mfc-post:hover { transform: none; }
}

/* --- 19. footer ------------------------------------------- */

.mfc-foot {
  background: var(--char-900);
  color: var(--char-150);
  padding: 46px 24px 0;
  font-size: 15.5px;
}

.mfc-foot__grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  padding-bottom: 34px;
}

.mfc-foot__mark {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-100);
  margin-bottom: 12px;
}

.mfc-foot__blurb { line-height: 1.72; margin-bottom: 14px; }

.mfc-foot__stamp {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--moss-400);
}

.mfc-foot__head {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss-200);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(247, 246, 241, 0.14);
}

.mfc-foot__links li { margin-bottom: 8px; font-size: 15px; }
.mfc-foot__links a { text-decoration: none; }
.mfc-foot__links a:hover { color: var(--moss-200); text-decoration: underline; }

.mfc-foot__clock { margin-bottom: 18px; }
.mfc-foot__clock li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 12.5px;
  border-bottom: 1px dotted rgba(247, 246, 241, 0.12);
}
.mfc-foot__clock li span:first-child { color: var(--moss-200); letter-spacing: 0.1em; text-transform: uppercase; }

.mfc-foot__address {
  font-style: normal;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.8;
}
.mfc-foot__address a { color: var(--moss-200); text-decoration: none; }
.mfc-foot__address a:hover { text-decoration: underline; }

.mfc-foot__rule {
  border-top: 1px solid rgba(247, 246, 241, 0.14);
  padding: 20px 0 26px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--char-300);
}
.mfc-foot__rule p { margin-bottom: 6px; }

/* --- 20. breakpoints -------------------------------------- */

@media (min-width: 620px) {
  .mfc-block { padding: 64px 34px; }
  .mfc-foot { padding: 54px 34px 0; }
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .mfc-cols--2 { grid-template-columns: 1fr 1fr; }
  .mfc-strip { grid-template-columns: repeat(4, 1fr); }
  .mfc-form__pair { grid-template-columns: 1fr 1fr; }
  .mfc-foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .mfc-cols--3 { grid-template-columns: repeat(3, 1fr); }
  .mfc-cols--4 { grid-template-columns: repeat(4, 1fr); }
  .mfc-split { grid-template-columns: 1.15fr 0.85fr; gap: 42px; }
  .mfc-split--even { grid-template-columns: 1fr 1fr; }
  .mfc-split--flip > *:first-child { order: 2; }
  h1 { font-size: 46px; }
}

@media (min-width: 1040px) {
  .mfc-bar { display: none; }

  .mfc-shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
  }

  .mfc-rail {
    max-height: none;
    overflow: visible;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    border-right: 3px solid var(--moss-700);
  }

  .mfc-rail__scroll {
    height: 100vh;
    overflow-y: auto;
    padding: 30px 24px 30px 26px;
    display: flex;
    flex-direction: column;
  }

  .mfc-rail__brand { display: block; }
  .mfc-rail__nav { flex: 1 1 auto; }

  .mfc-block { padding: 78px var(--pad-x); }
  .mfc-foot { padding: 62px var(--pad-x) 0; }
  .mfc-foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

@media (min-width: 1320px) {
  :root { --rail-w: 300px; --pad-x: 72px; }
  .mfc-inner { max-width: 1000px; }
  h1 { font-size: 52px; }
  h2 { font-size: 31px; }
  .mfc-page { font-size: 17.5px; }
}