/* =========================================================
   Revisions overlay — loaded after brand-overrides.css.
   All adjustments per the May 2026 review pass.
   ========================================================= */

/* ---------------------------------------------------------
   1. LOGO — white in dark mode, slightly smaller in nav
   --------------------------------------------------------- */
.brand-logo { transition: opacity 200ms ease; }
.brand-logo-light { display: inline-block; }
.brand-logo-dark  { display: none; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark  { display: inline-block; }

/* Slightly smaller logo in the navigation bar */
.topbar .brand-logo,
.topbar .footer-brand-img .brand-logo { height: 26px !important; width: auto !important; }
.topbar .footer-brand-img,
.topbar .brand,
.topbar a[aria-label="Muwazana home"] .brand-logo { line-height: 0; }

/* ---------------------------------------------------------
   2. DARK MODE borders (nav bottom + footer top)
   --------------------------------------------------------- */
[data-theme="dark"] .topbar {
  border-bottom-color: rgba(255,255,255,0.22) !important;
}
[data-theme="dark"] .footer {
  border-top-color: rgba(255,255,255,0.22) !important;
}

/* ---------------------------------------------------------
   3. DARK MODE selection highlight — darker lime
   --------------------------------------------------------- */
[data-theme="dark"] {
  --selection-bg: #C2DB2E;
  --selection-fg: #011821;
}
[data-theme="dark"] ::selection      { background: #C2DB2E !important; color: #011821 !important; }
[data-theme="dark"] ::-moz-selection { background: #C2DB2E !important; color: #011821 !important; }

/* ---------------------------------------------------------
   4. NAV top-right ordering (CTA · theme · lang)
   --------------------------------------------------------- */
.top-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.top-right .nav-cta { order: 0; }
.top-right .theme-btn { order: 1; }
.top-right .toggle-group { order: 2; }

/* ---------------------------------------------------------
   5. FOOTER — toggles below the icons row
   --------------------------------------------------------- */
.footer-follow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-toggles {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stack the dark/light theme button directly below the email icon, and
   the language switch directly below the LinkedIn icon, so each pair
   shares a vertical column. */
.footer-linkedin-stack,
.footer-email-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Footer theme button + language toggle inherit the topbar `.theme-btn`
   and `.toggle-group` styling (circular outline, mono pill, dark-on-active)
   so they match the tab bar exactly. */

/* ---------------------------------------------------------
   6. LANDING — right-aligned hero, stock-tape to the right
   --------------------------------------------------------- */
.hero.hero--split { padding-bottom: 56px; }
.hero-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}
.hero-copy {
  text-align: left !important;
  margin-left: 0;
  margin-right: auto;
}
.hero-copy .hero-h,
.hero-copy .hero-sub {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 100% !important;
}
.hero-copy .hero-h .line {
  display: block !important;
  text-align: left !important;
  height: auto !important;
  max-width: 100% !important;
}
.hero-copy .hero-h .line > span,
.hero-copy .hero-h .line > em {
  height: auto !important;
  font-size: inherit !important;
  text-align: left !important;
}
.hero.hero--split .hero-h,
.hero-copy .hero-h {
  font-size: 100px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
}
.hero-copy .hero-sub {
  margin-left: 0;
  margin-right: auto;
  max-width: 720px;
}
.hero-tape--inline {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Height set in JS to match .hero-copy after layout */
  align-self: stretch;
  display: flex;
  align-items: stretch;
}
.hero-tape--inline .tape-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  background: transparent;
  position: relative;
  overflow: hidden;
}
[data-lang="ar"] .hero-copy,
[data-lang="ar"] .hero-copy .hero-h,
[data-lang="ar"] .hero-copy .hero-sub { text-align: left; }
[data-lang="ar"] .hero-copy .hero-sub { margin-right: auto; margin-left: 0; }

@media (max-width: 1100px) {
  .hero-split-grid { grid-template-columns: 1fr; }
  .hero-tape--inline { min-height: 280px; }
}

/* ---------------------------------------------------------
   7. PITCH — non-italic quote, width matches stats bar below
   --------------------------------------------------------- */
:root { --pitch-stats-width: 1200px; }
.pitch .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pitch-quote,
.pitch-body {
  width: 100%;
  max-width: var(--pitch-stats-width);
  margin-left: auto;
  margin-right: auto;
}
.pitch-quote {
  font-style: normal !important;
}
.pitch-quote em { font-style: normal !important; }

/* Pitch quote — responsive width override.
   The `<p class="pitch-quote">` element in index.html carries
   inline `width: 1200px; max-width: 1200px; height: 195px;`
   which forces it to overflow the viewport on any window
   narrower than ~1200px. These !important rules beat the
   inline declarations so the paragraph wraps naturally to
   fit its `.container` at all breakpoints — full desktop
   through narrow desktop, tablet, and mobile. Font / color /
   line-height / margin remain untouched. */
.pitch-quote {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
}

/* Stats hero defines the canonical width */
.stats.stats-hero .container,
.stats.stats-hero .stat-row {
  max-width: var(--pitch-stats-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------
   8. CARD HEADINGS — Unna Regular (Edge / Outcome / Reason /
       Office / Value rows)
   --------------------------------------------------------- */
.edge-card h4,
.outcome h4,
.reason h4,
.office h4,
.value-row h4 {
  font-family: 'Unna', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   9. ORDER BOOK VISUAL — bg cohesion + centered foot
   --------------------------------------------------------- */
.book.book--bare {
  background: var(--book-bg, rgba(1,24,33,0.03)) !important;
  border-radius: 16px;
  overflow: hidden;
  padding: 0 !important;
}
[data-theme="dark"] .book.book--bare {
  background: rgba(255,255,255,0.03) !important;
}
.book-main,
.book-chart {
  background: transparent !important;
}
.book-foot {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: 14px 18px !important;
  gap: 16px;
}
.book-foot > div {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  gap: 4px;
}
/* Force matching vertical dividers between all three stat boxes —
   the 1st→2nd divider was visible, the 2nd→3rd was missing. */
.book-foot > div:nth-child(1),
.book-foot > div:nth-child(2) {
  border-inline-end: 1px solid var(--line) !important;
}
.book-foot > div:last-child {
  border-inline-end: 0 !important;
}
.book-foot .lbl,
.book-foot .v {
  text-align: center !important;
  width: 100%;
}
.book-disclaimer {
  text-align: center;
  padding: 0 18px 14px;
}

/* ---------------------------------------------------------
  10. WHAT WE DO — page-head inherits shared .page-head/.container
  styling so it matches Who We Are / Careers / Portal exactly.
   --------------------------------------------------------- */

/* Canonical Muwazana system architecture diagram (Block 1) — built
   from scratch in pure HTML + CSS. The whole diagram lives inside a
   single 440x390 .arch-card; native DOM elements + CSS @keyframes
   provide the pulsing station rings and the clockwise travelling dot
   (via offset-path). Theme colours flow through CSS custom properties
   so the same markup renders correctly on light + dark surfaces. */
.arch-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  --arch-bg: #CDD8DD;
  --arch-card-border: rgba(1, 24, 33, 0.05);
  --arch-line: rgba(4, 74, 102, 0.4);
  --arch-core: #044A66;
  --arch-ring: #82A5B3;
  --arch-text: #011821;
  --arch-num: #044A66;
  --arch-lime: #C5F443;
}
body.dark .arch-diagram {
  --arch-bg: #011821;
  --arch-card-border: rgba(130, 165, 179, 0.1);
  --arch-line: rgba(130, 165, 179, 0.4);
  --arch-core: #A7BFC8;
  --arch-text: #F4F2EA;
  --arch-num: #82A5B3;
}

.arch-card {
  position: relative;
  width: 440px;
  height: 390px;
  max-width: 100%;
  background: var(--arch-bg);
  border: 1px solid var(--arch-card-border);
  border-radius: 20px;
  font-family: 'Unna', 'Georgia', 'Times New Roman', 'Cambria', serif;
  overflow: hidden;
  flex-shrink: 0;
}

/* Loop edges — 4 straight 1px lines with gaps at the corners where
   the rounded turns + station dots sit. The corner curves themselves
   are implied by the travelling dot's offset-path. */
.arch-edge {
  position: absolute;
  background: var(--arch-line);
}
.arch-edge--top    { left: 100px; top: 90px;  width: 240px; height: 1px; }
.arch-edge--right  { left: 360px; top: 110px; width: 1px;   height: 170px; }
.arch-edge--bottom { left: 100px; top: 300px; width: 240px; height: 1px; }
.arch-edge--left   { left: 80px;  top: 110px; width: 1px;   height: 170px; }

/* Station anchors — each station is a zero-size element whose
   children (rings + core) center on it via translate(-50%, -50%). */
.arch-station {
  position: absolute;
  width: 0;
  height: 0;
}
.arch-station--tl { left: 80px;  top: 90px;  }
.arch-station--tr { left: 360px; top: 90px;  }
.arch-station--br { left: 360px; top: 300px; }
.arch-station--bl { left: 80px;  top: 300px; }

.arch-station-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--arch-core);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.arch-station-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 1.5px solid var(--arch-ring);
  border-radius: 50%;
  opacity: 0;
  animation: arch-pulse 2.8s linear infinite;
  will-change: transform, opacity;
}
@keyframes arch-pulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  100% { transform: scale(3.14); opacity: 0;   }
}

/* Stagger the 4 stations by 0 / 0.7 / 1.4 / 2.1s. The second ring of
   each station (.--lag) fires half-cycle (1.4s) after the first to
   create a continuous expanding-pulse feel. */
.arch-station--tl .arch-station-ring        { animation-delay: 0s; }
.arch-station--tl .arch-station-ring--lag   { animation-delay: 1.4s; }
.arch-station--tr .arch-station-ring        { animation-delay: 0.7s; }
.arch-station--tr .arch-station-ring--lag   { animation-delay: 2.1s; }
.arch-station--br .arch-station-ring        { animation-delay: 1.4s; }
.arch-station--br .arch-station-ring--lag   { animation-delay: 0s; }
.arch-station--bl .arch-station-ring        { animation-delay: 2.1s; }
.arch-station--bl .arch-station-ring--lag   { animation-delay: 0.7s; }

/* Travelling lime dot + halo, traversing the loop clockwise.
   offset-path uses the same rounded-rectangle path the SVG diagram
   does; offset-anchor: center keeps the dot's centre on the path. */
.arch-traveller {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(197, 244, 67, 0.6) 0%,
      rgba(197, 244, 67, 0.25) 40%,
      rgba(197, 244, 67, 0) 100%);
  offset-path: path("M 100 90 L 340 90 Q 360 90 360 110 L 360 280 Q 360 300 340 300 L 100 300 Q 80 300 80 280 L 80 110 Q 80 90 100 90 Z");
  offset-anchor: 20px 20px;
  animation: arch-travel 8.96s linear infinite;
  pointer-events: none;
  z-index: 3;
  will-change: offset-distance;
}
.arch-traveller::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: rgba(197, 244, 67, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
@keyframes arch-travel {
  0%   { offset-distance: 0%;   }
  100% { offset-distance: 100%; }
}

/* Corner numbers + labels — absolutely positioned to match the
   canonical SVG coordinates. Numbers (15px) sit on the outer side of
   each label (13px); both align to the first line of the label. */
.arch-num,
.arch-label {
  position: absolute;
  font-family: 'Unna', 'Georgia', 'Times New Roman', 'Cambria', serif;
  font-weight: 400;
  line-height: 1.3;
  pointer-events: none;
}
.arch-num   { font-size: 15px; color: var(--arch-num); }
.arch-label { font-size: 13px; color: var(--arch-text); }

/* Top row: top: 17px so the first baseline lands near y=30 (matches
   the SVG). Number sits in the outer column, label in the inner one. */
.arch-num--tl   { top: 17px; right: 370px; padding-right: 6px; }
.arch-label--tl { top: 17px; left: 80px; }
.arch-num--tr   { top: 17px; left: 370px; padding-left: 6px; }
.arch-label--tr { top: 17px; right: 80px; text-align: right; }

/* Bottom row: top: 336px puts the first baseline near y=349. */
.arch-num--bl   { top: 336px; right: 370px; padding-right: 6px; }
.arch-label--bl { top: 336px; left: 80px; }
.arch-num--br   { top: 336px; left: 370px; padding-left: 6px; }
.arch-label--br { top: 336px; right: 80px; text-align: right; }

/* Reduced-motion: stop the travelling dot + ring pulses so users who
   opt out of animation see the static architecture. */
@media (prefers-reduced-motion: reduce) {
  .arch-traveller,
  .arch-station-ring { animation: none; }
  .arch-station-ring { opacity: 0; }
}

/* Zero out the inherited 0.18em em margin on section h2s so
   "Systems We Build…", "Research Powering Our…", "What Working
   With Us Means.", and "Our Offices." don't render a double
   space between the roman and italic halves. */
.systems-block h2.display em,
.meaning h2.display em,
.offices h2.display em,
.outcomes h2.display em { margin-inline-start: 0 !important; }

/* Equal spacing between subhead → body for both prose blocks */
.systems-prose h3 { margin-top: 0; margin-bottom: 16px; }
.systems-prose h3 + .body-text { margin-top: 0; }
.systems-prose h3:not(:first-child) { margin-top: 32px !important; }

/* ---------------------------------------------------------
  11. LOOP DIAGRAM — clean technical pipeline (overrides old)
   --------------------------------------------------------- */
.loop-board {
  position: relative;
  width: 100%;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 28px !important;
  background: rgba(1,24,33,0.025);
  border: 1px solid rgba(1,24,33,0.10);
  border-radius: 18px;
  overflow: visible !important;
}
[data-theme="dark"] .loop-board {
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.10);
}
.loop-board .loop-svg,
.loop-board .loop-watermark { display: none !important; }

