/* ============================================================
   ALTIDA — Project detail page
   ------------------------------------------------------------
   Loads AFTER tokens.css + components.css + homepage.css + projects.css.
   Reuses the hub's .prj-hero (so the page hero stays consistent with the
   hub) and the hub's .prj-card / .prj-cta for the related/CTA bands.

   Editorial discipline: ONE column-width across the whole article, an
   eyebrow + heading + body pattern repeated, a sticky Project File
   sidebar on the right, contained imagery at fixed aspect-ratio (no
   full-bleed stretching, no decorative gimmicks). Yellow used sparingly
   — on the eyebrow rules, sidebar top stripe, key markers.
   ============================================================ */

:root {
  --pd-shell:   1280px;     /* outer container max */
  --pd-col:     1140px;     /* THE editorial column — every section sits at this width */
  --pd-text:    760px;      /* body column inside the overview row (next to the sidebar) */
  --pd-aside:   320px;      /* sidebar width in the overview row */
  --pd-head:    340px;      /* left column for eyebrow + heading in split rows */
  --pd-gap:     60px;       /* body ↔ sidebar / head ↔ body gap */
}

/* ── HERO — additions on .prj-hero (matches the hub) ──────── */
.pd-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--altida-white);
  margin: 0 0 26px; text-wrap: balance;
}
.pd-hero__sub {
  font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55; color: rgba(255,255,255,0.86);
  max-width: 56ch; margin: 0;
}

/* ============================================================
   ARTICLE — every block sits at the SAME column width, centred
   ============================================================ */

.pd { background: var(--altida-white); }
.pd__inner {
  max-width: var(--pd-shell); margin: 0 auto; padding: 0 var(--gutter);
}

/* Every <section>.pd-row is constrained to --pd-col and centred, so the
   overview, file panel, images, brief, approach and outcome all sit at
   the same outer width. The INTERNAL layout varies by row variant:
     • .pd-row--aside  : overview — body left, Project File sidebar right
     • .pd-row--split  : brief / approach / outcome — head left, body right
*/
.pd-row {
  max-width: var(--pd-col); margin: 0 auto;
  padding-block: clamp(56px, 7vw, 96px);
}
.pd-row + .pd-row { padding-top: 0; }

.pd-row--aside {
  display: grid;
  grid-template-columns: minmax(0, var(--pd-text)) var(--pd-aside);
  gap: var(--pd-gap);
  align-items: start;
}
.pd-row--split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--pd-gap); /* match the Overview row's column gap (60px) for a consistent page rhythm */
  align-items: start;
}
.pd-row--split .pd-head .pd-h { margin-bottom: 28px; }
/* Align the bullet list with the FIRST LINE of the first paragraph: the body's
   top padding matches the eyebrow + 2-line heading block height on the left.
   Tracks the heading's responsive font (clamp 28–40px × 2 lines) so it stays
   in line at every desktop width, not just one. */
.pd-row--split .pd-body { padding-top: calc(71px + 2 * clamp(28px, 2.8vw, 40px)); }
.pd-row--split .pd-body .pd-list { margin-top: 0; }

@media (max-width: 920px) {
  .pd-row--aside,
  .pd-row--split { grid-template-columns: 1fr; gap: 32px; }
  .pd-row--split .pd-body { padding-top: 0; } /* stacked — the 32px row gap handles spacing */
}

.pd-head { position: relative; }

/* Body widths by row variant.
   • default .pd-row (approach / outcome): single column, body centred at a comfortable reading width
   • --aside (overview): body fills the grid cell next to the sidebar
   • --split (brief): body sits in the right grid cell next to the head */
.pd-body { max-width: 100%; }
.pd-row--split .pd-body { max-width: 66ch; }

/* ── Section eyebrow + heading + paragraphs ──────────────── */
.pd-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--altida-black); margin: 0 0 22px;
}
.pd-eyebrow::before {
  content: ""; width: 36px; height: 4px; background: var(--altida-yellow);
}

