/* MeskikCode — generated by build.mjs. Do not edit.
   Sources: styles/fonts-local.css, styles/tokens/*.css (copied from
   DESIGN/tokens/, minus fonts.css) and styles/site.css. */
/* ===== styles/fonts-local.css ===== */
/* MeskikCode — self-hosted webfonts.
 *
 * Replaces the Google Fonts @import in DESIGN/tokens/fonts.css. Same four
 * families, same weights, same unicode-range subsetting — served from our own
 * origin so the page costs no third-party connection and nothing render-blocking
 * sits in front of first paint (WPO / CVO).
 *
 * Only the latin, latin-ext and arabic subsets are shipped. Thai, Vietnamese,
 * Cyrillic and Greek are dropped: no MeskikCode surface renders them.
 *
 * font-display: swap keeps text visible during load — no invisible-text flash,
 * and no layout shift beyond the metric swap.
 */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/chakra-petch-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/chakra-petch-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/chakra-petch-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/chakra-petch-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== tokens/colors.css ===== */
:root{
  /* ---- Brand: Electric Tech Cyan ---- */
  --cyan-50:#E6F8FF;--cyan-100:#CCF0FF;--cyan-200:#99E1FF;--cyan-300:#66D2FF;
  --cyan-400:#33C8FF;--cyan-500:#00BFFF;--cyan-600:#00A3FF;--cyan-700:#0082CC;
  --cyan-800:#006199;--cyan-900:#004166;
  --brand-cyan:#00BFFF;          /* definitive brand signature */
  --brand-cyan-deep:#00A3FF;     /* secondary tech hue */
  --brand-cyan-wash:#CCF0FF;     /* logo secondary / outline fill */

  /* ---- Industrial Slate (structural canvas, dark themes) ---- */
  --slate-950:#0A0F1C;--slate-900:#0F172A;--slate-800:#1E293B;--slate-700:#334155;
  --slate-600:#475569;--slate-500:#64748B;--slate-400:#94A3B8;--slate-300:#CBD5E1;
  --slate-200:#E2E8F0;--slate-100:#F1F5F9;--slate-50:#F8FAFC;
  --white:#FFFFFF;

  /* ---- Clinical Teal (light / healthcare / print accents) ---- */
  --teal-700:#0F766E;--teal-600:#0D9488;--teal-300:#5EEAD4;--teal-100:#CCFBF1;

  /* ---- Status ---- */
  --green-600:#16A34A;--green-100:#DCFCE7;
  --amber-500:#F59E0B;--amber-100:#FEF3C7;
  --red-600:#DC2626;--red-100:#FEE2E2;
  --violet-600:#7C3AED;

  /* ---- Field / high-visibility (rugged handheld assets) ---- */
  --field-hi:#FFD400;   /* hazard-visible accent for outdoor BTP/quarry screens */
  --field-ink:#050A14;  /* max-contrast ground under direct sunlight */
}

/* ===== tokens/typography.css ===== */
:root{
  --font-display:"Chakra Petch","Montserrat",system-ui,sans-serif; /* brand/techno headings */
  --font-sans:"Montserrat",system-ui,-apple-system,sans-serif;      /* UI + body */
  --font-arabic:"IBM Plex Sans Arabic","Montserrat",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --fs-2xs:10px;--fs-xs:11px;--fs-sm:12px;--fs-base:14px;--fs-md:16px;
  --fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:36px;--fs-4xl:48px;--fs-5xl:64px;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-black:800; /* @kind font */

  --lh-tight:1.08; /* @kind font */
  --lh-snug:1.25; /* @kind font */
  --lh-normal:1.5; /* @kind font */
  --lh-loose:1.7; /* @kind font */

  --ls-display:-0.02em; /* @kind font */
  --ls-normal:0; /* @kind font */
  --ls-label:0.06em; /* @kind font */
  --ls-mono:0.02em; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
:root{
  --sp-0:0px;--sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:12px;--sp-6:16px;
  --sp-7:20px;--sp-8:24px;--sp-9:32px;--sp-10:40px;--sp-11:48px;--sp-12:64px;
  --sp-13:80px;--sp-14:96px;--sp-15:128px;

  --gutter:24px;            /* desktop app gutter */
  --gutter-print:14mm; /* @kind spacing */      /* administrative document margin */
  --container-max:1240px;   /* marketing content width */
  --row-h-dense:34px;       /* ledger table row */
  --row-h:44px;             /* standard row / minimum touch target */
  --row-h-field:56px;       /* rugged handheld touch target (gloved hands) */
  --sidebar-w:248px;
  --topbar-h:60px;
}

/* ===== tokens/geometry.css ===== */
:root{
  --r-0:0px;--r-xs:2px;--r-sm:4px;--r-md:6px;--r-lg:10px;--r-xl:14px;--r-2xl:20px;--r-pill:999px;
  --r-control:6px;   /* buttons, inputs */
  --r-card:10px;     /* surface cards */
  --r-chip:4px;      /* squared badges — echoes the wordmark */

  --bw-hair:1px;--bw-1:1px;--bw-2:2px;--bw-rail:3px;  /* rail = left accent bar on data blocks */
  --border-light:1px solid var(--slate-200); /* @kind other */
  --border-dark:1px solid #23304A; /* @kind other */
  --border-focus:2px solid var(--brand-cyan); /* @kind other */
  --grid-line:rgba(148,163,184,.18); /* @kind color */
}

/* ===== tokens/elevation.css ===== */
:root{
  --sh-0:none; /* @kind shadow */
  --sh-1:0 1px 2px rgba(15,23,42,.06);
  --sh-2:0 2px 6px rgba(15,23,42,.08);
  --sh-3:0 6px 18px rgba(15,23,42,.10);
  --sh-4:0 18px 44px rgba(15,23,42,.16);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.5);
  --sh-inset-dark:inset 0 1px 0 rgba(255,255,255,.05);
  --glow-cyan:0 0 0 1px rgba(0,191,255,.45),0 4px 18px rgba(0,191,255,.25);
  --ring-focus:0 0 0 3px rgba(0,191,255,.35);
  --scrim-dark:linear-gradient(to top,rgba(10,15,28,.88),rgba(10,15,28,0)); /* @kind other */
}

/* ===== tokens/motion.css ===== */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --t-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard); /* @kind other */
}

/* ===== tokens/semantic.css ===== */
/* Semantic aliases. Default scope = light "Clean Surface Canvas".
   Add data-theme="dark" for the "Structural Canvas" system theme. */
