/* ============================================================================
   SANAM, the public marketing site.

   GROUND. Light is the default: "LIGHT is where Sanam welcomes." A marketing
   site is HELD, not watched, and it ends in a form, so cream carries it.
   Exactly one dark full-bleed spread is earned: THE CHANNELS, the machine room.
   It is a room, not a card: edge to edge, with the copper thread crossing it.

   ARABIC. Long-form Arabic is never set on dark (Naskh halates), so the dark
   spread carries a headline, one short line and a name grid, never a
   paragraph. Everything an Arabic reader must actually read sits on cream.

   COLOUR. Every hex below is a Sanam token, emitted by
   `sanam_brand.css_root()` / `css_dark()` from BRAND_TOKENS.json. Nothing is
   typed by hand; everything else is color-mix() over those tokens.

   TYPE. Marcellus + Hanken Grotesk (Latin), Amiri + Noto Naskh Arabic
   (Arabic). Display never below the h3 step. Arabic leading is Latin x1.3.

   SCREENSHOTS. Every product image renders at its own aspect ratio: width
   100%, height auto, no fixed frame and no object-fit. v1 dropped full-page
   captures 2,236px and 2,499px tall into a 280px box with `object-fit: cover`,
   which shows a magnified sliver of a page and reads as a zoom defect. The
   frames on this page are chosen at capture time instead: each shot is clipped
   to the REGION its caption talks about, so nothing has to be cropped here.
   ========================================================================== */

/* ---- the light world, DERIVED from BRAND_TOKENS.json via css_root() ---- */
:root {
  --sanam-ground: #F4EDE2;
  --sanam-ground-raised: #FBF7EF;
  --sanam-ground-sunk: #EBE2D3;
  --sanam-hairline: #DED2BE;
  --sanam-ink: #2B1F16;
  --sanam-ink-2: #5C4B3A;
  --sanam-ink-3: #6E5E49;
  --sanam-copper: #B87333;
  --sanam-copper-text: #8F5522;
  --sanam-saffron: #C8850A;
  --sanam-saffron-text: #8A5E08;
  --sanam-sea: #3E6F74;
  --sanam-sea-text: #2C5359;
  --sanam-green: #6F8260;
  --sanam-green-text: #52663F;
  --sanam-oud: #7A4B2E;
  --sanam-oud-text: #7A4B2E;
  --sanam-tan: #C4A882;
}
/* ---- the dark world, DERIVED via css_dark(). Same names, inverted values.
        Scoped to a spread, so a dark room is a room and never a card. ---- */
.room-dark {
  --sanam-ground: #2B1F16;
  --sanam-ground-raised: #2E2218;
  --sanam-ground-sunk: #241A12;
  --sanam-hairline: #4A3727;
  --sanam-ink: #F4EDE2;
  --sanam-ink-2: #D2BB9B;
  --sanam-ink-3: #BDA384;
  --sanam-copper: #B87333;
  --sanam-copper-text: #CC9248;
  --sanam-saffron: #C8850A;
  --sanam-saffron-text: #E6AE45;
  --sanam-sea: #4D858B;
  --sanam-sea-text: #5E9AA0;
  --sanam-green: #84996F;
  --sanam-green-text: #9DB389;
  --sanam-oud: #7A4B2E;
  --sanam-tan: #C4A882;
  --sanam-tan-text: #C4A882;
  /* --edge nests a var(), and a nested var() is resolved where the custom
     property is DECLARED, not where it is used. So the dark room has to
     re-declare it, or it would inherit the light world's hairline. */
  --edge: 1px solid var(--sanam-hairline);
}

/* ---- the four faces, self-hosted ----
   Every block below is what Google Fonts serves a current Chrome for the same
   four families, weights and subsets, with only the URLs rewritten to this
   origin. Same bytes, same unicode-range subsetting, same font-display, so the
   glyphs and metrics are unchanged and no request ever leaves the site to
   fetch a typeface. The files live under static/vendor/fonts/<family>/. */
