/* ==========================================================================
   Kerberogate — site stylesheet
   --------------------------------------------------------------------------
   Structure
     1. Tokens (color, type, spacing, motion) — dark default + light theme
     2. Base / reset
     3. Layout primitives (wrap, grid, section, label row)
     4. Header, menu overlay
     5. Buttons and links
     6. Home sections: hero, about, services, process, frameworks,
        platform (Ihkaam), booking
     7. Forms (shared by booking, enquiry and partner forms)
     8. Subpages: page head, resources, legal, thanks
     9. Footer
    10. Motion / reveal, reduced motion, print
   All values come from the tokens in section 1; avoid ad hoc numbers.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Brand */
  --gold: #d4af37;
  --gold-hi: #f4d875;
  --gold-deep: #8c6a18;

  /* Surfaces & ink — dark (default) */
  --bg: #0a0907;
  --bg-raised: #13110c;
  --bg-sunken: #070605;
  --ink: #f3eee1;
  --ink-2: rgba(243, 238, 225, 0.66);
  --ink-3: rgba(243, 238, 225, 0.46);
  --rule: rgba(243, 238, 225, 0.12);
  --rule-strong: rgba(243, 238, 225, 0.3);
  --accent: #e2bb4b;            /* gold used as text on --bg: 9.9:1 */
  --accent-ink: #14110a;        /* text placed on a gold fill */
  --focus: #f4d875;

  /* Inverse block (the one section that flips the scheme) */
  --inv-bg: #f1ebdc;
  --inv-raised: #e7dfcc;
  --inv-ink: #15130e;
  --inv-ink-2: rgba(21, 19, 14, 0.68);
  --inv-ink-3: rgba(21, 19, 14, 0.5);
  --inv-rule: rgba(21, 19, 14, 0.14);
  --inv-accent: #7d5b0f;        /* 6.1:1 on --inv-bg */

  /* Status hues used inside the platform preview */
  --ok: #6f9a5b;
  --warn: #c9952a;
  --risk: #b4573e;

  /* Type */
  --f-sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-xs: 0.75rem;     /* 12 — mono labels, meta */
  --t-sm: 0.875rem;    /* 14 — secondary UI */
  --t-base: 1rem;      /* 16 — body */
  --t-md: 1.25rem;     /* 20 — lead / row descriptions */
  --t-lg: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);         /* 24–32 — row titles */
  --t-xl: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);         /* 32–56 — section titles */
  --t-2xl: clamp(2.75rem, 1rem + 6.4vw, 6.5rem);       /* 44–104 — hero */
  --track-tight: -0.035em;
  --track-snug: -0.02em;
  --track-body: -0.01em;
  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-body: 1.55;

  /* Spacing scale (4-based) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 9rem;
  --section-y: clamp(5rem, 3rem + 8vw, 11rem);
  --pad-x: clamp(1rem, 0.4rem + 3vw, 3rem);
  --maxw: 1360px;
  --gutter: clamp(1rem, 0.5rem + 1.4vw, 1.5rem);
  --header-h: 72px;

  /* Shape & motion */
  --radius-sm: 4px;
  --radius: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.5s;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f1e6;
  --bg-raised: #ebe5d5;
  --bg-sunken: #efe9db;
  --ink: #15130e;
  --ink-2: rgba(21, 19, 14, 0.68);
  --ink-3: rgba(21, 19, 14, 0.52);
  --rule: rgba(21, 19, 14, 0.13);
  --rule-strong: rgba(21, 19, 14, 0.32);
  --accent: #7d5b0f;
  --accent-ink: #14110a;
  --focus: #8c6a18;

  --inv-bg: #100f0c;
  --inv-raised: #1a1813;
  --inv-ink: #f3eee1;
  --inv-ink-2: rgba(243, 238, 225, 0.68);
  --inv-ink-3: rgba(243, 238, 225, 0.5);
  --inv-rule: rgba(243, 238, 225, 0.14);
  --inv-accent: #e2bb4b;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  font-weight: 450;
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: var(--track-snug);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
address { font-style: normal; }
::selection { background: var(--gold); color: var(--accent-ink); }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  left: var(--s-4);
  top: calc(-1 * var(--s-9));
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--gold);
  color: var(--accent-ink);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--ink-2); }
.accent { color: var(--accent); }

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

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section + .section { padding-top: 0; }
.section--flush-top { padding-top: 0; }

/* "01 — Services" label row with the hairline above it (Cypher-style). */
.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  margin-bottom: var(--s-8);
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
.label-row .mono:first-child { color: var(--accent); }

.section-title {
  font-size: var(--t-xl);
  letter-spacing: var(--track-tight);
  line-height: 1.04;
}
.section-intro {
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34ch;
}

.head-split {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--s-5);
  margin-bottom: var(--s-8);
}
.head-split .section-title { grid-column: 1 / span 7; }
.head-split .section-intro { grid-column: 9 / -1; align-self: end; }

/* 4. Header ---------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  transition: transform 0.45s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule);
}
.site-header.is-hidden { transform: translateY(-100%); }
body.menu-open .site-header { transform: none; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: var(--track-snug);
  margin-inline-end: auto;
}
.brand img { width: auto; height: 30px; transition: transform 0.5s var(--ease); }
.brand:hover img { transform: translateY(-2px); }

.header-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
}
.header-link .label-short { display: none; }
.header-link .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
}

.theme-toggle {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
  transition: color 0.2s, background-color 0.2s;
}
.theme-toggle:hover { color: var(--ink); background: var(--rule); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 500;
  padding-block: var(--s-2);
}
.menu-btn .bars { position: relative; width: 22px; height: 10px; }
.menu-btn .bars::before,
.menu-btn .bars::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1.5px; background: currentColor;
  transition: transform 0.45s var(--ease), top 0.45s var(--ease);
}
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { top: 8.5px; }
.menu-btn[aria-expanded="true"] .bars::before { top: 4.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { top: 4.25px; transform: rotate(-45deg); }
.menu-btn .when-open { display: none; }
.menu-btn[aria-expanded="true"] .when-open { display: inline; }
.menu-btn[aria-expanded="true"] .when-closed { display: none; }

/* Full-screen menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: grid;
  align-items: end;
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: var(--s-7);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-io), visibility 0s linear 0.7s;
  overflow-y: auto;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease-io), visibility 0s;
}
.menu .grid { align-items: end; row-gap: var(--s-8); }
.menu-links { grid-column: 1 / span 8; counter-reset: m; }
.menu-links li { border-top: 1px solid var(--rule); overflow: hidden; }
.menu-links li:last-child { border-bottom: 1px solid var(--rule); }
.menu-links a {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding-block: var(--s-3);
  font-size: clamp(2rem, 1rem + 4vw, 4.25rem);
  letter-spacing: var(--track-tight);
  line-height: 1.1;
  font-weight: 500;
  transform: translateY(105%);
  transition: transform 0.8s var(--ease), color 0.25s;
}
.menu-links a::before {
  counter-increment: m;
  content: counter(m, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  width: 2.5ch;
  flex: none;
}
.menu-links a:hover, .menu-links a[aria-current="page"] { color: var(--accent); }
.menu.is-open .menu-links a { transform: none; }
.menu.is-open .menu-links li:nth-child(2) a { transition-delay: 0.04s; }
.menu.is-open .menu-links li:nth-child(3) a { transition-delay: 0.08s; }
.menu.is-open .menu-links li:nth-child(4) a { transition-delay: 0.12s; }
.menu.is-open .menu-links li:nth-child(5) a { transition-delay: 0.16s; }
.menu.is-open .menu-links li:nth-child(6) a { transition-delay: 0.2s; }
.menu.is-open .menu-links li:nth-child(7) a { transition-delay: 0.24s; }
.menu-aside {
  grid-column: 10 / -1;
  display: grid;
  gap: var(--s-6);
  color: var(--ink-2);
  font-size: var(--t-sm);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s;
}
.menu.is-open .menu-aside { opacity: 1; transform: none; }
.menu-aside h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); margin-bottom: var(--s-2); letter-spacing: 0.01em; }
.menu-aside a:hover { color: var(--ink); }

/* 5. Buttons & links ------------------------------------------------------- */
/* Underline "wipe" link — the primary call-to-action style. */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-2) var(--s-3);
  font-size: var(--t-base);
  font-weight: 500;
  white-space: nowrap;
}
.cta::after,
.cta::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rule-strong);
}
.cta::before {
  z-index: 1;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease);
}
.cta:hover::before, .cta:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.cta .arrow { transition: transform 0.4s var(--ease); }
.cta:hover .arrow { transform: translateX(4px); }
.cta--strong::after { background: var(--ink); }