:root,[data-theme="light"]{
  --surface-page:var(--slate-50);
  --surface-card:var(--white);
  --surface-sunken:var(--slate-100);
  --surface-raised:var(--white);
  --surface-inverse:var(--slate-900);
  --surface-accent-soft:var(--cyan-50);

  --text-strong:var(--slate-900);
  --text-body:var(--slate-700);
  --text-muted:var(--slate-500);
  --text-inverse:var(--white);
  --text-accent:var(--cyan-700);
  --text-link:var(--cyan-700);
  --text-link-hover:var(--cyan-800);

  --border-subtle:var(--slate-200);
  --border-strong:var(--slate-300);

  --action-primary:var(--brand-cyan);
  --action-primary-hover:var(--brand-cyan-deep);
  --action-primary-active:var(--cyan-700);
  --action-primary-text:#04202E;
  --action-secondary:var(--slate-100);
  --action-secondary-text:var(--slate-800);

  --status-ok:var(--green-600);--status-ok-soft:var(--green-100);
  --status-warn:var(--amber-500);--status-warn-soft:var(--amber-100);
  --status-error:var(--red-600);--status-error-soft:var(--red-100);
  --status-info:var(--brand-cyan-deep);--status-info-soft:var(--cyan-50);
  --status-clinical:var(--teal-600);--status-clinical-soft:var(--teal-100);

  --table-header-bg:var(--slate-100);
  --table-row-alt:#FBFCFE;
  --table-border:var(--slate-200);

  --shadow-card:var(--sh-2);
  --shadow-pop:var(--sh-3);
}
[data-theme="dark"]{
  --surface-page:var(--slate-900);
  --surface-card:var(--slate-800);
  --surface-sunken:var(--slate-950);
  --surface-raised:#24334D;
  --surface-inverse:var(--white);
  --surface-accent-soft:rgba(0,191,255,.10);

  --text-strong:var(--white);
  --text-body:var(--slate-300);
  --text-muted:var(--slate-400);
  --text-inverse:var(--slate-900);
  --text-accent:var(--brand-cyan);
  --text-link:var(--brand-cyan);
  --text-link-hover:var(--cyan-300);

  --border-subtle:#23304A;
  --border-strong:#31425F;

  --action-secondary:#23304A;
  --action-secondary-text:var(--slate-200);

  --table-header-bg:#16233B;
  --table-row-alt:#1A2739;
  --table-border:#23304A;

  --shadow-card:0 1px 0 rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.35);
  --shadow-pop:0 18px 44px rgba(0,0,0,.5);
}

/* ===== tokens/base.css ===== */
/* Minimal element defaults. Components carry their own styling. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--ls-display);line-height:var(--lh-snug);margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:var(--fs-sm)}
:where([dir="rtl"]) body{font-family:var(--font-arabic)}
:where([dir="rtl"]) h1,:where([dir="rtl"]) h2,:where([dir="rtl"]) h3,:where([dir="rtl"]) h4{font-family:var(--font-arabic);letter-spacing:0}
::selection{background:var(--brand-cyan);color:#04202E}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* ==========================================================================
   MeskikCode — public site stylesheet.

   Every value here resolves to a MUBCS token (DESIGN/tokens/*.css). No raw
   colours, radii, shadows, durations or type sizes are invented locally; the
   only literals are layout geometry (grid tracks, clamp bounds, aspect ratios)
   and the alpha washes MUBCS already defines in prose.

   Direction: logical properties only — margin-inline, padding-inline,
   inset-inline, border-inline, text-align:start/end. No left/right in layout.

   Mobile first: every base rule is the phone layout. Wider screens are additive,
   through min-width queries only — there is not one max-width query in this file.
   Breakpoints: 560 two-up · 720 side-by-side panes · 900 split layouts ·
   1040 wide grids · 1120 full navigation · 1440 container ceiling.
   ========================================================================== */

/* ---------- 1. Page shell ------------------------------------------------ */

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--surface-page);
  color: var(--text-body);
  overflow-x: hidden;
}

/* The form's result alerts are display:flex, which would otherwise beat the
   hidden attribute and show both states on load. */
[hidden] { display: none !important; }

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}

/* ---------- Phone type scale ---------------------------------------------
   MUBCS's size ramp is calibrated for dense desktop surfaces — portals, ledgers
   and field screens read at arm's length. On this marketing page the four
   smallest steps carry most of the talking: card bullet points, metas, metric
   rows, the identifier sheet. At 10-12px on a phone held at reading distance
   that is uncomfortable, and it is the main reason the page did not feel
   mobile-first. Below 720px each of those steps goes up one notch; from 720px
   the MUBCS ramp returns byte-for-byte. This is a deliberate divergence from
   the copied token layer, alongside the self-hosted fonts. */
:root {
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
}

@media (min-width: 720px) {
  :root {
    --fs-2xs: 10px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
  }
}

/* ---------- Accessible ink for small text -------------------------------
   MUBCS's --text-accent (cyan 700) and --text-muted (slate 500) are sized for
   body copy. At the 10-12px this site uses for micro-labels, eyebrows and table
   headers they measure 3.8:1 to 4.35:1 on the light canvas — under the 4.5:1
   AA threshold for small text. These two aliases step one stop darker inside
   the same MUBCS ramps, and are used wherever accent or muted ink drops below
   ~13px. On the dark canvas the existing values already clear AA, so the
   aliases resolve to them unchanged. */
:root, [data-theme="light"] {
  --text-accent-sm: var(--cyan-800);
  --text-muted-sm: var(--text-body);
}
[data-theme="dark"] {
  --text-accent-sm: var(--text-accent);
  --text-muted-sm: var(--text-muted);
}

/* Numbers, identifiers and the logo stay LTR inside RTL prose. */
.mc-ltr { direction: ltr; unicode-bidi: isolate; }

/* Metric values are mixed: "-60%" and "100%" are numeric and must read LTR,
   while "48 ساعة" and "مسؤول واحد" are Arabic and must read RTL. First-strong
   resolution per value gets both right without tagging them in the dictionary. */
.mc-bidi-auto { unicode-bidi: plaintext; }

.mc-skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--sp-6);
  z-index: 100;
  padding: var(--sp-5) var(--sp-6);
  background: var(--brand-cyan);
  color: var(--action-primary-text);
  border-radius: var(--r-control);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.mc-skip:focus { inset-block-start: var(--sp-5); text-decoration: none; }

.mc-shell { max-width: var(--container-max); margin-inline: auto; }