.pd-h {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 2.8vw, 40px); line-height: 1; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--altida-black);
  margin: 0 0 28px; text-wrap: balance;
}
.pd-head .pd-h { margin-bottom: 0; }
/* First section heading — slightly larger so it sets the article opening */
.pd-row:first-of-type .pd-h { font-size: clamp(32px, 3.2vw, 48px); }

.pd-lead {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -0.005em;
  color: var(--altida-black); margin: 0 0 22px;
}
.pd-p {
  font-family: var(--font-body); font-size: clamp(16px, 1.18vw, 18px);
  line-height: 1.7; color: var(--ink-secondary); margin: 0 0 18px;
}
.pd-p:last-child { margin-bottom: 0; }
.pd-p strong { color: var(--altida-black); font-weight: 700; }

/* Subheads inside a section (e.g. stages of the approach) — Inter caps,
   quiet, no numbering. Yellow short rule above ties them to the system. */
.pd-sub {
  font-family: var(--font-sans); font-weight: 800; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--altida-black);
  margin: 32px 0 12px; padding-top: 18px; position: relative;
  border-top: 1px solid var(--hairline);
}
.pd-sub::before {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 28px; height: 3px; background: var(--altida-yellow);
}
.pd-body .pd-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pd-body .pd-sub:first-child::before { display: none; }

/* Constraints / key-point list (yellow square markers, restrained) */
.pd-list {
  margin: 24px 0 6px; padding: 0; list-style: none;
  display: grid; gap: 12px;
}
.pd-list li {
  position: relative; padding-left: 26px;
  font-family: var(--font-body); font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.6; color: var(--altida-black);
}
.pd-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 10px; background: var(--altida-yellow);
}
.pd-list li b { font-weight: 700; }

/* ============================================================
   PROJECT FILE — sidebar on the right of the overview row
   ============================================================ */
.pd-file {
  /* static (not sticky): the Project File scrolls with the page on every project
     page and can never pin — its height varies with the row count, so sticky would
     pin whenever the body ran taller than it (operator dislikes the "moving" panel). */
  position: static;
  background: var(--altida-pure-black); color: var(--altida-white);
  padding: clamp(28px, 2.4vw, 36px) clamp(26px, 2.2vw, 32px);
  border-top: 4px solid var(--altida-yellow);
  align-self: start;
}
@media (max-width: 920px) { .pd-file { position: static; } }

.pd-file__title {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-family: var(--font-sans); font-weight: 800;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
}
.pd-file__title::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.18);
}

.pd-file__list { list-style: none; margin: 0; padding: 0; }
.pd-file__row {
  display: grid; grid-template-columns: 92px 1fr; gap: 16px;
  align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.pd-file__row:last-child { border-bottom: 0; padding-bottom: 0; }
.pd-file__k {
  font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.pd-file__v {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--altida-white); font-feature-settings: 'tnum' 1;
}
.pd-file__v b { font-weight: 700; }
/* Equipment row — stacked bullets (crane/trucks + rigging, one per line) */
ul.pd-file__v--list { margin: 0; padding: 0; list-style: none; }
.pd-file__v--list li { position: relative; padding-left: 15px; }
.pd-file__v--list li + li { margin-top: 6px; }
.pd-file__v--list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; background: var(--altida-yellow);
}

/* ============================================================
   MEDIA — same column width as everything else, centred
   ============================================================ */
.pd-media {
  max-width: var(--pd-col); margin: 0 auto;
  padding-block: clamp(40px, 5vw, 72px);
}
.pd-row + .pd-media { padding-top: clamp(28px, 3.4vw, 48px); }
.pd-media__frame {
  position: relative; overflow: hidden;
  background: var(--altida-pure-black);
  aspect-ratio: 16 / 9;
}
.pd-media__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pd-media__caption {
  margin: 14px 0 0;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
  display: flex; align-items: baseline; gap: 12px;
}
.pd-media__caption::before {
  content: ""; width: 22px; height: 2px; background: var(--altida-yellow);
  position: relative; top: -3px; flex: none;
}

