/* ============================================================
   تبي؟ / Tapai — من نحن (about.html)
   Page-specific sections only. Every token, button, container,
   header and footer already lives in core.css.

   SEVEN SECTIONS, SEVEN STRUCTURES
   --------------------------------
   1 الواجهة   asymmetric split — type on the start, ONE light
               object on the end. The only light surface on a dark
               ground, so the eye has somewhere to land first.
   2 الواقع    editorial split: the heading and a hanging marginal
               question in the margin column, the argument running
               in a single measure beside it, then a full-width
               ledger of five rows underneath.
   3 التعريف   full-bleed teal band. One pull quote. Nothing else.
   4 كيف يعمل  numbered vertical timeline on a real spine, the
               third stop twice the size of the first two.
   5 رسالتنا   ONE dominant statement at display scale, with رؤيتنا
               and قيمنا demoted to a small rail beneath it.
   6 السياق    asymmetric band — the pattern panel bleeds off the
               inline-end edge, the copy hangs on the start.
   7 الخاتمة   short action band.

   No two of them share a skeleton, and only three carry an eyebrow.

   Colour (BRAND.md §2, 60/20/10/5/5):
     ink   — masthead, timeline, close, footer  ......... dominant
     deep  — رسالتنا, the marginal panel  ................ secondary
     teal  — ONE flooded band (التعريف) plus every rule,
             node and label  ............................ accent
     gold  — the h1 highlight, the ؟ glyphs, the timeline
             terminus, the مسار واحد underline, the CTA  .. rare
     paper — الواقع, السياق, and the one hero object
   ============================================================ */

:root{
  /* legal tints of the five — alpha/color-mix only, no new hues */
  --teal-line:color-mix(in srgb, var(--teal) 45%, transparent);
  --hair-dark:color-mix(in srgb, var(--paper) 16%, transparent);
  --hair-light:color-mix(in srgb, var(--ink) 14%, transparent);
  --on-teal:var(--ink-900);                 /* 5.0:1 on #19A7A0 — --ink is only 4.0:1.
                                               Any softer mix drops under 3.5:1, so text
                                               on the teal band is never faded. */
  /* body on dark: BRAND.md §2 wants #F3F6F4 at 85–92%.
     88% clears 4.5:1 on --deep (5.3:1); the shared 78% token only makes 4.6:1. */
  --on-dark-body:color-mix(in srgb, #F3F6F4 88%, transparent);
  /* teal lifted toward paper. Flat --teal on --ink is 4.0:1 and on
     --ink-700 only 3.4:1 — under the floor for a 17px label. This mix
     is 5.7:1 / 4.8:1 and still reads unmistakably teal. Tint of two
     palette colours, so it stays inside §2. */
  --teal-soft:color-mix(in srgb, var(--teal) 66%, var(--paper));

  /* one shared step for the whole mid-range of the scale */
  --fs-mid:1.2rem;
  --fs-label-ar:1.0625rem;   /* Arabic labels: 17px floor, BRAND.md §3 rule 3 */

  /* the page runs tighter than the shared --section so seven distinct
     structures still read as one document rather than seven posters */
  --pad:clamp(2.25rem, 3.4vw, 3.05rem);
}


/* ------------------------------------------------------------
   Defect patches (additive — core.css is shared and untouched).
   ------------------------------------------------------------ */

/* 1. The shared header's toggle <svg> carries no .icon class, so it
      inherits fill:#000 / stroke:none and paints nothing: below 900px
      the page would have no visible menu affordance at all. */
.site-header .nav-toggle svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 2. Footer link rows measure 22–31px tall; BRAND.md §12 floors tap
      targets at 44px. Grow the hit area without moving the text. */
.site-footer .footer-col a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.site-footer .footer-col li + li{margin-block-start:0}

/* 3. The footer sets Arabic at --fs-label (15px) and --fs-sm (16px),
      both under the 17px floor BRAND.md §3 rule 3 names explicitly,
      and the column headings inherit line-height 1.32. */
.site-footer .footer-col h3{font-size:1.0625rem;line-height:1.75}
.site-footer .footer-bottom{font-size:1.0625rem;line-height:1.75}
.site-footer .footer-brand .lead{line-height:1.8}   /* core sets 1.7; §3 rule 2 floors body at 1.75 */

/* 4. core's dark-surface eyebrow is gold. On this page gold has four
      jobs (h1 highlight, ؟ glyph, timeline terminus, CTA) and an
      eyebrow is not one of them. */
.masthead .eyebrow{color:var(--teal-soft)}
/* core .eyebrow is --teal, which is 2.7:1 on --paper. --deep is 6.4:1. */
.reality .eyebrow,
.context .eyebrow{color:var(--deep)}
.eyebrow{font-size:var(--fs-label-ar);line-height:1.75}


/* ============================================================
   1. الواجهة — asymmetric split. The focal point is a real object,
      not a texture: the single light card on the page, elevated off
      an ink ground, holding the five services on one spine that
      ends in one line of responsibility.
   ============================================================ */
.masthead{
  position:relative;
  padding-block:clamp(2.6rem, 4.2vw, 3.9rem);
  /* no pattern field here — the hero's job is one focal object, and a
     scattered field behind it just competes with the card.
     The glow is thrown behind the CARD (inline-end = physical left in
     RTL) and dies out well before the copy column, so the teal label
     over there keeps its 5.6:1 against flat --ink. */
  background:
    radial-gradient(110% 125% at 15% 0%,
      color-mix(in srgb, var(--deep) 88%, transparent) 0%,
      transparent 62%),
    var(--ink);
}
.masthead-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}