.mc-section {
  max-width: var(--container-max);
  margin-inline: auto;
  /* 36px of band padding on a phone rather than 48: nine sections at 96px of
     padding each was most of a screen of pure whitespace. */
  padding-block: clamp(36px, 6vw, 90px);
  padding-inline: clamp(20px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

@media (min-width: 720px) {
  .mc-section { gap: var(--sp-9); }
}

.mc-band { border-block-start: 1px solid var(--border-subtle); }
.mc-band--white { background: var(--surface-card); border-block-end: 1px solid var(--border-subtle); }
.mc-band--dark { background: var(--surface-page); }

/* ---------- 2. Type helpers ---------------------------------------------- */

.mc-eyebrow {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-accent-sm);
}
[dir="rtl"] .mc-eyebrow { letter-spacing: 0; }

.mc-microlabel {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
[dir="rtl"] .mc-microlabel { letter-spacing: 0; }

.mc-h2 {
  margin: 0;
  font-size: clamp(23px, 3vw, 36px);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  text-wrap: pretty;
}

.mc-lede {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: var(--lh-loose);
  color: var(--text-body);
  text-wrap: pretty;
}

.mc-intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 66ch;
}

.mc-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-mono);
}

/* Layout utilities — geometry only, no design values. */
.mc-flexmin { flex: 1 1 auto; min-width: 0; }
.mc-caption--start { text-align: start; }
.mc-step__icon { color: var(--text-accent); line-height: 0; display: inline-flex; }

/* ---------- 3. Controls -------------------------------------------------- */

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: var(--row-h);
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-align: center;
  /* Long French labels ("Demander mon appel gratuit") do not fit on a 320px
     screen. Below 560 the text wraps rather than pushing the page sideways;
     from 560 up the MUBCS single-line button returns. */
  white-space: normal;
  transition: var(--t-control);
}
[dir="rtl"] .mc-btn { font-family: var(--font-arabic); }
.mc-btn:hover { text-decoration: none; }

.mc-btn--sm { min-height: var(--row-h); padding-inline: 12px; font-size: var(--fs-sm); gap: var(--sp-3); }
.mc-btn--lg { min-height: 46px; padding-inline: 20px; font-size: var(--fs-md); gap: var(--sp-5); }

.mc-btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
}
.mc-btn--primary:hover {
  background: var(--action-primary-hover);
  color: var(--action-primary-text);
  box-shadow: var(--glow-cyan);
}
.mc-btn--primary:active { background: var(--action-primary-active); }

.mc-btn--secondary {
  background: var(--action-secondary);
  color: var(--action-secondary-text);
  border-color: var(--border-subtle);
}
.mc-btn--secondary:hover { background: var(--surface-sunken); color: var(--action-secondary-text); }

.mc-btn--ghost { background: transparent; color: var(--text-body); }
.mc-btn--ghost:hover { background: var(--surface-sunken); color: var(--text-body); }

/* The WhatsApp affordance. Teal by established use — DOCS/product-brief.md §8. */
.mc-btn--whatsapp {
  background: rgba(13, 148, 136, 0.10);
  border-color: rgba(13, 148, 136, 0.38);
  color: var(--teal-700);
}
.mc-btn--whatsapp:hover {
  background: rgba(13, 148, 136, 0.18);
  border-color: var(--teal-600);
  color: var(--teal-700);
  box-shadow: none;
}
[data-theme="dark"] .mc-btn--whatsapp { color: var(--teal-300); border-color: rgba(94, 234, 212, 0.45); }
[data-theme="dark"] .mc-btn--whatsapp:hover { color: var(--teal-300); border-color: var(--teal-300); }

.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 22px;
  padding-block: 2px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-chip);
  background: var(--surface-sunken);
  color: var(--text-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
[dir="rtl"] .mc-badge { letter-spacing: 0; text-transform: none; }
.mc-badge--brand {
  background: var(--surface-accent-soft);
  color: var(--text-accent);
  border-color: rgba(0, 191, 255, 0.35);
}

/* ---------- 4. Header ---------------------------------------------------- */

/* MUBCS specifies exactly one sticky-header treatment: rgba(15,23,42,.92) over
   blur(10px). It sits directly above the dark hero band, so the two read as one
   surface, and it keeps its contrast over the light sections further down. */
.mc-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border-subtle);
}

.mc-header__bar {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--sp-5);
  padding-inline: clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--topbar-h);
  flex-wrap: wrap;
  row-gap: var(--sp-5);
}

.mc-header__logo { display: flex; align-items: center; min-height: var(--row-h); flex: 0 0 auto; }
.mc-header__logo img { height: 26px; width: auto; display: block; }

/* Base = phone: the nav is a stacked drawer, closed until the toggle opens it. */
.mc-nav {
  order: 4;
  flex-basis: 100%;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  border-block-start: 1px solid var(--border-subtle);
  padding-block-start: var(--sp-4);
}
.mc-header[data-open="true"] .mc-nav { display: flex; }

.mc-nav a {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  padding-block: var(--sp-5);
  min-height: var(--row-h);
  display: flex;
  align-items: center;
  border-block-end: 1px solid var(--border-subtle);
  transition: var(--t-control);
}
.mc-nav a:last-child { border-block-end: 0; }
.mc-nav a:hover { color: var(--text-link); text-decoration: none; }

.mc-header__toggle {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  flex: 0 0 auto;
  border-color: var(--border-subtle);
  color: var(--text-body);
}

.mc-header__side {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* Must not grow: with the bar allowed to wrap, a growing side group pushes
     the menu toggle onto a second row. It is pushed to the end by the auto
     margin instead. */
  flex: 0 1 auto;
  margin-inline-start: auto;
  min-width: 0;
}

.mc-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--row-h);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}
.mc-phone:hover { color: var(--text-link); text-decoration: none; }

/* Language router — real routes, one anchor per locale.
   On a phone it rides in the menu drawer rather than the bar: three 44px touch
   targets alongside the logo, the call glyph and the toggle do not fit on a
   320px row, and a two-row sticky header would eat a fifth of the screen. */
.mc-lang {
  order: 5;
  flex-basis: 100%;
  display: none;
  justify-content: flex-start;
  margin-block-end: var(--sp-4);
  align-items: center;
  gap: 2px;
  padding: var(--sp-2);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  flex: 0 0 auto;
}
.mc-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-mono);
  color: var(--text-muted);
  transition: var(--t-control);
}
.mc-lang a:hover { color: var(--text-strong); text-decoration: none; }
.mc-lang a[aria-current="true"] {
  background: var(--brand-cyan);
  color: var(--action-primary-text);
}
.mc-lang a[lang="ar"] { font-family: var(--font-arabic); }
.mc-header[data-open="true"] .mc-lang { display: inline-flex; }

/* The header's own colours. It is always the dark surface, so it does not take
   the page theme — these are pinned rather than inherited. */
