/* =====================================================================
   Maccar Medical — home page "Calibrated" (home.css; loaded on the home route only). Owner: WS2.
   Binding spec: DESIGN-DIRECTION.md §4.2 (sections), §3.5 (CSS-first hero intro), §3.9 (scroll moments).
   Consumes the base.css tokens only; never redefines them. Logical properties only (physical values appear
   only on lines marked "physical: photo space"). Motion: CSS keyframes gated by html.motion-ok (hero intro);
   everything scroll-driven lives in home.js (Store.motion.define) and degrades to the static final state.

   01 .hh   hero "specimen sheet"          02 .hst  statement            03 .hsp  specialities register
   04 .hl   laboratory scan (Studio)       05 .hrl  selected equipment   06 .hpr  protocol ledger
   07 .hsv  service log                    08 .hbr  manufacturers        09 .hin  insights      10 .hof offices
   — .hcamp campaign band (only when admin hero banners exist)
   ===================================================================== */

/* Leader-callout values are catalogue data: keep "160 liters" in reading order inside Arabic pages */
.page-home .callout-value, .page-home .callout-legend .callout-value { direction: ltr; unicode-bidi: isolate; }

/* =====================================================================
   01 Hero — specimen sheet
   ===================================================================== */
.hh { padding-block: clamp(12px, 1.5vw, 24px) var(--space-block); }
.hh-sheet { position: relative; padding: 24px 12px 32px; }
@media (min-width: 768px) { .hh-sheet { padding: 48px 40px 40px; } }
@media (min-width: 1200px) {
  .hh-sheet { display: flex; flex-direction: column; min-height: min(860px, calc(100svh - var(--header-h) - 24px)); padding: 48px 48px 32px; }
}

/* sheet frame (WS1 .sheet-frame draws the rectangle + 11 column hairlines) and zone markers */
.hh-frame { z-index: 0; }
.hh-zones { position: absolute; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 10px; line-height: 1;
  color: var(--text-faint); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.hh-zones--cols { inset-inline: 0; top: 14px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); text-align: center; }
.hh-zones--rows { top: 56px; bottom: 24px; inset-inline-start: 14px; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); align-items: center; }
@media (max-width: 767.98px) { .hh-zones { display: none; } }

.hh-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hh-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 56px; }
  .hh-copy, .hh-facts { grid-column: 1 / -1; }
  .hh-specimen { grid-column: 2 / 8; }
}
@media (min-width: 1200px) {
  .hh-grid { flex: 1; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--col-gap); row-gap: 40px; }
  .hh-copy { grid-column: 1 / 8; grid-row: 1; align-self: end; }
  .hh-facts { grid-column: 1 / 8; grid-row: 2; }
  .hh-title { font-size: min(var(--fs-hero), 5.8vw); }
  .hh-specimen { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; justify-self: end;
    width: min(100%, max(380px, calc((100svh - var(--header-h) - 300px) * .8))); }
  .hh--type .hh-copy, .hh--type .hh-facts { grid-column: 1 / 10; }
}

/* copy */
.hh-label { margin-bottom: 24px; font-family: var(--font-mono); font-size: var(--fs-data); line-height: 1.5; letter-spacing: .06em;
  color: var(--text-muted); text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums; }
:lang(ar) .hh-label { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: var(--fs-small); }
.hh-title { margin: 0; color: var(--text); }
.hh-title .ln { display: block; overflow: clip; padding-block: .06em .14em; margin-block: -.06em -.14em; }
:lang(ar) .hh-title .ln { padding-block: .12em .22em; margin-block: -.12em -.22em; }
.hh-title .ln-i { display: block; }
@media (max-width: 767.98px) { .hh-title .ln, .hh-title .ln-i { display: inline; } }   /* static on phones: let the words flow (≤ 4 lines at 360 px) */
.hh-lead { margin-top: 24px; max-width: 44ch; font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead); color: var(--text-muted); text-wrap: pretty; }
.hh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 599.98px) { .hh-actions .btn { width: 100%; } }

/* facts strip: printed live figures (never counted) */
.hh-facts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.hh-facts::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; }
[dir="rtl"] .hh-facts::before { transform-origin: 100% 50%; }
.hh-fact { display: grid; align-content: start; gap: 10px; padding: 20px 16px 4px; min-width: 0; }
.hh-fact:nth-child(odd) { padding-inline-start: 0; }
.hh-fact:nth-child(even) { border-inline-start: 1px solid var(--rule); }
.hh-fact:nth-child(n+3) { border-top: 1px solid var(--rule); }
.hh-fact dt { color: var(--text-muted); }
.hh-fact dd { margin: 0; }
.hh-fact--text dd { font-size: var(--fs-h4); font-weight: 400; line-height: 1.3; color: var(--text); }
@media (min-width: 768px) {
  .hh-facts { grid-template-columns: auto auto auto minmax(0, 1fr); }
  .hh-fact { padding: 20px 24px 4px; border-top: 0 !important; }
  .hh-fact:nth-child(odd) { padding-inline-start: 24px; }
  .hh-fact:first-child { padding-inline-start: 0; }
  .hh-fact + .hh-fact { border-inline-start: 1px solid var(--rule); }
}