.page-title{
  font-size:clamp(2.3rem, 4.6vw, 4rem);
  line-height:1.26;
  color:var(--on-dark);
  text-wrap:balance;
}
.page-title .hl{color:var(--gold)}      /* the one gold type moment of this view */

.page-deck{
  margin-block-start:clamp(1.1rem, 2.2vw, 1.6rem);
  max-width:46ch;
  font-size:var(--fs-lead);
  line-height:1.78;
  color:var(--on-dark-body);
}

/* the official positioning line, set as the base register of the column */
.masthead-line{
  position:relative;
  margin-block-start:clamp(1.5rem, 3vw, 2.25rem);
  padding-block-start:clamp(1rem, 2vw, 1.4rem);
  border-block-start:1px solid var(--hair-dark);
  font-size:var(--fs-mid);
  line-height:1.75;
  color:var(--on-dark-body);
  max-width:44ch;
}
.masthead-line::before{
  content:"";
  position:absolute;
  inset-block-start:-4px;
  inset-inline-start:0;
  inline-size:9px;block-size:9px;
  border-radius:var(--r-pill);
  background:var(--teal);
}

/* ---- THE focal object ------------------------------------------ */
.req{
  position:relative;
  background:var(--paper-pure);
  color:var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  padding:clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.35rem, 2.4vw, 1.9rem) clamp(1.5rem, 2.6vw, 2rem);
}
.req-head{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding-block-end:clamp(.9rem, 1.8vw, 1.2rem);
  border-block-end:2px solid var(--teal);
}
.req-kicker{
  font-size:var(--fs-label-ar);
  line-height:1.75;
  color:var(--on-light-soft);
}
.req-title{
  font-size:clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}

.req-spine{margin-block-start:clamp(.75rem, 1.6vw, 1.1rem)}
.req-row{
  position:relative;
  display:grid;
  grid-template-columns:18px 26px auto minmax(1rem,1fr);
  align-items:center;
  gap:var(--s-3);
  padding-block:clamp(.32rem, .8vw, .52rem);
}
/* the spine: one unbroken rule threaded through every node */
.req-row::before,
.req-end::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:8.5px;
  inline-size:1px;
  background:color-mix(in srgb, var(--ink) 20%, transparent);
}
.req-row:first-child::before{inset-block-start:50%}
.req-end::before{inset-block-end:50%}

/* the row's own rule: SOLID and running the whole width. The ledger in
   §2 draws the same figure dashed and five different lengths — this is
   the object those five rows are missing. */
.req-row::after{
  content:"";
  grid-column:4;
  align-self:center;
  block-size:0;
  border-block-start:1px solid color-mix(in srgb, var(--ink) 13%, transparent);
}
.req-dot{
  inline-size:9px;block-size:9px;
  border-radius:var(--r-pill);
  background:var(--teal);
  justify-self:center;
  position:relative;
  z-index:1;
}
.req .icon{width:26px;height:26px;color:var(--deep)}
.req-svc{
  font-size:var(--fs-mid);
  font-weight:500;
  line-height:1.75;
  color:var(--ink);
}

