:root{
  --ink: #0F2236;
  --blue-700: #2F5270;
  --blue-600: #3B6488;
  --blue-500: #4B7BA1;
  --blue-200: #C9D8E6;
  --blue-50: #F2F6FA;
  --signal: #F59364;
  --signal-deep: #A94E1F;
  --text: #1E2C3A;
  --muted: #55636F;
  --line: #E3E8EE;
  --bg: #FFFFFF;
  --bg-alt: #F6F8FA;
  --white: #FFFFFF;
}
/* GENERATED by build/fetch_fonts.py — self-hosted faces, do not edit. */

/* ---- IBM Plex Sans ---- */

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-2.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-5.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-2.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-5.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-2.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-5.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-2.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/plex-sans-5.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;
}

/* ---- IBM Plex Sans Arabic ---- */

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-4.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-6.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-7.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-5.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-0.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-2.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-3.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-1.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-8.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-10.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-11.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-9.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-12.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-14.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-15.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plex-arabic-13.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;
}

/* ---- IBM Plex Mono ---- */

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-mono-3.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-mono-4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-mono-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-mono-2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plex-mono-0.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-mono-5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-mono-9.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-mono-7.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-mono-6.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plex-mono-8.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;
}
/* LABBIK TELECOM concept stylesheet.
   Logical properties only, so the Arabic pages mirror without overrides.
   Brand colours (--ink, --blue-*, --signal, --text, --muted, --line, --bg*)
   are generated from data/labbik_data.py and prepended by build.py.

   Motion rules: reduced motion slows ambient light (sweeps, pulses) and
   switches off anything that moves content into place. A light that crosses
   text stays faint enough to keep the text's contrast. */

/* ── tokens ─────────────────────────────────────────────────────── */
:root{
  --fs:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);

  --r-xs:6px;   /* controls: buttons, inputs, tabs */
  --r-sm:8px;   /* small tiles, icon wells */
  --r:10px;     /* cards */
  --r-lg:14px;  /* panels, feature blocks */

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --sec-pad:clamp(64px,8.5vw,120px);
  --sec-pad-tight:clamp(48px,6vw,80px);
  --head-gap:clamp(32px,4vw,52px);
  --tap:44px;
  --wrap:1200px;
  --hdr:72px;

  /* text on the navy surfaces, strongest to faintest */
  --on-dark:var(--blue-200);
  --on-dark-2:#A9BDD0;
  --on-dark-3:#7F95AA;
  --signal-soft:#FFC6A8;
  --ok:#2E9E6B;
  --idle:#9AA7B3;
  --warn-bg:#FDF0E8;
  --warn-line:#F3C9B0;
  --warn-ink:#5A2A12;
}
.lang-ar{--fs:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}

/* ── base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-block-start:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.65 var(--fs);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
.lang-ar{line-height:1.85}
img,svg,canvas{display:block;max-inline-size:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:500;color:var(--ink);letter-spacing:-.015em}
.lang-ar h1,.lang-ar h2,.lang-ar h3{letter-spacing:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
/* headings never end on one word; running text avoids short last lines */
h1,h2,h3,.hero__title,.sec__title,.phead__title,.band__title,.partners__title{text-wrap:balance}
p,li,dd,.sec__lede,.phead__lede,.hero__lede{text-wrap:pretty}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:4px}

.wrap{inline-size:min(var(--wrap),100% - 48px);margin-inline:auto}
.sr,.hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp{white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:100;padding:10px 14px;
  background:var(--ink);color:#fff;border-radius:var(--r-xs)}
.skip:focus{inset-block-start:12px}
.note{font-size:14px;color:var(--muted)}
.mt{margin-block-start:20px}

/* ── icons, buttons, labels ─────────────────────────────────────── */
.ico{inline-size:22px;block-size:22px;flex:none}
[dir="rtl"] .ico--flip{transform:scaleX(-1)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;isolation:isolate;
  min-block-size:48px;padding:0 22px;border-radius:var(--r-xs);font:500 15.5px/1.2 var(--fs);border:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn .ico{inline-size:18px;block-size:18px;transition:transform .3s var(--ease)}
.btn--primary{background:var(--blue-600);color:#fff}
.btn--primary:hover{background:var(--blue-700)}
.btn--primary:hover .ico{transform:translateX(3px)}
[dir="rtl"] .btn--primary:hover .ico{transform:scaleX(-1) translateX(3px)}
/* one light pass across the action button every few seconds */
.btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);animation:btnSheen 6s 1.5s ease-in-out infinite}
[dir="rtl"] .btn--primary::after{animation-name:btnSheenR}
.btn--ghost{color:#fff;border-color:rgba(255,255,255,.32)}
.btn--ghost:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.btn--ghost-dark{color:var(--ink);border-color:var(--line)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--blue-50)}
.btn--sm{min-block-size:40px;padding-inline:16px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]::after{display:none}

.link{display:inline-flex;align-items:center;gap:8px;margin-block-start:22px;color:var(--blue-600);font-weight:500}
.link .ico{inline-size:18px;block-size:18px}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12.5px/1 var(--fm);
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
.lang-ar .eyebrow{font-family:var(--fs);letter-spacing:0;font-size:14px}
.eyebrow--light{color:var(--blue-200)}

.dot-live{position:relative;inline-size:8px;block-size:8px;border-radius:50%;background:var(--signal)}
.dot-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--signal);
  animation:ping 2.4s var(--ease) infinite}

/* pending chip: an unconfirmed value can never pass for a fact */
.pend{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  padding-block-end:2px;border-block-end:1.5px dashed var(--signal-deep)}
.pend small{font:500 10.5px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;
  color:var(--signal-deep);background:var(--warn-bg);padding:3px 6px;border-radius:4px}
.lang-ar .pend small{font-family:var(--fs);text-transform:none;letter-spacing:0;font-size:11px}
[data-dark] .pend{border-color:var(--signal)}
[data-dark] .pend small{background:rgba(245,147,100,.16);color:var(--signal-soft)}

/* heading shimmer: the lightest stop (#3B6488) keeps 6:1 on white, so the
   title stays readable while the light passes */
.shine{background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,var(--blue-600) 48%,var(--blue-500) 50%,var(--blue-600) 52%,var(--ink) 62%,var(--ink) 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:shine 6.5s ease-in-out infinite}
[data-dark] .shine{background-image:linear-gradient(100deg,#fff 0%,#fff 38%,var(--blue-200) 47%,#FFD9C4 50%,var(--blue-200) 53%,#fff 62%,#fff 100%)}

/* content is hidden for the reveal only when scripts run */
html.js .reveal{opacity:0;transform:translateY(16px);filter:blur(6px);
  transition:opacity .7s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none;filter:none}

/* ── header ─────────────────────────────────────────────────────── */
.hdr{position:fixed;inset-inline:0;inset-block-start:0;z-index:50;block-size:var(--hdr);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .42s var(--ease)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;block-size:100%}
.hdr.stuck{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(242,246,250,.7));
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 1px 0 rgba(15,34,54,.06),0 14px 30px -26px rgba(15,34,54,.35)}
.hdr.stuck::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);
  transform:translateX(-120%);animation:btnSheen 8s 2s ease-in-out infinite}
.hdr.off{transform:translateY(-102%)}
.hdr__brand{direction:ltr;display:flex;align-items:baseline;gap:8px;color:#fff;transition:color .3s}
.hdr.stuck .hdr__brand{color:var(--ink)}
.hdr__brand .wm i{animation:wmPulse 2.8s ease-in-out infinite,wmIntro 1.2s var(--ease) .2s both}
.hdr__sub{font:500 10.5px/1 var(--fm);letter-spacing:.32em;opacity:.7}

.wm{direction:ltr;unicode-bidi:isolate;position:relative;font:600 22px/1 var(--fs);letter-spacing:.14em}
.wm i{display:inline-block;inline-size:7px;block-size:7px;margin-inline-start:4px;border-radius:50%;
  background:var(--signal);box-shadow:0 0 12px var(--signal);animation:wmPulse 2.8s ease-in-out infinite}

.hdr__nav{position:relative;display:flex;gap:4px}
.hdr__nav a{position:relative;z-index:1;padding:9px 13px;border-radius:var(--r-xs);font-size:14.5px;
  color:rgba(255,255,255,.82);transition:color .25s}
.hdr__nav a:hover{color:#fff}
.hdr.stuck .hdr__nav a{color:var(--muted)}
.hdr.stuck .hdr__nav a:hover,.hdr__nav a.on{color:var(--ink)}
.hdr:not(.stuck) .hdr__nav a.on{color:#fff}
/* the light behind the nav link under the pointer (or the section in view) */
.hdr__glow{position:absolute;inset-block:0;z-index:0;border-radius:var(--r-xs);pointer-events:none;opacity:0;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:inset-inline-start .35s var(--ease),inline-size .35s var(--ease),opacity .25s}
.hdr.stuck .hdr__glow{background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue-200)}
.hdr__glow.is-on{opacity:1}
.hdr__end{display:flex;align-items:center;gap:14px}
.hdr__lang{font-size:14px;color:rgba(255,255,255,.82)}
.hdr.stuck .hdr__lang{color:var(--muted)}
.hdr__progress{position:absolute;inset-inline-start:0;inset-block-end:0;block-size:2px;inline-size:100%;
  transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--blue-500),var(--signal))}
