/* Al Tomouh Alshamel website. Built from the approved Al Tomouh design system (tokens + components) and the UX/UI deck page layouts.
   Fonts are self-hosted (Alexandria, Roboto, Noto Kufi Arabic; SIL Open Font License). */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:200;font-display:swap;src:url(/fonts/alexandria-latin-200-normal.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:'Alexandria';font-style:normal;font-weight:200;font-display:swap;src:url(/fonts/alexandria-arabic-200-normal.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}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/alexandria-latin-300-normal.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:'Alexandria';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/alexandria-arabic-300-normal.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}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/alexandria-latin-700-normal.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:'Alexandria';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/alexandria-arabic-700-normal.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}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/alexandria-latin-800-normal.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:'Alexandria';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/alexandria-arabic-800-normal.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}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/roboto-latin-400-normal.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:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/roboto-latin-500-normal.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:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/roboto-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-kufi-arabic-arabic-400-normal.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}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/noto-kufi-arabic-arabic-600-normal.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}

/* ---------- Tokens ---------- */
:root,[data-theme="light"]{--bg:#FFFFFF;--bg-subtle:#F5F7FA;--surface:#FFFFFF;--ink:var(--navy-900);--text:var(--neutral-800);--text-muted:var(--neutral-600);--primary:var(--navy-900);--primary-hover:var(--navy-700);--on-primary:#FFFFFF;--accent:var(--gold-600);--accent-mark:var(--gold-500);--accent-soft:var(--gold-50);--accent-on-band:var(--gold-300);--tile:var(--navy-900);--band:var(--navy-900);--on-band:#FFFFFF;--on-band-muted:var(--navy-200);--line:var(--neutral-200);--line-strong:#7A8596;--focus:var(--gold-600);--focus-on-band:var(--gold-300);--success:#2F7140;--success-soft:#EEF7F0;--error:#C42D27;--error-soft:#FDF0EF;--warning:#8F5200;--warning-soft:#FEF6E7;--info:#1D5BD8;--info-soft:#EEF3FE;--navy-50:#EEF3F9;--navy-100:#D9E3F0;--navy-200:#B6C8E0;--navy-300:#89A5CA;--navy-400:#5A7EAE;--navy-500:#3A5F92;--navy-600:#284877;--navy-700:#1C3961;--navy-800:#0F2D55;--navy-900:#03254B;--navy-950:#021730;--gold-50:#FAF6EC;--gold-100:#F3E9CF;--gold-200:#E7D3A2;--gold-300:#D8B970;--gold-400:#C49D4C;--gold-500:#A78137;--gold-600:#8A6A2C;--gold-700:#6E5424;--gold-800:#57421E;--gold-900:#45351A;--gold-950:#271D0E;--neutral-50:#F5F7FA;--neutral-100:#EDEFF3;--neutral-200:#DADFE6;--neutral-300:#BCC4CF;--neutral-400:#8B96A6;--neutral-500:#66717F;--neutral-600:#4B5563;--neutral-700:#3A4350;--neutral-800:#272E38;--neutral-900:#181D24;--neutral-950:#0E1116;--shadow-card:0 1px 2px rgba(3,37,75,0.06), 0 4px 12px rgba(3,37,75,0.06);--shadow-menu:0 16px 40px rgba(3,37,75,0.16);}
[data-theme="dark"]{--bg:#061426;--bg-subtle:#0A1C33;--surface:#0E2340;--ink:#F1F5FA;--text:#D5DCE6;--text-muted:#A6B2C2;--primary:var(--gold-300);--primary-hover:var(--gold-200);--on-primary:#061426;--accent:var(--gold-300);--accent-mark:var(--gold-400);--accent-soft:#172741;--tile:var(--navy-700);--line:#1F3556;--line-strong:#6F86A8;--focus:var(--gold-300);--success:#6CC082;--success-soft:#0F2A1A;--error:#F08A85;--error-soft:#3A1414;--warning:#F2B54A;--warning-soft:#33240A;--info:#8CB0FF;--info-soft:#0F1F45;--shadow-card:0 1px 2px rgba(0,0,0,0.5);--shadow-menu:0 16px 40px rgba(0,0,0,0.6);}
:root{--space-0\.5:2px;--space-1:4px;--space-1\.5:6px;--space-2:8px;--space-2\.5:10px;--space-3:12px;--space-3\.5:14px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--radius-none:0px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:9999px;--container:1240px;--container-2xl:1480px;--reading-width:745px;--bp-sm:640px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;--bp-2xl:1536px;--utility-bar-height:40px;--header-height:80px;--icon-tile:56px;--font-display:Alexandria, "Noto Kufi Arabic", system-ui, sans-serif;--font-sans:Roboto, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;--font-arabic:"Noto Kufi Arabic", Tahoma, "Geeza Pro", sans-serif;}
.display{font-family:var(--font-display);font-size:76px;line-height:84px;font-weight:200;}
.h1{font-family:var(--font-display);font-size:62px;line-height:70px;font-weight:800;}
.h2{font-family:var(--font-display);font-size:48px;line-height:56px;font-weight:800;}
.h3{font-family:var(--font-display);font-size:40px;line-height:48px;font-weight:800;}
.h4{font-family:var(--font-display);font-size:32px;line-height:40px;font-weight:800;}
.h5{font-family:var(--font-display);font-size:26px;line-height:34px;font-weight:800;}
.h6{font-family:var(--font-display);font-size:20px;line-height:28px;font-weight:700;}
.display-ar{font-family:var(--font-display);font-size:72px;line-height:100px;font-weight:300;}
.h1-ar{font-family:var(--font-display);font-size:58px;line-height:84px;font-weight:800;}
.h2-ar{font-family:var(--font-display);font-size:44px;line-height:66px;font-weight:800;}
.h3-ar{font-family:var(--font-display);font-size:36px;line-height:54px;font-weight:800;}
.h4-ar{font-family:var(--font-display);font-size:30px;line-height:46px;font-weight:800;}
.h5-ar{font-family:var(--font-display);font-size:24px;line-height:38px;font-weight:800;}
.h6-ar{font-family:var(--font-display);font-size:19px;line-height:30px;font-weight:700;}
.lead{font-family:var(--font-sans);font-size:20px;line-height:32px;font-weight:400;}
.body-lg{font-family:var(--font-sans);font-size:18px;line-height:28px;font-weight:400;}
.body{font-family:var(--font-sans);font-size:16px;line-height:24px;font-weight:400;}
.body-strong{font-family:var(--font-sans);font-size:16px;line-height:24px;font-weight:500;}
.small{font-family:var(--font-sans);font-size:14px;line-height:20px;font-weight:400;}
.eyebrow{font-family:var(--font-sans);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.02em;}
.caption{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.02em;}
.lead-ar{font-family:var(--font-arabic);font-size:19px;line-height:34px;font-weight:400;}
.body-lg-ar{font-family:var(--font-arabic);font-size:17px;line-height:32px;font-weight:400;}
.body-ar{font-family:var(--font-arabic);font-size:16px;line-height:30px;font-weight:400;}
.body-strong-ar{font-family:var(--font-arabic);font-size:16px;line-height:30px;font-weight:600;}
.small-ar{font-family:var(--font-arabic);font-size:14px;line-height:24px;font-weight:400;}
.eyebrow-ar{font-family:var(--font-arabic);font-size:14px;line-height:24px;font-weight:600;}
.caption-ar{font-family:var(--font-arabic);font-size:12px;line-height:20px;font-weight:600;}

/* ---------- Base ---------- */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); zoom: var(--tm-zoom, 1); }
:lang(ar) { font-family: var(--font-arabic); }
.tm-wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--container) + 2 * var(--space-5)); margin-inline: auto; padding-inline: var(--space-5); }
@media (min-width: 1536px) { .tm-wrap { max-width: calc(var(--container-2xl) + 2 * var(--space-7)); padding-inline: var(--space-7); } }
@media (max-width: 767px) { .tm-wrap { padding-inline: var(--space-4); } }
.tm-icon { display: inline-block; flex: none; vertical-align: middle; }
[dir="rtl"] .tm-icon-flip, :root[dir="rtl"] .tm-icon-flip { transform: scaleX(-1); }
.tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tm-num { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tm-eyebrow { margin: 0; color: var(--accent); }
a { color: var(--primary); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.tm-link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.tm-link-arrow:hover { text-decoration-thickness: 2px; }

/* ---------- Logo ---------- */
.tm-logo { display: inline-flex; align-items: center; line-height: 0; }
.tm-logo-img { display: block; width: auto; max-width: 100%; }
.tm-logo-on-dark { display: none; }
[data-theme="dark"] .tm-logo-on-light { display: none; }
[data-theme="dark"] .tm-logo-on-dark { display: block; }

/* ---------- Button ---------- */
.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box;
  border: 2px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.tm-btn-sm { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: 14px; line-height: 20px; }
.tm-btn-md { min-height: 48px; padding: var(--space-3) var(--space-6); font-size: 16px; line-height: 20px; }
.tm-btn-lg { min-height: 56px; padding: var(--space-4) var(--space-8); font-size: 18px; line-height: 24px; }
.tm-btn-block { display: flex; width: 100%; }
.tm-btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.tm-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.tm-btn-secondary { background: var(--accent-soft); color: var(--ink); border-color: var(--accent-mark); }
.tm-btn-secondary:hover { border-color: var(--accent); }
.tm-btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.tm-btn-outline:hover { border-color: var(--ink); }
.tm-btn-outline[aria-pressed="true"] { border-color: var(--primary); }
.tm-btn-tertiary { background: transparent; color: var(--primary); padding-inline: var(--space-1); text-decoration: underline; text-underline-offset: 4px; }
.tm-btn-tertiary:hover { text-decoration-thickness: 2px; }
.tm-btn-inverse { background: var(--on-band); color: var(--band); border-color: var(--on-band); }
.tm-btn-inverse:hover { background: transparent; color: var(--on-band); }
.tm-btn-inverse:focus-visible { outline-color: var(--focus-on-band); }
.tm-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Utility bar (AEGOV top strip) ---------- */
.tm-utility { background: var(--bg-subtle); border-block-end: 1px solid var(--line); color: var(--text-muted); }
.tm-utility-inner { min-height: var(--utility-bar-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-1); }
.tm-utility-contact { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.tm-utility-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.tm-utility-tools { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.tm-utility-group { display: inline-flex; gap: 2px; padding-inline-end: var(--space-4); border-inline-end: 1px solid var(--line); }
.tm-utility-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.tm-utility-btn:hover { border-color: var(--line-strong); }
.tm-utility-btn[aria-pressed="true"] { background: var(--surface); border-color: var(--line-strong); }
.tm-utility-a { font: 600 15px/1 var(--font-display); }
.tm-utility-lang { display: flex; gap: var(--space-1); }
.tm-utility-langlink { color: var(--ink); text-decoration: none; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; }
.tm-utility-langlink:lang(ar) { font-family: var(--font-arabic); }
.tm-utility-langlink[aria-current="true"] { background: var(--band); color: var(--on-band); }
@media (max-width: 639px) { .tm-utility-contact { display: none; } .tm-utility-inner { justify-content: flex-end; } }

/* ---------- Header + mega menu ---------- */
.tm-header { position: relative; background: var(--bg); border-block-end: 1px solid var(--line); z-index: 5; }
.tm-header-row { min-height: var(--header-height); display: flex; align-items: center; gap: var(--space-8); }
.tm-header-toggle { display: none; }
.tm-header-panel { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-width: 0; }
.tm-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.tm-nav-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--header-height); box-sizing: border-box; padding-inline: var(--space-3);
  color: var(--ink); background: none; border: 0; border-block-end: 3px solid transparent; text-decoration: none; cursor: pointer; font-family: inherit; }
.tm-nav-link:hover { border-block-end-color: var(--line-strong); }
.tm-nav-link[aria-current="page"], .tm-nav-item.is-open > .tm-nav-link { border-block-end-color: var(--accent-mark); }
.tm-nav-caret { transition: transform .15s; }
.tm-nav-item.is-open .tm-nav-caret { transform: rotate(180deg); }
.tm-mega { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--surface); border-block: 1px solid var(--line); box-shadow: var(--shadow-menu); }
.tm-mega-grid { box-sizing: border-box; max-width: calc(var(--container) + 2 * var(--space-5)); margin-inline: auto; padding: var(--space-8) var(--space-5);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.tm-mega-group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.tm-mega-eyebrow { margin: 0; color: var(--accent); }
.tm-mega-title { color: var(--ink); text-decoration: none; }
.tm-mega-title:hover { text-decoration: underline; }
.tm-mega-links { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tm-mega-link { display: flex; gap: var(--space-2); color: var(--text); text-decoration: none; }
.tm-mega-link:hover { color: var(--primary); text-decoration: underline; }
.tm-mega-num { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-mega-footer { box-sizing: border-box; max-width: calc(var(--container) + 2 * var(--space-5)); margin-inline: auto; padding: var(--space-4) var(--space-5) var(--space-6); border-block-start: 1px solid var(--line); }
.tm-header-actions { display: flex; align-items: center; gap: var(--space-3); }
.tm-header-search { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--ink); }
.tm-header-search:hover { background: var(--bg-subtle); }
@media (max-width: 1023px) {
  .tm-header-row { flex-wrap: wrap; gap: var(--space-4); min-height: 64px; justify-content: space-between; }
  .tm-header-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); background: var(--bg); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: inherit; font-weight: 600; font-size: 15px; line-height: 20px; cursor: pointer; }
  .tm-header-panel { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-block-end: var(--space-4); }
  .tm-header-panel.is-open { display: flex; }
  .tm-nav-list { flex-direction: column; gap: 0; }
  .tm-nav-link { width: 100%; min-height: 52px; justify-content: space-between; border-block-end: 1px solid var(--line); }
  .tm-nav-link[aria-current="page"] { border-block-end-color: var(--line); box-shadow: inset 3px 0 0 var(--accent-mark); }
  .tm-mega { position: static; box-shadow: none; border: 0; background: var(--bg-subtle); }
  .tm-mega-grid { grid-template-columns: 1fr; padding: var(--space-4); }
  .tm-header-actions { justify-content: space-between; }
}

/* ---------- Breadcrumb ---------- */
.tm-breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--text-muted); }
.tm-breadcrumb-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.tm-breadcrumb a { color: var(--text-muted); }
.tm-breadcrumb a:hover { color: var(--primary); }
.tm-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }
.tm-breadcrumb-sep { color: var(--text-muted); }
.tm-breadcrumb-band .tm-breadcrumb-list, .tm-breadcrumb-band a, .tm-breadcrumb-band .tm-breadcrumb-sep { color: var(--on-band-muted); }
.tm-breadcrumb-band [aria-current="page"] { color: var(--on-band); }