/* the spine lands on one solid node and one sentence */
.req-end{
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  gap:var(--s-3);
  padding-block-start:clamp(.9rem, 1.8vw, 1.2rem);
  font-size:var(--fs-mid);
  font-weight:700;
  line-height:1.6;
  color:var(--ink);
}
.req-dot.is-end{
  inline-size:15px;block-size:15px;
  background:var(--ink);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--teal) 24%, transparent);
}


/* ============================================================
   2. الواقع اليوم — editorial split. Heading and a hanging marginal
      question sit in the narrow margin column; the argument runs as
      one measure beside them; the evidence is a full-width ledger
      that breaks out from under both.
   ============================================================ */
.reality{
  position:relative;
  padding-block:var(--pad);
}
.reality-split{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem, 4.5vw, 4.5rem);
  align-items:start;
}
.reality-h{
  font-size:clamp(1.75rem, 2.9vw, 2.5rem);
  line-height:1.3;
  color:var(--ink);
}

/* the hanging figure: the question the five channels never answer,
   pulled out of the text column into the page gutter */
.hang-q{
  margin-block-start:clamp(1.25rem, 2.4vw, 1.85rem);
  padding-inline-start:clamp(1rem, 1.8vw, 1.4rem);
  border-inline-start:3px solid var(--teal);
}
.hang-q blockquote p{
  font-size:clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight:700;
  line-height:1.5;
  color:var(--deep);
}
.hang-q figcaption{
  margin-block-start:var(--s-3);
  color:var(--on-light-soft);
  line-height:1.78;
  max-width:34ch;
}

.reality-body p{
  max-width:56ch;
  line-height:1.8;
}
.reality-lead{
  font-size:var(--fs-lead);
  line-height:1.78;
  color:var(--ink);
}
.reality-body p + p{
  margin-block-start:var(--s-5);
  color:color-mix(in srgb, var(--ink) 78%, transparent);
}

/* ---- the ledger: five rows, five reaches ------------------------ */
.ledger{margin-block-start:clamp(1.75rem, 3.4vw, 2.9rem)}
.ledger-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-2) var(--s-5);
  padding-block-end:var(--s-3);
  border-block-end:2px solid var(--teal);
  font-size:var(--fs-label-ar);
  line-height:1.75;
  font-weight:500;
  color:var(--on-light-soft);
}
.ledger-head b{font-weight:500;color:var(--deep)}

.chan{
  display:grid;
  grid-template-columns:auto auto minmax(1.5rem,1fr) auto;
  align-items:center;
  gap:var(--s-4);
  padding-block:clamp(.4rem, .85vw, .6rem);
  border-block-end:1px solid var(--hair-light);
}
.chan-n{
  /* Latin digits in a dir="ltr" span — the 17px Arabic floor doesn't apply */
  font-size:var(--fs-label);
  font-weight:500;
  color:var(--on-light-soft);
  font-variant-numeric:tabular-nums;
}
.chan-svc{
  font-size:var(--fs-mid);
  font-weight:500;
  color:var(--ink);
  line-height:1.75;
  white-space:nowrap;
}
/* the connector. Butted against the service name it leaves, five
   different lengths, only ONE of them long enough to arrive. */
.chan-rule{
  justify-self:start;
  inline-size:var(--len, 100%);
  margin-inline-start:calc(-1 * var(--s-4));
  block-size:0;
  border-block-start:1px dashed var(--teal-line);
}
.chan:nth-child(1) .chan-rule{--len:40%}
.chan:nth-child(2) .chan-rule{--len:86%}
.chan:nth-child(3) .chan-rule{--len:58%}
.chan:nth-child(4) .chan-rule{--len:100%}
.chan:nth-child(5) .chan-rule{--len:70%}

/* full --ink held at .74 — the same rendered tone as --on-light-soft (≈5:1
   on paper), but an opacity handle the hover layer can resolve to 1 */