.mc-header .mc-nav a,
.mc-header .mc-phone,
.mc-header__toggle { color: var(--slate-300); }
.mc-header .mc-nav a:hover,
.mc-header .mc-phone:hover { color: var(--brand-cyan); }
.mc-header .mc-nav,
.mc-header .mc-nav a,
.mc-header__toggle,
.mc-header .mc-lang { border-color: #23304A; }
.mc-header .mc-lang { background: #16233B; }
.mc-header .mc-lang a { color: var(--slate-400); }
.mc-header .mc-lang a:hover { color: var(--white); }
.mc-header .mc-lang a[aria-current="true"] { background: var(--brand-cyan); color: var(--action-primary-text); }
.mc-header__toggle:hover { background: #16233B; color: var(--white); }
.mc-header .mc-btn--whatsapp { color: var(--teal-300); border-color: rgba(94, 234, 212, 0.45); }
.mc-header .mc-btn--whatsapp:hover { color: var(--teal-300); border-color: var(--teal-300); }

/* Phone: the CTA and the two labels give way to their glyphs. At 320px even the
   WhatsApp glyph does not fit beside the wordmark, the call glyph and the
   toggle — it comes back at 360, and the quick bar carries it either way. */
.mc-header .mc-btn--nav-cta { display: none; }
.mc-header__side .mc-btn--whatsapp { display: none; }
.mc-header__side .mc-phone span,
.mc-header__side .mc-btn--whatsapp span { display: none; }

@media (min-width: 360px) {
  .mc-header__side .mc-btn--whatsapp { display: inline-flex; }
}

/* ---------- 5. Hero ------------------------------------------------------ */

/* Full-bleed founder photography under a bottom-up slate scrim: the one
   photographic treatment MUBCS permits, and the one gradient in the system.
   The 72px slate grid on top is the permitted dark-hero texture. */
.mc-heroband {
  position: relative;
  background: var(--slate-900);
  overflow: hidden;
  isolation: isolate;
}
.mc-heroband__media { position: absolute; inset: 0; z-index: -1; }
.mc-heroband__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.22;
  filter: grayscale(0.35);
}
.mc-heroband__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--slate-900) 12%, rgba(15, 23, 42, 0.72));
}
.mc-heroband__mesh {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
}

.mc-hero__accent { color: var(--brand-cyan); }

.mc-hero {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: clamp(36px, 5vw, 78px);
  padding-inline: clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}

.mc-hero__copy { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-7); }
.mc-hero__badges { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.mc-hero h1 {
  margin: 0;
  font-size: clamp(27px, 3.8vw, 50px);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  text-wrap: pretty;
}

.mc-hero__sub {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: var(--lh-loose);
  color: var(--text-body);
  max-width: 56ch;
  text-wrap: pretty;
}

.mc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

.mc-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--sp-7);
  padding-block-start: var(--sp-7);
  border-block-start: 1px solid var(--border-subtle);
  margin: 0;
  padding-inline: 0;
  list-style: none;
}
.mc-proof li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.mc-proof svg { color: var(--text-accent); flex: 0 0 auto; margin-block-start: 2px; }
.mc-proof span { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-body); font-weight: var(--fw-medium); }

/* ---------- 6. Hero visual: connected-systems wireframe ------------------ */

.mc-wire { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }

.mc-wire__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 260px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  background: var(--slate-950);
  overflow: hidden;
  box-shadow: var(--sh-4);
  contain: paint;
}

/* The 1px slate grid permitted behind dark hero surfaces. */
.mc-wire__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 33px, var(--grid-line) 33px 34px),
    repeating-linear-gradient(90deg, transparent 0 33px, var(--grid-line) 33px 34px);
}
.mc-wire__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(0, 191, 255, 0.13), transparent 62%);
}

.mc-wire__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1200px;
}
.mc-wire__cube {
  width: min(58%, 250px);
  aspect-ratio: 1 / 1;
  transform: rotateX(56deg);
  transform-style: preserve-3d;
}
.mc-wire__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: mc-spin 34s linear infinite;
}
.mc-wire__plane {
  position: absolute;
  border: 1px solid rgba(0, 191, 255, 0.5);
  background-color: rgba(0, 191, 255, 0.05);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(148, 163, 184, 0.3) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(148, 163, 184, 0.3) 21px 22px);
}
.mc-wire__plane--back { inset: 0; transform: translateZ(-52px); }
.mc-wire__plane--mid {
  inset: 9%;
  transform: translateZ(0);
  border-color: rgba(0, 191, 255, 0.62);
  background-color: rgba(0, 191, 255, 0.06);
}
.mc-wire__plane--front {
  inset: 19%;
  transform: translateZ(52px);
  border-color: rgba(0, 191, 255, 0.85);
  background-color: rgba(0, 191, 255, 0.09);
}
.mc-wire__node {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--brand-cyan);
  transform: translateZ(52px);
  box-shadow: 0 0 14px 3px rgba(0, 191, 255, 0.55);
  animation: mc-node 2.4s ease-in-out infinite;
}
.mc-wire__node--a { inset-block-start: 19%; inset-inline-start: 19%; }
.mc-wire__node--b { inset-block-end: 19%; inset-inline-end: 19%; animation-delay: 0.8s; }
.mc-wire__node--c {
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  background: var(--teal-300);
  transform: translateZ(-52px);
  box-shadow: 0 0 12px 3px rgba(13, 148, 136, 0.5);
  animation-delay: 0.4s;
}

@keyframes mc-spin { from { transform: rotateZ(0); } to { transform: rotateZ(360deg); } }
@keyframes mc-node { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.mc-wire__head {
  position: absolute;
  inset-block-start: var(--sp-6);
  inset-inline-start: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.mc-wire__head .mc-microlabel { color: var(--slate-400); }
.mc-wire__head strong {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--white);
}
[dir="rtl"] .mc-wire__head strong { font-family: var(--font-arabic); }

.mc-wire__tags {
  position: absolute;
  inset-block-end: var(--sp-6);
  inset-inline: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.mc-wire__tags span {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--slate-300);
  border: 1px solid var(--border-dark, #23304A);
  border-radius: var(--r-sm);
  padding-block: var(--sp-2);
  padding-inline: var(--sp-4);
  background: rgba(15, 23, 42, 0.72);
}
[dir="rtl"] .mc-wire__tags span { font-family: var(--font-arabic); }

.mc-wire__caption {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- 7. Outcomes band -------------------------------------------- */

.mc-outcomes {
  background: var(--surface-card);
}
.mc-outcomes__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: clamp(26px, 3.5vw, 42px);
  padding-inline: clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8) 38px;
}
.mc-outcome { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.mc-outcome__value {
  unicode-bidi: plaintext;
  font-family: var(--font-mono);
  font-size: clamp(25px, 2.8vw, 34px);
  font-weight: var(--fw-bold);
  color: var(--brand-cyan);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
[dir="rtl"] .mc-outcome__value { font-family: var(--font-arabic); }
.mc-outcome__label { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.mc-outcome__note { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }

/* ---------- 8. Cards ----------------------------------------------------- */

.mc-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
.mc-grid--tight { gap: var(--sp-6); }

.mc-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(16px, 2.2vw, 26px);
}

.mc-card--service {
  border-block-start: var(--bw-rail) solid var(--brand-cyan);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.mc-card--service:hover {
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

.mc-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }

.mc-iconbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--surface-accent-soft);
  border: 1px solid rgba(0, 191, 255, 0.32);
  color: var(--text-accent);
  flex: 0 0 auto;
}
.mc-iconbox--teal {
  width: 38px;
  height: 38px;
  background: rgba(13, 148, 136, 0.1);
  border-color: rgba(13, 148, 136, 0.28);
  color: var(--teal-700);
}

.mc-card__n {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.mc-card h3 {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  text-wrap: pretty;
}
.mc-card p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-body); text-wrap: pretty; }

.mc-points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--border-subtle);
  margin: 0;
  padding-inline: 0;
  list-style: none;
}
.mc-points li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.mc-points svg { color: var(--text-accent); flex: 0 0 auto; margin-block-start: 2px; }
.mc-points span { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-body); }

