/* FellowFlow brand site. Navy and cream from the logo, gold only as a highlight. */

/* Fonts are self-hosted in assets/fonts (Google Fonts files, SIL Open Font License), latin + arabic only, so nothing outside the site blocks the first paint. */
@font-face {
  font-family: 'Amiri';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/amiri-arabic-italic-532e1e.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: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/amiri-latin-ext-italic-ceac64.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: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/amiri-latin-italic-79dda2.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: 400;
  font-display: swap;
  src: url(../fonts/amiri-arabic-normal-1bb639.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(../fonts/amiri-latin-ext-normal-b2c304.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(../fonts/amiri-latin-normal-67f373.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(../fonts/amiri-arabic-normal-5c7846.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(../fonts/amiri-latin-ext-normal-2130cd.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(../fonts/amiri-latin-normal-d1c56a.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-italic-a89ed2.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-italic-25e309.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-italic-a89ed2.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-italic-25e309.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-normal-907682.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-normal-2fed1d.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-normal-907682.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-normal-2fed1d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-normal-00b30d.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-ext-normal-cd801f.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-normal-b9f686.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-normal-32d758.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-ext-normal-da4431.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-normal-0b17f1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-normal-dda025.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-ext-normal-586b7b.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-normal-5344fa.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext-normal-b4290e.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-latin-normal-cf48e3.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext-normal-b4290e.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-latin-normal-cf48e3.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext-normal-b4290e.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-latin-normal-cf48e3.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext-normal-b4290e.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-latin-normal-cf48e3.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;
}

:root {
  --brand: #050C1A;      /* deep navy: the logo's navy taken darker for calm */
  --navy-2: #081428;
  --navy-3: #0E1D38;
  --r: clamp(26px, 4vw, 56px);   /* corner radius of the cream sheets */
  --cream: #F5E4C8;      /* cream, from the logo */
  --cream-2: #E6D2B0;
  --accent: #C9A45C;     /* gold highlight */
  --gold-hi: #E8CD8F;
  --gold-text: #8A6A30;  /* gold dark enough to read on cream */
  --paper: #FBF5EA;
  --on-navy: #F5E4C8;
  --muted-navy: #A4AFC2;
  --ink: #0B1730;
  --ink-2: #3C4860;
  --line: #E4D6BC;
  --line-navy: rgba(245,228,200,.14);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gold-grad: linear-gradient(100deg, #F0DDB4 0%, #C9A45C 50%, #A8823F 75%, #E2C27E 100%);
  --gold-ink: linear-gradient(100deg, #B8914A, #8A6A30);
  --ease: cubic-bezier(.2,.7,.2,1);
}
html[lang="ar"] { --serif: "Amiri", serif; --sans: "IBM Plex Sans Arabic", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, .menu { scroll-padding-top: 90px; }
/* Links within the page glide there on a click or tap. Someone moving with the Tab key jumps straight to each
   link instead (site.js adds .keys), so the focus ring is never left off screen while the page glides. */
@media (prefers-reduced-motion: no-preference) { html.js:not(.keys) { scroll-behavior: smooth; } }
body { margin: 0; background: var(--brand); color: var(--on-navy); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
main { position: relative; }

/* Things that float behind the navy parts of the page: soft light and faint marks, drifting slowly. */
.drift { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; animation: drift var(--d, 30s) ease-in-out infinite alternate; }
.orb-1 { width: 56vw; height: 56vw; left: -18vw; top: 8vh; background: radial-gradient(circle, rgba(201,164,92,.16), transparent 68%); --d: 34s; }
.orb-2 { width: 44vw; height: 44vw; right: -14vw; top: 46vh; background: radial-gradient(circle, rgba(14,29,56,1), transparent 68%); --d: 42s; animation-delay: -12s; }
.orb-3 { width: 34vw; height: 34vw; left: 36vw; bottom: -14vh; background: radial-gradient(circle, rgba(245,228,200,.09), transparent 68%); --d: 38s; animation-delay: -20s; }
.drift img { position: absolute; width: clamp(180px, 24vw, 360px); opacity: .035; will-change: transform; animation: drift var(--d, 40s) ease-in-out infinite alternate; }
.mk-1 { left: 6vw; top: 58vh; --d: 46s; animation-delay: -8s; }
.mk-2 { right: 8vw; top: 12vh; --d: 52s; animation-delay: -30s; transform: rotate(18deg); }
@keyframes drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(6vw, -8vh, 0) rotate(8deg); } }
/* Everything written sits above the drifting layer. Cream sheets cover it completely. */
.wrap { z-index: 2; }
.top, .callbar { z-index: 40; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.02; margin: 0; letter-spacing: -0.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.5; letter-spacing: 0; font-weight: 700; }
em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .06em; }
html[lang="ar"] em { font-style: normal; }
h2 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); margin-bottom: 22px; max-width: 16em; }
h3 { font-size: 1.75rem; font-weight: 600; }
p { margin: 0 0 14px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)); position: relative; }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; left: 12px; top: 12px; z-index: 99; background: var(--accent); color: var(--brand); padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sub { color: var(--muted-navy); font-size: 1.1rem; max-width: 36em; }
/* Line icons (the symbols at the top of the page) */
svg.ico, .ring-n svg, .vow-ico, .stage-ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Faint film grain over the whole page */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 0; font: 600 .92rem var(--sans); letter-spacing: .04em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-position .6s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: .84rem; }
.btn-gold { background: var(--gold-grad); background-size: 200% 100%; color: var(--brand); }
.btn-gold:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(201,164,92,.7); }
.btn-line { border-color: rgba(245,228,200,.45); color: var(--cream); }
.btn-line:hover { border-color: var(--cream); background: rgba(245,228,200,.07); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* only until site.js runs (the form button) */

/* Opening */
/* Streams of light draw in from the edges and meet. Where they meet, the mark surfaces; the name
   is written beneath it; then the lockup travels up into the header and the dark lifts away. */
.intro { position: fixed; inset: 0; z-index: 90; display: none; overflow: hidden; background: transparent; cursor: pointer; }
.js .intro.play { display: block; }
/* While the intro plays on iPhone/iPad, the page behind it is hidden: Safari's floating toolbar is see-through and sits outside the fixed intro.
   Only there: elsewhere the page stays painted under the intro, which Google's speed test needs to measure the page (hiding it everywhere gave "no score"). */
html.intro-on { background: var(--brand); }
@supports (-webkit-touch-callout: none) { html.intro-on body > :not(.intro) { visibility: hidden; } }
.intro-bg { position: absolute; inset: 0; background: var(--brand); transition: opacity 1.1s ease; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1s ease; }
/* The timed parts start only when the scene starts rolling (class "rolling", set by site.js once the mark's picture is ready). */
.intro-bloom { position: absolute; left: 50%; top: 50%; width: 52vmin; height: 52vmin; margin: -26vmin 0 0 -26vmin; border-radius: 50%; background: radial-gradient(circle, rgba(245,228,200,.5), rgba(201,164,92,.16) 40%, transparent 70%); opacity: 0; transform: scale(.2); pointer-events: none; }
.intro.rolling .intro-bloom { animation: bloom 1.8s 3.2s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes bloom { 30% { opacity: 1; } to { opacity: 0; transform: scale(1.6); } }
.intro-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 26px; width: max-content; }
.intro-mark { width: clamp(96px, 15vmin, 150px); transform-origin: 0 0; opacity: 0; filter: drop-shadow(0 0 28px rgba(245,228,200,.3)); }
.intro.rolling .intro-mark { animation: fadein 1s 3.6s ease forwards; }
@keyframes fadein { to { opacity: 1; } }
.intro-word { width: clamp(220px, 34vmin, 320px); transform-origin: 0 0; clip-path: inset(0 100% 0 0); }
.intro.rolling .intro-word { animation: write 1.1s 4.4s cubic-bezier(.4,0,.2,1) forwards; }
html[dir="rtl"] .intro-word { clip-path: inset(0 0 0 100%); }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
.intro-tag { position: absolute; left: 0; right: 0; top: calc(50% + clamp(100px, 17vmin, 150px)); text-align: center; font: italic 500 clamp(1.2rem, 2.4vmin, 1.5rem) var(--serif); color: var(--accent); opacity: 0; transform: translateY(8px); margin: 0; padding: 0 20px; }
.intro.rolling .intro-tag { animation: rise .9s 5.1s var(--ease) forwards; }
html[lang="ar"] .intro-tag { font-style: normal; }
@keyframes rise { to { opacity: 1; transform: none; } }
.intro-skip { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); background: none; border: 0; color: var(--muted-navy); font: 500 .78rem var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: rise .8s 1.2s ease forwards; }
html[lang="ar"] .intro-skip { letter-spacing: 0; font-size: .9rem; }
/* The hand-off: the mark and the name fly to their places in the header while the dark fades. */
.intro.done { pointer-events: none; }
.intro.done .intro-bg, .intro.done .intro-canvas, .intro.done .intro-tag, .intro.done .intro-skip, .intro.done .intro-bloom { opacity: 0; animation: none; transition: opacity .9s ease .15s; }
.intro.done .intro-mark { animation: fadein .3s ease forwards; }
.intro.done .intro-word { animation: write .4s ease forwards; }
.intro.done .intro-mark, .intro.done .intro-word { transition: transform 1.05s cubic-bezier(.7,0,.2,1); filter: none; }
.js .top .logo { opacity: 0; transition: opacity .5s ease; }
.js .top .logo.show, html.no-intro .top .logo { opacity: 1; }

/* Header */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.top.scrolled { background: rgba(5,12,26,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line-navy); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 20px; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-mark { width: 42px; }
.logo-word { width: 172px; }
.nav { display: flex; gap: 34px; }
.nav a { text-decoration: none; font-size: .86rem; letter-spacing: .06em; color: var(--muted-navy); position: relative; transition: color .3s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover { color: var(--cream); }
.nav a:hover::after { transform: scaleX(1); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.lang, .back { display: inline-flex; align-items: center; text-decoration: none; background: none; border: 1px solid var(--line-navy); color: var(--cream); height: 42px; padding: 0 16px; font: 500 .9rem var(--sans); cursor: pointer; transition: border-color .3s; }
.lang:hover, .back:hover { border-color: var(--cream); }
html[lang="ar"] .lang { font-family: "Manrope", sans-serif; }
/* Privacy page header: on the narrowest phones the logo alone leads home. */
@media (max-width: 360px) { .top-actions .back { display: none; } }

/* Phone and tablet menu (shown under 1000px, see the Tablet block). The button is two thin cream
   lines that turn into a cross; the panel is navy, sits under the header, and lists the five
   sections in serif with a gold numeral, each rising in a beat after the one before. */
.menu-btn, .menu { display: none; }
.menu-btn { width: 42px; height: 42px; padding: 0; background: none; border: 1px solid var(--line-navy); color: var(--cream); cursor: pointer; place-items: center; transition: border-color .3s, background .3s; -webkit-tap-highlight-color: transparent; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: rgba(245,228,200,.5); }
.menu-lines { position: relative; display: block; width: 22px; height: 12px; }
.menu-lines i { position: absolute; inset-inline-start: 0; width: 22px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .45s var(--ease), width .3s var(--ease); }
.menu-lines i:first-child { top: 0; }
.menu-lines i:last-child { bottom: 0; width: 15px; }
.menu-btn[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(5.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines i:last-child { width: 22px; transform: translateY(-5.25px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 39; background: var(--brand); color: var(--cream); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transition: opacity .5s ease, clip-path .7s var(--ease), visibility 0s .7s; }
.menu::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 90% 100%, rgba(201,164,92,.18), transparent 70%), radial-gradient(50% 35% at 0% 20%, rgba(14,29,56,.9), transparent 70%); }
.menu.open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition: opacity .35s ease, clip-path .75s var(--ease), visibility 0s; }
.menu-in { display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding-top: 110px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.menu-in > a { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .8s var(--ease); transition-delay: 0s; }
.menu.open .menu-in > a { opacity: 1; transform: none; transition-delay: calc(140ms + var(--i) * 75ms); }
.menu-in > a:not(.btn) { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line-navy); text-decoration: none; color: var(--cream); font: 500 clamp(2.2rem, 7.6vw, 3.4rem)/1.1 var(--serif); letter-spacing: -0.01em; }
.menu-in > a:not(.btn) small { font: 600 .68rem var(--sans); letter-spacing: .28em; color: var(--accent); min-width: 2.2em; }
.menu-in > a:not(.btn) span { transition: transform .5s var(--ease); }
.menu-in > a:not(.btn):hover span, .menu-in > a:not(.btn):focus-visible span { transform: translateX(8px); }
html[dir="rtl"] .menu-in > a:not(.btn):hover span, html[dir="rtl"] .menu-in > a:not(.btn):focus-visible span { transform: translateX(-8px); }
.menu-cta { align-self: flex-start; margin-top: 40px; min-width: 240px; }
html[lang="ar"] .menu-in > a:not(.btn) { font-size: clamp(2rem, 7vw, 3rem); }
html.menu-open, html.menu-open body { overflow: hidden; }

/* 1. Hero */
.hero { position: relative; min-height: 100svh; padding: 150px 0 calc(var(--r) + 40px); overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(900px 600px at 72% 50%, rgba(201,164,92,.07), transparent 60%); }
.streams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.streams path { fill: none; stroke: url(#sg); stroke-width: 1.1; stroke-dasharray: 160 900; stroke-dashoffset: 1060; opacity: .38; animation: stream 10s linear infinite; }
.streams path:nth-child(2) { animation-delay: -1.2s; } .streams path:nth-child(3) { animation-delay: -2.6s; } .streams path:nth-child(4) { animation-delay: -3.9s; } .streams path:nth-child(5) { animation-delay: -5.1s; } .streams path:nth-child(6) { animation-delay: -6.3s; }
@keyframes stream { to { stroke-dashoffset: 0; } }
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; flex: 1; }
.eyebrow, .no { display: flex; align-items: center; gap: 14px; font: 600 .74rem var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: 26px; }
.rule { width: 46px; height: 1px; background: var(--accent); }
.rn { font-family: "Manrope", sans-serif; }
html[lang="ar"] .eyebrow, html[lang="ar"] .no { letter-spacing: 0; font-size: .92rem; }
h1 { font-size: clamp(3rem, 6.6vw, 6.1rem); margin-bottom: 28px; font-weight: 500; color: #FBF5EA; max-width: 10em; }
html[lang="ar"] h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); }
.words .w { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i) * 110ms); }
.words.in .w { opacity: 1; transform: none; }
/* Safari: background-clip: text does not reach inline-block children, so each word inside <em> carries the gradient itself. */
.words em .w { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted-navy); max-width: 32em; margin-bottom: 38px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* The first screen: the mark in flight. The mark was drawn from a butterfly, so it moves like one:
   a slow wandering path (.flight), a soft wing-like tilt (.flutter), a faint trail of itself behind
   (.ghost copies lagging a little on the same path), two small ones further away, and gold dust rising.
   All CSS; the dust is a handful of spans site.js adds with random size and timing. */
.hero-art { position: relative; height: 560px; display: grid; place-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.hero-art > * { grid-area: 1 / 1; }
.glow { width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(201,164,92,.18), rgba(201,164,92,.05) 42%, transparent 70%); animation: breathe 7s ease-in-out infinite; }
.flight { perspective: 900px; animation: wander 28s ease-in-out infinite; will-change: transform; }
.flutter { transform-style: preserve-3d; animation: flutter 3.6s ease-in-out infinite; will-change: transform; }
.flight img { width: 210px; height: auto; filter: drop-shadow(0 0 30px rgba(201,164,92,.3)); }
.ghost img { filter: blur(1px); }
.g1 { opacity: .22; animation-delay: -27.65s; } .g1 .flutter { animation-delay: -.35s; }
.g2 { opacity: .12; animation-delay: -27.3s; }  .g2 .flutter { animation-delay: -.7s; }
.g3 { opacity: .06; animation-delay: -26.95s; } .g3 .flutter { animation-delay: -1.05s; }
.small { opacity: .5; }
.small img { width: 40px; filter: drop-shadow(0 0 10px rgba(245,228,200,.25)); }
.s1 { animation: wander2 34s ease-in-out infinite; } .s1 .flutter { animation-duration: 2.8s; }
.s2 { animation: wander3 40s ease-in-out infinite; } .s2 .flutter { animation-duration: 2.4s; animation-delay: -1s; }
.s2 img { width: 26px; }
@keyframes wander {
  0%   { transform: translate(0, 0) rotate(0deg); }
  18%  { transform: translate(70px, -60px) rotate(7deg); }
  36%  { transform: translate(-30px, -110px) rotate(-5deg); }
  55%  { transform: translate(-95px, -20px) rotate(-9deg); }
  74%  { transform: translate(-20px, 80px) rotate(4deg); }
  90%  { transform: translate(60px, 40px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes wander2 {
  0%   { transform: translate(-220px, 150px) rotate(0deg); }
  30%  { transform: translate(-150px, -40px) rotate(12deg); }
  60%  { transform: translate(-250px, -170px) rotate(-8deg); }
  100% { transform: translate(-220px, 150px) rotate(0deg); }
}
@keyframes wander3 {
  0%   { transform: translate(230px, -160px) rotate(0deg); }
  35%  { transform: translate(170px, 30px) rotate(-14deg); }
  65%  { transform: translate(260px, 170px) rotate(9deg); }
  100% { transform: translate(230px, -160px) rotate(0deg); }
}
@keyframes flutter {
  0%, 100% { transform: rotateY(-24deg) rotateZ(-3deg) translateY(0); }
  50%      { transform: rotateY(24deg) rotateZ(3deg) translateY(-10px); }
}
.dust { position: absolute; inset: 0; }
.bubble-dot { position: absolute; bottom: -40px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #F0DDB4, var(--accent) 70%); box-shadow: 0 0 10px rgba(201,164,92,.5); opacity: 0; animation: rise var(--d) linear var(--delay) infinite; }
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(var(--sway), calc(var(--h) * -.5)); }
  92% { opacity: .7; }
  100% { transform: translate(0, calc(var(--h) * -1)); opacity: 0; }
}
@keyframes breathe { 0%, 100% { scale: 1; opacity: .8; } 50% { scale: 1.12; opacity: 1; } }
/* Sections. Navy sections are open to the drifting layer behind them; cream sections are
   "sheets" with rounded corners laid over the navy, so one part hands over to the next softly. */
section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.navy { padding-block: calc(clamp(80px, 11vw, 150px) + var(--r)); }
.sheet { position: relative; z-index: 2; background: var(--paper); color: var(--ink); border-radius: var(--r); margin-block: calc(var(--r) * -1); box-shadow: 0 -40px 90px -50px rgba(0,0,0,.8), 0 40px 90px -50px rgba(0,0,0,.8); }
.js .sheet { transform: translateY(50px); transition: transform 1.3s var(--ease); }
.js .sheet.in { transform: none; }
.sheet + .sheet { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.sheet .no { color: var(--gold-text); }
.sheet .rule { background: var(--gold-text); }
.sheet em, .certificate em { background: var(--gold-ink); -webkit-background-clip: text; background-clip: text; }
.sheet .sub { color: var(--ink-2); }
.kicker { display: block; font: 600 .72rem var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 14px; }
html[lang="ar"] .kicker { letter-spacing: 0; font-size: .9rem; }

/* 2. What changes: three phones in a row, a gold line running through them, each lit as you scroll. */
.journey { list-style: none; margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.jline { position: absolute; left: 10%; right: 10%; top: 190px; height: 10px; width: 80%; overflow: visible; }
.jline path { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 8; opacity: .7; }
.jline circle { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(201,164,92,.9)); }
.jstep { display: grid; justify-items: center; text-align: center; position: relative; }
.phone { width: 196px; height: 380px; border-radius: 30px; background: var(--brand); padding: 12px; box-shadow: 0 30px 60px -30px rgba(1,22,49,.6), inset 0 0 0 1px rgba(245,228,200,.25); position: relative; transition: transform .8s var(--ease), box-shadow .8s; }
.phone::before { content: ""; position: absolute; top: 12px; left: 50%; width: 58px; height: 16px; margin-left: -29px; background: var(--brand); border-radius: 0 0 10px 10px; z-index: 2; }
.scr { height: 100%; border-radius: 20px; background: #FFFDF8; overflow: hidden; padding: 30px 14px 14px; display: grid; align-content: start; gap: 10px; color: var(--ink); font: 500 .8rem var(--sans); }
.scr .ico { width: 18px; height: 18px; flex: none; }
.s-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 20px; padding: 8px 12px; color: var(--ink-2); }
.s-map { height: 120px; border-radius: 12px; display: grid; place-items: center; color: var(--brand);
  background: linear-gradient(135deg, #EEF0E6, #E2E8DD); background-image: linear-gradient(rgba(11,23,48,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,23,48,.06) 1px, transparent 1px); background-size: 20px 20px; }
.s-map .pin { width: 34px; height: 34px; color: var(--gold-text); transform: translateY(6px); opacity: 0; transition: transform .8s var(--ease) .3s, opacity .8s .3s; }
.s-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.s-card b { font: 500 1.05rem var(--serif); color: var(--ink); }
.s-card span { color: var(--ink-2); font-size: .72rem; }
.s-hero { height: 110px; border-radius: 12px; background: var(--brand); display: grid; place-items: center; align-content: center; gap: 6px; color: var(--cream); }
.s-hero img { width: 26px; }
.s-hero b { font: 500 1rem var(--serif); }
.s-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.s-row .ico { color: var(--gold-text); }
.s-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border: 1px solid var(--brand); border-radius: 10px; margin-top: 6px; font-weight: 600; }
.s-btn.tap { background: var(--brand); color: var(--cream); }
.pulse { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); right: 14px; opacity: 0; }
html[dir="rtl"] .pulse { right: auto; left: 14px; }
.jtext { max-width: 300px; margin-top: 26px; }
.jn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font: italic 600 1.1rem "Cormorant Garamond", serif; color: var(--gold-text); margin-bottom: 14px; transition: background .5s, color .5s, border-color .5s; }
.jtext h3 { font-size: 1.7rem; margin-bottom: 8px; }
.jtext p { color: var(--ink-2); font-size: .98rem; margin: 0; }
/* Unlit steps: the phone fades, the words dim by colour so they keep readable contrast. */
.jstep .phone { opacity: .55; transition: opacity .6s; }
.jstep .jtext h3 { color: #707A8F; transition: color .6s; }
.jstep .jtext p { color: #5E6880; transition: color .6s; }
.jstep.lit .phone { opacity: 1; }
.jstep.lit .jtext h3 { color: var(--ink); }
.jstep.lit .jtext p { color: var(--ink-2); }
.jstep.lit .phone { transform: translateY(-8px); box-shadow: 0 40px 70px -30px rgba(1,22,49,.55), 0 0 0 1px rgba(201,164,92,.5), inset 0 0 0 1px rgba(245,228,200,.25); }
.jstep.lit .jn { background: var(--brand); color: var(--gold-hi); border-color: var(--brand); }
.jstep.lit .s-map .pin { opacity: 1; transform: none; }
.jstep.lit .pulse { animation: ping 1.8s ease-out .6s infinite; }
@keyframes spark { 0% { top: var(--from); opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: var(--to); opacity: 0; } }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.gain { margin: 64px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-top: 30px; border-top: 1px solid var(--line); }
.gain .kicker { width: 100%; margin-bottom: 4px; }
.gain b { font: 500 clamp(1.7rem, 3vw, 2.4rem) var(--serif); color: var(--ink); }
.gain i { font: 500 1.6rem var(--serif); color: var(--gold-text); }
.gain-p { width: 100%; color: var(--ink-2); font-style: italic; font-family: var(--serif); font-size: 1.25rem; }
html[lang="ar"] .gain-p { font-style: normal; }

/* 3. Our work: a quiet gallery. Two across, each piece in a thin gold frame; the recording plays on hover. */
.work-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 60px; }
.work-head h2 { margin-bottom: 0; }
.work-head .sub { margin: 0 0 10px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 44px; }
/* One site on show: a single wider card, centred. */
.gallery.solo { grid-template-columns: minmax(0, 820px); justify-content: center; }
.card { margin: 0; }
.js .card.reveal { transition-delay: calc(var(--i) * 120ms); }
.card a { display: block; text-decoration: none; position: relative; }
.frame { position: relative; overflow: hidden; background: var(--navy-3); border-radius: 4px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); aspect-ratio: 16 / 10; }
/* The outline sits on the edge of the screenshot, not inside it, so it never cuts through the site's own menu or buttons. */
.frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(245,228,200,.22); border-radius: inherit; pointer-events: none; transition: border-color .6s, box-shadow .6s; }
.card a:hover .frame::after, .card.playing .frame::after { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(201,164,92,.35); }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame img { transition: transform 1.6s var(--ease), opacity .6s; }
.frame video { opacity: 0; transition: opacity .6s; }
.card.playing .frame video { opacity: 1; }
.card a:hover .frame img { transform: scale(1.03); }
.card-meta { padding-top: 18px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 14px; }
.card-meta .go { grid-column: 1; }
.card h3 { font-size: 1.6rem; color: #FBF5EA; font-weight: 500; }
.card h3 small { display: block; font: 600 .68rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted-navy); margin-top: 6px; }
html[lang="ar"] .card h3 small { letter-spacing: 0; font-size: .85rem; }
.tag { grid-column: 2; grid-row: 1; font: 600 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 5px 9px; border: 1px solid rgba(201,164,92,.5); color: var(--gold-hi); white-space: nowrap; align-self: start; }
.tag.st-prev { border-color: var(--line-navy); color: var(--muted-navy); }
html[lang="ar"] .tag { letter-spacing: 0; font-size: .78rem; }
.go { font-size: .82rem; letter-spacing: .08em; color: var(--cream); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; opacity: .7; transition: opacity .3s; }
.card a:hover .go { opacity: 1; }
.go i { font-style: normal; transition: transform .3s var(--ease); }
.card a:hover .go i { transform: translateX(6px); }
html[dir="rtl"] .go i { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .card a:hover .go i { transform: scaleX(-1) translateX(6px); }
.legend { margin: 44px 0 0; max-width: 46em; color: var(--muted-navy); font-size: .86rem; line-height: 1.7; opacity: .8; }
.legend b { color: var(--cream); font-weight: 600; }

/* 4. Packages: three stages along one drawn path. */
.path-wrap { position: relative; margin-top: 60px; }
.stage-line { position: absolute; left: 0; top: 0; width: 100%; height: 90px; overflow: visible; pointer-events: none; }
.stage-line path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); transition: stroke-dashoffset 2.4s var(--ease) .3s; }
.path-wrap.in .stage-line path { stroke-dashoffset: 0; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.stage { position: relative; padding: 0 28px 36px; border-radius: 6px; text-align: center; display: grid; justify-items: center; align-content: start; transition: transform .5s var(--ease), box-shadow .5s, background .5s; }
.js .stage.reveal { transition: opacity 1.2s ease, transform 1.3s var(--ease); transition-delay: calc(var(--i) * 160ms); }
.stage:hover { background: #fff; box-shadow: 0 40px 70px -40px rgba(1,22,49,.35); }
.milestone { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: var(--paper); border: 1px solid var(--accent); font: italic 600 2rem/1 "Cormorant Garamond", serif; color: var(--gold-text); margin-bottom: 26px; box-shadow: 0 0 0 10px var(--paper); position: relative; z-index: 1; transition: background .5s, color .5s; }
.stage:hover .milestone { background: var(--brand); color: var(--gold-hi); }
.stage-ico { width: 44px; height: 44px; color: var(--gold-text); margin-bottom: 18px; stroke-width: 1.2; }
.stage h3 { font-size: 2.4rem; margin-bottom: 8px; }
.stage .lead { font: italic 500 1.25rem var(--serif); color: var(--gold-text); margin-bottom: 18px; }
html[lang="ar"] .stage .lead { font-style: normal; }
.incl { list-style: none; margin: 0; padding: 0; text-align: start; width: 100%; border-top: 1px solid var(--line); }
.incl li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; position: relative; }
html[dir="rtl"] .incl li { padding: 10px 26px 10px 0; }
.incl li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 17px; width: 12px; height: 7px; border-left: 1.5px solid var(--gold-text); border-bottom: 1.5px solid var(--gold-text); transform: rotate(-45deg); }
html[dir="rtl"] .incl li::before { transform: rotate(-45deg) scaleX(1); }
.start { margin-top: 60px; background: var(--brand); color: var(--on-navy); padding: 44px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; position: relative; overflow: hidden; }
.start::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--line-navy); pointer-events: none; }
.start h3 { font-size: 2.2rem; color: #FBF5EA; margin-bottom: 0; }
.start p { color: #C9D0DC; margin: 0; max-width: 40em; position: relative; }
.start .btn { position: relative; }
.watermark { position: absolute; width: 240px; right: -50px; bottom: -40px; opacity: .07; pointer-events: none; }
html[dir="rtl"] .watermark { right: auto; left: -50px; transform: scaleX(-1); }

/* 5. Process */
.process { background: transparent; }
.steps { list-style: none; padding: 0; margin: 60px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; }
.steps::before { content: ""; position: absolute; top: 36px; inset-inline-start: 36px; width: calc(100% - 72px); height: 1px; background: var(--line-navy); }
.steps::after { content: ""; position: absolute; top: 36px; inset-inline-start: 36px; width: calc((100% - 72px) * var(--p, 0)); height: 1px; background: var(--gold-grad); transition: width .15s linear; }
.ring-n { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line-navy); background: var(--brand); color: var(--muted-navy); margin-bottom: 26px; box-shadow: 0 0 0 8px var(--brand); transition: border-color .5s, color .5s, box-shadow .5s, transform .5s var(--ease); }
.ring-n svg { width: 30px; height: 30px; stroke-width: 1.3; }
.steps li.lit .ring-n { border-color: var(--accent); color: var(--gold-hi); box-shadow: 0 0 0 8px var(--brand), 0 0 30px rgba(201,164,92,.35); transform: scale(1.06); }
.steps h3 { font-size: 2rem; margin-bottom: 10px; color: #FBF5EA; opacity: .5; transition: opacity .5s; }
/* Unlit steps dim by colour, not opacity, so the text keeps readable contrast before it lights up. */
.steps p { color: #8691A6; font-size: .98rem; transition: color .5s; }
.steps li.lit h3 { opacity: 1; }
.steps li.lit p { color: var(--muted-navy); }

/* 6. Promise */
.promise { background: transparent; }
.certificate { position: relative; max-width: 1040px; margin: 0 auto; background: var(--paper); color: var(--ink); padding: clamp(40px, 7vw, 90px) clamp(24px, 6vw, 80px); text-align: center; box-shadow: 0 60px 120px -40px rgba(0,0,0,.8); border-radius: 6px; overflow: hidden; }
.certificate::before, .certificate::after { content: ""; position: absolute; pointer-events: none; }
.certificate::before { inset: 14px; border: 1px solid #C9A45C; }
.certificate::after { inset: 20px; border: 1px solid rgba(201,164,92,.45); }
.certificate .no { justify-content: center; color: var(--gold-text); }
.deco { position: absolute; width: 150px; height: 150px; fill: none; stroke: var(--gold-text); stroke-width: 1; opacity: .35; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 3s var(--ease) .6s; pointer-events: none; }
.certificate.in .deco { stroke-dashoffset: 0; }
.deco-l { left: 34px; top: 34px; }
.deco-r { right: 34px; bottom: 34px; }
@media (max-width: 1100px) { .deco { display: none; } }
.seal { width: 140px; height: 140px; margin: -10px auto 20px; display: block; }
.s-outer { fill: none; stroke: #B8914A; stroke-width: 1.2; }
.s-inner { fill: var(--brand); stroke: #C9A45C; stroke-width: 1.5; }
.s-spin { transform-origin: 100px 100px; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.s-spin text { font: 700 12.5px "Manrope", sans-serif; letter-spacing: 2.4px; fill: #8A6A30; }
.hint { color: var(--ink-2); font-size: .9rem; margin: -8px 0 0; }
.vows { list-style: none; padding: 0; margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; position: relative; z-index: 1; }
.vow { width: 268px; min-height: 252px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 4px; background: #FFFDF8; text-align: start; cursor: default; transition: transform .5s var(--ease), box-shadow .5s, border-color .5s, background .5s; }
.vow-ico { width: 30px; height: 30px; color: var(--gold-text); margin-bottom: 16px; stroke-width: 1.3; transition: transform .6s var(--ease); }
.vow h3 { font-size: 1.45rem; margin: 0 0 12px; }
.vow p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.55; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .5s var(--ease); }
.vow:hover, .vow:focus-visible, .vow.open { border-color: var(--accent); box-shadow: 0 30px 50px -30px rgba(1,22,49,.35); transform: translateY(-4px); background: #fff; }
.vow:hover .vow-ico, .vow:focus-visible .vow-ico, .vow.open .vow-ico { transform: scale(1.12) rotate(-6deg); }
.vow:hover p, .vow:focus-visible p, .vow.open p { opacity: 1; transform: none; }
.quote { font: italic 500 clamp(1.4rem, 2.6vw, 1.9rem)/1.35 var(--serif); max-width: 26em; margin: 44px auto 0; color: var(--ink); }
html[lang="ar"] .quote { font-style: normal; }
.sign { margin: 30px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; font: italic 500 1.25rem "Cormorant Garamond", serif; color: var(--gold-text); }

/* 7. Team */
.team { background: transparent; }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 50px; perspective: 1400px; }
.person { margin: 0; transform-style: preserve-3d; transition: transform .4s var(--ease); }
.person:nth-child(2) { margin-top: 60px; }
.portrait { aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: #DCD3C2; }
.portrait::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(245,228,200,.6); pointer-events: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; transition: filter .8s, transform 1.2s var(--ease); }
.person:hover .portrait img { filter: grayscale(0); transform: scale(1.03); }
.person figcaption { padding-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.person b { font: 500 1.9rem var(--serif); color: #FBF5EA; }
.person figcaption span { color: var(--accent); font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; }
html[lang="ar"] .person figcaption span { letter-spacing: 0; font-size: .95rem; }

/* 8. Free first look */
.audit-in { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.audit .body { font-size: 1.12rem; color: var(--ink-2); max-width: 30em; }
.free { font: italic 500 1.4rem var(--serif); color: var(--gold-text); }
html[lang="ar"] .free { font-style: normal; }
.bubble { margin-top: 30px; max-width: 380px; background: #E7F6DA; color: #1C2B1A; border-radius: 16px 16px 16px 4px; padding: 12px 16px; font-size: .92rem; box-shadow: 0 10px 30px -18px rgba(1,22,49,.5); position: relative; }
html[dir="rtl"] .bubble { border-radius: 16px 16px 4px 16px; }
.bubble-who { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #4F6B45; margin-bottom: 4px; }
.bubble p { margin: 0; white-space: pre-line; min-height: 4.5em; }
.bubble p::after { content: "▍"; color: #4F6B45; animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
.form { background: #FFFDF8; color: var(--ink); padding: 36px; display: grid; gap: 18px; position: relative; border: 1px solid var(--accent); border-radius: 6px; box-shadow: 0 40px 80px -40px rgba(1,22,49,.35); }
.form::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(201,164,92,.35); pointer-events: none; border-radius: 3px; }
.form label { display: grid; gap: 8px; font: 600 .74rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); position: relative; }
html[lang="ar"] .form label { letter-spacing: 0; font-size: .92rem; }
.form input, .form select { height: 54px; border: 1px solid var(--line); border-radius: 3px; background: #fff; padding: 0 14px; font: 400 1.05rem var(--sans); color: var(--ink); width: 100%; text-transform: none; letter-spacing: 0; transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; }
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A6A30' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
html[dir="rtl"] .form select { background-position: left 14px center; }
.form input:focus, .form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,164,92,.22); }
.form .btn { width: 100%; margin-top: 8px; position: relative; }
.form .fine { margin: 0; font-size: .85rem; color: var(--ink-2); position: relative; }
.form-ready .form-fallback { display: none; } /* the plain WhatsApp link, for when site.js can't run */
.err { color: #B23B3B; font-size: .9rem; margin: 0; position: relative; }
.sent { margin: 0; padding: 14px 16px; border: 1px solid var(--accent); background: rgba(201,164,92,.08); color: var(--ink); font-size: .92rem; line-height: 1.6; position: relative; }
.sent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 9. Final */
.final { background: radial-gradient(700px 400px at 50% 50%, rgba(201,164,92,.09), transparent 70%); text-align: center; overflow: hidden; min-height: 80vh; display: grid; align-items: center; }
.final .streams path { animation-duration: 9s; }
.final-in { display: grid; justify-items: center; gap: 30px; }
.final-mark { width: 70px; opacity: .9; }
.final h2 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); color: #FBF5EA; max-width: 12em; }
.final .cta-row { justify-content: center; }

/* Privacy page: one cream sheet of plain text under the fixed header (no scripts on that page). */
.legal { position: relative; z-index: 2; width: min(880px, calc(100% - 24px)); margin: 120px auto 90px; padding: clamp(34px, 6vw, 76px) clamp(22px, 6vw, 84px); background: var(--paper); color: var(--ink); border-radius: var(--r); box-shadow: 0 40px 90px -50px rgba(0,0,0,.8); }
.legal .no { color: var(--gold-text); }
.legal .rule { background: var(--gold-text); }
.legal h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 14px; color: var(--ink); max-width: 12em; }
.legal em { background: var(--gold-ink); -webkit-background-clip: text; background-clip: text; }
.legal h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); margin: 42px 0 12px; max-width: none; }
.legal p, .legal li { color: var(--ink-2); max-width: 40em; }
.legal ul { margin: 0 0 14px; padding-inline-start: 1.2em; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--gold-text); }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--gold-text); text-underline-offset: 3px; }
.legal .updated { font-size: .9rem; margin-bottom: 26px; }
.legal .short { margin: 34px 0 10px; padding: 6px 0 4px; padding-inline-start: 22px; border-inline-start: 2px solid var(--accent); }
.legal .short h2 { margin-top: 0; }
html[lang="ar"] .legal h1, html[lang="ar"] .legal h2 { line-height: 1.5; }

.foot { background: #03070F; color: var(--muted-navy); border-top: 1px solid var(--line-navy); padding: 50px 0 120px; font-size: .9rem; position: relative; z-index: 2; }
.foot-in { display: grid; gap: 6px; }
.foot .logo { margin-bottom: 12px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cream); }
.foot p { margin: 0; }
/* A link alone on its line gets a 24px-tall tap area; the negative margin keeps the footer spacing as it was. */
.foot p > a:only-child { display: inline-block; padding: 4px 0; margin: -4px 0; }
.fine { font-size: .85rem; }

.callbar { display: none; }

/* Reveal motion */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.2s ease, transform 1.3s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
/* Keyboard users: anything that takes focus shows at once, without waiting for its scroll reveal. */
.js .reveal:focus-within, .js .reveal:focus, .js .sheet:focus-within { opacity: 1; transform: none; transition-duration: .15s; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .words .w, .js .sheet { opacity: 1; transform: none; transition: none; }
  .spin, .s-spin, .streams path, .bubble p::after, .orb, .drift img, .glow, .flight, .flutter, .bubble-dot, .pulse { animation: none; }
  .bubble-dot { opacity: .6; bottom: auto; top: calc(var(--x) * .6); }
  .stage-line path, .deco { stroke-dashoffset: 0; }
  .jstep .phone { opacity: 1; }
  .jstep .jtext h3 { color: var(--ink); } .jstep .jtext p { color: var(--ink-2); }
  .jstep::before, .stage::before, .steps li::before { clip-path: none !important; }
  .jstep::after, .stage::after, .steps li::after { animation: none !important; }
}

/* Tablet */
@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .menu { display: block; }
  .top-actions { gap: 10px; }
  /* The bottom bar (WhatsApp + first look) shows on tablets as well as phones. The footer's
     bottom padding already leaves room for it, and the scroll padding keeps
     anything reached with Tab (on the page or in the open menu) from stopping underneath it. */
  html, .menu { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(5,12,26,.96); border-top: 1px solid var(--line-navy); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
  .callbar a { display: grid; place-items: center; height: 50px; border: 1px solid rgba(245,228,200,.4); color: var(--cream); text-decoration: none; font-weight: 600; letter-spacing: .04em; }
  .callbar a.primary { background: var(--gold-grad); color: var(--brand); border-color: transparent; }
  .hero-in, .audit-in, .work-head { grid-template-columns: 1fr; }
  .hero-art { height: 460px; max-width: 640px; width: 100%; margin: 0 auto; }
  .steps::before, .steps::after { display: none; }
  .work-head { margin-bottom: 44px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 44px 30px; }
  .journey { grid-template-columns: 1fr; gap: 50px; justify-items: center; }
  .jline { display: none; }
  .jstep { grid-template-columns: auto 1fr; gap: 30px; text-align: start; align-items: center; max-width: 640px; width: 100%; }
  .jtext { margin-top: 0; }
  .stages { grid-template-columns: 1fr; gap: 40px; }
  .stage-line { display: none; }
  .stage { padding-inline: 0; }
  .start { grid-template-columns: 1fr; }
  /* Stacked layouts keep the desktop's sense of motion: a gold thread draws down from each step to
     the next as you scroll, and a spark keeps travelling along it. */
  .journey { gap: 92px; --cx: 98px; }
  .jstep:not(:last-child)::before, .stage:not(:last-child)::before, .steps li:not(:last-child)::before {
    content: ""; position: absolute; width: 1.5px; margin-inline-start: -.75px; pointer-events: none;
    background: linear-gradient(var(--accent) 55%, transparent 0) 0 0 / 1.5px 9px repeat-y;
    clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
  .jstep:not(:last-child)::after, .stage:not(:last-child)::after, .steps li:not(:last-child)::after {
    content: ""; position: absolute; width: 9px; height: 9px; margin-inline-start: -4.5px; border-radius: 50%; pointer-events: none;
    background: var(--gold-hi); box-shadow: 0 0 10px 2px rgba(201,164,92,.85); opacity: 0; }
  .jstep:not(:last-child)::before { top: calc(100% + 12px); height: 68px; inset-inline-start: var(--cx); }
  .jstep:not(:last-child)::after { --from: calc(100% + 12px); --to: calc(100% + 72px); top: var(--from); inset-inline-start: var(--cx); }
  .flows:not(:last-child)::before, .steps li.flows:not(:last-child)::before { clip-path: inset(0); }
  .flows:not(:last-child)::after { animation: spark 1.9s ease-in-out .9s infinite; }
  .stages { gap: 110px; }
  .stage:not(:last-child)::before { top: calc(100% + 8px); height: 94px; inset-inline-start: 50%; }
  .stage:not(:last-child)::after { --from: calc(100% + 8px); --to: calc(100% + 94px); top: var(--from); inset-inline-start: 50%; }
  .stage .milestone { transition: background .6s, color .6s, box-shadow .6s; }
  .stage.lit .milestone { background: var(--brand); color: var(--gold-hi); box-shadow: 0 0 0 10px var(--paper), 0 0 34px rgba(201,164,92,.45); }
  .steps { grid-template-columns: 1fr; gap: 44px; max-width: 560px; }
  .steps li { display: grid; grid-template-columns: 72px 1fr; column-gap: 22px; align-content: start; position: relative; }
  .steps .ring-n { grid-row: span 2; margin-bottom: 0; }
  .steps h3 { margin-top: 14px; }
  .steps li:not(:last-child)::before { top: 84px; bottom: -40px; inset-inline-start: 36px; }
  .steps li:not(:last-child)::after { --from: 84px; --to: calc(100% + 32px); top: var(--from); inset-inline-start: 36px; }
}
/* Phone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top-in { height: 68px; }
  .top-actions .btn { display: none; }
  .logo-mark { width: 30px; } .logo-word { width: 126px; }
  .hero { padding-top: 110px; min-height: auto; }
  .hero-art { height: 380px; margin-top: 10px; }
  .glow { width: 300px; height: 300px; }
  .flight img { width: 140px; }
  .small img { width: 30px; } .s2 img { width: 20px; }
  h2 { max-width: none; }
  .gallery { grid-template-columns: 1fr; gap: 40px; }
  .drift img { width: 160px; }
  .journey { --cx: 50%; }
  .jstep { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .jstep .phone { zoom: .8; }
  .jtext { margin-top: 18px; }
  .people { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }
  .person:nth-child(2) { margin-top: 26px; }
  .portrait::after { inset: 6px; }
  .person figcaption { padding-top: 10px; }
  .person b { font-size: 1.05rem; line-height: 1.15; }
  .person figcaption span { font-size: .56rem; letter-spacing: .14em; }
  .start, .form { padding: 30px 22px; }
  .start h3 { font-size: 1.9rem; }
  .vow { width: 100%; min-height: 0; }
  .vow p { opacity: 1; transform: none; }
  .hint { display: none; }
  .btn { width: 100%; }
  .top .btn, .lang, .back { width: auto; }
  .final { min-height: auto; }
  .menu-in { padding-top: 90px; }
  .menu-cta { align-self: stretch; }
}