/* ---- fonts (self-hosted, subset by unicode-range) ---- */
@font-face{font-family:'El Messiri';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/el-messiri-var-arabic.woff2") format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/el-messiri-var-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/el-messiri-var-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:'El Messiri';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/el-messiri-var-arabic.woff2") format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/el-messiri-var-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/el-messiri-var-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:'El Messiri';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/el-messiri-var-arabic.woff2") format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/el-messiri-var-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/el-messiri-var-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:'El Messiri';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/el-messiri-var-arabic.woff2") format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/el-messiri-var-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/el-messiri-var-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-300-arabic.woff2") format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-300-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-300-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-400-arabic.woff2") format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-400-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-400-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-500-arabic.woff2") format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-500-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-500-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}

/* ---- design base + motion signatures (from the approved build) ---- */
  body { margin: 0; background: #1A1222; }
  a { color: #4FBEC4; text-decoration: none; }
  a:hover { color: #A97FC7; }
  @keyframes lineUp { from { transform: translateY(112%); } to { transform: translateY(0); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes frameIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes marq { from { transform: translateX(0); } to { transform: translateX(50%); } }
  @keyframes ruleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  [data-reduce="1"] * { animation: none !important; }

/* ---- hover states (were baked by the editor runtime) ---- */
.hv0:hover{border-bottom-color: #4FBEC4 !important}
.hv1:hover{color: #4FBEC4 !important}
.hv2:hover{background: #F0EAE0 !important}
.hv3:hover{background: #4FBEC4 !important}
.hv4:hover{background: #1F7F86 !important}
.hv5:hover{border-bottom-color: #1F7F86 !important;color: #1F7F86 !important}
.hv6:hover{border-color: #4FBEC4 !important;color: #4FBEC4 !important}

/* =========================================================================
   Production layer — Alezz Laundry
   Nothing here changes the approved desktop composition. It resolves what the
   editor runtime used to do at render time, and makes the same design hold at
   tablet and phone widths instead of only shrinking it.
   ========================================================================= */

:root {
  --ink: #1A1222;
  --bone: #F0EAE0;
  --aqua: #4FBEC4;
  --teal: #1F7F86;
  --plum: #A97FC7;
  --rule-dark: rgba(240, 234, 224, 0.16);
  --rule-light: rgba(26, 18, 34, 0.22);
  --gutter: clamp(16px, 3.4vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Light type on a near-black ground renders heavy without this. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The editor runtime applied hover declarations with a 0s transition, so every
   colour change snapped. The approved motion spec asks for 240ms. */
.hv {
  transition: color .24s var(--ease), background-color .24s var(--ease),
              border-color .24s var(--ease), opacity .24s var(--ease);
}

/* Keyboard focus was invisible against the dark ground. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 1px;
}
video:focus-visible { outline: none; }

/* Replaces <image-slot>: the custom element sized its <img> to cover
   dimensions and centred it — identical to object-fit: cover / centre. */
.fill-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Short Arabic headings rag badly at fluid sizes. */
h1, h2 { text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:where(section) { scroll-margin-top: 8px; }

/* ------------------------------------------------------------- hero film */
[data-hero-frame] { background-color: var(--ink); }   /* no flash before the poster paints */

.hero-film {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* never letterbox, whatever the frame ratio */
  background-color: var(--ink);
}

/* ======================================================= divided flex rows
   These rows separate their cells with a single vertical border. The moment a
   row wraps to one column that border points the wrong way and the cells drift
   apart with a stray indent. A `flex: 1 1 Npx` row wraps below 2N, so a
   container query at that exact width fixes each row wherever it happens —
   not only at one guessed phone breakpoint. */
[data-divided] { container-type: inline-size; }
[data-divided="dark"] { --rule: var(--rule-dark); }
[data-divided="light"] { --rule: var(--rule-light); }

@container (max-width: 299px) {
  [data-basis="150"] > [data-cell] {
    border-inline-start: 0 !important;
    border-top: 1px solid var(--rule);
    padding-inline: 0 !important;
  }
  [data-basis="150"] > [data-cell]:first-child { border-top: 0; }
}
@container (max-width: 319px) {
  [data-basis="160"] > [data-cell] {
    border-inline-start: 0 !important;
    border-top: 1px solid var(--rule);
    padding-inline: 0 !important;
  }
  [data-basis="160"] > [data-cell]:first-child { border-top: 0; }
}
@container (max-width: 399px) {
  [data-basis="200"] > [data-cell] {
    border-inline-start: 0 !important;
    border-top: 1px solid var(--rule);
    padding-inline: 0 !important;
  }
  [data-basis="200"] > [data-cell]:first-child { border-top: 0; }
}
@container (max-width: 439px) {
  [data-basis="220"] > [data-cell] {
    border-inline-start: 0 !important;
    border-top: 1px solid var(--rule);
    padding-inline: 0 !important;
  }
  [data-basis="220"] > [data-cell]:first-child { border-top: 0; }
}
@container (max-width: 479px) {
  [data-basis="240"] > [data-cell] {
    border-inline-start: 0 !important;
    border-top: 1px solid var(--rule);
    padding-inline: 0 !important;
  }
  [data-basis="240"] > [data-cell]:first-child { border-top: 0; }
}

/* ---------------------------------------------------------------- header */
@media (max-width: 900px) {
  /* Two deliberate rows — brand + order button, then the section rule and the
     nav — instead of three ragged wrapped lines. */
  [data-header] {
    gap: 0 16px !important;
    padding-bottom: 0 !important;
    align-items: center;
  }
  [data-hdr-brand] { order: 1; padding-bottom: 15px; }
  [data-hdr-actions] { order: 2; padding-bottom: 15px; gap: 14px !important; }
  [data-hdr-nav] { order: 3; flex: 1 1 100%; }

  [data-hdr-tel] { display: none !important; }   /* the number repeats in the footer and final CTA */
  [data-hdr-cta] { padding: 10px 18px 11px !important; font-size: 13.5px !important; }

  /* Full-bleed hairline, and the links scroll rather than wrapping. */
  [data-hdr-nav] {
    border-top: 1px solid var(--rule-dark);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    gap: clamp(22px, 6vw, 34px) !important;
  }
  [data-hdr-nav]::-webkit-scrollbar { display: none; }
  [data-hdr-nav] > a {
    flex: 0 0 auto;
    padding-top: 14px;
    padding-bottom: 13px !important;
    white-space: nowrap;
  }
}

@media (max-width: 460px) {
  /* Below this the Arabic wordmark and the Latin lockup no longer fit beside
     the order button, and the brand wraps onto a line of its own. The approved
     phone mock carries the Arabic wordmark alone. */
  [data-hdr-brand] > div:nth-child(2),
  [data-hdr-brand] > div:nth-child(3) { display: none; }
}

/* ------------------------------------------------------------------ hero */
@media (max-width: 900px) {
  /* The approved plan leads with the film on phones, then the headline.
     `order` does that without disturbing the desktop source order. */
  [data-hero-media] {
    order: -1;
    flex: 1 1 100% !important;
    min-height: clamp(360px, 62vh, 560px) !important;
  }
  [data-hero-copy] {
    flex: 1 1 100% !important;
    padding-top: clamp(30px, 4.5vh, 52px) !important;
  }
  /* The seam gradient is a vertical band beside the film on desktop. Once the
     two stack, that band reads as a stray dark stripe down one edge — it
     belongs along the new horizontal seam. */
  [data-hero-seam] {
    inset-inline: 0 !important;
    top: auto !important;
    width: auto !important;
    height: clamp(60px, 11vh, 120px);
    background: linear-gradient(to top, var(--ink), rgba(26, 18, 34, 0)) !important;
  }
}

/* ----------------------------------------------------------- service index */
@media (max-width: 620px) {
  /* Rows wrapped unpredictably — some kept the price inline, others dropped it
     to a second line at a different indent. The approved mobile note asks for
     one shape: index + name, then note and price beneath. A small grid gives
     exactly that on every row instead of leaving it to flex wrapping. */
  [data-svc-row] {
    display: grid !important;
    grid-template-columns: 30px 1fr auto;
    grid-template-areas: "num name name" ". note price";
    align-items: baseline;
    column-gap: 14px;
    row-gap: 9px !important;
  }
  [data-svc-row] > :nth-child(1) { grid-area: num; }
  [data-svc-row] > :nth-child(2) {
    grid-area: name;
    white-space: normal !important;
    margin-inline-end: 0 !important;
  }
  [data-svc-row] > :nth-child(3) { grid-area: note; }
  [data-svc-row] > :nth-child(4) { grid-area: price; justify-self: end; }
}

/* --------------------------------------------------------- delivery banner */
@media (max-width: 760px) {
  /* A 21:9 band leaves no room for an overlaid headline on a phone, and this
     photo has no empty sky to crop into. Re-crop to a portrait band and bed the
     type on a bottom scrim — the treatment the final CTA already uses, so it
     stays inside the page's own language. */
  [data-banner] {
    aspect-ratio: 4 / 3 !important;
    min-height: clamp(430px, 66vh, 580px) !important;
  }
  [data-banner] > .fill-img { object-position: 30% 50%; }
  [data-banner-scrim] {
    inset: 0 !important;
    width: auto !important;
    background: linear-gradient(to top, var(--ink) 15%, rgba(26, 18, 34, 0.88) 46%, rgba(26, 18, 34, 0.12) 80%) !important;
  }
  [data-banner-copy] {
    top: auto !important;
    bottom: clamp(22px, 4vh, 36px);
    transform: none !important;
    inset-inline-end: var(--gutter);
    max-width: none !important;
  }
}

/* --------------------------------------------------------------- final CTA */
@media (max-width: 640px) {
  /* Two buttons of different widths, both right-aligned, read as an accident. */
  [data-cta-actions] { width: 100%; gap: 12px !important; }
  [data-cta-btn] { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* ------------------------------------------------------------------ offers */
@media (max-width: 560px) {
  [data-offer-hero] { row-gap: 20px !important; }
}

/* ======================================================= motion signature #2
   "Image reveal with clip-path plus a slow 2.4s scale on entering the
   viewport." Specified in the approved motion spec, never built. The wipe and
   the scale run on separate properties (clip-path, and the independent `scale`
   property) so a hover drift on `transform` can compose with them instead of
   fighting them. Pre-state is gated on .js-reveal — no JS, no hidden content. */
.js-reveal [data-reveal="image"] > .fill-img {
  clip-path: inset(100% 0 0 0);
  scale: 1.06;
}
.js-reveal [data-reveal="image"].is-in > .fill-img {
  clip-path: inset(0 0 0 0);
  scale: 1;
  transition: clip-path 1.25s var(--ease), scale 2.4s var(--ease);
}

/* Signature #1's fade-up vocabulary, reused for section openings and figures.
   --d is the stagger the head script assigns within each group. */
.js-reveal [data-reveal="up"] {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal [data-reveal="up"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease) var(--d, 0s), transform .85s var(--ease) var(--d, 0s);
}

/* ------------------------------------------------------------ hover detail */
@media (hover: hover) and (pointer: fine) {
  /* A slow drift on the figures that carry no overlaid type. The delivery
     banner and final CTA are excluded on purpose — their headlines sit on the
     picture, and moving it would make the type look like it is swimming. */
  .img-drift { overflow: hidden; }
  .img-drift > .fill-img { transition: transform 1.15s var(--ease); }
  .img-drift:hover > .fill-img { transform: scale(1.035); }

  /* Underline links: the rule under the text is already there as a track, so
     the accent draws across it instead of the colour snapping. --rest-rule is
     each link's own resting colour, kept so the track is left as designed. */
  a[data-underline] { position: relative; }
  a[data-underline]:hover { border-bottom-color: var(--rest-rule) !important; }
  a[data-underline]::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: var(--draw, var(--aqua));
    transition: width .42s var(--ease);
  }
  a[data-underline]:hover::after { width: 100%; }
  a.hv5[data-underline] { --draw: var(--teal); }

  /* Service index: the page's rule is "colour change only on hover", so the
     row tints and the figures brighten. The one addition is a hairline that
     draws across the existing divider in the reading direction — the same
     rule language the page already uses, not a new device. */
  [data-svc-row] {
    position: relative;
    transition: background-color .28s var(--ease);
  }
  [data-svc-row]::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: var(--aqua);
    transition: width .5s var(--ease);
  }
  [data-svc-row]:hover { background-color: rgba(240, 234, 224, 0.035); }
  [data-svc-row]:hover::after { width: 100%; }
  [data-svc-row] > * { transition: color .24s var(--ease); }
  /* The design sets these colours inline, which outranks a stylesheet rule —
     the same reason the editor runtime generated its hover CSS with
     !important. */
  [data-svc-row]:hover > :nth-child(1) { color: var(--bone) !important; }
  [data-svc-row]:hover > :nth-child(4) { color: var(--aqua) !important; }
}

/* --------------------------------------------------- touch feedback
   :hover never resolves on a touch screen, so taps had no acknowledgement. */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: transparent; }
  a:active { opacity: .7; transition: opacity .05s linear; }
  [data-cta-btn]:active, [data-hdr-cta]:active { transform: scale(.985); }
  [data-svc-row]:active { background-color: rgba(240, 234, 224, 0.045); }
}

/* ----------------------------------------------------------------- marquee */
[data-marquee-track] { will-change: transform; }

/* ----------------------------------------------------------- touch targets */
@media (pointer: coarse) {
  footer a[href^="#"] { padding-block: 3px; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Scroll reveals are never armed under reduced motion (the head script
     returns before setting .js-reveal), but belt and braces: */
  .js-reveal [data-reveal], .js-reveal [data-reveal] > .fill-img {
    clip-path: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .img-drift:hover > .fill-img { transform: none !important; }

  /* Swap the film for its own first frame — same picture, no movement. */
  .hero-film { display: none !important; }
  [data-hero-frame] {
    background-image: url("../img/hero-poster.webp");
    background-size: cover;
    background-position: 50% 30%;
    background-repeat: no-repeat;
  }
}