/* ============================================================
   SUPER GROUP — Projects division
   Building Remediation & Project Management.
   Themed via [data-div="projects"] (red: --div-a #ef4136 / --div-b #b3121b,
   --accent #d92027). Reuses the core design system; only the components
   unique to this page live here.
   ============================================================ */

/* ---------- Positioning band ---------- */
.positioning { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.positioning .pos-lead .kicker { margin-bottom: 18px; }
.positioning .pos-tag {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 800; color: var(--div-a);
  letter-spacing: -0.01em; margin-bottom: 16px;
}
.positioning .pos-statement {
  font-size: clamp(1.3rem, 2.6vw, 1.95rem); font-weight: 800; line-height: 1.18;
  letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
}
.positioning .pos-statement b { color: var(--div-a); }
.positioning .pos-note { margin-top: 22px; font-size: 0.96rem; color: var(--body-ink); max-width: 46ch; }
@media (max-width: 880px) { .positioning { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Capability pillars ---------- */
.pillar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: clip; margin-top: clamp(28px, 4vw, 44px);
}
.pillar {
  position: relative; background: var(--white); padding: clamp(26px, 3vw, 38px) clamp(24px, 2.6vw, 34px);
  transition: background 0.3s var(--ease-out);
}
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--div-a), var(--div-b));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out);
}
.pillar:hover { background: var(--mist); }
.pillar:hover::before { transform: scaleX(1); }
.pillar .pl-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  color: var(--accent); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--div-a) 9%, #fff));
  border: 1px solid color-mix(in srgb, var(--div-a) 18%, var(--line));
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.45s var(--ease-out);
}
.pillar .pl-icon .ic { width: 26px; height: 26px; }
.pillar:hover .pl-icon { transform: translateY(-2px); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--div-a) 15%, #fff)); }
.pillar .pl-no {
  position: absolute; top: clamp(22px, 2.6vw, 30px); right: clamp(20px, 2.2vw, 30px);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; color: #b9bdc3; font-variant-numeric: tabular-nums;
}
.pillar h3 { margin: 18px 0 10px; font-size: clamp(1.1rem, 1.7vw, 1.32rem); }
.pillar p { font-size: 0.92rem; color: var(--body-ink); }
.pillar .pl-scope { display: block; margin-top: 10px; font-size: 0.82rem; color: #7b8087; }

.capability-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }
.cap-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600; color: var(--body-ink);
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white);
}
.cap-pill--lead {
  border-color: transparent; background: var(--accent); color: var(--accent-on); font-weight: 700;
}
.cap-pill--lead .cp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-on); }
.cap-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #7b8087; margin-right: 4px; }

/* ---------- Managed-side value ticks (scoped to Projects) ----------
   Root icon fix restores the check glyph; this adds a soft accent ring
   so the tick-in-circle reads clearly as the value the managed model adds. */
