/* =============================================================
   THE SHABAN MANUAL — 40th edition
   Homepage layer. Loads after assets/sg/styleguide.css (tokens +
   components) and nothing else — this page does not load the old
   style.css/sections.css/blog.css files — but it wears the same house
   black + gold, through the tokens in styleguide.css.

   Reuses main.js's existing, tested behaviour for free: the
   .header/.progress/.nav scroll logic, the .burger/.drawer toggle,
   and the [data-reveal]/[data-stagger] IntersectionObserver —
   all pure class-name contracts, agnostic to how they're styled.
   manual.js only adds what main.js doesn't: direction-aware header
   hide/show, the department plan, the odometer, and the job card.
   ============================================================= */

:root{
  --maxw: 1400px;
  --header-h: 72px;
}

/* Language-scoped inline blocks (department/branch/cabinet links kept in
   both languages, one shown per page) — this page doesn't load blog.css,
   so the rule is restated here rather than relying on it being present. */
[data-lang]{ display: none; }
html[lang="en"] [data-lang="en"]{ display: block; }
html[lang="ar"] [data-lang="ar"]{ display: block; }

body.manual{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
}

/* =============================================================
   1. GLOBAL HEADER + NAV + MOBILE INDEX
   A hairline chrome trim, not a bar. Hides on scroll down, returns
   on scroll up (manual.js). Burger + drawer logic is main.js's;
   this only restyles it as a full-screen index.
   ============================================================= */