/* Solid button — reserved for form submission and the hero's one primary action. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: 0 var(--s-5);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--t-base);
  background: var(--gold);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--quiet:hover { background: var(--rule); border-color: var(--ink-2); }
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.inline-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s;
}
.inline-link:hover { text-decoration-color: var(--gold); }

/* 6a. Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-6);
  isolation: isolate;
  overflow: hidden;
}
/* Hero artwork: SVG ribbons drawn by ribbons.js. Strength is set here per
   theme; two intersected masks keep the artwork off the headline and lead
   (left) and the actions and meta row (bottom). */
.hero-art {
  --art-opacity: 0.5;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, rgba(0, 0, 0, 0.45) 50%, #000 72%), linear-gradient(to top, transparent 14%, #000 55%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(100deg, transparent 30%, rgba(0, 0, 0, 0.45) 50%, #000 72%), linear-gradient(to top, transparent 14%, #000 55%);
  mask-composite: intersect;
}
.hero-art.is-ready { opacity: var(--art-opacity); }
:root[data-theme="light"] .hero-art { --art-opacity: 0.4; mix-blend-mode: multiply; }
:root[data-theme="light"] .hero-fallback { opacity: 0.45; }
@media (max-width: 760px) {
  .hero-art {
    --art-opacity: 0.42;
    -webkit-mask-image: linear-gradient(to bottom, #000 14%, rgba(0, 0, 0, 0.4) 28%, transparent 38%);
    mask-image: linear-gradient(to bottom, #000 14%, rgba(0, 0, 0, 0.4) 28%, transparent 38%);
  }
  :root[data-theme="light"] .hero-art { --art-opacity: 0.34; }
  .hero { padding-top: calc(var(--header-h) + 30svh); }
  .hero-actions .btn { order: -1; }
  .hero-meta .scroll-hint { display: none; }
}
/* Still, CSS-only glow shown underneath (and in place of the artwork when
   JavaScript is unavailable). */
.hero-fallback {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 55% at 85% 20%, rgba(212, 175, 55, 0.18), transparent 70%),
    radial-gradient(40% 40% at 70% 70%, rgba(140, 106, 24, 0.16), transparent 70%);
}
.hero-body { row-gap: var(--s-7); }
.hero h1 {
  grid-column: 1 / span 10;
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;
  font-weight: 500;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero h1 .line > span { display: inline-block; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead {
  grid-column: 1 / span 5;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--ink-2);
}
.hero-actions {
  grid-column: 7 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  align-self: end;
  gap: var(--s-4) var(--s-6);
}
.hero-meta {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  color: var(--ink-3);
}
.hero-meta .scroll-hint { display: inline-flex; align-items: center; gap: var(--s-3); }
.hero-meta .scroll-hint i {
  display: block; width: 1px; height: 18px; background: var(--rule-strong); position: relative; overflow: hidden;
}
.hero-meta .scroll-hint i::after {
  content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 100%; background: var(--gold);
  animation: drip 2s var(--ease-io) infinite;
}
@keyframes drip { to { top: 100%; } }

/* 6b. About ---------------------------------------------------------------- */
.statement {
  grid-column: 1 / span 11;
  font-size: var(--t-xl);
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  font-weight: 500;
}
.statement .muted { color: var(--ink-3); }
.pillars {
  grid-column: 1 / -1;
  margin-top: var(--s-9);
  display: grid;
  grid-template-columns: subgrid;
}
.pillar {
  grid-column: span 4;
  padding-block: var(--s-5) 0;
  padding-inline: 0 var(--s-5);
  border-top: 1px solid var(--rule-strong);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.pillar .mono { color: var(--accent); }
.pillar h3 { font-size: var(--t-md); letter-spacing: var(--track-snug); }
.pillar p { color: var(--ink-2); max-width: 34ch; }

.pillars--4 .pillar { grid-column: span 3; }

/* Ihkaam overview: exposure vs appetite + treatment counts */
.posture { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: center; margin-bottom: var(--s-6); }
.posture-bar { position: relative; height: 10px; background: var(--rule); border-radius: 5px; margin-top: var(--s-5); }
.posture-bar i { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: var(--v); background: linear-gradient(90deg, var(--ok), var(--warn) 70%, var(--risk)); border-radius: 5px; }
.posture-bar b { position: absolute; top: -6px; bottom: -6px; inset-inline-start: var(--a); width: 2px; background: var(--ink); }
.posture-bar b span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--ink-2); font-weight: 400; }
.posture-read { display: flex; align-items: baseline; gap: var(--s-3); }
.posture-read strong { font-size: var(--t-lg); font-weight: 500; letter-spacing: var(--track-snug); font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--rule); margin-bottom: var(--s-5); }
.stats > div { display: grid; gap: var(--s-1); padding-block: var(--s-3); padding-inline: 0 var(--s-3); }
.stats > div + div { padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--rule); }
.stats .mono { color: var(--ink-3); }
.stats strong { font-size: var(--t-md); font-weight: 500; font-variant-numeric: tabular-nums; }
.stats strong.is-risk { color: var(--risk); }

/* 6c. Services (expanding index rows) ------------------------------------ */
.svc-list { grid-column: 1 / -1; border-bottom: 1px solid var(--rule); }
.svc { border-top: 1px solid var(--rule); }
.svc-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 5fr) 2.5rem;
  gap: var(--gutter);
  align-items: baseline;
  padding-block: var(--s-6);
  text-align: start;
  transition: color 0.25s;
}
.svc-trigger .mono { color: var(--ink-3); transition: color 0.25s; }
.svc-trigger .t {
  font-size: var(--t-lg);
  letter-spacing: var(--track-snug);
  line-height: 1.1;
  font-weight: 500;
  transition: transform 0.5s var(--ease);
}
.svc-trigger .d { color: var(--ink-2); max-width: 46ch; }
.svc-trigger .pm {
  position: relative; width: 16px; height: 16px; justify-self: end; align-self: center;
}
.svc-trigger .pm::before, .svc-trigger .pm::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor;
  transition: transform 0.45s var(--ease);
}
.svc-trigger .pm::after { transform: rotate(90deg); }
.svc-trigger[aria-expanded="true"] .pm::after { transform: rotate(0deg); }
.svc-trigger:hover .t,
.svc-trigger[aria-expanded="true"] .t { transform: translateX(var(--s-3)); }
.svc-trigger:hover .mono,
.svc-trigger[aria-expanded="true"] .mono { color: var(--accent); }