/* ---------- Hero (home, navy band) ---------- */
.tm-hero { background: var(--band); color: var(--on-band); border-block-end: 4px solid var(--accent-on-band); }
.tm-hero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; padding-block: var(--space-24); }
.tm-hero-eyebrow { margin: 0 0 var(--space-4); color: var(--accent-on-band); }
.tm-hero-title { margin: 0; color: var(--on-band); text-wrap: balance; }
.tm-hero-lead { margin: var(--space-6) 0 0; color: var(--on-band-muted); max-width: 36em; }
.tm-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-8); }
.tm-hero-search { background: var(--surface); color: var(--text); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--space-4); }
.tm-hero-search-label { color: var(--ink); }
.tm-hero-search-row { display: flex; gap: var(--space-2); }
.tm-hero-search-row .tm-input { flex: 1; min-width: 0; }
.tm-hero-quick { display: flex; flex-direction: column; gap: var(--space-2); }
.tm-hero-quick-label { margin: 0; color: var(--text-muted); }
.tm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tm-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-full); color: var(--ink); text-decoration: none; }
.tm-chip:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 1023px) {
  .tm-hero-inner { grid-template-columns: 1fr; padding-block: var(--space-16); gap: var(--space-10); }
  .tm-hero-title.display { font-size: 48px; line-height: 56px; }
  .tm-hero-title.display-ar { font-size: 44px; line-height: 64px; }
}
@media (max-width: 639px) {
  .tm-hero-title.display { font-size: 36px; line-height: 44px; }
  .tm-hero-title.display-ar { font-size: 34px; line-height: 52px; }
  .tm-hero-search { padding: var(--space-6); }
  .tm-hero-search-row { flex-direction: column; }
}

