/* ==========================================================================
   alialqarni.com - the services hub
   System: "Daylight Prestige" - warm ivory daylight ground, maroon ink,
   champagne gold as a hairline material. English and Arabic are both
   first-class; Arabic carries its own type roles and line-heights and never
   inherits Latin letter-spacing.

   Card treatments are switchable from the admin panel: the <html> element
   carries data-cards="plate|outline|sand|arc" for the hub.
   ========================================================================== */

:root{
  /* surfaces - the material stack, lightest on top */
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --sand:#F1F4F6;
  --maroon-deep:#0E5238;

  /* ink - warm, never pure black or white */
  --ink-strong:#0F172A;
  --ink:#16332C;
  --ink-muted:#475569;
  --ink-inverse:#FFFFFF;
  --ink-inverse-muted:#CFE0DA;

  /* accents */
  --maroon-700:#1B8354;
  --maroon-800:#12603C;
  --maroon-tint:#E9F7F2;
  --gold-100:#EDF3F0;
  --gold-300:#B7D9CA;
  --gold-500:#1B8354;
  --gold-600:#12603C;
  --gold-700:#0E5238;
  --bronze-ink:#2F5C4A;

  /* lines */
  --border:#EAECF0;
  --border-field:#7E8C86;
  --focus-ring:rgba(27,131,84,.35);

  /* semantics */
  --success:#1F6B4A;
  --success-tint:#E7F2EC;
  --warning:#8A5A00;
  --warning-tint:#FBF0DA;
  --danger:#8C1C2B;
  --danger-tint:#FBEDEE;

  /* depth - warm, never grey */
  --shadow-ambient:0 1px 2px rgba(6,42,34,.06);
  --shadow-cast:0 2px 4px rgba(6,42,34,.06), 0 28px 64px -24px rgba(6,42,34,.12);

  /* shape */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-full:9999px;

  /* rhythm */
  --wrap:1160px;
  --gutter:36px;

  /* motion */
  --m-instant:80ms; --m-fast:160ms; --m-base:240ms; --m-enter:420ms; --m-exit:200ms;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  /* type */
  --serif:"Bodoni 72",Didot,"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --ar-display:"Readex Pro",kufi,"IBM Plex Sans Arabic","Noto Kufi Arabic",sans-serif;
  --ar-body:"IBM Plex Sans Arabic","Noto Naskh Arabic",Tahoma,sans-serif;
  --mono:"IBM Plex Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* ------------------------------------------------- hosted faces, no CDN */
@font-face{font-family:"Readex Pro";src:url("/assets/fonts/readex-arabic.woff2") format("woff2");
  font-weight:300 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-400-arabic.woff2") format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-500-arabic.woff2") format("woff2");
  font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-600-arabic.woff2") format("woff2");
  font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-700-arabic.woff2") format("woff2");
  font-weight:700;font-display:swap}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{font-family:var(--ar-body);font-size:17px;line-height:1.75}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:16px;top:16px;background:var(--maroon-700);color:var(--ink-inverse);
  padding:12px 18px;border-radius:var(--r-full);z-index:100}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;border-radius:4px}

/* -------------------------------------------------------------- headings */
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink-strong)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{font-family:var(--ar-display)}

h1{font-size:clamp(38px,6.2vw,68px);line-height:1.05;letter-spacing:-.025em;max-width:20ch}
h2{font-size:clamp(28px,4vw,48px);line-height:1.12;letter-spacing:-.02em;max-width:24ch}
h3{font-size:24px;line-height:1.3;letter-spacing:-.01em}
html[dir="rtl"] h1{font-size:clamp(34px,5.6vw,62px);line-height:1.22;letter-spacing:0;font-weight:500}
html[dir="rtl"] h2{font-size:clamp(26px,3.6vw,44px);line-height:1.3;letter-spacing:0;font-weight:500}
html[dir="rtl"] h3{font-size:22px;line-height:1.45;letter-spacing:0;font-weight:500}

.lead{font-size:20px;line-height:1.65;color:var(--ink);max-width:33rem;margin:0}
html[dir="rtl"] .lead{font-size:19px;line-height:1.75}
p{margin:0}
.small{font-size:15px;font-weight:500;line-height:1.6;letter-spacing:.005em;color:var(--ink-muted)}
html[dir="rtl"] .small{font-weight:400;line-height:1.72;letter-spacing:0}
.caption{font-size:13px;font-weight:500;line-height:1.55;letter-spacing:.02em;color:var(--ink-muted)}
html[dir="rtl"] .caption{line-height:1.7;letter-spacing:0}
.eyebrow{font-size:13px;font-weight:600;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bronze-ink);display:inline-flex;align-items:center;gap:12px}
html[dir="rtl"] .eyebrow{letter-spacing:0;text-transform:none;line-height:1.7;font-size:13px}
.eyebrow::after{content:"";width:56px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300) 60%,transparent)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- bands */
.band{padding-block:clamp(44px,9vw,104px)}
.band--sand{background:var(--sand)}
.band--tight{padding-block:clamp(40px,7vw,88px)}
.band--works{padding-block:clamp(52px,10vw,120px)}
.band--quote{padding-block:clamp(52px,10vw,112px)}
.band--footer{background:var(--maroon-deep);color:var(--ink-inverse);
  padding-block:clamp(48px,7vw,88px) clamp(30px,4vw,56px)}

.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head .eyebrow{align-self:flex-start}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:60;background:var(--ground);
  border-bottom:1px solid var(--border);transition:box-shadow var(--m-base) var(--ease)}