.svc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease);
}
.svc-panel > div { overflow: hidden; }
.svc.is-open .svc-panel { grid-template-rows: 1fr; }
.svc-body {
  display: grid;
  grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 5fr) 2.5rem;
  gap: var(--gutter);
  padding-bottom: var(--s-7);
}
.svc-body > p { grid-column: 2; color: var(--ink-2); max-width: 44ch; }
.svc-body .deliv { grid-column: 3; }
.svc-body .deliv h4 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); margin-bottom: var(--s-3); letter-spacing: 0.01em; }
.svc-body .deliv li {
  display: flex; gap: var(--s-3);
  padding-block: var(--s-2);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.svc-body .deliv li::before { content: "—"; color: var(--accent); }
.svc-body .cta { grid-column: 2; justify-self: start; margin-top: var(--s-2); }

/* 6d. Process (sticky title + steps that light up on scroll) -------------- */
.process { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.process-aside {
  grid-column: 1 / span 5;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + var(--s-7));
}
.process-aside .section-intro { margin-top: var(--s-5); }
.process-meter {
  margin-top: var(--s-7);
  display: flex; align-items: center; gap: var(--s-4);
  color: var(--ink-3);
}
.process-meter .track { flex: 1; max-width: 240px; height: 1px; background: var(--rule-strong); position: relative; }
.process-meter .fill { position: absolute; inset: 0 auto 0 0; width: 0; height: 1.5px; top: -0.25px; background: var(--gold); transition: width 0.6s var(--ease); }
.process-meter .now { color: var(--accent); }

.steps { grid-column: 7 / -1; }
.step {
  padding-block: var(--s-7);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--s-5);
  opacity: 0.38;
  transition: opacity 0.6s var(--ease);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step.is-active { opacity: 1; }
.step .mono { color: var(--ink-3); padding-top: 0.6em; }
.step.is-active .mono { color: var(--accent); }
.step h3 { font-size: var(--t-lg); letter-spacing: var(--track-snug); margin-bottom: var(--s-3); }
.step p { color: var(--ink-2); max-width: 44ch; }
.step .out {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink);
  display: flex; gap: var(--s-3);
}
.step .out span:first-child { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); padding-top: 0.2em; }

/* 6d-2. Standards & regulations (data from the Regulatory Atlas) ------- */
.reg { grid-column: 1 / -1; }
.reg-scroll { overflow-x: auto; }
.reg-table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.reg-table caption { text-align: start; color: var(--ink-3); padding-bottom: var(--s-3); }
.reg-table th, .reg-table td { text-align: start; padding-block: var(--s-4); padding-inline: 0 var(--s-4); border-top: 1px solid var(--rule); vertical-align: baseline; }
.reg-table thead th { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); border-top: 0; padding-bottom: var(--s-3); }
.reg-table tbody th { font-weight: 500; font-size: var(--t-md); letter-spacing: var(--track-snug); white-space: nowrap; }
.reg-table td { color: var(--ink-2); }
.reg-table tbody tr { transition: background-color 0.25s var(--ease); }
.reg-table tbody tr:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.reg-table tbody tr:last-child th, .reg-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.reg-table .fine { color: var(--accent); font-family: var(--f-mono); font-size: var(--t-sm); white-space: nowrap; text-align: end; padding-inline-end: 0; }
.reg-table thead th:last-child { text-align: end; padding-inline-end: 0; }
.reg-table .exp { color: var(--accent); font-family: var(--f-mono); font-size: var(--t-sm); text-align: end; padding-inline-end: 0; }
.reg-note { margin-top: var(--s-3); color: var(--ink-3); }
.reg-tabs { padding: 0; margin-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
.reg-tabs .console-tab { padding-inline: 0; margin-inline-end: var(--s-6); }
.reg-tabs .console-tab::after { left: 0; right: 0; }
.reg-panel.is-entering { animation: panelIn 0.5s var(--ease); }
.reg-panel .stds { margin-top: 0; }

.stds {
  grid-column: 1 / -1;
  margin-top: var(--s-9);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
}
.std {
  display: grid;
  gap: var(--s-1);
  align-content: start;
  padding-block: var(--s-5) var(--s-6);
  padding-inline: 0 var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.std + .std:not(:nth-child(4n + 1)) { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--rule); }
.std-k { font-size: var(--t-xl); line-height: 1; letter-spacing: var(--track-tight); color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: var(--s-3); }
.std strong { font-weight: 500; }
.std span:last-child { color: var(--ink-2); font-size: var(--t-sm); }

/* 6e. Frameworks marquee -------------------------------------------------- */
/* Inside the trust panel the strip opens the section. */
.frameworks {
  border-block: 1px solid var(--rule);
  overflow: hidden;
  padding-block: var(--s-5);
  margin-block: 0 var(--section-y);
  --gap: var(--s-8);
}
.frameworks-inner { display: flex; align-items: center; gap: var(--s-6); }
.frameworks-label { flex: none; color: var(--ink-3); padding-inline-start: var(--pad-x); }
.marquee {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--gap);
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-size: var(--t-md);
  letter-spacing: var(--track-snug);
  color: var(--ink-2);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--gap);
}
.marquee-track span::after { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* 6f-2. Film ---------------------------------------------------------------- */
.film-frame {
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  margin: 0;
  /* Fits one screen: width follows the available height on short viewports. */
  width: min(100%, calc((100svh - var(--header-h) - 13rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--rule);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.7);
}
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film .head-split { margin-bottom: var(--s-5); }
.film .label-row { margin-bottom: var(--s-6); }
.film.section { padding-block: calc(var(--header-h) + var(--s-6)) var(--s-7); }
.film-play {
  position: absolute;
  inset-inline-start: var(--s-5);
  bottom: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2);
  padding-inline: var(--s-2) var(--s-5);
  border-radius: 999px;
  color: #f3eee1;
  background: rgba(10, 9, 7, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(243, 238, 225, 0.16);
  transition: opacity 0.4s var(--ease), background-color 0.3s, transform 0.4s var(--ease);
}
.film-ring {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #14110a;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.film-ring svg { width: 18px; height: 18px; margin-inline-start: 2px; }
/* Media controls keep their direction in RTL (play points right). */
[dir="rtl"] .film-ring svg { margin-inline-start: 2px; }
.film-label { font-weight: 500; font-size: var(--t-sm); }
.film-play:hover, .film-play:focus-visible { background: rgba(10, 9, 7, 0.82); transform: translateY(-2px); }
.film-play:hover .film-ring { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.2); }
.film-frame.is-playing .film-play { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .film-frame { width: 100%; }
  .film-play { inset-inline-start: var(--s-3); bottom: var(--s-3); }
  .film-ring { width: 36px; height: 36px; }
}

/* 6f-3. Ihkaam app preview --------------------------------------------------
   A faithful miniature of the Ihkaam interface (from the product film). It
   uses Ihkaam's own fixed palette, so it looks the same in both site themes,
   as a product screenshot would. */
.ihk-app {
  --i-bg: #f2f4f6;
  --i-card: #ffffff;
  --i-line: #e3e8ee;
  --i-ink: #1f2633;
  --i-muted: #6b7584;
  --i-label: #8a93a1;
  --i-navy: #113c63;
  --i-navy-2: #18507f;
  --i-tile: #e8eef5;
  --i-gold: #c08f1f;
  --i-red: #b42f2f;
  --i-green: #2f8a5b;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 600px;
  background: var(--i-bg);
  color: var(--i-ink);
  border-radius: 14px;
  overflow: hidden;
  font-size: 0.875rem;
  letter-spacing: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 50px 120px -50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(17, 60, 99, 0.12);
}
.ihk-app svg:not(.ihk-gauge) { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Sidebar */
.ihk-side { background: var(--i-card); border-inline-end: 1px solid var(--i-line); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.ihk-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 6px; }
.ihk-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--i-navy); color: #e3b94a; }
.ihk-mark svg { width: 20px; height: 20px; }
.ihk-word { display: grid; line-height: 1.05; }
.ihk-word b { font-family: "IBM Plex Sans Arabic", var(--f-sans); font-size: 1.25rem; font-weight: 600; color: var(--i-navy); }
.ihk-word i { font-style: normal; font-size: 0.625rem; letter-spacing: 0.32em; color: var(--i-gold); font-weight: 600; }
.ihk-nav { display: flex; flex-direction: column; gap: 4px; }
.ihk-group { margin: 10px 8px 4px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--i-label); }
.ihk-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #3b4554;
  font-weight: 500;
  text-align: start;
  transition: background-color 0.2s, color 0.2s;
}
.ihk-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--i-tile); color: var(--i-navy); transition: background-color 0.2s, color 0.2s; }
.ihk-nav-item:hover { background: #f1f5f9; }
.ihk-nav-item[aria-selected="true"] { background: var(--i-navy); color: #fff; box-shadow: 0 6px 16px -8px rgba(17, 60, 99, 0.7); }
.ihk-nav-item[aria-selected="true"] .ihk-ico { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ihk-nav-item:focus-visible { outline: 2px solid var(--i-gold); outline-offset: 2px; }

/* Main column */
.ihk-main { display: flex; flex-direction: column; min-width: 0; }
.ihk-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--i-card); border-bottom: 1px solid var(--i-line); }
.ihk-tile { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--i-navy); color: #fff; }
.ihk-tile--soft { background: var(--i-tile); color: var(--i-navy); }
.ihk-crumb { display: grid; line-height: 1.2; }
.ihk-crumb small { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-label); font-weight: 600; }
.ihk-crumb b { font-size: 1rem; font-weight: 600; }
.ihk-top-right { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.ihk-pill-lang { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--i-line); border-radius: 999px; color: var(--i-muted); font-family: "IBM Plex Sans Arabic", var(--f-sans); font-size: 0.75rem; }
.ihk-pill-lang svg, .ihk-bell svg { width: 15px; height: 15px; }
.ihk-bell { color: var(--i-muted); display: grid; }
.ihk-user { display: flex; align-items: center; gap: 8px; }
.ihk-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--i-navy); color: #fff; font-size: 0.6875rem; font-weight: 700; }
.ihk-user-t { display: grid; line-height: 1.15; }
.ihk-user-t b { font-size: 0.8125rem; font-weight: 600; }
.ihk-user-t small { font-size: 0.6875rem; color: var(--i-label); }
.ihk-body { padding: 18px 20px; flex: 1; }
.ihk-body .console-panel { padding: 0; min-height: 0; display: grid; gap: 14px; }
.ihk-body .console-panel[hidden] { display: none; }
.ihk-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--i-line); background: var(--i-card); color: var(--i-label); font-size: 0.75rem; }
.ihk-foot a { color: var(--i-navy); font-weight: 600; }
.ihk-foot a:hover { text-decoration: underline; }