/* Media pair — two equal frames at 4/3 */
.pd-media--pair .pd-media__frames {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.pd-media--pair .pd-media__frame { aspect-ratio: 4 / 3; }
@media (max-width: 680px) { .pd-media--pair .pd-media__frames { grid-template-columns: 1fr; } }

/* ============================================================
   RELATED — reuses .prj-card from the hub
   ============================================================ */
.pd-related { background: var(--altida-bone); color: var(--altida-black); padding-block: clamp(56px, 7vw, 96px); }
.pd-related__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.pd-related__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px; margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.pd-related__head .v3-eyebrow { margin: 0; }
.pd-related__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--altida-black); margin: 14px 0 0;
}
.pd-related .prj-hero__dot { color: var(--altida-yellow); }
.pd-related__all {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-end;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--altida-black); text-decoration: none;
  padding-bottom: 6px; border-bottom: 2px solid var(--altida-yellow);
}
.pd-related__all .arrow { transition: transform var(--dur-fast) var(--ease-mech); }
.pd-related__all:hover .arrow { transform: translateX(4px); }
.pd-related__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px); align-items: stretch;
}
@media (max-width: 980px) { .pd-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pd-related__grid { grid-template-columns: 1fr; } }

/* ============================================================
   MOTION — gentle reveal
   ============================================================ */
[data-section-reveal].pd-row,
[data-section-reveal].pd-media,
.pd-related[data-section-reveal] .pd-related__head,
.pd-related[data-section-reveal] .prj-card {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease-mech), transform 700ms var(--ease-mech);
}
.pd-row.is-revealed,
.pd-media.is-revealed,
.pd-related.is-revealed .pd-related__head,
.pd-related.is-revealed .prj-card { opacity: 1; transform: none; }
.pd-related.is-revealed .prj-card:nth-child(2) { transition-delay: 90ms; }
.pd-related.is-revealed .prj-card:nth-child(3) { transition-delay: 160ms; }

/* ── FLEET GRID — 4 info-cards used on service-detail pages
   (e.g. General Haulage). White cards on the white article body, with
   a yellow leading-rule that grows on hover — same brand-grammar as
   the drawer-link reveal, sized down for an article-body context. */
.pd-fleet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(20px, 2vw, 32px);
}
@media (min-width: 720px) {
  .pd-fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .pd-fleet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pd-fleet-card {
  position: relative;
  /* Subtle off-white tint so cards read as discrete containers on the
     white article body without the ghost-border problem (a hairline
     border on white at 0.08 opacity is neither designed nor invisible). */
  background: #f8f7f4;
  border: none;
  padding: clamp(20px, 1.8vw, 28px) clamp(20px, 1.8vw, 28px) clamp(20px, 1.8vw, 28px) clamp(24px, 2vw, 32px);
  display: flex; flex-direction: column;
  gap: 10px;
  transition: background var(--dur-fast) var(--ease-mech),
              transform var(--dur-fast) var(--ease-mech);
}
.pd-fleet-card::before {
  content: "";
  position: absolute;
  top: clamp(20px, 1.8vw, 28px);
  left: 0;
  width: 3px; height: 28px;
  background: var(--altida-yellow);
  transition: height var(--dur-fast) var(--ease-mech);
}
.pd-fleet-card:hover {
  background: #f3f2ee;
  transform: translateY(-2px);
}
.pd-fleet-card:hover::before { height: 48px; }
.pd-fleet-card__title {
  /* Inter caps at body scale — Lovelo Black is reserved for ≥ 32 px per
     the design system; at this size the brand-anchor is carried by the
     yellow leading-rule instead. */
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--altida-black);
  margin: 0;
  line-height: 1.3;
}
.pd-fleet-card__desc {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.72);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pd-fleet-card,
  .pd-fleet-card::before { transition: none; }
}