.hdr.is-scrolled{box-shadow:0 1px 0 var(--gold-300), var(--shadow-ambient)}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:13px;min-height:44px}
.brand .mk{width:44px;height:44px;flex:none;border-radius:var(--r-full);background:var(--maroon-tint);
  border:1px solid var(--gold-300);display:grid;place-items:center;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(43,15,20,.08), inset 0 0 0 1px rgba(226,199,126,.35)}
.brand .mk svg{width:24px;height:24px}
/* A face avatar is the one place a crop is correct: a wordmark cannot be cropped
   without destroying it, a portrait conventionally is. Framed on the face. */
.brand .mk img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}
.brand .nm{display:block;font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--ink-strong)}
html[dir="rtl"] .brand .nm{font-family:var(--ar-display);font-weight:500}
.brand .sub{display:block;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.03em;
  color:var(--ink-muted);margin-top:2px}
html[dir="rtl"] .brand .sub{letter-spacing:0}

.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:var(--r-sm);
  font-size:15px;font-weight:500;line-height:1.6;color:var(--ink);position:relative}
.nav a::after{content:"";position:absolute;inset-inline:13px;bottom:9px;height:2px;border-radius:2px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:inline-start;
  transition:transform var(--m-fast) var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.lang{display:inline-flex;border-radius:var(--r-full);background:var(--sand);overflow:hidden;
  margin-inline:6px}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  padding:0 14px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
html[dir="rtl"] .lang a{letter-spacing:0}
.lang a[aria-current="true"]{background:var(--maroon-700);color:var(--ink-inverse)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--border-field);border-radius:var(--r-sm);
  background:var(--surface);align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:20px;height:20px;stroke:var(--ink-strong);fill:none;stroke-width:2}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 24px;border-radius:var(--r-full);border:1px solid transparent;
  font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.6;letter-spacing:.005em;
  cursor:pointer;transition:background var(--m-fast) var(--ease),transform var(--m-fast) var(--ease),
    border-color var(--m-fast) var(--ease),color var(--m-fast) var(--ease)}
html[dir="rtl"] .btn{font-family:var(--ar-body);letter-spacing:0;font-size:15px;line-height:1.6}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{transform:none}
.btn--primary{background:var(--maroon-700);color:var(--ink-inverse)}
.btn--primary:hover{background:var(--maroon-800);transform:translateY(-1px)}
.btn--primary:active{background:var(--maroon-deep);transform:none}
.btn--gold{background:var(--gold-500);color:var(--ink-strong);min-height:52px}
.btn--gold:hover{background:var(--gold-600);transform:translateY(-1px)}
.btn--gold:active{transform:none}
.btn--gold:focus-visible{outline-color:var(--ink-strong)}
.btn--secondary{background:var(--surface);color:var(--maroon-700);border-color:var(--border-field)}
.btn--secondary:hover{background:var(--maroon-tint);transform:translateY(-1px)}
.btn--secondary:active{transform:none}
.btn--sm{min-height:44px;padding:10px 18px;font-size:14px}

/* ------------------------------------------------------------------ hero */
.hero{padding-block:clamp(70px,13vw,128px) clamp(57px,10vw,104px)}
.hero-in{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,56px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero-copy h1{margin-block:4px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:8px}
.seal{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:18px}

/* ---------------------------------------------------------------- plates */
/* Effects live on the PLATE and are cast FROM the mark — the artwork itself is
   never recoloured, rotated, blurred or outlined. A champagne hairline rings it,
   a warm bloom sits behind it, and the mark drops a soft shadow that follows its
   own alpha outline, so it reads as resting on the plate rather than pasted on. */
.mark-plate,
footer .f-plate{
  background-color:var(--surface);
  background-image:radial-gradient(128% 108% at 50% 32%,
    #FFFFFF 0%, #FDFAF4 54%, #F5ECDE 100%);
  box-shadow:
    0 0 0 1px rgba(226,199,126,.5),          /* champagne hairline */
    0 2px 4px rgba(43,15,20,.05),            /* ambient contact */
    0 22px 48px -20px rgba(201,162,74,.38);  /* the gold halo */
}
.mark-plate::before,
footer .f-plate::before{
  content:"";position:absolute;inset:9%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,
    rgba(201,162,74,.30), rgba(201,162,74,.10) 50%, transparent 72%);
}
/* contain, never cover: the lockup is never reshaped, cropped or stretched */
.mark-plate img,
footer .f-plate img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  position:relative;z-index:1;
  filter:drop-shadow(0 8px 16px rgba(43,15,20,.20))
         drop-shadow(0 2px 3px rgba(201,162,74,.35));
}
@media (hover:hover){
  .mark-plate{transition:transform var(--m-base) var(--ease),
    box-shadow var(--m-base) var(--ease)}
  .work:hover .mark-plate{
    transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(226,199,126,.72), 0 2px 4px rgba(43,15,20,.05),
      0 30px 60px -22px rgba(201,162,74,.5);
  }
  .work:hover .mark-plate::before{background:radial-gradient(circle at 50% 42%,
    rgba(201,162,74,.38), rgba(201,162,74,.13) 50%, transparent 72%)}
}

/* ------------------------------------------------------------- portrait */
/* The owner's own cut-out, and the hub's identity. Same effect family as the
   plates: a warm bloom behind, a champagne arc, and a shadow that follows the
   subject's own outline so the figure sits on the page rather than on top of it.

   The subject wears a WHITE thobe, and the page ground is warm white - so a
   warm aura disc is not decoration, it is what keeps the silhouette readable. */
.portrait{position:relative;margin:0;width:100%;max-width:440px;display:flex;
  flex-direction:column;gap:18px}