/* Navy command-center banner */
.ihk-banner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 22px;
  border-radius: 14px;
  background: radial-gradient(120% 140% at 0% 0%, #1d5687 0%, var(--i-navy) 55%, #0c2d4b 100%);
  color: #fff;
}
.ihk-banner-copy { max-width: 46ch; display: grid; gap: 6px; }
.ihk-banner-tag { justify-self: start; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.ihk-banner h3 { font-size: 1.375rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.ihk-banner p { color: rgba(255, 255, 255, 0.72); font-size: 0.8125rem; }
.ihk-banner-kpis { display: flex; gap: 10px; }
.ihk-banner-kpis div { min-width: 92px; display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
.ihk-banner-kpis small { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.72); }
.ihk-banner-kpis b { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Cards */
.ihk-card { background: var(--i-card); border: 1px solid var(--i-line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.ihk-card-h { display: flex; align-items: center; gap: 12px; }
.ihk-card-h > span:last-child { display: grid; line-height: 1.25; }
.ihk-card-h b { font-weight: 600; font-size: 0.9375rem; }
.ihk-card-h small { color: var(--i-muted); font-size: 0.75rem; }
.ihk-alert { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #fdf0ef; border: 1px solid #f6d5d2; color: var(--i-red); font-size: 0.8125rem; }
.ihk-alert svg { flex: none; width: 16px; height: 16px; }
.ihk-label { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--i-label); font-weight: 600; }

/* Posture: gauge + KPI grid */
.ihk-posture { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ihk-gauge-box { display: grid; place-items: center; align-content: center; gap: 2px; padding: 12px; border-radius: 12px; background: #fafbfc; border: 1px solid var(--i-line); }
.ihk-gauge { display: block; width: 100%; max-width: 280px; height: auto; overflow: visible; }
.ihk-gauge .g-appetite { stroke: var(--i-navy); stroke-width: 2.5; }
.ihk-gauge .g-ticks text { font-size: 9px; fill: var(--i-label); text-anchor: middle; font-family: var(--f-sans); }
.ihk-gauge .g-needle { transform-origin: 130px 130px; transform: rotate(102.6deg); transition: transform 1.4s cubic-bezier(0.34, 1.3, 0.64, 1); }
.ihk-gauge .g-needle path, .ihk-gauge .g-needle circle { fill: #1f2633; stroke: none; }
.ihk-gauge .g-needle .hub { fill: #fff; }
.console-panel.is-entering .ihk-gauge .g-needle { animation: needle 1.4s cubic-bezier(0.34, 1.3, 0.64, 1); }
@keyframes needle { from { transform: rotate(0deg); } to { transform: rotate(102.6deg); } }
.ihk-score { display: flex; align-items: center; gap: 10px; margin-top: -6px; }
.ihk-score b { font-size: 2rem; font-weight: 700; color: var(--i-gold); font-variant-numeric: tabular-nums; }
.ihk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ihk-kpis div { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--i-line); border-radius: 10px; background: var(--i-card); }
.ihk-kpis small { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--i-label); font-weight: 600; }
.ihk-kpis b { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--i-ink); }
.ihk-kpis span { font-size: 0.6875rem; color: var(--i-muted); }
.c-gold { color: var(--i-gold) !important; }
.c-navy { color: var(--i-navy) !important; }
.c-red { color: var(--i-red) !important; }
.c-green { color: var(--i-green) !important; }
.ihk-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.ihk-lvl { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.ihk-lvl--crit { background: #fde8e8; color: #b42f2f; }
.ihk-lvl--high { background: #fdeee4; color: #c2522b; }
.ihk-lvl--med, .ihk-lvl--mod { background: #fdf3dc; color: #a46b0d; }
.ihk-lvl--low { background: #e5f5ec; color: #2f8a5b; }

/* Tables and status pills */
.ihk-table-wrap { overflow-x: auto; }
.ihk-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ihk-table th { text-align: start; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--i-label); font-weight: 600; padding: 8px 10px; background: #f7f9fb; border-bottom: 1px solid var(--i-line); }
.ihk-table td { padding: 11px 10px; border-bottom: 1px solid var(--i-line); }
.ihk-table tr:last-child td { border-bottom: 0; }
.ihk-table tbody tr:hover { background: #f9fbfd; }
.ihk-st { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.ihk-st--ok { background: #e5f5ec; color: #2f8a5b; }
.ihk-st--warn { background: #fdf3dc; color: #a46b0d; }
.ihk-st--bad { background: #fde8e8; color: #b42f2f; }
.ihk-st--info { background: #e6effa; color: #18507f; }
.ihk-mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ihk-mini-kpis div { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--i-card); border: 1px solid var(--i-line); }
.ihk-mini-kpis small { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--i-label); font-weight: 600; }
.ihk-mini-kpis b { font-size: 1.375rem; font-weight: 700; color: var(--i-navy); }

/* Heat map, bars inside the app */
.ihk-app .heat { gap: 20px; }
.ihk-app .heat-grid { grid-template-columns: repeat(5, 46px); grid-template-rows: repeat(5, 46px); gap: 4px; }
.ihk-app .heat-cell { border-radius: 8px; font-family: var(--f-sans); font-size: 0.8125rem; font-weight: 700; }
.ihk-app .heat-cell:hover, .ihk-app .heat-cell:focus-visible, .ihk-app .heat-cell.is-on { box-shadow: 0 0 0 2px var(--i-navy); }
.hm-low { background: #e5f5ec; color: #2f8a5b; }
.hm-medium { background: #fdf3dc; color: #a46b0d; }
.hm-high { background: #fde1cf; color: #c2522b; }
.hm-critical { background: #b42f2f; color: #fff; }
.ihk-app .heat-axis { width: calc(5 * 46px + 16px); color: var(--i-label); font-size: 0.6875rem; }
.ihk-app .heat-detail strong { font-size: 1.125rem; font-weight: 600; }
.ihk-app .heat-detail ul li { border-top-color: var(--i-line); }
.ihk-app .bars { gap: 14px; }
.ihk-app .bar-row { grid-template-columns: minmax(0, 12rem) 1fr 3rem; }
.ihk-app .bar { height: 8px; background: #e9eef4; border-radius: 4px; }
.ihk-app .bar i { background: linear-gradient(90deg, var(--i-navy-2), var(--i-navy)); border-radius: 4px; }
.ihk-app .pct { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--i-navy); }

/* Platform section head: intro + CTA stacked on the right */
.platform-side { grid-column: 9 / -1; align-self: end; display: grid; gap: var(--s-4); justify-items: start; }
.head-split .platform-side .section-intro { grid-column: auto; }

@media (max-width: 1080px) {
  .ihk-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ihk-side { border-inline-end: 0; border-bottom: 1px solid var(--i-line); padding: 12px; gap: 8px; }
  .ihk-brand { display: none; }
  .ihk-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .ihk-nav::-webkit-scrollbar { display: none; }
  .ihk-group { display: none; }
  .ihk-nav-item { white-space: nowrap; flex: none; }
  .platform-side { grid-column: 1 / -1; }
  .ihk-posture { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ihk-top-right .ihk-pill-lang, .ihk-top-right .ihk-user-t, .ihk-bell { display: none; }
  .ihk-body { padding: 12px; }
  .ihk-banner { padding: 16px; }
  .ihk-banner h3 { font-size: 1.125rem; }
  .ihk-banner-kpis { width: 100%; }
  .ihk-banner-kpis div { flex: 1; min-width: 0; padding: 8px 10px; }
  .ihk-banner-kpis b { font-size: 1.25rem; }
  .ihk-top { padding: 12px; }
  .ihk-card { padding: 14px; }
  .ihk-alert { align-items: flex-start; }
  .ihk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ihk-mini-kpis { grid-template-columns: 1fr 1fr; }
  .ihk-app .heat-grid { grid-template-columns: repeat(5, 40px); grid-template-rows: repeat(5, 40px); }
  .ihk-app .heat-axis { width: calc(5 * 40px + 16px); }
  .ihk-app .bar-row { grid-template-columns: minmax(0, 7.5rem) 1fr 2.5rem; }
  .ihk-ico { width: 26px; height: 26px; }
}
[lang="ar"] .ihk-app, [lang="ar"] .ihk-app * { font-family: "IBM Plex Sans Arabic", var(--f-sans); }
[lang="ar"] .ihk-group, [lang="ar"] .ihk-label, [lang="ar"] .ihk-kpis small, [lang="ar"] .ihk-table th, [lang="ar"] .ihk-crumb small { text-transform: none; }

/* 6f. Platform (inverse block) -------------------------------------------- */
.inverse {
  --bg: var(--inv-bg);
  --bg-raised: var(--inv-raised);
  --ink: var(--inv-ink);
  --ink-2: var(--inv-ink-2);
  --ink-3: var(--inv-ink-3);
  --rule: var(--inv-rule);
  --rule-strong: color-mix(in srgb, var(--inv-ink) 30%, transparent);
  --accent: var(--inv-accent);
  --focus: var(--inv-accent);
  background: var(--bg);
  color: var(--ink);
}
.platform { padding-block: var(--section-y); }
.platform .grid { row-gap: var(--s-8); }
.platform-copy { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.platform-copy .section-title { margin-bottom: var(--s-5); }
.platform-copy p + p { margin-top: var(--s-4); }
.platform-copy p { color: var(--ink-2); }
.platform-copy .links { margin-top: var(--s-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }

.console {
  grid-column: 6 / -1;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--t-sm);
}
.console-bar {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
}
.console-bar .lights { display: flex; gap: 6px; }
.console-bar .lights i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); }
.console-bar .path { flex: 1; }
.console-tabs {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.console-tabs::-webkit-scrollbar { display: none; }
.console-tab {
  position: relative;
  padding: var(--s-3) var(--s-4);
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
}
.console-tab::after {
  content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transition: transform 0.4s var(--ease);
}
.console-tab:hover { color: var(--ink); }
.console-tab[aria-selected="true"] { color: var(--ink); }
.console-tab[aria-selected="true"]::after { transform: scaleX(1); }
.console-panel { padding: var(--s-5); min-height: 360px; }
.console-panel[hidden] { display: none; }
.console-panel.is-entering { animation: panelIn 0.5s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.console-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); }
.console-head h3 { font-size: var(--t-md); }
.console-head .mono { color: var(--ink-3); }

.c-table { width: 100%; border-collapse: collapse; }
.c-table th { text-align: start; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); padding-block: var(--s-2); padding-inline: 0 var(--s-3); border-bottom: 1px solid var(--rule); }
.c-table td { padding-block: var(--s-3); padding-inline: 0 var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: middle; }
.c-table tr:last-child td { border-bottom: 0; }
.c-table td.num { font-family: var(--f-mono); font-size: var(--t-xs); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 500;
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ok { color: var(--ok); }
.pill--warn { color: var(--warn); }
.pill--risk { color: var(--risk); }

.heat { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; }
.heat-grid {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  grid-template-rows: repeat(5, 40px);
  gap: 3px;
}
.heat-cell {
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--accent-ink);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.heat-cell:hover, .heat-cell:focus-visible, .heat-cell.is-on { transform: scale(1.08); box-shadow: 0 0 0 2px var(--ink); z-index: 1; }
.heat-axis { display: flex; justify-content: space-between; color: var(--ink-3); margin-top: var(--s-2); width: calc(5 * 40px + 12px); }
.heat-detail { display: grid; gap: var(--s-3); }
.heat-detail .mono { color: var(--ink-3); }
.heat-detail strong { font-size: var(--t-md); font-weight: 500; }
.heat-detail ul li { padding-block: var(--s-2); border-top: 1px solid var(--rule); }

.bars { display: grid; gap: var(--s-4); }
.bar-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 3rem; gap: var(--s-4); align-items: center; }
.bar { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 1.1s var(--ease); }
.console-panel.is-entering .bar i,
.console-panel:not([hidden]) .bar i { width: var(--v); }
.bar-row .mono { text-align: end; }

.console-foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--rule); color: var(--ink-3); display: flex; justify-content: space-between; gap: var(--s-4); }

/* 6g. Booking -------------------------------------------------------------- */
.book .grid { row-gap: var(--s-8); }
.book-aside {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
  display: grid;
  gap: var(--s-6);
}
.book-aside .section-title { font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); }

.modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 3px;
  position: relative;
}
.modes input { position: absolute; opacity: 0; pointer-events: none; }
.modes label {
  position: relative; z-index: 1;
  text-align: center;
  padding: var(--s-2) var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.3s var(--ease);
}
.modes input:checked + label { color: var(--accent-ink); }
.modes input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.modes .thumb {
  position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px;
  width: calc((100% - 6px) / 3);
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.5s var(--ease);
}
.modes[data-mode="poc"] .thumb { transform: translateX(100%); }
.modes[data-mode="general"] .thumb { transform: translateX(200%); }

.expect { display: grid; gap: 0; }
.expect li { display: grid; grid-template-columns: 2.25rem 1fr; padding-block: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--t-sm); color: var(--ink-2); }
.expect li .mono { color: var(--accent); padding-top: 0.15em; }

.summary {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-raised);
  font-size: var(--t-sm);
}
.summary h3 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); margin-bottom: var(--s-3); letter-spacing: 0.01em; }
.summary dl { margin: 0; display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-2) var(--s-4); }
.summary dt { color: var(--ink-3); }
.summary dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.summary dd.empty { color: var(--ink-3); }

.book-main { grid-column: 6 / -1; }
.book-alt { margin-top: var(--s-6); color: var(--ink-2); font-size: var(--t-sm); }

/* Stepper */
.stepper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
}
.stepper li { display: grid; gap: var(--s-2); color: var(--ink-3); font-size: var(--t-sm); }
.stepper li::before {
  content: ""; height: 2px; background: var(--rule-strong); border-radius: 1px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 0.6s var(--ease);
}
.stepper li.is-done::before, .stepper li.is-current::before { background-size: 100% 100%; }
.stepper li.is-current { color: var(--ink); }
.stepper li.is-done { color: var(--ink-2); }
.stepper li[hidden] { display: none; }
.stepper .n { font-family: var(--f-mono); font-size: var(--t-xs); margin-inline-end: var(--s-2); }

.fstep { border: 0; margin: 0; padding: 0; min-width: 0; }
.js .fstep:not(.is-current) { display: none; }
.fstep.is-current { animation: panelIn 0.5s var(--ease); }
.fstep legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--t-lg); letter-spacing: var(--track-snug); font-weight: 500; }
.fstep .hint { color: var(--ink-2); margin-bottom: var(--s-6); max-width: 52ch; }
.no-js-steps .fstep + .fstep { margin-top: var(--s-8); }

.step-nav {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: var(--s-4);
}
.step-nav .count { margin-inline-end: auto; color: var(--ink-3); }

/* 6h. Visit us (Leaflet map) ------------------------------------------------ */
.visit-map {
  grid-column: 1 / -1;
  position: relative;
  height: clamp(420px, 62vh, 640px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-raised);
  isolation: isolate;
}
.visit-canvas { position: absolute; inset: 0; z-index: 0; background: var(--bg-raised); }
.visit-card {
  position: absolute;
  z-index: 500;
  top: var(--s-6);
  inset-inline-start: var(--s-6);
  width: min(360px, calc(100% - 2 * var(--s-6)));
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
}
.visit-card address { font-size: var(--t-md); line-height: 1.4; color: var(--ink); }
.visit-coords { color: var(--ink-3); }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-3); }

/* Map tiles toned to the theme; shared by the footer map. */
.visit-canvas .leaflet-tile-pane,
.footer-map-canvas .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.85) contrast(0.9) sepia(0.25) hue-rotate(-8deg); }
:root[data-theme="light"] .visit-canvas .leaflet-tile-pane,
:root[data-theme="light"] .footer-map-canvas .leaflet-tile-pane { filter: grayscale(1) sepia(0.22) brightness(1.03) contrast(0.95); }
.visit-canvas .leaflet-container, .visit-canvas.leaflet-container { background: var(--bg-raised); font-family: var(--f-sans); }
.visit-canvas .leaflet-control-attribution { background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--ink-3); font-size: 10px; }
.visit-canvas .leaflet-control-attribution a { color: var(--ink-2); }
.visit-canvas .leaflet-bar { border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); overflow: hidden; box-shadow: none; }
.visit-canvas .leaflet-bar a { background: var(--bg); color: var(--ink); border-bottom-color: var(--rule); width: 34px; height: 34px; line-height: 34px; }
.visit-canvas .leaflet-bar a:hover { background: var(--bg-raised); color: var(--accent); }