/* specimen: stacked panels (settle-swap), FIG caption, index */
.hh-specimen { min-width: 0; }
.hh-panels { display: grid; touch-action: pan-y; }
.hh-panel { grid-area: 1 / 1; min-width: 0; }
.hh-fig { margin: 0; }
@media (max-width: 767.98px) { .hh-specimen .hh-plate.plate { --plate-ratio: 1 / 1; --plate-r: 1; } }
/* hero leaders: short lead, label above value (an engineering annotation that stays inside the plate) */
.hh-plate .callout { --lead-len: 32px; }
@media (min-width: 768px) { .hh-plate .callout-text { display: grid; gap: 1px; top: -9px; padding: 3px 7px 4px; } }
.hh-plate .callout-value { font-size: var(--fs-data); color: var(--text); }
.hh-plate .callout[data-side="left"] .callout-text { justify-items: right; text-align: right; }   /* physical: photo space */
.hh-plate .callout[data-side="right"] .callout-text { justify-items: left; text-align: left; }    /* physical: photo space */
.hh-cap { margin-top: 14px; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.hh-cap-name { color: var(--text); }
.h-fig-no { text-transform: uppercase; }
:lang(ar) .h-fig-no { text-transform: none; }
.hh-cap-link { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; color: var(--text); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500;
  background: linear-gradient(currentColor 0 0) no-repeat 0 100% / 0 1px; transition: background-size var(--t-panel) var(--ease-precise); }
[dir="rtl"] .hh-cap-link { background-position: 100% 100%; }
.hh-cap-link:hover, .hh-cap-link:focus-visible { background-size: 100% 1px; }
.hh-cap-link .icon { width: 16px; height: 8px; transition: translate var(--t-ui) var(--ease-precise); }
.hh-cap-link:hover .icon { translate: calc(4px * var(--dir)) 0; }

.hh-index { margin-top: 20px; }
html:not(.js) .hh-index { display: none; }
.hh-tabs { position: relative; display: none; border-top: 1px solid var(--rule); }
@media (min-width: 768px) { .hh-tabs { display: flex; } }
.hh-tab { flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0 4px; padding-inline-end: 10px;
  font-size: var(--fs-data); line-height: 1.35; text-align: start; color: var(--text-muted); transition: color var(--t-hover) var(--ease-hover); }
.hh-tab:hover { color: var(--text); }
.hh-tab[aria-selected="true"] { color: var(--text); }
.hh-tab-no { font-family: var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.hh-tab[aria-selected="true"] .hh-tab-no { color: var(--text); }
.hh-tab-name { overflow-wrap: break-word; hyphens: auto; }
.hh-tabs:not(.is-ready) .hh-tab[aria-selected="true"] { box-shadow: inset 0 1px 0 var(--text); }
.hh-tabs-ind { position: absolute; top: -1px; inset-inline-start: 0; height: 1px; width: var(--tab-w, 0px); background: var(--text);
  transform: translateX(var(--tab-x, 0px)); transition: transform 280ms var(--ease-precise), width 280ms var(--ease-precise); }
.hh-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); padding-top: 8px; }
@media (min-width: 768px) { .hh-pager { display: none; } }
.hh-pager-count { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hh-step { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); color: var(--text); }
.hh-step:hover { border-color: var(--text); }