.portrait::before{
  content:"";position:absolute;inset:-7% -3% 6%;pointer-events:none;
  border-radius:52% 52% 44% 44%/46% 46% 54% 54%;
  background:radial-gradient(58% 60% at 50% 32%,
    #EFE1C9 0%, #F6EEE1 46%, rgba(246,238,225,0) 76%);
}
.portrait::after{
  content:"";position:absolute;inset:2% 6% 16%;border-radius:50%;pointer-events:none;
  border:2px solid var(--gold-300);
  border-inline-start-color:transparent;border-block-start-color:transparent;
  transform:rotate(-26deg);opacity:.75;
}
.portrait-fig{position:relative;z-index:1;display:block;
  filter:drop-shadow(0 18px 30px rgba(43,15,20,.22))
         drop-shadow(0 4px 8px rgba(201,162,74,.30))}
.portrait-fig img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,0) 100%)}
.portrait figcaption{position:relative;z-index:1;text-align:center;display:flex;
  flex-direction:column;gap:5px}
.portrait .p-name{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--ink-strong)}
html[dir="rtl"] .portrait .p-name{font-family:var(--ar-display);font-weight:500;font-size:21px;
  line-height:1.45}
.portrait .p-role{font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.02em;
  color:var(--ink-muted)}
html[dir="rtl"] .portrait .p-role{letter-spacing:0;line-height:1.72;font-weight:400}
@media (prefers-reduced-motion:reduce){
  .portrait-fig{filter:drop-shadow(0 10px 18px rgba(43,15,20,.20))}
}

/* ---------------------------------------------------------------- cards */
.grid-3{display:grid;grid-template-columns:1fr;gap:24px}
.grid-4{display:grid;grid-template-columns:1fr;gap:24px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:28px;display:flex;flex-direction:column;gap:12px;position:relative;
  box-shadow:var(--shadow-ambient);
  transition:background var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease),
    transform var(--m-fast) var(--ease)}
.card:hover{background:var(--sand);border-color:var(--gold-300);transform:translateY(-2px)}
.card h3{margin-block:4px 0}
.card p{font-size:17px;line-height:1.62;color:var(--ink);max-width:26rem}
html[dir="rtl"] .card p{line-height:1.75}
.ico{width:48px;height:48px;border-radius:var(--r-full);background:var(--maroon-tint);
  border:1px solid var(--gold-300);display:grid;place-items:center;flex:none}
.ico svg{width:22px;height:22px;stroke:var(--maroon-700);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- switchable card treatments (admin-controlled, data-cards) ---------- */
/* outline: no fill, a stronger hairline, no shadow */
html[data-cards="outline"] .card{background:transparent;border-color:var(--border-field);
  box-shadow:none}
html[data-cards="outline"] .card:hover{background:var(--surface);border-color:var(--gold-500)}
/* sand: a warm block with no edge, separated by temperature */
html[data-cards="sand"] .card{background:var(--sand);border-color:transparent;box-shadow:none}
html[data-cards="sand"] .card:hover{background:var(--surface);border-color:var(--gold-300)}
/* arc: the signature - a champagne arc hairline under the title */
html[data-cards="arc"] .card{background:var(--surface);border-color:var(--border);
  box-shadow:var(--shadow-ambient);overflow:hidden}
html[data-cards="arc"] .card h3{position:relative;padding-block-end:14px}
html[data-cards="arc"] .card h3::after{content:"";position:absolute;inset-block-end:0;
  inset-inline-start:0;width:76px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300) 65%,transparent)}
html[dir="rtl"][data-cards="arc"] .card h3::after{
  background:linear-gradient(270deg,var(--gold-500),var(--gold-300) 65%,transparent)}

/* ----------------------------------------------------------------- works */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.work{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;
  display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-ambient);
  transition:background var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease),
    transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease)}
.work:hover{transform:translateY(-2px);box-shadow:var(--shadow-cast)}
/* the work's own accent may only ever be a 2px top hairline */
.work::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:var(--accent,var(--gold-500))}
.work-top{display:flex;align-items:center;gap:16px}
.work-name{display:flex;flex-direction:column;gap:8px;min-width:0}
.work-name h3{font-size:24px;line-height:1.3}
html[dir="rtl"] .work-name h3{font-size:22px;line-height:1.45}
.code-pill{align-self:flex-start;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:500;line-height:1.5;letter-spacing:.02em;color:var(--maroon-700);
  background:var(--sand);border-radius:var(--r-full);padding:5px 12px}
html[dir="rtl"] .code-pill{letter-spacing:0}
.work p{font-size:17px;line-height:1.62;color:var(--ink);flex:1}
html[dir="rtl"] .work p{line-height:1.75}
.work-acts{display:flex;gap:12px;flex-wrap:wrap}

/* the full lockup only ever appears at 96px and above, on a champagne plate */
.mark-plate{width:168px;height:168px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-lg);padding:20px;position:relative}
/* below that floor the artwork is replaced by a drawn monogram, never a shrunken copy */
.mono-frame{width:88px;height:88px;flex:none;display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--maroon-tint);border:1px solid var(--gold-300);position:relative;
  font-family:var(--mono);font-size:24px;font-weight:500;line-height:1.2;letter-spacing:.01em;
  color:var(--maroon-700);font-variant-numeric:tabular-nums}
.mono-frame::after{content:"";position:absolute;inset:9px;border-radius:var(--r-full);
  border:1.5px solid var(--gold-300);border-inline-start-color:transparent;
  border-block-start-color:transparent;transform:rotate(45deg)}

/* one work gets the featured variant: a single horizontal band */
.works[data-count="1"] .work{flex-direction:row;align-items:center;gap:32px;padding:36px}
.works[data-count="1"] .work-body{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
.works[data-count="1"] .mark-plate{width:168px;height:168px}
.work-body{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}

/* sand variant for the works band, when the hub card style is sand/outline */
html[data-cards="sand"] .work{background:var(--ground);border-color:transparent}
html[data-cards="outline"] .work{background:transparent;border-color:var(--border-field);box-shadow:none}
html[data-cards="outline"] .work:hover{background:var(--surface);border-color:var(--gold-500)}
html[data-cards="arc"] .work .work-name h3{position:relative;padding-block-end:12px}
html[data-cards="arc"] .work .work-name h3::after{content:"";position:absolute;inset-block-end:0;
  inset-inline-start:0;width:64px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300) 65%,transparent)}