.mc-card__meta {
  margin-block-start: auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
[dir="rtl"] .mc-card__meta { letter-spacing: 0; text-transform: none; }

/* Sector card — metric footer on the sunken surface. */
.mc-card--sector { padding: 0; gap: var(--sp-6); overflow: hidden; box-shadow: var(--sh-1); }
.mc-card--sector .mc-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-block-start: var(--sp-6);
  padding-inline: var(--sp-7);
}
.mc-card--sector .mc-card__body {
  padding-inline: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.mc-card--sector h3 { font-size: var(--fs-lg); }
.mc-metrics {
  margin-block-start: auto;
  padding-block: var(--sp-6);
  padding-inline: var(--sp-7);
  background: var(--surface-sunken);
  border-block-start: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.mc-metrics div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.mc-metrics dt { font-size: var(--fs-sm); color: var(--text-body); min-width: 0; }
.mc-metrics dd {
  margin: 0;
  unicode-bidi: plaintext;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  flex: 0 0 auto;
}

/* Step card. */
.mc-step { gap: var(--sp-5); padding: var(--sp-7); box-shadow: var(--sh-1); }
.mc-step h3 { font-size: 15.5px; line-height: var(--lh-snug); }
.mc-step p { font-size: var(--fs-sm); }

/* ---------- 9. Transform block ------------------------------------------- */

.mc-transform__frame {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  background: var(--surface-page);
  box-shadow: var(--sh-1);
  padding: clamp(14px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.mc-transform__panes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-5);
}

.mc-pane {
  /* flex-basis:0 is right in the row direction, but in the stacked phone layout
     it zeroes the pane's height and the whole before/after block disappears.
     Auto here; the row behaviour is restored at 720 with the row direction. */
  flex: 0 0 auto;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-card);
}
.mc-pane--after { border-color: rgba(0, 191, 255, 0.45); box-shadow: var(--glow-cyan); }

.mc-pane__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  padding-inline: var(--sp-5);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-block-end: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--text-muted-sm);
}
[dir="rtl"] .mc-pane__head { letter-spacing: 0; text-transform: none; }
.mc-pane--after .mc-pane__head {
  background: var(--surface-accent-soft);
  color: var(--text-accent-sm);
  border-block-end-color: rgba(0, 191, 255, 0.35);
}

.mc-pane__row {
  display: grid;
  gap: var(--sp-4);
  padding-block: 7px;
  padding-inline: var(--sp-5);
  font-size: var(--fs-xs);
}
.mc-pane--before .mc-pane__row {
  grid-template-columns: 1fr auto;
  font-family: var(--font-mono);
  color: var(--text-muted);
  border-block-end: 1px dashed var(--border-subtle);
}
.mc-pane--after .mc-pane__row {
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--sp-5);
  color: var(--text-body);
  border-block-end: 1px solid var(--border-subtle);
}
.mc-pane__row:last-child { border-block-end: none; }
/* These rows carry the actual before/after argument, so they wrap rather than
   truncate. Clipping them to one line turned "Work delivered but never invoiced"
   into "Work delivered but never i…" on a phone — the reader loses the point.
   The panes are wide enough on desktop that most rows still sit on one line. */
.mc-pane__row .mc-truncate { min-width: 0; overflow-wrap: anywhere; }
.mc-pane__row > span:not(.mc-truncate),
.mc-pane__row > .mc-mono { white-space: nowrap; }
.mc-pane--after .mc-pane__row strong { font-weight: var(--fw-semibold); color: var(--text-strong); }
.mc-pane--after .mc-pane__row .mc-mono { font-family: var(--font-mono); }
.mc-dot { width: 8px; height: 8px; border-radius: var(--r-xs); background: var(--status-ok); }

.mc-transform__arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mc-transform__arrow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-control);
  background: var(--brand-cyan);
  color: var(--action-primary-text);
  box-shadow: var(--glow-cyan);
}
/* Stacked panes on a phone, so the arrow points down; it turns horizontal
   again at 720 where the panes sit side by side, and mirrors under RTL. */
.mc-transform__arrow svg { transform: rotate(90deg); }
[dir="rtl"] .mc-transform__arrow svg { transform: rotate(90deg) scaleX(-1); }

/* ---------- 10. Trust band ----------------------------------------------- */

.mc-trust { background: var(--surface-page); }
.mc-trust__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: clamp(48px, 6vw, 90px);
  padding-inline: clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.mc-trust__copy { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-7); }
.mc-trust__eyebrow { display: flex; align-items: center; gap: var(--sp-5); color: var(--brand-cyan); }
.mc-trust__eyebrow .mc-eyebrow { color: var(--brand-cyan); }
.mc-trust__statement {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: var(--lh-loose);
  color: var(--text-body);
  max-width: 56ch;
  text-wrap: pretty;
}

.mc-trustpoints { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.mc-trustpoint {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  min-width: 0;
}
.mc-trustpoint svg { color: var(--brand-cyan); flex: 0 0 auto; margin-block-start: 1px; }
.mc-trustpoint strong { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-strong); display: block; }
.mc-trustpoint span { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }

.mc-codes { display: flex; flex-direction: column; gap: var(--sp-4); }
.mc-code {
  display: flex;
  gap: var(--sp-5);
  align-items: baseline;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  padding-block: 11px;
  padding-inline: 13px;
  min-width: 0;
}
.mc-code b {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-cyan);
  flex: 0 0 auto;
}
.mc-code span { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-body); min-width: 0; }