/* ---- hero intro, CSS-first (§3.5): t = ms from first paint; no JS, never delays the LCP image */
@keyframes hh-frame-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hh-frame-draw-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hh-fade { from { opacity: 0; } }
@keyframes hh-up8 { from { opacity: 0; transform: translateY(8px); } }
@keyframes hh-up12 { from { opacity: 0; transform: translateY(12px); } }
@keyframes hh-rise { from { transform: translateY(110%); } }
@keyframes hh-light { from { --light: .35; } to { --light: 1; } }
@keyframes hh-settle { from { scale: 1.025; } to { scale: 1; } }
@keyframes hh-shadow { from { opacity: 0; scale: .7 1; } to { opacity: 1; scale: 1 1; } }
@keyframes hh-marks { from { --mk: 0px; } to { --mk: 12px; } }
@keyframes hh-node { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes hh-line { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes hh-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

html.motion-ok .hh-frame { animation: hh-frame-draw 900ms var(--ease-measure) both; }
html.motion-ok[dir="rtl"] .hh-frame { animation-name: hh-frame-draw-rtl; }
html.motion-ok .hh-zones li { animation: hh-fade 300ms var(--ease-hover) 300ms both; }
html.motion-ok .hh-zones li:nth-child(2) { animation-delay: 320ms; } html.motion-ok .hh-zones li:nth-child(3) { animation-delay: 340ms; }
html.motion-ok .hh-zones li:nth-child(4) { animation-delay: 360ms; } html.motion-ok .hh-zones li:nth-child(5) { animation-delay: 380ms; }
html.motion-ok .hh-zones li:nth-child(6) { animation-delay: 400ms; } html.motion-ok .hh-zones li:nth-child(7) { animation-delay: 420ms; }
html.motion-ok .hh-zones li:nth-child(8) { animation-delay: 440ms; } html.motion-ok .hh-zones li:nth-child(9) { animation-delay: 460ms; }
html.motion-ok .hh-zones li:nth-child(10) { animation-delay: 480ms; } html.motion-ok .hh-zones li:nth-child(11) { animation-delay: 500ms; }
html.motion-ok .hh-zones li:nth-child(12) { animation-delay: 520ms; }
html.motion-ok .hh-label { animation: hh-up8 480ms var(--ease-precise) 80ms both; }
@media (min-width: 768px) {
  html.motion-ok:not(.motion-lite) .hh-title .ln-i { animation: hh-rise var(--t-headline) var(--ease-precise) 120ms both; }
  html.motion-ok:not(.motion-lite) .hh-title .ln:nth-child(2) .ln-i { animation-delay: 200ms; }
  html.motion-ok:not(.motion-lite) .hh-title .ln:nth-child(3) .ln-i { animation-delay: 280ms; }
  html.motion-ok:not(.motion-lite) .hh-title .ln:nth-child(4) .ln-i { animation-delay: 360ms; }
}
/* light-up on the LCP plate: the image is visible from the first frame (only scale / --light / shadow move) */
html.motion-ok .hh-panel.is-active .hh-plate { animation: hh-light 1200ms var(--ease-settle) both, hh-marks 240ms var(--ease-precise) 600ms both; }
html.motion-ok .hh-panel.is-active .hh-plate .plate-obj { animation: hh-settle 1200ms var(--ease-settle) backwards; }
html.motion-ok .hh-panel.is-active .hh-plate .plate-shadow { animation: hh-shadow 900ms var(--ease-settle) 300ms backwards; }
html.motion-ok .hh-panel.is-active .callout-node { animation: hh-node 360ms var(--ease-precise) 720ms backwards; }
html.motion-ok .hh-panel.is-active .callout-line { animation: hh-line 640ms var(--ease-measure) 720ms backwards; }
html.motion-ok .hh-panel.is-active .callout-text { animation: hh-fade 240ms var(--ease-standard) 1170ms backwards; }
html.motion-ok .hh-panel.is-active .callout:nth-child(2) .callout-node, html.motion-ok .hh-panel.is-active .callout:nth-child(2) .callout-line { animation-delay: 840ms; }
html.motion-ok .hh-panel.is-active .callout:nth-child(2) .callout-text { animation-delay: 1290ms; }
html.motion-ok .hh-panel.is-active .callout:nth-child(3) .callout-node, html.motion-ok .hh-panel.is-active .callout:nth-child(3) .callout-line { animation-delay: 960ms; }
html.motion-ok .hh-panel.is-active .callout:nth-child(3) .callout-text { animation-delay: 1410ms; }
html.motion-ok .hh-panel.is-active .callout:nth-child(4) .callout-node, html.motion-ok .hh-panel.is-active .callout:nth-child(4) .callout-line { animation-delay: 1080ms; }
html.motion-ok .hh-panel.is-active .callout:nth-child(4) .callout-text { animation-delay: 1530ms; }
html.motion-ok .hh-panel.is-active .tb-fact { animation: hh-fade 360ms var(--ease-precise) 720ms backwards; }
html.motion-ok .hh-panel.is-active .tb-fact--end { animation-delay: 840ms; }
html.motion-ok .hh-cap, html.motion-ok .hh-index { animation: hh-fade 480ms var(--ease-hover) 900ms backwards; }
html.motion-ok .hh-lead { animation: hh-up12 560ms var(--ease-settle) 900ms both; }
html.motion-ok .hh-actions { animation: hh-up12 560ms var(--ease-settle) 970ms both; }
html.motion-ok .hh-facts::before { animation: hh-rule 1200ms var(--ease-measure) 1100ms both; }
html.motion-ok .hh-fact { animation: hh-fade 480ms var(--ease-hover) 1100ms both; }
html.motion-ok .hh-fact:nth-child(2) { animation-delay: 1160ms; }
html.motion-ok .hh-fact:nth-child(3) { animation-delay: 1220ms; }
html.motion-ok .hh-fact:nth-child(4) { animation-delay: 1280ms; }

/* =====================================================================
   Campaign band (first admin hero banner; never a carousel)
   ===================================================================== */
.hcamp { padding-block: 0 var(--space-block); }
.hcamp-stage { position: relative; display: grid; }
.hcamp-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 768px) { .hcamp-media img { aspect-ratio: 21 / 9; } }
@media (max-width: 767.98px) { .hcamp-stage .hcamp-plate.plate { --plate-ratio: 16 / 9; --plate-r: 1.7778; } }
@media (min-width: 1024px) { .hcamp-plate .plate-obj { margin-inline: auto 8%; } }
.hcamp-panel { display: grid; justify-items: start; gap: 12px; padding: 24px 0 0; background: var(--paper); }
.hcamp-label { color: var(--text-muted); }
.hcamp-title { font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-h3); }
.hcamp-text { color: var(--text-muted); max-width: 52ch; }
.hcamp-panel .btn { margin-top: 12px; }
@media (min-width: 1024px) {
  .hcamp-panel { position: absolute; inset-inline-start: 24px; bottom: 24px; z-index: 4; width: min(42%, 520px); padding: 32px; }
}