.skeleton{background:var(--sand);border-radius:var(--r-lg);min-height:240px;
  animation:sk 2.4s var(--ease) infinite}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.55}}
.works-note{margin-top:20px}

/* ----------------------------------------------------------------- steps */
.rail{display:grid;grid-template-columns:1fr;gap:28px;position:relative}
.step{display:flex;flex-direction:column;gap:12px;position:relative}
.step-idx{width:44px;height:44px;flex:none;border-radius:var(--r-full);background:var(--surface);
  border:1px solid var(--gold-300);display:grid;place-items:center;font-family:var(--mono);
  font-size:13px;font-weight:500;color:var(--bronze-ink);font-variant-numeric:tabular-nums}
.step h3{font-size:22px;line-height:1.35}
html[dir="rtl"] .step h3{font-size:21px;line-height:1.5}
.step p{font-size:17px;line-height:1.62;color:var(--ink);max-width:26rem}
html[dir="rtl"] .step p{line-height:1.75}

/* ------------------------------------------------------------ quote form */
.plate{background:var(--surface);border-radius:var(--r-xl);padding:32px;border:1px solid var(--border);
  box-shadow:var(--shadow-cast);max-width:900px;margin-inline:auto}
.fgrid{display:grid;grid-template-columns:1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:15px;font-weight:500;line-height:1.6;letter-spacing:.005em;color:var(--ink)}
html[dir="rtl"] label{font-weight:400;line-height:1.72;letter-spacing:0}
input,select,textarea{width:100%;min-height:52px;padding:16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border-field);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  transition:border-color var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease),
    background var(--m-fast) var(--ease)}
html[dir="rtl"] input,html[dir="rtl"] select,html[dir="rtl"] textarea{
  font-family:var(--ar-body);line-height:1.75}
textarea{min-height:132px;resize:vertical;line-height:1.62}
html[dir="rtl"] textarea{line-height:1.75}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--maroon-700);
  box-shadow:0 0 0 4px var(--focus-ring)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger);
  background:var(--danger-tint)}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--maroon-700) 50%),
    linear-gradient(135deg,var(--maroon-700) 50%,transparent 50%);
  background-position:calc(100% - 21px) 24px,calc(100% - 16px) 24px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
html[dir="rtl"] select{background-position:21px 24px,16px 24px}
.phone-row{display:flex;gap:10px}
.phone-row select{max-width:124px;flex:none}
.form-foot{display:flex;gap:20px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:26px}
.form-foot .priv{max-width:44ch}
.banner{margin-top:18px;padding:16px;border-radius:var(--r-md);font-size:15px;font-weight:500;
  line-height:1.6;letter-spacing:.005em}
html[dir="rtl"] .banner{font-weight:400;line-height:1.72;letter-spacing:0}
.banner--success{background:var(--success-tint);color:var(--success)}
.banner--warning{background:var(--warning-tint);color:var(--warning)}
.banner--danger{background:var(--danger-tint);color:var(--danger)}
.banner:empty{display:none}
.field-err{font-size:13px;font-weight:500;line-height:1.55;color:var(--danger);letter-spacing:.02em}
html[dir="rtl"] .field-err{line-height:1.7;letter-spacing:0}

/* --------------------------------------------------------------- success */
.done{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;
  padding-block:16px}
.done h3{font-size:28px;line-height:1.25}
.order-num{font-family:var(--mono);font-size:clamp(22px,3.4vw,24px);font-weight:500;line-height:1.2;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink-strong);
  background:var(--gold-100);border:1px solid var(--gold-300);border-radius:var(--r-md);
  padding:20px 28px;direction:ltr;max-width:100%;overflow-wrap:anywhere}
.done .next{max-width:46ch;color:var(--ink);font-size:17px;line-height:1.62}
html[dir="rtl"] .done .next{line-height:1.75}
.done-acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ---------------------------------------------------------------- footer */
footer .f-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
footer .f-plate{width:120px;height:120px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-lg);padding:16px;position:relative}
footer .f-nm{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--ink-inverse)}
html[dir="rtl"] footer .f-nm{font-family:var(--ar-display);font-weight:500}
footer .f-sub{font-size:14px;line-height:1.6;color:var(--ink-inverse-muted);margin-top:4px}
html[dir="rtl"] footer .f-sub{line-height:1.72}
.f-grid{display:flex;gap:28px;justify-content:space-between;flex-wrap:wrap;
  padding-block-end:28px;border-bottom:1px solid rgba(228,214,192,.22)}
footer .about{max-width:46ch;color:var(--ink-inverse-muted);font-size:17px;line-height:1.62}
html[dir="rtl"] footer .about{line-height:1.75}
.f-links{display:flex;flex-direction:column;gap:4px}
.f-links a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;
  line-height:1.6;color:var(--ink-inverse-muted);transition:color var(--m-fast) var(--ease)}
html[dir="rtl"] .f-links a{font-weight:400;line-height:1.72}
.f-links a:hover{color:var(--gold-300)}
.copy{color:var(--ink-inverse-muted);font-size:13px;letter-spacing:.02em;line-height:1.55;margin-top:22px}
html[dir="rtl"] .copy{letter-spacing:0;line-height:1.7}

/* ================================================================ motion */
/* The initial state IS the final readable state: nothing is hidden by default,
   and the animation is only added once the script confirms it may run. */
