/* ==========================================================================
   QENTRA — site stylesheet
   Palette & type follow the QENTRA brand boards (Logo System board, 05).
   Logical properties are used throughout so Arabic (RTL) works without a
   separate stylesheet.
   ========================================================================== */

:root {
  /* --- Brand palette (board 05) --------------------------------------- */
  --charcoal:      #1a1a1a;
  --charcoal-soft: #232220;
  --ivory:         #f3eee4;
  --beige:         #e6dbca;
  --beige-deep:    #d9cbb4;
  --bronze:        #b8863b;
  --bronze-deep:   #8c6329;
  --gold:          #ebcf8b;
  --white:         #fffdf9;

  /* --- Derived tones --------------------------------------------------- */
  /* Zellige green — the strongest trust signal in the Moroccan market.
     Functional only: entry tier, confirmations, "yes" states. Never decorative,
     never competing with bronze for structure. */
  --green:      #1f4d3d;
  --green-lt:   #2e6b56;
  --green-pale: rgba(31, 77, 61, .07);

  --muted:      #6a6259;
  --muted-2:    #5e574f;
  --line:       rgba(184, 134, 59, .22);
  --line-soft:  rgba(26, 26, 26, .08);
  --on-dark:    #d8d0c3;
  --on-dark-2:  #bcb4a8;

  /* --- Type ------------------------------------------------------------ */
  /* Cinzel stays on the wordmark — it is part of the logo, not the type system.
     Fraunces carries the headlines: a variable serif whose SOFT and WONK axes
     give it a made-by-hand irregularity that answers the painted mark. Archivo
     underneath is sturdy and slightly industrial — the operator half. */
  --font-wordmark: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:     'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Layout ---------------------------------------------------------- */
  --shell:  min(1220px, calc(100% - 40px));
  --radius: 30px;
  --shadow:      0 26px 80px rgba(31, 25, 18, .11);
  --shadow-soft: 0 16px 46px rgba(31, 25, 18, .07);
  --ease:  cubic-bezier(.16, 1, .3, 1);
  --ease2: cubic-bezier(.22, .8, .2, 1);

  --mx: 50vw;
  --my: 35vh;
  --scroll: 0;
}

/* Arabic swaps the Latin display faces for Arabic ones. */
:root:lang(ar), [dir="rtl"] {
  /* Cairo carries the same weight and warmth as Fraunces without pretending
     to be a Latin serif; Plex Arabic matches Archivo's sturdiness. */
  --font-display: 'Cairo', 'Noto Kufi Arabic', Georgia, serif;
  --font-serif:   'Cairo', 'Noto Kufi Arabic', Georgia, serif;
  --font-sans:    'IBM Plex Sans Arabic', 'Noto Sans Arabic', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--charcoal);
}

body {
  margin: 0;
  color: var(--charcoal);
  font-family: var(--font-sans);
  line-height: 1.55;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 7%, rgba(184, 134, 59, .10), transparent 24%),
    linear-gradient(180deg, #efe6db 0%, var(--ivory) 42%, #ede3d4 100%);
}

/* Paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(0deg,  rgba(39, 33, 26, .03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(39, 33, 26, .02) 0 1px, transparent 1px 4px);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select, a { font: inherit; -webkit-tap-highlight-color: transparent; }

.shell { width: var(--shell); margin-inline: auto; }

.skip-link {
  position: fixed;
  inset-inline-start: 14px;
  top: -90px;
  z-index: 1000;
  background: var(--charcoal);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 0 0 12px 12px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

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

.progress {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  width: calc(var(--scroll) * 1%);
  height: 2px;
  z-index: 1000;
  background: linear-gradient(90deg, var(--bronze-deep), var(--gold));
  box-shadow: 0 0 18px rgba(235, 207, 139, .35);
}

.ambient {
  position: fixed;
  inset-inline-start: var(--mx);
  top: var(--my);
  width: 500px; height: 500px;
  margin: -250px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(184, 134, 59, .12), rgba(184, 134, 59, .02) 34%, transparent 68%);
}

/* --- Icons --------------------------------------------------------------- */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.q-icon {
  width: 30px; height: 30px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.q-icon .fill-dot { fill: currentColor; stroke: none; }
/* Directional arrows mirror in RTL; symbolic icons must not. */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

/* --- Logo lockup ---------------------------------------------------------
   The painted Q *is* the Q of QENTRA, so the lockup never mirrors — it is
   pinned to LTR even on Arabic pages.
   ------------------------------------------------------------------------ */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  direction: ltr;
}
.lockup-q { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.lockup-word {
  font-family: var(--font-wordmark);
  letter-spacing: .18em;
  font-weight: 600;
  line-height: 1;
  font-size: 1.08rem;
}
/* Arabic pages keep the Latin wordmark — brand names are not translated. */
[dir="rtl"] .lockup-word { font-family: 'Cinzel', Georgia, serif; }

.lockup--large { gap: 12px; }
.lockup--large .lockup-q { width: 84px; height: 84px; }
.lockup--large .lockup-word { font-size: clamp(1.9rem, 4.8vw, 3.6rem); letter-spacing: .22em; }
.lockup--footer .lockup-q { width: 28px; height: 28px; }
.lockup--footer .lockup-word { font-size: .88rem; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 238, 228, .76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(243, 238, 228, .94);
  border-color: var(--line-soft);
  box-shadow: 0 10px 40px rgba(30, 25, 20, .05);
}
.header-inner {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header-tools { display: flex; align-items: center; gap: 14px; }

/* Nav items are buttons, not links with an underline: each sits in its own
   pill so the current section can be filled rather than merely underlined. */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > a:not(.btn) {
  position: relative;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .705rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #5a5249;
  background: rgba(255, 255, 255, .34);
  white-space: nowrap;
  transition: background .28s ease, border-color .28s ease, color .28s ease,
              transform .28s var(--ease), box-shadow .28s ease;
}
.main-nav > a:not(.btn):hover {
  background: rgba(255, 255, 255, .82);
  border-color: var(--line);
  color: var(--charcoal);
  transform: translateY(-1px);
}
/* The section you are actually in is filled — unmistakable at a glance. */
.main-nav > a:not(.btn).active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(26, 26, 26, .16);
}
.main-nav > a:not(.btn).active:hover { background: #2b2926; border-color: #2b2926; }
[dir="rtl"] .main-nav > a:not(.btn) { text-transform: none; letter-spacing: 0; font-size: .85rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  place-items: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 24px; height: 1px;
  background: var(--charcoal);
  transition: .3s var(--ease);
}
.nav-toggle span { margin: 6px 0; }
body.menu-open .nav-toggle::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span    { opacity: 0; }
body.menu-open .nav-toggle::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Language switcher --------------------------------------------------- */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .4);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5e5349;
  transition: .25s var(--ease);
}
.lang-btn:hover { background: rgba(255, 255, 255, .72); border-color: var(--bronze); }
.lang-btn .chev { width: 9px; height: 9px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); }

.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 9px);
  min-width: 168px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(40, 30, 18, .13);
  padding: 6px;
  display: none;
  z-index: 120;
}
.lang-menu.open { display: block; }
.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 11px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: start;
  font-size: .88rem;
  color: var(--charcoal);
  transition: background .2s;
}
.lang-menu button:hover { background: rgba(184, 134, 59, .09); }
.lang-menu button[aria-current="true"] { font-weight: 700; color: var(--bronze-deep); }
.lang-menu button[aria-current="true"]::after { content: "✦"; color: var(--bronze); font-size: .7em; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 19px;
  border-radius: 999px;
  border: 1px solid rgba(26, 26, 26, .15);
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, .24) 50%, transparent 82%);
  transform: translateX(-145%);
  transition: transform .75s var(--ease);
}
.btn:hover::before { transform: translateX(145%); }
.btn:hover { transform: translateY(-2px); }
.btn--dark  { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); box-shadow: 0 12px 28px rgba(26, 26, 26, .12); }
.btn--light { background: var(--ivory); color: var(--charcoal); border-color: rgba(255, 255, 255, .6); }
.btn--ghost { background: rgba(255, 255, 255, .24); }
.btn .arrow::after { content: "→"; }
[dir="rtl"] .btn .arrow::after { content: "←"; }