/* =====================================================================
   02 Statement
   ===================================================================== */
.hst { padding-block: var(--space-section) calc(var(--space-section) * .6); }
.hst-inner { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); }
.hst-text, .hst-links { grid-column: 1 / -1; }
@media (min-width: 1024px) { .hst-text, .hst-links { grid-column: 2 / 12; } }
.hst-text { font-size: var(--fs-h1); font-weight: 300; line-height: 1.1; letter-spacing: var(--tr-h1); color: var(--text); text-wrap: pretty; }
:lang(ar) .hst-text { font-weight: 400; line-height: 1.35; }
.hst-text .wd { will-change: auto; }
.hst-links { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 40px; }

/* =====================================================================
   03 Specialities register
   ===================================================================== */
.hsp-grid { display: grid; gap: var(--col-gap); }
@media (min-width: 1024px) {
  .hsp-grid--preview { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hsp-grid--preview .hsp-list { grid-column: 1 / 8; }
  .hsp-preview { grid-column: 9 / 13; }
}
.hsp-list { border-top: 1px solid var(--rule); }
.hsp-row { position: relative; }
.hsp-link { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 16px; align-items: center; column-gap: 12px; min-height: 64px;
  padding: 16px 4px; transition: background-color var(--t-hover) var(--ease-hover); }
@media (min-width: 1024px) { .hsp-link { grid-template-columns: 56px minmax(0, 1fr) auto 24px; column-gap: 16px; min-height: 96px; padding: 20px 16px; } }
.hsp-link:hover, .hsp-link:focus-visible, .hsp-link.is-current { background: var(--paper-2); }
.hsp-link:focus-visible { outline-offset: -2px; }
.hsp-idx { transition: color var(--t-hover) var(--ease-hover); }
.hsp-link:hover .hsp-idx, .hsp-link:focus-visible .hsp-idx { color: var(--signal); }
.hsp-main { display: grid; gap: 4px; min-width: 0; transition: translate var(--t-ui) var(--ease-precise); }
.hsp-name { font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text); }
.hsp-kids { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsp-count { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; text-align: end; }
.hsp-arrow { display: inline-flex; color: var(--text); transition: translate var(--t-ui) var(--ease-precise); }
.hsp-arrow .icon { width: 16px; height: 8px; }
@media (pointer: fine) {
  .hsp-link:hover .hsp-main, .hsp-link:focus-visible .hsp-main { translate: calc(8px * var(--dir)) 0; }
  .hsp-link:hover .hsp-arrow, .hsp-link:focus-visible .hsp-arrow { translate: calc(4px * var(--dir)) 0; }
}
.hsp-rule { position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--rule); pointer-events: none; }