/* arabic */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/amiri/J7aRnpd8CGxBHpUrtLMA7w.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;
}
/* latin-ext */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/amiri/J7aRnpd8CGxBHpUgtLMA7w.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;
}
/* latin */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/amiri/J7aRnpd8CGxBHpUutLM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/amiri/J7acnpd8CGxBHp2VkaY6zp5yGw.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;
}
/* latin-ext */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/amiri/J7acnpd8CGxBHp2VkaYxzp5yGw.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;
}
/* latin */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/amiri/J7acnpd8CGxBHp2VkaY_zp4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpS59CjCQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/hanken_grotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.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;
}
/* latin-ext */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/marcellus/wEO_EBrOk8hQLDvIAF81WPoK7Es.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;
}
/* latin */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/marcellus/wEO_EBrOk8hQLDvIAF81VvoK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2DHV20Lg.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;
}
/* math */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN36HV20Lg.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN3oHV20Lg.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2IHV20Lg.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;
}
/* latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2GHV0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2DHV20Lg.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;
}
/* math */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN36HV20Lg.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN3oHV20Lg.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2IHV20Lg.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;
}
/* latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2GHV0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2DHV20Lg.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;
}
/* math */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN36HV20Lg.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN3oHV20Lg.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2IHV20Lg.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;
}
/* latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/vendor/fonts/noto_naskh_arabic/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2GHV0.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;
}
/* ---- system ---- */
:root {
  --f-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --f-body: 'Hanken Grotesk', 'Segoe UI', Arial, sans-serif;
  --lh-mult: 1;                 /* Arabic multiplies this to 1.3 */
  --maxw: 1180px;
  --rail: 150px;
  --gap: clamp(22px, 4vw, 40px);
  --pad: clamp(20px, 5vw, 36px);
  --sec: clamp(76px, 9vw, 128px);
  --r-card: 16px;
  --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --edge: 1px solid var(--sanam-hairline);
}
/* Arabic: its own two faces, and MORE leading than Latin at the same size.
   Georgia is never in this stack, it has zero Arabic coverage. */
:root:lang(ar), [lang="ar"] {
  --f-display: 'Amiri', 'Traditional Arabic', serif;
  --f-body: 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --lh-mult: 1.3;
}
/* A Latin island inside an Arabic page resets to the Latin faces, and back
   again. Declared AFTER the Arabic rule so a nested lang wins over its host. */
:root:lang(en), [lang="en"] {
  --f-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --f-body: 'Hanken Grotesk', 'Segoe UI', Arial, sans-serif;
  --lh-mult: 1;
}
/* An Arabic WORD inside a Latin sentence. font-family inherits as a resolved
   string, not as a var(), so a lang attribute alone cannot change the face:
   the word has to ask for the Arabic stack by name. Georgia is never in it. */
.arw { font-family: 'Noto Naskh Arabic', 'Traditional Arabic', serif; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--sanam-ground);
  color: var(--sanam-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: calc(1.55 * var(--lh-mult));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  color-scheme: light;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
  outline: 3px solid var(--sanam-copper-text);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: color-mix(in srgb, var(--sanam-saffron) 32%, transparent); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ltr { direction: ltr; unicode-bidi: isolate; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.skip {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 200;
  background: var(--sanam-ink); color: var(--sanam-ground);
  padding: 12px 18px; border-end-end-radius: 10px; font-weight: 700;
}
.skip:focus { inset-inline-start: 0; }

/* ---- type ---- */
h1, h2, h3, .display {
  font-family: var(--f-display); font-weight: 400;
  line-height: calc(1.12 * var(--lh-mult)); text-wrap: balance;
}
h1 { font-size: clamp(2.55rem, 6vw, 4.1rem); line-height: calc(1.04 * var(--lh-mult)); }
h2 { font-size: clamp(1.95rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.32rem, 2vw, 1.55rem); }
h4 { font-family: var(--f-body); font-size: 1rem; font-weight: 700; }
em { font-style: normal; color: var(--sanam-copper-text); }
.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: calc(1.5 * var(--lh-mult));
  color: var(--sanam-ink-2); max-width: 60ch;
}
.lede b, p b { color: var(--sanam-ink); font-weight: 600; }
p { color: var(--sanam-ink-2); }
.kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sanam-copper-text); line-height: 1.4;
}
[lang="ar"] .kicker { letter-spacing: 0; text-transform: none; font-size: .86rem; }

/* ---- the star: FOUR points, saffron, centred. Decorative only. ---- */
.star { width: 1em; height: 1em; flex: none; fill: var(--sanam-saffron); }

/* ---- buttons ----
   The primary is charcoal on cream (13.78:1). A copper fill cannot carry
   16px body text at AA in either ink, so copper stays the ring and the thread. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding-inline: 28px; border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 700; cursor: pointer; border: 2px solid transparent;
  transition: transform .25s var(--ease), background .25s ease, border-color .25s ease, box-shadow .25s ease;
  text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-p {
  background: var(--sanam-ink); color: var(--sanam-ground);
  border-color: var(--sanam-ink);
  box-shadow: 0 1px 0 var(--sanam-copper) inset;
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--sanam-ink) 26%, transparent); }
.btn-s {
  background: transparent; color: var(--sanam-copper-text); border-color: var(--sanam-copper);
}
.btn-s:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--sanam-copper) 10%, transparent); }
.room-dark .btn-p { background: var(--sanam-ink); color: var(--sanam-ground); border-color: var(--sanam-ink); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.arrow { transition: transform .25s var(--ease); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
.btn:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }

/* The CTA pair, repeated down the page: low friction first, then higher touch. */
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ctas-mt { margin-block-start: 40px; }

