/* ============================================================
   capabilities.css — thirteen disciplines, one at a time.
   ============================================================ */

.cap-hero{padding:clamp(34px,6vw,74px) 0 clamp(30px,4vw,58px)}
.cap-hero h1{margin:16px 0 clamp(26px,3.4vw,48px)}
.cap-hero-foot{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,60px);
  align-items:end;border-top:var(--rule) solid var(--hair);padding-top:24px}
.cap-hero-foot .mono{font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
@media (max-width:820px){.cap-hero-foot{grid-template-columns:1fr}}

/* ---------- List + sticky detail ---------- */
.cap-body{padding-bottom:var(--pad-y)}
.cap-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.6vw,70px);align-items:start;border-top:var(--rule) solid var(--hair)}
.cap-list{display:grid}
.cap-row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(12px,1.6vw,26px);text-align:left;padding:clamp(13px,1.5vw,20px) 0;
  border-bottom:var(--rule) solid var(--hair);color:var(--fg-dim);
  transition:color .3s var(--ease),padding-left .35s var(--ease)}
.cap-n{font-size:10.5px;letter-spacing:.14em;opacity:.6}
.cap-name{font-size:clamp(1.4rem,2.6vw,2.5rem);line-height:1;transition:color .3s var(--ease)}
.cap-kicker{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;text-align:right;
  opacity:0;transition:opacity .3s var(--ease)}
.cap-row:hover{color:var(--fg);padding-left:10px}
.cap-row:hover .cap-kicker{opacity:.7}
.cap-row[aria-selected="true"]{color:var(--fg);padding-left:14px}
.cap-row[aria-selected="true"] .cap-name{color:var(--accent)}
.cap-row[aria-selected="true"] .cap-kicker{opacity:1;color:var(--accent)}

.cap-detail{position:sticky;top:96px;padding:clamp(24px,2.8vw,42px);
  border:var(--rule) solid var(--hair);background:var(--bg-2);
  border-top:2px solid var(--accent)}
.cap-detail:focus-visible{outline-offset:4px}
.cap-detail .mono{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase}
.cap-detail h2{margin:14px 0 18px}
.cap-detail p{color:var(--fg-dim);font-size:1.02rem;line-height:1.62;max-width:46ch}
.cap-d-lbl{display:block;margin:26px 0 12px;font-size:10.5px;letter-spacing:.17em}
.cap-detail ul{display:grid;gap:0;border-top:var(--rule) solid var(--hair)}
.cap-detail li{list-style:none;padding:11px 0 11px 22px;position:relative;font-size:.96rem;
  border-bottom:var(--rule) solid var(--hair)}
.cap-detail li::before{content:'';position:absolute;left:2px;top:1.05em;width:8px;height:1px;
  background:var(--accent)}
.cap-d-cost{margin-top:22px;font-family:var(--f-serif);font-style:italic;
  font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.4;color:var(--fg)!important;max-width:34ch}
.cap-detail.swap{opacity:.28}
.cap-detail{transition:opacity .22s var(--ease)}

@media (max-width:900px){
  .cap-in{grid-template-columns:1fr}
  .cap-detail{position:static;order:-1;margin-bottom:8px}
  .cap-kicker{display:none}
}

/* ---------- Process ---------- */
.cap-process{padding:var(--pad-y) 0;border-top:var(--rule) solid var(--hair);background:var(--bg-2)}
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border-top:var(--rule) solid var(--hair);counter-reset:none}
.phase{list-style:none;padding:clamp(20px,2vw,32px) clamp(16px,1.6vw,26px) clamp(30px,4vw,60px);
  border-right:var(--rule) solid var(--hair)}
.phase:last-child{border-right:0}
.phase .mono{font-size:11px;letter-spacing:.18em}
.phase h3{font-size:clamp(1.1rem,1.5vw,1.4rem);letter-spacing:-.02em;margin:16px 0 10px;
  font-weight:var(--disp-wght)}
.phase p{color:var(--fg-dim);font-size:.92rem;line-height:1.6}
@media (max-width:980px){
  .phases{grid-template-columns:1fr 1fr}
  .phase{border-bottom:var(--rule) solid var(--hair);padding-bottom:clamp(20px,3vw,34px)}
  .phase:nth-child(2n){border-right:0}
}
@media (max-width:600px){.phases{grid-template-columns:1fr}.phase{border-right:0}}