.chan-way{
  color:var(--ink);
  opacity:.74;
  text-align:end;
  line-height:1.75;
}
.ledger-note{
  margin-block-start:var(--s-4);
  max-width:44ch;
  font-size:var(--fs-mid);
  font-weight:500;
  color:var(--deep);
  line-height:1.75;
}


/* ============================================================
   3. التعريف — full-bleed teal band. The page's only flooded teal
      object, and the only section with no structure but one quote.
   ============================================================ */
.creed{
  background:var(--teal);
  color:var(--on-teal);
  padding-block:clamp(2.1rem, 3.4vw, 2.9rem);
}
.creed-inner{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem, 3vw, 3rem);
  align-items:start;
}
.creed-label{
  font-size:var(--fs-label-ar);
  line-height:1.75;
  font-weight:500;
  color:var(--on-teal);
  padding-block-start:clamp(.5rem, 1.2vw, .9rem);
  border-block-start:3px solid var(--on-teal);
}
.creed-quote{grid-column:2;grid-row:1 / span 2}
.creed-quote p{
  font-size:clamp(1.3rem, 2.25vw, 2rem);
  font-weight:700;
  line-height:1.5;
  max-width:56ch;
  color:var(--on-teal);
  text-wrap:pretty;
}
/* the gloss sits in the label rail, not under the quote: the rail is
   otherwise dead space and the band loses a whole line of height */
.creed-foot{
  grid-column:1;
  grid-row:2;
  align-self:start;
  margin-block-start:clamp(.9rem, 1.8vw, 1.4rem);
  color:var(--on-teal);
  line-height:1.75;
}


/* ============================================================
   4. كيف يعمل — numbered vertical timeline. A real spine down the
      numeral rail; the third stop is twice the type of the first
      two and terminates the spine on the page's gold node.
   ============================================================ */
.how{
  position:relative;
  overflow:hidden;
  padding-block:var(--pad);
  background:
    linear-gradient(196deg,
      var(--ink-900) 0%,
      var(--ink) 48%,
      var(--ink-700) 100%);
}
.how .container{position:relative;z-index:1}

.how-head{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1rem, 3vw, 3rem);
  align-items:end;
  padding-block-end:clamp(1.25rem, 2.6vw, 2rem);
  border-block-end:1px solid var(--hair-dark);
}
.how-head h2{
  font-size:clamp(1.75rem, 2.9vw, 2.5rem);
  line-height:1.32;
  color:var(--on-dark);
}
.how-head p{
  color:var(--on-dark-body);
  line-height:1.75;
  text-align:end;
}

.tl{
  position:relative;
  margin-block-start:clamp(1.4rem, 2.6vw, 2.1rem);
}
.tl-item{
  position:relative;
  display:grid;
  grid-template-columns:clamp(48px, 5vw, 58px) minmax(0,1fr);
  gap:clamp(1rem, 2.4vw, 2rem);
  align-items:start;
  padding-block-end:clamp(1.25rem, 2.4vw, 2rem);
}
/* the spine, drawn per item so it starts at the first node and stops
   dead centre on the last one */
.tl-item::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:calc(clamp(48px, 5vw, 58px) / 2 - .5px);
  inline-size:1px;
  background:var(--hair-dark);
}
.tl-item:first-child::before{inset-block-start:clamp(24px, 2.5vw, 29px)}
.tl-item:last-child::before{inset-block-end:calc(100% - clamp(24px, 2.5vw, 29px))}
.tl-item:last-child{padding-block-end:0}

.tl-n{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  inline-size:clamp(48px, 5vw, 58px);
  block-size:clamp(48px, 5vw, 58px);
  border-radius:var(--r-pill);
  background:var(--ink-900);
  border:1px solid var(--teal-line);
  color:var(--teal-soft);
  font-size:var(--fs-label);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
/* the terminus — the single gold node of this screenful */
.tl-item:last-child .tl-n{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink-900);
  font-size:var(--fs-body);
  box-shadow:0 0 0 7px color-mix(in srgb, var(--gold) 15%, transparent);
}