/* The supplier document card — always light, even on the dark band. */
.mc-doc {
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  padding: clamp(18px, 2.6vw, 28px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  color: var(--text-strong);
}
.mc-doc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid var(--border-subtle);
}
.mc-doc__head img { height: 26px; width: auto; display: block; }
.mc-doc__class {
  text-align: end;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
[dir="rtl"] .mc-doc__class { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.mc-doc__ref { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: 3px; }

.mc-legal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border-subtle);
}
.mc-legal__rows { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); }
.mc-legal__rows > span { display: inline-flex; align-items: baseline; gap: var(--sp-3); }
.mc-legal__k {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}
.mc-legal__v { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-strong); }
.mc-legal__note { margin: 0; font-size: var(--fs-2xs); line-height: var(--lh-loose); color: var(--text-muted); }

.mc-bank { border: 1px solid var(--border-subtle); border-radius: var(--r-control); overflow: hidden; }
.mc-bank__head {
  padding-block: var(--sp-4);
  padding-inline: var(--sp-5);
  background: var(--surface-sunken);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted-sm);
}
[dir="rtl"] .mc-bank__head { letter-spacing: 0; text-transform: none; }
.mc-bank__rows { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; }
.mc-bank__rows > div { display: flex; justify-content: space-between; gap: var(--sp-6); padding-block: var(--sp-2); font-size: var(--fs-sm); flex-wrap: wrap; }
.mc-bank__rows dt { color: var(--text-muted); }
.mc-bank__rows dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: var(--fw-medium); }

.mc-docs { display: flex; flex-direction: column; gap: var(--sp-4); }
.mc-doclink {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--row-h);
  padding-block: 11px;
  padding-inline: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  min-width: 0;
  color: var(--text-strong);
  transition: var(--t-control);
}
.mc-doclink:hover { border-color: rgba(0, 191, 255, 0.55); box-shadow: var(--glow-cyan); text-decoration: none; color: var(--text-strong); }
.mc-doclink > svg:first-child { color: var(--text-accent); flex: 0 0 auto; }
.mc-doclink span { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mc-doclink .mc-doclink__dl { color: var(--text-muted); flex: 0 0 auto; }

.mc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  padding-inline: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--status-info-soft);
  border: 1px solid rgba(0, 191, 255, 0.35);
  color: var(--cyan-800);
}
.mc-alert svg { flex: 0 0 auto; margin-block-start: 1px; }
.mc-alert strong { display: block; font-size: var(--fs-base); font-weight: var(--fw-semibold); margin-block-end: 2px; }
.mc-alert p { margin: 0; font-size: var(--fs-sm); }
.mc-alert--ok { background: var(--status-ok-soft); border-color: rgba(22, 163, 74, 0.3); color: #15803D; }
.mc-alert--error { background: var(--status-error-soft); border-color: rgba(220, 38, 38, 0.3); color: #B91C1C; }

/* ---------- 11. Q&A layer ------------------------------------------------ */

.mc-faq { display: flex; flex-direction: column; gap: var(--sp-4); }
.mc-faq details {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.mc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  min-height: var(--row-h);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  transition: var(--t-control);
}
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary:hover { background: var(--surface-accent-soft); }
.mc-faq summary svg { color: var(--text-accent); flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-standard); }
.mc-faq details[open] summary svg { transform: rotate(180deg); }
.mc-faq details[open] summary { border-block-end: 1px solid var(--border-subtle); }
.mc-faq__a {
  margin: 0;
  padding: var(--sp-6) var(--sp-7);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-body);
  max-width: 82ch;
}

/* ---------- 12. Intake form ---------------------------------------------- */

.mc-intake { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }

.mc-form {
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(16px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.mc-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.mc-fieldset > legend { padding: 0; }

.mc-field { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.mc-field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
[dir="rtl"] .mc-field__label { letter-spacing: 0; text-transform: none; }
.mc-field__req { color: var(--status-error); }
.mc-field__hint { font-size: var(--fs-xs); color: var(--text-muted); }

.mc-inputwrap {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--row-h);
  padding-inline: 10px;
  width: 100%;
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  transition: var(--t-control);
}
.mc-inputwrap:focus-within { border-color: var(--brand-cyan); box-shadow: var(--ring-focus); }

/* :user-invalid fires only after the field has been interacted with and left,
   so a required field is never flagged red before it has been reached. */
.mc-inputwrap:has(input:user-invalid),
.mc-selectwrap:has(select:user-invalid) select { border-color: var(--status-error); }
.mc-inputwrap:has(input:user-invalid):focus-within,
.mc-selectwrap:has(select:user-invalid) select:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28);
}
.mc-inputwrap > svg { color: var(--text-muted); flex: 0 0 auto; }
.mc-inputwrap input {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text-strong);
}
.mc-inputwrap input:focus-visible { box-shadow: none; }

.mc-selectwrap { position: relative; display: flex; width: 100%; min-width: 0; }
.mc-selectwrap select {
  appearance: none;
  width: 100%;
  min-height: var(--row-h);
  padding-inline-start: 10px;
  padding-inline-end: 34px;
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  font-family: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: var(--t-control);
}
.mc-selectwrap select:focus { border-color: var(--brand-cyan); box-shadow: var(--ring-focus); outline: 0; }
.mc-selectwrap > svg {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Icon-tile single-select, built on real radios so it submits without JS. */
/* "1 - 10 staff" and friends are short enough to sit two-up even at 320px,
   which takes four stacked tiles down to two rows. */
.mc-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.mc-picks--3 { grid-template-columns: 1fr; }
.mc-pick { position: relative; min-width: 0; display: flex; }
.mc-pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mc-pick__face {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  min-height: 60px;
  padding-block: 13px;
  padding-inline: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  text-align: start;
  transition: var(--t-control);
}
.mc-pick__face svg { color: var(--text-accent); flex: 0 0 auto; }
.mc-pick__face strong { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-strong); min-width: 0; }
.mc-pick__face small { font-size: var(--fs-sm); color: var(--text-body); display: block; }
.mc-pick input:hover + .mc-pick__face { border-color: rgba(0, 191, 255, 0.55); }
.mc-pick input:focus-visible + .mc-pick__face { border-color: var(--brand-cyan); box-shadow: var(--ring-focus); }
.mc-pick input:checked + .mc-pick__face {
  background: var(--surface-accent-soft);
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 1px rgba(0, 191, 255, 0.45);
}
.mc-pick--stack .mc-pick__face { flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-height: 66px; }
.mc-pick--stack .mc-pick__face > span:first-child { display: flex; align-items: center; gap: var(--sp-4); }

.mc-checkbox { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: var(--row-h); cursor: pointer; font-size: var(--fs-base); color: var(--text-body); }
.mc-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.mc-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-sm);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  color: var(--action-primary-text);
  transition: var(--t-control);
  flex: 0 0 auto;
}
.mc-checkbox__box svg { opacity: 0; }
.mc-checkbox input:checked + .mc-checkbox__box { background: var(--brand-cyan); border-color: var(--brand-cyan); }
.mc-checkbox input:checked + .mc-checkbox__box svg { opacity: 1; }
.mc-checkbox input:focus-visible + .mc-checkbox__box { box-shadow: var(--ring-focus); border-color: var(--brand-cyan); }