/* Pin: gold dot with a soft pulse */
.kg-pin { position: relative; }
.kg-pin-dot { position: absolute; inset: 5px; border-radius: 50%; background: var(--gold-hi); border: 3px solid var(--gold); box-shadow: 0 0 0 3px rgba(10, 9, 7, 0.55); }
.kg-pin-pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(212, 175, 55, 0.45); animation: pinPulse 2.4s var(--ease) infinite; }
@keyframes pinPulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.leaflet-tooltip.kg-tip {
  background: var(--gold); color: var(--accent-ink); border: 0; border-radius: var(--radius-sm);
  font-family: var(--f-sans); font-weight: 600; font-size: var(--t-sm); padding: 4px 10px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
}
.leaflet-tooltip-top.kg-tip::before { border-top-color: var(--gold); }

@media (max-width: 760px) {
  .visit-map { height: auto; display: grid; overflow: visible; border: 0; background: transparent; }
  .visit-canvas { position: relative; height: 320px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
  .visit-card { position: static; width: 100%; margin-top: var(--s-4); backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-raised); box-shadow: none; }
}

/* 7. Forms ----------------------------------------------------------------- */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); }
.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field > .flabel {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}
.field .opt { color: var(--ink-3); font-weight: 400; }
.field .help { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--f-mono); }