.manual .header{
  position: fixed; inset-inline: 0; top: 0; z-index: 900;
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--paper);
  border-bottom: 2px solid transparent;
  background-image: var(--chrome);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: bottom;
  transition: transform 420ms var(--ease-mech), background-color 240ms var(--ease-mech);
}
.manual .header.is-hidden{ transform: translateY(-100%); }
.manual .header__in{
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline-start: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-inline-end: max(var(--gutter), env(safe-area-inset-right, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.manual .brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; }
.manual .brand__mark{ width: 30px; height: 30px; flex: none; color: var(--ink); }
.manual .brand__mark svg{ width: 100%; height: 100%; }
.manual .brand__txt{ display: flex; flex-direction: column; line-height: 1.15; }
.manual .brand__name{ font-family: var(--f-display); font-weight: 800; font-size: 1rem; }
.manual .brand__sub{ font-family: var(--f-plate); font-size: .56rem; letter-spacing: .06em; color: var(--graphite); }
html[lang="ar"] .manual .brand__sub{ letter-spacing: 0; }

.manual .nav{ display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.manual .nav a{
  font-family: var(--f-display); font-weight: 700; font-size: .92rem;
  text-decoration: none; color: var(--ink); position: relative; padding-block: 6px;
}
.manual .nav a::after{
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: center;
  transition: transform 240ms var(--ease-mech);
}
.manual .nav a:hover::after, .manual .nav a.active::after{ transform: scaleX(1); }
@media (max-width: 1080px){ .manual .nav{ display: none; } }

.manual .header__act{ display: flex; align-items: center; gap: 10px; }
.manual .header__act .sg-link{ font-size: .82rem; }
.manual .header__act .sg-btn{ padding: 10px 18px; font-size: .8rem; }
@media (max-width: 560px){ .manual .header__act .sg-btn{ display: none; } }

.manual .burger{
  width: 40px; height: 40px; display: grid; place-items: center; gap: 5px;
  border: 1px solid var(--ink);
}
.manual .burger i{ display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform 240ms var(--ease-mech), opacity 240ms var(--ease-mech); }
.manual .burger.on i:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.manual .burger.on i:nth-child(2){ opacity: 0; }
.manual .burger.on i:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1081px){ .manual .burger{ display: none; } }

.manual .progress{
  position: fixed; top: var(--header-h); inset-inline-start: 0; height: 2px; z-index: 901;
  width: 0; background: var(--signal);
  transition: top 420ms var(--ease-mech);
}
/* follows the header up when it hides, instead of floating mid-page */
.manual .header.is-hidden ~ .progress{ top: 0; }

/* full-screen "الفهرس" index menu */
.manual .drawer{
  position: fixed; inset: 0; z-index: 950;
  background: var(--paper);
  padding: calc(var(--header-h) + 28px) var(--gutter) 32px;
  opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--ease-mech), visibility 320ms;
  overflow-y: auto;
}
.manual .drawer.open{ opacity: 1; visibility: visible; }
.manual .drawer::before{
  content: attr(data-label);
  display: block; font-family: var(--f-plate); font-size: .7rem; letter-spacing: .08em;
  color: var(--signal); text-transform: uppercase; margin-bottom: 22px;
}
.manual .drawer ul{ list-style: none; margin: 0; padding: 0; }
.manual .drawer li{ border-bottom: var(--rule-soft); }
.manual .drawer ul a{
  display: flex; align-items: baseline; gap: 18px; padding: 18px 2px;
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 6vw, 2.6rem);
  text-decoration: none; color: var(--ink);
  opacity: 0; transform: translateY(14px);
}
.manual .drawer.open ul a{ animation: mDrawerIn 440ms var(--ease-mech) forwards; }
.manual .drawer ul a span{ font-family: var(--f-plate); font-size: .6rem; color: var(--signal); }
@keyframes mDrawerIn{ to{ opacity: 1; transform: none; } }
.manual .drawer__foot{ margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.manual .drawer__foot .sg-btn{ flex: 1 1 auto; justify-content: center; }
@media (prefers-reduced-motion: reduce){ .manual .drawer ul a{ opacity: 1; transform: none; animation: none; } }

/* =============================================================
   2. COVER
   ============================================================= */
.cover{
  padding-block-start: var(--header-h);
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: 92svh;
}
@media (max-width: 900px){ .cover{ grid-template-columns: 1fr; min-height: 0; } }
.cover__plate{
  position: relative; overflow: hidden; background: var(--lacquer); order: 2;
  min-height: 46svh;
}
@media (min-width: 901px){ .cover__plate{ order: 1; } }
.cover__plate img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.05); }
.cover__overprint{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 58%, rgba(217,169,62,.52) 58% 61%, transparent 61% 64%, rgba(217,169,62,.3) 64% 65%, transparent 65%);
  transform: translateX(16px); opacity: 0;
  transition: transform var(--t-hero) var(--ease-mech), opacity var(--t-hero) var(--ease-mech);
}
.cover.is-set .cover__overprint{ transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce){ .cover__overprint{ transform: none; opacity: 1; transition: none; } }
.cover__caption{
  position: absolute; inset-block-end: 18px; inset-inline-start: 18px; z-index: 2;
  font-family: var(--f-plate); font-size: .62rem; letter-spacing: .06em; color: var(--ink);
  padding: 7px 12px; background: rgba(11,10,9,.74); border-inline-start: 2px solid var(--signal);
}
.cover__copy{
  order: 1; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 64px) var(--gutter);
  gap: 18px;
}
@media (min-width: 901px){ .cover__copy{ order: 2; } }
.cover__line1{ font-family: var(--f-plate); font-size: .78rem; color: var(--graphite); letter-spacing: .03em; }
html[lang="ar"] .cover__line1{ letter-spacing: 0; }
.cover__h1{
  font-family: var(--f-display); font-weight: 900; line-height: .96;
  font-size: clamp(2.6rem, 7.6vw, 7.2rem);
  text-wrap: balance;
}
.cover__edition{ font-family: var(--f-plate); font-size: .78rem; color: var(--signal); letter-spacing: .04em; }
html[lang="ar"] .cover__edition{ letter-spacing: 0; }
.cover__acts{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.cover__stats{
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px);
  margin: 10px 0 0; padding-top: 18px; border-top: var(--rule-soft);
}
.cover__stats > div{ display: flex; flex-direction: column; gap: 2px; }
.cover__stats dd{ margin: 0; font-family: var(--f-plate); font-size: 1.5rem; color: var(--signal); font-variant-numeric: tabular-nums; }
.cover__stats dt{ font-size: .78rem; color: var(--graphite); order: 2; }
/* the original hero's scroll cue, kept */
.cover__scroll{
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
  font-family: var(--f-plate); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite);
}
html[lang="ar"] .cover__scroll{ letter-spacing: 0; }
.cover__scroll i{ display: block; width: 1px; height: 28px; background: linear-gradient(var(--signal), transparent); transform-origin: top; animation: mScroll 2.4s var(--ease-mech) infinite; }
@keyframes mScroll{ 0%{ transform: scaleY(0); opacity: 1; } 55%{ transform: scaleY(1); opacity: 1; } 100%{ transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .cover__scroll i{ animation: none; } }

/* =============================================================
   3. LEGACY (المسيرة)
   ============================================================= */
.legacy{ padding-block: clamp(64px, 9vw, 130px); border-block: var(--rule-soft); }
.legacy__grid{ display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 900px){ .legacy__grid{ grid-template-columns: 1fr; } }
.legacy__photo{ position: relative; background: var(--paper-2); }
.legacy__photo img{ width: 100%; height: auto; aspect-ratio: 4/3.2; object-fit: cover; filter: saturate(.92) contrast(1.05); display: block; }
.legacy__badge{
  position: absolute; inset-block-end: -16px; inset-inline-end: clamp(14px, 2vw, 30px);
  background: var(--paper-3); padding: 14px 20px 12px; box-shadow: 0 22px 44px -18px rgb(0 0 0 / .85);
}
.legacy__badge::before{
  content: ""; position: absolute; inset: 0; padding: 2px;
  background: var(--chrome);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.legacy__badge b{ display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; }
.legacy__badge span{ display: block; color: var(--graphite); font-size: .82rem; margin-top: 2px; }

.legacy__odo{ margin-block: 28px 8px; }
.legacy__odocap{ margin-top: 10px; color: var(--graphite); font-size: .92rem; }

.legacy__clauses{ margin-top: 26px; display: grid; gap: 20px; }
.legacy__clause{ display: grid; grid-template-columns: auto 1fr; gap: 16px; padding-block: 16px; border-top: var(--rule-soft); }
.legacy__clause:first-child{ border-top: 0; padding-top: 0; }
.legacy__clause b{
  font-family: var(--f-plate); font-size: .8rem; color: var(--signal); padding-top: 3px;
}
.legacy__clause h4{ font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; margin: 0 0 4px; }
.legacy__clause p{ margin: 0; color: var(--graphite); font-size: .95rem; }

/* =============================================================
   4. DEPARTMENTS — the blueprint (signature section)
   ============================================================= */
.plan{ padding-block: clamp(64px, 9vw, 130px); background: var(--paper-2); border-block: var(--rule-soft); }
.plan__head{ max-width: 760px; margin-bottom: clamp(30px, 4vw, 54px); }
.plan__block{ font-family: var(--f-plate); font-size: .62rem; color: var(--graphite); margin-top: 18px; }

.plan__grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 980px){ .plan__grid{ grid-template-columns: 1fr; } }

/* the SVG blueprint — aria-hidden, synchronised with the real list */
.plan__svg{ width: 100%; height: auto; background: var(--paper); border: var(--rule); }
.plan__svg .pl-line{ fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .55; }
.plan__svg .pl-bay{ fill: var(--signal); fill-opacity: 0; transition: fill-opacity 240ms var(--ease-mech); pointer-events: none; }
.plan__svg .pl-bay.is-active{ fill-opacity: .14; }
.plan__svg .pl-no{ font-family: var(--f-plate); font-size: 5px; fill: var(--graphite); }
.plan__svg .pl-title{ font-family: var(--f-plate); font-size: 4.2px; fill: var(--ink); }
html[dir="rtl"] .plan__svg text{ direction: ltr; }
@media (max-width: 980px){ .plan__svg{ display: none; } }
.plan__thumb{ display: none; width: 100%; height: auto; border: var(--rule); margin-bottom: 0; }
.plan__thumb-cap{ display: none; font-family: var(--f-plate); font-size: .64rem; color: var(--graphite); margin: 8px 0 20px; }
@media (max-width: 980px){ .plan__thumb, .plan__thumb-cap{ display: block; } }

.plan__list{ list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.plan__bay{
  border-bottom: var(--rule);
}
.plan__bay > a{
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 4px;
  text-align: start; cursor: pointer; text-decoration: none; color: var(--ink);
}
.plan__bay .pb-no{ font-family: var(--f-plate); font-size: .68rem; color: var(--graphite); flex: none; width: 2.6em; }
.plan__bay .pb-name{ font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; flex: 1; }
.plan__bay .pb-ico{ width: 16px; height: 16px; flex: none; transition: transform 240ms var(--ease-mech); color: var(--signal); }
.plan__bay > a[aria-expanded="true"] .pb-ico{ transform: rotate(45deg); }
/* Without JS, nothing ever adds .is-open — so every sheet stays open and
   readable by default (a plain accessible list). Only once .g-js confirms
   the script is running does the accordion collapse and animate; manual.js
   then toggles .is-open on the sheet it belongs to directly. */
.plan__sheet{ padding-inline: 4px; padding-block-end: 22px; }
.g-js .plan__sheet{
  max-height: 0; opacity: 0; overflow: hidden; padding-block-end: 0;
  transition: max-height 420ms var(--ease-mech), opacity 420ms var(--ease-mech), padding-block-end 420ms var(--ease-mech);
}
.g-js .plan__sheet.is-open{ max-height: 900px; opacity: 1; padding-block-end: 22px; }
.plan__photo{ position: relative; margin: 0 0 18px; background: var(--paper-2); }
.plan__photo img{ width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; filter: saturate(.94) contrast(1.04); display: block; }
.plan__photo figcaption{
  position: absolute; inset-block-end: 10px; inset-inline-start: 10px;
  font-family: var(--f-plate); font-size: .6rem; color: var(--ink);
  background: rgba(11,10,9,.74); padding: 5px 10px; border-inline-start: 2px solid var(--signal);
}
.plan__sheet p{ color: var(--graphite); margin: 0 0 14px; max-width: 58ch; }
.plan__sheet ul{ list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.plan__sheet li{ font-size: .88rem; padding-inline-start: 1em; position: relative; }
.plan__sheet li::before{ content: "—"; position: absolute; inset-inline-start: 0; color: var(--signal); }
@media (max-width: 480px){ .plan__sheet ul{ grid-template-columns: 1fr; } }
.plan__sheet .plan__brandlabel{ font-family: var(--f-plate); font-size: .62rem; color: var(--graphite); margin-bottom: 8px; }
.plan__brands{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 16px; padding: 0; }
.plan__brands li{ font-family: var(--f-plate); font-size: .6rem; color: var(--graphite); border: 1px solid var(--line-gold-soft); padding: 3px 8px; }
.plan__acts{ display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
/* the original homepage's bay status labels, kept */
.plan__status{
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-family: var(--f-plate); font-size: .6rem; letter-spacing: .04em; color: var(--signal);
}
html[lang="ar"] .plan__status{ letter-spacing: 0; }
.plan__status s{ width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px rgb(217 169 62 / .6); flex: none; text-decoration: none; }

/* =============================================================
   5. MARQUES CABINET — on lacquer
   ============================================================= */
.cabinet-sec{ padding-block: clamp(64px, 9vw, 130px); background: var(--lacquer); color: var(--lacquer-text); }
.cabinet-sec .sg-sec__note{ color: var(--lacquer-text-2); }
.cabinet-sec .sg-cabinet{ margin-top: 10px; }
.cabinet-sec__cap{ margin-top: 16px; color: var(--lacquer-text-2); font-size: .88rem; }

/* =============================================================
   6. HOW WE WORK — procedure strip
   ============================================================= */
.how{ padding-block: clamp(64px, 9vw, 130px); }
.how__grid{ display: block; }
/* six steps as a 3 × 2 procedure table (the job-log column waits for real data) */
.how__steps{ list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 3vw, 48px); }
@media (max-width: 980px){ .how__steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .how__steps{ grid-template-columns: 1fr; } }
.how__steps li{
  counter-increment: step;
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  padding-block: 18px; border-top: var(--rule-soft);
}
.how__steps li{ border-top: var(--rule); }
.how__steps li::before{
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-plate); font-size: 1.1rem; color: var(--signal);
}
.how__steps h4{ font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; margin: 0 0 4px; }
.how__steps p{ margin: 0; color: var(--graphite); font-size: .92rem; }

.how__log{ border: var(--rule); padding: clamp(20px, 2.6vw, 32px); background: var(--paper-2); }
.how__log b{ display: block; font-family: var(--f-plate); font-size: .66rem; color: var(--graphite); margin-bottom: 12px; }
.how__log p{ margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.75; }

/* =============================================================
   7. BRANCHES — enamel plates
   ============================================================= */
.sites-sec{ padding-block: clamp(64px, 9vw, 130px); border-block: var(--rule-soft); background: var(--paper-2); }
.sites-sec__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(26px, 3vw, 44px); }
@media (max-width: 860px){ .sites-sec__grid{ grid-template-columns: 1fr; } }
.site-plate{ font-family: var(--f-text); }
.site-plate .sg-plate__no{ display: flex; align-items: center; gap: 8px; }
.site-plate__pin{ width: 14px; height: 14px; flex: none; color: var(--signal); }
/* the original plates said BRANCH 0N on both pages: kept as the plate's Latin
   stamp beside the Arabic label; the English page already reads BRANCH 0N */
.site-plate__code{ margin-inline-start: auto; font-family: var(--f-plate); letter-spacing: .06em; color: var(--graphite); }
html[lang="en"] .site-plate__code{ display: none; }
.site-plate__meta{ margin: 2px 0 0; color: var(--graphite); font-size: .92rem; }
.site-plate__tel{ font-family: var(--f-plate); font-size: .78rem; display: block; margin: 10px 0 16px; }
.site-plate .sg-btn{ width: 100%; justify-content: center; margin-bottom: 8px; }
.site-plate__acts{ display: flex; flex-direction: column; gap: 8px; }
.site-plate__more{ display: block; margin-top: 10px; font-size: .85rem; }

/* =============================================================
   8. STORE
   ============================================================= */
.store-sec{ padding-block: clamp(64px, 9vw, 130px); }
.store-sec__in{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px); align-items: center; }
@media (max-width: 900px){ .store-sec__in{ grid-template-columns: 1fr; } }
.store-sec__pill{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-plate); font-size: .62rem; letter-spacing: .04em; color: var(--signal);
  margin-bottom: 14px;
}
.store-sec__pill s{ width: 6px; height: 6px; border-radius: 50%; background: var(--signal); text-decoration: none; }
.store-sec__acts{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.store-sec__note{ margin-top: 16px; color: var(--graphite); font-size: .86rem; }
.store-sec__flow{ border: var(--rule); padding: clamp(24px, 3vw, 40px); background: var(--paper-2); }
.store-sec__flow ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; align-items: center; justify-content: center; }
.store-sec__flow li{ font-family: var(--f-plate); font-size: .74rem; padding: 10px 14px; border: 1px solid var(--line-gold); }
.store-sec__flow li + li::before{ content: "→"; margin-inline-end: 10px; color: var(--signal); }
html[dir="rtl"] .store-sec__flow li + li::before{ content: "←"; }