/* ---------- Page header (inner pages) ---------- */
.tm-pagehead { background: var(--bg-subtle); border-block-end: 1px solid var(--line); }
.tm-pagehead-inner { padding-block: var(--space-8) var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.tm-pagehead-main { display: flex; gap: var(--space-6); align-items: flex-start; }
.tm-pagehead-text { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tm-pagehead-title { margin: 0; color: var(--ink); text-wrap: balance; }
.tm-pagehead-summary { margin: 0; color: var(--text); max-width: var(--reading-width); }
.tm-pagehead-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.tm-pagehead-metaitem { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.tm-pagehead-metaitem .tm-icon { color: var(--accent-mark); }
.tm-pagehead-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 1023px) {
  .tm-pagehead-title.h1 { font-size: 40px; line-height: 48px; }
  .tm-pagehead-title.h1-ar { font-size: 38px; line-height: 56px; }
}
@media (max-width: 639px) {
  .tm-pagehead-main { flex-direction: column; gap: var(--space-4); }
  .tm-pagehead-title.h1 { font-size: 32px; line-height: 40px; }
  .tm-pagehead-title.h1-ar { font-size: 30px; line-height: 46px; }
  .tm-pagehead-summary.lead { font-size: 18px; line-height: 28px; }
}

/* ---------- Icon tile (gold line icon on navy, as in the roadmap) ---------- */
.tm-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--icon-tile); height: var(--icon-tile); border-radius: var(--radius-md); background: var(--tile); color: var(--accent-on-band); }
.tm-tile-lg { width: 72px; height: 72px; }