.hsp-preview { display: none; }
@media (min-width: 1024px) {
  .hsp-preview { display: block; }
  .hsp-preview-stack { position: sticky; top: calc(var(--header-h) + 24px); display: grid; }
}
.hsp-fig { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 280ms var(--ease-hover); }
.hsp-fig.is-active { opacity: 1; }
.hsp-fig:not(.is-active) { display: none; }
.hsp.is-armed .hsp-fig { display: block; }
.hsp-cap { margin-top: 14px; max-width: none; }
html.motion-reduced .hsp-fig { transition-duration: 120ms; }

/* =====================================================================
   04 Laboratory scan — Studio room (data-theme="studio")
   ===================================================================== */
.hl { position: relative; padding-block: var(--space-section); }
.hl-skip { position: absolute; top: 16px; inset-inline-start: var(--gutter); z-index: 6; padding: 12px 16px; border-radius: var(--r-1);
  background: var(--s-ink); color: var(--s-bg); font-size: var(--fs-small); font-weight: 500; }
.hl-skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hl-end { height: 0; outline: none; }

.hl-stage { position: relative; display: grid; row-gap: var(--space-block); }
.hl-seg { display: none; }
.hl-ch { display: grid; gap: 24px; align-items: center; }
.hl-ch-fig { order: -1; margin: 0; min-width: 0; }
@media (min-width: 768px) { .hl-ch-fig { width: min(100%, 520px); } }
@media (min-width: 1024px) {
  .hl-ch { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .hl-ch-text { grid-column: 1 / 6; grid-row: 1; }
  .hl-ch-fig { order: 0; grid-column: 7 / 13; grid-row: 1; justify-self: end; }
}

.hl-ch-text { display: grid; gap: 8px; align-content: center; padding-inline-start: 24px; border-inline-start: 1px solid var(--s-rule); }
.hl-ch-no { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--s-ink-3); font-variant-numeric: tabular-nums; }
.hl-ch-name { font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-h3); color: var(--s-ink); }
.hl-ch-name a { background: linear-gradient(currentColor 0 0) no-repeat 0 100% / 0 1px; transition: background-size var(--t-panel) var(--ease-precise); }
[dir="rtl"] .hl-ch-name a { background-position: 100% 100%; }
.hl-ch-name a:hover, .hl-ch-name a:focus-visible { background-size: 100% 1px; }
.hl-ch-count { color: var(--s-ink-3); }
.hl-ch-desc { font-size: var(--fs-small); color: var(--s-ink-2); }
.hl-ch-desc .link { color: var(--s-ink); }
.hl-ch-figure { display: grid; gap: 6px; margin-top: 12px; }
.hl-fig-val { font-family: var(--font-mono); font-weight: 300; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem); line-height: 1; letter-spacing: -.02em;
  color: var(--s-ink); font-variant-numeric: tabular-nums lining-nums; }
.hl-fig-label { color: var(--s-ink-3); }
.hl-cap { margin-top: 14px; max-width: none; }

/* plate + blueprint overlay: the overlay mirrors the plate's object box (same formulas as partials/plate.php) */
.hl-plate-wrap { position: relative; --scan: 0%; }
.hl.is-ready .hl-plate-wrap { --scan: 50%; }
.hl-overlay { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
html:not(.js) .hl-overlay { display: none; }
.hl-obj { position: absolute; inset-inline: 0; bottom: 11%; margin-inline: auto;
  width: min(82%, calc(var(--iw) * 1px / 1.5), calc(.78 * var(--iw) / var(--ih) / var(--plate-r) * 100%));
  aspect-ratio: var(--iw) / var(--ih); }
.hl-plate-wrap--lie .hl-obj { bottom: auto; top: 50%; translate: 0 -50%;
  width: min(86%, calc(var(--iw) * 1px / 1.5), calc(.78 * var(--iw) / var(--ih) / var(--plate-r) * 100%)); }
.hl-img { position: absolute; inset: 0;
  translate: calc(var(--off-x, 0) * -100%) calc(var(--pad-b, 0) * 100%); }   /* physical: photo space — same offset as the photo */
.hl-bp { position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, var(--s-measure) 0 1px, transparent 1px 6px), rgb(63 208 222 / .05);
  -webkit-mask: var(--src, none) center / 100% 100% no-repeat; mask: var(--src, none) center / 100% 100% no-repeat;
  clip-path: inset(0 calc(100% - var(--scan)) 0 0); }
