/* =====================================================================
   Approach — pinned, stacking numbered rows
   File: 17-approach.css
   Colours come from the CMS (--pr-bg / --pr-fg set inline by Approach.jsx).
   ===================================================================== */

.pr-section{
  --pr-strip:clamp(78px,8.5vw,120px); --pr-offset:96px;
  background:var(--pr-bg); color:var(--pr-fg);
  position:relative;
}
.pr-intro{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,140px) 40px clamp(60px,9vh,110px); }
.pr-intro p{ max-width:34ch; font-size:clamp(15px,1.25vw,19px); line-height:1.35; color:var(--pr-fg); font-weight:500; margin:0; }

.pr-list{ position:relative; }

.pr-row{
  position:sticky;
  background:var(--pr-bg);
  border-top:1px solid color-mix(in srgb, var(--pr-fg) 18%, transparent);
  min-height:82vh;
  display:grid;
  grid-template-columns:minmax(70px,12%) minmax(0,1fr) minmax(240px,31%);
  grid-template-rows:var(--pr-strip) auto;
  column-gap:clamp(16px,3vw,48px);
  padding:0 max(40px, calc((100vw - var(--maxw)) / 2 + 40px));
}
.pr-line{
  position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--pr-fg);
  transform:scaleX(0); transform-origin:left; pointer-events:none;
}

.pr-no{ grid-column:1; grid-row:1; padding-top:12px; font-family:var(--font-heading); font-weight:800; font-size:clamp(26px,3.4vw,52px); line-height:1; letter-spacing:-.03em; }
.pr-title{
  grid-column:2; grid-row:1; padding-top:10px; margin:0;
  font-family:var(--font-heading); font-weight:800; text-transform:uppercase;
  font-size:clamp(40px,6vw,92px); line-height:.95; letter-spacing:-.035em; color:var(--pr-fg);
}
.pr-desc{ grid-column:3; grid-row:1; padding-top:16px; margin:0; font-size:clamp(12px,.95vw,14px); line-height:1.35; color:var(--pr-fg); max-width:38ch; }

.pr-body{ grid-column:2; grid-row:2; padding-top:clamp(36px,7vh,80px); }
.pr-tag{ display:block; font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.pr-body ul{ list-style:none; margin:0; padding:0; }
.pr-body li{ font-size:clamp(14px,1.1vw,17px); line-height:1.3; }


.pr-cursor{
  position:fixed; left:0; top:0; z-index:60; display:none; pointer-events:none;
  background:#fff; color:#111; padding:4px 8px; white-space:nowrap;
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
}
@media(hover:none){ .pr-cursor{ display:none !important; } }

@media(max-width:860px){
  .pr-section{ --pr-strip:64px; --pr-offset:84px; }
  .pr-intro{ padding:80px 22px 56px; }
  .pr-row{ min-height:70vh; grid-template-columns:44px minmax(0,1fr); grid-template-rows:var(--pr-strip) auto auto; padding:0 22px; column-gap:12px; }
  .pr-title{ font-size:clamp(30px,9vw,48px); }
  .pr-no{ font-size:22px; }
  .pr-desc{ grid-column:2; grid-row:2; padding-top:6px; max-width:none; }
  .pr-body{ grid-row:3; padding-top:24px; }
}