html.js-reveal .rv{opacity:0;transform:translate3d(0,12px,0)}
html.js-reveal .rv.is-in{opacity:1;transform:none;
  transition:opacity var(--m-enter) var(--ease),transform var(--m-enter) var(--ease)}
html.js-reveal .rv[data-rv="1"]{transition-delay:70ms}
html.js-reveal .rv[data-rv="2"]{transition-delay:140ms}
html.js-reveal .rv[data-rv="3"]{transition-delay:210ms}
html.js-reveal .rv[data-rv="4"]{transition-delay:280ms}
/* the one decorative animation: the champagne rule draws out along the inline axis */
html.js-reveal .rule{transform:scaleX(0);transform-origin:inline-start;
  transition:transform var(--m-enter) var(--ease)}
html.js-reveal .rule.is-in{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html.js-reveal .rv,html.js-reveal .rv.is-in{opacity:1;transform:none;transition:none}
  html.js-reveal .rule,html.js-reveal .rule.is-in{transform:none;transition:none}
  .card,.work,.btn{transition:background-color var(--m-fast) linear,border-color var(--m-fast) linear,
    color var(--m-fast) linear}
  .card:hover,.work:hover,.btn:hover{transform:none}
  .work:hover .mark-plate{transform:none}
  .skeleton{animation:none}
}

/* ============================================================ responsive */
@media (min-width:640px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .rail{grid-template-columns:repeat(2,1fr);gap:32px}
  .fgrid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .wrap{padding-inline:36px}
  .hero-in{grid-template-columns:7fr 5fr;gap:64px}
  .seal{justify-self:end}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .rail{grid-template-columns:repeat(4,1fr)}
  /* the rail that joins the numbered steps - a champagne hairline */
  .rail::before{content:"";position:absolute;inset-block-start:22px;inset-inline:6%;
    height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-300),
      var(--gold-500) 50%,var(--gold-300))}
  .rail .step{padding-inline-end:16px}
  .step-idx{background:var(--ground);position:relative;z-index:1}
}
@media (max-width:1023px){
  .menu-btn{display:inline-flex}
  .nav .navlink{display:none}
  :root{--gutter:24px}
}
@media (max-width:639px){
  :root{--gutter:16px}
  .mono-frame{width:72px;height:72px;font-size:20px}
  .works[data-count="1"] .work{flex-direction:column;align-items:flex-start;padding:28px}
  .works[data-count="1"] .mark-plate{width:132px;height:132px}
  .brand .sub{display:none}
  html{scroll-behavior:smooth}
}
/* the mobile nav, opened by the menu button */
.nav.is-open{position:absolute;inset-block-start:76px;inset-inline:0;flex-direction:column;
  align-items:stretch;background:var(--surface);border-bottom:1px solid var(--border);
  padding:12px var(--gutter) 20px;gap:2px}
.nav.is-open .navlink{display:flex;min-height:48px;padding-inline:12px}
.nav.is-open .lang,.nav.is-open .btn{margin-inline-start:12px;align-self:flex-start;margin-top:8px}

/* ------------------------------------------------------------ service notes */
/* The two questions every client asks (which language, and "do you host it?") are
   answered once in small type directly under the services, rather than being listed
   as if they were services in their own right. */
.svc-notes{margin-top:30px;display:grid;gap:14px;max-width:82ch}
.svc-note{padding-inline-start:18px;border-inline-start:2px solid var(--gold-300)}
.svc-note b{color:var(--maroon-700);font-weight:600}

/* ------------------------------------------------- review fixes (2026-09-25) */
/* The header action is an <a> inside .nav, so .nav a's colour beat .btn--primary
   and left the label at about 1.7:1 contrast. */
.hdr .btn--primary,.hdr .btn--primary:visited{color:var(--ink-inverse)}
.hdr .btn--secondary,.hdr .btn--secondary:visited{color:var(--maroon-700)}
.hdr .btn--gold,.hdr .btn--gold:visited{color:var(--ink-strong)}
/* The hero's warm aura reaches a few pixels past the figure; without this the
   page grew a horizontal scrollbar on a 375px viewport. */
.hero{overflow:hidden}
/* The language switcher is a flex item and was being squeezed narrower than its
   own labels, which clipped the inactive chip. */
.lang{flex:none}
.brand .nm{white-space:nowrap}
/* On small viewports the same call to action sits in the hero a moment later, so
   the header one makes room for the brand instead of wrapping. */
@media (max-width:560px){
  .hdr .btn--primary{display:none}
  .brand .sub{display:none}
}

/* ------------------------------------------------------ headline, quiet now */
/* The sentence is ordinary text in .hm-t: it is in the HTML, it is readable
   with no script at all, and nothing here or in the script ever empties it.
   What is left of the "written" look is the blinking caret and one 0.3s fade of
   the text itself, both applied only under html.js-type - so reduced motion gets
   a still sentence and no caret. It used to be typed letter by letter (72ms each
   in English, one word every 430ms in Arabic): about five seconds before the
   sentence was whole, which the review read as a reason to leave before it. */
.hm .hm-q{color:var(--gold-300);font-weight:500}
.hm .hm-caret{display:none}
html.js-type .hm .hm-t,
html.js-type .hm .hm-t2{animation:hm-in .3s ease-out 1}
@keyframes hm-in{from{opacity:0}to{opacity:1}}
html.js-type .hm .hm-caret{display:inline-block;width:.5ch;height:1.02em;
  margin-inline-start:.07em;vertical-align:-.13em;background:var(--gold-300);
  animation:hm-blink 1.05s steps(1,end) infinite}