/* --- Section furniture --------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .71rem;
  font-weight: 800;
  color: var(--bronze-deep);
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--bronze); flex: 0 0 auto; }
[dir="rtl"] .eyebrow { text-transform: none; letter-spacing: 0; font-size: .82rem; }

.section-head {
  display: grid;
  grid-template-columns: .83fr 1.17fr;
  gap: 40px;
  align-items: start;
  margin-bottom: clamp(18px, 3vh, 30px);
}
.section-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -.04em;
  font-size: clamp(1.75rem, min(3.4vw, 5.4vh), 3.1rem);
  line-height: 1.04;
}
[dir="rtl"] .section-title { letter-spacing: 0; line-height: 1.25; }
.section-head p { margin: 8px 0 0; color: var(--muted-2); font-size: 1.06rem; max-width: 680px; }

section { padding: clamp(38px, 6.1vh, 68px) 0; }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: clamp(12px, 2vh, 20px) 0 clamp(14px, 2.4vh, 22px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: stretch;
  min-height: calc(100svh - 128px);
}
.hero-panel-main,
.hero-panel-side { position: relative; border-radius: 36px; overflow: hidden; }

.hero-panel-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(26px, 4vh, 42px) clamp(28px, 3vw, 46px) clamp(22px, 3.4vh, 34px);
  min-height: 0;
  color: var(--white);
  box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 78% 20%, rgba(235, 207, 139, .12), transparent 26%),
    linear-gradient(150deg, #1e1c1a 0%, var(--charcoal) 48%, #24211e 100%);
}
.hero-panel-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 20%);
  pointer-events: none;
}
.hero-panel-main::after {
  content: "";
  position: absolute;
  width: 540px; height: 540px;
  border-radius: 50%;
  inset-inline-end: -210px;
  top: -230px;
  background: radial-gradient(circle, rgba(235, 207, 139, .18), transparent 68%);
}
.hero-copy { position: relative; z-index: 2; max-width: 770px; }
.hero-copy h1 {
  margin: clamp(8px, 1.6vh, 14px) 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.03em;
  font-size: clamp(2.2rem, min(4.4vw, 7.4vh), 4.3rem);
  line-height: 1.0;
}
[dir="rtl"] .hero-copy h1 { letter-spacing: 0; line-height: 1.22; }
.hero-copy .accent { color: var(--gold); }
.hero-copy .lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: var(--on-dark);
  max-width: 680px;
  margin: 0 0 clamp(14px, 2.4vh, 22px);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Proof rail — hairline separators instead of three more boxes, matching the
   method rail opposite. Two lines each, not three: label and claim. */