/* ============================ NAV ============================ */
.nav {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: color-mix(in srgb, var(--sanam-ground) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid transparent; transition: border-color .3s ease;
}
.nav.scrolled { border-block-end: var(--edge); }
.nav .row { display: flex; align-items: center; gap: 14px; min-height: 76px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
/* 40px is the full seal's floor; sitting on the floor is where the star stops
   reading, so the everyday lockup gets a little air above it. */
.brand .seal { width: 44px; height: 44px; flex: none; }
.brand .nm { display: flex; flex-direction: column; line-height: 1; }
.brand .nm .en { font-family: 'Marcellus', Georgia, serif; font-size: 1.3rem; letter-spacing: .18em; }
.brand .nm .ar { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: .95rem; color: var(--sanam-copper-text); margin-block-start: 4px; }
.nav .links { display: flex; gap: 24px; margin-inline-start: auto; font-size: .95rem; font-weight: 500; }
.nav .links a { color: var(--sanam-ink-2); padding-block: 6px; border-block-end: 2px solid transparent; white-space: nowrap; }
.nav .links a:hover { color: var(--sanam-ink); border-block-end-color: var(--sanam-copper); }
.nav .tools { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.nav .links + .tools { margin-inline-start: 22px; }
.lang {
  min-height: 42px; padding-inline: 16px; border-radius: var(--r-pill);
  border: 1px solid var(--sanam-hairline); background: transparent;
  color: var(--sanam-ink-2); font-size: .9rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .2s ease, color .2s ease;
}
.lang:hover { border-color: var(--sanam-copper); color: var(--sanam-ink); }
.lang .glyph { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.05rem; }
[lang="ar"] .lang .glyph { font-family: 'Marcellus', Georgia, serif; font-size: .95rem; letter-spacing: .08em; }
.nav .cta {
  min-height: 42px; padding-inline: 20px; border-radius: var(--r-pill);
  background: var(--sanam-ink); color: var(--sanam-ground);
  font-size: .9rem; font-weight: 700; display: inline-flex; align-items: center;
  transition: transform .2s ease; white-space: nowrap;
}
.nav .cta:hover { transform: translateY(-1px); }
/* Narrow screens keep the navigation: it scrolls sideways on its own line
   rather than disappearing behind a button that isn't there. */
@media (max-width: 1050px) {
  .nav .row { min-height: 66px; }
  .nav .tools, .nav .links + .tools { margin-inline-start: auto; }
  .nav .links {
    order: 3; width: 100%; margin-inline-start: 0; gap: 22px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-block: 9px 11px; border-block-start: var(--edge);
    scrollbar-width: none;
  }
  .nav .links::-webkit-scrollbar { display: none; }
  :where(section[id], header[id]) { scroll-margin-block-start: 132px; }
}
@media (max-width: 520px) { .brand .nm .ar { display: none; } .nav .cta { padding-inline: 15px; } }

/* ============================ RAIL ============================
   The rail is the brand's posture: it carries the kicker and sits leading,
   left in LTR, right in RTL. It collapses on narrow screens. */
.railed { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gap); }
.railed > .rail { position: relative; padding-inline-end: 18px; }
.railed > .rail::after {
  content: ""; position: absolute; inset-inline-end: 0; inset-block: 4px 0;
  width: 1px; background: linear-gradient(to bottom, var(--sanam-copper), transparent);
}
@media (max-width: 900px) {
  .railed { grid-template-columns: 1fr; gap: 14px; }
  .railed > .rail { padding-inline-end: 0; }
  .railed > .rail::after { display: none; }
}

section { padding-block: var(--sec); position: relative; }
:where(section[id], header[id]) { scroll-margin-block-start: 94px; }
.shead h2 { margin-block-start: 12px; }
.shead .lede { margin-block-start: 18px; }
.hr { height: 1px; background: var(--sanam-hairline); border: 0; }

/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; } .d3 { transition-delay: .21s; }

/* ============================ HERO ============================ */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 9vh, 96px) 0;
  background:
    radial-gradient(900px 420px at 88% -10%, color-mix(in srgb, var(--sanam-saffron) 16%, transparent), transparent 62%),
    radial-gradient(1100px 500px at 8% -14%, color-mix(in srgb, var(--sanam-copper) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--sanam-ground-raised), var(--sanam-ground) 70%);
}
.hero .inner { position: relative; z-index: 2; max-width: 46rem; padding-block-end: clamp(40px, 6vh, 74px); }
.hero h1 { margin-block-start: 18px; }
.hero .lede { margin-block-start: 22px; font-size: clamp(1.1rem, 1.7vw, 1.32rem); }
.hero .arline {
  display: block; width: fit-content;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem); color: var(--sanam-copper-text);
  margin-block-start: 20px;
}
.hero .arline [lang="ar"] { font-family: 'Amiri', 'Traditional Arabic', serif; }
.hero .arline [lang="en"] { font-family: 'Marcellus', Georgia, serif; letter-spacing: .1em; }
.hero .ctas { margin-block-start: 32px; }
.trial {
  display: inline-flex; align-items: center; gap: 10px; margin-block-start: 22px;
  font-size: .95rem; font-weight: 600; color: var(--sanam-ink);
  background: color-mix(in srgb, var(--sanam-saffron) 14%, var(--sanam-ground-raised));
  border: 1px solid color-mix(in srgb, var(--sanam-saffron) 40%, transparent);
  border-radius: var(--r-pill); padding: 9px 18px;
}
/* the horizon: the seal's own landscape, unrolled. It is a stamp, not a glyph,
   and it NEVER mirrors, in either direction.
   The landscape CLOSES the hero rather than sitting behind it. The crest and
   the star live at the right-hand end of the mark, and the mark may not be
   mirrored, so in RTL, where the reader's column is also on the right, an
   overlapping band puts the Northern Star on top of the headline. Letting the
   band follow the text is the one arrangement that is correct in both
   directions. Width and height are both auto-from-aspect, so the viewBox is
   never cropped at any viewport. */