[dir="rtl"] .hdr__progress{transform-origin:100% 50%}
.hdr__menu{display:none;inline-size:42px;block-size:42px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-xs);
  background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hdr__menu i{display:block;inline-size:18px;block-size:1.5px;background:#fff;transition:transform .3s}
.hdr.stuck .hdr__menu{border-color:var(--line)}
.hdr.stuck .hdr__menu i{background:var(--ink)}
.mnav{background:#fff;border-block-start:1px solid var(--line);padding:12px 24px 20px;
  box-shadow:0 20px 40px -24px rgba(15,34,54,.4)}
.mnav a{display:block;padding:12px 4px;border-block-end:1px solid var(--line);color:var(--ink)}

/* ── sections ───────────────────────────────────────────────────── */
.sec{position:relative;padding-block:var(--sec-pad);isolation:isolate;overflow:hidden}
.sec--tight{padding-block:var(--sec-pad-tight)}
.sec--alt{background:var(--bg-alt)}
.sec--dark{background:var(--ink);color:var(--on-dark)}
.sec--dark h2,.sec--dark h3{color:#fff}
/* one slow light sweep across every section */
.sec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-120%);animation:secSheen 11s ease-in-out infinite}
.sec--alt::after{background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%)}
.sec--dark::after{background:linear-gradient(110deg,transparent 44%,rgba(75,123,161,.16) 50%,transparent 56%)}
#channels::after{animation-delay:3s}
#quality::after{animation-delay:6s}
#operations::after{animation-delay:2s}
.grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(201,216,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(201,216,230,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
.sec__head{max-inline-size:720px;margin-block-end:var(--head-gap)}
.sec__title{margin-block-start:16px;font-size:clamp(30px,3.6vw,48px);line-height:1.12}
.lang-ar .sec__title{line-height:1.35}
.sec__lede{margin-block-start:16px;font-size:18px;color:var(--muted);max-inline-size:60ch}
.sec--dark .sec__lede{color:var(--on-dark-2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.split--top{align-items:start}
.split .sec__head{margin-block-end:var(--s-5)}
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}

/* ── footer ─────────────────────────────────────────────────────── */
.ftr{background:#fff;border-block-start:1px solid var(--line);padding-block:44px 28px;color:var(--muted);font-size:14.5px}
.ftr__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-5) var(--s-7)}
.ftr__brand .wm{color:var(--ink);font-size:18px}
.ftr__brand p{margin-block-start:8px}
.ftr__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) 18px}
.ftr__nav a:hover{color:var(--ink)}
.ftr__vision{inline-size:120px;block-size:auto}
.ftr__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-block-start:28px;padding-block-start:20px;
  border-block-start:1px solid var(--line);font-size:13px}
.ftr__concept{color:var(--signal-deep)}

/* ── side dock: office status, call, WhatsApp, location, proposal, motion ── */
.dock{position:fixed;inset-inline-end:14px;inset-block-start:50%;transform:translateY(-50%);z-index:40}
.dock__bar{position:relative;display:grid;gap:8px;padding:8px;border-radius:var(--r-lg);isolation:isolate;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -24px rgba(15,34,54,.5),0 0 0 1px rgba(15,34,54,.06)}
/* a slow light travelling down the bar */
.dock__sweep{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.dock__sweep::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:46%;
  background:linear-gradient(180deg,transparent,rgba(245,147,100,.16) 45%,rgba(255,255,255,.55) 52%,transparent);
  transform:translateY(-110%);animation:dockSweep 9s cubic-bezier(.45,0,.25,1) 3s infinite}
.dock__sep{block-size:1px;margin-inline:6px;background:var(--line)}

.dock__btn{position:relative;display:grid;place-items:center;inline-size:44px;block-size:44px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--blue-600);cursor:pointer;font:inherit;
  transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.dock__btn .ico{inline-size:21px;block-size:21px;transition:transform .25s cubic-bezier(.2,.8,.2,1.4)}
.dock__btn:hover{background:var(--blue-50);color:var(--ink)}
.dock__btn:hover .ico,.dock__btn:focus-visible .ico{transform:scale(1.1)}
.dock__btn:focus-visible{outline-offset:1px}
/* the open item is lit with the coral signal (light only, never text) */
.dock__btn::before{content:"";position:absolute;inset-block:10px;inset-inline-start:-7px;inline-size:3px;border-radius:2px;
  background:var(--signal);box-shadow:0 0 10px 1px rgba(245,147,100,.7);opacity:0;transform:scaleY(.3);
  transition:opacity .25s var(--ease),transform .3s var(--ease)}
.dock__btn.is-on{background:var(--blue-50);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(245,147,100,.45),0 0 18px -6px rgba(245,147,100,.8)}
.dock__btn.is-on::before{opacity:1;transform:none}
.dock__btn--cta{background:var(--blue-600);color:#fff}
.dock__btn--cta:hover,.dock__btn--cta.is-on{background:var(--blue-700);color:#fff}
.dock__motion .ico--play{display:none}

/* labels slide out toward the page */
.dock__lbl{position:absolute;inset-block-start:50%;inset-inline-end:calc(100% + 14px);white-space:nowrap;padding:7px 10px;border-radius:var(--r-xs);
  background:var(--ink);color:#fff;font-size:13px;font-weight:500;letter-spacing:.01em;opacity:0;pointer-events:none;
  box-shadow:0 10px 24px -14px rgba(15,34,54,.7);transform:translate(8px,-50%);transition:opacity .2s var(--ease),transform .25s var(--ease)}
[dir="rtl"] .dock__lbl{transform:translate(-8px,-50%)}
.dock__btn:hover .dock__lbl,.dock__btn:focus-visible .dock__lbl{opacity:1;transform:translate(0,-50%)}
.dock.has-open .dock__lbl{opacity:0!important}

.dock__btn--status::after{content:"";position:absolute;inset-block-start:7px;inset-inline-end:7px;inline-size:8px;block-size:8px;border-radius:50%;
  background:var(--idle);box-shadow:0 0 0 2px #fff}
.dock__btn--status.is-open::after{background:var(--ok);animation:okPulse 2.2s ease-in-out infinite}

/* WhatsApp rings quietly once after load */
.dock__btn--whatsapp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(245,147,100,0)}
.dock__btn--whatsapp.is-ring::after{animation:dockRing 1.5s ease-out 2}
.dock__btn--whatsapp.is-ring .ico{animation:dockNudge 1.5s ease-out 2}

/* flyout: opens toward the page, beside its trigger */
.dock__panel{position:absolute;inset-inline-end:calc(100% + 12px);inset-block-start:0;inline-size:304px;padding:16px;
  border-radius:var(--r);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 26px 50px -24px rgba(15,34,54,.55),0 0 0 1px rgba(15,34,54,.08);color:var(--text);font-size:14.5px;line-height:1.5;
  opacity:0;transform:translateX(10px);transition:opacity .22s var(--ease),transform .28s var(--ease)}
[dir="rtl"] .dock__panel{transform:translateX(-10px)}
.dock__panel.is-in{opacity:1;transform:none}
.dock__panel[hidden]{display:none}
.dock__panel:focus{outline:none}
.dock__panel:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
.dock__panel::before{content:"";position:absolute;inset-block-start:0;inset-inline:16px;block-size:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);opacity:.85}
.dock__ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-block-end:10px}
.dock__ph b{font-weight:500;color:var(--ink);font-size:15.5px}
.dock__x{display:grid;place-items:center;inline-size:30px;block-size:30px;margin:-6px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--muted);cursor:pointer}
.dock__x:hover{background:var(--bg-alt);color:var(--ink)}
.dock__x .ico{inline-size:16px;block-size:16px}
.dock__state{display:flex;align-items:center;gap:8px;margin-block-end:10px;color:var(--ink);font-weight:500}
.dock__state i{flex:none;inline-size:8px;block-size:8px;border-radius:50%;background:var(--idle)}
.dock.is-office-open .dock__state i{background:var(--ok);box-shadow:0 0 0 3px rgba(46,158,107,.18)}
.dock__dl{display:grid;gap:8px;margin:0 0 14px}
.dock__dl div{display:grid;grid-template-columns:minmax(64px,auto) 1fr;gap:10px;align-items:baseline;padding-block-end:8px;border-block-end:1px solid var(--line)}
.dock__dl dt{color:var(--muted);font-size:13px;white-space:nowrap}
.dock__dl dd{margin:0;color:var(--text)}
.dock__dl .pend{font-size:14px}
.dock__mono{font-family:var(--fm);direction:ltr;text-align:start}
[dir="rtl"] .dock__mono{text-align:end}
.dock__go{inline-size:100%;justify-content:center}
.dock__note{margin-block-start:10px;font-size:12px;color:var(--muted)}

/* ═══ home ═══════════════════════════════════════════════════════ */

/* ── hero: the live network ─────────────────────────────────────── */
.hero{position:relative;min-block-size:min(100svh,880px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(120% 90% at 70% 40%,#1A3A58 0%,var(--ink) 55%,#0A1726 100%)}
[dir="rtl"] .hero{background:radial-gradient(120% 90% at 30% 40%,#1A3A58 0%,var(--ink) 55%,#0A1726 100%)}
.net,.hero__still{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:-2}
/* the still drawing stands in for the canvas when scripts are off */
html.js .hero__still{display:none}
[dir="rtl"] .hero__still{transform:scaleX(-1)}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,23,38,.9) 0%,rgba(10,23,38,.55) 42%,rgba(10,23,38,0) 70%)}
[dir="rtl"] .hero__veil{background:linear-gradient(270deg,rgba(10,23,38,.9) 0%,rgba(10,23,38,.55) 42%,rgba(10,23,38,0) 70%)}
.hero__in{padding-block:calc(var(--hdr) + 60px) 40px}
.hero__title{margin-block:22px;font-weight:500;font-size:clamp(40px,6vw,80px);line-height:1.04;max-inline-size:13ch}
.lang-ar .hero__title{line-height:1.25;font-size:clamp(36px,5.4vw,70px)}
.hero__lede{max-inline-size:46ch;font-size:clamp(17px,1.5vw,20px);color:var(--on-dark);font-weight:300}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:36px}
/* a scan line drifting down the hero, like a signal sweep */
.hero__scan{position:absolute;inset-inline:0;inset-block-start:0;block-size:160px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(75,123,161,.06) 75%,rgba(245,147,100,.09) 99.2%,transparent);
  animation:scan 9s linear infinite}

