/* About page — "About me" story body.
   Layout rules for the Philosophy / Process / Experience / Industries
   blocks; the per-element styling lives inline on the markup. */

/* Pure black, not the site's #050505 charcoal. The story sections paint their
   own black fills, so the page background has to match exactly or a seam shows
   between them. html carries no background of its own, so this propagates to
   the canvas and covers the overscroll area too. */
.about-page { background: #000; }

[data-ind-row]:hover > span { color: rgb(53, 224, 127) !important; }
  [data-ind-row]:hover > div > div { color: #ffffff !important; }
  [data-ind-row]:hover > div > p { color: rgba(255, 255, 255, 0.78) !important; }

  /* ---------- TABLET ---------- */
  @media (max-width: 1024px) {
    [data-proc-grid] { grid-template-columns: 1fr 1fr !important; row-gap: 54px !important; column-gap: 32px !important; }
  }
  /* ---------- MOBILE / tablet portrait ---------- */
  @media (max-width: 900px) {
    section[data-screen-label] { padding: 68px 22px !important; }
    /* Philosophy */
    [data-phil-grid] { display: block !important; }
    [data-phil-head] { padding: 0 0 40px !important; }
    [data-phil-head] h2, [data-phil-head] p { margin-left: 0 !important; max-width: 100% !important; }
    [data-phil-pad] { padding: 0 !important; }
    [data-phil-cards] { grid-template-columns: 1fr 1fr !important; gap: 26px 0 !important; }
    [data-phil-cards] > div { padding: 0 !important; border-left: none !important; }
    /* Things I believe (orbs) */
    [data-proc-grid] { grid-template-columns: 1fr !important; row-gap: 44px !important; }
    /* Experience */
    [data-exp-hero] { display: block !important; }
    [data-exp-hero] > * { grid-column: auto !important; max-width: 100% !important; margin-top: 0 !important; }
    [data-exp-hero] > div:last-child { margin-top: 30px !important; padding: 26px 22px !important; }
    [data-metrics] { grid-template-columns: 1fr 1fr !important; row-gap: 34px !important; column-gap: 22px !important; }
    [data-metrics] > div > div:first-child { font-size: 24px !important; white-space: normal !important; }
    /* Industries + Approach */
    [data-ind-grid] { display: block !important; }
    [data-ind-grid] > div:first-child { border-right: none !important; padding-right: 0 !important; }
    [data-ind-grid] > div:last-child { margin-top: 64px !important; }
    [data-appr-tags] { display: none !important; }
    /* Approach diagram: drop the absolute corner lines/labels, center the image */
    [data-dc-tpl="152"] { text-align: center !important; }
    [data-dc-tpl="152"] > span { display: none !important; }
    [data-glass] { width: 82% !important; margin: 0 auto !important; }
  }