.horizon {
  position: relative; z-index: 1; width: 100%; overflow: hidden;
  pointer-events: none; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.horizon svg { width: 100%; height: auto; display: block; }
.h-sun { fill: url(#sunG); }
.h-land { fill: url(#landG); }
.h-fore { fill: url(#foreG); }
.h-line { fill: none; stroke: url(#lineG); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.h-glow { fill: none; stroke: var(--sanam-copper); stroke-width: 7; opacity: .18; stroke-linecap: round; stroke-linejoin: round; filter: url(#soft); }
.h-star { fill: var(--sanam-saffron); }
.h-starglow { fill: url(#starG); }

/* "the land opens", drawn once per session */
.draw-path { stroke-dasharray: 1000; stroke-dashoffset: 0; }
body.opens .draw-path { stroke-dashoffset: 1000; animation: draw 1.9s cubic-bezier(.33,.72,.28,1) .15s forwards; }
body.opens .draw-fill { opacity: 0; animation: fadein 1.4s ease .7s forwards; }
body.opens .draw-star { opacity: 0; transform: scale(.75); transform-origin: center; transform-box: fill-box;
  animation: settle 1s cubic-bezier(.22,.68,.24,1) 1.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes settle { 0% { opacity: 0; transform: scale(.75); } 60% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }

/* ---- the fact rail under the hero ---- */
.facts { border-block: var(--edge); background: var(--sanam-ground-raised); position: relative; z-index: 2; }
.facts .row { display: flex; flex-wrap: wrap; gap: 12px 34px; justify-content: center; padding-block: 20px; }
.fact { display: inline-flex; align-items: center; gap: 9px; font-size: .93rem; color: var(--sanam-ink-2); }
.fact svg { width: 17px; height: 17px; flex: none; stroke: var(--sanam-green-text); fill: none; stroke-width: 2.2; }
.fact b { color: var(--sanam-ink); font-weight: 600; }

/* ==================== THE BEFORE / AFTER GRID ====================
   The fastest way to explain a platform is to put the reader's own working day
   next to the same day on it. Two columns, one row per job, and the row is the
   unit: on a phone the pair stacks and stays a pair. */
.ba { margin-block-start: 44px; border: var(--edge); border-radius: var(--r-card); overflow: hidden; background: var(--sanam-ground-raised); }
.ba-head { display: grid; grid-template-columns: 1fr 1fr; background: var(--sanam-ground-sunk); border-block-end: var(--edge); }
.ba-head div { padding: 14px 22px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sanam-ink-3); }
.ba-head div + div { border-inline-start: var(--edge); color: var(--sanam-copper-text); }
[lang="ar"] .ba-head div { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.ba-row { display: grid; grid-template-columns: 1fr 1fr; border-block-start: var(--edge); }
.ba-row:first-child { border-block-start: 0; }
.ba-row > div { padding: 16px 22px; font-size: .96rem; line-height: calc(1.5 * var(--lh-mult)); display: flex; gap: 11px; align-items: flex-start; }
.ba-row .was { color: var(--sanam-ink-3); }
.ba-row .now { border-inline-start: var(--edge); color: var(--sanam-ink); background: color-mix(in srgb, var(--sanam-green) 6%, transparent); }
.ba-row svg { width: 16px; height: 16px; flex: none; margin-block-start: 4px; fill: none; stroke-width: 2.2; }
.ba-row .was svg { stroke: var(--sanam-oud-text); }
.ba-row .now svg { stroke: var(--sanam-green-text); }
@media (max-width: 760px) {
  .ba-head { display: none; }
  .ba-row { grid-template-columns: 1fr; }
  .ba-row .now { border-inline-start: 0; border-block-start: var(--edge); }
}

/* ============================ STEPS ============================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-block-start: 52px; border-block-start: var(--edge); }
.step { padding: 30px 26px 8px; border-inline-start: var(--edge); }
.step:first-child { border-inline-start: 0; padding-inline-start: 0; }
.step .no {
  font-family: var(--f-display); font-size: 1.5rem; color: var(--sanam-copper-text);
  display: block; margin-block-end: 10px;
}
.step h3 { font-size: 1.28rem; margin-block-end: 9px; }
.step p { font-size: .95rem; line-height: calc(1.6 * var(--lh-mult)); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-inline-start: 0; border-block-start: var(--edge); padding: 26px 0 6px; }
  .step:first-child { border-block-start: 0; }
}

/* ==================== THE PRODUCT FIGURE ====================
   A window onto the running app: a chrome bar that names the surface, the
   capture at its OWN aspect ratio, and a caption that says what it shows.
   No fixed height anywhere in here, deliberately. */
.fig { border: var(--edge); border-radius: var(--r-card); overflow: hidden; background: var(--sanam-ground-raised); margin-block-start: 34px; }
.fig .chrome { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-block-end: var(--edge); background: var(--sanam-ground-sunk); }
.fig .chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--sanam-hairline); flex: none; }
.fig .chrome .mt { margin-inline-start: 8px; font-size: .75rem; color: var(--sanam-ink-3); direction: ltr; unicode-bidi: isolate; }
.fig img { width: 100%; height: auto; }
.fig figcaption { padding: 16px 20px 18px; font-size: .93rem; line-height: calc(1.55 * var(--lh-mult)); color: var(--sanam-ink-2); border-block-start: var(--edge); }
.shotnote { margin-block-start: 22px; font-size: .88rem; color: var(--sanam-ink-3); max-width: 74ch; line-height: calc(1.55 * var(--lh-mult)); }

/* ==================== CAPABILITY GRID ==================== */
.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--gap); margin-block-start: 40px; }
.cap { padding: 20px 0; border-block-start: var(--edge); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; }
.cap svg { width: 20px; height: 20px; margin-block-start: 3px; fill: none; stroke: var(--sanam-copper); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cap h3 { font-size: 1.1rem; margin-block-end: 5px; }
.cap p { font-size: .92rem; line-height: calc(1.55 * var(--lh-mult)); }
@media (max-width: 760px) { .caps { grid-template-columns: 1fr; } }

/* ==================== DISTRIBUTION SHELVES ==================== */
.shelf { margin-block-start: 56px; }
.shelf:first-of-type { margin-block-start: 44px; }
.shelf .n {
  font-family: var(--f-display); font-size: 1.2rem; color: var(--sanam-copper-text);
  display: inline-block; margin-inline-end: 12px;
}
.shelf h3 { display: inline; font-size: clamp(1.4rem, 2.2vw, 1.7rem); }
.shelf p { margin-block-start: 12px; font-size: 1rem; line-height: calc(1.6 * var(--lh-mult)); max-width: 62ch; }

/* ==================== THE SIX SOURCE MARKETS ==================== */
.mkts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-start: 30px; }
/* A card is as tall as the tallest in its row, so the flag is pushed to the
   floor rather than floating wherever the copy happens to stop. */
.mkt { border: var(--edge); border-radius: var(--r-card); padding: 20px 20px 18px; background: var(--sanam-ground-raised); display: flex; flex-direction: column; }
.mkt .mk-flag { margin-block-start: auto; align-self: flex-start; }
.mkt-h { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.32rem); margin-block-start: 40px; }
.mkt .cty { font-family: var(--f-display); font-size: 1.25rem; color: var(--sanam-ink); }
.mkt p { font-size: .9rem; margin-block-start: 6px; line-height: calc(1.5 * var(--lh-mult)); }
.mk-flag {
  display: inline-block; margin-block-start: 14px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--sanam-saffron) 45%, transparent);
  color: var(--sanam-saffron-text); background: color-mix(in srgb, var(--sanam-saffron) 12%, transparent);
}
[lang="ar"] .mk-flag { letter-spacing: 0; text-transform: none; font-size: .76rem; }
@media (max-width: 900px) { .mkts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .mkts { grid-template-columns: 1fr; } }

/* ==================== THE CHANNELS, THE ONE DARK ROOM ====================
   Full-bleed, edge to edge, its own room. Copper is the thread and it is the
   same value either side of the door, so the eye reads continuity. */
.room-dark {
  background: var(--sanam-ground); color: var(--sanam-ink);
  border-block: 1px solid var(--sanam-copper);
  color-scheme: dark;
}
.room-dark p { color: var(--sanam-ink-2); }
.room-dark .lede { color: var(--sanam-ink-2); }
.room-dark .kicker { color: var(--sanam-copper-text); }
.room-dark em { color: var(--sanam-copper-text); }
.room-dark .railed > .rail::after { background: linear-gradient(to bottom, var(--sanam-copper-text), transparent); }

.otas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-block-start: 44px; border-block-start: 1px solid var(--sanam-hairline); }
.ota {
  padding: 22px 24px; border-block-end: 1px solid var(--sanam-hairline);
  border-inline-start: 1px solid var(--sanam-hairline);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.ota:nth-child(3n + 1) { border-inline-start: 0; padding-inline-start: 0; }
/* Name on its own line, then badge + market. Uniform whatever the name's
   length, otherwise "Airbnb Experiences" alone sets a taller row. */
.ota .nm { font-family: 'Marcellus', Georgia, serif; font-size: 1.22rem; color: var(--sanam-ink); direction: ltr; unicode-bidi: isolate; flex-basis: 100%; }
.ota .mk { font-size: .86rem; color: var(--sanam-ink-3); }
.ota .badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
  border: 1px solid var(--sanam-hairline); color: var(--sanam-ink-3);
}
[lang="ar"] .ota .badge { letter-spacing: 0; text-transform: none; font-size: .76rem; }
.ota.live { background: color-mix(in srgb, var(--sanam-green) 12%, transparent); }
.ota.live .badge {
  color: var(--sanam-green-text); border-color: color-mix(in srgb, var(--sanam-green) 55%, transparent);
  background: color-mix(in srgb, var(--sanam-green) 14%, transparent);
}
.ota.live .nm { color: var(--sanam-ink); }
.roadnote {
  margin-block-start: 26px; font-size: .92rem; color: var(--sanam-ink-3);
  max-width: 74ch; line-height: calc(1.6 * var(--lh-mult));
}
@media (max-width: 860px) {
  .otas { grid-template-columns: 1fr; }
  .ota { border-inline-start: 0; padding-inline-start: 0; }
}

/* ==================== BRING YOUR OWN SYSTEM ====================
   A callout, not a headline: it sits in its own band, one step quieter than a
   section, because what is true today is smaller than what people assume. */
.byo { background: var(--sanam-ground-sunk); border-block: var(--edge); }
.byo h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.byo .roadmap {
  margin-block-start: 20px; padding: 18px 22px; border-radius: var(--r-card);
  border: 1px dashed color-mix(in srgb, var(--sanam-copper) 55%, transparent);
  background: color-mix(in srgb, var(--sanam-copper) 6%, transparent);
  font-size: .96rem; line-height: calc(1.6 * var(--lh-mult)); max-width: 66ch;
}
.byo .roadmap b { color: var(--sanam-ink); }

/* ============================ PRICING ============================ */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-block-start: 30px; align-items: stretch; }
.plan {
  border: var(--edge); border-radius: var(--r-card); padding: 30px 28px 32px;
  background: var(--sanam-ground-raised); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--sanam-ink) 10%, transparent); }
.plan.pick { border-color: var(--sanam-copper); border-width: 2px; }
.plan .pn { font-family: 'Marcellus', Georgia, serif; font-size: 1.6rem; direction: ltr; unicode-bidi: isolate; }
.plan .pw { font-size: .93rem; color: var(--sanam-ink-3); margin-block-start: 6px; min-height: 2.8em; }
.plan .fee { margin-block-start: 20px; padding-block-start: 20px; border-block-start: var(--edge); }
.plan .fee .amt { font-family: var(--f-display); font-size: 2.1rem; line-height: 1.1; color: var(--sanam-ink); }
.plan .fee .per { font-size: .9rem; color: var(--sanam-ink-3); margin-block-start: 5px; }
/* The charged number, never a footnote: an operator reads "SAR 350 a month"
   and pictures SAR 350 leaving the account this month. The year is what the
   bank will show, so it sits in the card at full contrast. */
.plan .yr {
  margin-block-start: 12px; padding: 9px 13px; border-radius: 10px;
  background: color-mix(in srgb, var(--sanam-copper) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sanam-copper) 34%, transparent);
  font-size: .9rem; font-weight: 600; color: var(--sanam-ink);
  line-height: calc(1.45 * var(--lh-mult));
}
.plan .take { margin-block-start: 18px; display: flex; align-items: baseline; gap: 10px; }
.plan .take .pc { font-family: var(--f-display); font-size: 2.4rem; color: var(--sanam-copper-text); line-height: 1; }
.plan .take .lb { font-size: .92rem; color: var(--sanam-ink-2); }
.plan .cross {
  margin-block-start: 18px; font-size: .87rem; color: var(--sanam-ink-3);
  line-height: calc(1.5 * var(--lh-mult)); border-inline-start: 2px solid var(--sanam-hairline);
  padding-inline-start: 12px;
}
.plan .go { margin-block-start: auto; padding-block-start: 24px; }
.plan .go .btn { width: 100%; }
@media (max-width: 900px) { .pgrid { grid-template-columns: 1fr; } .plan .pw { min-height: 0; } }