.tl-body{padding-block-start:clamp(.4rem, 1vw, .75rem)}
.tl-body h3{
  font-size:clamp(1.2rem, 1.6vw, 1.4rem);
  line-height:1.5;
  font-weight:500;
  color:var(--on-dark);
}
.tl-body p{
  margin-block-start:var(--s-2);
  max-width:52ch;
  color:var(--on-dark-body);
  line-height:1.8;
}
.tl-item:last-child .tl-body h3{
  font-size:clamp(1.7rem, 2.7vw, 2.35rem);
  line-height:1.34;
  font-weight:700;
}
.tl-item:last-child .tl-body p{
  margin-block-start:var(--s-3);
  max-width:48ch;
  font-size:var(--fs-lead);
  line-height:1.78;
  color:var(--on-dark-body);
}


/* ============================================================
   5. رسالتنا — ONE statement at display scale owns this section.
      رؤيتنا and قيمنا are a small rail beneath it: different shape,
      a third of the type size, no competing headline.
   ============================================================ */
.manifesto{
  position:relative;
  overflow:hidden;
  padding-block:var(--pad);
  border-block-start:1px solid var(--teal-line);
  /* a tonal wash, not a scattered field: nothing may compete with the
     one statement this section exists to carry */
  background:
    radial-gradient(90% 120% at 88% 0%,
      color-mix(in srgb, var(--ink) 55%, transparent) 0%,
      transparent 58%),
    var(--deep);
}
.manifesto .container{position:relative;z-index:1}

/* the statement takes the wide track; its gloss is a marginal note set
   at body size against the statement's baseline, so the section reads
   as ONE utterance with a footnote — never as two blocks */
.mission{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  column-gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:end;
}
.mission-label{grid-column:1;grid-row:1;justify-self:start}
.mission-text{grid-column:1;grid-row:2}
.mission-foot{grid-column:2;grid-row:2;align-self:end}

.mission-label{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  font-size:var(--fs-label-ar);
  line-height:1.75;
  font-weight:500;
  color:var(--on-dark);
  margin-block-end:clamp(.75rem, 1.6vw, 1.25rem);
}
.mission-label::before{
  content:"";
  inline-size:13px;block-size:13px;
  border-radius:5px;
  background:var(--teal);
  flex:none;
}
.mission-text{
  font-size:clamp(1.65rem, 3.15vw, 2.75rem);
  line-height:1.4;
  font-weight:700;
  color:var(--on-dark);
  text-wrap:balance;
}
/* the one gold highlight of this view — solid, so it reads as gold
   rather than as gold-over-teal mud */
.mission-text mark{
  color:inherit;
  white-space:nowrap;
  background:linear-gradient(var(--gold), var(--gold));
  background-repeat:no-repeat;
  background-size:100% .16em;
  background-position:0 88%;
  padding-inline:.08em;
}
.mission-foot{
  max-width:34ch;
  padding-inline-start:clamp(1rem, 1.8vw, 1.4rem);
  border-inline-start:1px solid var(--hair-dark);
  color:var(--on-dark-body);
  line-height:1.8;
}

/* the subordinate rail. Deliberately small, deliberately not blocks:
   a paragraph on one side, a run of four clauses on the other. */
.sub-rail{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(1.5rem, 4vw, 3.5rem);
  margin-block-start:clamp(1.75rem, 3.2vw, 2.6rem);
  padding-block-start:clamp(1.1rem, 2.1vw, 1.6rem);
  border-block-start:1px solid var(--hair-dark);
}
/* labels, not headlines: same size as body, marked by a teal node
   rather than by colour — gold stays on رسالتنا's one underline */
.sub-rail h3{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-label-ar);
  line-height:1.75;
  font-weight:500;
  color:var(--on-dark);
  margin-block-end:var(--s-2);
}
.sub-rail h3::before{
  content:"";
  inline-size:8px;block-size:8px;
  border-radius:3px;
  background:var(--teal);
  flex:none;
}
.vision p{
  color:var(--on-dark-body);
  line-height:1.8;
  max-width:38ch;
}
/* قيمنا is a RUN, not a rack of ruled cells. Four values set as one
   continuous paragraph: the names are bold anchors inside the sentence and
   the only division is a brand squircle. Nothing is capped by a hairline,
   nothing stacks a micro-label over a grey line, and at 390px it collapses
   to a single block of prose instead of four more label rows. */