/* ── SECTORS — restrained list-grid used on service-detail pages */
.pd-sectors {
  list-style: none;
  margin: clamp(24px, 2.4vw, 36px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
@media (min-width: 720px) {
  .pd-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .pd-sectors { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.pd-sectors li {
  position: relative;
  padding: clamp(14px, 1.4vw, 18px) clamp(12px, 1.2vw, 18px);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--altida-black);
}
.pd-sectors li::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 1px;
  background: var(--altida-yellow);
  transition: width var(--dur-fast) var(--ease-mech);
}
.pd-sectors li:hover::before { width: 28px; }
@media (prefers-reduced-motion: reduce) {
  .pd-sectors li::before { transition: none; }
}

/* ── GH-FLEET — photographic 2x2 fleet showcase for service-detail pages
   (e.g. General Haulage). Dark section background, photographic cards
   with bottom-anchored title + description over a gradient veil. */
.gh-fleet {
  background: var(--altida-black, #0a0a0a);
  color: var(--altida-white);
  padding: clamp(72px, 9vw, 128px) 0;
}
.gh-fleet__head {
  text-align: left;
  margin-bottom: clamp(40px, 5vw, 72px);
  max-width: 720px;
}
.gh-fleet__title {
  font-family: var(--font-display, "Lovelo Black"), sans-serif;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 14px 0 0;
  color: var(--altida-white);
}
.gh-fleet__title em {
  color: var(--altida-yellow);
  font-style: normal;
}
.gh-fleet__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 22px);
}
@media (min-width: 720px) {
  .gh-fleet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gh-fleet__card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #111;
}
.gh-fleet__card-media { position: absolute; inset: 0; }
.gh-fleet__card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-mech);
  will-change: transform;
}
.gh-fleet__card:hover .gh-fleet__card-media img,
.gh-fleet__card:focus-within .gh-fleet__card-media img {
  transform: scale(1.04);
}
.gh-fleet__card-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.2) 100%);
  transition: background var(--dur-base) var(--ease-mech);
}
.gh-fleet__card:hover .gh-fleet__card-veil,
.gh-fleet__card:focus-within .gh-fleet__card-veil {
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.25) 100%);
}
.gh-fleet__card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(24px, 2.4vw, 40px);
  z-index: 2;
  color: var(--altida-white);
}
.gh-fleet__card-title {
  font-family: var(--font-display, "Lovelo Black"), sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.005em;
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--altida-white);
}
.gh-fleet__card-desc {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 56ch;
}
@media (prefers-reduced-motion: reduce) {
  .gh-fleet__card-media img,
  .gh-fleet__card-veil { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-section-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   GALLERY CAROUSEL — reusable "peek" photo carousel for any
   project page with more than three photos. The current photo is
   centred and full-strength; the previous + next photos peek in,
   dimmed and slightly scaled, either side. Infinite loop (no start
   / end — project-carousel.js clones the edges and wraps), arrow
   nav, keyboard + swipe. Slim band on the light "bone" panel (same
   colour as the General Haulage fleet section). Drop the .pd-gallery
   markup + project-carousel.js on a page; the JS auto-wires it.
   ============================================================ */
.pd-gallery {
  background: var(--altida-bone);
  color: var(--altida-black);
  padding-block: clamp(36px, 4.5vw, 72px);
  overflow: hidden;              /* clip the peeking neighbours at the edges */
}

.pd-carousel { position: relative; }
.pd-carousel__viewport { overflow: hidden; }
.pd-carousel__track {
  display: flex; align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  will-change: transform;
  transition: transform 560ms cubic-bezier(0.33, 0, 0.2, 1);
}
.pd-carousel__track.is-no-anim { transition: none; }
.pd-carousel__slide {
  /* Each slide sizes to its OWN photo — fixed height, width follows the
     image. So a portrait slide is narrow and its neighbours sit right
     against it; the peek is always real image, never empty letterbox
     margin (which made portraits look like the end of the reel). */
  flex: 0 0 auto; margin: 0;
  height: clamp(300px, 56vh, 580px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0.4; transform: scale(0.92);
  transition: opacity 480ms var(--ease-mech), transform 480ms var(--ease-mech);
}
.pd-carousel__slide.is-current { opacity: 1; transform: scale(1); cursor: default; }
.pd-carousel__slide img {
  max-height: 100%; max-width: 86vw; width: auto; height: auto;
  object-fit: contain; display: block;
  pointer-events: none; user-select: none;
}

.pd-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: var(--altida-white);
  background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease-mech),
              transform var(--dur-fast) var(--ease-mech);
}
.pd-carousel__nav:hover { background: var(--altida-yellow); color: var(--altida-black); }
.pd-carousel__nav:focus-visible { outline: 2px solid var(--altida-yellow); outline-offset: 3px; }
.pd-carousel__nav svg { width: 24px; height: 24px; }
.pd-carousel__nav--prev { left: clamp(10px, 1.6vw, 24px); }
.pd-carousel__nav--next { right: clamp(10px, 1.6vw, 24px); }

@media (prefers-reduced-motion: reduce) {
  .pd-carousel__track { transition: none; }
  .pd-carousel__slide { transition: none; }
  .pd-carousel__nav { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   2026-07-01 ELEVATION LAYER — the site standard applied to the project
   case-study template (6 pages + hub chrome). Look-and-feel only.
   ════════════════════════════════════════════════════════════════════ */
/* Project File sidebar → floated card */
.pd-file{background:color-mix(in srgb,var(--altida-white),var(--altida-bone));
  border:1px solid var(--grey-200);border-radius:14px;
  padding:clamp(1.4rem,2vw,1.9rem);
  box-shadow:0 34px 64px -30px rgba(10,10,10,.30),0 10px 24px -12px rgba(10,10,10,.12)}
.pd-file__row{border-top:1px solid var(--grey-200);padding:.8rem 0}
.pd-file__row:first-child{border-top:0;padding-top:0}
.pd-file__v{color:rgba(10,10,10,.82)}
/* photography frames → rounded + lifted */
.pd-media__frame{border-radius:10px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(10,10,10,.32),0 8px 20px -12px rgba(10,10,10,.12)}
.pd-media__caption{color:rgba(10,10,10,.66)}
.pd-carousel__slide{border-radius:10px;overflow:hidden}
/* brief list → slash-marked rows */
.pd-list li{position:relative;padding-left:2.1rem}
.pd-list li::before{content:"";position:absolute;left:0;top:.32em;width:14px;height:14px;
  background:var(--altida-yellow);clip-path:polygon(0 0,68% 0,100% 100%,32% 100%);
  filter:drop-shadow(0 3px 5px rgba(10,10,10,.14))}
/* approach sub-heads → slash prefix (the trust-strip motif) */
.pd-h{position:relative}
.pd-row .pd-body .pd-h{padding-left:1.6rem}
.pd-row .pd-body .pd-h::before{content:"";position:absolute;left:0;top:.22em;width:13px;height:13px;
  background:var(--altida-yellow);clip-path:polygon(0 0,68% 0,100% 100%,32% 100%)}
/* prose contrast floor */
.pd-p{color:rgba(10,10,10,.74)}
/* Project File keys — readable on the card ground */
.pd-file__k{color:rgba(10,10,10,.56)}

/* 2026-07-02: the Project File title was white from the old dark sidebar —
   invisible (1:1) on the new light card. */
.pd-file__title{color:rgba(10,10,10,.56)}

/* 2026-07-02 mobile polish — touch hit-area for the hub link. */
@media (pointer: coarse) {
  .pd-related__all { padding-block: 9px; margin-block: -9px; }
}