/* ==========================================================================
   ASIR Professional Consulting — apcc.com.sa
   Design system: "Ink & Steel"
   ========================================================================== */

/* ---------- Tokens: light (default) ---------- */
:root{
  color-scheme: light;

  --ink:        #1E2A38;
  --ink-2:      #2C3C50;
  --ink-3:      #141D27;
  --steel:      #4A6580;
  --steel-br:   #6E8CA8;
  --steel-lt:   #8FA3B8;
  --steel-pale: #B9C6D2;

  --bg:         #FAFBFC;
  --bg-alt:     #F1F3F5;
  --surface:    #FFFFFF;
  --surface-2:  #F4F6F8;
  --line:       #DFE4E9;
  --line-soft:  #EAEEF2;

  --text:       #1E2A38;
  --text-2:     #56646F;
  --text-3:     #8792A0;
  --on-dark:    #EDF1F5;
  --on-dark-2:  #A9B8C6;

  --hero-1:     #2C3C50;
  --hero-2:     #1E2A38;
  --hero-3:     #121A23;

  --shadow-sm:  0 1px 2px rgba(20,29,39,.06), 0 2px 8px rgba(20,29,39,.04);
  --shadow-md:  0 2px 6px rgba(20,29,39,.07), 0 12px 32px rgba(20,29,39,.07);

  --r-sm: 3px;
  --r:    5px;
  --r-lg: 10px;

  --maxw: 1180px;
  --gut:  clamp(16px, 4vw, 48px);

  --f-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-la: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mo: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --steel:      #8FA3B8;
    --steel-br:   #6E8CA8;
    --bg:         #10171F;
    --bg-alt:     #151E28;
    --surface:    #18222D;
    --surface-2:  #1C2733;
    --line:       #2A3745;
    --line-soft:  #222E3B;
    --text:       #E6ECF2;
    --text-2:     #A3B2C0;
    --text-3:     #788694;
    --hero-1:     #1B2734;
    --hero-2:     #141D27;
    --hero-3:     #0C1219;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow-md:  0 2px 6px rgba(0,0,0,.35), 0 14px 36px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --steel:      #8FA3B8;
  --steel-br:   #6E8CA8;
  --bg:         #10171F;
  --bg-alt:     #151E28;
  --surface:    #18222D;
  --surface-2:  #1C2733;
  --line:       #2A3745;
  --line-soft:  #222E3B;
  --text:       #E6ECF2;
  --text-2:     #A3B2C0;
  --text-3:     #788694;
  --hero-1:     #1B2734;
  --hero-2:     #141D27;
  --hero-3:     #0C1219;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow-md:  0 2px 6px rgba(0,0,0,.35), 0 14px 36px rgba(0,0,0,.4);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-ar);
  font-size:16px;
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[dir="ltr"] body{ font-family:var(--f-la); line-height:1.7 }

img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

:focus-visible{ outline:2px solid var(--steel-br); outline-offset:3px; border-radius:2px }

::selection{ background:var(--steel-br); color:#fff }

/* Latin fragments inside Arabic text */
.lat{ font-family:var(--f-la); direction:ltr; unicode-bidi:isolate; font-weight:500 }
.mono{ font-family:var(--f-mo); direction:ltr; unicode-bidi:isolate; font-size:.88em; letter-spacing:-.01em }

/* ---------- Language switching ---------- */
html[data-lang="ar"] .en{ display:none !important }
html[data-lang="en"] .ar{ display:none !important }

/* ---------- Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.section{ padding-block:clamp(56px, 8vw, 104px) }
.section--tight{ padding-block:clamp(40px, 5vw, 64px) }
.section--alt{ background:var(--bg-alt) }
.section--ink{ background:var(--ink); color:var(--on-dark) }
.section--ink .sec-kicker{ color:var(--steel-lt) }
.section--ink h2,.section--ink h3{ color:#fff }
.section--ink p{ color:var(--on-dark-2) }

/* ---------- Type ---------- */
h1,h2,h3,h4{ margin:0; line-height:1.3; text-wrap:balance; font-weight:600; color:var(--text) }
html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3,html[dir="ltr"] h4{ font-family:var(--f-la); line-height:1.22 }

h1{ font-size:clamp(30px, 5.2vw, 54px); font-weight:700; letter-spacing:-.01em }
h2{ font-size:clamp(24px, 3.4vw, 36px) }
h3{ font-size:clamp(18px, 2.1vw, 22px) }
h4{ font-size:16px; font-weight:600 }

p{ margin:0; color:var(--text-2) }
.lead{ font-size:clamp(16px, 1.9vw, 19px); line-height:1.85; color:var(--text-2); max-width:68ch }

.sec-head{ margin-bottom:clamp(28px,4vw,48px); max-width:74ch }
.sec-kicker{
  font-family:var(--f-la); direction:ltr; unicode-bidi:isolate;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); margin-bottom:12px; display:flex; align-items:center; gap:10px;
}
html[dir="rtl"] .sec-kicker{ flex-direction:row-reverse; justify-content:flex-end }
.sec-kicker::before{
  content:""; width:22px; height:2px; background:var(--steel-br); flex:none;
}
.sec-head p{ margin-top:14px }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-stuck{ box-shadow:var(--shadow-sm); border-color:var(--line) }

.hdr{
  display:flex; align-items:center; gap:18px;
  min-height:70px;
}

.brand{ display:flex; align-items:center; gap:11px; flex:none }
.brand .bmark{ width:38px; height:28px; flex:none }
.brand .bmark path{ transition:stroke .25s ease }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15 }
.brand-txt .n{ font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.01em }
.brand-txt .t{
  font-family:var(--f-la); direction:ltr; unicode-bidi:isolate;
  font-size:9.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
}