.values-run{
  line-height:1.9;
  color:var(--on-dark);
  max-width:64ch;
}
.values-run li{display:inline}
.values-run b{font-weight:700;color:var(--on-dark)}
/* full #F3F6F4 held at .88 — identical render to --on-dark-body, but an
   opacity handle the hover layer can resolve to 1 */
.values-run span{opacity:.88}
.values-run li + li::before{
  content:"";
  display:inline-block;
  inline-size:7px;block-size:7px;
  border-radius:2.5px;
  background:var(--teal);
  margin-inline:.28em;
  vertical-align:.14em;
}


/* ============================================================
   6. السياق — asymmetric band. The pattern panel bleeds off the
      inline-end edge of the viewport; the copy hangs on the start.
   ============================================================ */
.context{padding-block:var(--pad)}
.context-band{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  gap:clamp(2rem, 4.5vw, 4rem);
  align-items:stretch;
}
.context-copy h2{
  color:var(--ink);
  font-size:clamp(1.7rem, 2.6vw, 2.2rem);
  line-height:1.32;
}
.context-lead{
  margin-block-start:clamp(.9rem, 1.8vw, 1.4rem);
  font-size:var(--fs-lead);
  line-height:1.78;
  max-width:56ch;
}
/* these paragraphs carry the actual argument, so they sit above the
   --on-light-soft floor (72% ink ≈ 4.6:1) at 80% ≈ 5.5:1 */
.context-copy p.muted{
  margin-block-start:var(--s-4);
  max-width:58ch;
  color:color-mix(in srgb, var(--ink) 80%, transparent);
  line-height:1.8;
}
/* Two icon-led statements, divided by a VERTICAL hairline. The mark is a
   30px icon on the ground — never a tinted square, BRAND.md §7 — and the
   term runs into its own sentence rather than sitting on top of it, so
   this group carries neither the ledger's row nor the قيمنا run. */
.notes{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1rem, 2.6vw, 2.25rem);
  margin-block-start:clamp(1.25rem, 2.6vw, 2rem);
}
.note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--s-4);
  align-items:start;
}
.note + .note{
  padding-inline-start:clamp(1rem, 2.2vw, 1.75rem);
  border-inline-start:1px solid var(--hair-light);
}
.note .icon{
  width:30px;height:30px;
  color:var(--teal);
  margin-block-start:.3rem;     /* optical: centre on the first line */
}
.note p{color:var(--on-light-soft);line-height:1.78}
.note b{font-weight:700;color:var(--ink)}

/* the panel runs off the inline-end edge — the section's one
   asymmetry, and the only place the pattern runs at full strength */
.context-panel{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-block-size:clamp(200px, 22vw, 275px);
  background:var(--deep);
  color:var(--on-dark);
  border-start-start-radius:var(--r-lg);
  border-end-start-radius:var(--r-lg);
  margin-inline-end:calc(-1 * max(1.5rem, (100vw - var(--container)) / 2));
}
.context-panel .pattern-field{
  opacity:.44;
  background-size:230px 230px;
}
.panel-line{
  position:relative;
  z-index:1;
  padding:clamp(1.25rem, 2.4vw, 1.75rem);
  padding-inline-end:clamp(2rem, 4vw, 3.5rem);
  font-size:clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight:700;
  line-height:1.5;
  text-shadow:0 2px 14px color-mix(in srgb, var(--ink-900) 55%, transparent);
}


/* ============================================================
   7. الخاتمة — the page ends dark: one band, one gold action,
      stepping down into the ink-900 footer.
   ============================================================ */
.close{
  position:relative;
  overflow:hidden;
  padding-block:clamp(2.4rem, 4vw, 3.5rem);
  background:
    radial-gradient(80% 150% at 94% 0%,
      color-mix(in srgb, var(--deep) 88%, transparent) 0%,
      transparent 60%),
    var(--ink);
}
.close .container{position:relative;z-index:1}
.close-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem, 4vw, 4rem);
  align-items:center;
}
.close-copy h2{
  font-size:clamp(1.8rem, 3.2vw, 2.75rem);
  line-height:1.28;
  color:var(--on-dark);
}
.close-copy p{
  margin-block-start:var(--s-3);
  max-width:46ch;
  font-size:var(--fs-lead);
  line-height:1.75;
  color:var(--on-dark-body);
}
.close-mail{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  margin-block-start:var(--s-4);
  color:var(--on-dark);
  min-height:44px;
}
.close-mail .icon{width:20px;height:20px;color:var(--teal-soft)}
.close-mail span[dir="ltr"]{
  border-block-end:1px solid var(--teal-line);
  padding-block-end:2px;
  transition:border-color var(--t-fast) var(--e-soft);
}
/* kept outside the motion query: a reduced-motion user still gets the
   affordance, they just don't get the envelope moving with it */