.billing {
  margin-block-start: 24px; border: var(--edge); border-radius: var(--r-card);
  background: var(--sanam-ground-raised); padding: 20px 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.billing svg { width: 20px; height: 20px; flex: none; margin-block-start: 3px; fill: none; stroke: var(--sanam-copper); stroke-width: 2; }
.billing p { font-size: .98rem; line-height: calc(1.6 * var(--lh-mult)); }
.billing p b { color: var(--sanam-ink); }
.billing p + p { margin-block-start: 10px; }

.same {
  margin-block-start: 26px; border: var(--edge); border-radius: var(--r-card);
  background: var(--sanam-ground-sunk); padding: 26px 28px;
  display: flex; gap: 18px; align-items: flex-start;
}
.same .star { width: 24px; height: 24px; margin-block-start: 2px; }
.same p { font-size: 1rem; line-height: calc(1.6 * var(--lh-mult)); }
.same p b { color: var(--sanam-ink); }

/* the tier calculator: plain arithmetic, no promises */
.calc { margin-block-start: 26px; border: var(--edge); border-radius: var(--r-card); padding: 26px 28px; background: var(--sanam-ground-raised); }
.calc h3 { font-size: 1.25rem; }
.calc .cin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-start: 16px; }
.calc label { font-size: .93rem; color: var(--sanam-ink-2); }
.calc input {
  min-height: 48px; padding-inline: 16px; border-radius: 10px;
  border: 1px solid var(--sanam-hairline); background: var(--sanam-ground);
  font-size: 1.05rem; font-weight: 600; width: 12rem; direction: ltr; text-align: start;
  font-variant-numeric: tabular-nums;
}
.calc input:focus { border-color: var(--sanam-copper); }
.crow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-block-start: 20px; }
.cbox { border: var(--edge); border-radius: 12px; padding: 16px 18px; background: var(--sanam-ground); }
/* 10% of Asir Green over cream reads as grey, and the brand has no grey. */
.cbox.best { border-color: var(--sanam-green-text); background: color-mix(in srgb, var(--sanam-green) 20%, var(--sanam-ground)); }
.cbox .cn { font-family: 'Marcellus', Georgia, serif; font-size: 1.05rem; direction: ltr; unicode-bidi: isolate; }
.cbox .cv { font-size: 1.5rem; font-weight: 700; margin-block-start: 6px; font-variant-numeric: tabular-nums; }
.cbox .ce { font-size: .84rem; color: var(--sanam-ink-3); margin-block-start: 3px; font-variant-numeric: tabular-nums; }
.cbox .cf { font-size: .8rem; color: var(--sanam-ink-3); margin-block-start: 6px; }
.cbox.best .cf { color: var(--sanam-green-text); font-weight: 700; }
.finep { margin-block-start: 20px; font-size: .87rem; color: var(--sanam-ink-3); line-height: calc(1.55 * var(--lh-mult)); }
@media (max-width: 700px) { .crow { grid-template-columns: 1fr; } }