.hero-proof {
  list-style: none;
  margin: clamp(14px, 2.4vh, 22px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-proof li { padding: 12px 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.hero-proof li + li { border-inline-start: 1px solid rgba(255, 255, 255, .12); padding-inline-start: 16px; }
.hero-proof small { color: #b6a892; text-transform: uppercase; letter-spacing: .14em; font-size: .6rem; font-weight: 700; }
[dir="rtl"] .hero-proof small { text-transform: none; letter-spacing: 0; font-size: .72rem; }
.hero-proof strong { font-family: var(--font-serif); font-size: 1.06rem; font-weight: 500; color: #fff; line-height: 1.22; }

.hero-bridge-note {
  position: relative;
  z-index: 2;
  margin-top: clamp(12px, 2vh, 20px);
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-top: clamp(10px, 1.6vh, 14px);
}
.hero-bridge-note h2 { margin: 0; font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; color: var(--gold); }
.hero-bridge-note p { margin: 7px 0 0; color: #c8c0b4; font-size: .85rem; max-width: 62ch; }

/* Staggered entrance — one element at a time, in reading order. */
.st {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .9s var(--ease) calc(var(--d, 0) * var(--seq-step, 310ms)),
    transform .9s var(--ease) calc(var(--d, 0) * var(--seq-step, 310ms));
}
.in .st { opacity: 1; transform: none; }
h1 .st { display: inline-block; }

/* ==========================================================================
   Motion polish
   Everything here is scroll- or intent-driven. Nothing loops, nothing moves
   on its own except the ribbon — motion has to mean something.
   ========================================================================== */

/* Hero mark drifts against its panel as you scroll past. */
.side-mark { transform: translateY(var(--py, 0px)); will-change: transform; }

/* The gold flare breathes, very slightly, so the mark is never quite static. */
@media (prefers-reduced-motion: no-preference) {
  .side-orbit { animation: orbit-drift 34s ease-in-out infinite; }
  @keyframes orbit-drift {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg)   scale(1); }
    50%      { transform: translate(-50%, -50%) rotate(3.5deg) scale(1.018); }
  }
}

/* Cards: lift, warm, and let the bronze rule sweep in. */
.fit-card, .cap, .journey-card, .dna, .promise-card {
  transition:
    transform .5s var(--ease),
    background .4s ease,
    border-color .4s ease,
    box-shadow .5s ease;
}

/* Icon badges respond before the card does — the eye follows the icon. */
.icon-badge, .journey-node {
  transition: transform .45s var(--ease2), box-shadow .45s ease, color .3s ease;
}
.fit-card:hover .icon-badge,
.cap:hover .icon-badge {
  transform: translateY(-3px) rotate(-3deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 34px rgba(72,49,24,.16);
}
.journey-card:hover .journey-node {
  transform: translateY(-3px);
  box-shadow: 0 0 0 10px rgba(184,134,59,.07), 0 16px 36px rgba(71,50,25,.10);
}

/* Value cells warm on hover — the strip stops feeling like a static bar. */
.value-item { transition: background .45s ease; }
.value-item:hover { background: #201f1c; }

/* Nav underline already sweeps; give the buttons a matching ease. */
.btn { transition: transform .35s var(--ease), box-shadow .35s ease, background .35s ease, border-color .35s ease; }
.btn:active { transform: translateY(0) scale(.985); }

/* Language menu opens rather than appears. */
.lang-menu {
  transform-origin: top var(--menu-origin, right);
  animation: menu-in .26s var(--ease2);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Modal arrives with the panel, not before it. */
.modal.open .modal-panel { animation: panel-in .42s var(--ease2); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Section headings share the hero's word-by-word treatment. */
.section-title .word { transition-delay: calc(var(--i) * 40ms); }

/* --- Hero side panel / symbol -------------------------------------------- */
/* Right panel: centred mark, copy plate floating over it.
   ------------------------------------------------------------------
   Contrast strategy — the plate is a LIGHT scrim, never dark glass.
   At 90% ivory, even where it crosses the densest black brushwork the
   composited ground never falls below ~#d6d2c9, so #1a1a1a body text
   holds ≈11:1 and the heading ≈13:1 — above WCAG AAA (7:1) everywhere
   on the panel, not just over the light areas.
   ------------------------------------------------------------------ */
.hero-panel-side {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 40px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .56);
  box-shadow: var(--shadow-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .30) 60%),
    linear-gradient(180deg, #efe5d6, #e7dac7);
}

/* The mark, at full strength. Nothing is layered on top of the brushwork. */
.side-mark {
  position: relative;
  margin: 0;
  width: min(112%, 620px);
  align-self: center;
  aspect-ratio: 366 / 261;   /* the master mark's own ratio */
}
.side-q {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 38px rgba(44, 31, 17, .13));
}
[dir="rtl"] .side-q { transform: scaleX(-1); }

/* The well inside the loop — coordinates measured from the asset itself.
   Text here sits on the panel's own ivory, so contrast is ~13:1 with no
   scrim, no blur and nothing obscuring the mark. */
/* The clean field sits to the right of the loop and above the bridge —
   measured at 57.1%/0%, 42.9%×62.1% of the master mark. Text lands on bare
   canvas, so contrast needs no scrim at all. */
.side-inset {
  position: absolute;
  left: 55.5%;
  top: 4%;
  width: 41%;
  height: 56%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: start;
}
/* In Arabic the artwork is mirrored, so the loop moves to the right and the
   clean field moves to the left: 100% − 55.5% − 41% = 3.5%. The text itself is
   never flipped — an earlier rule mirrored it to "cancel" a parent transform
   that was never applied, which rendered the Arabic backwards. */
[dir="rtl"] .side-inset {
  transform: none;
  left: 3.5%;
  text-align: right;
}

.side-kicker {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
[dir="rtl"] .side-kicker { text-transform: none; letter-spacing: 0; font-size: .7rem; }

.side-inset h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--charcoal);
  text-wrap: balance;
}
[dir="rtl"] .side-inset h3 { line-height: 1.42; letter-spacing: 0; }

/* Supporting copy sits below the mark, on clean ground. */
.side-foot { display: flex; flex-direction: column; gap: 14px; }
.side-foot > p {
  margin: 0;
  color: #4a4237;
  font-size: .92rem;
  line-height: 1.55;
  max-width: 46ch;
}

/* Method rail — hairline separators, no boxes. */
.side-steps {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(184, 134, 59, .30);
}
.side-step { padding: 15px 12px 15px 0; display: flex; flex-direction: column; gap: 7px; }
.side-step + .side-step { border-inline-start: 1px solid rgba(184, 134, 59, .24); padding-inline-start: 14px; }
/* The three method icons carry the whole method in the hero, so they get the
   same badge treatment as the capability icons rather than sitting as bare
   hairlines: larger, heavier stroke, and a disc that separates them from the
   panel behind. */
.side-step .q-icon {
  width: 24px; height: 24px;
  color: var(--bronze-deep);
  stroke-width: 2.1;
}
.side-step {
  align-items: flex-start;
}
.side-step .q-icon {
  padding: 7px;
  width: 38px; height: 38px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid rgba(184, 134, 59, .32);
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.95),
              rgba(246,239,228,.82) 52%, rgba(224,208,183,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(72,49,24,.09);
  transition: transform .4s var(--ease2), box-shadow .4s ease, border-color .3s ease;
}
.side-step:hover .q-icon {
  transform: translateY(-2px);
  border-color: var(--bronze);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 22px rgba(72,49,24,.16);
}
.side-step strong { font-family: var(--font-serif); font-size: .95rem; font-weight: 500; color: var(--charcoal); }
/* #4a4237 holds 7.22:1 even where the plate crosses the densest brushwork —
   AAA at this size. Anything lighter drops the small caps below AA. */
.side-step span {
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #4a4237;
}
[dir="rtl"] .side-step span { text-transform: none; letter-spacing: 0; font-size: .72rem; }

.side-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(118%, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(184, 134, 59, .15);
  border-radius: 50%;
  pointer-events: none;
}
.side-orbit::before,
.side-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(184, 134, 59, .09);
  border-radius: 50%;
  inset: 10%;
}
.side-orbit::after { inset: 21%; }

/* --- Marquee ribbon ------------------------------------------------------- */
.ribbon {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, .26);
  padding: 12px 0;
}
.ribbon-track {
  display: flex;
  width: max-content;
  gap: 26px;
  white-space: nowrap;
  font-family: var(--font-serif);
  color: #544b40;
  animation: marquee 29s linear infinite;
}
.ribbon-track span::after { content: "✦"; color: var(--bronze); margin-inline-start: 26px; font-size: .65em; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .ribbon-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* --- Credibility strip ---------------------------------------------------- */
.value-strip {
  padding: 45px 0;
  background: var(--charcoal);
  color: var(--white);
  border-block: 1px solid rgba(255, 255, 255, .05);
}
.value-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, .95fr);
  gap: 1px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 24px;
  overflow: hidden;
}
.value-item {
  background: var(--charcoal);
  padding: 25px 27px;
  min-height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.value-item::after {
  content: "";
  position: absolute;
  width: 100px; height: 100px;
  border: 1px solid rgba(235, 207, 139, .08);
  border-radius: 50%;
  inset-inline-end: -48px;
  bottom: -52px;
}
.value-item small { color: #a99f92; text-transform: uppercase; letter-spacing: .15em; font-size: .65rem; }
[dir="rtl"] .value-item small { text-transform: none; letter-spacing: 0; font-size: .76rem; }
.value-item strong { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 500; margin-top: 7px; }
.value-item p { margin: 7px 0 0; color: #bfb7ad; font-size: .83rem; }
.value-intro strong { color: var(--gold); }

/* --- Credibility: metrics + employers -------------------------------------- */
.proof-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-bottom: 28px; }
.proof-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: #fff;
}
[dir="rtl"] .proof-head h2 { line-height: 1.34; letter-spacing: 0; }
.proof-head p { margin: 0; color: var(--on-dark); font-size: 1.02rem; max-width: 66ch; }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 22px;
  overflow: hidden;
}
.metric {
  background: var(--charcoal);
  padding: 27px 25px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: background .45s ease;
}
.metric:hover { background: #201f1c; }
.metric strong {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric span { color: #b3aa9d; font-size: .82rem; line-height: 1.45; }

.employers { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.employers ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
}
.employers li {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: #d3cabc;
  letter-spacing: .03em;
}
.employers-note { margin: 0; font-size: .78rem; color: #8e8579; }

/* --- Working together: tiers ------------------------------------------------ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tier {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(26, 26, 26, .08);
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease), border-color .35s ease, box-shadow .45s ease;
}
.tier:hover { transform: translateY(-6px); border-color: rgba(184, 134, 59, .26); box-shadow: 0 26px 66px rgba(44, 34, 23, .11); }
.tier header { display: flex; flex-direction: column; gap: 7px; }
.tier h3 { margin: 0; font-family: var(--font-serif); font-size: 1.34rem; font-weight: 500; line-height: 1.14; }
.tier-price {
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
[dir="rtl"] .tier-price { text-transform: none; letter-spacing: 0; font-size: .84rem; }
.tier-for {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.06rem;
  color: #4a4237;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tier-what { margin: 0; color: #605952; font-size: .92rem; flex: 1; }
.tier .btn { align-self: flex-start; margin-top: 4px; }

/* The free entry point carries the green — the one "yes, start here" signal. */
.tier--entry {
  background: linear-gradient(180deg, var(--green-pale), rgba(255, 255, 255, .58) 62%);
  border-color: rgba(31, 77, 61, .30);
}
.tier--entry:hover { border-color: rgba(31, 77, 61, .48); }
.tier--entry .tier-price { color: var(--green); }
.tier--entry .tier-for { border-bottom-color: rgba(31, 77, 61, .24); }
.tier--entry .btn--dark { background: var(--green); border-color: var(--green); }
.tier--entry .btn--dark:hover { background: var(--green-lt); border-color: var(--green-lt); }

.tiers-note {
  margin: 26px 0 0;
  font-family: var(--font-serif);
  font-size: 1.14rem;
  color: #645c54;
  max-width: 70ch;
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--bronze-2);
}

/* --- Founder portrait -------------------------------------------------------- */
.portrait { margin: 26px 0 0; display: flex; flex-direction: column; gap: 15px; }
.portrait img {
  width: 100%;
  /* The width/height attributes are there to reserve space before the file
     arrives, but they also map to presentational width/height — and since the
     source is landscape, the mapped height would stretch the frame flat.
     `height: auto` hands the sizing back to the aspect-ratio below. */
  height: auto;
  max-width: 340px;
  /* The source is landscape (1400x1123) and the frame is portrait, so `cover`
     scales to the full height and crops the sides — the whole head-to-chest
     composition survives. He sits right of centre in the frame (face centre at
     ~56% of the width), so the crop window is pushed across to 67% to put him
     in the middle of it rather than off toward one edge. */
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 67% center;
  border-radius: 22px;
  border: 1px solid rgba(235, 207, 139, .22);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .34);
  filter: saturate(.94) contrast(1.03);
}
.portrait figcaption { display: flex; flex-direction: column; gap: 3px; }
.portrait strong { font-family: var(--font-serif); font-size: 1.16rem; font-weight: 500; color: #fff; }
.portrait span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #caa36b; }
[dir="rtl"] .portrait span { text-transform: none; letter-spacing: 0; font-size: .86rem; }

/* --- Direct contact ----------------------------------------------------------- */
.contact-direct {
  margin-top: 34px;
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  gap: 18px 26px;
  align-items: center;
}
.cd-label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
[dir="rtl"] .cd-label { text-transform: none; letter-spacing: 0; font-size: .84rem; }
.cd-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .40);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.cd-item:hover { background: rgba(255, 255, 255, .78); border-color: var(--bronze); transform: translateY(-2px); }
.cd-kind { font-size: .63rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #7d6039; }
[dir="rtl"] .cd-kind { text-transform: none; letter-spacing: 0; font-size: .76rem; }
.cd-val { font-size: .9rem; color: var(--charcoal); direction: ltr; }
[dir="rtl"] .cd-val { text-align: right; }

/* WhatsApp is the default business channel in Morocco — mark it as the live one. */
.cd-item:first-of-type { border-color: rgba(31, 77, 61, .32); background: var(--green-pale); }
.cd-item:first-of-type:hover { border-color: var(--green); background: rgba(31, 77, 61, .12); }
.cd-item:first-of-type .cd-kind { color: var(--green); }

.brief-free {
  margin: 10px 0 0;
  font-size: .86rem;
  font-weight: 700;
  color: var(--green);
}

/* --- Where we help -------------------------------------------------------- */
.fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.fit-card {
  position: relative;
  border-radius: 26px;
  padding: clamp(16px, 2.3vh, 22px) 24px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(26, 26, 26, .08);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: .38s var(--ease);
}
.fit-card::before {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  inset-inline-end: -130px;
  top: -140px;
  background: radial-gradient(circle, rgba(184, 134, 59, .12), transparent 68%);
}
.fit-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .72); border-color: rgba(184, 134, 59, .22); }
.fit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.icon-badge {
  width: 56px; height: 56px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #6f4d21;
  border: 1px solid rgba(184, 134, 59, .40);
  background: radial-gradient(circle at 30% 24%, #fffdf9, rgba(245, 237, 224, .88) 50%, rgba(220, 203, 178, .62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 12px 28px rgba(72, 49, 24, .08);
  flex: 0 0 auto;
}
.icon-badge .q-icon { width: 28px; height: 28px; stroke-width: 2.05; }

.fit-label { text-transform: uppercase; letter-spacing: .15em; font-size: .66rem; font-weight: 800; color: #7d6039; }
[dir="rtl"] .fit-label, [dir="rtl"] .cap-label { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.fit-card h3 { margin: 0 0 8px; font-family: var(--font-serif); font-size: 1.32rem; font-weight: 500; line-height: 1.14; }
[dir="rtl"] .fit-card h3 { line-height: 1.4; }
.fit-card p { margin: 0; color: #605952; }

.fit-note {
  margin-top: clamp(8px, 1.4vh, 12px);
  padding: clamp(8px, 1.4vh, 12px) 22px;
  border-inline-start: 1px solid var(--bronze);
  color: #645c54;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  max-width: 960px;
}

/* --- Approach ------------------------------------------------------------- */
.journey-wrap { position: relative; }
.bridge-canvas { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.bridge-canvas path { fill: none; stroke: rgba(184, 134, 59, .22); stroke-width: 2; }
.bridge-canvas .bridge-progress {
  stroke: var(--bronze);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 8px rgba(184, 134, 59, .18));
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
  padding-top: 30px;
}
.journey-card {
  position: relative;
  min-height: 282px;
  border-radius: 28px;
  padding: 24px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(26, 26, 26, .08);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .45s var(--ease), background .35s, border-color .35s;
}
.journey-card::before {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  inset-inline-end: -120px;
  top: -140px;
  background: radial-gradient(circle, rgba(184, 134, 59, .14), transparent 68%);
}
.journey-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(184, 134, 59, .62), transparent);
  transform: scaleX(0);
  transition: transform .55s var(--ease);
}
.journey-card:hover { transform: translateY(-7px); background: rgba(255, 255, 255, .72); border-color: rgba(184, 134, 59, .23); }
.journey-card:hover::after { transform: scaleX(1); }

.journey-node {
  width: 50px; height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 134, 59, .42);
  background: radial-gradient(circle at 32% 26%, #fffdf9, rgba(246,239,228,.94) 55%, rgba(226,210,184,.7));
  color: #6f4d21;
  box-shadow: 0 0 0 8px rgba(184, 134, 59, .07), 0 12px 30px rgba(71, 50, 25, .10);
}
.journey-node .q-icon { width: 30px; height: 30px; stroke-width: 2.05; }
.journey-card h3 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.08; margin: 30px 0 10px; }
[dir="rtl"] .journey-card h3 { line-height: 1.35; }
.journey-card p { color: #5f5951; margin: 0; }
.journey-result {
  position: absolute;
  inset-inline: 24px;
  bottom: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7e6342;
}
[dir="rtl"] .journey-result { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.journey-result b { color: var(--charcoal); }

/* --- Capabilities --------------------------------------------------------- */
.cap-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.cap {
  grid-column: span 6;
  position: relative;
  border-radius: 28px;
  padding: 24px;
  min-height: 208px;
  border: 1px solid rgba(26, 26, 26, .08);
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 14px 48px rgba(44, 34, 23, .06);
  overflow: hidden;
  transition: .4s var(--ease);
}
.cap:nth-child(1), .cap:nth-child(4) { grid-column: span 7; }
.cap:nth-child(2), .cap:nth-child(3) { grid-column: span 5; }
.cap:hover { transform: translateY(-6px); box-shadow: 0 26px 70px rgba(44, 34, 23, .10); border-color: rgba(184, 134, 59, .23); }
.cap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(184, 134, 59, .62), transparent);
  transform: scaleX(0);
  transition: transform .55s var(--ease);
}
.cap:hover::after { transform: scaleX(1); }

.cap-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 4px; }
.cap-kind { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cap-kind .icon-badge { width: 52px; height: 52px; border-radius: 16px; }
.cap-kind .q-icon { width: 27px; height: 27px; }
.cap-label { text-transform: uppercase; letter-spacing: .15em; font-size: .66rem; font-weight: 800; color: #85633e; }
.cap-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: #705333;
  transition: .3s var(--ease);
  flex: 0 0 auto;
}
.cap-arrow .q-icon { width: 18px; height: 18px; }
.cap:hover .cap-arrow { transform: translate(3px, -3px); background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
[dir="rtl"] .cap:hover .cap-arrow { transform: translate(-3px, -3px); }
.cap h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.44rem; margin: 22px 0 8px; }
.cap p { color: #625b53; margin: 0; max-width: 560px; }

/* --- Founder -------------------------------------------------------------- */
.dark-section { background: var(--charcoal); color: var(--white); position: relative; overflow: hidden; }
.dark-section::before {
  content: "";
  position: absolute;
  width: 720px; height: 720px;
  border: 1px solid rgba(235, 207, 139, .18);
  border-radius: 50%;
  inset-inline-end: -330px;
  top: -380px;
  box-shadow: 0 0 0 90px rgba(235, 207, 139, .025), 0 0 0 180px rgba(235, 207, 139, .014);
}
.dark-section .section-head p { color: #c6bfb5; }
.dark-section .eyebrow { color: #caa36b; }

.founder-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(26px, 3.4vw, 44px); align-items: start; }
.founder-sticky { position: sticky; top: 120px; }
.founder-sticky .q-ghost { width: min(320px, 72%); opacity: .10; filter: grayscale(1); margin: 32px auto 0; }
.founder-copy h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, min(3.2vw, 5vh), 2.9rem); line-height: 1.08; margin: 0 0 clamp(10px, 1.6vh, 16px); }
[dir="rtl"] .founder-copy h2 { line-height: 1.3; }
.founder-copy > .lead { font-size: 1.13rem; color: #d5cdc2; max-width: 680px; }
.founder-quote {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  border-inline-start: 1px solid var(--bronze);
  padding-inline-start: 22px;
  margin: clamp(12px, 2.2vh, 22px) 0;
  color: #f1ebe1;
}
.dna-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: clamp(12px, 2.2vh, 22px); }
.dna {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 21px;
  padding: clamp(13px, 1.8vh, 18px);
  min-height: clamp(112px, 15vh, 142px);
}
.dna small { display: block; text-transform: uppercase; letter-spacing: .15em; color: #caa36b; font-size: .65rem; }
[dir="rtl"] .dna small { text-transform: none; letter-spacing: 0; font-size: .76rem; }
.dna strong { display: block; font-family: var(--font-serif); font-size: 1.3rem; margin: 10px 0 7px; }
.dna p { font-size: .88rem; color: #b5aea4; margin: 0; }

/* --- Contact -------------------------------------------------------------- */
.contact { padding-top: 0; }
.cta-card {
  border-radius: 38px;
  background: var(--charcoal);
  color: var(--white);
  padding: 44px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: end;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cta-card::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  inset-inline-end: -150px;
  top: -220px;
  background: radial-gradient(circle, rgba(235, 207, 139, .18), transparent 68%);
}
.cta-card h2 { font-family: var(--font-serif); font-size: clamp(2.1rem, 3.4vw, 3.1rem); font-weight: 500; line-height: 1.04; margin: 12px 0 14px; max-width: 760px; }
[dir="rtl"] .cta-card h2 { line-height: 1.3; }
.cta-card p { color: #c7c0b7; max-width: 660px; margin: 0; }
.cta-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }

.contact-direct {
  margin-top: 30px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
  font-size: .9rem;
}
.contact-direct a { border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .25s; }
.contact-direct a:hover { border-color: var(--bronze); }

footer {
  padding: 30px 0 44px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  color: #6e665d;
  font-size: .8rem;
  flex-wrap: wrap;
}
.footer-meta { display: flex; gap: 18px; flex-wrap: wrap; }

/* --- Brief modal ---------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(17, 16, 14, .62);
  backdrop-filter: blur(13px);
}
.modal.open { display: grid; }
.modal-panel {
  width: min(720px, 100%);
  max-height: min(760px, 92svh);
  overflow: auto;
  background: var(--ivory);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .28);
  padding: 32px;
  position: relative;
}
.modal-close {
  position: absolute;
  inset-inline-end: 20px;
  top: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
}
.modal h2 { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 500; line-height: 1; margin: 16px 50px 14px 0; }
[dir="rtl"] .modal h2 { margin: 16px 0 14px 50px; line-height: 1.3; }
.modal .intro { color: #625b53; }

.brief-grid { display: grid; gap: 17px; margin-top: 26px; }
.brief-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field label {
  display: block;
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #65523c;
}
[dir="rtl"] .field label { text-transform: none; letter-spacing: 0; font-size: .86rem; }
.field input, .field textarea {
  width: 100%;
  border: 1px solid rgba(26, 26, 26, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .58);
  padding: 14px 15px;
  color: var(--charcoal);
  outline: none;
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(184, 134, 59, .08); }
/* Honeypot — hidden from people, visible to bots. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.brief-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.status { font-size: .82rem; color: #55705c; }
.status.error { color: #9a4b35; }

/* --- Story rail ----------------------------------------------------------- */
.story-nav {
  position: fixed;
  inset-inline-end: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.story-dot {
  width: 9px; height: 9px;
  border: 1px solid rgba(54, 43, 31, .35);
  border-radius: 50%;
  background: rgba(245, 240, 231, .7);
  cursor: pointer;
  position: relative;
  transition: .3s;
  padding: 0;
}
.story-dot.active { background: var(--bronze); border-color: var(--bronze); box-shadow: 0 0 0 5px rgba(184, 134, 59, .08); }
.story-dot span {
  position: absolute;
  inset-inline-end: 17px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #5f574f;
  background: rgba(245, 240, 231, .92);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 6px 9px;
  opacity: 0;
  pointer-events: none;
  transition: .25s;
}
[dir="rtl"] .story-dot span { transform: translateY(-50%) translateX(-8px); text-transform: none; letter-spacing: 0; }
.story-dot:hover span, .story-dot:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }

/* --- Motion --------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.99);
  filter: blur(4px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(7px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
  transition-delay: calc(var(--i) * 48ms);
}
.in .word { opacity: 1; transform: none; filter: none; }
.tilt { transform-style: preserve-3d; }

.motion-toggle {
  position: fixed;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 150;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(26, 26, 26, .84);
  color: var(--white);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .67rem;
  font-weight: 800;
  cursor: pointer;
}
[dir="rtl"] .motion-toggle { text-transform: none; letter-spacing: 0; }
.motion-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(235, 207, 139, .11), 0 0 14px rgba(235, 207, 139, .33);
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--charcoal);
  color: var(--white);
  display: grid;
  place-items: center;
  transition: opacity .75s var(--ease), visibility .75s;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; width: min(700px, calc(100% - 42px)); }
.preloader .lockup { opacity: 0; transform: translateY(12px); animation: preIn .8s .1s var(--ease) forwards; }
.loader-line {
  height: 1px;
  width: min(480px, 78%);
  margin: 26px auto 18px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  animation: lineIn 1.1s .25s var(--ease) forwards;
  position: relative;
}
.loader-line::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 0 28px rgba(235, 207, 139, .35);
  animation: nodeIn .4s .9s var(--ease2) forwards;
}
.loader-steps {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 28px);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #b7afa5;
  font-size: .61rem;
}
[dir="rtl"] .loader-steps { text-transform: none; letter-spacing: 0; font-size: .72rem; }
.loader-steps span { opacity: 0; transform: translateY(7px); animation: stepIn .55s var(--ease) forwards; }
.loader-steps span:nth-child(1) { animation-delay: .62s; }
.loader-steps span:nth-child(2) { animation-delay: .78s; }
.loader-steps span:nth-child(3) { animation-delay: .94s; }

@keyframes preIn  { to { opacity: 1; transform: none; } }
@keyframes lineIn { to { transform: scaleX(1); } }
@keyframes nodeIn { to { transform: translate(-50%, -50%) scale(1); } }
@keyframes stepIn { to { opacity: 1; transform: none; } }

body.menu-open, body.modal-open { overflow: hidden; }
body.motion-off * { animation-play-state: paused !important; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-panel-main, .hero-panel-side { min-height: auto; }
  .hero-panel-main { padding: 46px 36px 36px; }
  .hero-bridge-note { grid-template-columns: 1fr; }
  .section-head, .cta-card, .founder-grid { grid-template-columns: 1fr; }
  .value-grid, .metrics { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: 1fr; }
  .contact-direct { grid-template-columns: repeat(2, 1fr); }
  .cd-label { grid-column: 1 / -1; }
  .portrait img { max-width: 260px; }
  .journey-grid { grid-template-columns: 1fr; padding-top: 0; }
  .bridge-canvas { display: none; }
  .journey-card { min-height: 285px; }
  .cap:nth-child(n) { grid-column: span 6; }
  .founder-sticky { position: relative; top: auto; }
  .founder-sticky .q-ghost { display: none; }
  .cta-actions { justify-content: flex-start; }
  .story-nav { display: none; }
}

@media (max-width: 1150px) {
  .main-nav {
    position: fixed;
    inset: 80px 0 auto 0;
    display: grid;
    gap: 0;
    background: rgba(243, 238, 228, .98);
    border-bottom: 1px solid var(--line-soft);
    transform: translateY(-130%);
    opacity: 0;
    visibility: hidden;
    transition: .42s var(--ease);
    padding: 10px 20px 22px;
  }
  .main-nav { gap: 8px; }
  .main-nav > a:not(.btn) {
    padding: 14px 18px;
    text-align: start;
    background: rgba(255, 255, 255, .6);
    border-color: var(--line-soft);
  }
  .main-nav .btn { margin-top: 6px; justify-content: center; }
  body.menu-open .main-nav { transform: none; opacity: 1; visibility: visible; box-shadow: 0 28px 60px rgba(30, 25, 20, .10); }
  .nav-toggle { display: grid; }
  .fit-grid { grid-template-columns: 1fr; }
  .dna-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
  :root { --shell: min(100% - 26px, 1220px); }
  .header-inner { height: 68px; }
  .main-nav { top: 68px; }
  .lockup-q { width: 30px; height: 30px; }
  .lockup-word { font-size: .96rem; letter-spacing: .16em; }
  .hero { padding-top: 18px; }
  .hero-panel-main { padding: 34px 24px 24px; border-radius: 28px; }
  .hero-panel-side { padding: 16px; border-radius: 28px; }
  .hero-copy h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
  .hero-copy .lead { font-size: .98rem; }
  .hero-proof { grid-template-columns: 1fr; margin-top: 26px; }
  .hero-proof li { padding: 13px 0; }
  .hero-proof li + li {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .hero-bridge-note h2 { font-size: 1.25rem; }
  .hero-panel-side { padding: 22px; min-height: auto; gap: 20px; }
  .side-mark { width: min(114%, 400px); }
  .side-inset h3 { font-size: 1rem; }
  .side-kicker { font-size: .5rem; letter-spacing: .16em; }
  .side-step { padding: 12px 8px 12px 0; }
  .side-step + .side-step { padding-inline-start: 10px; }
  .side-step strong { font-size: .84rem; }
  .side-step span { font-size: .55rem; letter-spacing: .1em; }
  section { padding: 82px 0; }
  .section-head { gap: 18px; margin-bottom: 36px; }
  .value-grid, .metrics { grid-template-columns: 1fr; }
  .contact-direct { grid-template-columns: 1fr; }
  .tier { padding: 26px 22px; }
  .employers ul { gap: 8px 18px; }
  .employers li { font-size: .92rem; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap:nth-child(n) { grid-column: auto; min-height: 235px; }
  .dna-grid { grid-template-columns: 1fr; }
  .cta-card { padding: 34px 26px; border-radius: 27px; }
  .brief-row { grid-template-columns: 1fr; }
  footer { align-items: flex-start; }
  .motion-toggle { inset-inline-end: 10px; bottom: 10px; width: 38px; height: 38px; padding: 0; justify-content: center; }
  .motion-toggle .motion-label { display: none; }
  .modal-panel { padding: 25px 20px; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .preloader { display: none !important; }
  .ambient { display: none !important; }
  .reveal, .word, .st { opacity: 1 !important; transform: none !important; filter: none !important; }
  .bridge-canvas .bridge-progress { stroke-dashoffset: 0 !important; }
}

/* Portrait not yet supplied — keep the layout intact rather than showing
   a broken image. Drop assets/img/youness.jpg in and this disappears. */
.portrait--missing img { display: none; }
.portrait--missing::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  border: 1px dashed rgba(235, 207, 139, .34);
  background:
    radial-gradient(circle at 50% 38%, rgba(235, 207, 139, .09), transparent 62%),
    rgba(255, 255, 255, .04);
}

/* --- Pricing ladder ---------------------------------------------------------
   These are numbered because they genuinely are a sequence: intake feeds the
   diagnostic, the diagnostic decides whether there is anything worth building.
   The numbering encodes order, not decoration.
   -------------------------------------------------------------------------- */
.tier { position: relative; }
.tier-step {
  position: absolute;
  top: 26px;
  inset-inline-end: 26px;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(140, 99, 41, .16);
  font-variant-numeric: tabular-nums;
  transition: color .4s ease;
}
.tier:hover .tier-step { color: rgba(140, 99, 41, .30); }
.tier--entry .tier-step { color: rgba(31, 77, 61, .20); }
.tier--entry:hover .tier-step { color: rgba(31, 77, 61, .34); }

.tier-note {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: #6f6658;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.tier--entry .tier-note { color: var(--green); border-top-color: rgba(31, 77, 61, .28); }

/* Step 3 carries a share of the risk — the border says so without a badge. */
.tier--outcome { border-color: rgba(140, 99, 41, .28); }
.tier--outcome:hover { border-color: rgba(140, 99, 41, .46); }

/* ==========================================================================
   MOBILE & TABLET AUDIT FIXES
   ========================================================================== */

/* --- 1. Contrast: eyebrow on the charcoal proof strip -----------------------
   --bronze-deep (#8c6329) on #1a1a1a measures 3.26:1 — below the 4.5:1 floor
   for text this size. The dark-section override existed but never covered the
   credibility strip. #caa36b takes it to 7.43:1. */
.value-strip .eyebrow,
.value-strip .cd-label { color: #caa36b; }
.value-strip .eyebrow::before { background: #caa36b; }

/* Employers note was 4.79:1 at a very small size — lift it clear. */
.employers-note { color: #a79d90; }

/* --- 2. Minimum readable type on touch devices ------------------------------
   Sixteen rules rendered below 12px, the smallest at 8px. Nothing that carries
   meaning should sit under 12px on a phone. Tracking is reduced to compensate
   for the size increase so labels still fit their columns. */
@media (max-width: 900px) {
  .eyebrow, .cd-label            { font-size: .8rem; letter-spacing: .13em; }
  .fit-label, .cap-label,
  .tier-price, .cd-kind          { font-size: .79rem; letter-spacing: .10em; }
  .hero-proof small,
  .metric span,
  .value-item small,
  .dna small                     { font-size: .79rem; letter-spacing: .09em; }
  .side-kicker                   { font-size: .79rem; letter-spacing: .12em; }
  .side-step span,
  .journey-result,
  .journey-result b,
  .portrait span                 { font-size: .79rem; letter-spacing: .07em; }
  .q-foot, .employers-note,
  .tier-note                     { font-size: .78rem; }
  .motion-label                  { font-size: .78rem; }
  .loader-steps span             { font-size: .78rem; letter-spacing: .08em; }
  .lang-current                  { font-size: .8rem; }
  .footer-meta, footer           { font-size: .82rem; }
  .main-nav > a:not(.btn)        { font-size: .86rem; letter-spacing: .08em; }
  .field label                   { font-size: .8rem; letter-spacing: .05em; }
}

/* --- 3. Tap targets: 44 × 44 minimum ---------------------------------------- */
@media (max-width: 900px) {
  /* Grow to fit the label rather than clipping it — 44px is the floor,
     not the fixed size. */
  .motion-toggle { min-width: 44px; min-height: 44px; padding: 10px 14px; }
  .lang-btn      { min-height: 44px; padding: 10px 14px; }
  .lockup        { min-height: 44px; }
  .story-dot     { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; }
  .cd-item       { min-height: 56px; justify-content: center; }
  .lang-menu button { min-height: 48px; }
  .modal-close   { width: 46px; height: 46px; }
}

/* --- 4. Tablet: stop collapsing to one column too early ---------------------
   Between 768 and 1080 the fit cards, tiers and journey cards were single
   column at ~720px wide — two lines of text in a very wide box. */
@media (min-width: 700px) and (max-width: 1080px) {
  .fit-grid    { grid-template-columns: repeat(2, 1fr); }
  .tiers       { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tier        { padding: 24px 20px; }
  .tier h3     { font-size: 1.3rem; }
  .tier-step   { font-size: 2rem; top: 20px; inset-inline-end: 20px; }
  .journey-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .journey-card { min-height: 300px; padding: 24px; }
  .journey-card h3 { font-size: 1.6rem; margin-top: 36px; }
  .journey-result  { inset-inline: 24px; bottom: 22px; }
  .metrics     { grid-template-columns: repeat(4, 1fr); }
  .metric      { padding: 20px 16px; }
  .contact-direct { grid-template-columns: repeat(4, 1fr); }
  .contact-direct .cd-label { grid-column: 1 / -1; }
}

/* --- 5. The mobile "first scene" --------------------------------------------
   The hero panel was 953px tall on a 640px viewport, so the composition could
   never be read as one scene. Tightened so the headline, the promise and both
   CTAs land in the first screen, with the mark following immediately after. */
@media (max-width: 650px) {
  .hero { padding-top: 12px; }
  .hero-grid { gap: 14px; }
  .hero-panel-main { padding: 26px 20px 22px; }
  .hero-copy h1 { font-size: clamp(2.15rem, 9.4vw, 2.9rem); margin: 14px 0 14px; }
  .hero-copy .lead { font-size: 1rem; margin-bottom: 22px; line-height: 1.5; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-proof { margin-top: 22px; }
  .hero-proof li { padding: 11px 0; }
  .hero-bridge-note { margin-top: 22px; padding-top: 16px; }
  .hero-panel-side { min-height: 420px; padding: 20px; }
  .side-mark { width: min(100%, 290px); }
  .side-foot > p { font-size: .95rem; }
}

/* Very short screens: drop the proof rail below the fold rather than
   squeezing the headline further. */
@media (max-width: 650px) and (max-height: 700px) {
  .hero-copy h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hero-panel-main { padding-top: 22px; }
}

/* The hero panels paint immediately — no fade, no blur, no observer.
   Only their contents stagger, so the first screen is readable at once. */
.reveal.no-fade { opacity: 1; transform: none; filter: none; transition: none; }

/* --- Selected work ----------------------------------------------------------
   Proof of QENTRA's own engagements — deliberately placed before the price,
   and visually distinct from the employment strip so the two are never
   mistaken for one another.
   -------------------------------------------------------------------------- */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.work {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px 20px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(26, 26, 26, .08);
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease), border-color .35s ease, box-shadow .45s ease;
}
.work:hover { transform: translateY(-6px); border-color: rgba(184, 134, 59, .26); box-shadow: 0 24px 60px rgba(44, 34, 23, .11); }
.work-kind {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
[dir="rtl"] .work-kind { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.work h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 1.24rem; line-height: 1.16; }
.work p { margin: 0; color: #605952; font-size: .9rem; line-height: 1.5; flex: 1; }
.work-out {
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
}
[dir="rtl"] .work-out { text-transform: none; letter-spacing: 0; font-size: .84rem; }
.work-note {
  margin: 24px 0 0;
  font-size: .9rem;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 1080px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px)  { .work-grid { grid-template-columns: 1fr; } .work { padding: 22px 20px 18px; } }
@media (max-width: 900px)  { .work-kind, .work-out { font-size: .79rem; letter-spacing: .08em; } }

/* --- Reference media: a real logo where one exists, an icon where it doesn't.
   Both sit in the same 64px optical slot so the row still reads as one set. */
.work-logo {
  margin: 0 0 4px;
  width: 64px; height: 64px;
  display: grid; place-items: center;
}
.work-logo img { width: 100%; height: 100%; object-fit: contain; }

.work-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 8px;
  color: var(--bronze-deep);
  border: 1px solid rgba(184, 134, 59, .28);
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), rgba(245,237,224,.76) 52%, rgba(220,203,178,.46));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 10px 24px rgba(72,49,24,.07);
  transition: transform .45s var(--ease2), box-shadow .45s ease;
}
.work-icon .q-icon { width: 28px; height: 28px; }
.work:hover .work-icon { transform: translateY(-3px) rotate(-3deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 32px rgba(72,49,24,.14); }

/* The one card carrying independent evidence gets the stronger frame. */
.work--lead { border-color: rgba(184, 134, 59, .30); background: rgba(255, 255, 255, .72); }

.rating {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--green-pale);
  border: 1px solid rgba(31, 77, 61, .26);
}
.rating-score {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.rating-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rating-stars { color: var(--bronze); font-size: .74rem; letter-spacing: .1em; line-height: 1; }
.rating-meta > span:last-child { font-size: .7rem; color: #3d5a4d; line-height: 1.3; }
[dir="rtl"] .rating-meta > span:last-child { font-size: .78rem; }

/* --- Tier detail: one idea per card, depth one click away ------------------
   Mirrors how a capability page works — the overview states the offer, the
   detail is available without pushing everyone through it. */
.tier-more { margin-top: auto; }
.tier-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bronze-deep);
  border-top: 1px dashed var(--line);
  width: 100%;
  transition: color .25s ease;
}
.tier-more summary::-webkit-details-marker { display: none; }
.tier-more summary::after {
  content: "+";
  margin-inline-start: auto;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .3s var(--ease);
}
.tier-more[open] summary::after { transform: rotate(45deg); }
.tier-more summary:hover { color: var(--bronze); }
.tier-more[open] .tier-what { animation: tier-in .32s var(--ease2); }
@keyframes tier-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.tier--entry .tier-more summary { color: var(--green); border-top-color: rgba(31,77,61,.28); }
.tier-more .tier-note { border-top: 0; padding-top: 6px; }
@media (max-width: 900px) { .tier-more summary { font-size: .86rem; } }

/* The hero is the one place the sequence is allowed to take its time. Sections
   further down reveal as you reach them, so a long cadence there would feel
   like lag rather than choreography. */
main > section:not(.hero) .st,
.value-strip .st {
  --seq-step: 90ms;
  transition-duration: .7s;
}


/* --- Fraunces variable axes --------------------------------------------------
   opsz follows the rendered size; SOFT rounds the terminals; WONK enables the
   canted, hand-cut forms. Both are strongest on display type and near zero on
   anything small, where irregularity reads as an error rather than a choice. */
.hero-copy h1,
.cta-card h2,
.founder-copy h2,
.proof-head h2 {
  font-variation-settings: 'SOFT' 34, 'WONK' 1, 'opsz' 120;
}
.section-title,
.side-inset h3,
.hero-bridge-note h2 {
  font-variation-settings: 'SOFT' 24, 'WONK' 1, 'opsz' 72;
}
.fit-card h3, .cap h3, .journey-card h3, .work h3, .tier h3,
.dna strong, .metric strong, .value-item strong, .mini-card strong,
.hero-proof strong, .promise-card strong, .side-step strong {
  font-variation-settings: 'SOFT' 12, 'WONK' 0, 'opsz' 30;
}
.founder-quote, .fit-note, .tiers-note {
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 60;
}
/* Arabic has no such axes. The universal selector loses to the specific rules
   above, so the same selectors are repeated under [dir="rtl"] to actually win. */
[dir="rtl"] :is(.hero-copy h1, .cta-card h2, .founder-copy h2, .proof-head h2,
                .section-title, .side-inset h3, .hero-bridge-note h2,
                .fit-card h3, .cap h3, .journey-card h3, .work h3, .tier h3,
                .dna strong, .metric strong, .value-item strong, .mini-card strong,
                .hero-proof strong, .promise-card strong, .side-step strong,
                .founder-quote, .fit-note, .tiers-note) {
  font-variation-settings: normal;
}


/* --- Short desktop viewports -------------------------------------------------
   A 1536×864 Windows laptop at 125% scaling leaves roughly 690px of viewport —
   shorter than any current Mac and the most common laptop resolution in use.
   These rules only engage below 830px tall, so larger displays keep the fuller
   composition. Nothing is hidden; everything is simply set tighter.
   -------------------------------------------------------------------------- */
@media (min-width: 1151px) and (max-height: 830px) {
  section { padding: 30px 0; }
  .section-head { margin-bottom: 14px; gap: 26px; }
  .section-head p { font-size: .95rem; }

  .hero { padding: 10px 0 12px; }
  /* The grid's own floor was taller than the content needed, so it, not the
     copy, was setting the hero's height. */
  .hero-grid { gap: 18px; min-height: 0; }
  .side-mark { width: min(100%, 330px); }
  .hero-panel-main { padding: 22px 30px 20px; }
  /* Three lines of headline at 57px was setting the hero's height on its own. */
  .hero-copy h1 { font-size: clamp(1.95rem, 5.6vh, 2.9rem); margin: 6px 0 8px; }
  .hero-copy .lead { font-size: 1rem; margin-bottom: 12px; }
  .hero-proof { margin-top: 12px; }
  .hero-proof li { padding-top: 9px; }
  .hero-proof strong { font-size: .95rem; }
  .hero-bridge-note { margin-top: 12px; padding-top: 10px; }
  .hero-bridge-note h2 { font-size: 1.16rem; }
  .hero-bridge-note p { font-size: .8rem; }
  .hero-panel-side { padding: 18px; }
  .side-head p, .side-foot > p { font-size: .86rem; }

  .fit-grid { gap: 10px; }
  .fit-card { padding: 12px 18px; }
  .fit-card h3 { font-size: 1.14rem; margin-bottom: 5px; }
  .fit-card p { font-size: .86rem; }
  .fit-head { margin-bottom: 7px; }
  .icon-badge { width: 42px; height: 42px; border-radius: 13px; }
  .icon-badge .q-icon { width: 21px; height: 21px; }
  .fit-note { margin-top: 8px; padding: 8px 18px; font-size: .95rem; }

  .journey-card { min-height: 236px; padding: 18px; }
  .journey-card h3 { font-size: 1.34rem; margin-top: 22px; }
  .journey-card p { font-size: .86rem; }
  .cap { min-height: 176px; padding: 18px; }
  .cap h3 { font-size: 1.24rem; margin: 16px 0 6px; }
  .cap p { font-size: .86rem; }

  .work { padding: 16px 16px 14px; }
  .work h3 { font-size: 1.1rem; }
  .work p { font-size: .84rem; }
  .tier { padding: 18px 18px; }
  .tier h3 { font-size: 1.18rem; }
  .tier-for { font-size: .95rem; padding-bottom: 9px; }
  .tier-what { font-size: .85rem; }

  .founder-copy > .lead { font-size: 1rem; }
  .founder-quote { font-size: 1.04rem; margin: 12px 0; padding-inline-start: 18px; }
  .dna { min-height: 96px; padding: 13px; }
  .dna strong { font-size: 1.08rem; margin: 6px 0 4px; }
  .dna p { font-size: .82rem; }
  .dna-grid { margin-top: 12px; gap: 10px; }
  .portrait img { max-width: 250px; }

  .metric { padding: 16px 18px; }
  .proof-head { margin-bottom: 16px; }
  .cta-card { padding: 30px; }
}


/* --- Tablet ------------------------------------------------------------------
   Between 700 and 1150px the hero and founder stack, which is what pushes them
   past a screen. The fix is not more squeezing but restoring the side-by-side
   relationship where there is still width for it, and trimming what stacks.
   -------------------------------------------------------------------------- */
@media (min-width: 700px) and (max-width: 1150px) {
  section { padding: clamp(34px, 4.4vh, 52px) 0; }

  /* the founder portrait sits beside the story again rather than above it */
  .founder-grid { grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }
  .founder-sticky { position: sticky; top: 96px; }
  .portrait img { max-width: 100%; }
  .founder-copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
  .founder-copy > .lead { font-size: .98rem; }
  .founder-quote { font-size: 1.05rem; margin: 14px 0; }
  .dna { min-height: 0; padding: 14px; }
  .dna p { font-size: .84rem; }

  /* four reference cards in one row is too tight here; two rows of two is not */
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .work { padding: 16px 16px 14px; }
  .work h3 { font-size: 1.12rem; }
  .work p { font-size: .85rem; }

  /* the hero stacks; keep the mark from taking a screen of its own */
  .hero-grid { gap: 14px; }
  .hero-panel-side { padding: 18px; }
  .side-mark { width: min(72%, 360px); }
  .side-foot > p { font-size: .88rem; }
  .hero-panel-main { padding: 22px 24px 18px; }
  .hero-copy h1 { font-size: clamp(1.9rem, 5.6vw, 2.6rem); margin: 8px 0 10px; }
  .hero-copy .lead { font-size: .98rem; margin-bottom: 14px; }
  .hero-proof { margin-top: 14px; }
  .hero-proof strong { font-size: .94rem; }
  .hero-bridge-note { margin-top: 14px; padding-top: 12px; }
  .hero-bridge-note h2 { font-size: 1.14rem; }
  .side-mark { width: min(54%, 258px); }
  .hero-grid { gap: 10px; }
  .side-head p { font-size: .86rem; }
  .side-steps { margin-top: 2px; }
  .side-step { padding-block: 10px; }

  .work-kind { font-size: .72rem; }
  .work-out { padding-top: 10px; font-size: .74rem; }
  .work-logo, .work-icon { width: 46px; height: 46px; }
  .work-icon .q-icon { width: 22px; height: 22px; }
  .work-note { margin-top: 14px; font-size: .85rem; }
}

/* ==========================================================================
   Cinematic layer
   ========================================================================== */

/* The ink field sits behind everything, above the page ground but below content. */
.ink-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .85;
}

/* The mark being drawn, then the painted original taking over. */
.mark-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 1.1s var(--ease);
}
.mark-trace.faded { opacity: 0; }
.side-q.painting { opacity: 0; transition: opacity 1.2s var(--ease); }
.side-q.painted  { opacity: 1; }

/* Cards open along the reading direction instead of fading in place. */
.wipe {
  clip-path: inset(0 100% 0 0 round 26px);
  opacity: .001;
  transition: clip-path 1.05s var(--ease), opacity .5s ease;
}
[dir="rtl"] .wipe { clip-path: inset(0 0 0 100% round 26px); }
.wipe.wiped { clip-path: inset(0 0 0 0 round 26px); opacity: 1; }

/* Cards catch the light where the pointer is. */
.fit-card, .cap, .work, .tier, .journey-card { position: relative; }
.fit-card::after, .cap .lit-glow, .work::after, .tier::after, .journey-card .lit-glow { pointer-events: none; }
.lit {
  background-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(235, 207, 139, .16), transparent 62%);
}

/* Parallax layers read a single custom property set by one scroll pass. */
.founder-sticky .portrait { transform: translateY(var(--py, 0px)); will-change: transform; }
.q-ghost { transform: translateY(var(--py, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .ink-field, .mark-trace { display: none !important; }
  .wipe { clip-path: none !important; opacity: 1 !important; transition: none !important; }
  .side-q.painting { opacity: 1 !important; }
  .lit { background-image: none !important; }
}

/* --- Phones ------------------------------------------------------------------
   A section holding four cards cannot fit one screen at 390px without shrinking
   text below the readable floor, so the goal here is fewer screens rather than
   one: release the desktop card minimums, tighten the rhythm, and keep every
   type size above 12.6px and every target at 44px.
   -------------------------------------------------------------------------- */
@media (max-width: 650px) {
  section { padding: 30px 0; }
  .section-head { margin-bottom: 14px; gap: 10px; }
  .section-head p { font-size: .94rem; }

  /* desktop card floors are what make phone sections tall */
  .journey-card, .cap, .dna, .work, .tier { min-height: 0; }

  .fit-grid, .cap-grid, .work-grid, .tiers, .journey-grid, .dna-grid, .metrics { gap: 10px; }

  .fit-card { padding: 14px 16px; }
  .fit-card h3 { font-size: 1.18rem; }
  .fit-card p { font-size: .9rem; }
  .fit-note { margin-top: 10px; padding: 10px 16px; font-size: 1rem; }

  .journey-card { padding: 16px; }
  .journey-card h3 { font-size: 1.34rem; margin: 16px 0 8px; }
  .journey-card p { font-size: .9rem; }
  .journey-result { position: static; margin-top: 12px; inset: auto; }

  .cap { padding: 16px; }
  .cap h3 { font-size: 1.24rem; margin: 14px 0 6px; }
  .cap p { font-size: .9rem; }

  .work { padding: 14px 16px 12px; }
  .work h3 { font-size: 1.14rem; }
  .work p { font-size: .88rem; }
  .work-logo, .work-icon { width: 44px; height: 44px; }
  .work-note { margin-top: 12px; }

  .tier { padding: 16px; gap: 10px; }
  .tier h3 { font-size: 1.2rem; }
  .tier-step { font-size: 1.8rem; top: 14px; inset-inline-end: 16px; }
  .tiers-note { margin-top: 14px; font-size: 1rem; }

  .metric { padding: 14px 16px; }
  .proof-head { margin-bottom: 14px; }
  .employers { margin-top: 14px; }

  .portrait img { max-width: 190px; }
  .founder-copy h2 { font-size: 1.65rem; }
  .founder-copy > .lead { font-size: .98rem; }
  .founder-quote { font-size: 1.05rem; margin: 14px 0; }
  .dna { padding: 14px; }
  .dna p { font-size: .86rem; }

  .cta-card { padding: 24px 20px; }
  .contact-direct { margin-top: 20px; }
}


/* Two regressions from the phone tightening pass, fixed at source:
   the rating caption fell under the 12px floor, and the footer policy links
   were 20px tall — well under the 44px touch target. */
@media (max-width: 900px) {
  .rating-stars { font-size: .82rem; }
  .rating-meta > span:last-child { font-size: .79rem; }
  footer .footer-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }
  footer .footer-meta { gap: 6px 16px; align-items: center; }
}


/* ==========================================================================
   Icon system — one disc, everywhere
   The site had four different icon containers: rounded squares in the fit and
   capability cards, circles on the method nodes and references, and a bare
   outline on the capability arrow. They now share a single disc, stroke weight
   and colour, so an icon reads the same wherever it appears.
   ========================================================================== */
.icon-badge,
.journey-node,
.work-icon,
.cap-arrow {
  border-radius: 50%;
  color: #6f4d21;
  border: 1px solid rgba(184, 134, 59, .42);
  background:
    radial-gradient(circle at 32% 26%, #fffdf9, rgba(246, 239, 228, .92) 52%, rgba(224, 208, 183, .62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 8px 20px rgba(72, 49, 24, .10);
}

/* Every icon inside a disc carries the same weight. */
.icon-badge .q-icon,
.journey-node .q-icon,
.work-icon .q-icon,
.cap-arrow .q-icon,
.side-step .q-icon,
.promise-card .q-icon {
  stroke-width: 2.05;
}

/* Sizes: the method node leads, capability and reference discs match, the
   arrow sits a step below because it is a control, not a subject. */
.icon-badge      { width: 54px; height: 54px; }
.icon-badge .q-icon { width: 27px; height: 27px; }
.cap-kind .icon-badge { width: 52px; height: 52px; border-radius: 50%; }
.cap-kind .q-icon { width: 26px; height: 26px; }
.journey-node    { width: 56px; height: 56px; }
.journey-node .q-icon { width: 28px; height: 28px; }
.work-icon       { width: 54px; height: 54px; }
.work-icon .q-icon { width: 27px; height: 27px; }
.cap-arrow       { width: 40px; height: 40px; }
.cap-arrow .q-icon { width: 19px; height: 19px; }

/* A single hover behaviour rather than three. */
.fit-card:hover .icon-badge,
.cap:hover .cap-kind .icon-badge,
.journey-card:hover .journey-node,
.work:hover .work-icon {
  transform: translateY(-3px) rotate(-3deg);
  border-color: var(--bronze);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 14px 30px rgba(72, 49, 24, .18);
}
.journey-card:hover .journey-node { transform: translateY(-3px); }

/* The arrow inverts on hover — it is the only icon that is also an action. */
.cap:hover .cap-arrow {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
  transform: translate(3px, -3px);
}
[dir="rtl"] .cap:hover .cap-arrow { transform: translate(-3px, -3px); }

/* Small screens: discs shrink together so the relationship survives. */
@media (max-width: 650px) {
  .icon-badge, .cap-kind .icon-badge, .work-icon { width: 46px; height: 46px; }
  .icon-badge .q-icon, .cap-kind .q-icon, .work-icon .q-icon { width: 23px; height: 23px; }
  .journey-node { width: 48px; height: 48px; }
  .journey-node .q-icon { width: 24px; height: 24px; }
  .cap-arrow { width: 36px; height: 36px; }
  .side-step .q-icon { width: 20px; height: 20px; padding: 6px; }
}

/* The hero's method icons kept the older bronze and sat at 4.68:1 while every
   other disc reached 6.66:1. One colour for the whole system. */
.side-step .q-icon { color: #6f4d21; }

/* In Arabic a value like "4.47 / 6" is two numbers around a neutral slash, and
   the bidi algorithm reorders them to "6 / 4.47" — a different figure. Numeric
   evidence is read left-to-right in every one of our languages, so the value
   is pinned LTR while the caption beneath it stays RTL. */
[dir="rtl"] .metric strong,
[dir="rtl"] .rating-score {
  direction: ltr;          /* so "4.47 / 6" keeps its order… */
  unicode-bidi: isolate;
  text-align: right;       /* …while still sitting on the column's right edge,
                              which `direction: ltr` alone would have flipped */
}