/* =============================================================
   9. MAGAZINE — editorial issue list
   ============================================================= */
.mag{ padding-block: clamp(64px, 9vw, 130px); border-block: var(--rule-soft); }
.mag__list{ list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; border-top: var(--rule); }
.mag__item{ border-bottom: var(--rule); }
.mag__item a{
  display: grid; grid-template-columns: auto auto 1fr; gap: 20px; align-items: center;
  padding-block: 22px; text-decoration: none; color: var(--ink);
}
@media (max-width: 620px){ .mag__item a{ grid-template-columns: 1fr; } }
.mag__issue{ font-family: var(--f-plate); font-size: .7rem; color: var(--signal); align-self: start; }
.mag__thumb{ margin: 0; width: 120px; flex: none; }
.mag__thumb img{ width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.94) contrast(1.04); display: block; }
@media (max-width: 620px){ .mag__thumb{ width: 100%; } .mag__thumb img{ aspect-ratio: 16/9; } }
.mag__meta{ font-family: var(--f-plate); font-size: .62rem; color: var(--graphite); display: block; margin-bottom: 6px; }
.mag__title{ font-family: var(--f-display); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.mag__dek{ margin: 6px 0 0; color: var(--graphite); font-size: .92rem; max-width: 60ch; }
.mag__read{ display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--f-display); font-weight: 700; font-size: .84rem; color: var(--signal); }
.mag__more{ margin-top: 24px; }