/* ============================ COMPANY ============================ */
.cogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-block-start: 44px; }
.cocard { border: var(--edge); border-radius: var(--r-card); padding: 26px 24px; background: var(--sanam-ground-raised); }
.cocard h3 { font-size: 1.18rem; margin-block-end: 8px; }
.cocard p { font-size: .93rem; line-height: calc(1.58 * var(--lh-mult)); }
@media (max-width: 900px) { .cogrid { grid-template-columns: 1fr; } }

/* ---- the name ---- */
.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-block-start: 40px; align-items: center; }
.bigword {
  font-family: 'Amiri', 'Traditional Arabic', serif; direction: rtl;
  font-size: clamp(4rem, 11vw, 7.5rem); line-height: 1.25; color: var(--sanam-ink);
}
.bigword .sub { display: block; font-family: var(--f-body); direction: inherit; font-size: 1rem; color: var(--sanam-ink-3); letter-spacing: .04em; margin-block-start: 4px; }
.tagl { margin-block-start: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: 'Marcellus', Georgia, serif; font-size: 1.28rem; }
.tagl .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sanam-copper); flex: none; }
.tagl .ar { font-family: 'Amiri', 'Traditional Arabic', serif; direction: rtl; color: var(--sanam-copper-text); }
.legend { display: flex; flex-direction: column; gap: 14px; margin-block-start: 26px; }
.leg { display: flex; gap: 14px; align-items: flex-start; font-size: .93rem; }
.leg .gx { width: 34px; height: 34px; flex: none; }
.leg b { display: block; color: var(--sanam-ink); font-weight: 600; }
.leg span span { color: var(--sanam-ink-3); }
.bigseal { width: min(230px, 60%); height: auto; margin-inline: auto; }
@media (max-width: 820px) { .name-grid { grid-template-columns: 1fr; } }