.close-mail:hover span[dir="ltr"],
.close-mail:focus-visible span[dir="ltr"]{border-block-end-color:var(--teal)}
.close-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-4);
}


/* ============================================================
   8. Motion & response — meaning only

   One idea, applied seven times: under attention, a thing RESOLVES.
   The connector reaches further, the muted line comes up to full ink,
   the node acknowledges, the mark grows. Every transition is transform
   or opacity (BRAND.md §11) and the whole layer sits inside
   prefers-reduced-motion:no-preference.

   Nothing below is given a pointer cursor. Only .close-mail and the two
   buttons carry an href, and those get :focus-visible as well as :hover;
   the ledger rows, timeline stops, values and notes are content, so the
   response is a reading emphasis and never a promise of navigation.

   Hover transforms are hung on CHILDREN throughout: .chan, .req,
   .tl-item and .note all carry .reveal, whose .is-in{transform:none}
   would otherwise fight them.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){

  /* ---- entrance (unchanged) ---- */
  .chan.reveal{transform:translateY(16px)}
  .chan.reveal.is-in{transform:none}

  .req.reveal{transform:translateY(24px) scale(.99);transform-origin:50% 100%}
  .req.reveal.is-in{transform:none}

  /* ---- 1. الواجهة — the five services move as ONE request, then the
       row under the pointer names itself ---- */
  .req-row,.req-end{transition:transform var(--t-mid) var(--e-out)}
  .req:hover .req-row,
  .req:hover .req-end{transform:translateX(-3px)}
  .req-dot,.req .icon{transition:transform var(--t-mid) var(--e-out)}
  .req-row:hover .req-dot{transform:scale(1.45)}
  .req-row:hover .icon{transform:translateX(-3px)}
  .req:hover .req-dot.is-end{transform:scale(1.12)}

  /* ---- 2. الواقع — the ledger. A row that is read reaches further and
       its channel comes up out of the grey. The connector is anchored at
       the service name it leaves (in RTL, the box's right edge), so it
       grows toward the far column rather than sliding. ---- */
  .chan{transition:border-color var(--t-mid) var(--e-soft)}
  .chan:hover{border-block-end-color:var(--teal)}
  .chan-rule{
    transform-origin:100% 50%;
    transition:transform var(--t-mid) var(--e-out);
  }
  .chan:hover .chan-rule{transform:scaleX(1.16)}
  .chan-way{transition:opacity var(--t-fast) var(--e-soft)}
  .chan:hover .chan-way{opacity:1}

  /* ---- 4. كيف يعمل — the node acknowledges, the stop leans in ---- */
  .tl-n,.tl-body{transition:transform var(--t-mid) var(--e-out)}
  .tl-item:hover .tl-n{transform:scale(1.07)}
  .tl-item:hover .tl-body{transform:translateX(-4px)}

  /* ---- 5. قيمنا — the clause under the pointer resolves to full weight,
       and its divider opens up ---- */
  .values-run span{transition:opacity var(--t-fast) var(--e-soft)}
  .values-run li:hover span{opacity:1}
  .values-run li + li::before{transition:transform var(--t-mid) var(--e-out)}
  .values-run li:hover::before{transform:scale(1.34)}

  /* ---- 6. السياق — the mark answers; the panel's texture drifts a hair ---- */
  .note .icon{transition:transform var(--t-mid) var(--e-out)}
  .note:hover .icon{transform:scale(1.12)}
  .context-panel .pattern-field{transition:transform var(--t-slow) var(--e-out)}
  .context-panel:hover .pattern-field{transform:scale(1.05)}

  /* ---- 7. الخاتمة — a real link: the envelope moves toward the address
       (forward = inline-start in RTL, matching core's .btn .arrow) ---- */
  .close-mail .icon{transition:transform var(--t-mid) var(--e-out)}
  .close-mail:hover .icon,
  .close-mail:focus-visible .icon{transform:translateX(-4px)}
}