/* channel tabs: pick a channel and the network routes only through it */
.hero__tabs{display:flex;flex-wrap:wrap;gap:8px;padding-block-end:44px}
.ctab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:38px;padding:9px 14px;border-radius:var(--r-xs);cursor:pointer;
  font:500 13.5px/1 var(--fs);color:var(--on-dark-2);background:rgba(255,255,255,.04);border:1px solid rgba(201,216,230,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .25s,border-color .25s,background .25s}
.ctab .ico{inline-size:16px;block-size:16px}
.ctab:hover{color:#fff;border-color:rgba(201,216,230,.4)}
.ctab.is-on{color:var(--ink);background:#fff;border-color:#fff}
.ctab.is-on .ico{color:var(--signal-deep)}

/* intro: the copy arrives while the network unfolds */
html.js .hero__in>*,html.js .hero__tabs{animation:heroIn .9s var(--ease) both}
html.js .hero__in>:nth-child(1){animation-delay:.25s}
html.js .hero__in>:nth-child(2){animation-delay:.45s}
html.js .hero__in>:nth-child(3){animation-delay:.7s}
html.js .hero__in>:nth-child(4){animation-delay:.9s}
html.js .hero__tabs{animation-delay:1.15s}
/* a paused intro would freeze on its first (invisible) frame, and a
   background tab may never advance it: both show the copy as it ends */
html.paused .hero__in>*,html.paused .hero__tabs,html.paused .hdr__brand .wm i{animation:none!important}
html.intro-done .hero__in>*,html.intro-done .hero__tabs,html.intro-done .hdr__brand .wm i{animation:none!important;opacity:1;transform:none;filter:none}

/* ── trust strip ────────────────────────────────────────────────── */
.trust{position:relative;overflow:clip;background:#fff;border-block-end:1px solid var(--line)}
.trust__row{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.trust__cell{display:flex;flex-direction:column;gap:6px;padding:30px 24px;border-inline-start:1px solid var(--line)}
.trust__cell:first-child{border-inline-start:0;padding-inline-start:0}
.trust__val{font:500 30px/1.1 var(--fs);color:var(--ink);font-variant-numeric:tabular-nums}
.trust__lbl{font-size:14px;color:var(--muted);line-height:1.45}
/* a line of light travelling along the strip's top edge */
.sweep-line::before{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;block-size:2px;inline-size:22%;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);animation:wire 5.5s ease-in-out infinite}
[dir="rtl"] .sweep-line::before{animation-name:wireR}

/* ── services ───────────────────────────────────────────────────── */
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;padding:var(--s-6) 28px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
/* lit top edge */
.card::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:2px;
  background:linear-gradient(90deg,var(--blue-500),var(--signal));transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease)}
[dir="rtl"] .card::before{transform-origin:100% 50%}
/* hover light pass */
.card::after{content:"";position:absolute;inset-block:0;inset-inline-start:-60%;inline-size:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(75,123,161,.10),transparent);transform:skewX(-14deg);opacity:0}
.card__ico{display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:var(--r-sm);
  background:var(--blue-50);color:var(--blue-600);margin-block-end:22px;transition:background .4s,color .4s}
.card__title{font-size:20px;line-height:1.3}
.card__body{margin-block:10px var(--s-4);color:var(--muted);font-size:15.5px}
.card__out{margin-block-start:auto;padding-block-start:14px;border-block-start:1px dashed var(--line);
  font:500 13px/1.4 var(--fm);color:var(--blue-600)}
.lang-ar .card__out{font-family:var(--fs);font-size:14px}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);border-color:var(--blue-200);box-shadow:0 26px 50px -30px rgba(15,34,54,.35)}
  .card:hover::before{transform:scaleX(1)}
  .card:hover::after{animation:cardSheen .9s var(--ease) 1}
  .card:hover .card__ico{background:var(--blue-600);color:#fff}
}
/* touch screens light the edge as each card arrives */
@media (hover:none){.card.in::before{transform:scaleX(1);transition-delay:.3s}}
/* title, body and outcome line up across a row; without subgrid the
   outcome still sits at the card's foot (margin-block-start:auto above) */
@supports (grid-template-rows:subgrid){
  .grid--3>.card:has(>.card__out){display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .grid--3>.card:has(>.card__out)>.card__out{margin-block-start:0}
}

/* ── operations floor: sticky team map, steps, service-type switch ── */
.modes{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);
  border:1px solid rgba(201,216,230,.14);margin-block-end:40px}
.mode{display:inline-flex;align-items:center;justify-content:center;min-block-size:38px;padding:9px 16px;border-radius:var(--r-xs);border:0;
  background:transparent;color:var(--on-dark-2);cursor:pointer;font:500 14px/1 var(--fs);transition:background .25s,color .25s}
.mode.is-on{background:var(--blue-600);color:#fff}
.floor{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:start}
.floor__pin{position:sticky;inset-block-start:calc(var(--hdr) + 40px)}
/* never taller than the screen it sits in */
.floor__map{position:relative;aspect-ratio:1;inline-size:min(100%,calc(100svh - var(--hdr) - 150px));margin-inline:auto;
  border-radius:var(--r-lg);border:1px solid rgba(201,216,230,.14);
  background:radial-gradient(60% 60% at 50% 50%,rgba(75,123,161,.18),transparent 70%)}
.floor__wire{position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(201,216,230,.18)}
.floor__node{position:absolute;display:grid;place-items:center;inline-size:54px;block-size:54px;margin:-27px;border-radius:50%;
  background:var(--ink);border:1px solid rgba(201,216,230,.3);color:var(--on-dark);transition:opacity .4s,border-color .4s,box-shadow .4s,transform .4s}
.floor__node b{font:500 12px/1 var(--fm)}
.floor__node i{position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--signal);opacity:0}
.floor__node:nth-child(2){inset-block-start:14%;inset-inline-start:50%}
.floor__node:nth-child(3){inset-block-start:26%;inset-inline-start:81%}
.floor__node:nth-child(4){inset-block-start:58%;inset-inline-start:86%}
.floor__node:nth-child(5){inset-block-start:84%;inset-inline-start:66%}
.floor__node:nth-child(6){inset-block-start:84%;inset-inline-start:34%}
.floor__node:nth-child(7){inset-block-start:58%;inset-inline-start:14%}
.floor__node:nth-child(8){inset-block-start:26%;inset-inline-start:19%}
.floor__node.off{opacity:.18}
.floor__node.now{border-color:var(--signal);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px rgba(245,147,100,.14),0 0 26px rgba(245,147,100,.5)}
.floor__node.now i{animation:ping 1.8s var(--ease) infinite;opacity:1}
.floor__now{display:flex;align-items:center;justify-content:center;gap:10px;margin-block-start:16px;
  font:400 13px/1.45 var(--fm);color:var(--on-dark-3);text-align:center}
.floor__dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.floor__steps{display:grid;gap:12px}
.chain__step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;padding-block:22px;padding-inline:18px 22px;border-radius:var(--r);
  border:1px solid rgba(201,216,230,.1);background:rgba(255,255,255,.02);transition:opacity .4s,border-color .4s,background .4s}
.chain__step.now{border-color:rgba(245,147,100,.55);background:rgba(245,147,100,.05)}
.chain__step.off{opacity:.32}
.chain__n{display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:50%;font:500 13px/1 var(--fm);color:#fff;
  background:var(--ink);border:1px solid rgba(201,216,230,.35)}
.chain__step.now .chain__n{border-color:var(--signal);box-shadow:0 0 0 5px rgba(245,147,100,.15)}
.chain__title{font-size:16.5px;line-height:1.35}
.chain__body{margin-block-start:8px;font-size:14px;line-height:1.55;color:var(--on-dark-2)}
.lang-ar .chain__body{line-height:1.75}
.chain__status{display:inline-block;margin-block-start:12px;font:400 12px/1 var(--fm);color:var(--on-dark-3);letter-spacing:.02em}
.chain__step.now .chain__status{color:var(--signal-soft)}