[dir="rtl"] .hl-bp { clip-path: inset(0 0 0 calc(100% - var(--scan))); }
html.js .hl-plate .plate-obj > img { clip-path: inset(0 0 0 var(--scan)); }
html.js[dir="rtl"] .hl-plate .plate-obj > img { clip-path: inset(0 var(--scan) 0 0); }
.hl-line { position: absolute; top: -6%; bottom: -3%; inset-inline-start: var(--scan); width: 1px; background: var(--s-measure); }
.hl-chip { position: absolute; top: 0; inset-inline-start: 8px; padding: 3px 6px; white-space: nowrap; background: rgb(10 15 23 / .82);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.3; color: var(--s-ink-2); text-transform: uppercase; letter-spacing: .04em; }
:lang(ar) .hl-chip { text-transform: none; letter-spacing: 0; }
.hl-plate-wrap.is-late .hl-chip { inset-inline-start: auto; inset-inline-end: 8px; }
/* pinned scrub (≥ 1024): both title facts rest on the floor line, so the scan chip travels along a clear top edge
   (stacked chapters keep the default corners: the range starts at 50 %, clear of the top-start fact) */
@media (min-width: 1024px) { .hl-plate .tb-fact--start { top: auto; bottom: 32px; } }

.hl-range { display: block; width: 100%; height: 44px; margin: 4px 0 0; accent-color: var(--s-measure); background: transparent; cursor: ew-resize; }
html:not(.js) .hl-range { display: none; }

.hl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-block); padding-top: 32px; border-top: 1px solid var(--s-rule); }
@media (max-width: 599.98px) { .hl-cta .btn { width: 100%; } }

/* pinned mode (home.js adds .is-pinned: ≥ 1024 px, full tier) — chapter list cols 1–5, one plate area cols 7–12 */
.hl.is-pinned .hl-stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 0;
  min-height: 100svh; align-content: center; padding-block: calc(var(--header-h) + 24px) 24px; }
.hl.is-pinned .hl-ch { display: contents; }
.hl.is-pinned .hl-ch-text { grid-column: 1 / 6; grid-row: auto; align-self: stretch; padding-block: 14px; gap: 6px; color: var(--s-ink-3); transition: color var(--t-ui) var(--ease-hover); }
.hl.is-pinned .hl-ch-text :is(.hl-ch-name, .hl-ch-desc, .hl-ch-desc .link, .hl-fig-val) { color: var(--s-ink-3); transition: color var(--t-ui) var(--ease-hover); }
.hl.is-pinned .hl-ch.is-active .hl-ch-name, .hl.is-pinned .hl-ch.is-active .hl-fig-val, .hl.is-pinned .hl-ch.is-active .hl-ch-desc .link { color: var(--s-ink); }
.hl.is-pinned .hl-ch.is-active .hl-ch-desc { color: var(--s-ink-2); }
.hl.is-pinned .hl-ch:not(.is-active) .hl-ch-figure { opacity: .5; }
.hl.is-pinned .hl-ch-figure { margin-top: 6px; }
.hl.is-pinned .hl-fig-val { font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); }
.hl.is-pinned .hl-ch-fig { grid-column: 7 / 13; grid-row: 1 / span 4; align-self: center; justify-self: end;
  width: min(100%, calc((100svh - var(--header-h) - 150px) * .8)); }
.hl.is-pinned .hl-ch:not(:first-child) .hl-ch-fig { visibility: hidden; opacity: 0; }
.hl.is-pinned .hl-range { display: none; }
.hl.is-pinned .hl-seg { display: block; position: absolute; inset-inline-start: 0; top: 0; z-index: 1; width: 1px; height: var(--seg-h, 0px);
  background: var(--s-measure); transform: translateY(var(--seg-y, 0px)); transition: transform 280ms var(--ease-precise), height 280ms var(--ease-precise); }

/* =====================================================================
   05 Selected equipment (native rail)
   ===================================================================== */
.hrl-rail .rail-track { padding-bottom: 4px; }
.hrl-rail .rail-cell { display: flex; }
.hrl-rail .rail-cell > * { width: 100%; }
.hrl-ruler { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.hrl-ruler .ruler { flex: 1; margin-top: 0; }
.hrl-end { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--text-muted); font-variant-numeric: tabular-nums; }
html:not(.js) .hrl-ruler { display: none; }
/* fallback card (partials/home-card.php) */
.hcard-body { display: grid; gap: 6px; padding-top: 16px; }
.hcard-name { font-size: 1rem; font-weight: 500; line-height: 1.35; }
.hcard-code { color: var(--text-muted); font-size: var(--fs-data); }
.hcard-price { padding-top: 10px; border-top: 1px solid var(--rule); color: var(--text-muted); font-size: var(--fs-small); }

/* =====================================================================
   06 Institutional purchasing — protocol ledger
   ===================================================================== */