.loop-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.loop-board .loop-node {
  position: static !important;
  width: 100% !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px !important;
  background: rgba(1,24,33,0.04);
  border: 1px solid rgba(1,24,33,0.10);
  border-radius: 12px;
  text-align: left;
}
[data-theme="dark"] .loop-board .loop-node {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}
.loop-board .loop-node-step {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #011821;
  color: #C5F443;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .loop-board .loop-node-step { background: #C5F443; color: #011821; }
.loop-board .loop-node-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
}
.loop-board .loop-node::after {
  content: "";
  width: 22px;
  height: 22px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  justify-self: end;
  margin-right: 6px;
}
.loop-board .loop-node:last-of-type::after {
  border: 0;
  width: 22px;
  height: 22px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px, 1.5px 100%;
  background-position: 0 100%, 0 0;
  background-repeat: no-repeat;
  transform: none;
  opacity: 0.55;
  margin-right: 0;
}
.loop-disclaimer {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  opacity: 0.55;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ---------------------------------------------------------
  12. STATS — Direct Access / 75+ centered cleanly.
  Inherits font-size/weight from the default `.stat .v` so the
  text label matches the count-up numbers in the same row.
   --------------------------------------------------------- */
.stats-systems .stat--label .stat-label-v {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  white-space: nowrap;
}
.stats-systems .stat--label .stat-label-v span { font-size: inherit !important; }
.stats-systems .stat { display: flex; flex-direction: column; align-items: center; }
.stats-systems .stat .l { text-align: center; }

/* ---------------------------------------------------------
  13. RESEARCH — two-column side-by-side
   --------------------------------------------------------- */
.research-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px;
  align-items: start;
}
.research-cols .systems-prose {
  display: block !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.research-cols .systems-prose h3 { margin-top: 0 !important; margin-bottom: 16px; }
@media (max-width: 900px) {
  .research-cols { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------
  14. CAREERS — Office cards equal height to header block
   --------------------------------------------------------- */
.offices .offices-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: stretch;
}
.offices .offices-intro { align-self: start; }
.offices .offices-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 14px;
  height: 100%;
}
.offices .office {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .offices .offices-head { grid-template-columns: 1fr; }
  .offices .offices-list { flex-direction: column; }
}

/* ---------------------------------------------------------
  15. PORTAL — Search aligned with listings; filters below
   --------------------------------------------------------- */
#portal .portal-toolbar {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
  grid-auto-flow: column !important;
}
#portal .portal-sidebar {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: static !important;
}
#portal .portal-results {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  margin-top: 0 !important;
}
#portal .portal-search,
#portal .portal-filters {
  background: var(--paper, #fbfaf7) !important;
}
[data-theme="dark"] #portal .portal-search,
[data-theme="dark"] #portal .portal-filters {
  background: rgba(255,255,255,0.08) !important;
}
#portal .portal-search {
  grid-column: auto !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px;
  border: 1px solid rgba(1,24,33,0.14);
  border-radius: 12px;
  background: rgba(1,24,33,0.02);
}
[data-theme="dark"] #portal .portal-search {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.16);
}
#portal .portal-search input {
  border: 0; background: transparent; width: 100%; outline: none;
  font: inherit; color: #011821 !important;
}
[data-theme="dark"] #portal .portal-search input { color: #FBFAF7 !important; }
#portal .portal-search input::placeholder { color: rgba(1,24,33,0.5); }
[data-theme="dark"] #portal .portal-search input::placeholder { color: rgba(255,255,255,0.5); }
#portal .portal-filters {
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
  border: 1px solid rgba(1,24,33,0.10) !important;
  border-radius: 12px;
  padding: 4px 0 !important;
  margin: 0 !important;
}
[data-theme="dark"] #portal .portal-filters {
  border-color: rgba(255,255,255,0.10) !important;
}
#portal .portal-results {
  grid-column: auto !important;
  margin-top: 0 !important;
}