/* the caret is never hidden: it keeps blinking after the sentence ends */
@keyframes hm-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* the hero keeps its final height, so the sections below never jump */
.hero{min-height:var(--hero-min,0)}
@media (prefers-reduced-motion:reduce){
  html.js-type .hm .hm-caret{display:none}
  html.js-type .hm .hm-t,
  html.js-type .hm .hm-t2{animation:none}
}

/* The portrait column is anchored to the top of the hero row: the sentence grows
   downwards and shifts the text beside it, but the image and its caption stay put. */
.seal{align-self:start}

/* ------------------------------------------- hover spotlight on the sentence */
/* The reference effect blends a white circle with mix-blend-mode:difference, which
   cannot yield two chosen colours. This instead reveals a second copy of the
   sentence in the owner's colours through a circular mask that tracks the pointer. */
.hm-spot{position:absolute;inset:0;color:#b78f33;background:#3d2026;border-radius:12px;
  opacity:0;pointer-events:none;transition:opacity .16s linear;
  -webkit-mask-image:radial-gradient(circle var(--spot-r,0px) at var(--spot-x,50%) var(--spot-y,50%),#000 0 98%,transparent 100%);
          mask-image:radial-gradient(circle var(--spot-r,0px) at var(--spot-x,50%) var(--spot-y,50%),#000 0 98%,transparent 100%)}
.hm-spot.is-on{opacity:1}
/* takes the same space as the real caret so both copies wrap identically */
.hm-caret--ghost{display:inline-block;width:.5ch;height:1.02em;margin-inline-start:.07em;
  vertical-align:-.13em;background:transparent;animation:none}
@media (hover:none),(pointer:coarse){.hm-spot{display:none}}

/* ------------------------------------------------- hover circle (the reference) */
/* A white circle blended with `difference` inverts whatever is beneath it. It is a
   direct child of <body> and position:fixed, so no ancestor can scope the blend and
   it always inverts both the page ground and the text. */
.hm-spot{display:none}
.hm-blend{position:fixed;left:0;top:0;width:124px;height:124px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:2147483000;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .18s linear}
.hm-blend.is-on{opacity:1}
@media (hover:none),(pointer:coarse){.hm-blend{display:none}}


/* ------------------------------------------------------------------ scrollbars */
/* Always present, always visible. `overflow-y:scroll` keeps the bar on a page whose
   content fits - that case showed no scrollbar at all. The page bar keeps a light
   sand channel so it reads against the ivory ground rather than being transparent. */
*{scrollbar-color:var(--gold-600) transparent}
*::-webkit-scrollbar{width:13px;height:13px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold-300),var(--gold-600));
  border-radius:9999px;border:3px solid transparent;background-clip:padding-box;min-height:44px}
*::-webkit-scrollbar-thumb:hover{background:var(--maroon-700);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}

html{overflow-y:scroll;scrollbar-gutter:stable;scrollbar-width:auto;
  scrollbar-color:var(--gold-600) var(--sand)}
html::-webkit-scrollbar{width:13px}
html::-webkit-scrollbar-track{background:var(--sand)}
html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold-300),var(--gold-600));
  border-radius:9999px;border:3px solid var(--sand);min-height:44px}
html::-webkit-scrollbar-thumb:hover{background:var(--maroon-700)}

/* ---------------------------------------------- case studies, and quotes
   Filled from the panel's showcase tab and revealed only when at least one
   active row exists, so every rule here has to look right with a single card and
   with several. Daylight Prestige again: the gold stays a hairline, the ground is
   warm, and Arabic takes the Arabic faces with a taller line-height and no
   letter-spacing. */
/* The attribute alone is not enough: .sec-head sets display:flex, and any author
   rule beats the attribute in the user-agent sheet. These two lines are what
   really keep the section - and its two headings - out of the page until there is
   something real to put in them. */
#showcase[hidden],
#showcase .sec-head[hidden]{display:none}
#showcase .cases{display:grid;gap:18px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
#showcase.is-in .cases>*,
#showcase.is-in .quotes>*{animation:sc-in .5s var(--ease) 1 both}
@keyframes sc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#showcase .sc-card{display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px 24px 22px;box-shadow:var(--shadow-ambient)}
#showcase .sc-card .sc-org{align-self:flex-start;border-radius:var(--r-full);
  background:var(--sand);padding:4px 12px;
  font:500 12.5px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--bronze-ink)}
#showcase .sc-card h3{margin:0;font:600 20px/1.35 var(--serif);color:var(--ink-strong)}
#showcase .sc-list{margin:6px 0 0;display:flex;flex-direction:column;gap:12px}
#showcase .sc-list dt{font:600 12.5px/1.4 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-muted)}
#showcase .sc-list dd{margin:4px 0 0;font:400 15.5px/1.7 var(--sans);color:var(--ink)}
#showcase .sc-result{margin:8px 0 0;padding-top:14px;border-top:1px solid var(--border);
  font:400 16px/1.7 var(--sans);color:var(--ink-strong)}
#showcase .sc-result strong{font-weight:600;color:var(--maroon-700)}
#showcase .sc-img{width:100%;height:auto;margin-top:4px;border-radius:var(--r-md);
  border:1px solid var(--border)}
#showcase .quotes{display:grid;gap:18px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
#showcase .sc-quote{margin:0;background:var(--sand);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px}
#showcase .sc-quote blockquote{margin:0;font:400 16.5px/1.75 var(--serif);color:var(--ink-strong)}
#showcase .sc-quote figcaption{margin-top:14px;font:500 13.5px/1.6 var(--sans);
  color:var(--ink-muted)}
/* the Arabic faces, and the taller line-height they need */
[dir="rtl"] #showcase .sc-card .sc-org,
[dir="rtl"] #showcase .sc-list dt{letter-spacing:0;text-transform:none;
  font-family:var(--ar-body)}