.input,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  color: var(--ink);
  font-size: var(--t-base);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: var(--lh-body); }
.field select {
  cursor: pointer;
  padding-inline-end: var(--s-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.field select option { background: var(--bg-raised); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
  box-shadow: 0 1px 0 0 var(--gold);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: var(--risk); box-shadow: 0 1px 0 0 var(--risk); }
.field .err { font-size: var(--t-xs); color: var(--risk); min-height: 0; }
.field .err:empty { display: none; }

/* Choice chips (checkbox / radio rendered as selectable tiles) */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  user-select: none;
}
.chip span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color 0.2s, border-color 0.2s;
}
.chip:hover span { color: var(--ink); border-color: var(--ink-2); }
.chip input:checked + span { color: var(--ink); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.chip input:checked + span::before { background: var(--gold); border-color: var(--gold); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Option cards (larger radio choices, e.g. meeting format / environment) */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-3); }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.option .box {
  display: grid; gap: var(--s-1);
  height: 100%;
  padding: var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, background-color 0.2s;
}
.option .box strong { font-weight: 500; }
.option .box small { color: var(--ink-2); font-size: var(--t-sm); }
.option:hover .box { border-color: var(--ink-2); }
.option input:checked + .box { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.option input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Date strip + time slots */
.dates {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
}
.date-btn, .slot-btn {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  text-align: start;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.date-btn .dow { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); }
.date-btn .day { font-size: var(--t-md); font-weight: 500; letter-spacing: var(--track-snug); line-height: 1.1; }
.date-btn .mon { font-size: var(--t-xs); color: var(--ink-2); }
.date-btn:hover, .slot-btn:hover { border-color: var(--ink-2); }
.date-btn[aria-pressed="true"], .slot-btn[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--accent-ink);
}
.date-btn[aria-pressed="true"] .dow,
.date-btn[aria-pressed="true"] .mon { color: rgba(20, 17, 10, 0.72); }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.slot-btn { justify-items: start; }
.slot-btn .tm { font-weight: 500; }
.slot-btn .lc { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--f-mono); }
.slot-btn[aria-pressed="true"] .lc { color: rgba(20, 17, 10, 0.72); }
.slot-btn[disabled] { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.tz-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); color: var(--ink-3); }