.nav{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; flex-wrap:wrap }
.nav a{
  padding:9px 13px; font-size:14.5px; font-weight:500; color:var(--text-2);
  border-radius:var(--r); position:relative; transition:color .2s ease, background .2s ease;
  white-space:nowrap;
}
html[dir="ltr"] .nav a{ font-family:var(--f-la); font-size:14px }
.nav a:hover{ color:var(--text); background:var(--surface-2) }
.nav a.active{ color:var(--ink) }
:root[data-theme="dark"] .nav a.active{ color:#fff }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nav a.active{ color:#fff } }
.nav a.active::after{
  content:""; position:absolute; inset-inline:13px; bottom:2px; height:2px;
  background:var(--steel-br); border-radius:2px;
}

.hdr-tools{ display:flex; align-items:center; gap:8px; flex:none }

.lang-btn,.theme-btn,.menu-btn{
  height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding-inline:11px; border:1px solid var(--line); background:var(--surface);
  color:var(--text-2); border-radius:var(--r); cursor:pointer;
  font-family:var(--f-la); font-size:12px; font-weight:600; letter-spacing:.06em;
  transition:all .2s ease;
}
.lang-btn:hover,.theme-btn:hover,.menu-btn:hover{ border-color:var(--steel-br); color:var(--text) }
.theme-btn,.menu-btn{ width:36px; padding:0 }
.theme-btn svg,.menu-btn svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7 }
.theme-btn .ico-moon{ display:none }
:root[data-theme="dark"] .theme-btn .ico-moon{ display:block }
:root[data-theme="dark"] .theme-btn .ico-sun{ display:none }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .ico-moon{ display:block }
  :root:not([data-theme="light"]) .theme-btn .ico-sun{ display:none }
}
.menu-btn{ display:none }

@media (max-width: 1040px){
  .nav{
    position:fixed; inset-block:0; inset-inline-end:0; width:min(320px, 84vw);
    background:var(--surface); border-inline-start:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:88px 18px 24px; margin:0;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(var(--nav-off, 16px));
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease, visibility .3s;
    box-shadow:var(--shadow-md); overflow-y:auto; z-index:70;
  }
  html[dir="rtl"] .nav{ --nav-off:-16px }
  .nav.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0) }
  .nav a{ padding:13px 14px; font-size:16px; border-radius:var(--r) }
  .nav a.active::after{ inset-inline:auto; inset-inline-start:0; bottom:auto; top:12px; height:calc(100% - 24px); width:2px }
  .menu-btn{ display:inline-flex; z-index:80 }
  .nav-scrim{
    position:fixed; inset:0; background:rgba(12,18,25,.5); z-index:65;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .nav-scrim.open{ opacity:1; pointer-events:auto }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:var(--r); font-size:15px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:all .22s ease;
  font-family:inherit; line-height:1.4;
}
html[dir="ltr"] .btn{ font-family:var(--f-la); font-size:14.5px }
.btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex:none }
html[dir="rtl"] .btn svg{ transform:scaleX(-1) }

.btn-primary{ background:var(--ink); color:#fff; border-color:var(--ink) }
.btn-primary:hover{ background:var(--ink-2); border-color:var(--ink-2); transform:translateY(-1px); box-shadow:var(--shadow-md) }
:root[data-theme="dark"] .btn-primary{ background:var(--steel-br); border-color:var(--steel-br); color:#0C1219 }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-primary{ background:var(--steel-br); border-color:var(--steel-br); color:#0C1219 }
}

.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--steel-br); color:var(--steel); transform:translateY(-1px) }