/* ── one case, start to finish ──────────────────────────────────── */
.jr__steps{display:grid;gap:4px;margin-block-start:8px}
.jr__step{display:flex;align-items:center;gap:12px;padding:12px 0;border-block-end:1px solid var(--line);color:var(--muted);transition:color .3s}
.jr__dot{inline-size:10px;block-size:10px;border-radius:50%;border:1.5px solid var(--blue-200);transition:background .3s,border-color .3s,box-shadow .3s}
.jr__step.done{color:var(--ink)}
.jr__step.done .jr__dot{background:var(--blue-600);border-color:var(--blue-600)}
.jr__step.now .jr__dot{background:var(--signal);border-color:var(--signal);box-shadow:0 0 0 5px rgba(245,147,100,.18)}
.jr{margin:0;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(15,34,54,.45);overflow:hidden}
.jr__label{display:flex;align-items:center;gap:10px;padding:14px 18px;border-block-end:1px solid var(--line);
  font:500 12px/1 var(--fm);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.lang-ar .jr__label{font-family:var(--fs);text-transform:none;letter-spacing:0;font-size:13px}
.jr__label .ico{inline-size:18px;block-size:18px;color:var(--blue-600)}
.jr__replay{margin-inline-start:auto;border:1px solid var(--line);background:#fff;border-radius:var(--r-xs);padding:6px 10px;cursor:pointer;
  font:500 12px/1 var(--fs);color:var(--ink)}
.jr__chat{display:flex;flex-direction:column;gap:12px;padding:24px 20px 26px;min-block-size:340px;
  background:linear-gradient(180deg,var(--bg-alt),#fff)}
.jr__chat>*{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.jr__chat>.shown{opacity:1;transform:none}
.bubble{max-inline-size:82%;padding:12px 14px;border-radius:var(--r-lg);font-size:15px;line-height:1.5}
.bubble--in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-start-start-radius:3px}
.bubble--out{align-self:flex-end;background:var(--blue-600);color:#fff;border-start-end-radius:3px}
.jr__tag{align-self:center;max-inline-size:100%;text-align:center;font:400 11.5px/1.45 var(--fm);color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-200);
  padding:5px 10px;border-radius:var(--r-xs)}
.jr__score{align-self:flex-end;display:flex;align-items:center;gap:6px;font:500 12px/1 var(--fm);color:#2E7D57}
.jr__score .ico{inline-size:16px;block-size:16px}

/* ── channels: six channels around one core, a lit ring turning ──── */
.hub{position:relative;max-inline-size:860px;margin-inline:auto;aspect-ratio:2.1/1;display:grid;place-items:center}
.hub__core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  inline-size:250px;padding:30px 24px;border-radius:50%;aspect-ratio:1;
  background:#fff;box-shadow:0 30px 60px -36px rgba(15,34,54,.45),0 0 0 1px var(--line)}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.hub__core::before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 60%,var(--blue-500) 78%,var(--signal) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 6s linear infinite}
.hub__core span{font:600 22px/1 var(--fs);letter-spacing:.14em;color:var(--ink)}
.hub__core small{font-size:13.5px;line-height:1.45;color:var(--muted)}
.hub__ring{position:absolute;inset:0}
.chan{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;min-inline-size:140px;padding-block:12px;padding-inline:12px 16px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);color:var(--ink);font-size:15px;
  box-shadow:0 14px 30px -24px rgba(15,34,54,.4);transition:border-color .3s,box-shadow .3s}
.chan__ico{display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:var(--r-xs);background:var(--blue-50);color:var(--blue-600)}
.chan.lit{border-color:var(--signal);box-shadow:0 0 0 4px rgba(245,147,100,.12),0 14px 30px -20px rgba(245,147,100,.6)}
.chan.lit .chan__ico{background:var(--signal);color:var(--ink)}
.chan:nth-child(1){inset-block-start:4%;inset-inline-start:6%}
.chan:nth-child(2){inset-block-start:4%;inset-inline-end:6%}
.chan:nth-child(3){inset-block-start:42%;inset-inline-start:0}
.chan:nth-child(4){inset-block-start:42%;inset-inline-end:0}
.chan:nth-child(5){inset-block-end:4%;inset-inline-start:6%}
.chan:nth-child(6){inset-block-end:4%;inset-inline-end:6%}
.hub__lines{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none;z-index:1}
.hub__dash{stroke:var(--signal);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:26 1400;stroke-dashoffset:26;opacity:0}
.hub__dash.on{opacity:1;animation:dashRun 1.2s var(--ease) forwards}

/* ── sectors (home, behind SHOW_SECTORS) ────────────────────────── */
.sectors{display:flex;flex-wrap:wrap;gap:12px}
.sector{position:relative;padding:14px 20px;border-radius:var(--r-xs);border:1px solid var(--line);background:#fff;
  font-size:15.5px;color:var(--ink);transition:border-color .3s,background .3s}
.sector::before{content:"";display:inline-block;inline-size:6px;block-size:6px;border-radius:50%;
  margin-inline-end:10px;vertical-align:middle;background:var(--blue-500)}
.sector:hover{border-color:var(--blue-500);background:var(--blue-50)}

/* ── quality: checklist and the self-ticking scorecard ──────────── */
.qlist{display:grid;gap:4px}
.qrow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding-block:14px;border-block-end:1px solid var(--line);color:var(--ink)}
.qrow .ico{color:var(--blue-600)}
.sc{position:relative;overflow:hidden;isolation:isolate;margin:0;padding:26px 26px 20px;border-radius:var(--r-lg);background:var(--ink);color:var(--on-dark)}
.sc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 44%,rgba(75,123,161,.18) 50%,transparent 56%);
  transform:translateX(-120%);animation:secSheen 7s ease-in-out infinite}