/* ---------- Bundle card ---------- */
.tm-bundle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; height: 100%; }
.tm-bundle-head { display: flex; gap: var(--space-4); align-items: center; }
.tm-bundle-title { margin: var(--space-1) 0 0; color: var(--ink); }
.tm-bundle-desc { margin: 0; color: var(--text); }
.tm-bundle-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); flex: 1; }
.tm-bundle-link { display: grid; grid-template-columns: 2.5em 1fr auto; align-items: center; gap: var(--space-2); padding-block: var(--space-3); border-block-end: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tm-bundle-link:hover span { text-decoration: underline; }
.tm-bundle-chev { color: var(--text-muted); }

/* ---------- Service card ---------- */
.tm-service { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
  box-sizing: border-box; height: 100%; transition: box-shadow .15s, border-color .15s; }
.tm-service:hover { box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.tm-service:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.tm-service-top { display: flex; align-items: flex-start; justify-content: space-between; margin-block-end: var(--space-1); }
.tm-service-num { font: 200 40px/40px var(--font-display); color: var(--accent-mark); font-variant-numeric: tabular-nums; }
.tm-service-title { margin: 0; color: var(--ink); }
.tm-stretch { color: inherit; text-decoration: none; }
.tm-stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.tm-stretch:focus-visible { outline: none; }
.tm-service-summary { margin: 0; color: var(--text); flex: 1; }
.tm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tm-tag { padding: var(--space-0\.5) var(--space-2); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--line); }
.tm-service-cta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--primary); margin-block-start: var(--space-1); }

/* ---------- Service details ---------- */
.tm-details { background: var(--accent-soft); border: 1px solid var(--line); border-block-start: 4px solid var(--accent-mark); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.tm-details-title { margin: 0; color: var(--ink); }
.tm-details-list { margin: 0; display: flex; flex-direction: column; }
.tm-details-row { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
.tm-details-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.tm-details-label .tm-icon { color: var(--accent); }
.tm-details-value { margin: 0; color: var(--ink); }
.tm-details-note { margin: 0; color: var(--text-muted); }

/* ---------- Steps ---------- */
.tm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); counter-reset: none; }
.tm-step { position: relative; display: flex; flex-direction: column; gap: var(--space-4); }
.tm-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 24px; inset-inline-start: 64px; inset-inline-end: calc(-1 * var(--space-6) + 8px); border-block-start: 2px dashed var(--line-strong); }
.tm-step-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); border: 2px solid var(--accent-mark);
  background: var(--bg); color: var(--ink); font: 700 18px/1 var(--font-display); }