.btn-light{ background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.28) }
.btn-light:hover{ background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.5); transform:translateY(-1px) }

.btn-solid-light{ background:#fff; color:var(--ink); border-color:#fff }
.btn-solid-light:hover{ background:var(--steel-pale); border-color:var(--steel-pale); transform:translateY(-1px) }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg, var(--hero-1) 0%, var(--hero-2) 54%, var(--hero-3) 100%);
  color:#fff;
  padding-block:clamp(64px, 9vw, 112px) clamp(120px, 14vw, 180px);
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 70% 10%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%, #000 20%, transparent 78%);
}
.hero-peaks{
  position:absolute; inset-inline:0; bottom:-1px; z-index:-1;
  width:100%; height:clamp(120px, 20vw, 240px);
  opacity:.9;
}
.hero-glow{
  position:absolute; z-index:-2; width:620px; height:620px; border-radius:50%;
  top:-280px; inset-inline-end:-160px; pointer-events:none;
  background:radial-gradient(circle, rgba(110,140,168,.26) 0%, transparent 66%);
}

.hero-grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,64px); align-items:center }
@media (min-width: 900px){ .hero-grid{ grid-template-columns:1.15fr .85fr } }

.hero h1{ color:#fff }
.hero .lead{ color:#C4D0DB; margin-top:20px; max-width:56ch }
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  padding:7px 14px; border:1px solid rgba(255,255,255,.2); border-radius:100px;
  background:rgba(255,255,255,.055);
  font-size:12.5px; font-weight:500; color:#C4D0DB;
}
.hero-kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--steel-lt); flex:none }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }

.hero-emblem{ display:flex; align-items:center; justify-content:center; padding:10px }
.hero-emblem svg{ width:min(300px, 72vw); height:auto; overflow:visible }

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(128px,1fr)); gap:1px;
  margin-top:clamp(44px,6vw,72px); background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg); overflow:hidden;
}
.hero-stats .st{ background:var(--hero-2); padding:20px 18px; text-align:center }
.hero-stats .v{
  font-family:var(--f-la); font-size:clamp(26px,3.6vw,36px); font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1.1;
  direction:ltr; unicode-bidi:isolate;
}
.hero-stats .k{ font-size:12.5px; color:#9FB0BF; margin-top:7px; line-height:1.5 }

/* ---------- Ridge divider ---------- */
.ridge{ display:block; width:100%; height:18px; color:var(--steel-br); opacity:.5 }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:clamp(16px,2.2vw,22px) }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(268px,1fr)) }
.grid-4{ grid-template-columns:repeat(auto-fit, minmax(210px,1fr)) }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card h3{ margin-bottom:12px }
.card p{ font-size:15px }
.card--link:hover{ border-color:var(--steel-br); transform:translateY(-3px); box-shadow:var(--shadow-md) }

.card-ico{
  width:46px; height:46px; border-radius:var(--r); margin-bottom:18px;
  display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.card-ico svg{ width:23px; height:23px; stroke:var(--steel); fill:none; stroke-width:1.5 }
.card--link:hover .card-ico{ background:var(--ink); border-color:var(--ink) }
.card--link:hover .card-ico svg{ stroke:#fff }

.card-num{
  font-family:var(--f-la); font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--steel-br); margin-bottom:14px; display:block;
}

.more{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-size:14px; font-weight:600; color:var(--steel);
}
.more svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s ease }
html[dir="rtl"] .more svg{ transform:scaleX(-1) }
.card--link:hover .more svg{ transform:translateX(4px) }
html[dir="rtl"] .card--link:hover .more svg{ transform:scaleX(-1) translateX(4px) }

/* ---------- Authority / licence blocks ---------- */
.lic{
  display:flex; gap:16px; padding:20px 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .25s ease;
}
.lic:hover{ border-color:var(--steel-br) }
.lic .seal{
  width:40px; height:40px; flex:none; border-radius:50%;
  display:grid; place-items:center; background:var(--surface-2);
  border:1px solid var(--line-soft);
}
.lic .seal svg{ width:19px; height:19px; stroke:var(--steel); fill:none; stroke-width:1.6 }
.lic .t{ font-size:15.5px; font-weight:600; color:var(--text); line-height:1.5 }
.lic .a{ font-size:13px; color:var(--text-3); margin-top:5px; line-height:1.6 }