.sc__head{display:flex;justify-content:space-between;align-items:baseline;margin-block-end:14px;color:#fff;font-weight:500}
.sc__head small{font:400 11px/1 var(--fm);color:var(--on-dark-3);letter-spacing:.08em;text-transform:uppercase}
.lang-ar .sc__head small{font-family:var(--fs);text-transform:none;letter-spacing:0}
.sc__list{display:grid}
.sc__row{display:flex;align-items:center;gap:12px;padding:12px 0;border-block-end:1px solid rgba(201,216,230,.1);font-size:15px}
.sc__box{display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:5px;border:1px solid rgba(201,216,230,.3);color:transparent;
  transition:background .3s,border-color .3s,color .3s}
.sc__box .ico{inline-size:14px;block-size:14px}
.sc__row.ok .sc__box{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.sc__foot{margin-block-start:14px;text-align:end;font:500 13px/1 var(--fm);color:var(--on-dark-3)}
.sc__count{color:#fff;font-size:20px}

/* ── how we start: five stages on one wire ──────────────────────── */
.stages{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.stages::before{content:"";position:absolute;inset-inline:0;inset-block-start:21px;block-size:1px;background:var(--blue-200)}
.stage{position:relative}
.stage__n{position:relative;display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:50%;
  background:#fff;border:1px solid var(--blue-200);font:500 14px/1 var(--fm);color:var(--blue-600);margin-block-end:18px}
.stage.in .stage__n{animation:nodeLit 6s linear infinite}
.stage:nth-child(2).in .stage__n{animation-delay:1.2s}
.stage:nth-child(3).in .stage__n{animation-delay:2.4s}
.stage:nth-child(4).in .stage__n{animation-delay:3.6s}
.stage:nth-child(5).in .stage__n{animation-delay:4.8s}
.stage h3{font-size:18px}
.stage p{margin-block-start:8px;font-size:14.5px;color:var(--muted)}

/* ── GCC ambition: Muscat as the hub, arcs to the other capitals ── */
.gcc__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:center}
.gcc__pts{display:grid;gap:14px;margin-block:8px 30px}
.gcc__pt{padding-inline-start:16px;border-inline-start:2px solid rgba(245,147,100,.6)}
.gcc__pt h3{font-size:17px}
.gcc__pt p{margin-block-start:4px;font-size:15px;color:var(--muted)}
/* light band (home keeps two dark bands); the map sits in its own navy card */
.gcc__fig{margin:0;padding:var(--s-5);border-radius:var(--r-lg);background:var(--ink)}
.gcc__fig figcaption{margin-block-start:10px;font-size:13px;color:var(--on-dark-3)}
.gcc__map{inline-size:100%;block-size:auto;direction:ltr}
.gcc__grid circle{fill:rgba(201,216,230,.14)}
.gcc__arc{fill:none;stroke:rgba(122,163,198,.4);stroke-width:1.2;stroke-dasharray:3 5}
.gcc__pulse{fill:none;stroke:var(--signal);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 900;stroke-dashoffset:14;
  animation:gccRun 3.6s linear infinite}
.gcc__pulse[data-i="2"]{animation-delay:.6s}
.gcc__pulse[data-i="3"]{animation-delay:1.2s}
.gcc__pulse[data-i="4"]{animation-delay:1.8s}
.gcc__pulse[data-i="5"]{animation-delay:2.4s}
.gcc__city circle{fill:#E4ECF4}
.gcc__hub circle{fill:var(--signal);stroke:#fff;stroke-width:2}
.gcc__map text{font:500 13px var(--fs);fill:var(--on-dark)}
.lang-ar .gcc__map text{font-family:"IBM Plex Sans Arabic",sans-serif}
.gcc__hub text{fill:#fff;font-weight:600}
.gcc__ping{fill:none;stroke:var(--signal);transform-box:fill-box;transform-origin:center;animation:omPing 2.4s var(--ease) infinite}

/* ── tools teaser ───────────────────────────────────────────────── */
.tools{display:grid;gap:12px}
.tool{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:var(--r);border:1px solid var(--line);background:#fff;
  transition:border-color .3s,transform .3s,box-shadow .3s}
.tool:hover{border-color:var(--blue-500);transform:translateY(-2px);box-shadow:0 20px 40px -30px rgba(15,34,54,.4)}
.tool .card__ico{margin:0}
.tool b{display:block;color:var(--ink);font-weight:500}
.tool small{display:block;color:var(--muted);font-size:14px}
.tool>.ico{margin-inline-start:auto;color:var(--blue-600)}

/* ── partners: two logo rows drifting in opposite directions ────────
   Each row holds its list twice; moving one copy-width loops seamlessly. */
.partners__title{font-size:22px;text-align:center}
.partners__note{margin-block:10px 30px;text-align:center;font-size:14px;color:var(--muted)}
.mqs{display:grid;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq{display:flex;overflow:hidden;direction:ltr}
.mq__track{display:flex;flex:none;gap:14px;padding-inline-end:14px;animation:mq 55s linear infinite}
.mq--b .mq__track{animation-direction:reverse;animation-duration:62s}
.mq:hover .mq__track{animation-play-state:paused}
.mq__item{position:relative;overflow:hidden;flex:none;display:grid;place-items:center;inline-size:210px;block-size:92px;padding:14px 24px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.mq__item img{block-size:56px;inline-size:auto;max-inline-size:160px;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .35s,opacity .35s}
.mq__item:hover{border-color:var(--blue-200);box-shadow:0 14px 30px -22px rgba(15,34,54,.4)}
.mq__item:hover img{filter:none;opacity:1}
.mq__item::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  transform:translateX(-120%);animation:secSheen 7s ease-in-out infinite}
.mq__item:nth-child(3n)::after{animation-delay:2.3s}
.mq__item:nth-child(3n+1)::after{animation-delay:4.6s}

/* ── careers band ───────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding:clamp(32px,4vw,52px);border-radius:var(--r-lg);color:#E4ECF4;
  background:linear-gradient(120deg,var(--blue-700),var(--blue-600) 60%,var(--blue-500))}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-120%);animation:secSheen 7s ease-in-out infinite}
.band__title{color:#fff;font-size:clamp(24px,2.6vw,34px);line-height:1.2}
.band__body{margin-block-start:10px;max-inline-size:60ch}

/* ── contact call to action ─────────────────────────────────────── */
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-row .sec__title{margin:0}
.cta-row__btns{display:flex;gap:12px;flex-wrap:wrap}

/* ═══ inner pages ═══════════════════════════════════════════════ */
.phead{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--on-dark);padding-block:calc(var(--hdr) + clamp(40px,6vw,72px)) clamp(48px,6vw,72px)}
.phead .eyebrow a{color:inherit}
.phead__title{margin-block:18px 14px;font-size:clamp(34px,4.6vw,60px);line-height:1.08}
.phead__lede{max-inline-size:60ch;font-size:18px;color:var(--on-dark-2)}

/* ── how we work ────────────────────────────────────────────────── */
.xstages{display:grid;gap:14px}
.xstage{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.xstage .stage__n{margin:0}
.xstage h3{font-size:20px}
.xstage p{margin-block-start:8px;color:var(--muted);max-inline-size:68ch}
.ticks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-block-start:14px}
.ticks li{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink)}
.ticks .ico{inline-size:16px;block-size:16px;color:var(--blue-600)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
.kpi{padding:22px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.kpi dt{display:flex;flex-direction:column;gap:6px;color:var(--ink);font-weight:500}
.kpi dt b{font:500 22px/1 var(--fm);color:var(--blue-600)}
.kpi dd{margin:10px 0 0;font-size:14.5px;color:var(--muted)}

.curve{margin:0;padding:24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.curve svg{inline-size:100%;block-size:auto;overflow:visible;direction:ltr}
.curve__area{fill:rgba(75,123,161,.10)}
.curve__demand{fill:none;stroke:var(--blue-500);stroke-width:2.2}
.curve__staff{fill:none;stroke:var(--signal);stroke-width:2;stroke-dasharray:6 5}
.curve__ticks text{font:400 11px var(--fm);fill:var(--muted);text-anchor:middle}
.curve figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-start:12px;font-size:13px;color:var(--muted)}
.curve em{font-style:normal;color:var(--signal-deep)}
.lg{display:inline-block;inline-size:18px;block-size:3px;border-radius:2px}
.lg--d{background:var(--blue-500)}
.lg--s{background:var(--signal)}
/* the demand line draws itself in; the staff line keeps its dashes */
html.js .curve.reveal .curve__demand,html.js .curve.reveal .curve__staff{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.2s var(--ease)}
html.js .curve.in .curve__demand{stroke-dashoffset:0}
html.js .curve.in .curve__staff{stroke-dashoffset:0;stroke-dasharray:6 5;transition:none}

/* ── sectors page ───────────────────────────────────────────────── */
.sxs{display:grid;gap:12px}
.sx{display:grid;grid-template-columns:1.1fr 1.5fr 1.5fr;gap:24px;padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;transition:border-color .3s}
.sx:hover{border-color:var(--blue-200)}
.sx h3{font-size:19px}
.sx__k{font:500 11.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);margin-block-end:8px}
.sx p{font-size:15px;color:var(--muted)}

/* ── tools: staffing calculator ─────────────────────────────────── */
.calc{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.calc__in{display:grid;gap:16px;padding:30px;background:#fff}
.calc__out{position:relative;overflow:hidden;isolation:isolate;padding:30px;background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;gap:6px}
.calc__out::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 44%,rgba(75,123,161,.2) 50%,transparent 56%);
  transform:translateX(-120%);animation:secSheen 8s ease-in-out infinite}
.calc__out .btn{align-self:flex-start;margin-block-start:auto}
.calc__k{font:500 12px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-3);margin-block-start:10px}
.calc__big{font:500 72px/1 var(--fs);color:#fff;font-variant-numeric:tabular-nums}
.calc__mid{font:500 34px/1 var(--fs);color:var(--signal-soft);font-variant-numeric:tabular-nums}
.calc__big span.bump,.calc__mid span.bump{display:inline-block;animation:bump .5s var(--ease)}
.calc__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 22px;padding-block-start:16px;border-block-start:1px solid rgba(201,216,230,.14)}
.calc__meta dt{font-size:12px;color:var(--on-dark-3)}
.calc__meta dd{margin:4px 0 0;font:500 18px/1 var(--fm);color:#fff}

/* ── tools: readiness check ─────────────────────────────────────── */
.rqs{display:grid;gap:10px}
.rq{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.rq__n{font:500 12px/1 var(--fm);color:var(--blue-600)}
.rq p{font-size:15px;color:var(--ink)}
.rq__a{display:flex;gap:6px}
.rq__a input{position:absolute;opacity:0;pointer-events:none}
.rq__a span{display:inline-block;padding:8px 14px;border-radius:var(--r-xs);border:1px solid var(--line);font-size:13.5px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.rq__a input:checked+span{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.rq__a input:focus-visible+span{outline:2px solid var(--blue-500);outline-offset:2px}
.rr{position:sticky;inset-block-start:calc(var(--hdr) + 30px);padding:26px;border-radius:var(--r-lg);background:var(--ink);color:var(--on-dark)}
.rr__score{font:500 48px/1 var(--fs);color:#fff}
.rr__score span{color:var(--signal-soft)}
.rr__t{margin-block-start:14px;color:#fff;font-size:20px}
.rr__d{margin-block-start:8px;font-size:15px}

/* ── glossary and FAQ ───────────────────────────────────────────── */
.gls{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0}
.gl{padding:20px;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.gl dt{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.gl dt b{font:500 16px/1.3 var(--fm);color:var(--ink)}
.gl dt span{font-family:"IBM Plex Sans Arabic",sans-serif;color:var(--blue-600);font-size:15px}
.gl dd{margin:8px 0 0;font-size:14.5px;color:var(--muted)}
.faqs{display:grid;gap:10px;max-inline-size:860px}
.faq{border-radius:var(--r);border:1px solid var(--line);background:#fff}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq__ico{color:var(--blue-600);transition:transform .3s;transform:rotate(90deg)}
.faq[open] .faq__ico{transform:rotate(-90deg)}
.faq p{padding:0 22px 20px;color:var(--muted);max-inline-size:68ch}

/* ── careers ────────────────────────────────────────────────────── */
.paths{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.path{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.path h3{font-size:17px}
.path p{margin-block-start:8px;font-size:14px;color:var(--muted)}
.warn{display:flex;gap:16px;padding:24px;border-radius:var(--r-lg);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink)}
.warn .ico{inline-size:28px;block-size:28px;color:var(--signal-deep)}
.warn h3{font-size:17px;color:var(--warn-ink)}
.warn p{margin-block-start:6px;font-size:15px;max-inline-size:68ch}

/* ── contact ────────────────────────────────────────────────────── */
.cdetails{display:grid;gap:14px}
.cdetails li{display:flex;align-items:center;gap:14px;color:var(--ink)}
.cdetails .ico{color:var(--blue-600)}
.form{display:grid;gap:16px;padding:32px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(15,34,54,.4)}
.form .btn{justify-self:start}
.form__note{font-size:13px;color:var(--signal-deep)}
.field{display:grid;gap:7px;font-size:14px;color:var(--muted)}
.field input,.field textarea{min-block-size:48px;font:inherit;font-size:16px;color:var(--text);padding:12px 14px;border-radius:var(--r-xs);
  border:1px solid var(--line);background:var(--bg-alt);resize:vertical}
.field textarea{min-block-size:112px}
.field input:not([disabled]){background:#fff}
.field input:focus{border-color:var(--blue-500);outline:0;box-shadow:0 0 0 3px rgba(75,123,161,.18)}
.ptabs{display:flex;gap:4px;padding:4px;border-radius:var(--r-sm);background:var(--bg-alt);margin-block-end:8px}
.ptab{flex:1;min-block-size:38px;padding:10px;border:0;border-radius:var(--r-xs);background:transparent;cursor:pointer;font:500 14px/1.25 var(--fs);color:var(--muted)}
.ptab.is-on{background:#fff;color:var(--ink);box-shadow:0 2px 8px -4px rgba(15,34,54,.3)}
.pform{display:none;gap:16px}
.pform.is-on{display:grid}
.rsteps{display:flex;gap:8px;margin-block-end:4px}
.rsteps li{flex:1;display:flex;align-items:center;gap:8px;padding-block-end:10px;border-block-end:2px solid var(--line);font-size:13.5px;color:var(--muted)}
.rsteps li span{display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;background:var(--bg-alt);font:500 12px/1 var(--fm)}
.rsteps li.is-on{border-color:var(--blue-600);color:var(--ink)}
.rsteps li.is-on span{background:var(--blue-600);color:#fff}
.rstep{display:none;gap:16px;border:0;padding:0;margin:0}
.rstep.is-on{display:grid}
.rnav{display:flex;justify-content:space-between}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.check input{margin-block-start:3px}
.check a{color:var(--blue-600);text-decoration:underline}

/* ── privacy and accessibility ──────────────────────────────────── */
.prose{max-inline-size:760px}
.prose h2{font-size:22px;margin-block:30px 8px}
.prose p{color:var(--text)}
.prose p,.prose li{max-inline-size:68ch}
.prose p+p{margin-block-start:12px}
.draft{padding:14px 16px;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);font-size:14.5px}

/* ── about ──────────────────────────────────────────────────────── */
.whys{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why{position:relative;overflow:hidden;padding:26px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.why::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:2px;
  background:linear-gradient(90deg,var(--blue-500),var(--signal));transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
[dir="rtl"] .why::before{transform-origin:100% 50%}
.why.in::before{transform:scaleX(1)}
.why:nth-child(2).in::before{transition-delay:.15s}
.why:nth-child(3).in::before{transition-delay:.3s}
.why:nth-child(4).in::before{transition-delay:.45s}
.why__n{font:500 12px/1 var(--fm);color:var(--blue-600)}
.why h3{margin-block:14px 8px;font-size:20px}
.why p{font-size:15px;color:var(--muted)}
.vz__logo{inline-size:200px;block-size:auto;margin-block-start:10px}
.vzs{display:grid;gap:12px}
.vz{padding:20px 22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);border-inline-start:3px solid var(--blue-500)}
.vz h3{font-size:17px}
.vz p{margin-block-start:6px;font-size:15px;color:var(--muted)}

/* inside LABBIK: a drawn operations floor */
.fp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px;align-items:start}
.fp__svg{inline-size:100%;block-size:auto;direction:ltr}
.fp__zone{cursor:pointer;outline:none}
.fp__zone rect{fill:rgba(255,255,255,.03);stroke:rgba(201,216,230,.22);stroke-width:1;transition:fill .3s,stroke .3s}
.fp__zone text{font:500 13px var(--fs);fill:var(--on-dark-2);transition:fill .3s}
.fp__zone.on rect,.fp__zone:focus-visible rect{fill:rgba(245,147,100,.08);stroke:var(--signal)}
.fp__zone.on text{fill:#fff}
.fp__desk{fill:rgba(201,216,230,.08);stroke:rgba(201,216,230,.25);stroke-width:.8}
.fp__lamp{fill:var(--ok);animation:lamp 3.6s ease-in-out infinite}
.fp__lamp[data-d="1"]{animation-delay:.5s}
.fp__lamp[data-d="2"]{animation-delay:1s;fill:var(--signal)}
.fp__lamp[data-d="3"]{animation-delay:1.5s}
.fp__lamp[data-d="4"]{animation-delay:2s}
.fp__lamp[data-d="5"]{animation-delay:2.5s;fill:var(--on-dark-3)}
.fp__lamp[data-d="6"]{animation-delay:3s}
.fp__bar{fill:rgba(75,123,161,.55);transform-box:fill-box;transform-origin:50% 100%;animation:bar 2.8s ease-in-out infinite}
.fp__bar:nth-of-type(odd){animation-delay:-1.2s}
.fp__bar:nth-of-type(3n){animation-delay:-.6s;fill:rgba(245,147,100,.6)}
.fp__list{display:grid;gap:8px}
.fp__list li{padding:14px 16px;border-radius:var(--r-sm);border:1px solid rgba(201,216,230,.12);cursor:pointer;transition:border-color .3s,background .3s}
.fp__list li.on{border-color:rgba(245,147,100,.55);background:rgba(245,147,100,.06)}
.fp__list b{display:block;color:#fff;font-weight:500}
.fp__list span{display:block;margin-block-start:4px;font-size:14px;color:var(--on-dark-2)}

/* schematic map of Oman */
.om{margin:0}
.om svg{display:block;inline-size:100%;max-inline-size:520px;block-size:auto;margin-inline:auto;direction:ltr}
.om__land{fill:var(--blue-50);stroke:var(--blue-200);stroke-width:1.2;stroke-linejoin:round}
.om__sig{fill:none;stroke:var(--signal);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:6 600;stroke-dashoffset:6;opacity:.9;
  animation:sig 4.2s linear infinite}
.om__sig[data-i="1"]{animation-delay:.6s}
.om__sig[data-i="2"]{animation-delay:1.2s}
.om__sig[data-i="3"]{animation-delay:1.8s}
.om__sig[data-i="4"]{animation-delay:2.4s}
.om__sig[data-i="5"]{animation-delay:3s}
.om__sig[data-i="6"]{animation-delay:3.6s}
.om__town{fill:var(--blue-500)}
.om__lbl{font:400 11px var(--fm);fill:var(--muted)}
.om__hq{fill:var(--signal);stroke:#fff;stroke-width:2}
.om__ping{fill:none;stroke:var(--signal);transform-box:fill-box;transform-origin:center;animation:omPing 2.4s var(--ease) infinite}
.om__hqlbl{font:500 13px var(--fs);fill:var(--ink)}

/* ── 404: "this line is not connected" ──────────────────────────── */
.nf{position:relative;overflow:hidden;isolation:isolate;min-block-size:100svh;display:grid;place-content:center;gap:18px;padding:24px;
  text-align:center;background:var(--ink);color:var(--on-dark)}
.nf .eyebrow{justify-self:center;color:var(--signal)}
.nf h1{font-size:clamp(28px,4vw,44px);color:#fff}
.nf .btn--ghost-dark{color:#fff;border-color:rgba(255,255,255,.3)}
.nf__ar{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:20px;color:var(--on-dark-2)}
.nf__net{inline-size:min(520px,90vw);block-size:auto;margin-inline:auto;direction:ltr}
.nf__net line{stroke:rgba(122,163,198,.45);stroke-width:1.2}
.nf__net circle{fill:#E4ECF4}
.nf__net .nf__cut{stroke:var(--signal);stroke-dasharray:4 6;animation:cut 1.6s steps(2) infinite}
.nf__net .nf__spark{fill:var(--signal);transform-box:fill-box;transform-origin:center;animation:spark 1.6s ease-in-out infinite}

/* ── Arabic labels: mono, letter-spaced and uppercase break Arabic joining ── */
.lang-ar .calc__k,.lang-ar .sx__k,.lang-ar .calc__meta dt,.lang-ar .rq__n,.lang-ar .why__n,.lang-ar .om__lbl,
.lang-ar .om__hqlbl,.lang-ar .curve figcaption{font-family:"IBM Plex Sans Arabic",sans-serif;letter-spacing:0;text-transform:none}
.lang-ar .calc__k{font-size:14px}
.lang-ar .sx__k{font-size:13px}
.lang-ar .om__lbl{font-size:12px}

/* ═══ responsive ════════════════════════════════════════════════ */
@media (max-width:1100px){
  .hdr__nav,.hdr__end .btn{display:none}
  .hdr__menu{display:flex}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .sx{grid-template-columns:1fr}
  .whys{grid-template-columns:repeat(2,1fr)}
  .fp{grid-template-columns:1fr}
  /* footer: links take their own row */
  .ftr__in{grid-template-columns:minmax(0,1fr) auto}
  .ftr__nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start}
}
/* keep content clear of the side dock */
@media (min-width:761px) and (max-width:1380px){
  .wrap{inline-size:min(var(--wrap),100% - 2 * 84px)}
}
@media (max-width:1100px) and (min-width:761px){
  /* career paths: rows of three, a short last row shares the width */
  .paths{display:flex;flex-wrap:wrap}
  .path{flex:1 1 calc((100% - 2 * 14px) / 3)}
  /* operations floor: map and steps side by side, map still sticky */
  .floor{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s-6)}
}
@media (max-width:1000px){
  .gcc__in{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* stages: a vertical list on one wire */
  .stages{grid-template-columns:1fr;gap:0}
  .stages::before{inset-block:21px 42px;inset-inline-start:21px;inset-inline-end:auto;inline-size:1px;block-size:auto}
  .stage{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:var(--s-4);padding-block-end:var(--s-5)}
  .stage:last-child{padding-block-end:0}
  .stage__n{grid-row:1 / span 2;margin:0}
  .stage h3{align-self:center;min-block-size:42px;display:flex;align-items:center}
  .stage p{margin-block-start:0}
  /* hub: the chips no longer fit around the core, so they stack below it */
  .hub{aspect-ratio:auto;display:flex;flex-direction:column;gap:var(--s-5)}
  .hub__ring{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);inline-size:100%;order:2}
  .chan{position:static;min-inline-size:0}
  .hub__lines{display:none}
}
@media (max-width:760px){.dock__panel{inline-size:min(304px,calc(100vw - 72px))}}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{inline-size:calc(100% - 32px)}

  /* touch targets */
  .hdr__menu{inline-size:var(--tap);block-size:var(--tap)}
  .hdr__lang{display:inline-flex;align-items:center;min-block-size:var(--tap);padding-inline:var(--s-2)}
  .hdr__brand{padding-block:11px}
  .btn,.btn--sm,.ctab,.mode,.ptab{min-block-size:var(--tap)}
  .rq__a span{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--tap);min-inline-size:64px}
  .link{min-block-size:var(--tap);margin-block-start:var(--s-3)}
  .mnav a{min-block-size:var(--tap);display:flex;align-items:center}
  .ftr__nav{gap:0 var(--s-4)}
  .ftr__nav a{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--tap);min-inline-size:var(--tap)}
  .phead .eyebrow a,.jr__replay{position:relative}
  .phead .eyebrow a::after{content:"";position:absolute;inset:-13px -4px}
  .jr__replay::after{content:"";position:absolute;inset:-10px -6px}
  .check{min-block-size:var(--tap);align-items:center}
  .check input{inline-size:20px;block-size:20px;margin-block-start:0;flex:none}

  /* hero: the veil darkens downwards, channel tabs become one row of icons */
  .hero__veil{background:linear-gradient(180deg,rgba(10,23,38,.35),rgba(10,23,38,.85))}
  .hero__tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s-1);padding-block-end:var(--s-6)}
  .ctab{padding-inline:0}
  .ctab span{display:none}

  .trust__row{grid-template-columns:1fr 1fr}
  .trust__cell{padding:22px 14px}
  .trust__cell:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .trust__cell:nth-child(n+3){border-block-start:1px solid var(--line)}

  .grid--3,.split,.floor,.paths,.kpis,.gls,.calc,.whys{grid-template-columns:1fr}
  .floor__pin{display:none}
  .hub__core{inline-size:210px}
  .hub__ring{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{flex-direction:column;align-items:flex-start;padding:var(--s-6) var(--s-5)}
  .mq__item{inline-size:150px;block-size:72px;padding:10px 16px}
  .mq__item img{block-size:44px}
  .rq{grid-template-columns:auto 1fr}
  .rq__a{grid-column:1/-1}
  .rr{position:static}
  .calc__big{font-size:56px}

  /* tighter inner padding so content gets the width */
  .card,.form,.calc__in,.calc__out,.sc,.rr{padding:var(--s-5)}
  .xstage,.sx,.why,.path,.kpi,.gl{padding:20px}
  .faq summary{padding:var(--s-4) 18px;min-block-size:56px}
  .faq p{padding:0 18px 18px}

  /* proposal steps: only the current step keeps its label */
  .rsteps li{min-inline-size:0}
  .rsteps li:not(.is-on){flex:0 0 auto;gap:0;padding-inline-end:var(--s-3);font-size:0}
  .rsteps li.is-on{flex:1 1 auto}

  /* calls to action fill the row */
  .cta-row__btns,.hero__cta{inline-size:100%}
  .cta-row__btns .btn,.hero__cta .btn{flex:1 1 auto}

  /* the dock stays at the side, compact, in the bottom corner. Location and
     proposal are one tap away in the menu, so the bar never covers the hero
     buttons */
  .dock{inset-block-start:auto;inset-block-end:12px;inset-inline-end:8px;transform:none}
  .dock__btn{inline-size:40px;block-size:40px}
  .dock__btn .ico{inline-size:19px;block-size:19px}
  .dock li:has(.dock__btn--location),.dock li:has(.dock__btn--cta),.dock__sep{display:none}
}
@media (hover:none),(max-width:760px){.dock__lbl{display:none}}

/* ═══ motion ════════════════════════════════════════════════════ */
@keyframes btnSheen{0%,78%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes btnSheenR{0%,78%{transform:translateX(120%)}100%{transform:translateX(-120%)}}
@keyframes secSheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes cardSheen{0%{opacity:1;transform:translateX(0) skewX(-14deg)}100%{opacity:1;transform:translateX(380%) skewX(-14deg)}}
@keyframes shine{0%,20%{background-position:100% 0}70%,100%{background-position:0 0}}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes omPing{0%{transform:scale(.6);opacity:1}100%{transform:scale(3.2);opacity:0}}
@keyframes wmPulse{50%{box-shadow:0 0 2px var(--signal);opacity:.75}}
@keyframes wmIntro{0%{transform:scale(0)}60%{transform:scale(1.8)}100%{transform:scale(1)}}
@keyframes heroIn{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes scan{from{transform:translateY(-160px)}to{transform:translateY(110vh)}}
@keyframes wire{0%{transform:translateX(-30%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(480%);opacity:0}}
@keyframes wireR{0%{transform:translateX(30%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(-480%);opacity:0}}
@keyframes nodeLit{0%,6%{border-color:var(--signal);box-shadow:0 0 0 5px rgba(245,147,100,.18),0 0 18px rgba(245,147,100,.55)}
  20%,100%{border-color:rgba(201,216,230,.35);box-shadow:none}}
@keyframes spin{to{--ang:360deg}}
@keyframes dashRun{to{stroke-dashoffset:-600}}
@keyframes gccRun{0%{stroke-dashoffset:14;opacity:0}10%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:-560;opacity:0}}
@keyframes sig{0%{stroke-dashoffset:6;opacity:0}10%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:-520;opacity:0}}
@keyframes mq{to{transform:translateX(-100%)}}
@keyframes bump{0%{transform:translateY(6px);opacity:.3}100%{transform:none;opacity:1}}
@keyframes lamp{50%{opacity:.25}}
@keyframes bar{50%{transform:scaleY(.45)}}
@keyframes cut{50%{opacity:.15}}
@keyframes spark{50%{transform:scale(1.6);opacity:.4}}
@keyframes okPulse{50%{box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(46,158,107,.2)}}
@keyframes dockSweep{0%{transform:translateY(-110%)}30%,100%{transform:translateY(330%)}}
@keyframes dockGlow{0%,100%{opacity:0}50%{opacity:1}}
@keyframes dockRing{0%{box-shadow:0 0 0 0 rgba(245,147,100,.6)}100%{box-shadow:0 0 0 12px rgba(245,147,100,0)}}
@keyframes dockNudge{0%,30%,100%{transform:none}8%{transform:rotate(-12deg)}16%{transform:rotate(10deg)}24%{transform:rotate(-6deg)}}

/* the visitor's pause switch (dock), remembered per browser */
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}
html.paused .dock__motion .ico--play{display:block}
html.paused .dock__motion .ico--pause{display:none}
html.paused .dock__sweep{display:none}
html.paused .dock__btn--whatsapp.is-ring::after,html.paused .dock__btn--whatsapp.is-ring .ico{animation:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{transform:none;filter:none;transition:opacity .4s linear}
  html.js .hero__in>*,html.js .hero__tabs{animation:heroIn .4s linear both;animation-delay:0s}
  .hdr{transition:none}
  .hero__scan{animation-duration:16s}
  .shine{animation-duration:10s}
  .gcc__pulse{animation-duration:7s}
  .mq__track{animation-duration:140s}
  /* dock: a gentle glow instead of the sweep, opacity-only transitions */
  .dock__sweep::before{transform:none;block-size:100%;opacity:0;animation:dockGlow 12s ease-in-out 3s infinite;
    background:linear-gradient(180deg,transparent,rgba(245,147,100,.1),transparent)}
  .dock__btn,.dock__btn .ico,.dock__lbl,.dock__panel,.dock__btn::before{transition:opacity .2s linear,background .2s linear,color .2s linear}
  .dock__btn:hover .ico,.dock__btn:focus-visible .ico{transform:none}
  .dock__panel,[dir="rtl"] .dock__panel,.dock__btn::before{transform:none}
  .dock__lbl,[dir="rtl"] .dock__lbl{transform:translateY(-50%)}
  .dock__btn--whatsapp.is-ring::after,.dock__btn--whatsapp.is-ring .ico{animation:none}
}

@media print{
  .hdr,.dock,.net,.hero__scan{display:none}
  html.js .reveal{opacity:1;transform:none;filter:none}
}

/* ---- public launch (2 Nov 2026): Vision 2040 in the header, government work, write-to-us card ---- */
.hdr__vision{display:flex;align-items:center;margin-inline-end:auto;padding:4px 8px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.hdr__vision img{inline-size:64px;block-size:auto}
.gws{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-block-start:28px}
.gw{position:relative;padding:24px 26px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;border-inline-start:3px solid var(--blue-600)}
.gw__year{font:500 13px/1 var(--fm);letter-spacing:.08em;color:var(--blue-600)}
.gw h3{margin-block-start:10px;font-size:18px}
.gw p{margin-block-start:8px;color:var(--muted);font-size:15px}
.gw__src{display:inline-block;margin-block-start:12px;font-size:13.5px;color:var(--blue-700);text-decoration:underline;text-underline-offset:3px}
.form__title{font-size:22px;margin-block-end:10px}
.cdetails a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){.hdr__vision{display:none}}
@media (max-width:700px){.gws{grid-template-columns:1fr}}
/* LABBIK TELECOM — tablet refinements, 761–1100px (portrait and landscape).
   Loaded after style.css and before phone.css; every rule stays inside the
   tablet range so phones (≤760) and laptops (>1100) are untouched.
   Logical properties only: the Arabic pages mirror on their own, and the
   side dock (inset-inline-end) sits on the left there. */

@media (min-width:761px) and (max-width:1100px){
  /* ── page frame: the dock lives on one side only ──────────────────
     style.css reserves 84px on both sides; the dock needs it only at the
     inline end. Start keeps a normal gutter, end clears the (slightly
     slimmer) dock: 10px inset + 56px bar + 10px air = 76px. */
  :root{--gut-s:40px;--gut-e:76px}
  .wrap{inline-size:calc(100% - var(--gut-s) - var(--gut-e));margin-inline:var(--gut-s) var(--gut-e)}

  .mnav{padding-inline:var(--gut-s) var(--gut-e)}

  .dock{inset-inline-end:10px}
  .dock__bar{padding:6px;gap:6px}
  .dock__btn::before{inset-inline-start:-5px}
  .dock__sep{margin-inline:4px}

  /* ── touch targets: 44px minimum ──────────────────────────────── */
  .hdr__menu{inline-size:var(--tap);block-size:var(--tap)}
  .hdr__lang{display:inline-flex;align-items:center;min-block-size:var(--tap);padding-inline:var(--s-2)}
  .hdr__brand{padding-block:11px}
  .btn--sm,.ctab,.mode,.ptab{min-block-size:var(--tap)}
  .mnav a{display:flex;align-items:center;min-block-size:var(--tap)}
  .link{min-block-size:var(--tap);margin-block-start:var(--s-4)}
  .rq__a span{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--tap);min-inline-size:56px}
  .ftr__nav{gap:0 var(--s-4)}
  .ftr__nav a{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--tap);min-inline-size:var(--tap)}
  .phead .eyebrow a,.jr__replay{position:relative}
  .phead .eyebrow a::after{content:"";position:absolute;inset:-13px -4px}
  .jr__replay::after{content:"";position:absolute;inset:-10px -6px}
  .faq summary{min-block-size:60px}
  .check{min-block-size:var(--tap);align-items:center}
  .check input{inline-size:20px;block-size:20px;margin-block-start:0;flex:none}

  /* ── hero: the seven channel tabs stay on one row ─────────────── */
  .hero__tabs{flex-wrap:nowrap;gap:6px}
  .ctab{flex:0 1 auto;min-inline-size:var(--tap);padding-inline:12px;gap:7px}

  /* ── quality list: the tick stays beside its line, a pending chip
     drops under the text instead of pushing the text under the tick ── */
  .qrow{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:6px}
  .qrow>.pend{grid-column:2;justify-self:start}

  /* ── how we work: nine KPIs as three full rows, not 2/2/2/2/1 ─── */
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* ── sectors: challenge and approach side by side under the name ── */
  .sx{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-6)}
  .sx h3{grid-column:1 / -1}

  /* ── about: the floor-plan list in two columns; an odd last zone
     takes the full row instead of sitting alone in a half ─────── */
  .fp__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fp__list li:last-child:nth-child(odd){grid-column:1 / -1}

  /* ── contact: the form gets the wider column, and never spills ─── */
  .split:has(.form){grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
  .form{grid-template-columns:minmax(0,1fr)}
  .rsteps li{min-inline-size:0}

  /* ── tools: readiness questions get the room, score box stays sticky ── */
  #readiness .split{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
}

/* landscape tablets: the hero (copy, buttons and tabs) fits one screen */
@media (min-width:761px) and (max-width:1100px) and (orientation:landscape) and (max-height:860px){
  .hero__in{padding-block:calc(var(--hdr) + 36px) 28px}
  .hero__title{margin-block:16px 18px;font-size:clamp(40px,5.4vw,64px)}
  .lang-ar .hero__title{font-size:clamp(36px,4.9vw,58px)}
  .hero__cta{margin-block-start:28px}
  .hero__tabs{padding-block-end:32px}
}

/* short landscape windows (small laptops, split screen): one more step down */
@media (min-width:761px) and (max-width:1100px) and (orientation:landscape) and (max-height:660px){
  .hero__in{padding-block-start:calc(var(--hdr) + 20px)}
  .hero__title{margin-block:12px 14px;font-size:clamp(34px,4.4vw,46px)}
  .lang-ar .hero__title{font-size:clamp(32px,4vw,42px)}
  .hero__lede{font-size:17px}
  .hero__cta{margin-block-start:20px}
  .hero__tabs{padding-block-end:20px}
}

/* portrait tablets and narrow landscape windows */
@media (min-width:761px) and (max-width:900px){
  /* hero: tighter tabs so all seven fit in one row */
  .hero__tabs{gap:4px}
  .ctab{padding-inline:9px;gap:6px;font-size:13px}

  /* trust strip: four cells keep their values on one line */
  .trust__cell{padding:26px 18px}
  .trust__val{font-size:26px}

  .kpi{padding:18px}

  /* contact: details above, the form across the full width */
  .split:has(.form){grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .split:has(.form) .cdetails{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-6)}
  .cdetails~p{max-inline-size:60ch}

  /* readiness: the yes/no pair drops under its question */
  .rq{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s-3)}
  .rq__a{grid-column:2}

  /* operations floor: map and steps stay side by side, a little closer */
  .floor{gap:var(--s-5)}
  .chain__step{gap:14px;padding-inline:14px 18px}
}
/* LABBIK TELECOM: phone refinements (up to 760px).
   Loaded after style.css and tablet.css, so these rules win on phones.
   Logical properties only; motion, reduced-motion and html.paused rules
   in style.css are left as they are.

   The side dock stays at the side (bottom inline-end corner). It takes
   --dock-room from the content edge, so blocks that sit at rest in that
   corner (hero buttons and tabs, the footer) keep clear of it. */

@media (max-width:760px){
  :root{--dock-room:56px;--sec-pad:56px;--sec-pad-tight:44px;--head-gap:28px}

  /* ── dock: 44px targets, tighter bar (56 x 200) ─────────────────── */
  .dock__bar{gap:4px;padding:6px}
  .dock__btn{inline-size:var(--tap);block-size:var(--tap)}
  .dock__btn::before{inset-inline-start:-5px}
  /* the flyout opens upward from the bar's foot, inside the screen, with a
     16px margin on the far side */
  .dock__panel{inset-block-start:auto;inset-block-end:0;inline-size:min(304px,calc(100vw - 92px));
    max-block-size:calc(100svh - var(--hdr) - 24px);overflow-y:auto;overscroll-behavior:contain}

  /* ── type ──────────────────────────────────────────────────────── */
  .hero__title{font-size:clamp(36px,10.4vw,42px);line-height:1.06;margin-block:18px}
  .lang-ar .hero__title{font-size:clamp(32px,9.2vw,38px);line-height:1.3}
  .hero__lede{font-size:17px}
  .lang-ar .hero__lede{line-height:1.8}
  .sec__title{font-size:clamp(27px,7.6vw,31px);line-height:1.15}
  .lang-ar .sec__title{line-height:1.4}
  .sec__lede{font-size:17px}
  .phead__title{font-size:clamp(31px,8.8vw,36px);line-height:1.12}
  .lang-ar .phead__title{line-height:1.35}
  .phead__lede{font-size:17px}
  .band__title{line-height:1.25}
  .lang-ar .band__title{line-height:1.45}
  .partners__title{font-size:20px;line-height:1.35}
  .partners__note{margin-block:8px 22px}
  .card__title,.xstage h3,.why h3{font-size:19px}

  /* ── hero: buttons and channel tabs keep clear of the dock ──────── */
  .hero__in{padding-block:calc(var(--hdr) + 40px) 28px}
  .hero__cta{margin-block-start:28px;gap:10px;padding-inline-end:var(--dock-room)}
  .hero__tabs{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
    padding-inline-end:var(--dock-room);padding-block-end:var(--s-6)}
  .ctab[data-chan="-1"]{grid-column:span 2}

  /* ── services cards: a little less air above the title ─────────── */
  .card__ico{margin-block-end:16px}

  /* ── operations: the map is hidden, the steps carry the story ──── */
  .modes{display:flex;inline-size:100%;margin-block-end:24px}
  .mode{flex:1 1 0;padding-inline:8px}
  .chain__step{gap:14px;padding-block:18px;padding-inline:14px 16px}
  .chain__n{inline-size:38px;block-size:38px}
  .chain__status{line-height:1.5}

  /* ── one case: chat column ─────────────────────────────────────── */
  .jr__chat{padding:20px 16px 22px;min-block-size:0}
  .bubble{max-inline-size:88%}

  /* ── channel hub: two even columns of chips ────────────────────── */
  .hub{gap:var(--s-5)}
  .hub__ring{gap:10px}
  .chan{gap:8px;min-block-size:56px;padding-block:10px;padding-inline:10px 12px;font-size:14.5px;line-height:1.3}
  .chan__ico{flex:none;inline-size:32px;block-size:32px}

  /* ── quality scorecard ─────────────────────────────────────────── */
  .sc__row{font-size:14.5px}

  /* ── GCC map: bigger labels, the map gets the card's width ─────── */
  .gcc__fig{padding:14px}
  .gcc__map text{font-size:25px}
  .gcc__fig figcaption{margin-block-start:8px;padding-inline:4px}

  /* ── how we work: number beside the title, the text gets the width ── */
  .xstage{grid-template-columns:42px minmax(0,1fr);gap:12px 14px;align-items:center}
  .xstage>div{display:contents}
  .xstage p,.xstage .ticks{grid-column:1 / -1}
  .xstage p{margin-block-start:0}
  .ticks{margin-block-start:2px}
  .kpi dt b{font-size:20px}
  .curve{padding:16px}
  .curve__ticks text{font-size:24px}

  /* ── tools: calculator and readiness check ─────────────────────── */
  .calc__big{font-size:52px}
  .calc__mid{font-size:30px}
  .calc__meta{gap:8px}
  .calc__meta dd{font-size:16px}
  .calc__out .btn{align-self:stretch}
  /* the result follows the eight questions, where the last answer is given */
  .split:has(>div>.rr)>div{display:contents}
  .split:has(>div>.rr) .rqs{order:1}
  .split:has(>div>.rr) .rr{order:2;margin-block-start:var(--s-2)}
  .rq{gap:10px 12px;padding:16px}
  .rq__a{gap:8px}
  .rq__a label{flex:1 1 0}
  .rq__a span{inline-size:100%}

  /* ── contact: wider form, roomy fields for the on-screen keyboard ── */
  .form{padding:20px 16px}
  .ptab{padding:8px 6px;font-size:13.5px}
  .field input,.field textarea,.field select{font-size:16px}
  .rnav .btn{min-inline-size:96px}
  .cdetails li{min-block-size:var(--tap)}

  /* ── about: floor plan and Oman map legible on a phone ─────────── */
  .fp__svg{inline-size:calc(100% + 24px);max-inline-size:none;margin-inline:-12px}
  .fp__zone text{font-size:19px}
  .fp__list li{padding:12px 14px}
  .om svg{max-inline-size:none}
  .om__lbl,.lang-ar .om__lbl{font-size:18px}
  .om__hqlbl{font-size:20px}
  .vz__logo{inline-size:170px}

  /* ── careers band and calls to action ──────────────────────────── */
  .band .btn{align-self:stretch}
  .cta-row{gap:22px}

  /* ── glossary and FAQ ──────────────────────────────────────────── */
  .gl dt{flex-wrap:wrap;gap:4px 12px}
  .faq summary{line-height:1.4}

  /* ── footer: stacked, and clear of the dock at the end of the page ── */
  .ftr{padding-block:36px 24px}
  .ftr__in,.ftr__legal{padding-inline-end:var(--dock-room)}
  .ftr__in{gap:var(--s-4) var(--s-5)}
  .ftr__vision{inline-size:96px}
  .ftr__legal{flex-direction:column;gap:6px;margin-block-start:20px}

  /* ── 404 ───────────────────────────────────────────────────────── */
  .nf{padding:24px 16px;gap:16px}
  .nf h1{font-size:28px;line-height:1.2}
  .nf p:has(>.btn){display:grid;gap:10px}
}