/* Collapsible Function / Location sections */
.filter-collapse {
  border-bottom: 1px solid rgba(1,24,33,0.08);
}
[data-theme="dark"] .filter-collapse { border-bottom-color: rgba(255,255,255,0.08); }
.filter-collapse:last-child { border-bottom: 0; }

.filter-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}
.filter-collapse > summary::-webkit-details-marker { display: none; }
.filter-collapse > summary .collapse-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block;
  color: currentColor;
  opacity: 0.85;
}
.filter-collapse > summary .collapse-icon::before,
.filter-collapse > summary .collapse-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 180ms ease, opacity 180ms ease;
}
.filter-collapse > summary .collapse-icon::before {
  top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%);
}
.filter-collapse > summary .collapse-icon::after {
  left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%);
}
.filter-collapse[open] > summary .collapse-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px 14px;
}
.filter-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 8px !important;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  transition: background 140ms;
  border: 0 !important;
  background: transparent !important;
  width: auto !important;
  text-align: left;
}
.filter-check:hover {
  background: rgba(1,24,33,0.04);
}
[data-theme="dark"] .filter-check:hover { background: rgba(255,255,255,0.04); }
.filter-check input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid rgba(1,24,33,0.35);
  border-radius: 4px;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
[data-theme="dark"] .filter-check input[type="checkbox"] {
  border-color: rgba(255,255,255,0.4);
}
.filter-check input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 3px;
  background: transparent;
}
.filter-check input[type="checkbox"]:checked {
  background: #011821;
  border-color: #011821;
}
[data-theme="dark"] .filter-check input[type="checkbox"]:checked {
  background: #C2DB2E;
  border-color: #C2DB2E;
}
.filter-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border-right: 1.8px solid #C5F443;
  border-bottom: 1.8px solid #C5F443;
  transform: rotate(45deg);
}
[data-theme="dark"] .filter-check input[type="checkbox"]:checked::after {
  border-color: #011821;
}

