/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — HOME
   The studio entrance: hero crest, two specimen-plate tool cards,
   recent projects, footer. Fully bilingual (LTR / RTL).
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
body{
  font-family:var(--ok-ui);
  color:var(--ok-text);
  background:linear-gradient(180deg, var(--ok-ivory), var(--ok-cream) 82%);
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* The top bar and the hero are separate elements but must read as one
   dark ground behind the crest and headline. A fixed-attachment gradient
   on both paints a single continuous field across the viewport, so the
   ivory page never creeps up behind the light hero type. */
.sh-top,.sh-hero{
  background-color:var(--ok-navy);   /* fallback wherever fixed attachment is ignored */
  background-image:radial-gradient(1500px 900px at 50% -180px, #22355A 0%, #16233C 42%, var(--ok-navy) 72%, var(--ok-ink) 100%);
  background-attachment:fixed;
  background-size:cover;
}
body.lang-ar{font-family:var(--ok-ar-ui)}
main{flex:1;width:100%}
img{max-width:100%}

/* ═══ TOP BAR ═══ */
.sh-top{position:relative;z-index:5}
.sh-top-inner{
  max-width:1180px;margin:0 auto;padding:20px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.sh-brand{display:flex;align-items:center;gap:12px}
.sh-brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.sh-brand-text{display:flex;flex-direction:column;line-height:1.15}
.sh-brand-text strong{color:var(--ok-ivory);font-size:1.02rem;font-weight:800;letter-spacing:.02em}
.sh-brand-text span{color:var(--ok-gold-soft);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
body.lang-ar .sh-brand-text span{letter-spacing:.02em}
.sh-lang{
  display:flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(250,247,239,.08);border:1px solid rgba(232,201,120,.3);
}
.sh-lang button{
  border:none;background:transparent;color:rgba(250,247,239,.65);
  font-family:inherit;font-weight:700;font-size:.78rem;
  padding:7px 14px;border-radius:999px;cursor:pointer;transition:.18s;
}
.sh-lang button.active{background:linear-gradient(180deg,var(--ok-gold-soft),var(--ok-gold));color:var(--ok-ink)}

/* ═══ HERO ═══ */
.sh-hero{
  position:relative;
  text-align:center;
  /* Trimmed from 34/62 so the studio cards start higher in the viewport —
     the hero is the invitation, not the destination. */
  padding:26px 24px 46px;
  color:var(--ok-ivory);
}
/* soft dissolve from the dark stage into the paper below */
.sh-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,16,32,0), rgba(250,247,239,.55) 62%, var(--ok-ivory));
}
.sh-crest{
  position:relative;width:172px;height:172px;margin:0 auto 20px;
  display:grid;place-items:center;
  animation:crestIn 1.1s cubic-bezier(.16,1,.3,1) both;
}
.sh-crest img{
  width:118px;height:118px;position:relative;z-index:2;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.55));
}
.sh-crest::after{
  content:"";position:absolute;inset:14px;border-radius:50%;
  background:radial-gradient(circle, rgba(232,201,120,.22), transparent 62%);
  animation:halo 3.4s ease-in-out 1s infinite;
}
.sh-ring{position:absolute;inset:0;animation:spin 26s linear infinite}
.sh-ring circle{fill:none;stroke:rgba(232,201,120,.62);stroke-width:1.3;stroke-dasharray:1 6;stroke-linecap:round}
.sh-ring-2{animation-direction:reverse;animation-duration:40s;opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes halo{0%,100%{transform:scale(.9);opacity:.5}50%{transform:scale(1.06);opacity:.9}}
@keyframes crestIn{0%{opacity:0;transform:scale(.7) translateY(20px);filter:blur(8px)}100%{opacity:1;transform:none;filter:blur(0)}}

.sh-hero h1{
  position:relative;z-index:1;
  text-shadow:0 3px 22px rgba(8,13,24,.55);
  font-family:var(--ok-display);
  /* ~15% smaller at the top end, so the headline still carries the page
     but the studios begin appearing sooner. Small screens keep their
     original size, where the hero was never the problem. */
  font-weight:600;font-size:clamp(2.5rem,5.4vw,3.5rem);line-height:1.04;
  letter-spacing:.005em;
  animation:riseIn .9s cubic-bezier(.16,1,.3,1) .18s both;
}
body.lang-ar .sh-hero h1{font-family:var(--ok-ar-display);font-weight:700}
.sh-hero h1 em{
  font-style:italic;color:var(--ok-gold-soft);
  background:linear-gradient(105deg,var(--ok-gold-soft),#F6E3AC 45%,var(--ok-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sh-sub{
  max-width:520px;margin:16px auto 0;position:relative;z-index:1;
  font-size:.98rem;line-height:1.6;color:rgba(250,247,239,.88);
  text-shadow:0 2px 14px rgba(8,13,24,.65);
  animation:riseIn .9s cubic-bezier(.16,1,.3,1) .32s both;
}
.sh-hero-rule{
  position:relative;z-index:1;
  width:0;height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--ok-gold-soft),transparent);
  animation:rule 1s cubic-bezier(.16,1,.3,1) .55s forwards;
}
@keyframes rule{to{width:220px}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ═══ TOOL CARDS ═══ */
.sh-tools{
  position:relative;z-index:1;
  max-width:1420px;margin:6px auto 0;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.sh-card{
  position:relative;display:flex;flex-direction:column;
  border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;
  background:var(--ok-card);
  border:1px solid var(--ok-border);
  box-shadow:var(--ok-shadow-md);
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .28s ease, border-color .28s ease;
  animation:riseIn .9s cubic-bezier(.16,1,.3,1) .5s both;
}
.sh-card:nth-child(2){animation-delay:.60s}
.sh-card:nth-child(3){animation-delay:.70s}
.sh-card:nth-child(4){animation-delay:.78s}
.sh-card:nth-child(5){animation-delay:.86s}
.sh-card:nth-child(6){animation-delay:.94s}
.sh-card:nth-child(7){animation-delay:1.02s}
.sh-card:nth-child(8){animation-delay:1.10s}
.sh-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--ok-gold),transparent);
  opacity:0;transition:opacity .28s ease;
}
.sh-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--ok-shadow-lg);
  border-color:var(--ok-gold-line);
}
.sh-card:hover::before{opacity:1}

