/* ═══════════════════════════════════════════════════════════════
   DIRIGO — shared section heads and the footer.
   Loaded after sections.css so it can raise the earlier defaults.
   ═══════════════════════════════════════════════════════════════ */

/* ── one head pattern for every section ──────────────────────────
   Eyebrow, a title with real presence, and a supporting line set large
   enough to read as copy rather than as a caption. */
.sec-head{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,5vw,5rem);align-items:end;
}
/* Was --ink-faint (black at .32) on paper: about 2.4:1, under AA for text this
   small, and it read as a watermark rather than a label. Brand blue clears
   4.7:1 at a size and weight that can actually be seen. Cyan was tried first
   and fails — it only carries about 2:1 on a light ground. */
.sec-eyebrow{
  display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1.1rem;
  font-size:.9rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);
}
.sec-eyebrow::before{content:"";width:34px;height:1px;background:var(--cyan)}
.sec-head h2{
  font-weight:800;letter-spacing:-.038em;line-height:1;
  font-size:clamp(2.2rem,5.4vw,4.4rem);
  text-wrap:balance;
}
.sec-lede{
  margin:0;max-width:46ch;
  font-size:clamp(1.05rem,1.45vw,1.22rem);line-height:1.8;
  color:var(--ink-soft);text-wrap:pretty;
}
.sec-lede strong{color:var(--ink);font-weight:500}
@media(max-width:900px){
  .sec-head{grid-template-columns:1fr;align-items:start;gap:1.4rem}
}

.clients .sec-head{margin-bottom:4.5rem}
.cases .sec-head{margin-bottom:5rem}

/* ── worlds head ─────────────────────────────────────────────────
   Same pattern, dialled down: it shares the pinned frame with a panel, so
   it gets presence without stealing the panel's vertical room. */
.worlds-head{align-items:flex-start}
.worlds-head .sec-eyebrow{margin-bottom:.7rem}
.worlds-head h2{
  font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2.2rem,3.7vw,3.1rem);
}
.worlds-count{
  direction:ltr;margin:0;align-self:flex-start;
  font-size:.86rem;letter-spacing:.26em;color:var(--ink-faint);
}
.worlds-count b{color:var(--ink);font-weight:700}
/* The bigger head needs the panel to start lower. */
.world{padding-block:16.8rem 6rem}
@media(max-width:900px){
  .world{padding-block:3.5rem 4.5rem}
  /* Unpinned here, so the head owns its own row and can carry real weight. */
  .worlds-head h2{font-size:clamp(2.8rem,10.5vw,4rem)}
}


/* Build credit — quiet by default, brand cyan on hover. */
.foot-credit{
  font-size:.78rem;letter-spacing:.22em;color:var(--ink-faint);
  direction:ltr;transition:color .35s;
}
.foot-credit:hover{color:var(--cyan)}