.hpr-ledger { position: relative; }
.hpr-line { display: none; }
.hpr-steps { display: grid; row-gap: 40px; border-inline-start: 1px solid var(--rule); padding-inline-start: 24px; }
.hpr-step { position: relative; display: grid; align-content: start; gap: 12px; }
.hpr-step::before { content: ""; position: absolute; top: 6px; inset-inline-start: -28px; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--measure); background: var(--paper); }
@media (min-width: 1024px) {
  .hpr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); border-inline-start: 0; padding-inline-start: 0; }
  .hpr-step::before { display: none; }
  .hpr-line { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center;
    height: 7px; margin-bottom: 32px; }
  .hpr-line-fill { position: absolute; inset-inline-start: 0; top: 3px; height: 1px; background: var(--text);
    width: calc((100% - 3 * var(--col-gap)) * .75 + 3 * var(--col-gap)); transform-origin: 0 50%; }
  [dir="rtl"] .hpr-line-fill { transform-origin: 100% 50%; }
  .hpr-node { position: relative; z-index: 1; width: 7px; height: 7px; margin-inline-start: -3px; border-radius: 50%;
    border: 1px solid var(--measure); background: var(--paper); transition: opacity 360ms var(--ease-precise), transform 360ms var(--ease-precise); }
  .hpr-node.is-on { background: var(--measure); }
  .hpr.is-armed .hpr-node:not(.is-on) { opacity: 0; transform: scale(.4); }
  /* engineered grid: step · title · text · "You receive" share four rows across the columns */
  @supports (grid-template-rows: subgrid) {
    .hpr-steps { grid-template-rows: repeat(4, auto); row-gap: 12px; }
    .hpr-step { grid-row: span 4; grid-template-rows: subgrid; gap: 12px; }
    .hpr-get { align-self: start; }
  }
}
.hpr-no { font-family: var(--font-mono); font-size: var(--fs-data); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
:lang(ar) .hpr-no { letter-spacing: 0; text-transform: none; }
.hpr-title { font-size: var(--fs-h4); }
.hpr-text { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); max-width: 34ch; }
.hpr-get { display: grid; gap: 4px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--text); }
.hpr-get .caps { color: var(--text-muted); }
.hpr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: var(--space-block); padding-top: 32px; border-top: 1px solid var(--rule); }
@media (max-width: 599.98px) { .hpr-cta .btn { width: 100%; } }

/* =====================================================================
   07 Service log
   ===================================================================== */
.hsv-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .hsv-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .hsv-log { grid-column: 1 / 9; }
  .hsv-book { grid-column: 9 / 13; position: sticky; top: calc(var(--header-h) + 24px); }
}
.hsv-log { border-top: 1px solid var(--rule); }
.hsv-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: baseline;
  padding: 20px 4px; border-bottom: 1px solid var(--rule); transition: background-color var(--t-hover) var(--ease-hover); }
.hsv-row:hover, .hsv-row:focus-within { background: var(--paper-3); }
.hsv-idx { grid-column: 1; grid-row: 1; }
.hsv-name { grid-column: 2; grid-row: 1; font-size: var(--fs-h4); }
.hsv-text { grid-column: 2 / 4; grid-row: 2; font-size: var(--fs-small); color: var(--text-muted); }
.hsv-link { grid-column: 3; grid-row: 1; min-height: 44px; }
@media (min-width: 768px) {
  .hsv-row { grid-template-columns: 48px minmax(0, 5fr) minmax(0, 6fr) auto; column-gap: 16px; padding: 24px 16px; align-items: center; }
  .hsv-text { grid-column: 3; grid-row: 1; }
  .hsv-link { grid-column: 4; }
}
.hsv-book { display: grid; gap: 16px; padding: 32px; background: var(--paper); border: 1px solid var(--rule); }
.hsv-book-label { color: var(--text-muted); }
.hsv-book-title { font-size: var(--fs-h3); font-weight: 400; }
.hsv-book-dl { display: grid; gap: 12px; margin: 0 0 8px; }
.hsv-book-dl div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
.hsv-book-dl dt { color: var(--text-muted); }
.hsv-book-dl dd { margin: 0; color: var(--text); font-size: var(--fs-small); }
.hsv-book-dl .mono { font-size: var(--fs-body); }

/* =====================================================================
   08 Manufacturers
   ===================================================================== */
.hbr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--rule); }
.hbr-label { color: var(--text-muted); font-family: var(--font-sans); }
.hbr-names { display: flex; flex-wrap: wrap; gap: 8px 56px; margin-top: 32px; }
.hbr-name { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--fs-h2); font-weight: 300; line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--text);
  background: linear-gradient(currentColor 0 0) no-repeat 0 100% / 0 1px; transition: background-size var(--t-panel) var(--ease-precise); }
