/* Self-hosted from Google Fonts (SIL Open Font License). */
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/amiri-normal-400-arabic.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;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/amiri-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/amiri-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/amiri-normal-700-arabic.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;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/amiri-normal-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/amiri-normal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Aref Ruqaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/aref-ruqaa-normal-700-arabic.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;
}
@font-face {
  font-family: "Aref Ruqaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/aref-ruqaa-normal-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Aref Ruqaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/aref-ruqaa-normal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-bengali-normal-400-bengali.woff2") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-bengali-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-bengali-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-bengali-normal-400-bengali.woff2") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-bengali-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-bengali-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-400-vietnamese.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;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-400-vietnamese.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;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-normal-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-normal-400-vietnamese.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;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-normal-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-normal-400-vietnamese.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;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/red-hat-text-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/red-hat-text-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/red-hat-text-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/red-hat-text-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/red-hat-text-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/red-hat-text-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/red-hat-text-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/red-hat-text-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

      /* ---------- Tokens ---------- */
      :root {
        /* AYAH Visual Identity Guidelines v1.0
     Deep Umber #483321 (typography) · Antique Bronze #7C5F40 (emblem, framing)
     Vintage Gold #B08D63 (accents, secondary frames) · Natural Parchment #F3ECE1 (canvas) */
        --umber: #483321;
        --bronze: #7c5f40;
        --vgold: #b08d63;
        --parchment: #f3ece1;
        --bg: var(--parchment);
        --bg-alt: #eae1d2;
        --card: #fbf7f0;
        --ink: var(--umber);
        --muted: #6b5640;
        --head: var(--umber);
        --accent: var(--bronze);
        --gold: var(--vgold);
        --gold-ink: var(--bronze);
        --line: #ddd0bc;
        --field: #9a8770;
        --btn: var(--umber);
        --btn-hover: #35251a;
        --btn-ink: var(--parchment);
        --chip: #eadfcc;
        --chip-ink: #5a4129;
        --bg-light: #f8f3eb;
        --bg-deep: #e6dbc9;
        --err: #8a2a12;
        --gold-btn: var(--vgold);
        --callig: rgba(72, 51, 33, 0.07);
        --callig-hi: rgba(176, 141, 99, 0.45);
        --callig-lo: rgba(176, 141, 99, 0.12);
        --callig-blur: 0.4px;
        --band: var(--umber);
        --footer: #2b1f14;
        --shadow: rgba(72, 51, 33, 0.16);
        --lg-l: 1;
        --lg-d: 0;
        color-scheme: light;
      }
      [data-theme="dark"] {
        --callig-blur: 0px;
        --bg: #1c150e;
        --bg-alt: #241b12;
        --bg-light: #2a2016;
        --bg-deep: #140f0a;
        --card: #2e2318;
        --ink: var(--parchment);
        --muted: #cdbda6;
        --head: var(--parchment);
        --accent: #cdae85;
        --gold: var(--vgold);
        --gold-ink: #d9bf97;
        --line: #463626;
        --field: #8e7a62;
        --btn: var(--vgold);
        --btn-hover: #c3a27a;
        --btn-ink: #241a10;
        --chip: #3a2c1e;
        --chip-ink: #e8d5b6;
        --err: #f4b8a4;
        --gold-btn: var(--vgold);
        --callig: rgba(176, 141, 99, 0.065);
        --callig-hi: rgba(217, 191, 151, 0.34);
        --callig-lo: rgba(217, 191, 151, 0.08);
        --band: #2a2016;
        --footer: #150f0a;
        --shadow: rgba(0, 0, 0, 0.5);
        --lg-l: 0;
        --lg-d: 1;
        color-scheme: dark;
      }

      /* ---------- Base ---------- */
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family:
          "Red Hat Text",
          system-ui,
          -apple-system,
          sans-serif;
        -webkit-font-smoothing: antialiased;
        transition:
          background-color 0.3s,
          color 0.3s;
      }
      a {
        color: var(--accent);
      }
      a:hover {
        color: var(--head);
      }
      img,
      svg {
        display: block;
      }
      .wrap {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
      }
      .ar {
        font-family: "Amiri", serif;
        direction: rtl;
      }
      .bn {
        font-family: "Noto Sans Bengali", sans-serif;
      }
      .eyebrow {
        font-size: 13px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--gold-ink);
        margin: 0;
      }
      .skip {
        position: absolute;
        left: -9999px;
        top: 8px;
        z-index: 99;
        background: var(--btn);
        color: var(--btn-ink);
        padding: 10px 16px;
      }
      .skip:focus {
        left: 16px;
      }
      :focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 3px;
      }
      [hidden] {
        display: none !important;
      }
      /* ---------- Squircle (Apple-style continuous corners) ---------- */
      .sq {
        --r: 20px;
        position: relative;
        border-radius: var(--r);
      }
      @supports (corner-shape: squircle) {
        .sq {
          corner-shape: squircle;
          border-radius: calc(var(--r) * 1.7);
        }
      }
      /* JS fallback for browsers without corner-shape: clip to a smoothed path, draw border as SVG stroke */
      .no-cs .sq.sq-ready {
        border-radius: 0;
        border-color: transparent !important;
      }
      .sq-stroke {
        position: absolute;
        pointer-events: none;
        overflow: visible;
        left: calc(var(--bw, 1px) * -1);
        top: calc(var(--bw, 1px) * -1);
        width: calc(100% + var(--bw, 1px) * 2);
        height: calc(100% + var(--bw, 1px) * 2);
      }
      .sq-stroke path {
        fill: none;
        stroke: var(--sq-line, var(--line));
        stroke-width: calc(var(--bw, 1px) * 2);
        transition: stroke 0.2s;
      }
      .lift {
        filter: drop-shadow(0 22px 34px var(--shadow));
      }

      /* ---------- Buttons ---------- */
      .btn {
        --r: 15px;
        --bw: 1.5px;
        --sq-line: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 52px;
        padding: 0 24px;
        font:
          600 16px/1 "Red Hat Text",
          sans-serif;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--head);
        transition:
          background-color 0.2s,
          color 0.2s,
          border-color 0.2s,
          transform 0.15s ease;
      }
      .btn svg {
        flex-shrink: 0;
        transition: transform 0.2s;
      }
      .btn:hover svg.arrow {
        transform: translateX(3px);
      }
      .btn.back:hover svg {
        transform: translateX(-3px);
      }
      .btn:active {
        transform: scale(0.975);
      }
      .btn.pri {
        background: var(--btn);
        color: var(--btn-ink);
      }
      .btn.pri:hover {
        background: var(--btn-hover);
        color: var(--btn-ink);
      }
      .btn.ghost {
        --sq-line: var(--btn);
        border-color: var(--btn);
        color: var(--head);
      }
      [data-theme="dark"] .btn.ghost {
        color: var(--accent);
      }
      .btn.ghost:hover {
        background: var(--bg-alt);
        color: var(--head);
      }
      .btn.gold {
        background: var(--gold-btn);
        color: #1a1405;
      }
      .btn.gold:hover {
        background: #c3a27a;
        color: #1a1405;
      }
      .icon-btn {
        --r: 12px;
        --sq-line: var(--line);
        width: 44px;
        height: 44px;
        display: inline-grid;
        place-items: center;
        flex-shrink: 0;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--ink);
        cursor: pointer;
        transition:
          border-color 0.2s,
          color 0.2s,
          background-color 0.2s;
      }
      .icon-btn:hover {
        --sq-line: var(--accent);
        border-color: var(--accent);
        color: var(--accent);
      }

      /* ---------- Header ---------- */
      .hdr {
        position: sticky;
        top: 0;
        z-index: 20;
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: saturate(1.4) blur(14px);
        -webkit-backdrop-filter: saturate(1.4) blur(14px);
        border-bottom: 1px solid var(--line);
      }
      .hdr-in {
        display: flex;
        align-items: center;
        gap: 24px;
        min-height: 80px;
        flex-wrap: wrap;
      }
      .brand {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        text-decoration: none;
      }
      .logo {
        height: 56px;
        width: auto;
      }
      .logo-mark {
        display: none;
        height: 44px;
        width: auto;
      }
      /* Theme-aware logo: full lockup from the supplied logo pack. White variant on dark. */
      .logo-dark {
        display: none;
      }
      .logo-white {
        --logo-word: #fff;
        --logo-rule: #fff;
        --logo-mark: #fff;
      }
      .logo-mark.logo-dark {
        display: none;
      }
      .logo-big.logo-dark {
        display: none;
      }
      [data-theme="dark"] .logo.logo-light {
        display: none;
      }
      [data-theme="dark"] .logo.logo-dark {
        display: block;
      }
      [data-theme="dark"] .logo-mark.logo-light {
        display: none;
      }
      [data-theme="dark"] .logo-big.logo-light {
        display: none;
      }
      [data-theme="dark"] .logo-big.logo-dark {
        display: block;
      }
      :root:not([data-theme="dark"]) .logo-mark.logo-dark {
        display: none;
      }
      @media (max-width: 900px) {
        [data-theme="dark"] .logo.logo-dark {
          display: none;
        }
        [data-theme="dark"] .logo-mark.logo-dark {
          display: block;
        }
      }
      .nav {
        display: flex;
        gap: 2px;
        align-items: center;
        margin-left: auto;
        flex-wrap: wrap;
      }
      .nav a {
        --r: 10px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 44px;
        padding: 0 12px;
        text-decoration: none;
        color: var(--ink);
        font-weight: 500;
        font-size: 15px;
        transition:
          background-color 0.2s,
          color 0.2s;
      }
      .nav a:hover {
        background: var(--bg-alt);
        color: var(--head);
      }
      .nav a.on {
        color: var(--head);
        font-weight: 700;
      }
      .soon {
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--chip-ink);
        background: var(--chip);
        padding: 8px 12px;
        border-radius: 99px;
        line-height: 1;
      }
      .tools {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      /* Language dropdown */
      .lang {
        position: relative;
      }
      .lang-btn {
        --r: 12px;
        --sq-line: var(--line);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 12px;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--ink);
        font:
          600 14px/1 "Red Hat Text",
          sans-serif;
        cursor: pointer;
        transition:
          border-color 0.2s,
          color 0.2s,
          background-color 0.2s;
      }
      .lang-btn:hover,
      .lang-btn[aria-expanded="true"] {
        --sq-line: var(--accent);
        border-color: var(--accent);
        color: var(--accent);
      }
      .lang-btn .cur.bn {
        font-family: "Noto Sans Bengali", sans-serif;
        font-weight: 500;
      }
      .lang-btn .cur.ar {
        font-family: "Amiri", serif;
        font-size: 16px;
        font-weight: 700;
      }
      .lang-btn .chev {
        transition: transform 0.2s;
      }
      .lang-btn[aria-expanded="true"] .chev {
        transform: rotate(180deg);
      }
      .lang-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 30;
        filter: drop-shadow(0 18px 30px var(--shadow));
        transform-origin: top right;
        animation: ddIn 0.16s ease-out both;
      }
      @keyframes ddIn {
        from {
          opacity: 0;
          transform: translateY(-4px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .lang-list {
        --r: 16px;
        list-style: none;
        margin: 0;
        padding: 6px;
        min-width: 184px;
        background: var(--card);
        border: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .lang-opt {
        --r: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        height: 44px;
        padding: 0 12px;
        border: 0;
        background: transparent;
        color: var(--ink);
        font:
          500 15px/1 "Red Hat Text",
          sans-serif;
        text-align: left;
        cursor: pointer;
        transition:
          background-color 0.15s,
          color 0.15s;
      }
      .lang-opt:hover,
      .lang-opt:focus-visible {
        background: var(--bg-alt);
        color: var(--head);
        outline: none;
      }
      .lang-opt .nm.bn {
        font-family: "Noto Sans Bengali", sans-serif;
      }
      .lang-opt .nm.ar {
        font-family: "Amiri", serif;
        font-size: 18px;
      }
      .lang-opt .tick {
        color: var(--accent);
        opacity: 0;
      }
      .lang-opt[aria-checked="true"] {
        color: var(--head);
        font-weight: 700;
      }
      .lang-opt[aria-checked="true"] .tick {
        opacity: 1;
      }
      @media (prefers-reduced-motion: reduce) {
        .lang-menu {
          animation: none;
        }
      }
      .menu-btn {
        display: none;
      }
      .notice {
        background: var(--chip);
        color: var(--chip-ink);
        font-size: 14px;
        text-align: center;
        padding: 10px 16px;
      }
      .notice[hidden] {
        display: none;
      }

      /* ---------- Site-wide moving calligraphy (fixed behind every page) ---------- */
      .bg-callig {
        position: fixed;
        inset: -30% -30%;
        z-index: -1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        pointer-events: none;
        user-select: none;
        transform: rotate(-7deg) translate3d(var(--px, 0px), var(--py, 0px), 0);
        -webkit-mask-image: radial-gradient(
          ellipse 60% 55% at 50% 50%,
          #000 30%,
          rgba(0, 0, 0, 0.35) 75%,
          transparent 100%
        );
        mask-image: radial-gradient(
          ellipse 60% 55% at 50% 50%,
          #000 30%,
          rgba(0, 0, 0, 0.35) 75%,
          transparent 100%
        );
        filter: blur(var(--callig-blur, 0px));
        animation: breathe 14s ease-in-out infinite alternate;
      }
      .c-row {
        display: flex;
        overflow: visible;
        white-space: nowrap;
      }
      .c-track {
        display: flex;
        flex-shrink: 0;
        width: max-content;
        animation: drift var(--dur, 140s) linear infinite;
        will-change: transform;
      }
      .c-row.rev .c-track {
        animation-direction: reverse;
      }
      .c-track span {
        direction: rtl;
        padding: 0 0.4em;
        font-family: "Aref Ruqaa", serif;
        font-weight: 700;
        font-size: var(--fs, clamp(84px, 9.5vw, 168px));
        line-height: 1.28;
        color: var(--callig);
      }
      /* Shine: the base text is dim. A narrow soft window slides across it and a
         bright copy of the text slides the other way inside the window, so the
         bright text stays still while the window moves. Both are transforms, so
         the browser animates them without repainting the text. */
      .c-row.shine .c-track span {
        position: relative;
        color: var(--callig-lo);
      }
      .sh-win {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 60%;
        overflow: hidden;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent,
          #000 50%,
          transparent
        );
        mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
        animation: shineWin 11s ease-in-out infinite;
      }
      .sh-in {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 166.667%;
        white-space: nowrap;
        font-weight: inherit;
        padding: inherit;
        color: var(--callig-hi);
        animation: shineIn 11s ease-in-out infinite;
      }
      .c-row:nth-child(1) {
        --dur: 150s;
      }
      .c-row:nth-child(2) {
        --dur: 190s;
      }
      .c-row:nth-child(3) {
        --dur: 135s;
      }
      .c-row:nth-child(4) {
        --dur: 210s;
      }
      .c-row:nth-child(5) {
        --dur: 160s;
      }
      .c-row:nth-child(6) {
        --dur: 180s;
      }
      .c-row:nth-child(7) {
        --dur: 145s;
      }
      .c-row:nth-child(2) .sh-win,
      .c-row:nth-child(2) .sh-in {
        animation-delay: -4s;
      }
      .c-row:nth-child(5) .sh-win,
      .c-row:nth-child(5) .sh-in {
        animation-delay: -7s;
      }
      @keyframes drift {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(-50%, 0, 0);
        }
      }
      @keyframes shineWin {
        0% {
          transform: translateX(-100%);
        }
        55%,
        100% {
          transform: translateX(166.667%);
        }
      }
      @keyframes shineIn {
        0% {
          transform: translateX(60%);
        }
        55%,
        100% {
          transform: translateX(-100%);
        }
      }
      /* Pause what the visitor cannot see (set by an IntersectionObserver). */
      .c-row.is-offscreen .c-track,
      .c-row.is-offscreen .sh-win,
      .c-row.is-offscreen .sh-in,
      .emblem.is-offscreen .gm,
      .emblem.is-offscreen .gm * {
        animation-play-state: paused;
      }
      @keyframes breathe {
        from {
          opacity: 0.8;
        }
        to {
          opacity: 1;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .c-track,
        .bg-callig {
          animation: none !important;
        }
        .sh-win {
          display: none;
        }
        .bg-callig {
          transform: rotate(-7deg);
        }
        html {
          scroll-behavior: auto;
        }
      }

      /* ---------- Hero ---------- */
      .hero {
        border-bottom: 1px solid var(--line);
      }
      .hero-in {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
        gap: 64px;
        align-items: center;
        padding-top: 88px;
        padding-bottom: 96px;
      }
      .hero h1 {
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: clamp(40px, 5vw, 68px);
        line-height: 1.06;
        letter-spacing: -0.015em;
        color: var(--head);
        margin: 20px 0 22px;
      }
      .hero h1 em {
        font-style: normal;
        color: var(--accent);
      }
      .ctas {
        gap: 16px;
      }
      .ctas .btn {
        height: 56px;
        padding: 0 28px;
        letter-spacing: 0.01em;
      }
      .ctas .btn.pri {
        box-shadow: 0 10px 24px -12px var(--shadow);
      }
      .ctas .btn.pri:hover {
        transform: translateY(-2px);
      }
      .ctas .btn.pri {
        padding-inline-end: 10px;
      }
      .ctas .btn.pri svg.arrow {
        width: 30px;
        height: 30px;
        padding: 6px;
        border-radius: 50%;
        background: var(--btn-ink);
        color: var(--btn);
      }
      .ctas .btn.ghost {
        border-width: 1.5px;
        padding: 0 30px;
      }
      .ctas .btn.ghost:hover {
        transform: translateY(-2px);
      }
      .lede {
        font-size: 19px;
        line-height: 1.6;
        color: var(--muted);
        max-width: 580px;
        margin: 0 0 36px;
      }
      .ctas {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }
      .ayah-card {
        --r: 24px;
        background: var(--card);
        border: 1px solid var(--line);
        padding: 36px 34px 30px;
        margin: 0;
      }
      .ayah-card .ar {
        font-size: 30px;
        line-height: 2;
        color: var(--head);
        text-align: center;
        margin: 8px 0 18px;
      }
      .ayah-card .tr {
        font-family: "Playfair Display", serif;
        font-style: italic;
        font-size: 17px;
        line-height: 1.6;
        color: var(--ink);
        text-align: center;
        margin: 0 0 18px;
      }
      .ref {
        display: block;
        text-align: center;
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--gold-ink);
      }
      .orn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .orn i {
        display: block;
        height: 2px;
        width: 72px;
        background: var(--gold);
        border-radius: 2px;
      }
      .orn b {
        display: block;
        width: 9px;
        height: 9px;
        background: var(--gold);
        transform: rotate(45deg);
      }

      /* ---------- Sections ---------- */
      .sec {
        padding: 88px 0;
      }
      #missions {
        scroll-margin-top: 72px;
      }
      .sec.alt {
        background: color-mix(in srgb, var(--bg-alt) 72%, transparent);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
      }
      /* Surface system: sections alternate deep / soft.
   Deep sections hold open (transparent) content; soft sections hold white cards. */
      .sec.soft {
        background: color-mix(in srgb, var(--bg-light) 55%, transparent);
      }
      .sec.deep {
        background: color-mix(in srgb, var(--bg-deep) 68%, transparent);
      }
      :root:not([data-theme="dark"]) .sec.deep {
        --muted: #5e4a36;
        --gold-ink: #6e5236;
        --accent: #6e5236;
        --line: #d6c7af;
      }
      .sec.deep .card {
        --r: 0px;
        --sq-line: transparent;
        background: transparent;
        border: 0;
        border-top: 1.5px solid var(--gold);
        border-radius: 0;
        padding: 26px 0 0;
        box-shadow: none;
      }
      .sec.deep .card:hover {
        transform: none;
      }
      .sec-head {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 44px;
        max-width: 720px;
      }
      .sec h2 {
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: clamp(30px, 3.4vw, 46px);
        line-height: 1.12;
        color: var(--head);
        margin: 0;
      }
      .sec-head p {
        font-size: 18px;
        line-height: 1.6;
        color: var(--muted);
        margin: 0;
      }
      .card {
        --r: 22px;
        background: var(--card);
        border: 1px solid var(--line);
      }
      .vm {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
      }
      .vm .card {
        padding: 40px;
      }
      /* FIX 5: title and its Arabic on one baseline-aligned row */
      .vm-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
      }
      .vm h3 {
        margin: 0;
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: 28px;
        color: var(--head);
      }
      .vm .ar {
        font-size: 20px;
        color: var(--gold-ink);
        margin: 0;
      }
      .vm p.body {
        font-size: 18px;
        line-height: 1.7;
        margin: 0;
      }
      .motto {
        margin-top: 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        border-top: 1px solid var(--line);
        padding-top: 28px;
      }
      .motto q {
        font-family: "Playfair Display", serif;
        font-style: italic;
        font-size: 26px;
        color: var(--head);
      }
      .missions {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
      }
      .m-card {
        --r: 20px;
        padding: 28px 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: transform 0.25s ease;
      }
      .m-card:hover {
        transform: translateY(-4px);
      }
      .m-num {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
      .m-num span {
        font-family: "Playfair Display", serif;
        font-size: 40px;
        color: var(--gold-ink);
        line-height: 1;
      }
      .m-card h3 {
        margin: 0;
        font-size: 19px;
        font-weight: 700;
        color: var(--head);
      }
      .m-card p {
        margin: 0;
        font-size: 15.5px;
        line-height: 1.6;
        color: var(--muted);
      }
      .domains {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line);
      }
      .d-cell {
        padding: 32px 28px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: color-mix(in srgb, var(--card) 30%, transparent);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: background-color 0.2s;
      }
      .d-cell:hover {
        background: color-mix(in srgb, var(--card) 55%, transparent);
      }
      .d-cell h3 {
        margin: 0;
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: 22px;
        line-height: 1.25;
        color: var(--head);
      }
      .d-cell p {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--muted);
      }
      .upcoming {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
      }
      .u-card {
        --r: 22px;
        --sq-line: var(--gold);
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 28px;
        border: 1px dashed var(--gold);
        background: var(--card);
        text-decoration: none;
        color: var(--ink);
        transition: transform 0.25s ease;
      }
      .u-card:hover {
        transform: translateY(-4px);
        color: var(--ink);
      }
      .u-ico {
        --r: 14px;
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        background: var(--chip);
        color: var(--chip-ink);
      }
      .u-card h3 {
        margin: 0;
        font-size: 19px;
        color: var(--head);
        font-weight: 700;
      }
      .u-card p {
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
        color: var(--muted);
      }
      .u-card .soon {
        align-self: flex-start;
      }
      .band {
        background: color-mix(in srgb, var(--band) 95%, transparent);
        color: #f7f0e4;
      }
      .band-in {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 48px;
        align-items: center;
        padding-top: 100px;
        padding-bottom: 100px;
      }
      .band h2 {
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: clamp(30px, 3.6vw, 48px);
        line-height: 1.12;
        margin: 14px 0 16px;
        color: #fbf7ef;
      }
      .band p {
        font-size: 18px;
        line-height: 1.6;
        color: #eadfd0;
        margin: 0 0 28px;
      }
      .band .eyebrow {
        color: #d9bf97;
      }
      .contact-list {
        --r: 22px;
        --sq-line: rgba(247, 240, 228, 0.18);
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: rgba(20, 12, 6, 0.38);
        border: 1px solid rgba(247, 240, 228, 0.18);
        padding: 28px;
      }
      .c-row2 {
        display: flex;
        gap: 14px;
        align-items: center;
        font-size: 16px;
        color: #f7f0e4;
        text-decoration: none;
      }
      a.c-row2:hover {
        color: #ffffff;
      }
      .c-row2 svg {
        flex-shrink: 0;
        color: var(--vgold);
      }
      .i-row a {
        color: var(--ink);
        text-decoration: none;
      }
      .i-row a:hover {
        color: var(--accent);
      }
      .address-text {
        display: block;
        line-height: 1.5;
      }
      .i-row a.map-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 9px;
        color: var(--accent);
        font-size: 14px;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      /* ---------- Page heads (Contact) ---------- */
      .phead {
        border-bottom: 1px solid var(--line);
      }
      .phead-in {
        padding-top: 72px;
        padding-bottom: 72px;
      }
      .phead h1 {
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: clamp(40px, 5vw, 64px);
        line-height: 1.08;
        color: var(--head);
        margin: 16px 0 20px;
        max-width: 820px;
      }
      .crumb {
        font-size: 14px;
        color: var(--muted);
        margin: 0 0 18px;
      }
      .placeholder {
        --r: 20px;
        --sq-line: var(--gold);
        border: 1.5px dashed var(--gold);
        --bw: 1.5px;
        padding: 32px;
        background: var(--card);
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .placeholder strong {
        color: var(--gold-ink);
        font-size: 13px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .placeholder p {
        margin: 0;
        font-size: 17px;
        line-height: 1.7;
        color: var(--muted);
      }
      .mono {
        --r: 18px;
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        background: var(--chip);
        color: var(--chip-ink);
      }

      /* ---------- Coming soon ---------- */
      .soon-hero {
        padding-top: 72px;
        padding-bottom: 72px;
      }
      .soon-band {
        min-height: 100vh;
        display: flex;
        align-items: center;
      }
      .soon-band > .wrap {
        width: 100%;
      }
      .cs-panel {
        --r: 24px;
        max-width: 880px;
        margin: 0 auto;
        padding: 72px 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        text-align: center;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--r);
      }
      .cs-panel .eyebrow {
        margin: 0;
      }
      .cs-panel h2 {
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: clamp(48px, 7vw, 88px);
        line-height: 1.04;
        letter-spacing: -0.015em;
        color: var(--head);
        margin: 0;
      }
      .soon-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 64px;
        align-items: center;
      }
      .soon-hero h1 {
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: clamp(42px, 5.4vw, 72px);
        line-height: 1.04;
        letter-spacing: -0.015em;
        color: var(--head);
        margin: 18px 0 18px;
      }
      .soon-hero .lede {
        margin: 0 0 30px;
        max-width: 560px;
      }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--chip-ink);
        background: var(--chip);
        padding: 8px 14px;
        border-radius: 99px;
      }
      .pill .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        animation: pulse 1.8s ease-in-out infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
        }
        50% {
          box-shadow: 0 0 0 7px transparent;
        }
      }
      .emblem {
        position: relative;
        aspect-ratio: 1;
        width: min(100%, 400px);
        margin: 0 auto;
        display: grid;
        place-items: center;
      }
      .emblem .gm {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        animation: gmBreath 7s ease-in-out infinite alternate;
      }
      @keyframes gmBreath {
        from {
          transform: scale(0.99);
        }
        to {
          transform: scale(1.015);
        }
      }
      /* an Islamic geometric rosette is constructed line by line around the logo: a ring, then two interlocking eight-pointed stars (khatam) that form a sixteen-point star, then the fill and the jewel points */
      .emblem .ln {
        fill: none;
        stroke-linejoin: round;
        stroke-linecap: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        opacity: 0;
        animation: gmDraw 12s cubic-bezier(0.45, 0.05, 0.25, 1) infinite both;
        animation-delay: calc(var(--d, 0) * 1s);
      }
      .emblem .ln.ring {
        stroke: var(--gold);
        stroke-width: 1;
        opacity: 0.6;
      }
      .emblem .ln.sa {
        stroke: var(--gold);
        stroke-width: 1.7;
      }
      .emblem .ln.sb {
        stroke: var(--accent);
        stroke-width: 1.4;
      }
      .emblem .fl {
        opacity: 0;
        animation: gmFill 12s ease-in-out infinite both;
        animation-delay: calc(var(--d, 0) * 1s);
      }
      .emblem .fl.sa {
        fill: color-mix(in srgb, var(--gold) 13%, transparent);
      }
      .emblem .fl.sb {
        fill: color-mix(in srgb, var(--accent) 9%, transparent);
      }
      .emblem .dt {
        fill: var(--gold);
        transform-box: fill-box;
        transform-origin: 50% 50%;
        opacity: 0;
        transform: scale(0);
        animation: gmPop 12s ease-out infinite both;
        animation-delay: calc(var(--d, 0) * 1s);
      }
      @keyframes gmDraw {
        0% {
          stroke-dashoffset: 1;
          opacity: 1;
        }
        24% {
          stroke-dashoffset: 0;
          opacity: 1;
        }
        80% {
          stroke-dashoffset: 0;
          opacity: 1;
        }
        94%,
        100% {
          stroke-dashoffset: 0;
          opacity: 0;
        }
      }
      @keyframes gmFill {
        0%,
        26% {
          opacity: 0;
        }
        40% {
          opacity: 1;
        }
        80% {
          opacity: 1;
        }
        94%,
        100% {
          opacity: 0;
        }
      }
      @keyframes gmPop {
        0%,
        28% {
          opacity: 0;
          transform: scale(0);
        }
        34% {
          opacity: 1;
          transform: scale(1.7);
        }
        40% {
          opacity: 1;
          transform: scale(1);
        }
        80% {
          opacity: 1;
          transform: scale(1);
        }
        94%,
        100% {
          opacity: 0;
          transform: scale(0);
        }
      }
      .emblem .logo-big {
        position: relative;
        width: 46%;
        height: auto;
      }
      .notify {
        --r: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 28px;
        flex-wrap: wrap;
        padding: 36px 40px;
      }
      .notify h2 {
        font-size: clamp(26px, 2.6vw, 34px);
      }
      .notify p {
        margin: 8px 0 0;
        color: var(--muted);
        font-size: 17px;
      }
      .notify .ctas {
        flex-shrink: 0;
      }
      @media (prefers-reduced-motion: reduce) {
        .pill .dot,
        .emblem .gm {
          animation: none;
        }
        .emblem .ln {
          animation: none;
          stroke-dashoffset: 0;
          opacity: 1;
        }
        .emblem .ln.ring {
          opacity: 0.6;
        }
        .emblem .fl {
          animation: none;
          opacity: 1;
        }
        .emblem .dt {
          animation: none;
          opacity: 1;
          transform: none;
        }
      }

      /* ---------- Courses ---------- */
      .courses {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
      }
      .course-card {
        --r: 22px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--card);
        border: 1px solid var(--line);
        text-decoration: none;
        color: var(--ink);
        transition: transform 0.25s ease;
      }
      a.course-card:hover {
        transform: translateY(-4px);
        color: var(--ink);
      }
      .course-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        border-bottom: 1px solid var(--line);
      }
      .course-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 24px 26px 26px;
      }
      .course-body h3 {
        margin: 0;
        font-size: 20px;
        line-height: 1.35;
        font-weight: 700;
        color: var(--head);
      }
      .course-body p {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--muted);
      }
      .course-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .cd-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 64px;
        align-items: start;
      }
      .cd-poster {
        --r: 24px;
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        background: var(--card);
      }
      .cd-poster img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
      }
      .cd-info h1 {
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: clamp(34px, 4.2vw, 56px);
        line-height: 1.1;
        color: var(--head);
        margin: 16px 0 18px;
        text-wrap: balance;
      }
      .cd-info .lede {
        margin-bottom: 28px;
      }
      .cd-facts {
        --r: 22px;
        margin: 0 0 28px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--card);
        border: 1px solid var(--line);
      }
      .cd-facts div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 18px 24px;
        border-bottom: 1px solid var(--line);
      }
      .cd-facts div:last-child {
        border-bottom: 0;
      }
      .cd-facts dt {
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--muted);
      }
      .cd-facts dd {
        text-wrap: balance;
        margin: 0;
        font-size: 17px;
        line-height: 1.5;
        color: var(--head);
      }
      .cd-notify {
        padding: 56px 0;
      }
      .cd-notify .notify {
        justify-content: center;
        text-align: center;
      }

      /* ---------- Contact ---------- */
      .cbody {
        display: grid;
        justify-items: center;
        padding-top: 64px;
        padding-bottom: 88px;
      }
      .cbody .side {
        width: 100%;
      }
      .side h2 {
        font-family: "Playfair Display", serif;
        font-weight: 500;
        font-size: 28px;
        color: var(--head);
        margin: 0;
      }
      .side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px 64px;
        align-items: start;
      }
      .side-col {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .info {
        --r: 22px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .i-row {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 20px 24px;
        border-bottom: 1px solid var(--line);
      }
      .i-row:last-child {
        border-bottom: 0;
      }
      .i-row svg {
        flex-shrink: 0;
        color: var(--gold-ink);
        margin-top: 2px;
      }
      .i-row small {
        display: block;
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--muted);
        margin-bottom: 4px;
      }
      .phone-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }
      .pa-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 40px;
        padding: 0 16px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--card);
        color: var(--ink);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
      }
      .i-row a.pa-btn {
        color: var(--ink);
      }
      .pa-btn:hover,
      .i-row a.pa-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .pa-btn.call,
      .i-row a.pa-btn.call {
        background: var(--btn);
        border-color: var(--btn);
        color: var(--btn-ink);
      }
      .pa-btn.call:hover,
      .i-row a.pa-btn.call:hover {
        color: var(--btn-ink);
        opacity: 0.9;
      }
      .i-row .pa-btn svg {
        color: currentColor;
        margin-top: 0;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
      .cd-about,
      .cd-facts {
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 20px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: color-mix(in srgb, var(--card) 55%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        backdrop-filter: blur(14px) saturate(1.2);
        box-shadow: 0 12px 32px -18px var(--shadow);
      }
      .cd-about {
        padding: 18px 24px;
      }
      .cd-about p {
        font-size: 17px;
        line-height: 1.6;
        color: var(--ink);
        margin: 0 0 14px;
      }
      .cd-about p:last-child {
        margin-bottom: 0;
        color: var(--muted);
        font-weight: 600;
      }
      .cd-about .cd-lead {
        font-family: "Playfair Display", serif;
        font-size: clamp(22px, 2.4vw, 28px);
        line-height: 1.35;
        font-weight: 500;
        color: var(--head);
        margin-bottom: 16px;
      }
      .cd-about p:last-of-type {
        margin-bottom: 0;
        color: var(--ink);
        font-weight: 400;
      }
      .cd-chips {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 20px 0 0;
        padding: 18px 0 0;
        border-top: 1px solid var(--line);
      }
      .cd-chips li {
        font-size: 14px;
        font-weight: 600;
        color: var(--chip-ink);
        background: var(--chip);
        padding: 7px 14px;
        border-radius: 99px;
      }
      .cd-follow {
        flex: 0 0 100%;
        margin: 0;
        color: var(--muted);
      }
      .socials {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .socials .btn {
        justify-content: flex-start;
      }
      .socials .btn {
        height: 44px;
        padding: 0 16px 0 13px;
        gap: 8px;
        font-size: 15px;
        font-weight: 500;
        --r: 12px;
        --bw: 1px;
        --sq-line: var(--line);
        border: 1px solid var(--line);
        background: var(--card);
        color: var(--ink);
      }
      .socials .btn svg {
        color: var(--head);
      }
      .socials .btn:hover {
        --sq-line: var(--accent);
        border-color: var(--accent);
        color: var(--accent);
      }
      .socials .btn:hover svg {
        color: var(--accent);
      }
      .note {
        --r: 16px;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--muted);
        background: color-mix(in srgb, var(--bg-alt) 80%, transparent);
        padding: 16px 18px;
        margin: 0;
      }

      /* ---------- Footer ---------- */
      .ftr {
        --lg-l: 0;
        --lg-d: 1;
        background: var(--footer);
        color: #d9ccb8;
        border-top: 1px solid #4a3828;
      }
      .ftr-in {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 24px 64px;
        padding-top: 36px;
        padding-bottom: 22px;
      }
      .ftr-in > div {
        flex: 0 0 auto;
      }
      .ftr-in > div:first-child {
        flex: 1 1 380px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
      }
      .ftr-in > div:first-child .logo {
        grid-row: 1/4;
      }
      .ftr-in > div:first-child > p,
      .ftr-in > div:first-child > .f-social {
        grid-column: 2;
      }
      .ftr-in > div:first-child > p:not(.f-name) {
        margin: 0;
      }
      .ftr-in > div:first-child > .f-name {
        margin-top: 4px;
      }
      .ftr-in > div:first-child > .f-social {
        margin-top: 10px;
      }
      .ftr .logo {
        height: 46px;
      }
      .ftr h4 {
        margin: 0 0 10px;
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #c9aa80;
      }
      .ftr ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .ftr a {
        color: #f3ece1;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        gap: 8px;
        font-size: 14.5px;
      }
      .ftr a:hover {
        color: #d9bf97;
      }
      .ftr p {
        font-size: 14px;
        line-height: 1.6;
        margin: 12px 0 0;
        max-width: 340px;
      }
      .ftr .f-name {
        margin-top: 8px;
        font-family: "Playfair Display", serif;
        font-size: 17px;
        color: #c9aa80;
        transition: opacity 0.25s;
      }
      .ftr .f-name[lang="ar"] {
        font-family: "Amiri", serif;
        font-size: 20px;
        direction: rtl;
        text-align: left;
      }
      .ftr .f-name[lang="bn"] {
        font-family: "Noto Sans Bengali", sans-serif;
        font-size: 15px;
      }
      .ftr .f-name.swap {
        opacity: 0;
      }
      .ftr .soon {
        background: #3e2e1f;
        color: #e8d5b6;
      }
      .f-social {
        display: flex;
        gap: 8px;
        margin-top: 14px;
      }
      .f-social a {
        --r: 11px;
        --sq-line: #4a3828;
        width: 40px;
        height: 40px;
        justify-content: center;
        border: 1px solid #4a3828;
        transition:
          border-color 0.2s,
          color 0.2s;
      }
      .f-social a:hover {
        --sq-line: #d9bf97;
        border-color: #d9bf97;
        background: rgba(176, 141, 99, 0.12);
      }
      .ftr-base {
        border-top: 1px solid #4a3828;
        display: flex;
        justify-content: space-between;
        gap: 8px 16px;
        flex-wrap: wrap;
        padding-top: 14px;
        padding-bottom: 16px;
        font-size: 13px;
        color: #b3a28b;
      }

      /* ---------- Responsive ---------- */
      @media (max-width: 1100px) {
        .missions {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .domains {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .ftr-in {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 900px) {
        .wrap {
          padding: 0 20px;
        }
        .hdr-in {
          gap: 10px;
          min-height: 68px;
        }
        .logo {
          display: none;
        }
        .logo-mark {
          display: block;
        }
        .ftr .logo {
          display: block;
          height: 44px;
        }
        .menu-btn {
          display: inline-grid;
        }
        .nav {
          display: none;
          order: 5;
          width: 100%;
          flex-direction: column;
          align-items: stretch;
          padding: 6px 0 14px;
          margin: 0;
        }
        .nav.open {
          display: flex;
        }
        /* FIX 3: centered menu links */
        .nav a {
          height: 50px;
          font-size: 17px;
          justify-content: center;
        }
        .tools {
          margin-left: auto;
          gap: 6px;
        }
        .lang-btn {
          padding: 0 10px;
          gap: 6px;
        }
        .hero-in,
        .band-in,
        .vm {
          grid-template-columns: minmax(0, 1fr);
        }
        .cbody {
          padding-top: 48px;
          padding-bottom: 72px;
        }
        .cbody .side {
          width: min(100%, 560px);
          grid-template-columns: minmax(0, 1fr);
        }
        .hero-in {
          padding-top: 56px;
          padding-bottom: 72px;
          gap: 40px;
        }
        .lede {
          font-size: 17px;
        }
        .sec {
          padding: 72px 0;
        }
        .sec-head {
          margin-bottom: 36px;
        }
        .vm .card {
          padding: 26px;
        }
        /* FIX 4: centered motto + ornament */
        .motto {
          flex-direction: column;
          justify-content: center;
          text-align: center;
          gap: 16px;
        }
        .missions,
        .domains,
        .upcoming,
        .courses,
        .cd-grid {
          grid-template-columns: minmax(0, 1fr);
        }
        .cd-grid {
          gap: 36px;
        }
        .d-cell {
          min-height: 0;
        }
        .ayah-card {
          padding: 28px 22px;
        }
        .ayah-card .ar {
          font-size: 24px;
        }
        .ctas {
          flex-direction: column;
          align-items: stretch;
        }
        .ctas .btn,
        .band .btn {
          width: 100%;
        }
        .ftr-in {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 20px 40px;
          padding-top: 28px;
          padding-bottom: 18px;
        }
        .ftr-base {
          padding-top: 12px;
          padding-bottom: 14px;
        }
        .ftr-in > div:first-child {
          grid-column: 1/-1;
        }
        .c-track span {
          --fs: 78px;
        }
        .phead-in {
          padding-top: 64px;
          padding-bottom: 64px;
        }
        .soon-grid {
          grid-template-columns: minmax(0, 1fr);
          gap: 40px;
        }
        .soon-hero {
          padding-top: 56px;
          padding-bottom: 48px;
        }
        .emblem {
          width: min(78%, 300px);
          order: -1;
        }
        .notify {
          padding: 28px 24px;
        }
        .soon-hero .ctas {
          flex-direction: column-reverse;
        }
      }
      @media (max-width: 640px) {
        /* scale */
        .wrap {
          padding: 0 18px;
        }
        .hdr-in {
          min-height: 60px;
        }
        .logo-mark {
          height: 38px;
        }
        .icon-btn {
          width: 40px;
          height: 40px;
        }
        .lang-btn {
          height: 40px;
          justify-content: center;
        }
        .btn {
          height: 46px;
          padding: 0 20px;
          font-size: 15px;
        }
        .eyebrow {
          font-size: 11.5px;
          letter-spacing: 0.16em;
        }
        .lede {
          font-size: 16px;
          line-height: 1.55;
        }
        .sec {
          padding: 56px 0;
        }
        .sec h2 {
          font-size: 26px;
        }
        .sec-head {
          gap: 10px;
          margin-bottom: 28px;
        }
        .sec-head p {
          font-size: 15.5px;
        }
        .c-track span {
          --fs: 64px;
        }
        .hero-in {
          padding-top: 40px;
          padding-bottom: 56px;
          gap: 32px;
        }
        .hero h1 {
          font-size: 34px;
          margin: 14px 0 16px;
        }
        .ayah-card {
          padding: 22px 18px 20px;
        }
        .ayah-card .ar {
          font-size: 21px;
          margin: 6px 0 12px;
        }
        .ayah-card .tr {
          font-size: 15px;
          margin: 0 0 12px;
        }
        .orn i {
          width: 52px;
        }
        .vm {
          gap: 28px;
        }
        .vm .card {
          padding: 20px 0 0;
        }
        .vm h3 {
          font-size: 23px;
        }
        .vm .ar {
          font-size: 18px;
        }
        .vm p.body {
          font-size: 15.5px;
          line-height: 1.65;
        }
        .motto q {
          font-size: 20px;
        }
        .missions,
        .upcoming {
          gap: 14px;
        }
        .m-card {
          padding: 20px 18px;
          gap: 8px;
        }
        .m-num span {
          font-size: 30px;
        }
        .m-card h3,
        .u-card h3 {
          font-size: 17px;
        }
        .m-card p,
        .u-card p {
          font-size: 14.5px;
        }
        .d-cell {
          padding: 20px 18px;
          gap: 6px;
        }
        .d-cell h3 {
          font-size: 19px;
        }
        .d-cell p {
          font-size: 14px;
        }
        .u-card {
          padding: 20px 18px;
          gap: 10px;
        }
        .u-ico {
          width: 42px;
          height: 42px;
        }
        .course-body {
          padding: 20px 18px 22px;
        }
        .course-body h3 {
          font-size: 18px;
        }
        .cd-facts div {
          padding: 16px 18px;
        }
        .cd-info h1 {
          font-size: 32px;
        }
        .i-row[data-site-wrap="phone"] {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }
        .phone-actions {
          justify-content: center;
        }
        .phone-actions .pa-btn {
          flex: 1 1 140px;
        }
        .cd-info,
        .cd-about {
          text-align: center;
        }
        .cd-about {
          padding: 16px 18px;
        }
        .cd-follow {
          text-align: center;
        }
        .cd-chips {
          justify-content: center;
        }
        .notify {
          padding: 22px 18px;
          gap: 18px;
        }
        .notify h2 {
          font-size: 23px;
        }
        .notify p {
          font-size: 15px;
        }
        .phead-in {
          padding-top: 40px;
          padding-bottom: 40px;
        }
        .phead h1 {
          font-size: 33px;
          margin: 12px 0 14px;
        }
        .soon-hero {
          padding-top: 36px;
          padding-bottom: 36px;
        }
        .soon-hero h1 {
          font-size: 36px;
          margin: 14px 0;
        }
        .cs-panel {
          padding: 48px 24px;
          gap: 22px;
        }
        .cs-panel h2 {
          font-size: 44px;
        }
        .emblem {
          width: min(64%, 240px);
        }
        .cbody {
          padding-top: 36px;
          padding-bottom: 56px;
        }
        .side h2 {
          font-size: 23px;
        }
        .socials .btn {
          height: 42px;
        }

        /* centre alignment */
        .hero-in > div:first-child,
        .sec-head,
        .sec .wrap > .eyebrow,
        .sec .wrap > h2,
        .vm .card,
        .motto,
        .m-card,
        .d-cell,
        .u-card,
        .course-card,
        .cd-info,
        .cd-facts,
        .notify,
        .phead-in,
        .soon-hero .soon-grid > div:first-child,
        .side,
        .ftr-in,
        .ftr-base {
          text-align: center;
        }
        .sec-head {
          align-items: center;
          margin-left: auto;
          margin-right: auto;
        }
        .lede {
          margin-left: auto;
          margin-right: auto;
        }
        .vm-head {
          flex-direction: column;
          align-items: center;
          gap: 2px;
        }
        .m-card,
        .d-cell,
        .u-card,
        .course-body {
          align-items: center;
        }
        .course-meta {
          justify-content: center;
        }
        .cd-facts div {
          align-items: center;
        }
        .soon-hero .cd-info .ctas {
          flex-direction: column;
          align-items: stretch;
        }
        .courses {
          max-width: 520px;
          margin: 0 auto;
        }
        .cd-poster {
          max-width: 520px;
          margin: 0 auto;
        }
        .m-num {
          justify-content: center;
          gap: 12px;
        }
        .u-card .soon {
          align-self: center;
        }
        .notify {
          flex-direction: column;
        }
        .notify .ctas {
          width: 100%;
        }
        .socials {
          grid-template-columns: minmax(0, 1fr);
        }
        .socials .btn {
          justify-content: center;
        }
        .note {
          text-align: center;
        }
        .info {
          text-align: center;
        }
        .i-row {
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 10px;
        }
        .i-row svg {
          margin-top: 0;
        }
        .ftr .logo {
          margin: 0 auto;
        }
        .ftr p {
          margin-left: auto;
          margin-right: auto;
        }
        .ftr .f-name[lang="ar"] {
          text-align: center;
        }
        .f-social {
          justify-content: center;
        }
        .ftr ul {
          align-items: center;
        }
        .ftr-base {
          flex-direction: column;
          align-items: center;
        }
      }
      @media (max-width: 640px) {
        /* buttons: two per row */
        .ctas {
          display: flex;
          flex-direction: column;
          gap: 12px;
          align-items: stretch;
        }
        .ctas .btn {
          width: 100%;
          height: 52px;
          padding: 0 20px;
          gap: 10px;
          font-size: 15px;
          white-space: nowrap;
          justify-content: center;
        }
        .ctas .btn.pri {
          padding-inline: 20px;
        }
        .ctas .btn svg {
          width: 18px;
          height: 18px;
        }
        .ctas .btn.pri svg.arrow {
          width: 30px;
          height: 30px;
          padding: 6px;
        }

        /* cards: two per row */
        .domains,
        .upcoming {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .upcoming {
          gap: 12px;
        }
        .u-card:last-child:nth-child(odd) {
          grid-column: 1/-1;
        }
        .d-cell {
          padding: 16px 12px;
          gap: 4px;
        }
        .d-cell h3 {
          font-size: 16.5px;
        }
        .d-cell p {
          font-size: 13px;
          line-height: 1.5;
        }
        .u-card {
          padding: 16px 12px;
          gap: 8px;
        }
        .u-ico {
          width: 38px;
          height: 38px;
        }
        .u-card h3 {
          font-size: 15.5px;
        }
        .u-card p {
          font-size: 13px;
          line-height: 1.5;
        }

        /* footer: one column, centered. logo, description, organisation name, social icons, then the link groups */
        .ftr-in {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 18px;
          padding-top: 24px;
          padding-bottom: 10px;
        }
        .ftr-in > div {
          width: 100%;
        }
        .ftr-in > div:first-child {
          flex: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
        }
        .ftr-in > div:first-child .logo {
          height: 38px;
          margin: 0;
        }
        .ftr-in > div:first-child > p {
          margin: 0;
          font-size: 13px;
          line-height: 1.5;
        }
        .ftr-in > div:first-child > .f-social {
          margin-top: 2px;
          gap: 6px;
        }
        .f-social a {
          --r: 10px;
          width: 32px;
          height: 32px;
        }
        .ftr h4 {
          margin: 0 0 2px;
          font-size: 11px;
        }
        .ftr ul {
          gap: 0;
        }
        .ftr a {
          min-height: 24px;
          font-size: 13px;
        }
        .ftr-base {
          padding-top: 7px;
          padding-bottom: 9px;
          gap: 0;
          font-size: 11px;
          line-height: 1.4;
        }
      }
      @media (max-width: 640px) {
        /* Courses pages: tighter vertical rhythm on phones */
        [data-page="courses"] .phead-in,
        [data-page="publications"] .phead-in {
          padding-top: 28px;
          padding-bottom: 32px;
        }
        [data-page="courses"] .sec,
        [data-page="publications"] .sec {
          padding: 32px 0 40px;
        }
        [data-page="course"] .soon-hero {
          padding-top: 24px;
          padding-bottom: 28px;
        }
        .cd-grid {
          gap: 24px;
        }
        .cd-notify {
          padding: 32px 0;
        }
        .cd-notify .notify {
          padding: 22px 18px;
        }
      }
      @media (max-width: 640px) {
        /* Research / Events: compact Coming soon + Notify band */
        .soon-band {
          min-height: 0;
          padding: 24px 0 32px;
        }
        .cs-panel {
          padding: 28px 20px;
        }
      }
      @media (max-width: 900px) {
        /* Course page: breadcrumb above the poster when stacked */
        .cd-grid {
          display: flex;
          flex-direction: column;
          gap: 0;
        }
        .cd-info {
          display: contents;
        }
        .cd-info .crumb {
          order: -1;
          margin: 0 0 16px;
          width: 100%;
          text-align: center;
        }
        .cd-poster {
          order: 0;
          width: 100%;
          margin: 0 auto 24px;
        }
        .cd-info > :not(.crumb) {
          order: 1;
        }
        .cd-grid {
          text-align: center;
        }
        .cd-info > h1,
        .cd-info > .lede,
        .cd-info > .ctas {
          width: 100%;
          margin-left: auto;
          margin-right: auto;
        }
      }
      @media (max-width: 400px) {
        .lang-btn .globe {
          display: none;
        }
        .logo-mark {
          height: 40px;
        }