/* ============================ CLOSE / CTA ============================ */
.close { background: var(--sanam-ground-sunk); border-block: var(--edge); text-align: center; }
.close .lede { margin-inline: auto; margin-block-start: 18px; }
.close .ctas { justify-content: center; margin-block-start: 32px; }

/* ============================ CONTACT ============================ */
.pgridx { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gap); margin-block-start: 40px; align-items: start; }
.formpanel { border: var(--edge); border-radius: var(--r-card); padding: clamp(24px, 3vw, 34px); background: var(--sanam-ground-raised); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 7px; margin-block-end: 16px; }
.fld label { font-size: .88rem; font-weight: 600; color: var(--sanam-ink-2); }
.fld .opt { font-weight: 400; color: var(--sanam-ink-3); }
.fld input, .fld select, .fld textarea {
  min-height: 48px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--sanam-hairline); background: var(--sanam-ground);
  font-size: 1rem; width: 100%;
}
.fld textarea { min-height: 96px; resize: vertical; line-height: calc(1.5 * var(--lh-mult)); }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--sanam-copper); }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { direction: ltr; }
.terms { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; color: var(--sanam-ink-2); margin-block: 6px 20px; }
.terms input { width: 20px; height: 20px; flex: none; margin-block-start: 2px; accent-color: var(--sanam-copper); }
.terms a { color: var(--sanam-copper-text); text-decoration: underline; text-underline-offset: 2px; }
.cf-turnstile { margin-block-end: 14px; }
.fstatus { margin-block-start: 14px; font-size: .93rem; padding: 12px 14px; border-radius: 10px; }
.fstatus.ok { color: var(--sanam-green-text); background: color-mix(in srgb, var(--sanam-green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sanam-green) 40%, transparent); }
.fstatus.err { color: var(--sanam-oud-text); background: color-mix(in srgb, var(--sanam-oud) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sanam-oud) 40%, transparent); }
.falt { margin-block-start: 16px; font-size: .9rem; color: var(--sanam-ink-3); }
.falt a { color: var(--sanam-copper-text); text-decoration: underline; text-underline-offset: 2px; }
.aside { border: var(--edge); border-radius: var(--r-card); padding: 28px 26px; background: var(--sanam-ground-sunk); }
.aside h3 { font-size: 1.22rem; margin-block-end: 10px; }
.aside ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-block-start: 18px; }
.aside li { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--sanam-ink-2); }
.aside li svg { width: 17px; height: 17px; flex: none; margin-block-start: 3px; stroke: var(--sanam-green-text); fill: none; stroke-width: 2.2; }
@media (max-width: 900px) { .pgridx, .frow { grid-template-columns: 1fr; } }