/* Hide the old pill style when inside a collapse */
#portal .filter-options button.portal-filter {
  display: none !important;
}
#portal .filter-options input.portal-filter,
#portal .filter-options input[type="checkbox"].portal-filter {
  display: inline-block !important;
  appearance: none;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid rgba(1,24,33,0.35);
  border-radius: 4px;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  padding: 0 !important;
}
[data-theme="dark"] #portal .filter-options input.portal-filter {
  border-color: rgba(255,255,255,0.4);
}
#portal .filter-options input.portal-filter:checked {
  background: #C2DB2E !important;
  border-color: #C2DB2E !important;
}
/* Selected state is indicated by fill colour only — no tick mark in
   either theme. */
#portal .filter-options input.portal-filter:checked::after {
  content: none !important;
}
#portal .filter-options .portal-filter::before { display: none !important; }

@media (max-width: 900px) {
  #portal .portal-toolbar { grid-template-columns: 1fr !important; }
  #portal .portal-sidebar { position: static; }
}

/* ====================================================================
   ===  ROUND 4 REVISIONS  ============================================
   ==================================================================== */

/* ---------------------------------------------------------
  16. NAV CTA — no arrow variant
   --------------------------------------------------------- */
.nav-cta--noarrow { padding-right: 18px !important; }
.nav-cta--noarrow .arrow { display: none !important; }

/* ---------------------------------------------------------
  17. HERO v2 — left-aligned bigger headline, taller visual,
                 sub-head spans full width below.
   --------------------------------------------------------- */