.sh-card-stage{
  position:relative;height:230px;overflow:hidden;
  display:grid;place-items:center;
  border-bottom:1px solid var(--ok-border);
}
.stage-cert{background:
  radial-gradient(560px 240px at 50% 118%, rgba(201,154,61,.20), transparent 62%),
  linear-gradient(160deg,#1B2A47,var(--ok-navy) 62%,var(--ok-ink))}
.stage-tt{background:
  radial-gradient(560px 240px at 50% 118%, rgba(24,59,56,.55), transparent 66%),
  linear-gradient(160deg,#20313A,var(--ok-emerald) 62%,#0E2422)}

/* — Miniature certificate specimen — */
.mini-cert{
  position:relative;width:238px;height:168px;padding:16px 18px;
  background:linear-gradient(180deg,#FFFDF6,var(--ok-ivory));
  border-radius:6px;
  box-shadow:0 22px 44px rgba(0,0,0,.42);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transform:rotate(-2.2deg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card:hover .mini-cert{transform:rotate(0deg) scale(1.04)}
.mc-border{position:absolute;inset:7px;border:1.4px solid var(--ok-gold);border-radius:4px;pointer-events:none}
.mc-border::after{content:"";position:absolute;inset:3px;border:.8px solid rgba(201,154,61,.45);border-radius:3px}
.mc-flag{width:26px;height:5px;border-radius:2px;margin-top:2px;
  background:linear-gradient(90deg,#EF3340 33%,#009739 33% 66%,#111 66%)}
.mc-title{font-family:var(--ok-display);font-weight:700;font-size:.78rem;color:var(--ok-navy);letter-spacing:.03em}
body.lang-ar .mc-title{font-family:var(--ok-ar-display)}
.mc-name{font-family:var(--ok-display);font-style:italic;font-size:.94rem;color:var(--ok-burgundy)}
.mc-line{height:3.5px;border-radius:2px;background:linear-gradient(90deg,rgba(16,26,45,.14),rgba(16,26,45,.24),rgba(16,26,45,.14))}
.mc-line.w60{width:60%}.mc-line.w50{width:50%}.mc-line.w40{width:40%}
.mc-foot{margin-top:auto;width:82%;display:flex;align-items:flex-end;justify-content:space-between}
.mc-sig{width:38px;height:2px;background:rgba(16,26,45,.4);position:relative}
.mc-sig::before{content:"";position:absolute;top:-7px;left:4px;right:4px;height:6px;
  border-bottom:1.4px solid rgba(100,40,58,.65);border-radius:0 0 60% 40%}
.mc-seal{position:relative;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#F3DA9B,var(--ok-gold) 58%,#8F6A24);
  box-shadow:0 4px 10px rgba(0,0,0,.3)}
.mc-seal i{position:absolute;inset:4px;border-radius:50%;border:1px dashed rgba(60,40,8,.5)}
.sh-ribbon{
  position:absolute;top:-6px;inset-inline-end:34px;width:30px;height:78px;
  background:linear-gradient(180deg,var(--ok-gold-soft),var(--ok-gold));
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  transition:transform .3s ease;
}
.sh-card:hover .sh-ribbon{transform:translateY(4px)}

/* — Miniature timetable specimen — */
.mini-tt{
  width:250px;border-radius:8px;overflow:hidden;
  background:#FFFDF8;box-shadow:0 22px 44px rgba(0,0,0,.42);
  transform:rotate(1.8deg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card:hover .mini-tt{transform:rotate(0deg) scale(1.04)}
.mt-head{display:flex;align-items:center;gap:8px;padding:9px 11px;
  background:linear-gradient(180deg,#1B2A47,var(--ok-navy))}
.mt-owl{width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 32%,var(--ok-gold-soft),var(--ok-gold) 70%)}
.mt-head-lines{flex:1;display:flex;flex-direction:column;gap:4px}
.mt-head-lines i{height:4px;border-radius:2px;background:rgba(250,247,239,.75)}
.mt-head-lines i:last-child{width:55%;background:rgba(232,201,120,.7)}
.mt-clock{width:15px;height:15px;border-radius:50%;border:1.6px solid rgba(232,201,120,.8);position:relative}
.mt-clock i{position:absolute;left:50%;top:50%;width:1.6px;height:5px;background:var(--ok-gold-soft);transform-origin:top center;transform:translate(-50%,-1px) rotate(140deg)}
.mt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:8px}
.mt-grid i{height:15px;border-radius:3px;background:#EFE9DC}
.mt-grid i.d{height:11px;background:linear-gradient(180deg,#31548C,#27447A)}
.mt-grid i.c1{background:#C99A3D}
.mt-grid i.c2{background:#3E6E6A}
.mt-grid i.c3{background:#7C4258}
.mt-grid i.c4{background:#31548C}
.mt-grid i.brk{height:8px;background:repeating-linear-gradient(45deg,#E8DFC9 0 5px,#F4EDDD 5px 10px)}
.mt-chips{
  position:absolute;bottom:16px;inset-inline-start:20px;display:flex;gap:7px;
}
.mt-chips i{width:22px;height:22px;border-radius:7px;box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition:transform .28s ease}
.mt-chips i.c1{background:#C99A3D}.mt-chips i.c2{background:#3E6E6A}
.mt-chips i.c3{background:#7C4258}.mt-chips i.c4{background:#31548C}
.sh-card:hover .mt-chips i{transform:translateY(-4px)}
.sh-card:hover .mt-chips i:nth-child(2){transition-delay:.04s}
.sh-card:hover .mt-chips i:nth-child(3){transition-delay:.08s}
.sh-card:hover .mt-chips i:nth-child(4){transition-delay:.12s}

/* — Miniature seating plan specimen — */
.stage-seat{background:
  radial-gradient(560px 240px at 50% 118%, rgba(100,40,58,.35), transparent 66%),
  linear-gradient(160deg,#3A2833,var(--ok-burgundy) 62%,#3A1A25)}
.mini-room{
  width:250px;padding:14px 14px 16px;border-radius:8px;
  background:#FFFDF8;box-shadow:0 22px 44px rgba(0,0,0,.42);
  transform:rotate(-1.6deg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card:hover .mini-room{transform:rotate(0deg) scale(1.04)}
.mr-board{
  position:relative;height:13px;margin:0 auto 12px;width:74%;border-radius:3px;
  background:repeating-linear-gradient(135deg,rgba(16,26,45,.08) 0 5px,transparent 5px 10px),#EFE9DC;
  border:1px solid #DDD5C6;
}
.mr-desk{
  position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  width:24px;height:11px;border-radius:3px;background:var(--ok-navy);
}
.mr-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.mr-grid i{height:15px;border-radius:3px;background:#EFE9DC;border:1px solid #E2DACA}
.mr-grid i.g{background:transparent;border:none}
.mr-grid i.off{background:repeating-linear-gradient(135deg,rgba(16,26,45,.1) 0 4px,transparent 4px 8px);border-style:dashed}
.sh-card:hover .mr-grid i.s:nth-child(3n){background:var(--ok-gold-soft)}

/* — Miniature label sheet specimen — */
.stage-labels{background:
  radial-gradient(560px 240px at 50% 118%, rgba(201,154,61,.28), transparent 66%),
  linear-gradient(160deg,#3A3222,#8F6A24 62%,#2A2113)}
.mini-labels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
  width:190px;padding:14px 12px;border-radius:4px;
  background:#FFFDF8;box-shadow:0 22px 44px rgba(0,0,0,.42);
  transform:rotate(1.4deg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card:hover .mini-labels{transform:rotate(0deg) scale(1.04)}
.mini-labels i{
  height:22px;border-radius:2px;background:var(--ok-ivory);
  box-shadow:inset 0 0 0 1px var(--ok-gold);
  position:relative;
}
.mini-labels i::after{
  content:"";position:absolute;left:22%;right:22%;top:42%;height:2.5px;border-radius:2px;
  background:rgba(16,26,45,.35);
}
.sh-card:hover .mini-labels i:nth-child(3n+1){background:rgba(201,154,61,.2)}

/* — Miniature bilingual letter specimen — */
.stage-letters{background:
  radial-gradient(560px 240px at 50% 118%, rgba(46,117,182,.3), transparent 66%),
  linear-gradient(160deg,#22304C,#1F3864 62%,#121D34)}
.mini-letter{
  width:180px;padding:12px 12px 14px;border-radius:3px;
  background:#FFFDF8;box-shadow:0 22px 44px rgba(0,0,0,.42);
  transform:rotate(-1.4deg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card:hover .mini-letter{transform:rotate(0deg) scale(1.04)}
.ml-head{display:flex;flex-direction:column;align-items:center;gap:3px;padding-bottom:7px;border-bottom:1.5px solid var(--ok-gold)}
.ml-crest{width:16px;height:16px;border-radius:50%;background:linear-gradient(150deg,#31548C,var(--ok-navy))}
.ml-head i{height:3px;width:70%;border-radius:2px;background:rgba(16,26,45,.4)}
.ml-head i.short{width:44%;background:rgba(16,26,45,.22)}
.ml-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 0}
.ml-col{display:flex;flex-direction:column;gap:3.5px}
.ml-col.rtl{align-items:flex-end;border-inline-start:1px solid rgba(16,26,45,.12);padding-inline-start:8px}
.ml-col b{height:4px;width:78%;border-radius:2px;background:var(--ok-gold);display:block}
.ml-col i{height:2.5px;width:100%;border-radius:2px;background:rgba(16,26,45,.2);display:block}
.ml-col i.short{width:60%}
.ml-cut{border-top:1.5px dashed rgba(16,26,45,.4);margin:6px -12px 6px}
.ml-slip{display:flex;flex-direction:column;gap:3.5px;padding-top:2px}
.ml-slip i{height:2.5px;border-radius:2px;background:rgba(16,26,45,.24);display:block}
.ml-slip i.short{width:52%}

/* — Miniature exam cover specimen — */
.stage-exams{background:
  radial-gradient(560px 240px at 50% 118%, rgba(201,154,61,.22), transparent 66%),
  linear-gradient(160deg,#232B3B,#101A2D 62%,#080D18)}
.mini-exam{
  width:176px;padding:11px;border-radius:3px;
  background:#fff;box-shadow:0 22px 44px rgba(0,0,0,.42);
  transform:rotate(1.2deg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card:hover .mini-exam{transform:rotate(0deg) scale(1.04)}
.me-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-bottom:6px;border-bottom:2px solid var(--ok-navy)}
.me-head i{height:5px;width:52%;border-radius:2px;background:rgba(16,26,45,.5);display:block}
.me-tag{width:34px;height:9px;border-radius:2px;background:var(--ok-navy);display:block}
.me-title{height:7px;width:70%;margin:8px auto 7px;border-radius:2px;background:rgba(16,26,45,.75)}
.me-fields{display:flex;gap:4px;margin-bottom:8px}
.me-fields i{flex:1;height:12px;border:1px solid rgba(16,26,45,.35);border-radius:1px;display:block}
.me-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5px}
.me-grid i{height:9px;border:1px solid rgba(16,26,45,.28);display:block;background:#fff}
.me-grid i.h{background:var(--ok-navy);border-color:var(--ok-navy)}
.me-grid i.t{background:rgba(201,154,61,.35)}
.me-grid i.h.t{background:var(--ok-gold);border-color:var(--ok-gold)}

/* — Miniature plan book specimen — */
.stage-planner{background:
  radial-gradient(560px 240px at 50% 118%, rgba(62,110,106,.34), transparent 66%),
  linear-gradient(160deg,#23383A,#183B38 62%,#0C201F)}
.mini-planner{
  width:200px;padding:11px;border-radius:3px;
  background:#FFFDF8;box-shadow:0 22px 44px rgba(0,0,0,.42);
  transform:rotate(-1.2deg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card:hover .mini-planner{transform:rotate(0deg) scale(1.04)}
.mp-head{display:flex;flex-direction:column;gap:3px;padding-bottom:7px;margin-bottom:7px;border-bottom:2px solid var(--ok-emerald)}
.mp-head i{height:4px;width:62%;border-radius:2px;background:rgba(16,26,45,.55);display:block}
.mp-head i.short{width:38%;background:rgba(16,26,45,.25);height:3px}
.mp-grid{display:grid;grid-template-columns:16px repeat(4,1fr);gap:3px}
.mp-grid i{height:17px;border:1px solid rgba(16,26,45,.18);border-radius:2px;display:block;background:#fff}
.mp-grid i.d{background:var(--ok-emerald);border-color:var(--ok-emerald);height:11px}
.mp-grid i.p{background:var(--ok-cream);border-color:var(--ok-border)}
.mp-grid i.c1{background:rgba(201,154,61,.35)}
.mp-grid i.c2{background:rgba(62,110,106,.35)}
.mp-grid i.c3{background:rgba(49,84,140,.3)}
.mp-grid i.c4{background:rgba(124,66,88,.3)}

/* — Miniature hall passes specimen — */
.stage-passes{background:
  radial-gradient(560px 240px at 50% 118%, rgba(15,118,110,.35), transparent 66%),
  linear-gradient(160deg,#1E3B3A,#0F766E 58%,#0B2E2C)}
.mini-passes{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;
  transform:rotate(-2deg);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card:hover .mini-passes{transform:rotate(0deg) scale(1.05)}
.mpass{
  width:96px;height:60px;border-radius:5px;position:relative;
  background:#FFFDF8;box-shadow:0 14px 26px rgba(0,0,0,.4);
  display:block;overflow:hidden;
}
.mpass::before{content:"";position:absolute;top:0;left:0;right:0;height:8px}
.mpass::after{
  content:"";position:absolute;left:9px;right:9px;bottom:12px;height:2.5px;border-radius:2px;
  background:rgba(16,26,45,.2);box-shadow:0 7px 0 rgba(16,26,45,.14);
}
.mpass i{position:absolute;top:15px;left:9px;width:17px;height:17px;border-radius:5px;display:block}
.mpass.p1::before,.mpass.p1 i{background:#0F766E}
.mpass.p2::before,.mpass.p2 i{background:#B4364C}
.mpass.p3::before,.mpass.p3 i{background:#1F3864}
.mpass.p4::before,.mpass.p4 i{background:#6D28D9}

/* — Card body — */
.sh-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.sh-card-kicker{font-size:.62rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--ok-gold)}
body.lang-ar .sh-card-kicker{letter-spacing:.06em}
.sh-card-body h2{
  font-family:var(--ok-display);font-weight:700;font-size:1.85rem;line-height:1.1;color:var(--ok-navy);
}
body.lang-ar .sh-card-body h2{font-family:var(--ok-ar-ui);font-size:1.6rem}
.sh-card-body p{font-size:.87rem;line-height:1.6;color:var(--ok-text-soft)}
.sh-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.sh-chips span{
  padding:5px 11px;border-radius:999px;font-size:.7rem;font-weight:700;
  background:var(--ok-cream);border:1px solid var(--ok-border);color:var(--ok-navy);
}
.sh-open{margin-top:auto;align-self:flex-start}

/* ═══ MY CLASSES ═══ */
.sh-register{position:relative;z-index:1;max-width:1080px;margin:34px auto 0;padding:0 24px}
.sh-register-card{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:24px 26px;border-radius:22px;
  background:var(--ok-card);border:1px solid var(--ok-border);
  box-shadow:var(--ok-shadow-sm);
}
.shr-text{flex:1;min-width:280px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.shr-text h3{font-family:var(--ok-display);font-weight:700;font-size:1.75rem;line-height:1.1;color:var(--ok-navy)}
body.lang-ar .shr-text h3{font-family:var(--ok-ar-ui);font-size:1.5rem}
.shr-text p{font-size:.85rem;line-height:1.6;color:var(--ok-text-soft);max-width:56ch}
.shr-chips{display:flex;flex-wrap:wrap;gap:7px;max-width:260px}
.shr-chip{
  padding:7px 13px;border-radius:11px;font-size:.8rem;font-weight:800;
  box-shadow:0 3px 9px rgba(16,26,45,.16);
}

/* ═══ RECENT PROJECTS ═══ */
.sh-recent{max-width:1080px;margin:38px auto 0;padding:0 24px}
.sh-recent h3{
  font-family:var(--ok-display);font-weight:700;font-size:1.4rem;color:var(--ok-navy);
  padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--ok-border);
}
body.lang-ar .sh-recent h3{font-family:var(--ok-ar-ui)}
.sh-recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.sh-recent-card{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  padding:12px 14px;border-radius:16px;
  background:var(--ok-card);border:1px solid var(--ok-border);
  box-shadow:var(--ok-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sh-recent-card:hover{transform:translateY(-2px);box-shadow:var(--ok-shadow-md);border-color:var(--ok-gold-line)}
.src-ic{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;color:var(--ok-ivory)}
.src-ic svg{width:18px;height:18px}
.src-cert{background:linear-gradient(150deg,#1B2A47,var(--ok-navy))}
.src-tt{background:linear-gradient(150deg,#2A4744,var(--ok-emerald))}
.src-seat{background:linear-gradient(150deg,#7C4258,var(--ok-burgundy))}
.src-lab{background:linear-gradient(150deg,#B08633,#8F6A24)}
.src-let{background:linear-gradient(150deg,#31548C,#1F3864)}
.src-exam{background:linear-gradient(150deg,#3A4560,var(--ok-navy))}
.src-plan{background:linear-gradient(150deg,#3E6E6A,var(--ok-emerald))}
.src-pass{background:linear-gradient(150deg,#14958B,#0F766E)}
.src-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.src-meta strong{font-size:.85rem;color:var(--ok-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-meta small{font-size:.7rem;color:var(--ok-text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-go{font-size:.7rem;font-weight:800;color:var(--ok-gold);text-transform:uppercase;letter-spacing:.08em}
body.lang-ar .src-go{letter-spacing:.02em}

/* ═══ FOOTER ═══ */
.sh-foot{margin-top:52px;background:linear-gradient(180deg,var(--ok-navy),var(--ok-ink));color:rgba(250,247,239,.75)}
.sh-foot-inner{max-width:1080px;margin:0 auto;padding:30px 24px 34px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.sh-foot-brand{display:flex;align-items:center;gap:10px}
.sh-foot-brand img{width:26px;height:26px}
.sh-foot-brand span{font-weight:800;color:var(--ok-ivory);letter-spacing:.04em}
.sh-foot-line{font-size:.78rem;color:var(--ok-gold-soft)}
.sh-foot-note{font-size:.7rem;color:rgba(250,247,239,.5)}

/* ── Attribution ──────────────────────────────────────────────────────
   A hairline separates the promise about privacy above from the legal
   note below, so the two are not read as one run-on sentence. */
.sh-foot-rule{
  width:min(360px,70%);height:1px;margin:8px 0 4px;
  background:linear-gradient(90deg,transparent,rgba(232,201,120,.28),transparent);
}
.sh-foot-legal{
  display:flex;align-items:center;justify-content:center;
  gap:5px 10px;flex-wrap:wrap;
  font-size:.72rem;font-weight:700;color:rgba(250,247,239,.62);
}
.sh-foot-link{
  color:var(--ok-gold-soft);text-decoration:none;font-weight:800;
  border-bottom:1px solid rgba(232,201,120,.34);
  padding-bottom:1px;transition:color .16s ease,border-color .16s ease;
  unicode-bidi:isolate;                 /* the address never re-orders */
}
.sh-foot-link:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.sh-foot-link:focus-visible{outline:2px solid var(--ok-gold-soft);outline-offset:3px;border-radius:3px}
.sh-foot-copy{
  display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;
  font-size:.68rem;color:rgba(250,247,239,.42);letter-spacing:.02em;
}
.sh-foot-copy [data-om-year]{unicode-bidi:isolate}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1040px){
  .sh-tools{grid-template-columns:1fr 1fr;max-width:760px}
}
@media (max-width:760px){
  .sh-tools{grid-template-columns:1fr;max-width:520px}
}
@media (max-width:520px){
  .sh-top-inner{padding:16px 18px}
  .sh-brand-text strong{font-size:.92rem}
  .sh-hero{padding-top:22px}
  .sh-crest{width:140px;height:140px}
  .sh-crest img{width:96px;height:96px}
  .sh-card-stage{height:196px}
  .mini-cert{width:206px;height:148px}
  .mini-tt{width:216px}
  .sh-tools,.sh-recent{padding:0 18px}
}

/* ── Hero artwork on the tool cards ─────────────────────────────────
   Drop a file into assets/heroes/ and it takes over the card's stage.
   Until then the CSS specimen stands, so a fresh clone never shows a
   broken image or an empty rectangle. */
.sh-card-hero{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity .5s ease, transform .4s cubic-bezier(.2,.9,.3,1.2);
}
.sh-card-stage.has-hero .sh-card-hero{opacity:1}
.sh-card:hover .sh-card-stage.has-hero .sh-card-hero{transform:scale(1.045)}
/* the drawn specimen steps aside once real artwork arrives */
.sh-card-stage.has-hero > *:not(.sh-card-hero){display:none}
/* a gradient foot keeps the card body's edge crisp against a photograph */
.sh-card-stage.has-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,16,32,.35));
}
/* A transparent render is a subject, not a backdrop: show all of it,
   float it on the card's own gradient, and drop the darkening foot. */
.sh-card-stage.hero-render .sh-card-hero{
  object-fit:contain;
  padding:14px 18px 10px;
  filter:drop-shadow(0 18px 26px rgba(2,6,14,.45));
}
.sh-card-stage.hero-render::after{display:none}
.sh-card:hover .sh-card-stage.hero-render .sh-card-hero{transform:translateY(-4px) scale(1.03)}