/* ==========================================================================
   UBM — page-about.css
   Only the blocks /about needs on top of base.css + sections.css.

   Reused wholesale from sections.css, not re-invented here:
     .page-hero   .def-rows   .pillar-rail (the four brand attributes)
     .scrollytell (the scroll-linked value sequence)   .cta-band
     .figure-caption   .quote

   House rules: tokens only, logical properties only, no raw hex, no raw
   duration or easing literal.
   ========================================================================== */

/* ==========================================================================
   1. PROFILE — prose beside the register of facts
   <section class="section" id="profile">
     <div class="shell split">
       <div class="split__aside profile__head">…</div>
       <div class="profile__body"><div class="prose">…</div>
         <dl class="def-rows">…</dl></div></div></section>
   ========================================================================== */

.profile__head { display: grid; gap: var(--sp-4); align-content: start; }

.profile__body { display: grid; gap: var(--sp-8); }

.profile__register {
  display: grid;
  gap: var(--sp-4);
  padding-block-start: var(--sp-6);
  border-block-start: 2px solid var(--line-gold);
}
.profile__register-label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
/* the phone number must stay LTR even in the Arabic page */
.profile__ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ==========================================================================
   2. VISION + MISSION — two statements, not two cards
   <div class="vm">
     <article class="vm__panel"><span class="vm__index">01</span>
       <p class="vm__label">Vision</p><p class="vm__text">…</p>
       <p class="vm__note">…</p></article> ×2 </div>
   ========================================================================== */

.vm { display: grid; gap: var(--sp-8); }
@media (min-width: 56rem) {
  .vm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-9); }
}

.vm__panel {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding-block-start: var(--sp-6);
  border-block-start: 2px solid var(--line-gold);
}
/* the hairline extends past the panel, echoing the open arc of the mark */
.vm__panel::after {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  inline-size: 3.5rem;
  block-size: 2px;
  background: var(--gold);
}

.vm__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sm);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vm__label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.vm__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  color: var(--text-strong);
  text-wrap: pretty;
}
.vm__note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 40ch;
}

/* ==========================================================================
   3. VALUE SEQUENCE — scroll-linked, six values
   Markup reuses .scrollytell from sections.css. Everything below either
   tightens that block for six shorter steps, or styles what sits inside
   the sticky stage: a dial that fills one sixth at a time.

   <section class="scrollytell values" data-world="deep" data-values>
     <div class="shell scrollytell__grid">
       <div class="scrollytell__media"><div class="scrollytell__stage values__stage">
         <svg class="value-dial" …>…</svg>
         <p class="value-dial__count">…</p></div></div>
       <ol class="scrollytell__steps">
         <li class="scrollytell__step value-step" data-value-step>…</li> …
   ========================================================================== */

/* Six steps at 68svh each is two and a half minutes of scrolling. Shorter. */
.values .scrollytell__step { min-block-size: 46svh; }
@media (max-width: 61.99rem) { .values .scrollytell__step { min-block-size: 40svh; } }

.values__stage { display: grid; place-items: center; }

.value-dial {
  inline-size: min(76%, 22rem);
  block-size: auto;
  aspect-ratio: 1;
  overflow: visible;
}
.value-dial__track { fill: none; stroke: var(--line); stroke-width: 1; }
.value-dial__tick  { fill: none; stroke: var(--line-strong); stroke-width: 1; }
/* The sweep. The page module measures the ring once into --dial-len and then
   only ever writes --dial-p (0…1) — no per-frame style thrash. */
.value-dial__arc {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--dial-len, 680);
  stroke-dashoffset: calc(var(--dial-len, 680) * (1 - var(--dial-p, 0)));
  transition: stroke-dashoffset var(--d-slow) var(--e-out);
}
html:not(.js) .value-dial__arc { stroke-dashoffset: 0; }
.value-dial__node {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1;
  transition: fill var(--d-base) var(--e-out), stroke var(--d-base) var(--e-out);
}
.value-dial__node.is-on { fill: var(--gold); stroke: var(--gold); }
.value-dial__spoke {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  opacity: .6;
}

.value-dial__label {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-2);
  text-align: center;
  pointer-events: none;
}
.value-dial__count {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-4xl);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.value-dial__of {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* the step's "in practice" block only earns its colour once the step is live */
.value-step__practice {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  padding-inline-start: var(--sp-4);
  border-inline-start: var(--bw) solid var(--line);
  transition: border-color var(--d-slow) var(--e-out);
}
.scrollytell__step.is-active .value-step__practice { border-inline-start-color: var(--line-gold); }
.value-step__practice-label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.value-step__line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--step-title);
  transition: color var(--d-slow) var(--e-out);
}