/* ============================================================
   9. Responsive — 1440 / 1024 / 768 / 375
   ============================================================ */
@media (min-width:1281px){
  /* the marginal question hangs into the page gutter, which only
     exists once the viewport is wider than the container */
  .hang-q{margin-inline-start:-2.5rem}
}

@media (max-width:1080px){
  .mission{grid-template-columns:1fr;align-items:start}
  .mission-label{grid-column:1;grid-row:1}
  .mission-text{grid-column:1;grid-row:2;max-width:26ch}
  .mission-foot{
    grid-column:1;grid-row:3;
    margin-block-start:clamp(1.1rem, 2.2vw, 1.6rem);
    max-width:52ch;
    padding-inline-start:0;
    border-inline-start:0;
  }

  .masthead-grid{
    grid-template-columns:1fr;
    gap:clamp(2rem, 5vw, 3rem);
    align-items:start;
  }
  .req{max-width:34rem}
  .page-deck{max-width:56ch}

  .reality-split,
  .context-band{grid-template-columns:1fr}
  .hang-q{max-width:46ch}
  .reality-body p{max-width:60ch}

  .how-head{grid-template-columns:1fr;align-items:start;gap:var(--s-3)}
  .how-head p{text-align:start}

  .sub-rail{grid-template-columns:1fr;row-gap:clamp(1.25rem, 3vw, 1.75rem)}
  .vision p{max-width:56ch}

  .context-panel{
    min-block-size:clamp(180px, 30vw, 240px);
    border-start-start-radius:var(--r-md);
    border-end-start-radius:var(--r-md);
  }
}

@media (max-width:900px){
  .creed-inner{grid-template-columns:1fr;gap:var(--s-4)}
  .creed-label{justify-self:start;padding-inline-end:var(--s-6)}
  .creed-quote{grid-column:1;grid-row:auto}
  .creed-foot{grid-column:1;grid-row:auto}
  .creed-quote p{max-width:38ch}

  .close-grid{grid-template-columns:1fr;align-items:start}
}

/* mobile header: the gold CTA is the only conversion path in the bar,
   so it stays visible instead of collapsing into the hidden panel */
@media (max-width:900px){
  .site-header .brand{order:1}
  .site-header .nav-cta{
    display:inline-flex;
    order:2;
    margin-inline-start:auto;
    min-height:46px;
    padding-inline:var(--s-4);
  }
  .site-header .nav-cta .arrow{display:none}
  .site-header .nav-toggle{order:3;margin-inline-start:0}
  .site-header .container{gap:var(--s-3)}
}

@media (max-width:760px){
  .page-title br{display:none}
  .req{max-width:none}

  .ledger-head{gap:var(--s-1) var(--s-4)}
  /* the connector STAYS. Hiding it here was what turned the ledger into
     five more label-over-grey-line rows at phone width; keeping it means
     the five different reaches — the whole point of the figure — survive
     down to 375px. */
  .chan{
    grid-template-columns:auto auto minmax(1.5rem,1fr);
    gap:var(--s-1) var(--s-4);
  }
  .chan-n{grid-column:1;grid-row:1}
  .chan-svc{grid-column:2;grid-row:1;white-space:normal}
  .chan-rule{grid-column:3;grid-row:1}
  .chan-way{grid-column:2 / -1;grid-row:2;text-align:start}

  .notes{grid-template-columns:1fr;gap:var(--s-5)}
  .note + .note{padding-inline-start:0;border-inline-start:0}

  .context-panel{
    min-block-size:170px;
    margin-inline-start:calc(-1 * max(1.5rem, (100vw - var(--container)) / 2));
    border-radius:0;
  }

  .close-actions{width:100%}
  .close-actions .btn{flex:1 1 14rem}
}

@media (max-width:420px){
  .req{border-radius:var(--r-md);padding-inline:var(--s-4)}
  .req-title{font-size:1.375rem}
  .mission-text{font-size:clamp(1.5rem, 7.4vw, 1.95rem);max-width:none}
  .tl-body h3{font-size:1.2rem}
  .site-header .nav-cta{font-size:var(--fs-sm);padding-inline:var(--s-3)}
}