/* ===========================================================================
   05 · EXPERTISE — prefix .exp-  /  .exp__

   Twelve services in two tracks of six. The failure mode this file is written
   against is a flat list of twelve cells that reads as a spreadsheet, so the
   two tracks are given surfaces, not just labels: applications sits on the
   grey tray the site already uses elsewhere, project management sits on ink.
   A visitor who only cares about one of the two can find it without reading
   a word of the other.

   Everything directional is logical (inline-start / inline-end / block-*),
   because index.html is Arabic and RTL and en.html is English and LTR, from
   one stylesheet. No physical side property appears anywhere below, so the
   physical-property grep over this file returns zero — including over this
   comment, which is why it does not spell the banned names out.
   =========================================================================== */

.exp {
  padding-block: 72px;          /* same rhythm as 04 · services above it */
  background: #fff;
}

/* -- section header ------------------------------------------------------ */

.exp__head {
  max-width: 752px;
  margin-inline: auto;
  margin-block-end: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.exp__title {
  margin: 0;
  font-size: 48px;
  line-height: 56.16px;
  font-weight: 500;
  letter-spacing: -0.06em;      /* -2.88px at 48px, the measured h2 */
  color: var(--ink);
}
.exp__dim { color: rgba(19, 19, 19, 0.5); }

.exp__lede {
  max-width: 560px;
  color: var(--body);
  text-wrap: balance;
}

/* -- one track ----------------------------------------------------------- */
/* The heading lives INSIDE the panel with its six cards. There is no width at
   which the two can come apart, because they are never siblings of anything
   else. */

.exp-track {
  border-radius: var(--gap);    /* 24px, the site's panel radius */
  padding: 40px;
}
.exp-track + .exp-track { margin-block-start: var(--gap); }

.exp-track--apps { background: var(--card-grey); }
.exp-track--pm   { background: var(--ink); }

/* The starfield canvas, created by motion.js and inserted as this panel's
   first child. overflow:hidden is set HERE and not inherited from anywhere:
   .exp-track has a border-radius but no clipping, so without this the canvas
   would paint square corners over the panel's rounded ones. The cards inside
   carry their own background, so the stars show only in the gutters and the
   header band, which is where they read as sky rather than as noise. */
.exp-track--pm { position: relative; overflow: hidden; }
.exp-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.exp-track--pm > *:not(.exp-stars) { position: relative; z-index: 1; }

.exp-track__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block-end: 24px;
  margin-block-end: 32px;
  border-block-end: 1px solid rgba(19, 19, 19, 0.12);
}
.exp-track--pm .exp-track__head { border-block-end-color: rgba(255, 255, 255, 0.16); }

/* One colour per track, and it appears in exactly one place: the badge. Lime
   lamp and blue pie are the same pair the about headline already uses, so the
   two tracks read as a continuation of the page rather than a new idea. */
.exp-track__badge {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
}
.exp-track__badge svg { width: 26px; height: 26px; }

.exp-track--apps .exp-track__badge { background: var(--lime); color: var(--ink); }
.exp-track--pm   .exp-track__badge { background: var(--blue); }

/* fill for #i-bulb, which inherits currentColor; #i-pie paints its own white */
.exp-track--apps .exp-track__badge svg { fill: currentColor; }