.mc-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: center;
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--border-subtle);
}
.mc-form__sla { font-size: var(--fs-sm); color: var(--text-muted); }

/* Live summary panel. */
.mc-summary {
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mc-summary__head {
  padding-block: var(--sp-6);
  padding-inline: var(--sp-7);
  border-block-end: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.mc-summary__head strong { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
[dir="rtl"] .mc-summary__head strong { font-family: var(--font-arabic); }
.mc-summary__head p { margin: 5px 0 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted-sm); }
.mc-summary__body { padding: var(--sp-7); display: flex; flex-direction: column; gap: 13px; }
.mc-summary__rows { margin: 0; display: flex; flex-direction: column; gap: 13px; }
.mc-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  align-items: baseline;
  padding-block-end: 11px;
  border-block-end: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.mc-summary__row dt { font-size: var(--fs-sm); color: var(--text-muted); flex: 0 0 auto; }
.mc-summary__row dd { margin: 0; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-strong); text-align: end; min-width: 0; }
.mc-summary__row dd[data-empty="true"] { color: var(--text-muted); font-weight: var(--fw-regular); }

.mc-meter { display: flex; flex-direction: column; gap: var(--sp-3); }
.mc-meter__head { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-xs); }
.mc-meter__head span:first-child { letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-muted); }
[dir="rtl"] .mc-meter__head span:first-child { letter-spacing: 0; text-transform: none; }
.mc-meter__head span:last-child { font-family: var(--font-mono); color: var(--text-strong); }
.mc-meter__track { height: 8px; background: var(--surface-sunken); border-radius: var(--r-xs); overflow: hidden; }
.mc-meter__fill { height: 100%; width: 0; background: var(--brand-cyan); transition: width var(--dur-slow) var(--ease-standard); }

.mc-privacy {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  padding: 13px;
}
.mc-privacy svg { color: var(--teal-700); flex: 0 0 auto; margin-block-start: 1px; }
.mc-privacy span { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-body); }

/* Honeypot: a field hidden from people and irresistible to bots. Used by the
   WordPress build's intake form. Moved out of the viewport rather than
   display:none, because some bots skip fields that are not rendered. */
.mc-honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 13. Footer --------------------------------------------------- */

.mc-footer { background: var(--surface-page); border-block-start: 1px solid var(--border-subtle); }
.mc-footer__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: clamp(32px, 4vw, 58px);
  padding-inline: clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.mc-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; max-width: 42ch; }
.mc-footer__brand img { height: 46px; width: auto; display: block; }
.mc-footer__brand p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-muted); }
.mc-footer__contact { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.mc-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--row-h);
  padding-block: var(--sp-4);
  padding-inline: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: var(--t-control);
}
.mc-footer__contact a:hover { border-color: var(--brand-cyan); color: var(--brand-cyan); text-decoration: none; }
.mc-footer__contact a.mc-btn--whatsapp:hover { border-color: var(--teal-300); color: var(--teal-300); }

.mc-footer__col { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.mc-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-5); }
.mc-footer__col li { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.mc-footer__col .mc-microlabel { color: var(--text-muted); }

.mc-footer__legal { border-block-start: 1px solid var(--border-subtle); }
.mc-footer__legal > div {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--sp-6);
  padding-inline: clamp(20px, 5vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---------- 14. Responsive ----------------------------------------------- */

.mc-hero__ctas .mc-btn,
.mc-form__actions .mc-btn--lg,
.mc-form__actions .mc-btn--whatsapp { width: 100%; }

@media (min-width: 480px) {
  .mc-quickbar__item--tel span,
  .mc-quickbar__item--wa span { display: inline; }
  .mc-quickbar__item--tel,
  .mc-quickbar__item--wa { width: auto; padding-inline: var(--sp-5); }
}

@media (min-width: 560px) {
  .mc-btn { white-space: nowrap; }
  .mc-hero__ctas .mc-btn,
  .mc-form__actions .mc-btn--lg,
  .mc-form__actions .mc-btn--whatsapp { width: auto; }

  .mc-proof,
  .mc-outcomes__grid,
  .mc-trustpoints,
  .mc-picks,
  .mc-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .mc-wire__stage { aspect-ratio: 1 / 1; max-height: 460px; }
  .mc-transform__panes { flex-direction: row; align-items: stretch; }
  .mc-pane { flex: 1 1 0; }
  .mc-transform__arrow svg { transform: none; }
  [dir="rtl"] .mc-transform__arrow svg { transform: scaleX(-1); }
  .mc-summary { position: sticky; inset-block-start: 84px; }
}

@media (min-width: 900px) {
  .mc-hero,
  .mc-trust__grid,
  .mc-intake { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-picks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-faq__a { padding-inline: var(--sp-7); }
}

@media (min-width: 1040px) {
  .mc-hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); }
  .mc-intake { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .mc-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-grid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-outcomes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   16. Merged-design components
   Added when the reference build's visual language was folded in: icon
   kickers, the outline button, on-dark badges, stat-tile outcomes, the
   founder card and the mobile quick-action bar.
   ========================================================================== */

/* Eyebrow now carries its glyph. */
.mc-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.mc-eyebrow svg { flex: 0 0 auto; }
.mc-eyebrow--ondark { color: var(--brand-cyan); }

/* Outline button — MUBCS Button variant "outline". */
.mc-btn--outline {
  background: transparent;
  color: var(--text-accent);
  border-color: var(--brand-cyan);
}
.mc-btn--outline:hover {
  background: var(--surface-accent-soft);
  color: var(--text-accent);
  border-color: var(--brand-cyan);
}

/* Badge sitting on the hero photograph: needs its own ground, not the theme's
   sunken surface, or it disappears into the scrim. */
.mc-badge--onDark {
  background: rgba(15, 23, 42, 0.72);
  border-color: #23304A;
  color: var(--slate-300);
}

/* The hero's wireframe panel floats on the band instead of being boxed. */
.mc-heroband .mc-wire__stage {
  background: rgba(10, 15, 28, 0.72);
  border-color: rgba(0, 191, 255, 0.22);
  box-shadow: var(--sh-4);
}

/* Outcomes become stat tiles: bordered, glyphed, on their own panel. */
.mc-outcome {
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
}
.mc-outcome__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--surface-accent-soft);
  border: 1px solid rgba(0, 191, 255, 0.32);
  color: var(--brand-cyan);
  margin-block-end: var(--sp-2);
}

/* Founder card — the single-operator positioning, given a face. */
.mc-founder {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--border-subtle);
}
.mc-founder img {
  width: 72px;
  height: 72px;
  border-radius: var(--r-card);
  border: 1px solid var(--border-subtle);
  object-fit: cover;
  flex: 0 0 auto;
}
.mc-founder__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-founder__id strong { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.mc-founder__id span { font-size: var(--fs-sm); color: var(--text-muted); }
.mc-founder__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--row-h);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-accent-sm);
}