/* ---------- Spec tables ---------- */
.tbl-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); -webkit-overflow-scrolling:touch;
}
table{ width:100%; border-collapse:collapse; min-width:660px; font-size:14.5px }
thead th{
  background:var(--surface-2); color:var(--text); font-weight:600; font-size:13.5px;
  text-align:start; padding:14px 18px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{
  padding:16px 18px; border-bottom:1px solid var(--line-soft);
  color:var(--text-2); vertical-align:top; line-height:1.75;
}
tbody tr:last-child td{ border-bottom:0 }
tbody tr:hover td{ background:var(--surface-2) }
td strong{ color:var(--text); font-weight:600 }
td ul{ margin:0; padding-inline-start:18px }
td ul li{ margin-bottom:6px }
td ul li:last-child{ margin-bottom:0 }

.tbl-note{ font-size:13px; color:var(--text-3); margin-top:12px }

/* ---------- Lists ---------- */
.ck{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.ck li{ display:flex; gap:11px; font-size:15px; color:var(--text-2); line-height:1.75 }
.ck li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:.66em; border-radius:1px;
  background:var(--steel-br); transform:rotate(45deg);
}
.ck li strong{ color:var(--text); font-weight:600 }

.ck--tight li{ font-size:14.5px }

/* ---------- Steps ---------- */
.steps{ counter-reset:s; display:grid; gap:0; list-style:none; margin:0; padding:0 }
.steps li{
  counter-increment:s; position:relative;
  padding-inline-start:60px; padding-block:0 30px;
}
.steps li::before{
  content:counter(s, decimal-leading-zero);
  position:absolute; inset-inline-start:0; top:-2px;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line);
  font-family:var(--f-la); font-size:12.5px; font-weight:700; color:var(--steel);
}
.steps li::after{
  content:""; position:absolute; inset-inline-start:19px; top:42px; bottom:6px;
  width:1px; background:var(--line);
}
.steps li:last-child{ padding-bottom:0 }
.steps li:last-child::after{ display:none }
.steps h4{ margin-bottom:7px }
.steps p{ font-size:14.5px }

/* ---------- Tabs (authority split) ---------- */
.tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px;
  padding:5px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); width:fit-content; max-width:100%;
}
.tab{
  padding:11px 20px; border-radius:var(--r); border:1px solid transparent;
  background:transparent; cursor:pointer; color:var(--text-2);
  font-family:inherit; font-size:14.5px; font-weight:600; line-height:1.5;
  transition:all .2s ease; text-align:center;
}
html[dir="ltr"] .tab{ font-family:var(--f-la); font-size:14px }
.tab:hover{ color:var(--text) }
.tab[aria-selected="true"]{
  background:var(--surface); color:var(--ink); border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
:root[data-theme="dark"] .tab[aria-selected="true"]{ color:#fff }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tab[aria-selected="true"]{ color:#fff }
}
.tabpanel[hidden]{ display:none }

/* ---------- Pills ---------- */
.pills{ display:flex; flex-wrap:wrap; gap:8px }
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:100px; border:1px solid var(--line);
  background:var(--surface); font-size:13px; font-weight:500; color:var(--text-2);
  transition:all .2s ease;
}
.pill:hover{ border-color:var(--steel-br); color:var(--text) }
.pill .mono{ color:var(--steel); font-weight:600 }