.exp-track__name {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
  letter-spacing: -0.06em;      /* -2.4px at 40px, the measured figure size */
  color: var(--ink);
}
.exp-track--pm .exp-track__name { color: #fff; }

/* -- the six cards ------------------------------------------------------- */

.exp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.exp-card {
  min-height: 200px;            /* the air: no card is allowed to be a table row */
  padding: 28px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}

/* THE SEVENTH CARD. Seven items in a three-column grid leaves one alone at the
   end of the last row, which reads as a mistake rather than a count. It spans
   the row instead and turns its contents sideways, so the shape says "this is
   the last one" at three columns and at two. Below 810 the grid is one column
   and this rule turns itself off - a full-width card there is every card. */
@media (min-width: 810px) {
  .exp-card:nth-child(7):last-child {
    grid-column: 1 / -1;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }
  /* The text turns sideways too. Left as a stacked block it sat in the last
     350px of a 1256px card with the rest empty, which looked like a bug rather
     than a decision. Title and body on one line spend the width instead. */
  .exp-card:nth-child(7):last-child .exp-card__text {
    margin-block-start: 0;      /* the column layout pins text to the bottom */
    padding-block-start: 0;
    flex: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 24px;
  }
  .exp-card:nth-child(7):last-child .exp-card__title { flex: 0 0 auto; }
  .exp-card:nth-child(7):last-child .exp-card__body  { flex: 1; }
  .exp-card:nth-child(7):last-child .exp-card__no { align-self: center; }
}

.exp-track--apps .exp-card {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
/* THE CARDS LET THE SKY THROUGH. Measured on the live page, these six covered
   63% of the panel, so almost two thirds of the starfield was being painted
   where nobody could ever see it. At .8 the card is still visibly a card and
   the stars carry on behind it, which is what makes the panel read as sky
   rather than as a dark box with a few specks in the margins.
   Contrast is unaffected in any way that matters: white text over
   rgba(29,29,29,.8) on #131313 sits at 15:1, and even a star directly behind a
   glyph only lifts the local ground to about #4a4a4a, which is still 8:1. */
.exp-track--pm .exp-card {
  background: rgba(29, 29, 29, .8);
  border: 1px solid rgba(255, 255, 255, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .exp-track--pm .exp-card { background: #1d1d1d; }
}
@media (prefers-reduced-transparency: reduce) {
  .exp-track--pm .exp-card { background: #1d1d1d; }
}

.exp-card:hover { transform: translateY(-4px); }
.exp-track--apps .exp-card:hover { box-shadow: 0 12px 26px rgba(6, 46, 82, .10); }
.exp-track--pm   .exp-card:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .34); }

/* The ordinal. Mono, small, quiet — it is the thing that turns twelve equal
   lines into two counted sets of six, and it repeats the count the headline
   makes. It states nothing about anything, so it can never become a claim
   OSUS cannot defend. */
.exp-card__no {
  align-self: start;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;       /* Western digits only — see the RTL block */
  /* BOTH OF THESE COMMENTS USED TO STATE A NUMBER THE COLOUR DID NOT HAVE.
     #8a8a8a was labelled "6.2:1 on white" and is 3.45:1; the ink track's
     rgba(255,255,255,.45) was labelled "5.0:1" and composites to 4.39:1.
     Both under AA at 14px, and both certified as passing by a comment - so
     reading the file could never have found it. Recomputed, not re-asserted. */
  color: #6f6f6f;               /* 5.02:1 on white — the value .exp-card__body uses */
  transition: color .3s;
}
/* The :hover rules below lift these to --ink and --lime, and hover cannot fire
   on a touch device, so the resting colour is the only colour a phone ever
   shows. It has to pass on its own. */
.exp-track--pm .exp-card__no { color: rgba(255, 255, 255, .55); }  /* 5.92:1 on #1d1d1d */

.exp-track--apps .exp-card:hover .exp-card__no { color: var(--ink); }
.exp-track--pm   .exp-card:hover .exp-card__no { color: var(--lime); }

/* Pinned to the bottom, so every card in a row shares one baseline for its
   title however long the line above it ran. */
.exp-card__text {
  margin-block-start: auto;
  padding-block-start: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exp-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.04em;      /* -0.96px at 24px, the measured h3 */
  color: var(--ink);
  text-wrap: balance;
}
.exp-track--pm .exp-card__title { color: #fff; }

.exp-card__body {
  font-size: 16px;
  line-height: 24px;
  color: #6f6f6f;               /* 5.2:1 on white */
}
.exp-track--pm .exp-card__body { color: rgba(255, 255, 255, .62); }  /* 6.9:1 on #1d1d1d */

/* ============================================================== RTL ===== */
/* Scoped to .exp so nothing here can reach another agent's section. */

/* The shared .mono sets +1.68px of tracking, which severs the joins between
   Arabic letters. Only the eyebrow carries .mono in this section; the ordinals
   use their own class and keep their tracking, because they are digits. */
[dir="rtl"] .exp .mono { letter-spacing: 0; }

/* Arabic wants more leading than Latin at the same size, so the two large
   headings are relaxed here rather than in the shared value. */
[dir="rtl"] .exp__title      { line-height: 1.32; }
[dir="rtl"] .exp-track__name { line-height: 1.35; }

/* ======================================================= RESPONSIVE ==== */

/* three columns from 1280 up, two below it */
@media (max-width: 1279px) {
  .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-track { padding: 28px; }
  .exp__title { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.17; }
  [dir="rtl"] .exp__title { line-height: 1.32; }
  .exp-track__name { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; }
  [dir="rtl"] .exp-track__name { line-height: 1.35; }
  .exp-card { min-height: 188px; padding: 24px; }
  .exp-card__text { padding-block-start: 24px; }
}

/* one column below 810 */
@media (max-width: 809px) {
  .exp { padding-block: 56px; }
  .exp__head { margin-block-end: 40px; }
  .exp__lede { max-width: 100%; }
  .exp-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .exp-track { padding: 20px; }
  .exp-track__head { gap: 12px; padding-block-end: 20px; margin-block-end: 20px; }
  .exp-track__badge { width: 40px; height: 40px; border-radius: 12px; }
  .exp-track__badge svg { width: 22px; height: 22px; }
  .exp-card { min-height: 0; padding: 20px; }
  .exp-card__text { padding-block-start: 20px; }
  .exp-card__title { font-size: 21px; line-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-card, .exp-card__no { transition: none; }
  .exp-card:hover { transform: none; }
}