/* Mobile quick-action bar. Revealed by site.js when the hero's own CTA row is
   not on screen; body padding below keeps it clear of the footer. */
.mc-quickbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 70;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  padding-block-end: max(var(--sp-4), env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block-start: 1px solid #23304A;
}
.mc-quickbar__item {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: var(--row-h);
  padding-inline: var(--sp-4);
  border: 1px solid #23304A;
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--slate-300);
  transition: var(--t-control);
}
.mc-quickbar__item:hover { color: var(--white); text-decoration: none; }
.mc-quickbar__item svg { flex: 0 0 auto; }
/* The labels are what gives way when there is no room, not the layout. */
.mc-quickbar__item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-quickbar__item--wa { color: var(--teal-300); border-color: rgba(94, 234, 212, 0.45); }

/* Three equal columns made every label truncate ("0657-89-0…", "Book a fre…").
   The two contact affordances are glyph-only squares and the booking CTA takes
   the rest of the row, so the primary action always reads in full. Their labels
   come back at 480 where there is room. */
.mc-quickbar__item--tel span,
.mc-quickbar__item--wa span { display: none; }
.mc-quickbar__item--tel,
.mc-quickbar__item--wa { width: var(--row-h); padding-inline: 0; justify-content: center; }
.mc-quickbar__item--cta {
  flex: 1 1 auto;
  background: var(--brand-cyan);
  border-color: var(--brand-cyan);
  color: var(--action-primary-text);
}
.mc-quickbar__item--cta:hover { background: var(--brand-cyan-deep); color: var(--action-primary-text); }

/* Reserve room for the bar so it never covers the last line of the footer. */
body:has(.mc-quickbar:not([hidden])) { padding-block-end: 68px; }

/* ---------- 17. Wide-screen additions ------------------------------------ */

@media (min-width: 720px) {
  .mc-founder img { width: 88px; height: 88px; }
  .mc-outcome { padding: var(--sp-7); }
}

@media (min-width: 1120px) {
  .mc-header__bar { flex-wrap: nowrap; gap: clamp(12px, 2vw, 26px); }
  .mc-header__toggle { display: none; }

  .mc-nav {
    order: 0;
    flex: 1 1 auto;
    flex-basis: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(10px, 1.6vw, 24px);
    border-block-start: 0;
    padding-block-start: 0;
  }
  .mc-nav a {
    font-size: 13.5px;
    min-height: 0;
    padding-block: var(--sp-3);
    border-block-end: 2px solid transparent;
    white-space: nowrap;
  }
  .mc-nav a:hover { border-block-end-color: var(--brand-cyan); }

  .mc-header__side { flex: 0 0 auto; gap: var(--sp-5); margin-inline-start: 0; }
  .mc-header .mc-btn--nav-cta { display: inline-flex; }

  /* Back into the bar, between the nav and the contact controls. */
  .mc-lang {
    order: 1;
    flex-basis: auto;
    display: inline-flex;
    margin-block-end: 0;
    margin-inline-start: auto;
  }

  .mc-quickbar { display: none; }
  body:has(.mc-quickbar:not([hidden])) { padding-block-end: 0; }

  /* Touch targets relax to the MUBCS control densities on pointer devices. */
  .mc-btn { min-height: 38px; }
  .mc-btn--sm { min-height: 30px; padding-inline: 10px; }
  .mc-phone { min-height: 36px; }
  .mc-lang { padding: 2px; }
  .mc-lang a { min-width: 30px; min-height: 24px; }
  .mc-header__logo { min-height: 0; }
  .mc-founder__tel { min-height: 0; }
  .mc-inputwrap,
  .mc-selectwrap select { min-height: 38px; }
  .mc-checkbox { min-height: 0; }
}

/* The nav is the widest thing in the header, and Arabic's labels are the longest
   of the three. Between 1120 and 1400 the phone number and the WhatsApp label
   give way to their glyphs so the nav never collides with them; above 1400 there
   is room for the full row. */
@media (min-width: 1400px) {
  .mc-header__side .mc-phone span,
  .mc-header__side .mc-btn--whatsapp span { display: inline; }
}

/* Beyond the 1240px container the page stops growing; only the gutters do. */
@media (min-width: 1440px) {
  .mc-hero { gap: 72px; }
  .mc-heroband__mesh { background-size: 88px 88px; }
}

/* ---------- 15. Print ----------------------------------------------------
   A service achats prints one thing: the supplier file. Everything that is not
   the identifier block, the bank strip or the legal statement is dropped, and
   the document card is flattened onto white so it reads as an administrative
   sheet rather than a screenshot of a web page. */

@media print {
  @page { margin: 14mm; }

  .mc-header,
  .mc-skip,
  .mc-quickbar,
  .mc-heroband,
  .mc-outcomes,
  #services,
  #transform,
  #sectors,
  #faq,
  #contact,
  .mc-footer__contact,
  .mc-footer__col,
  .mc-docs,
  .mc-alert { display: none !important; }

  body {
    background: var(--white);
    padding-block-end: 0;
  }

  /* The trust band loses its dark ground; its copy inverts back to ink. */
  .mc-trust,
  .mc-footer {
    background: var(--white) !important;
    color: var(--slate-900) !important;
  }
  .mc-trust__grid {
    display: block;
    padding-block: 0;
    padding-inline: 0;
  }
  .mc-trust__copy { color: var(--slate-900); }
  .mc-trust .mc-h2,
  .mc-trust__statement,
  .mc-trustpoint strong,
  .mc-trustpoint span,
  .mc-code span,
  .mc-footer__brand p,
  .mc-footer__legal > div { color: var(--slate-900) !important; }
  .mc-trustpoint,
  .mc-code {
    background: var(--white) !important;
    border-color: var(--slate-300) !important;
    break-inside: avoid;
  }

  .mc-footer__grid { display: block; padding-block: 6mm 0; padding-inline: 0; }
  .mc-footer__brand { max-width: none; }
  .mc-footer__legal > div { padding-inline: 0; }

  .mc-doc {
    box-shadow: none;
    border-color: var(--slate-300);
    margin-block-start: 8mm;
    break-inside: avoid;
  }
  .mc-bank,
  .mc-legal { break-inside: avoid; }

  /* Spell out where a link actually points, since a printed page cannot be
     clicked — but only for real destinations, not in-page anchors. */
  a[href^="http"]::after,
  a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--slate-600);
  }
}