/* =============================================================
   10. CONTACT — job card
   ============================================================= */
.jc-sec{ padding-block: clamp(64px, 9vw, 130px); background: var(--paper-2); }
.jc-sec__in{ display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
@media (max-width: 980px){ .jc-sec__in{ grid-template-columns: 1fr; } }
.jc-sec__in > div:first-child{ position: relative; overflow: hidden; } /* clips the stamp's scale(1.6) press so it can never push the page wider */
.jc-sec .sg-stamp-stage{ position: absolute; inset-inline-end: 18px; inset-block-start: 8px; min-height: 0; z-index: 2; }
.jc-sec form.sg-jobcard{ position: relative; }
.jc-sec__side{ display: grid; gap: clamp(20px, 2.6vw, 30px); }
.jc-lines{ display: grid; gap: 1px; background: var(--line-soft); border: var(--rule); }
.jc-lines a{
  display: flex; align-items: center; gap: 14px; padding: 16px 16px;
  background: var(--paper); text-decoration: none; color: var(--ink);
}
.jc-lines a svg{ width: 18px; height: 18px; flex: none; color: var(--signal); }
.jc-lines b{ display: block; font-size: .92rem; }
.jc-lines__val{ margin-inline-start: auto; font-family: var(--f-plate); font-size: .72rem; color: var(--signal); white-space: nowrap; }
@media (max-width: 480px){
  .jc-lines a{ flex-wrap: wrap; row-gap: 4px; }
  .jc-lines__val{ margin-inline-start: 32px; flex-basis: calc(100% - 32px); }
}
.jc-lines span.tech{ display: block; font-family: var(--f-plate); font-size: .66rem; color: var(--graphite); margin-top: 2px; }
.jc-hours{ border: var(--rule); padding: 20px 22px; background: var(--paper); }
.jc-hours b.ttl{ display: block; font-family: var(--f-plate); font-size: .66rem; color: var(--signal); margin-bottom: 12px; }
.jc-hours ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.jc-hours li{ display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; border-bottom: var(--rule-soft); padding-bottom: 8px; }
.jc-hours li:last-child{ border-bottom: 0; padding-bottom: 0; }
.jc-hours li b{ font-weight: 600; }
.jc-hours li span{ color: var(--carbon); font-family: var(--f-plate); font-size: .82rem; }
.jc-err{ color: var(--signal); font-size: .85rem; margin-block: -6px 14px; display: none; }
.jc-err.show{ display: block; }
.jc-sent{ display: none; text-align: center; padding: 30px 20px; }
.jc-sent.show{ display: block; }
.jc-sent p{ margin: 10px 0 0; color: var(--graphite); }

/* =============================================================
   10b. KEYWORD STRIP — the original homepage's search-terms line,
   kept word for word; set as a quiet index line above the colophon
   ============================================================= */
.kwstrip{ background: var(--paper-2); border-top: 1px solid var(--line-gold-soft); padding-block: clamp(22px, 3vw, 34px); }
.kwstrip__lbl{
  margin: 0 0 8px; font-family: var(--f-plate); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--signal);
}
html[lang="ar"] .kwstrip__lbl{ letter-spacing: 0; }
.kwstrip__list{ margin: 0; color: var(--graphite); font-size: .86rem; line-height: 1.9; max-width: 120ch; }

