#approach .approach-shell { grid-template-columns:minmax(270px,.62fr) minmax(0,1.58fr); gap:clamp(24px,3vw,48px); margin-top:64px; }
.project-system__summary { align-self:end; display:grid; gap:16px; max-width:590px; }
.project-system__eyebrow { display:inline-flex; align-items:center; gap:12px; width:max-content; color:#efe158; font-size:11px; font-weight:800; letter-spacing:.1em; }
.project-system__eyebrow::before { content:''; width:30px; height:1px; background:currentColor; }
.project-system__summary p { margin:0; max-width:48ch; color:#c9d0d2; font-size:clamp(14px,1.12vw,17px); line-height:1.55; }
.project-system__summary small { max-width:44ch; color:#a9b7bb; font-size:11px; line-height:1.5; }
.method-steps { border-top:1px solid #f1efe633; min-width:0; }
.method-step { border-bottom:1px solid #f1efe633; padding:22px 0; }
.method-step h3,.method-step p { margin:0; }
.method-step h3 button { display:grid; grid-template-columns:30px 1fr; gap:14px; width:100%; text-align:left; border:0; background:none; padding:0; color:#c4c9c7; cursor:pointer; }
.method-step h3 button > span:first-child { font-family:Archivo,sans-serif; font-size:11px; padding-top:5px; font-variant-numeric:tabular-nums; }
.method-step__title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(28px,2.5vw,40px); font-weight:700; line-height:1; text-wrap:balance; }
.method-step__short { display:none; }
.method-step p { padding:16px 0 0 44px; color:#b9c3c6; font-size:12px; line-height:1.65; }
.method-enabled .method-step:not(.is-active) p { display:none; }
.method-step.is-active h3 button,.method-step h3 button:hover { color:#efe158; }
.method-step button:focus-visible,.method-panel button:focus-visible,.method-canvas:focus-visible { outline:2px solid #efe158; outline-offset:4px; }
.method-panel { position:sticky; top:100px; min-width:0; }
.method-figure { position:relative; margin:0; height:clamp(630px,49vw,740px); border:1px solid #f1efe626; background:#0d202c; overflow:hidden; }
.method-canvas,.method-fallback { display:block; position:absolute; inset:0; width:100%; height:100%; }
.method-canvas { touch-action:pan-y; }
.method-fallback { object-fit:contain; }
.method-canvas[hidden],.method-fallback[hidden],.method-panel [hidden] { display:none; }
.method-tools { position:absolute; top:18px; left:20px; right:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; pointer-events:none; }
.method-view { font-size:11px; line-height:1.5; letter-spacing:.06em; text-transform:uppercase; color:#d1d9d9; max-width:45%; }
.method-light { pointer-events:auto; display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; background:#091521; border:1px solid #67757a; color:#e9eeec; cursor:pointer; font-size:11px; }
.method-light svg { width:18px; height:18px; flex:none; }
.method-light[aria-pressed=true] { border-color:#efe158; color:#efe158; }
.method-light:disabled { cursor:default; opacity:.55; }
.method-label { position:absolute; top:0; left:0; padding:5px 8px; border-left:1px solid #efe158; background:#091521ee; color:#f1efe6; font-size:11px; letter-spacing:.04em; white-space:nowrap; text-transform:uppercase; pointer-events:none; }
.method-caption { position:absolute; bottom:18px; left:20px; right:20px; color:#becbce; font-size:11px; line-height:1.6; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.method-caption p { margin:0; max-width:60ch; }
.method-reset { border:0; border-bottom:1px solid currentColor; background:none; padding:10px 0; min-height:44px; color:#efe158; cursor:pointer; white-space:nowrap; font-size:11px; }
.method-scope { margin-top:18px; }
.method-parts { display:flex; flex-wrap:wrap; gap:6px; }
.method-parts button { min-height:44px; padding:8px 12px; border:1px solid #f1efe640; background:none; color:#c5d0d3; font-size:11px; cursor:pointer; }
.method-parts button[aria-pressed=true] { background:#efe158; color:#091521; border-color:#efe158; }
.method-detail,.method-status,.method-instructions { color:#becbce; font-size:12px; line-height:1.65; margin:12px 0 0; }
.method-status { color:#efe158; }
.method-instructions { color:#a9b7bb; font-size:11px; }
@media(max-width:1000px) {
  #approach .approach-shell { grid-template-columns:1fr; gap:24px; }
  .method-panel { position:relative; top:auto; }
  .method-enabled .method-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:8px; }
  .method-enabled .method-step { display:contents; }
  .method-enabled .method-step h3 { grid-row:1; min-width:0; padding:16px 0; border-bottom:1px solid #f1efe640; }
  .method-enabled .method-step h3 button { display:flex; flex-direction:column; gap:10px; min-height:65px; }
  .method-enabled .method-step__title { display:none; }
  .method-enabled .method-step__short { display:block; font-family:'Barlow Condensed',sans-serif; font-size:clamp(14px,3.6vw,24px); line-height:1.1; text-transform:uppercase; }
  .method-enabled .method-step p { grid-column:1/-1; grid-row:2; padding:16px 0 0; font-size:13px; }
  .method-enabled .method-step:not(.is-active) p { display:none; }
  .method-figure { height:clamp(480px,76vw,700px); }
}
@media(max-width:500px) {
  .method-figure { height:490px; }
  .method-tools { left:12px; right:12px; top:12px; }
  .method-light { padding:6px 8px; font-size:11px; gap:5px; }
  .method-label { font-size:11px; }
  .method-caption { left:12px; right:12px; bottom:12px; font-size:11px; gap:10px; }
  .method-reset { font-size:11px; }
}
@media print {
  .method-canvas,.method-tools,.method-label,.method-reset,.method-scope,.method-instructions,.method-status { display:none!important; }
  .method-fallback[hidden] { display:block!important; }
  .method-enabled .method-step p { display:block!important; }
  .method-steps { display:block; }.method-step { display:block; }
}