[data-div="projects"] .compare-col--sg .mark {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
[data-div="projects"] .compare-col--sg li { align-items: center; }

/* ---------- "How we work" — two clearly separated pathways ----------
   Each pathway (A / B) is a big, distinct block; its phase steps render as
   small motion tiles laid out left-to-right (shared .ptile* in styles.css)
   so the whole process reads on one screen. Driven by projects3d.js. */
.how-lede { color: #aeb3b9; max-width: 64ch; margin: -4px 0 clamp(30px, 4vw, 48px); font-size: clamp(1rem, 1.4vw, 1.12rem); }

.proc { margin-top: clamp(40px, 6vw, 72px); }
.proc + .proc { margin-top: clamp(56px, 9vw, 120px); border-top: 1px solid var(--line-dark); padding-top: clamp(48px, 7vw, 90px); }
.proc-head { display: flex; align-items: center; gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(26px, 3.4vw, 40px); }
.proc-head .ph-key {
  display: inline-grid; place-items: center; flex: none;
  width: clamp(58px, 6vw, 80px); height: clamp(58px, 6vw, 80px); border-radius: 16px;
  background: var(--accent); color: var(--accent-on); font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.5rem); box-shadow: 0 14px 32px -16px var(--div-b);
}
.proc-head .proc-head-txt h3 { color: var(--white); font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.04; letter-spacing: -0.02em; }
.proc-head .ph-meta { display: block; margin-top: 7px; font-size: clamp(0.86rem, 1.1vw, 1rem); font-weight: 600; color: #9aa0a6; letter-spacing: 0.01em; }

.proc .pathway-cta { margin-top: clamp(20px, 2.4vw, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.proc .pathway-cta .pc-note { font-size: 0.86rem; color: #9aa0a6; font-style: italic; max-width: 34ch; }

/* ---------- Featured work (case studies) ---------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 32px); }
.case-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: clip; background: var(--white);
  display: flex; flex-direction: column; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.case-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(16,17,20,0.5); }
.case-compare {
  position: relative; aspect-ratio: 16 / 9; overflow: clip;
  background: linear-gradient(135deg, #15171b, #0a0b0d);
}
.case-compare .cc-half {
  position: absolute; top: 0; bottom: 0; width: 50%; display: grid; place-items: center;
  background-size: cover; background-position: center;
}
.case-compare .cc-before { left: 0; border-right: 1px solid rgba(255,255,255,0.18); }
.case-compare .cc-after { right: 0; }
/* Placeholder texture until real before/after photography is dropped in */
.case-compare .cc-half[data-ph] {
  background-image:
    radial-gradient(120% 120% at 30% 0%, color-mix(in srgb, var(--div-b) 22%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, #16181c, #16181c 11px, #101216 11px, #101216 22px);
}
.case-compare .cc-after[data-ph] {
  background-image:
    radial-gradient(120% 120% at 70% 100%, color-mix(in srgb, var(--div-a) 26%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, #1b1d22, #1b1d22 11px, #141519 11px, #141519 22px);
}
/* TEMP placeholder photography wired via --img (Higgsfield-generated).
   The hatch gradients stay as a graceful fallback if an image fails to load.
   Replace --img URLs with self-hosted real job photography before launch. */
.case-compare .cc-half.has-photo {
  background-image: var(--img),
    radial-gradient(120% 120% at 30% 0%, color-mix(in srgb, var(--div-b) 22%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, #16181c, #16181c 11px, #101216 11px, #101216 22px);
  background-size: cover, auto, auto; background-position: center;
}
.case-compare .cc-tag {
  position: absolute; bottom: 12px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: #fff; background: rgba(8,9,11,0.6); padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.case-compare .cc-tag.b { left: 12px; } .case-compare .cc-tag.a { right: 12px; }
.case-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.case-body .case-name { font-weight: 800; font-size: 1.08rem; color: var(--ink); letter-spacing: -0.01em; }
.case-body .case-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #7b8087; margin-top: -4px; }
.case-body .case-loc .ic { width: 0.95em; height: 0.95em; }
.case-body .case-meta {
  font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.case-body .case-meta .sep { color: var(--div-b); font-weight: 700; margin: 0 6px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.scope-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--body-ink); background: var(--mist); padding: 5px 11px; border-radius: 999px; }
.case-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.case-link .ic { width: 1.05em; height: 1.05em; transition: transform 0.25s var(--ease-out); }
.case-card:hover .case-link .ic { transform: translateX(4px); }
@media (max-width: 760px) { .case-grid { grid-template-columns: 1fr; } }

/* ---------- Project grid (filterable) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(24px, 3vw, 36px); }
.filter-pill {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: var(--body-ink);
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white);
  cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.filter-pill:hover { border-color: var(--concrete); }
.filter-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.work-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; background: var(--white);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.3s, scale 0.3s;
}
.work-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(16,17,20,0.45); }
.work-card.is-hidden { display: none; }
.work-photo {
  aspect-ratio: 4 / 3; background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--div-b) 20%, transparent), transparent 55%),
    repeating-linear-gradient(45deg, #16181c, #16181c 12px, #101216 12px, #101216 24px);
  position: relative;
}
.work-photo .wp-cat { position: absolute; left: 12px; top: 12px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(8,9,11,0.55); padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* TEMP placeholder photography (Higgsfield-generated) layered over the hatch
   fallback; swap --img for self-hosted real photos before launch. */
.work-photo.has-photo {
  background-image: var(--img),
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--div-b) 20%, transparent), transparent 55%),
    repeating-linear-gradient(45deg, #16181c, #16181c 12px, #101216 12px, #101216 24px);
  background-size: cover, auto, auto; background-position: center;
}
.work-info { padding: 18px 20px 22px; }
.work-info h4 { font-size: 1rem; font-weight: 800; color: var(--ink); text-transform: none; letter-spacing: -0.01em; margin-bottom: 6px; }
.work-info .wi-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #7b8087; }
.work-info .wi-loc .ic { width: 0.95em; height: 0.95em; }

/* ---------- 3-up stats variant ---------- */
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid--3 .stat--hero .num { color: var(--accent); }
@media (max-width: 760px) {
  .stats-grid--3 { grid-template-columns: 1fr; }
  .stats-grid--3 .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stats-grid--3 .stat:first-child { border-top: 0; }
}

/* ---------- Trusted-by inline row (hero) ---------- */
.trusted { font-size: 0.88rem; color: #9aa0a6; margin: 22px 0 18px; }
.trusted b { color: #fff; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.74rem; margin-right: 8px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.hero-pill { font-size: 0.78rem; font-weight: 600; color: #d4d7db; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); }

/* ---------- Division capability icons (line set, matches icons.css family) ---------- */
.ic--roof{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2011.5L12%205l9%206.5%27%2F%3E%3Cpath%20d%3D%27M5.5%2010v9h13v-9%27%2F%3E%3Cpath%20d%3D%27M10.5%2019v-4.6h3V19%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2011.5L12%205l9%206.5%27%2F%3E%3Cpath%20d%3D%27M5.5%2010v9h13v-9%27%2F%3E%3Cpath%20d%3D%27M10.5%2019v-4.6h3V19%27%2F%3E%3C%2Fsvg%3E"); }
.ic--reclad{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2711%27%20height%3D%2714%27%2F%3E%3Cpath%20d%3D%27M3%209.7h11M3%2014.3h11%27%2F%3E%3Cpath%20d%3D%27M16.5%208l4.5-1.6v10.2l-4.5%201.4z%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2711%27%20height%3D%2714%27%2F%3E%3Cpath%20d%3D%27M3%209.7h11M3%2014.3h11%27%2F%3E%3Cpath%20d%3D%27M16.5%208l4.5-1.6v10.2l-4.5%201.4z%27%2F%3E%3C%2Fsvg%3E"); }
.ic--interior{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2710%27%20height%3D%275%27%20rx%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M13%206.5h3.6v3.4h-5.1v2%27%2F%3E%3Crect%20x%3D%279.3%27%20y%3D%2711.9%27%20width%3D%273%27%20height%3D%277.1%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2710%27%20height%3D%275%27%20rx%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M13%206.5h3.6v3.4h-5.1v2%27%2F%3E%3Crect%20x%3D%279.3%27%20y%3D%2711.9%27%20width%3D%273%27%20height%3D%277.1%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E"); }
.ic--insurance{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7%203v5c0%204.4-3%207.7-7%209-4-1.3-7-4.6-7-9V6z%27%2F%3E%3Cpath%20d%3D%27M8.7%2011.8l2.2%202.2%204.4-4.6%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7%203v5c0%204.4-3%207.7-7%209-4-1.3-7-4.6-7-9V6z%27%2F%3E%3Cpath%20d%3D%27M8.7%2011.8l2.2%202.2%204.4-4.6%27%2F%3E%3C%2Fsvg%3E"); }

/* ---------- Project detail pages (project-*.html) ---------- */
.project-hero { position: relative; overflow: clip; padding-top: clamp(118px, 16vh, 178px); padding-bottom: clamp(40px, 6vw, 72px); }
.project-hero > .container { position: relative; z-index: 1; }
/* Back link (matches the Building Wash "up" affordance) */
.pd-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #9aa0a6; margin-bottom: 18px; transition: color 0.2s var(--ease-out), gap 0.2s var(--ease-out); }
.pd-back:hover { color: #fff; gap: 12px; }
.pd-back .ic { width: 1.05em; height: 1.05em; transform: rotate(180deg); }
.project-hero .crumbs { margin-bottom: 16px; }
.project-hero h1.display { margin: 14px 0 14px; font-size: clamp(2rem, 5.2vw, 3.4rem); }
.project-hero .lede { max-width: 60ch; }
.project-hero .pd-loc { display:inline-flex; align-items:center; gap:7px; color:#9aa0a6; font-size:0.9rem; margin-top:12px; }
.project-hero .pd-loc .ic { width:1em; height:1em; }

.pd-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--radius-lg); overflow:clip; margin-top:clamp(26px,4vw,40px); }
.pd-stat { background:#0c0d10; padding:clamp(18px,2.4vw,26px) clamp(16px,2vw,24px); }
.pd-stat .num { display:block; font-size:clamp(1.3rem,2.8vw,1.9rem); font-weight:900; color:#fff; letter-spacing:-0.02em; line-height:1; }
.pd-stat .lbl { display:block; margin-top:7px; font-size:0.8rem; color:#9aa0a6; }
@media (max-width:680px){ .pd-stats{ grid-template-columns:1fr 1fr; } }

.pd-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,20px); }
.pd-shot { border-radius:var(--radius-lg); overflow:clip; aspect-ratio:16/10; position:relative; border:1px solid var(--line);
  background-image: var(--img), repeating-linear-gradient(45deg,#16181c,#16181c 12px,#101216 12px,#101216 24px);
  background-size:cover, auto; background-position:center; }
.pd-shot--wide { grid-column:1 / -1; aspect-ratio:16/7; }
.pd-shot .pd-cap { position:absolute; left:12px; bottom:12px; font-size:0.62rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:#fff; background:rgba(8,9,11,0.6); padding:6px 12px; border-radius:999px; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
@media (max-width:680px){ .pd-gallery{ grid-template-columns:1fr; } }

.pd-body { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start; }
.pd-col h2 { margin:0 0 12px; }
.pd-col h2:not(:first-child){ margin-top:clamp(26px,3vw,40px); }
.pd-col p { color:var(--body-ink); margin-bottom:12px; }
.pd-aside { border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,2.6vw,30px); background:var(--white); position:sticky; top:96px; }
.pd-aside h3 { font-size:1.05rem; margin-bottom:16px; }
.pd-scopelist { display:grid; gap:13px; }
.pd-scopelist li { display:flex; gap:12px; align-items:center; font-size:0.94rem; color:var(--body-ink); }
.pd-scopelist .mark { flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-on); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent); }
.pd-scopelist .mark .ic { width:60%; height:60%; }
@media (max-width:820px){ .pd-body{ grid-template-columns:1fr; } .pd-aside{ position:static; } }

.pd-solve { display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:clamp(16px,2vw,24px); }
.pd-solve .pd-step { border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.4vw,28px); background:var(--white); }
.pd-solve .pd-step .ix { width:34px; height:34px; border-radius:10px; background:color-mix(in srgb,var(--accent) 12%,#fff); color:var(--accent); display:grid; place-items:center; margin-bottom:13px; }
.pd-solve .pd-step .ix .ic { width:56%; height:56%; }
.pd-solve .pd-step h4 { font-size:1.02rem; margin-bottom:6px; }
.pd-solve .pd-step p { font-size:0.9rem; color:var(--body-ink); }

.pd-outcome { border-radius:var(--radius-lg); padding:clamp(28px,4vw,48px); background:linear-gradient(150deg, color-mix(in srgb,var(--div-b) 18%,#0a0b0d), #0a0b0d 70%); border:1px solid color-mix(in srgb,var(--div-a) 26%,var(--line-dark)); }
.pd-outcome .kicker { color:var(--div-a); }
.pd-outcome h2 { color:#fff; max-width:26ch; }
.pd-outcome p { color:#c4c8cd; max-width:62ch; margin-top:12px; }
.pd-note { margin-top:18px; font-size:0.82rem; color:#9aa0a6; font-style:italic; max-width:60ch; }

/* ---------- Back-link to Super Group (mirrors Building Wash .bw-up) ---------- */
.main-nav .nav-up {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: clamp(6px, 1vw, 14px); padding-left: clamp(12px, 1.6vw, 22px);
  border-left: 1px solid rgba(255,255,255,0.12); color: #9aa0a6;
  font-size: 0.82rem; letter-spacing: 0.04em;
}
.main-nav .nav-up:hover { color: var(--div-a); }
.main-nav .nav-up .ic { width: 13px; height: 13px; }
.mn-up {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; margin-top: 6px; font-size: 1.15rem; font-weight: 700;
  color: var(--div-a); border-bottom: 1px solid var(--line-dark);
}
.mn-up .ic { width: 16px; height: 16px; }