/* =============================================================
   11. COLOPHON FOOTER
   ============================================================= */
.colophon{ background: var(--lacquer); color: var(--lacquer-text); padding-block: clamp(48px, 6vw, 80px) 26px; border-top: 1px solid var(--line-gold-soft); }
.colophon__grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(26px, 4vw, 54px); }
@media (max-width: 860px){ .colophon__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .colophon__grid{ grid-template-columns: 1fr; } }
.colophon__logo{ width: 112px; height: auto; margin: 0 0 18px; mix-blend-mode: screen; clip-path: inset(1px); } /* the official Logo.png — its black ground melts into the lacquer; inset trims the file's faint edge line */
.colophon .brand{ color: var(--lacquer-text); margin-bottom: 16px; }
.colophon .brand__mark{ color: var(--lacquer-text); }
.colophon__about{ color: var(--lacquer-text-2); font-size: .9rem; max-width: 34ch; margin: 0 0 16px; }
.colophon__social{ display: flex; gap: 10px; }
.colophon__social a{ width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--lacquer-text); transition: border-color 240ms var(--ease-mech), color 240ms var(--ease-mech); }
.colophon__social a:hover{ border-color: var(--signal); color: var(--signal); }
.colophon__social svg{ width: 16px; height: 16px; }
.colophon h5{ font-family: var(--f-plate); font-size: .66rem; letter-spacing: .04em; color: var(--lacquer-text-2); margin: 0 0 16px; text-transform: uppercase; }
html[lang="ar"] .colophon h5{ letter-spacing: 0; }
.colophon__links{ list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.colophon__links a{
  display: flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--lacquer-text);
  font-size: .9rem; transition: color 240ms var(--ease-mech);
}
.colophon__links a:hover{ color: var(--signal); }
.colophon__links a::after{
  content: ""; flex: 1; border-bottom: 1px dotted rgb(242 238 229 / .26); margin-inline: 6px; order: 1;
  align-self: flex-end; margin-bottom: 4px;
}
.colophon__bar{
  margin-top: clamp(36px, 5vw, 60px); padding-top: 20px; border-top: 1px solid var(--line-gold-soft);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-family: var(--f-plate); font-size: .68rem; color: var(--lacquer-text-2);
}
.colophon__years{ color: var(--signal); }
/* room under the bar so the floating WhatsApp plate never sits on it at the page end */
@media (min-width: 769px){ .colophon{ padding-block-end: 96px; } }