/* ---------- Pricing ---------- */
.pricing{padding:var(--pad-y) 0;border-top:var(--rule) solid var(--hair)}
.tier{border:var(--rule) solid var(--hair)}
.tier--main{border-top:2px solid var(--accent)}
.tier-head{display:grid;grid-template-columns:1fr auto;gap:clamp(22px,3.4vw,60px);align-items:end;
  padding:clamp(24px,3vw,44px);border-bottom:var(--rule) solid var(--hair)}
.tier-head .mono{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.tier-head p{margin-top:14px;color:var(--fg-dim);max-width:38ch;font-size:1rem;line-height:1.6}
.tier-price{display:flex;align-items:flex-end;gap:clamp(14px,2vw,30px)}
.tier-price .disp{display:grid;gap:6px}
.tier-price b{font-family:var(--f-disp);font-weight:var(--disp-wght);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:clamp(2.3rem,5vw,4.6rem);line-height:.9;letter-spacing:-.045em}
.tier-price i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-dim)}
.tier-plus{font-family:var(--f-mono);color:var(--accent);font-size:1.4rem;padding-bottom:.5em}
.tier-cols{display:grid;grid-template-columns:1fr 1fr}
.tier-cols>div{padding:clamp(22px,2.6vw,38px)}
.tier-cols>div:first-child{border-right:var(--rule) solid var(--hair)}
.tier-cols .mono{display:block;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:16px}
.tier-cols ul{display:grid}
.tier-cols li{list-style:none;padding:10px 0;border-bottom:var(--rule) solid var(--hair);
  font-size:.96rem;color:var(--fg)}
.tier-cols li:last-child{border-bottom:0}
.tier--alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,50px);
  padding:clamp(24px,3vw,44px);margin-top:clamp(16px,2vw,28px);align-items:center}
.tier--alt .mono{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.tier--alt h3{margin-top:14px}
.tier--alt p{color:var(--fg-dim);line-height:1.65;max-width:46ch}
.cap-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,40px);
  margin-top:clamp(30px,4vw,56px)}
@media (max-width:820px){
  .tier-head,.tier-cols,.tier--alt{grid-template-columns:1fr}
  .tier-cols>div:first-child{border-right:0;border-bottom:var(--rule) solid var(--hair)}
}


/* ══════════ What happens after the form — moved off the homepage ══════════
   Six steps and nine tool chips is a systems diagram, and a systems
   diagram is not a homepage. It belongs here, where somebody has
   already decided they want to know how the thing works. */
.engine{border-top:var(--rule) solid var(--hair);padding-block:var(--pad-y)}
.eng-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(26px,4vw,72px);
  align-items:start}
.eng-form{display:grid;gap:16px;padding:clamp(20px,2.4vw,34px);border:var(--rule) solid var(--hair);
  border-radius:var(--radius);background:var(--bg-2);align-self:start;position:sticky;top:110px}
.field{display:grid;gap:7px}
.field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim)}
.field input,.field select,.field textarea{background:var(--bg);border:var(--rule) solid var(--hair);
  border-radius:var(--radius);padding:13px 14px;min-height:48px;color:var(--fg);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.eng-form .mono{line-height:1.5}
.eng-steps{display:grid;gap:0;position:relative;counter-reset:s}
.eng-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding-block:clamp(14px,1.7vw,22px);
  border-bottom:var(--rule) solid var(--hair);opacity:.32;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.eng-step.on{opacity:1}
.eng-step.done{opacity:.62}
.eng-step>span:last-child{display:grid;gap:5px}
.eng-step b{font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.02em;font-weight:600}
.eng-txt{font-size:14.5px;color:var(--fg-dim);line-height:1.5}
.eng-ring{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:var(--rule) solid var(--hair);font-family:var(--f-mono);font-size:12px;
  transition:background .4s var(--ease),color .4s,border-color .4s,scale .4s var(--ease)}
.eng-step.on .eng-ring{background:var(--accent);color:var(--fg-inv);border-color:var(--accent);scale:1.08}
.eng-step.done .eng-ring{border-color:var(--accent);color:var(--accent)}
.eng-phone{margin-top:24px;padding:16px 18px;border-radius:var(--radius);
  border:var(--rule) solid var(--accent);background:var(--bg-2);display:grid;gap:8px;
  opacity:0;translate:0 14px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
.eng-phone.on{opacity:1;translate:0}
.eng-phone .mono{color:var(--accent)}
.eng-phone b{font-weight:500;font-size:15px}
.eng-claim{margin-top:clamp(50px,7vw,110px);max-width:26ch}
.eng-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.eng-tools span{padding:8px 13px;border:var(--rule) solid var(--hair);border-radius:var(--radius)}
@media (max-width:960px){.eng-grid{grid-template-columns:1fr}.eng-form{position:static}}