.tm-step-body { display: flex; flex-direction: column; gap: var(--space-2); }
.tm-step-title { margin: 0; color: var(--ink); }
.tm-step-owner { margin: 0; align-self: flex-start; padding: var(--space-0\.5) var(--space-2); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.tm-step-text { margin: 0; color: var(--text); }
.tm-steps-vertical { grid-template-columns: 1fr; gap: 0; }
.tm-steps-vertical .tm-step { flex-direction: row; gap: var(--space-4); padding-block-end: var(--space-6); }
.tm-steps-vertical .tm-step:not(:last-child)::after { inset-block-start: 56px; inset-block-end: 8px; inset-inline-start: 23px; inset-inline-end: auto; border-block-start: 0; border-inline-start: 2px dashed var(--line-strong); }
@media (max-width: 767px) {
  .tm-steps { grid-template-columns: 1fr; gap: 0; }
  .tm-step { flex-direction: row; gap: var(--space-4); padding-block-end: var(--space-6); }
  .tm-step:not(:last-child)::after { inset-block-start: 56px; inset-block-end: 8px; inset-inline-start: 23px; inset-inline-end: auto; border-block-start: 0; border-inline-start: 2px dashed var(--line-strong); }
}

/* ---------- Document list ---------- */
.tm-docs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.tm-docs-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--bg-subtle); border-block-end: 1px solid var(--line); }
.tm-docs-title { margin: 0; color: var(--ink); }
.tm-docs-count { margin: 0; color: var(--text-muted); white-space: nowrap; }
.tm-docs-list { list-style: none; margin: 0; padding: 0; }
.tm-docs-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-6); border-block-end: 1px solid var(--line); }
.tm-docs-row:last-child { border-block-end: 0; }
.tm-docs-icon { color: var(--accent-mark); margin-block-start: 2px; }
.tm-docs-label { color: var(--text); }
.tm-docs-badges { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }
.tm-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0\.5) var(--space-2); border-radius: var(--radius-sm); border: 1px solid; white-space: nowrap; }
.tm-badge-client { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.tm-badge-firm { color: var(--accent); border-color: var(--accent-mark); background: var(--accent-soft); }
.tm-badge-cond { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.tm-docs-note { margin: 0; padding: var(--space-4) var(--space-6); color: var(--text-muted); border-block-start: 1px solid var(--line); background: var(--bg-subtle); }
@media (max-width: 639px) {
  .tm-docs-row { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--space-4); }
  .tm-docs-badges { grid-column: 2; justify-content: flex-start; }
  .tm-docs-head, .tm-docs-note { padding-inline: var(--space-4); }
}

/* ---------- Notice ---------- */
.tm-notice { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px solid; }
.tm-notice-icon { margin-block-start: 1px; }
.tm-notice-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.tm-notice-title { margin: 0; }
.tm-notice-text { color: var(--text); }
.tm-notice-text > :first-child { margin-block-start: 0; }
.tm-notice-text > :last-child { margin-block-end: 0; }
.tm-notice-info { background: var(--info-soft); border-color: var(--info); }
.tm-notice-info .tm-notice-icon, .tm-notice-info .tm-notice-title { color: var(--info); }
.tm-notice-warning { background: var(--warning-soft); border-color: var(--warning); }
.tm-notice-warning .tm-notice-icon, .tm-notice-warning .tm-notice-title { color: var(--warning); }
.tm-notice-success { background: var(--success-soft); border-color: var(--success); }
.tm-notice-success .tm-notice-icon, .tm-notice-success .tm-notice-title { color: var(--success); }
.tm-notice-error { background: var(--error-soft); border-color: var(--error); }
.tm-notice-error .tm-notice-icon, .tm-notice-error .tm-notice-title { color: var(--error); }

/* ---------- Accordion ---------- */
.tm-accordion { border-block-start: 1px solid var(--line); }
.tm-acc-item { border-block-end: 1px solid var(--line); }
.tm-acc-heading { margin: 0; }
.tm-acc-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; background: none; border: 0;
  color: var(--ink); text-align: start; cursor: pointer; }
.tm-acc-btn:hover span { text-decoration: underline; }
.tm-acc-icon { color: var(--accent-mark); }
.tm-acc-panel { padding-block-end: var(--space-5); color: var(--text); max-width: var(--reading-width); }
.tm-acc-panel > :first-child { margin-block-start: 0; }

/* ---------- Field ---------- */
.tm-field { display: flex; flex-direction: column; gap: var(--space-2); }
.tm-field-label { color: var(--ink); }
.tm-req { color: var(--error); }
.tm-field-hint { margin: 0; color: var(--text-muted); }
.tm-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-family: inherit; }
.tm-input::placeholder { color: var(--text-muted); }
.tm-input:hover { border-color: var(--ink); }
.tm-input.is-invalid { border: 2px solid var(--error); }
textarea.tm-input { resize: vertical; }
.tm-field-error { margin: 0; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--error); font-weight: 600; }

/* ---------- Feedback ("Was this page helpful?") ---------- */
.tm-feedback { background: var(--bg-subtle); border-block: 1px solid var(--line); }
.tm-feedback-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-5); }
.tm-feedback-q { margin: 0; color: var(--ink); }
.tm-feedback-actions { display: flex; gap: var(--space-2); }
.tm-feedback-thanks { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--success); }