/* Consent block */
.consent {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.consent h4 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); letter-spacing: 0.01em; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 1px 0 0;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.check input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 0.2s var(--ease); }
.check input:checked { background: var(--gold); border-color: var(--gold); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check strong { color: var(--ink); font-weight: 500; }
.check.is-invalid input { border-color: var(--risk); }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--risk); }
.form-status:empty { display: none; }

.reveal-field { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.reveal-field > div { overflow: hidden; }
.reveal-field.is-open { grid-template-rows: 1fr; }

/* 8. Subpages -------------------------------------------------------------- */
.page-head { padding-top: calc(var(--header-h) + var(--s-9)); padding-bottom: var(--s-8); }
.crumbs { display: flex; gap: var(--s-2); color: var(--ink-3); margin-bottom: var(--s-6); }
.crumbs a:hover { color: var(--ink); }
.page-head h1 {
  grid-column: 1 / span 9;
  font-size: var(--t-2xl);
  letter-spacing: -0.045em;
  line-height: var(--lh-tight);
}
.page-head .section-intro { grid-column: 1 / span 6; margin-top: var(--s-6); max-width: 46ch; }

.res-list { grid-column: 1 / -1; border-bottom: 1px solid var(--rule); }
.res-item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 5fr) 2.5rem;
  gap: var(--gutter);
  align-items: baseline;
  padding-block: var(--s-7);
  border-top: 1px solid var(--rule);
  position: relative;
}
.res-item .mono { color: var(--ink-3); }
.res-item .tag { display: block; margin-bottom: var(--s-2); color: var(--accent); }
.res-item h2 { font-size: var(--t-lg); letter-spacing: var(--track-snug); transition: transform 0.5s var(--ease); }
.res-item p { color: var(--ink-2); max-width: 48ch; }
.res-item .go { justify-self: end; font-size: var(--t-md); transition: transform 0.4s var(--ease); }
.res-item a.stretch::after { content: ""; position: absolute; inset: 0; }
.res-item:hover h2 { transform: translateX(var(--s-3)); }
.res-item:hover .go { transform: translate(3px, -3px); color: var(--accent); }

.legal-body { grid-column: 4 / span 7; }
.legal-toc { grid-column: 1 / span 2; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.legal-toc a:hover { color: var(--ink); }
.legal-body h2 { font-size: var(--t-md); margin: var(--s-8) 0 var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-2); }
.legal-body p + p { margin-top: var(--s-4); }
.legal-body ul { display: grid; gap: var(--s-3); margin: var(--s-4) 0; }
.legal-body li { padding-inline-start: var(--s-5); position: relative; }
.legal-body li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--accent); }
.legal-body strong { color: var(--ink); font-weight: 500; }
.legal-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
.legal-body a:hover { text-decoration-color: var(--gold); }
.legal-meta { color: var(--ink-3); margin-bottom: var(--s-7); }

.thanks {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-8);
}
.thanks h1 { grid-column: 1 / span 9; font-size: var(--t-2xl); letter-spacing: -0.045em; line-height: var(--lh-tight); }
.thanks .section-intro { grid-column: 1 / span 6; margin-top: var(--s-6); max-width: 44ch; }
.thanks .next { grid-column: 1 / -1; margin-top: var(--s-9); display: grid; grid-template-columns: subgrid; }
.thanks .next li { grid-column: span 4; padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); display: grid; gap: var(--s-2); }
.thanks .next .mono { color: var(--accent); }
.thanks .next p { color: var(--ink-2); max-width: 32ch; }
.thanks .actions { grid-column: 1 / -1; margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); }

/* 9. Footer ---------------------------------------------------------------- */
.site-footer { padding-top: var(--section-y); padding-bottom: var(--s-6); border-top: 1px solid var(--rule); }
.footer-cta {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6);
  padding-bottom: var(--s-9);
}
.footer-cta p { font-size: var(--t-xl); letter-spacing: var(--track-tight); line-height: 1.05; font-weight: 500; max-width: 16ch; }
.footer-cta p span { color: var(--ink-3); }
.footer-cols { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.footer-brand { grid-column: 1 / span 3; display: grid; gap: var(--s-4); align-content: start; color: var(--ink-2); font-size: var(--t-sm); }
.footer-brand p { max-width: 30ch; }
.f-col { grid-column: span 2; display: grid; gap: var(--s-2); align-content: start; font-size: var(--t-sm); }
/* Explore: two short columns of links under one heading */
.f-col--wide { grid-column: span 3; grid-template-columns: repeat(2, max-content); grid-template-rows: auto repeat(5, auto); grid-auto-flow: column; column-gap: var(--s-6); }
.f-col--wide h2 { grid-column: 1 / -1; grid-row: 1; }
.f-col h2 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); margin-bottom: var(--s-2); letter-spacing: 0.01em; }
.f-col a { color: var(--ink-2); transition: color 0.2s; justify-self: start; }
.f-col a:hover { color: var(--ink); }
.f-contact { grid-column: span 4; }
.f-contact address { color: var(--ink-2); }
.footer-map { margin-top: var(--s-3); }
.footer-map-canvas {
  height: 160px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-raised);
}
.footer-map-canvas .leaflet-control-attribution { background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--ink-3); font-size: 10px; }
.footer-map-canvas .leaflet-control-attribution a { color: var(--ink-2); }
.footer-map-fallback { display: grid; place-items: center; height: 100%; color: var(--ink-3); font-size: var(--t-xs); }
.footer-map a { display: inline-block; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-2); }
.social { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  color: var(--ink-2);
  transition: color 0.2s, border-color 0.2s;
}
.social a:hover { color: var(--accent); border-color: var(--accent); }
.social svg { width: 15px; height: 15px; }
.footer-legal {
  grid-column: 1 / -1;
  margin-top: var(--s-9);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6);
  color: var(--ink-3);
}

/* 10. Motion --------------------------------------------------------------- */
/* Elements are visible by default; the script adds .pre-reveal only once it
   is running, so content never stays hidden if JavaScript fails. */
.pre-reveal { opacity: 0; transform: translateY(24px); }
.pre-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
.hero h1 .line > span { transform: translateY(0); }
.js .hero h1 .line > span { transform: translateY(105%); }
.js .hero.is-in h1 .line > span { transform: none; transition: transform 1.1s var(--ease); }
.js .hero.is-in h1 .line:nth-child(2) > span { transition-delay: 0.08s; }
.js .hero.is-in h1 .line:nth-child(3) > span { transition-delay: 0.16s; }