/* =============================================================
   12. FLOATING WA + STICKY ACTION BAR (mobile, enamel-plate style)
   ============================================================= */
.manual .wa{
  position: fixed; z-index: 800; inset-block-end: 22px; inset-inline-end: 22px;
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  background: var(--signal); color: var(--signal-ink); text-decoration: none;
  font-family: var(--f-plate); font-size: .66rem; letter-spacing: .04em;
  box-shadow: 0 0 18px rgb(217 169 62 / .22);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 240ms var(--ease-mech), transform 240ms var(--ease-mech);
}
.manual .wa.show{ opacity: 1; transform: none; pointer-events: auto; }
.manual .wa svg{ width: 16px; height: 16px; }
@media (max-width: 768px){ .manual .wa{ display: none; } }

.manual .action-bar{ display: none; }
@media (max-width: 768px){
  body.manual{ padding-block-end: 64px; }
  .manual .action-bar{
    position: fixed; z-index: 900; inset-block-end: 0; inset-inline: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--paper-2);
    border-block-start: 2px solid transparent;
    background-image: var(--chrome); background-size: 100% 2px; background-repeat: no-repeat; background-position: top;
    padding-block-end: env(safe-area-inset-bottom);
    box-shadow: 0 -14px 30px -14px rgb(0 0 0 / .7);
  }
  .manual .action-bar a{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 56px; text-decoration: none; color: var(--ink);
    font-family: var(--f-plate); font-size: .72rem; letter-spacing: .03em;
    border-inline-start: var(--rule-soft);
  }
  .manual .action-bar a:first-child{ border-inline-start: 0; }
  html[lang="ar"] .manual .action-bar a{ letter-spacing: 0; }
  .manual .action-bar a svg{ width: 17px; height: 17px; }
  .manual .action-bar__wa{ background: var(--signal); color: var(--signal-ink); }
}

/* =============================================================
   13. VIEW TRANSITIONS — progressive enhancement only
   A plan bay's own page can declare the same view-transition-name
   (dept-01 … dept-09) on its hero plate to make this morph into it;
   browsers without support simply navigate as normal.
   ============================================================= */
@view-transition{ navigation: auto; }
.plan__bay[data-bay]{ view-transition-name: none; }
@supports (view-transition-name: a){
  .plan__bay.is-current{ view-transition-name: var(--vt-name, none); }
}

/* =============================================================
   14. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .manual .header{ transition: none; }
  .manual .drawer ul a{ transition: none; }
  .cover__overprint{ transition: none; }
  .legacy__odo .sg-odo__digit b{ transition: none; }
  .sg-stamp{ transition: none; }
}