/* Without JavaScript nothing is dimmed: every step reads at full strength. */
.no-js .scrollytell__step,
html:not(.js) .scrollytell__step {
  --step-title: var(--text-strong);
  --step-body: var(--text-muted);
}

/* ==========================================================================
   4. ORGANISATION MODEL
   <figure class="org">
     <div class="org__spine"><span class="org__client">Client</span>
       <span class="org__bus"></span>
       <span class="org__label">One accountable relationship</span></div>
     <div class="org__groups">
       <section class="org-group">…<ol class="org-group__depts">
         <li class="org-dept"><span class="org-dept__node"></span>…</li>…
   ========================================================================== */

.org { display: grid; gap: 0; margin: 0; }

.org__spine {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  padding-block-end: var(--sp-7);
}
.org__client {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-strong);
  border: var(--bw) solid var(--line-gold);
  border-radius: var(--r-pill);
}
.org__client::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.org__label {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
/* the bus: one hairline the three groups hang from */
.org__bus {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--bw);
  background: var(--line-strong);
}

.org__groups {
  display: grid;
  gap: var(--sp-7) 0;
  border-block-start: 0;
}
@media (min-width: 62rem) {
  .org__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
}

.org-group {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding-block: var(--sp-6) var(--sp-2);
  padding-inline-end: var(--sp-6);
}
@media (min-width: 62rem) {
  .org-group { padding-inline-start: var(--sp-6); border-inline-start: var(--bw) solid var(--line); }
  .org-group:first-child { padding-inline-start: 0; border-inline-start: 0; }
}
/* the drop line from the bus into this group's gold cap */
.org-group::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: var(--sp-6);
  inline-size: var(--bw);
  background: var(--line-strong);
}
@media (min-width: 62rem) {
  .org-group:not(:first-child)::before { inset-inline-start: var(--sp-6); }
}
/* the cap itself */
.org-group::after {
  content: "";
  position: absolute;
  inset-block-start: var(--sp-6);
  inset-inline-start: 0;
  inline-size: 2.5rem;
  block-size: 2px;
  background: var(--gold);
}
@media (min-width: 62rem) {
  .org-group:not(:first-child)::after { inset-inline-start: var(--sp-6); }
}

.org-group__index {
  margin-block-start: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-sm);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.org-group__name { font-size: var(--fs-lg); }
.org-group__purpose { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 34ch; }

.org-group__depts {
  display: grid;
  margin-block-start: var(--sp-2);
  border-block-start: var(--bw) solid var(--line);
}
.org-dept {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text);
  border-block-end: var(--bw) solid var(--line);
}
.org-dept__node {
  inline-size: 7px;
  block-size: 7px;
  flex: none;
  border: var(--bw) solid var(--line-strong);
  transform: rotate(45deg);
  transition: border-color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.org-dept:hover .org-dept__node { border-color: var(--gold); background: var(--gold); }
.org-dept__count {
  margin-inline-start: auto;
  font-size: var(--fs-3xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.org .figure-caption { margin-block-start: var(--sp-7); }

.org__legend {
  margin-block-start: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 62ch;
}

/* ==========================================================================
   5. WHY UBM — a numbered register, not five identical cards
   <ol class="why"><li class="why__item"><span class="why__num">01</span>
     <div class="why__body"><h3>…</h3><p>…</p></div></li> … </ol>
   ========================================================================== */

.why { display: grid; border-block-start: var(--bw) solid var(--line); }

.why__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-6);
  border-block-end: var(--bw) solid var(--line);
  transition: background-color var(--d-base) var(--e-out);
}
@media (min-width: 62rem) {
  .why__item { grid-template-columns: 4rem minmax(0, 22ch) minmax(0, 1fr); align-items: baseline; gap: var(--sp-7); }
}

.why__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.why__title { font-size: var(--fs-lg); text-wrap: balance; }
.why__body  { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 52ch; }
@media (max-width: 61.99rem) {
  .why__title, .why__body { grid-column: 2; }
}

/* ==========================================================================
   6. SMALL FURNITURE
   ========================================================================== */

/* An arc mark reused at the top of the page hero and above the org figure. */
.about-arc {
  fill: none;
  stroke: var(--line-gold);
  stroke-width: 1;
}
.about-arc--live { stroke: var(--accent); }