/* ---------- Callout ---------- */
.callout{
  border-inline-start:3px solid var(--steel-br);
  background:var(--surface-2); border-radius:var(--r);
  padding:20px 24px; font-size:15px; color:var(--text-2); line-height:1.8;
}
.callout strong{ color:var(--text) }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(140deg, var(--hero-1), var(--hero-3));
  color:#fff; border-radius:var(--r-lg); padding:clamp(34px,5vw,60px);
  position:relative; overflow:hidden; isolation:isolate;
}
.cta-band::after{
  content:""; position:absolute; z-index:-1; width:440px; height:440px; border-radius:50%;
  bottom:-260px; inset-inline-start:-120px;
  background:radial-gradient(circle, rgba(110,140,168,.3), transparent 68%);
}
.cta-band h2{ color:#fff }
.cta-band p{ color:#B8C6D3; margin-top:14px; max-width:58ch }
.cta-band .hero-cta{ margin-top:28px }

/* ---------- Contact ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px }
.field label{ font-size:13.5px; font-weight:600; color:var(--text) }
.field input,.field select,.field textarea{
  font-family:inherit; font-size:15px; color:var(--text);
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); transition:border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.7 }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--steel-br);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--steel-br) 18%, transparent);
}
.form-note{ font-size:13px; color:var(--text-3); margin-top:12px; line-height:1.7 }

.cinfo{ display:grid; gap:14px }
.cinfo .row{ display:flex; gap:14px; align-items:flex-start }
.cinfo .row svg{ width:19px; height:19px; stroke:var(--steel); fill:none; stroke-width:1.6; flex:none; margin-top:4px }
.cinfo .k{ font-size:12.5px; color:var(--text-3); margin-bottom:3px }
.cinfo .v{ font-size:15px; color:var(--text); font-weight:500; word-break:break-word }

.blank{
  display:inline-block; min-width:130px; border-bottom:1px dashed var(--line);
  color:var(--text-3); font-size:14px;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink-3); color:var(--on-dark-2); padding-block:clamp(44px,6vw,68px) 0 }
.ft-grid{ display:grid; gap:clamp(28px,4vw,48px); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.ft-brand .bmark{ width:44px; height:32px; margin-bottom:16px }
.ft-brand p{ color:#8B9AA8; font-size:14px; max-width:34ch; margin-top:12px }
.site-footer h4{ color:#fff; font-size:13px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px; font-family:var(--f-la) }
html[dir="rtl"] .site-footer h4{ font-family:var(--f-ar); letter-spacing:0; text-transform:none; font-size:14.5px }
.ft-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.ft-links a{ font-size:14px; color:#94A3B1; transition:color .2s ease }
.ft-links a:hover{ color:#fff }
.ft-bot{
  margin-top:clamp(36px,5vw,56px); padding-block:22px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:13px; color:#78868F;
}

/* ---------- Motion ---------- */
.rv{ opacity:1; transform:none }
html.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1) }
html.js .rv.in{ opacity:1; transform:none }
html.js .rv-d1{ transition-delay:.09s } html.js .rv-d2{ transition-delay:.18s }
html.js .rv-d3{ transition-delay:.27s } html.js .rv-d4{ transition-delay:.36s }

@keyframes drawStroke{ to{ stroke-dashoffset:0 } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

.hero-emblem .pk{
  stroke-dasharray:var(--len,160); stroke-dashoffset:var(--len,160);
  animation:drawStroke 1.4s cubic-bezier(.5,0,.2,1) .3s forwards;
}
.hero-emblem .pk2{ animation-delay:.62s }
.hero-emblem .em-stack{ display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3vw,30px) }
.hero-emblem .em-mark{ width:clamp(112px,17vw,158px); height:auto; overflow:visible }
.hero-emblem .em-word{ width:clamp(180px,28vw,262px); height:auto; overflow:visible }
.hero-emblem .wm{ opacity:0; animation:fadeUp .9s ease 1.35s forwards }
.hero-in-1{ animation:fadeUp .8s ease .1s both }
.hero-in-2{ animation:fadeUp .8s ease .25s both }
.hero-in-3{ animation:fadeUp .8s ease .4s both }
.hero-in-4{ animation:fadeIn 1s ease .7s both }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important }
  html.js .rv{ opacity:1; transform:none }
  .hero-emblem .pk{ stroke-dashoffset:0 }
  .hero-emblem .wm{ opacity:1 }
}

/* ---------- Page header (inner pages) ---------- */
.phead{
  background:linear-gradient(160deg, var(--hero-1), var(--hero-3));
  color:#fff; padding-block:clamp(48px,6.5vw,84px); position:relative; overflow:hidden; isolation:isolate;
}
.phead::after{
  content:""; position:absolute; z-index:-1; inset-inline-end:-80px; top:-160px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(110,140,168,.22), transparent 68%);
}
.phead h1{ color:#fff; font-size:clamp(27px,4.2vw,44px) }
.phead .lead{ color:#BCC9D6; margin-top:16px }
.crumb{
  display:flex; align-items:center; gap:9px; margin-bottom:16px;
  font-size:13px; color:#8FA3B8; flex-wrap:wrap;
}
.crumb a:hover{ color:#fff }
.crumb span{ opacity:.5 }

/* ---------- Misc ---------- */
.skip{
  position:absolute; inset-inline-start:-9999px; top:8px; z-index:200;
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:var(--r); font-size:14px;
}
.skip:focus{ inset-inline-start:12px }

hr.rule{ border:0; border-top:1px solid var(--line); margin-block:clamp(32px,4vw,48px) }

.two-col{ display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:1fr }
@media (min-width:860px){ .two-col{ grid-template-columns:1fr 1fr } }
@media (min-width:860px){ .two-col--wide{ grid-template-columns:1.25fr .75fr } }