[dir="rtl"] #showcase .sc-card h3{font-family:var(--ar-display);line-height:1.55}
[dir="rtl"] #showcase .sc-list dd{font-family:var(--ar-body);line-height:1.9}
[dir="rtl"] #showcase .sc-result{font-family:var(--ar-body);line-height:1.9}
[dir="rtl"] #showcase .sc-quote blockquote{font-family:var(--ar-body);line-height:1.95}
[dir="rtl"] #showcase .sc-quote figcaption{font-family:var(--ar-body);line-height:1.8}
@media (prefers-reduced-motion:reduce){
  #showcase.is-in .cases>*,
  #showcase.is-in .quotes>*{animation:none}
}

/* ------------------------------------------------------------------- WhatsApp */
/* The same floating button the work pages carry, in the same corner, ruled the
   same way (inset-inline-end, so it follows the language exactly as pt.* does).
   Written with literal values rather than this page's tokens, because it is the
   one element shared by two design systems and must not change with the theme. */
.wa-float{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:70;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;box-shadow:0 10px 30px rgba(46,14,20,.24);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)
}
.wa-float:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 16px 40px rgba(46,14,20,.32)}
.wa-float:focus-visible{outline:2px solid var(--maroon-700);outline-offset:3px}
.wa-float svg{width:27px;height:27px}
@media (max-width:680px){
  .wa-float{width:46px;height:46px;inset-block-end:16px;inset-inline-end:16px}
  .wa-float svg{width:24px;height:24px}
}

/* ===== طبقة المعيار المؤسّسيّ =============================================
   مقيسة من موقع رسميّ (sites.moe.gov.sa) في 2026-10-07، لا مُقدَّرة:
     نصّ الجسم 20px ونسبة السطر 1.625 · عناوين 34.67 / 24 / 30 / 24
     الأزرار: نصّ صغير 12px بوزن 700 وحشو أفقيّ واسع — لغة المؤسّسات
     الحاوية 1320px بحشو 24 · زوايا 16 للبطاقات و8 للأزرار
   وفرقٌ واحد عن المرجع عن قصد: حشوة الزرّ الرأسية 14px لا 8، لأنّ زرّ المرجع
   ارتفاعه 33px — دون حدّ اللمس. نأخذ المظهر ولا نأخذ العيب.
   ======================================================================== */
:root{
  --mo-body:20px;      --mo-lh:1.625;
  --mo-h1:34.67px;     --mo-h2:24px;   --mo-h3:30px;   --mo-h4:24px;
  --mo-btn:12px;       --mo-container:1320px;
  --mo-r-card:16px;    --mo-r-btn:8px; --mo-r-bar:10px;
  --mo-panel:#E9F7F2;  --mo-panel-2:#F4FAF6;  --mo-line:#B2DFDB;
  --mo-shadow:0 20px 27px rgba(0,0,0,.05);
}
body{ font-size:var(--mo-body); line-height:var(--mo-lh); }
h1{ font-size:var(--mo-h1); line-height:1.35; }
h2{ font-size:var(--mo-h2); font-weight:700; line-height:1.4; }
h3{ font-size:var(--mo-h3); font-weight:500; line-height:1.375; }
h4{ font-size:var(--mo-h4); font-weight:700; line-height:1.375; }
.btn, a.btn, button.btn, .btn--primary, .btn--gold{
  font-size:var(--mo-btn); font-weight:700;
  padding:14px 32px; border-radius:var(--mo-r-btn); letter-spacing:.02em;
}
.card, .panel, .box, [class*="-card"], [class*="card-"]{
  border-radius:var(--mo-r-card); box-shadow:var(--mo-shadow); border:0;
}


/* ---- الشعار: حجم وموضع ---------------------------------------------------
   كان في الواجهة بحجمه الكامل 700×700 في عمود الصورة، فملأه وصار ضخمًا في
   موضع صورة شخص. صار لوحًا مصغّرًا (176px) مركزيًّا داخل إطاره، مع مسافة
   علوية تفصله عن العنوان. والترويسة تحمل شعارها المرسوم (44px) بلا تغيير.
   ------------------------------------------------------------------------ */
html .portrait{ margin-inline:auto !important; text-align:center !important; }
html .portrait-fig{ display:grid !important; place-items:center !important; }
html .portrait-fig img, html .portrait picture img, html .portrait img{
  width:176px !important; height:176px !important;
  object-fit:contain !important; margin-inline:auto !important;
}
html .f-plate img{ width:56px !important; height:56px !important; object-fit:contain !important; }
html .f-plate{ display:inline-grid !important; place-items:center !important;
  width:56px !important; height:56px !important; background:transparent !important; }
@media (max-width:640px){
  html .portrait-fig img, html .portrait img{ width:132px !important; height:132px !important; }
}

/* ---- شعار التذييل: كان 24×56 (مشدودًا) ⇒ مربّع 56×56 ---- */
html .f-plate, html .f-plate picture, html .f-plate > img, html .f-plate picture img{
  width:56px !important; height:56px !important;
  min-width:56px !important; max-width:56px !important;
  min-height:56px !important; max-height:56px !important;
  object-fit:contain !important; display:block !important; flex:none !important;
}
html .f-plate{ background:transparent !important; }
@media (max-width:640px){
  html .f-plate, html .f-plate picture, html .f-plate > img, html .f-plate picture img{
    width:48px !important; height:48px !important;
    min-width:48px !important; max-width:48px !important;
    min-height:48px !important; max-height:48px !important; }
}
/* ===== المواصفة المصحّحة — المقاسات فقط (الألوان تُترك للسياق) ===== */
html h1, html h2, html h3, html h4{ font-size:inherit; }
html h1{ font-size:var(--s-h1) !important; line-height:1.15 !important; letter-spacing:-.01em; }
html h2{ font-size:var(--s-h2) !important; line-height:1.3 !important; }
html h3{ font-size:var(--s-h3) !important; line-height:1.4 !important; }
html body{ font-size:var(--s-body) !important; line-height:var(--s-lh) !important; }