.hero--v2 .hero-split-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 56px;
  row-gap: 28px;
  align-items: stretch !important;
}
.hero--v2 .hero-copy {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero--v2 .hero-tape--inline {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: stretch;
  height: 100% !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
}
.hero--v2 .hero-tape--inline .tape-frame {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.hero--v2 .hero-tape--inline .tape-body {
  flex: 1 1 auto;
}
.hero--v2 .hero-h {
  text-align: left !important;
  font-size: clamp(72px, 9.5vw, 148px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.025em;
  margin: 0 !important;
}
.hero--v2 .hero-h .line { display: block; text-align: left !important; }
.hero--v2 .hero-h .line span,
.hero--v2 .hero-h .line em {
  font-size: inherit !important;
  text-align: left !important;
  font-style: normal;
}
.hero--v2 .hero-h .line em { font-style: italic; }

.hero-sub--full,
.hero-copy .hero-sub.hero-sub--full,
#home .hero-copy .hero-sub,
#home .hero-copy .hero-sub--full {
  grid-column: 1 / -1 !important;
  grid-row: 2 / 3 !important;
  width: 100% !important;
  max-width: 1200px !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 32px 0 0 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  align-self: flex-start !important;
  opacity: 0.78;
}
[data-theme="dark"] .hero-sub--full { opacity: 0.82; }
[data-lang="ar"] .hero-sub--full { text-align: right !important; }

/* Tighter spacing after the hero */
.hero--v2 { padding-bottom: 32px !important; }
.hero--v2 + section { padding-top: 56px !important; }

/* Compact pitch body */
.pitch-body, .pitch .body-text, .lede-body {
  font-size: 17px !important;
  line-height: 1.6 !important;
}

@media (max-width: 900px) {
  .hero--v2 .hero-split-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }
  .hero--v2 .hero-copy   { grid-column: 1 / -1; grid-row: 1; }
  .hero--v2 .hero-tape--inline { grid-column: 1 / -1; grid-row: 2; min-height: 220px; }
  .hero-sub--full { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------------------------------------------------------
  18. WHAT WE DO — page-head & headline overlap fixes
   --------------------------------------------------------- */
.page-route[data-route="what"] .page-head,
section.page-route[data-route="what"] .page-head {
  text-align: left !important;
}
.page-route[data-route="what"] .page-head h1 {
  text-align: left !important;
  line-height: 1.0 !important;
  padding-bottom: 0.08em;
}
.page-route[data-route="what"] .page-head .lede {
  text-align: left !important;
  max-width: 720px;
  margin-left: 0 !important;
}
/* Performance / Edge section: don't crowd subhead */
.page-route[data-route="what"] .systems-block h2 + .lede,
.page-route[data-route="what"] .systems-block .display + .lede {
  margin-top: 18px !important;
  margin-bottom: 28px !important;
}
.page-route[data-route="what"] .systems-block h2 {
  line-height: 1.05 !important;
  padding-bottom: 0.04em;
}

/* ---------------------------------------------------------
  19. LOOP DIAGRAM v2 — no numbers, logo center, animated
   --------------------------------------------------------- */
.loop-board {
  /* override list layout from rule 11 */
  display: block !important;
  position: relative;
  aspect-ratio: 16 / 11 !important;
  height: auto !important;
  min-height: 380px !important;
  padding: 0 !important;
  background: rgba(1,24,33,0.045) !important;
  border: 1px solid rgba(1,24,33,0.08) !important;
  border-radius: 20px;
  overflow: hidden !important;
}
[data-theme="dark"] .loop-board {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.loop-board .loop-svg,
.loop-board .loop-watermark { display: block !important; }
.loop-board .loop-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.loop-board .loop-watermark {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 110px !important;
  height: auto !important;
  opacity: 0.95 !important;
  z-index: 2;
}
.loop-board .loop-node-step { display: none !important; }
.loop-board .loop-node {
  position: absolute !important;
  width: auto !important;
  max-width: 240px;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 14px 18px !important;
  background: #fff !important;
  border: 1px solid rgba(1,24,33,0.12) !important;
  border-radius: 12px;
  box-shadow: 0 8px 24px -16px rgba(1,24,33,0.25);
  z-index: 3;
}
[data-theme="dark"] .loop-board .loop-node {
  background: #0c2229 !important;
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.6);
}
.loop-board .loop-node-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
}
.loop-board .loop-node::after { display: none !important; }
/* corner positions */
.loop-board .loop-node--tl { top: 8%;    left: 4%;  transform: none !important; }
.loop-board .loop-node--tr { top: 8%;    right: 4%; transform: none !important; }
.loop-board .loop-node--bl { bottom: 8%; left: 4%;  transform: none !important; top: auto !important; }
.loop-board .loop-node--br { bottom: 8%; right: 4%; transform: none !important; top: auto !important; }

/* Animated dot traveling the path */
.loop-board .loop-path-anim {
  fill: none;
  stroke: rgba(1,24,33,0.22);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}
[data-theme="dark"] .loop-board .loop-path-anim { stroke: rgba(255,255,255,0.22); }
.loop-board .loop-dot {
  fill: #011821;
}
[data-theme="dark"] .loop-board .loop-dot { fill: #C5F443; }

/* ---------------------------------------------------------
  20. STATS — let `stats-systems` inherit the default `.stat .v`
  scale and `.stat .l` styling so the What We Do stats match the
  landing page exactly.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
  21. RESEARCH — top-align prose body
   --------------------------------------------------------- */
.research-cols .systems-prose,
.systems-block.alt .systems-prose {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* ---------------------------------------------------------
  22. CAREERS — "Our Offices" full title (already in HTML);
                ensure both nodes render
   --------------------------------------------------------- */
.offices .offices-intro h2 em { font-style: italic; }

/* ---------------------------------------------------------
  23. SECTION BORDERS — reset (no bottom border)
   --------------------------------------------------------- */
.section-bordered { border-bottom: none !important; }
[data-theme="dark"] .section-bordered { border-bottom: none !important; }

/* ---------------------------------------------------------
  24. HERO TAPE — faded left/right edges so the visual blends
      softly into the page background
   --------------------------------------------------------- */
.hero-tape,
.hero-tape--inline,
.hero-tape .tape-frame,
.hero-tape .tape-body {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* ---------------------------------------------------------
  25. FOOTER — single-row layout: brand · nav · controls.
      Removes the "Follow Us" label and stacks; LinkedIn,
      Email, Language switch, and Theme toggle sit inline.
   --------------------------------------------------------- */
.footer {
  height: 160px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
.footer > .container {
  height: 160px !important;
  width: 1240px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.footer .footer-grid {
  height: 160px !important;
  width: 1240px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px;
  grid-template-columns: none !important;
  border-bottom: none !important;
  text-align: left !important;
  box-sizing: border-box;
}
.footer .footer-nav {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 28px;
  flex-wrap: nowrap;
}
.footer .footer-nav a {
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
/* Controls cluster: LinkedIn · Email · Language · Theme — one row */
.footer .footer-follow {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  padding: 0 !important;
  margin: 0 !important;
}
.footer .footer-follow .lbl { display: none !important; }
.footer .footer-icons {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer .footer-linkedin-stack,
.footer .footer-email-stack {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  padding: 0 !important;
  margin: 0 !important;
}
.footer .footer-lang { margin: 0 !important; }
.footer .footer-bottom { display: none !important; }
@media (max-width: 1280px) {
  .footer > .container,
  .footer .footer-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ---------------------------------------------------------
  26. TECHFIELD CANVAS (What We Do) — abstract motion graphic
   --------------------------------------------------------- */
/* Slot wrapper: exactly 540px tall to match the prose column to its left,
   full width of the grid cell. The ::after overlay paints the page
   background colour into the outermost 20px of each side so the visual
   dissolves symmetrically into the page on all four edges (no hard rect). */
.arch-diagram .techfield {
  position: relative;
  width: 100%;
  height: 540px;
  isolation: isolate;
}
.arch-diagram .techfield-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* `object-fit: cover` semantics: the canvas fills its slot at the slot's
     own aspect ratio (the drawing reflows responsively, not stretched). */
  object-fit: cover;
}
.arch-diagram .techfield::after {
  content: none;
}

/* Landing-page hero — fix height at 830.531px so the section
   matches Who We Are / What We Do / Careers page-heads exactly,
   and is invariant under browser zoom. The default .hero rule
   sets min-height: 92vh which recalculates with zoom; override
   with a fixed pixel value here so the section stays stable. */
#home .hero {
  min-height: 730px !important;
  height: 730px !important;
}
/* Inner content container — locked to 1200px wide with 40px L/R padding
   (visible content area = 1120px). id-scoped + !important so no inline
   style on the wrapper can collapse or widen it. */
#home .hero .container.hero-split-grid {
  width: 1200px !important;
  max-width: 1200px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* Headline font-size override — beats the existing
   .hero.hero--split .hero-h !important rule by id-scoped specificity.
   The second rule forces each `.line` to inherit so inline font-size
   declarations on .line spans (left over from past edits) don't win. */
#home .hero .hero-h,
#home .hero--v2 .hero-h {
  font-size: 95px !important;
}
#home .hero--v2 .hero-h .line {
  font-size: inherit !important;
  width: auto !important;
  max-width: none !important;
}

/* Page-head H1 (Who We Are / What We Do / Careers / Portal / Apply)
   matches the landing-hero "Advancing the capital markets of tomorrow."
   default font-size (95px). Uses a clamp() so the size still scales
   down on narrower viewports; the existing mobile-breakpoint .h-xl
   override in this file (and in mobile.css) is intentionally left
   intact so the established fluid scaling on small screens is
   preserved. The selector is more specific than the base .h-xl rule
   in style.css so no !important is needed at desktop widths. */
.page-head .h-xl {
  font-size: clamp(40px, 9vw, 95px);
}

/* Neutralize the inline `font-size: 85px` declarations sitting on
   individual page-head headline child spans/ems so they inherit the
   parent .page-head .h-xl clamp() above instead of fighting it.
   English-only: the [dir="rtl"] guard keeps this from clashing with
   the Arabic sizing rule in ar-overrides.css. */
:not([dir="rtl"]) .page-head .h-xl .line > span,
:not([dir="rtl"]) .page-head .h-xl .line > em {
  font-size: inherit !important;
}

/* English-only line-height: standardize the home hero headline and
   every .page-head .h-xl headline (Who We Are / What We Do /
   Careers / Portal / Apply) to line-height: 1.25 across the H1, each
   .line, and every child span/em. The [dir="rtl"] guard keeps this
   from touching the Arabic version, which sets its own 1.25 via
   ar-overrides.css. !important + the extra class added by the :not()
   qualifier (specificity 0,3,0 for page-head selectors; 1,3,0 for
   the home hero) is enough to beat every existing line-height rule
   audited on these selectors, including the mobile-media-query
   declarations in revisions.css and mobile.css. */
:not([dir="rtl"]) .page-head .h-xl,
:not([dir="rtl"]) .page-head .h-xl .line,
:not([dir="rtl"]) .page-head .h-xl .line > span,
:not([dir="rtl"]) .page-head .h-xl .line > em,
:not([dir="rtl"]) #home .hero .hero-h,
:not([dir="rtl"]) #home .hero .hero-h .line,
:not([dir="rtl"]) #home .hero .hero-h .line > span,
:not([dir="rtl"]) #home .hero .hero-h .line > em {
  line-height: 1.25 !important;
}

/* ---------------------------------------------------------
  26b. SITEWIDE — last section above footer
   Every page's lowest content section settles into the footer
   with a fixed 50px bottom padding so the rhythm is consistent
   regardless of which section type lives there.
   --------------------------------------------------------- */
.page > section:last-of-type {
  padding-bottom: 50px !important;
}

/* Landing-page "Our Edge" section — explicitly 70px top, 50px bottom.
   Higher specificity (id chain) plus !important wins over both the
   global .hero/.section rule and any inline padding that might creep
   back in from the editor. */
#home .edge.section-bordered {
  padding-top: 70px !important;
  padding-bottom: 50px !important;
}

/* ---------------------------------------------------------
  28. DARK-MODE FIXES — companions for body.dark
   The app.js theme toggle sets body.dark (not data-theme="dark"),
   so several existing [data-theme="dark"] rules in the cascade
   never fire. The rules below match what the app actually emits.
   --------------------------------------------------------- */

/* (a) Logo swap — force the light logo hidden + dark logo visible whenever
       body.dark is active, regardless of which container the <img> lives in. */
body.dark img.brand-logo.brand-logo-light { display: none !important; }
body.dark img.brand-logo.brand-logo-dark  { display: inline-block !important; }

/* (b) Landing hero headline — inline `color: #011821` on the H1 doesn't
       react to theme. Force the dark-mode ink color across the H1 and
       every child span/em (which inherit but were getting masked by the
       inline declaration on the parent). */
body.dark #home .hero .hero-h,
body.dark #home .hero .hero-h .line,
body.dark #home .hero .hero-h .line > span,
body.dark #home .hero .hero-h .line > em {
  color: #ECEAE2 !important;
}
/* "tomorrow" is the lone <em> in the third line — accent it in dark mode. */
body.dark #home .hero .hero-h .line > em {
  color: #6CC0DD !important;
}

/* (c) Careers portal — search bar in dark mode: transparent fill with a
       light ink border so it reads as an outlined input, and a slightly
       lighter placeholder for legibility. */
body.dark #portal .portal-search {
  background: transparent !important;
  border-color: #ECEAE2 !important;
}
body.dark #portal .portal-search input,
body.dark #portal .portal-search svg {
  color: #ECEAE2 !important;
}
body.dark #portal .portal-search input::placeholder {
  color: rgba(236, 234, 226, 0.65) !important;
}