/* ============================ FOOTER ============================ */
footer { border-block-start: var(--edge); background: var(--sanam-ground-raised); padding-block: 56px 30px; }
.frow2 { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--gap); }
.fbrand .meaning { font-size: .92rem; color: var(--sanam-ink-3); margin-block-start: 16px; max-width: 40ch; line-height: calc(1.6 * var(--lh-mult)); }
.fcol .h { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sanam-ink-3); margin-block-end: 14px; }
[lang="ar"] .fcol .h { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.fcol a { display: block; font-size: .93rem; color: var(--sanam-ink-2); padding-block: 6px; }
.fcol a:hover { color: var(--sanam-copper-text); }
.fbot { margin-block-start: 40px; padding-block-start: 22px; border-block-start: var(--edge); font-size: .86rem; color: var(--sanam-ink-3); display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; line-height: calc(1.6 * var(--lh-mult)); }
.fbot a { color: var(--sanam-copper-text); }
.sw { display: flex; gap: 6px; }
.sw i { width: 14px; height: 14px; border-radius: 50%; display: block; border: 1px solid var(--sanam-hairline); }
@media (max-width: 900px) { .frow2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .frow2 { grid-template-columns: 1fr; } }

/* ---- reduced motion: everything still ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .draw-path { stroke-dashoffset: 0 !important; }
}
@media (forced-colors: active) { .horizon { display: none; } }