/* ---- إصلاح انحدار (2026-10-07) -------------------------------------------
   الطبقة السابقة فرضت color على العناوين والنصّ في كلّ موضع، فصارت العناوين
   داكنة فوق ترويسة المنصّة الداكنة (تباين 1.15 و1.41) — أي نصّ غير مقروء.
   القياس كشفه. فالمقاسات تبقى مفروضة، **والألوان تُترك لكلّ سياق** — إلا ما يلي:
   ------------------------------------------------------------------------ */
/* شريط الدخول: خلفيّته #1B8354 فيجب أن يكون نصّه أبيض لا رماديًّا (كان 1.26) */
html .entrybar--main, html .entrybar--main *{ color:#FFFFFF !important; }
html .entrybar--main .entrybar__i{ color:#E9F7F2 !important; }

/* ---- الشعار في الترويسة: كان 24×56 لملفّ ٧٠٠×٧٠٠ (المرئيّ ≈24px) ---------- */
html header .brand img, html header .brand svg, html header .brand .mk,
html header a[href="/"] img, html .brand img, html .brand svg{
  width:40px !important; height:40px !important;
  min-width:40px !important; max-width:40px !important;
  min-height:40px !important; max-height:40px !important;
  object-fit:contain !important; display:block !important;
}
@media (max-width:640px){
  html header .brand img, html header .brand svg, html .brand img, html .brand svg{
    width:34px !important; height:34px !important;
    min-width:34px !important; max-width:34px !important;
    min-height:34px !important; max-height:34px !important; }
}

/* ---- إصلاح ثانٍ (2026-10-07) ---------------------------------------------
   حين أُعيدت كتابة طبقة المواصفة، أسقطتُ خلفيّة لوح الدخول وأبقيتُ نصّه أبيض —
   فصار الزرّ الأوّل في الموقع **أبيض على أبيض (تباين 1.00)**. القياس كشفه.
   والخلفيّات هنا **مقفولة** فلا يسقطها أيّ إعادة كتابة تالية.
   ------------------------------------------------------------------------ */
html .entrysec{ background:#E9F7F2 !important; }
html .entrybar{ background:#FFFFFF !important; border:1px solid #B2DFDB !important; border-radius:10px !important; }
html .entrybar--main{ background:#1B8354 !important; border-color:#1B8354 !important; }
html .entrybar__t{ color:#161616 !important; }
html .entrybar__d{ color:#5B6470 !important; }
html .entrybar__i{ color:#1B8354 !important; }
html .entrybar--main .entrybar__t,
html .entrybar--main .entrybar__d{ color:#FFFFFF !important; }
html .entrybar--main .entrybar__i{ color:#E9F7F2 !important; }
/*
   يبقى عيبًا معروفًا لم أُصلحه بعد (يحتاج فحصًا لا تخمينًا):
   ترويسة صفحة المنصّة داكنة، ونصّها صار داكنًا عليها — تباين 1.15 و1.41.
*/

/* ---- حديث: الذهبيّ ⇒ عائلة الأخضر · والنصوص ⇒ محايد حديث (2026-10-07) ----
   الذهب لم يستعمله أيٌّ من ١٣ موقعًا مرجعيًّا؛ كلّها لون علامة واحد. والذهب
   يقرأ تراثيًّا. فصارت عائلة الأخضر هي العلامة، والمحايدات الحديثة هي النصوص:
   #0F172A عناوين (≈17:1) · #334155 نصّ (≈10:1) · #475569 ثانوي (≈7:1 · AA).
   والقيم مقيسة لا مُقدَّرة.
   ------------------------------------------------------------------------ */
:root{ --m-ink:#0F172A; --m-body:#334155; --m-muted:#475569;
       --m-brand:#1B8354; --m-tint:#E9F7F2; --m-line:#EAECF0; }
html .entrybar__t{ color:#0F172A !important; }
html .entrybar__d{ color:#475569 !important; }
html .entrybar--main{ background:#1B8354 !important; border-color:#1B8354 !important; }
html .entrybar--main .entrybar__t, html .entrybar--main .entrybar__d{ color:#FFFFFF !important; }
html .entrybar__i{ color:#1B8354 !important; }
html .entrysec{ background:#E9F7F2 !important; }

/* ---- إغلاق آخر فشل تباين (2026-10-07) ------------------------------------
   القياس أعطى ٤ مواضع فاشلة:
     · زرّ أخضر بنصّ داكن 3.76  ⇒ يُقلب النصّ أبيض (فالأبيض على #1B8354 = 4.75)
     · روابط خضراء #1B8354 على #F1F4F6 = 4.3 ⇒ الأخصّ للأخضر **النصّيّ** أغمق:
       #12603C (≈6.6:1) — ويبقى #1B8354 لخلفيّات الأزرار حيث يمرّ الأبيض عليه.
   وهذا هو الفرق الحديث: لون للاملاء وآخر للنصّ، لا لون واحد لكلّ شيء.
   ------------------------------------------------------------------------ */
html a:not(.btn):not(.entrybar), html .link, html .lnk{ color:#12603C; }
html .btn--primary, html a.btn--primary, html button.btn--primary,
html .btn--gold, html a.btn--gold{ color:#FFFFFF !important; }
/* وإلغاء أيّ ذهبيّ/نحاسيّ متبقٍّ عبر متغيّرات البطاقات */
html [style*="--accent"]{ --accent:#1B8354 !important; }
html .accent, html [data-accent]{ color:#12603C !important; }