/* (d) Filter checkbox circles — border tinted toward the dark-mode ink
       so they're clearly visible against the page surface. */
body.dark #portal .filter-options input.portal-filter,
body.dark #portal .filter-options input[type="checkbox"].portal-filter {
  border-color: #ECEAE2 !important;
}
body.dark #portal .filter-options input.portal-filter:checked,
body.dark #portal .filter-options input[type="checkbox"].portal-filter:checked {
  background: #C2DB2E !important;
  border-color: #C2DB2E !important;
}

/* ---------------------------------------------------------
  27. FOOTER NAV — active page state, mirrors top nav
   --------------------------------------------------------- */
.footer .footer-nav a {
  position: relative;
  transition: color 0.2s ease;
}
.footer .footer-nav a.is-active {
  color: var(--ink) !important;
  font-weight: 600;
}
body.dark .footer .footer-nav a.is-active {
  color: var(--ink) !important;
}
.footer .footer-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent, #C5F443);
  border-radius: 2px;
}



/* ============================================================
   29. MOBILE RESPONSIVE SWEEP — ≤ 1023.98px
   Stacks all multi-column layouts, collapses nav to hamburger,
   tightens horizontal padding, scales type, hides decorative
   chrome where it crowds. Engages on phones AND resized
   desktop windows so layout reflows fluidly across widths.
   Authored as the *final* declaration in this file so it
   wins over earlier inline grid / width overrides in the
   markup.
   ============================================================ */