[dir="rtl"] .hbr-name { background-position: 100% 100%; }
.hbr-name:hover, .hbr-name:focus-visible { background-size: 100% 1px; }
.hbr-sup { font-family: var(--font-mono); font-size: var(--fs-data); line-height: 1; color: var(--text-muted); vertical-align: baseline; padding-top: .5em; letter-spacing: 0; }
.hbr-meta { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-data);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
:lang(ar) .hbr-meta { letter-spacing: 0; text-transform: none; }
/* text register: the short block closes on its meta rule, and the next section (same paper) starts one measured
   interval later instead of stacking two full section paddings */
.hbr--names { padding-bottom: 0; }
.hbr--names + .section { padding-top: clamp(64px, 2.5rem + 5vw, 128px); }
.hbr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--rule); }
@media (min-width: 768px) { .hbr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hbr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hbr-cell { border-bottom: 1px solid var(--rule); border-inline-end: 1px solid var(--rule); }
.hbr-tile { display: grid; place-items: center; gap: 8px; min-height: 120px; padding: 16px; }
.hbr-tile img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .72; transition: filter var(--t-ui) var(--ease-hover), opacity var(--t-ui) var(--ease-hover); }
.hbr-tile:hover img, .hbr-tile:focus-visible img { filter: none; opacity: 1; }
.hbr-tile-name { font-size: var(--fs-h4); color: var(--text); }
.hbr-count { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--text-muted); }

/* =====================================================================
   09 Insights
   ===================================================================== */
.hin-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .hin-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .hin-feature { grid-column: 1 / 7; }
  .hin-rows { grid-column: 8 / 13; }
}
.hin-media { display: block; }
.hin-typo { aspect-ratio: 3 / 2; display: grid; align-content: end; gap: 12px; padding: 32px; background: var(--paper-2); }
.hin-typo-title { font-size: var(--fs-h3); font-weight: 300; color: var(--text); }
.hin-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.hin-meta .caps { color: var(--text-muted); }
.hin-feature .hin-meta { margin-top: 20px; }
.hin-feature-title { margin-top: 10px; font-size: var(--fs-h3); font-weight: 400; }
.hin-excerpt { margin-top: 12px; color: var(--text-muted); max-width: 60ch; }
.hin-rows { border-top: 1px solid var(--rule); }
.hin-row { display: grid; gap: 8px; padding-block: 24px; border-bottom: 1px solid var(--rule); }
.hin-title { font-size: var(--fs-h4); }
.hin-title a, .hin-feature-title a { background: linear-gradient(currentColor 0 0) no-repeat 0 100% / 0 1px; transition: background-size var(--t-panel) var(--ease-precise); }
[dir="rtl"] .hin-title a, [dir="rtl"] .hin-feature-title a { background-position: 100% 100%; }
.hin-title a:hover, .hin-title a:focus-visible, .hin-feature-title a:hover, .hin-feature-title a:focus-visible { background-size: 100% 1px; }

/* =====================================================================
   10 Offices
   ===================================================================== */
.hof-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-block); }
@media (max-width: 599.98px) { .hof-actions .btn { width: 100%; } }
.hof-grid { display: grid; gap: 40px; }
@media (min-width: 768px) { .hof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); } }
.hof-office { display: grid; align-content: start; gap: 14px; padding-top: 24px; border-top: 1px solid var(--rule); }
.hof-city { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-h2); font-weight: 300; line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
:lang(ar) .hof-city { font-weight: 400; }
.hof-hq { font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 400; letter-spacing: .06em; color: var(--text-muted); text-decoration: none; }
.hof-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.hof-clock { font-family: var(--font-mono); font-size: var(--fs-figure); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.hof-zone { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--text-muted); }
.hof-address { color: var(--text-muted); font-size: var(--fs-small); }
.hof-phone { justify-self: start; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text); min-height: 24px;
  background: linear-gradient(currentColor 0 0) no-repeat 0 100% / 0 1px; transition: background-size var(--t-panel) var(--ease-precise); }
[dir="rtl"] .hof-phone { background-position: 100% 100%; }
.hof-phone:hover, .hof-phone:focus-visible { background-size: 100% 1px; }

/* =====================================================================
   Reduced motion: everything renders in its final state (§3.11)
   ===================================================================== */
html.motion-reduced .hh-tabs-ind, html.motion-reduced .hl-seg { transition: none; }
@media print {
  .hh-frame, .hh-index, .hl-overlay, .hl-range, .hl-skip { display: none !important; }
}
@media (max-width: 767.98px) {
  .hl-chip-name { display: none; }                 /* phones: "SCAN 01/04" only; the product is in the caption */
  .hl-plate .tb-fact--end { display: none; }       /* the category is the chapter title right below */
}