/* ---------- Footer ---------- */
.tm-footer { background: var(--bg-subtle); border-block-start: 1px solid var(--line); }
.tm-footer-main { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); padding-block: var(--space-16); }
.tm-footer-brand { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.tm-footer-about { margin: 0; color: var(--text); }
.tm-footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); color: var(--text); }
.tm-footer-contact li { display: flex; gap: var(--space-2); align-items: flex-start; }
.tm-footer-contact .tm-icon { color: var(--accent-mark); margin-block-start: 1px; }
.tm-footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.tm-footer-head { margin: 0 0 var(--space-4); color: var(--ink); }
.tm-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tm-footer-col a { color: var(--text); text-decoration: none; }
.tm-footer-col a:hover { color: var(--primary); text-decoration: underline; }
.tm-footer-strip { background: var(--band); color: var(--on-band-muted); }
.tm-footer-strip-inner { padding-block: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.tm-footer-disclaimer { margin: 0; color: var(--on-band-muted); max-width: 60em; }
.tm-footer-legalrow { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block-start: var(--space-4); border-block-start: 1px solid rgba(255, 255, 255, .18); }
.tm-footer-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.tm-footer-legal a { color: var(--on-band); }
.tm-footer-strip a:focus-visible { outline-color: var(--focus-on-band); }
.tm-footer-copy { margin: 0; color: var(--on-band-muted); }
@media (max-width: 1023px) { .tm-footer-main { grid-template-columns: 1fr; gap: var(--space-10); padding-block: var(--space-12); } }
@media (max-width: 639px) { .tm-footer-cols { grid-template-columns: 1fr; } }


/* ---------- Page layouts (UX/UI deck) ---------- */
.pg-sec { padding-block: var(--space-24); background: var(--bg); }
.pg-alt { background: var(--bg-subtle); border-block: 1px solid var(--line); }
.pg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-12); margin-block-end: var(--space-12); }
.pg-head > div { display: flex; flex-direction: column; gap: var(--space-3); }
.pg-h2 { margin: 0; color: var(--ink); text-wrap: balance; max-width: 16em; }
.pg-lede { margin: 0; color: var(--text); max-width: 30em; }
.pg-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.pg-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.pg-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.pg-facts { background: var(--bg); border-block-end: 1px solid var(--line); }
.pg-facts-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-6); }
.pg-fact { margin: 0; display: flex; align-items: center; gap: var(--space-3); color: var(--ink); }
.pg-fact .tm-icon { color: var(--accent-mark); }
.pg-value { border-block-start: 3px solid var(--accent-mark); padding-block-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.pg-value-n { font: 200 40px/40px var(--font-display); color: var(--accent-mark); }
.pg-value-h { margin: var(--space-2) 0 0; color: var(--ink); }
.pg-value-p { margin: 0; color: var(--text); }
.pg-cta { background: var(--band); border-block-start: 4px solid var(--accent-on-band); }
.pg-cta-in { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); padding-block: var(--space-16); }
.pg-cta-h { margin: 0 0 var(--space-3); color: var(--on-band); }
.pg-cta-p { margin: 0; color: var(--on-band-muted); max-width: 36em; }
.pg-read { max-width: 900px; }
.pg-filter { background: var(--bg); border-block-end: 1px solid var(--line); position: sticky; top: 0; }
.pg-filter-in { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.pg-filter-l { margin: 0; color: var(--text-muted); }
.pg-chip-on { background: var(--band); color: var(--on-band); border-color: var(--band); }
.pg-two { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-12); align-items: start; }
.pg-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.pg-side { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: var(--space-6); }
.pg-h { margin: var(--space-4) 0 0; color: var(--ink); }
.pg-p { margin: 0; color: var(--text); max-width: var(--reading-width); }
.pg-related { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); background: var(--surface); }
.pg-related-h { margin: 0 0 var(--space-4); color: var(--ink); }
.pg-related-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pg-related-l a { display: flex; gap: var(--space-3); align-items: center; padding-block: var(--space-3); border-block-end: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pg-related-l .tm-icon { color: var(--accent-mark); }
.pg-stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.pg-stage-h { margin: 0 0 var(--space-2); color: var(--ink); }
.pg-vm { background: var(--bg-subtle); border-radius: var(--radius-md); padding: var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); border-block-start: 4px solid var(--accent-mark); }
.pg-vm-t { margin: 0; color: var(--ink); font-weight: 600; }
.pg-info { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface); }
.pg-info-h { margin: var(--space-3) 0 0; color: var(--ink); }
.pg-info-p { margin: 0; color: var(--text); }
.pg-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-8); }
.pg-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.pg-consent { display: flex; gap: var(--space-2); align-items: center; color: var(--text); }
.pg-next { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); background: var(--bg-subtle); }
.pg-map { height: 360px; border-radius: var(--radius-md); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-muted);
  background-color: var(--surface); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.pg-map-pin { color: var(--accent-mark); }
.pg-map .body-strong { color: var(--ink); margin: 0; } .pg-map .small { margin: 0; }
@media (max-width: 1023px) {
  .pg-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-two { grid-template-columns: 1fr; } .pg-side { position: static; } .pg-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .pg-h2.h2 { font-size: 32px; line-height: 40px; } .pg-sec { padding-block: var(--space-20); } .pg-facts-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-cta-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 639px) {
  .pg-grid4, .pg-grid3, .pg-grid2, .pg-form-grid, .pg-facts-in { grid-template-columns: 1fr; } .pg-sec { padding-block: var(--space-16); }
  .pg-form { padding: var(--space-6); } .pg-filter-in { flex-wrap: wrap; } .pg-vm { padding: var(--space-6); }
}