/* 11. Right-to-left (Arabic) -----------------------------------------------
   Layout mirrors through logical properties above; these rules cover what
   logical properties can't: transforms, gradients, typography for Arabic. */
:root[lang="ar"] {
  --f-sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --f-mono: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --track-tight: 0;
  --track-snug: 0;
  --track-body: 0;
  --lh-tight: 1.3;
  --lh-snug: 1.4;
  --lh-body: 1.8;
}
/* Arabic letters join; any letter-spacing breaks the script. */
[lang="ar"] body, [lang="ar"] body * { letter-spacing: 0 !important; }
[lang="ar"] .hero h1, [lang="ar"] .page-head h1, [lang="ar"] .thanks h1 { line-height: 1.3; font-size: clamp(2.25rem, 0.8rem + 5vw, 5.25rem); }
[lang="ar"] .section-title, [lang="ar"] .statement, [lang="ar"] .footer-cta p { line-height: 1.35; }
[lang="ar"] .menu-links a { line-height: 1.45; }
[lang="ar"] .mono { font-size: 0.8125rem; }
/* Latin-only content keeps its own direction and face. */
.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .marquee { direction: ltr; }
[dir="rtl"] .hero-art { transform: scaleX(-1); }
[dir="rtl"] .cta::before { transform-origin: left; }
[dir="rtl"] .cta:hover::before, [dir="rtl"] .cta:focus-visible::before { transform-origin: right; }
[dir="rtl"] .cta:hover .arrow { transform: translateX(-4px); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-3px); }
[dir="rtl"] .svc-trigger:hover .t,
[dir="rtl"] .svc-trigger[aria-expanded="true"] .t,
[dir="rtl"] .res-item:hover h2 { transform: translateX(calc(-1 * var(--s-3))); }
[dir="rtl"] .res-item:hover .go { transform: translate(-3px, -3px); }
[dir="rtl"] .modes[data-mode="poc"] .thumb { transform: translateX(-100%); }
[dir="rtl"] .modes[data-mode="general"] .thumb { transform: translateX(-200%); }
[dir="rtl"] .posture-bar i { background: linear-gradient(270deg, var(--ok), var(--warn) 70%, var(--risk)); }
[dir="rtl"] .field select { background-position: 9px 55%, 4px 55%; }
[dir="rtl"] .chip span, [dir="rtl"] .date-btn, [dir="rtl"] .slot-btn { text-align: start; }
[dir="rtl"] .hero-meta .scroll-hint i::after { left: auto; right: 0; }

/* Language switch in the header */
.lang-switch {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-sm);
  transition: color 0.2s, background-color 0.2s;
}
.lang-switch:hover { color: var(--ink); background: var(--rule); }
.lang-switch[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--f-sans); }
.lang-switch[lang="en"] { font-family: "Instrument Sans", var(--f-sans); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .head-split .section-title { grid-column: 1 / -1; }
  .head-split .section-intro { grid-column: 1 / span 9; }
  .platform-copy { grid-column: 1 / -1; position: static; }
  .console { grid-column: 1 / -1; }
  .book-aside { grid-column: 1 / -1; position: static; }
  .book-main { grid-column: 1 / -1; }
  .summary { display: none; }
  .process-aside { grid-column: 1 / -1; position: static; margin-bottom: var(--s-7); }
  .process-meter { display: none; }
  .steps { grid-column: 1 / -1; }
  .step { opacity: 1; }
  .menu-links { grid-column: 1 / -1; }
  .menu-aside { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .pillars--4 .pillar { grid-column: span 6; padding-bottom: var(--s-6); }
  .f-col { grid-column: span 4; }
  .f-contact { grid-column: span 4; }
  .legal-toc { display: none; }
  .legal-body { grid-column: 1 / span 10; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .header-link .label-long { display: none; }
  .header-link .label-short { display: inline; }
  .site-header .wrap { gap: var(--s-3); }
  .lang-switch { padding-inline: var(--s-1); }
  /* Keep the menu button's text for screen readers, show only the icon. */
  .menu-btn .when-closed, .menu-btn .when-open {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .menu-btn { padding: var(--s-2); margin-inline-end: calc(-1 * var(--s-2)); }
  .hero h1 { grid-column: 1 / -1; }
  .hero-lead { grid-column: 1 / -1; }
  .hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .statement { grid-column: 1 / -1; }
  .pillar, .pillars--4 .pillar { grid-column: 1 / -1; padding-inline-end: 0; padding-bottom: var(--s-6); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .std + .std:not(:nth-child(4n + 1)) { padding-inline-start: 0; border-inline-start: 0; }
  .std:nth-child(2n) { padding-inline-start: var(--s-4) !important; border-inline-start: 1px solid var(--rule) !important; }
  .reg-table .hide-sm { display: none; }
  .reg-table tbody th { font-size: var(--t-base); white-space: normal; }
  .reg-table .exp { text-align: start; font-size: var(--t-xs); min-width: 9rem; }
  .reg-panel:not(#rp-gcc) .reg-table thead th:last-child { text-align: start; }
  .reg-table td, .reg-table th { padding-inline-end: var(--s-3); }
  .stats > div:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .head-split .section-intro { grid-column: 1 / -1; }
  .svc-trigger { grid-template-columns: 2.5rem 1fr 1.5rem; row-gap: var(--s-2); padding-block: var(--s-5); }
  .svc-trigger .d { grid-column: 2; grid-row: 2; }
  .svc-trigger .pm { grid-column: 3; grid-row: 1; }
  .svc-body { grid-template-columns: 2.5rem 1fr; }
  .svc-body > p, .svc-body .deliv, .svc-body .cta { grid-column: 2; }
  .step { grid-template-columns: 1fr; gap: var(--s-2); padding-block: var(--s-6); }
  .step .mono { padding-top: 0; }
  .frameworks-label { display: none; }
  .heat { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: minmax(0, 8rem) 1fr 2.5rem; }
  .console-panel { padding: var(--s-4); min-height: 0; }
  .c-table .hide-sm { display: none; }
  .fields { grid-template-columns: 1fr; }
  .dates { grid-template-columns: repeat(5, minmax(3.6rem, 1fr)); overflow-x: auto; padding-bottom: var(--s-2); scroll-snap-type: x mandatory; }
  .date-btn { scroll-snap-align: start; padding: var(--s-2); }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper .label { display: none; }
  .modes label { font-size: var(--t-xs); padding-inline: var(--s-1); }
  .page-head h1, .thanks h1 { grid-column: 1 / -1; }
  .page-head .section-intro, .thanks .section-intro { grid-column: 1 / -1; }
  .res-item { grid-template-columns: 2.5rem 1fr 1.5rem; row-gap: var(--s-3); padding-block: var(--s-6); }
  .res-item p { grid-column: 2; grid-row: 2; }
  .res-item .go { grid-column: 3; grid-row: 1; }
  .legal-body { grid-column: 1 / -1; }
  .thanks .next li { grid-column: 1 / -1; }
  .f-col, .f-contact { grid-column: 1 / -1; }
  .menu-aside { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .pre-reveal { opacity: 1; transform: none; }
  .js .hero h1 .line > span { transform: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; row-gap: var(--s-3); }
  .marquee-track [aria-hidden="true"] { display: none; }
}

@media print {
  .site-header, .menu, .hero-art, .footer-map, .social { display: none !important; }
  body { background: #fff; color: #000; }
}