.nav-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-left: auto;
  color: var(--ink);
}
.nav-hamburger-bar {
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.nav-open #navHamburger .nav-hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.nav-open #navHamburger .nav-hamburger-bar:nth-child(2) {
  opacity: 0;
}
body.nav-open #navHamburger .nav-hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1023.98px) {
  /* --- Horizontal padding: 16px ------------------------------- */
  .container,
  #home .hero .container.hero-split-grid,
  .page > section .container,
  .footer .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* --- Topbar: shrink, show hamburger, hide nav-links ---------- */
  .topbar {
    inset-inline: 8px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .nav-hamburger { display: inline-flex !important; }
  .topbar .nav-links {
    display: none !important;
  }
  body.nav-open .topbar .nav-links {
    display: flex !important;
    position: fixed;
    top: calc(56px + 22px);
    left: 8px;
    right: 8px;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px !important;
    margin: 0 !important;
    box-shadow: var(--shadow-2, 0 14px 40px -16px rgba(1,24,33,0.22));
    z-index: 70;
  }
  body.nav-open .topbar .nav-links .nav-link {
    padding: 14px 16px !important;
    font-size: 15px !important;
    min-height: 44px;
  }

  /* Top-right: keep CTA + lang + theme; shrink CTA copy if needed */
  .top-right { gap: 6px !important; flex-wrap: nowrap !important; }
  .top-right .nav-cta {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 36px;
  }
  .topbar .brand-logo { height: 22px !important; width: auto !important; }

  /* --- Type scale (cap headlines so they don't overflow) ------ */
  .h-xl { font-size: clamp(36px, 9.5vw, 56px) !important; line-height: 1.04 !important; max-width: none !important; letter-spacing: -0.025em !important; }
  .h-lg { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.06 !important; }
  .h-md { font-size: clamp(24px, 6.5vw, 34px) !important; line-height: 1.1 !important; }
  .display, .lede, .pitch-quote { max-width: none !important; }
  .pitch-quote { font-size: clamp(22px, 5.4vw, 32px) !important; line-height: 1.25 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
  .lede, .pitch-body, .edge-card p, .outcome p, .value-row p, .office p { font-size: 15px !important; line-height: 1.55 !important; }

  /* --- Sections: lighter vertical rhythm ---------------------- */
  .page > section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .page > section:last-of-type { padding-bottom: 40px !important; }
  .page-head { padding-bottom: 24px !important; }

  /* --- HOME hero: stack copy above tape; release the 730px lock */
  #home .hero {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 96px !important;
    padding-bottom: 32px !important;
  }
  #home .hero .container.hero-split-grid,
  .hero--v2 .hero-split-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 24px !important;
  }
  .hero--v2 .hero-copy { grid-column: 1 / -1 !important; grid-row: 1 !important; padding: 0 !important; width: 100% !important; height: auto !important; }
  .hero--v2 .hero-tape--inline { grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 220px !important; height: auto !important; width: 100% !important; }
  .hero--v2 .hero-tape--inline .tape-frame { width: 100% !important; }
  #home .hero--v2 .hero-h,
  #home .hero .hero-h { font-size: clamp(38px, 10vw, 60px) !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; max-width: 100% !important; }
  #home .hero--v2 .hero-h .line,
  #home .hero .hero-h .line { font-size: inherit !important; width: auto !important; max-width: 100% !important; height: auto !important; }
  #home .hero-sub--full { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; max-width: 100% !important; font-size: 15px !important; line-height: 1.55 !important; }
  /* "Advancing the capital markets of tomorrow" headline inner spans */
  #home .hero .hero-h .line > span,
  #home .hero .hero-h .line > em { font-size: inherit !important; }

  /* Pitch & stats */
  .pitch { height: auto !important; padding: 40px 0 32px !important; }
  .pitch .container { padding-inline: 16px !important; }
  .pitch-quote { font-family: 'Unna', serif !important; }
  .stat-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .stat { padding: 18px 8px !important; border-block-end: 1px solid var(--line) !important; border-inline-end: 0 !important; min-width: 0 !important; }
  .stat .v { font-size: clamp(28px, 8vw, 40px) !important; }
  .stat .l { width: auto !important; font-size: 12px !important; }

  /* Edge cards */
  #home .edge.section-bordered { padding-top: 56px !important; padding-bottom: 40px !important; }
  .edge-stack, .edge-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .edge-card { min-height: auto !important; padding: 24px 20px !important; }
  .edge-card h4 { font-size: 18px !important; line-height: 1.2 !important; }

  /* --- WHO WE ARE ------------------------------------------- */
  /* Order book: stack text + visual */
  .book-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* The order book itself is dense data; keep it but cap width. */
  .book { max-width: 100% !important; overflow-x: auto !important; }
  .book-foot { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .outcomes-list { grid-template-columns: 1fr !important; gap: 12px !important; }
  .outcome { padding: 22px 20px !important; }
  .value-row { grid-template-columns: 1fr !important; gap: 10px !important; padding: 22px 16px !important; }

  /* --- WHAT WE DO ------------------------------------------- */
  .systems-grid,
  .systems-grid.reverse { grid-template-columns: 1fr !important; gap: 28px !important; }
  .systems-prose { width: 100% !important; padding: 0 !important; }
  .arch-diagram { width: 100% !important; }
  .arch-diagram .techfield { width: 100% !important; height: 360px !important; max-width: 100% !important; }
  /* Two-column "From Design to Deployment" / "Turning Complexity Into Edge" */
  .research-cols { grid-template-columns: 1fr !important; gap: 28px !important; }
  .systems-block .container,
  .systems-block.alt .container { padding-inline: 16px !important; }

  /* --- CAREERS ---------------------------------------------- */
  .meaning-flow,
  .meaning-cols { grid-template-columns: 1fr !important; gap: 16px !important; }
  .meaning-flow .reason.r-1,
  .meaning-flow .reason.r-2,
  .meaning-flow .reason.r-3,
  .meaning-flow .reason.r-4 { grid-column: 1 / -1 !important; min-height: 0 !important; padding: 22px 20px !important; }
  .offices-head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .offices-list { grid-template-columns: 1fr !important; gap: 12px !important; flex-direction: column !important; }
  .office { padding: 22px 20px !important; }
  .career-start-row { grid-template-columns: 1fr !important; gap: 20px !important; }
  .cta-card { grid-template-columns: 1fr !important; padding: 32px 24px !important; gap: 20px !important; }

  /* --- CAREERS PORTAL: filter sidebar above results --------- */
  .portal-toolbar { grid-template-columns: 1fr !important; gap: 16px !important; }
  .portal-sidebar { position: static !important; width: 100% !important; }
  #portal .portal-search,
  #portal .portal-filters { width: 100% !important; grid-column: 1 / -1 !important; }
  #portal .portal-search { min-height: 44px !important; }
  /* Show Filters toggle: details/summary uses native disclosure;
     ensure summary is tappable & full-width */
  #portal .filter-collapse summary { min-height: 44px !important; padding: 10px 0 !important; }
  .role-card { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* --- FOOTER ----------------------------------------------- */
  .footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: left !important;
    width: 100% !important;
    height: auto !important;
    padding: 24px 0 !important;
  }
  .footer .footer-nav { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  .footer .footer-nav a { min-height: 44px; display: inline-flex !important; align-items: center; }
  .footer-follow,
  .footer-icons { justify-content: flex-start !important; flex-wrap: wrap !important; }
  .footer-bottom { flex-direction: column !important; gap: 10px !important; text-align: left !important; }

  /* --- Tap targets: 44px minimum for buttons & toggles ----- */
  .btn, .btn-primary, .nav-cta,
  .toggle-group button, .theme-btn,
  .portal-filter, .filter-check,
  #portal .filter-options input.portal-filter { min-height: 44px !important; }
  .filter-check { padding: 10px 0 !important; }

  /* --- Hide decorative chrome that's noisy at phone size --- */
  .field-aurora { opacity: 0.25 !important; }
  .loop-disclaimer { display: none !important; }
}

@media (max-width: 479.98px) {
  /* Order book has 4 columns of dense numeric data — it becomes
     unreadable on phones. Hide it cleanly at the very narrowest. */
  .book { display: none !important; }
  .book-section .container::after {
    content: attr(data-mobile-fallback);
  }
}

/* Global guard: never allow horizontal overflow at any breakpoint */
html, body { overflow-x: hidden !important; max-width: 100% !important; }