/* ---------- Website additions (beyond the design-system components) ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; line-height: 1.5; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }
:lang(ar) .h1, :lang(ar) .h2, :lang(ar) .h3, :lang(ar) .h4, :lang(ar) .h5, :lang(ar) .h6 { font-family: var(--font-display); }
.tm-skip { z-index: 100; }
.tm-skip:focus { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; width: auto; height: auto; clip: auto; padding: 8px 16px; background: var(--surface); color: var(--ink); border: 2px solid var(--focus); border-radius: var(--radius-sm); }
.linklike { background: none; border: 0; padding: 0; color: var(--on-band); text-decoration: underline; cursor: pointer; font: inherit; }
.hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tm-utility-item { color: inherit; text-decoration: none; }
.tm-utility-item:hover { color: var(--ink); text-decoration: underline; }
[data-open], [data-close] { display: inline-flex; align-items: center; gap: var(--space-2); }
[data-open][hidden], [data-close][hidden] { display: none; }
.tm-mega[hidden] { display: none; }
.tm-mega-footer { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); }
.tm-acc-icon { display: inline-flex; }
.tm-acc-minus { display: none; }
.tm-acc-item.is-open .tm-acc-plus { display: none; }
.tm-acc-item.is-open .tm-acc-minus { display: inline-block; }
.tm-acc-panel[hidden] { display: none; }
.tm-acc-panel p { margin: 0 0 var(--space-3); }
.tm-footer-credit { margin: 0; color: var(--on-band-muted); }
.tm-footer-credit a { color: var(--on-band); }
.tm-footer-contact a { color: inherit; text-decoration: none; }
.tm-footer-contact a:hover { text-decoration: underline; }
.tm-hero-wizard { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--primary); text-decoration: underline; text-underline-offset: 4px; padding-block-start: var(--space-2); border-block-start: 1px solid var(--line); }
.tm-hero-wizard .tm-icon:first-child { color: var(--accent-mark); }
.tm-pagehead-main .tm-tile .tm-icon { width: 30px; height: 30px; }
.pg-more { margin: var(--space-6) 0 0; }
.pg-gap { margin-block-start: var(--space-8); }
.pg-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.pg-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 0; }
.pg-cta-btns { flex: none; }
.pg-search { display: flex; gap: var(--space-2); flex: 0 1 380px; }
.pg-search .tm-input { min-height: 40px; padding-block: var(--space-2); }
.pg-filter { z-index: 3; }
.pg-filter-in { flex-wrap: wrap; }
.pg-chip-on:hover { color: var(--on-band); }
.pg-span2 { grid-column: 1 / -1; }
.pg-form { display: flex; flex-direction: column; gap: var(--space-6); }
.pg-form[hidden] { display: none; }
.pg-radios { border: 0; padding: 0; margin: 0; min-width: 0; }
.pg-radios legend { padding: 0; margin-block-end: var(--space-2); }
.pg-radio-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pg-radio, .pg-opt { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; }
.pg-radio:has(input:checked), .pg-opt:has(input:checked) { border: 2px solid var(--primary); background: var(--accent-soft); }
.pg-radio input, .pg-opt input, .pg-consent input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; margin: 0; }
.pg-consent { align-items: flex-start; }
.pg-consent input { margin-block-start: 2px; }
.pg-status { padding: var(--space-3) var(--space-4); border: 1px solid var(--error); border-radius: var(--radius-sm); background: var(--error-soft); }
.pg-status[hidden], .tm-field-error[hidden] { display: none; }
[data-field].is-invalid-group .pg-radio, [data-field="privacy"].is-invalid-group .pg-consent { color: var(--error); }
.pg-wizard { display: flex; flex-direction: column; gap: var(--space-10); }
.pg-q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pg-q legend { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); margin-block-end: var(--space-4); padding: 0; }
.pg-q-n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-full); border: 2px solid var(--accent-mark); font: 700 16px/1 var(--font-display); color: var(--ink); }
.pg-q-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.pg-opt { min-height: 56px; align-items: center; }
.pg-post { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; height: 100%; }
.pg-post:hover { box-shadow: var(--shadow-card); }
.pg-post-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-subtle); }
.pg-post-ph { display: flex; align-items: center; justify-content: center; color: var(--accent-mark); }
.pg-post-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); flex: 1; }
.pg-post-date { margin: 0; color: var(--text-muted); }
.pg-post-h { margin: 0; color: var(--ink); }
.pg-post-p { margin: 0; color: var(--text); }
.pg-post-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); margin-block-end: var(--space-6); }
.pg-prose { color: var(--text); max-width: var(--reading-width); }
.pg-prose h2 { color: var(--ink); margin: var(--space-10) 0 var(--space-3); }
.pg-prose h2:first-child { margin-block-start: 0; }
.pg-prose p, .pg-prose ul { margin: 0 0 var(--space-4); }
.pg-prose li { margin-block-end: var(--space-2); }
.pg-related-l li:last-child a { border-block-end: 0; }
.pg-related-l a span { min-width: 0; }
.pg-info a { color: var(--primary); }
.tm-header-actions .tm-btn { white-space: nowrap; }
/* Floating WhatsApp button */
.wa-float { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 20; width: 56px; height: 56px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
  background: #1F7A47; color: #fff; box-shadow: 0 6px 18px rgba(3, 37, 75, .28); }
.wa-float:hover { background: #17633A; }
/* Cookie consent */
.consent { position: fixed; inset-inline: 16px; inset-block-end: 16px; z-index: 30; display: flex; justify-content: center; }
.consent[hidden] { display: none; }
.consent-inner { max-width: 760px; width: 100%; display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--space-4) var(--space-5);
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-menu); }
.consent-inner p { margin: 0; flex: 1 1 320px; }
.consent-actions { display: flex; gap: var(--space-2); }
/* Header: keep one row on desktop; the design's mega menu sits under it */
@media (min-width: 1024px) and (max-width: 1240px) {
  .tm-header-row { gap: var(--space-4); }
  .tm-nav-link { padding-inline: var(--space-2); }
  .tm-header-row .tm-logo-img { height: 40px; width: auto; }
}
@media (max-width: 1023px) {
  .tm-header-row .tm-logo-img { height: 40px; width: auto; }
  .tm-header-actions { padding-block-start: var(--space-4); }
  .pg-search { flex-basis: 100%; }
  .pg-filter { position: static; }
  .tm-mega-footer { padding: var(--space-4); }
}
@media (max-width: 639px) {
  .tm-header-row .tm-logo-img { height: 34px; }
  .tm-utility-group { padding-inline-end: var(--space-2); }
  .tm-utility-tools { gap: var(--space-2); width: 100%; justify-content: space-between; }
  .pg-cta-btns, .pg-cta-btns .tm-btn { width: 100%; }
  .pg-actions .tm-btn { flex: 1 1 auto; }
  .tm-hero-search .tm-btn { width: 100%; }
  .pg-q-opts { grid-template-columns: 1fr; }
  .wa-float { width: 52px; height: 52px; inset-block-end: 14px; inset-inline-end: 14px; }
  .consent { inset-inline: 8px; inset-block-end: 8px; }
}
/* Heatmap viewer in the dashboard: no floating extras */
.hm-view .wa-float, .hm-view .consent { display: none !important; }
@media print { .tm-utility, .tm-header, .tm-feedback, .wa-float, .consent, .pg-cta { display: none !important; } }
/* Fixes: logo keeps its size inside flex rows; [hidden] always wins over component display rules */
[hidden] { display: none !important; }
.tm-logo { flex: none; }
.tm-logo-img { max-width: none; height: 48px; width: auto; }
.tm-footer .tm-logo-img { height: 52px; }
@media (min-width: 1024px) and (max-width: 1240px) { .tm-header-row .tm-logo-img { height: 40px; } }
@media (max-width: 1023px) { .tm-header-row .tm-logo-img { height: 40px; } }
@media (max-width: 639px) { .tm-header-row .tm-logo-img { height: 34px; } .tm-footer .tm-logo-img { height: 44px; } }
.offline-page { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background: var(--band); padding: 24px; }
.offline { max-width: 520px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); color: var(--on-band); }
.offline img { width: 260px; height: auto; }
.offline h1 { margin: var(--space-4) 0 0; color: var(--on-band); }
.offline p { margin: 0; color: var(--on-band-muted); }
.linklike { font: inherit; font-size: 14px; line-height: 20px; }
@media (max-width: 639px) { .pg-h.h4 { font-size: 26px; line-height: 34px; } .pg-h.h4-ar { font-size: 24px; line-height: 38px; } }
/* "Install the app" card */
.pwa-card { position: fixed; inset-inline: 16px; inset-block-end: 16px; z-index: 40; max-width: 420px; margin-inline-start: auto; padding: var(--space-5); background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-block-start: 4px solid var(--accent-mark); border-radius: var(--radius-md); box-shadow: var(--shadow-menu); opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.pwa-card.in { opacity: 1; transform: none; }
.pwa-head { display: flex; gap: var(--space-3); align-items: center; padding-inline-end: var(--space-8); }
.pwa-head img { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.pwa-head b { display: block; color: var(--ink); }
.pwa-head small { display: block; color: var(--text-muted); }
.pwa-ios { margin: var(--space-3) 0 0; }
.pwa-acts { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
.pwa-x { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 36px; height: 36px; border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }

/* ---------- Home: the client's one-minute introduction video (10 Nov 2026) ----------
   16:9 frame so the burned-in Arabic captions are never cropped; buttons sit on the end side of the frame. */
.pg-video { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; }
.pg-video-text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pg-video-text .pg-h2, .pg-video-text p { margin: 0; }
.pg-video-lede { color: var(--text-muted); }
.pg-video-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
.tm-video { position: relative; margin: 0; aspect-ratio: 16 / 9; max-width: 100%; background: var(--navy-900); border-radius: var(--radius-lg); overflow: hidden;
  border-block-end: 4px solid var(--accent-mark); }
.tm-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* physical right in both languages: the film's own logo sits top-left */
.tm-video-ctrls { position: absolute; top: var(--space-3); right: var(--space-3); direction: ltr; display: flex; gap: var(--space-2); }
.tm-video-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: rgba(3, 37, 75, 0.82); color: #fff; font: 600 14px/1 var(--font-sans); cursor: pointer; }
:lang(ar) .tm-video-btn { font-family: var(--font-arabic); }
.tm-video-btn:hover { background: var(--navy-900); }
.tm-video-btn:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.tm-video-btn .i-play, .tm-video-btn[aria-pressed="false"] .i-pause { display: none; }
.tm-video-btn[aria-pressed="false"] .i-play { display: block; }
[data-video-sound] .i-sound, [data-video-sound][aria-pressed="true"] .i-muted { display: none; }
[data-video-sound][aria-pressed="true"] .i-sound { display: block; }
@media (max-width: 1023px) { .pg-video { grid-template-columns: 1fr; gap: var(--space-8); } .tm-video { order: -1; } }
@media (max-width: 480px) { .tm-video-btn span { display: none; } .tm-video { border-radius: var(--radius-md); } }